feat: adds math block

Author: Martinrsts

examples/06-custom-schema/06-math-block/.bnexample.json

@@ -0,0 +1,10 @@
+{
+  "playground": true,
+  "docs": false,
+  "author": "martinrsts",
+  "tags": ["Blocks", "Custom Schemas"],
+  "dependencies": {
+    "katex": "^0.16.18",
+    "react-icons": "^5.2.1"
+  }
+}

examples/06-custom-schema/06-math-block/App.tsx

@@ -0,0 +1,128 @@
+import React, { useState, useRef, useEffect } from "react";
+import { BlockNoteSchema, defaultInlineContentSpecs,
+  InlineContentFromConfig,
+  PartialCustomInlineContentFromConfig,
+  CustomInlineContentConfig, } from "@blocknote/core";
+import { useCreateBlockNote,
+  createReactInlineContentSpec,
+  useComponentsContext } from "@blocknote/react";
+import { BlockNoteView } from "@blocknote/ariakit";
+import katex from "katex";
+import { TbMathFunction } from "react-icons/tb";
+
+const MathBlockSchema = {
+  type: "math",
+  propSchema: {
+    rawContent: {
+      default: "a_b = c",
+    },
+  },
+  content: "none",
+} as const satisfies CustomInlineContentConfig;
+
+const MathBlockComponent: React.FC<{
+  inlineContent: InlineContentFromConfig<typeof MathBlockSchema, any>;
+  updateInlineContent: (
+    update: PartialCustomInlineContentFromConfig<typeof MathBlockSchema, any>
+  ) => void;
+}> = (props) => {
+  const Components = useComponentsContext()!;
+  const [isOpen, setIsOpen] = useState(false);
+  const [inputValue, setInputValue] = useState(
+    props.inlineContent.props.rawContent
+  );
+  const renderedRef = useRef<HTMLSpanElement>(null);
+
+  useEffect(() => {
+    katex.render(props.inlineContent.props.rawContent, renderedRef.current!, {
+      output: "mathml",
+      throwOnError: false,
+    });
+  }, [props]);
+
+  const handleClick = () => {
+    setIsOpen(!isOpen);
+  };
+
+  const handleSubmit = () => {
+    props.updateInlineContent({
+      type: MathBlockSchema.type,
+      props: { rawContent: inputValue },
+    });
+    setIsOpen(false);
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter") {
+      handleSubmit();
+    } else if (e.key === "Escape") {
+      setIsOpen(false);
+    } else if (e.key === "click") {
+      setIsOpen(false);
+    }
+  };
+
+  const handleRawContentChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setInputValue(e.target.value);
+  };
+
+  return (
+    <Components.Generic.Popover.Root opened={isOpen} position="bottom">
+      <Components.Generic.Popover.Trigger>
+        <span ref={renderedRef} onClick={handleClick} />
+      </Components.Generic.Popover.Trigger>
+      <Components.Generic.Popover.Content variant="form-popover">
+        <Components.Generic.Form.Root>
+          <Components.Generic.Form.TextInput
+            className={"bn-text-input"}
+            name="rawContent"
+            icon={<TbMathFunction />}
+            autoFocus={true}
+            placeholder="Enter your TeX code here"
+            value={inputValue}
+            onKeyDown={handleKeyDown}
+            onChange={handleRawContentChange}
+            onSubmit={handleSubmit}
+          />
+        </Components.Generic.Form.Root>
+      </Components.Generic.Popover.Content>
+    </Components.Generic.Popover.Root>
+  );
+};
+
+const MathBlock = createReactInlineContentSpec(MathBlockSchema, {
+  render: MathBlockComponent,
+});
+
+const schema = BlockNoteSchema.create({
+  inlineContentSpecs: {
+    ...defaultInlineContentSpecs,
+    math: MathBlock,
+  },
+});
+
+export default function App() {
+  const editor = useCreateBlockNote({
+    schema,
+    initialContent: [
+      {
+        type: "paragraph",
+        content: "Welcome to this demo!",
+      },
+      {
+        type: "paragraph",
+        content: [
+          "You can add a math block by typing /math and pressing enter.",
+          {
+            type: "math",
+            props: {
+              rawContent: "a_b = c",
+            },
+          },
+        ],
+      },
+    ],
+  });
+
+  return <BlockNoteView editor={editor} />;
+}

examples/06-custom-schema/06-math-block/README.md

@@ -0,0 +1,7 @@
+# Math Block
+
+In this example, we create a custom `Math` block which is used to render formulas.
+
+**Try it out:** Click on the formula to edit it.
+
+**Relevant Docs:**

examples/06-custom-schema/06-math-block/index.html

@@ -0,0 +1,14 @@
+<html lang="en">
+  <head>
+    <script>
+      <!-- AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY -->
+    </script>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Math Block</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./main.tsx"></script>
+  </body>
+</html>

examples/06-custom-schema/06-math-block/main.tsx

@@ -0,0 +1,11 @@
+// AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY
+import React from "react";
+import { createRoot } from "react-dom/client";
+import App from "./App.jsx";
+
+const root = createRoot(document.getElementById("root")!);
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);