Add a Custom Block for Katex (fixes #741)

packages/core/package.json

@@ -97,6 +97,7 @@
     "emoji-mart": "^5.6.0",
     "fast-deep-equal": "^3",
     "hast-util-from-dom": "^5.0.1",
+    "katex": "^0.16.22",
     "prosemirror-dropcursor": "^1.8.2",
     "prosemirror-highlight": "^0.13.0",
     "prosemirror-model": "^1.25.3",
@@ -121,6 +122,7 @@
   "devDependencies": {
     "@types/emoji-mart": "^3.0.14",
     "@types/hast": "^3.0.4",
+    "@types/katex": "^0.16.7",
     "@types/uuid": "^8.3.4",
     "eslint": "^8.10.0",
     "jsdom": "^25.0.1",

packages/core/src/blocks/Equation/block.ts

@@ -0,0 +1,128 @@
+import { createBlockNoteExtension } from "../../editor/BlockNoteExtension.js";
+import { createBlockConfig, createBlockSpec } from "../../schema/index.js";
+import katex from "katex";
+
+export const equationBlockConfig = createBlockConfig(
+  // No options for equation block
+  () => ({
+    type: "equation" as const,
+    propSchema: {
+      latex: {
+        default: "",
+      },
+    },
+    content: "none" as const,
+  })
+);
+
+export const createEquationBlockSpec = createBlockSpec(
+  equationBlockConfig(),
+  () => ({
+    meta: {
+      isolating: true,
+    },
+    parse: (element) => {
+      if (element.tagName !== "DIV" || !element.classList.contains("equation")) {
+        return undefined;
+      }
+      const latex = element.getAttribute("data-latex") || "";
+      return { latex };
+    },
+    render: (block, editor) => {
+      const wrapper = document.createElement("div");
+      wrapper.className = "equation-wrapper";
+
+      // Editable input for LaTeX
+      const input = document.createElement("div");
+      input.className = "equation-input";
+      input.contentEditable = "true";
+      input.textContent = block.props.latex || "";
+      input.style.fontFamily = "monospace";
+      input.style.padding = "8px";
+      input.style.border = "1px solid #ccc";
+      input.style.borderRadius = "4px";
+      input.style.marginBottom = "8px";
+
+      // Function to update preview
+      const updatePreview = () => {
+        const latex = input.textContent || "";
+        const preview = wrapper.querySelector(".equation-preview");
+        if (preview) {
+          try {
+            const html = katex.renderToString(latex, {
+              throwOnError: false,
+              displayMode: true,
+            });
+            preview.innerHTML = html;
+          } catch (error) {
+            preview.innerHTML = "<span style='color: red;'>Invalid LaTeX</span>";
+          }
+        }
+        // Update block props
+        if (latex !== block.props.latex) {
+          editor.updateBlock(block, { props: { latex } });
+        }
+      };
+
+      // Initial preview
+      const preview = document.createElement("div");
+      preview.className = "equation-preview";
+      preview.style.padding = "8px";
+      preview.style.border = "1px solid #eee";
+      preview.style.borderRadius = "4px";
+      preview.style.minHeight = "1em";
+      updatePreview();
+
+      wrapper.appendChild(input);
+      wrapper.appendChild(preview);
+
+      // Listen for changes
+      input.addEventListener("input", updatePreview);
+
+      return {
+        dom: wrapper,
+        contentDOM: undefined,
+        destroy: () => {
+          input.removeEventListener("input", updatePreview);
+        },
+      };
+    },
+    toExternalHTML: (block) => {
+      const div = document.createElement("div");
+      div.className = "equation";
+      div.setAttribute("data-latex", block.props.latex || "");
+      try {
+        const html = katex.renderToString(block.props.latex || "", {
+          throwOnError: false,
+          displayMode: true,
+        });
+        div.innerHTML = html;
+      } catch (error) {
+        div.textContent = block.props.latex || "";
+      }
+      return {
+        dom: div,
+        contentDOM: undefined,
+      };
+    },
+    runsBefore: ["default"],
+
+  }),
+  [
+    createBlockNoteExtension({
+      key: "equation-shortcuts",
+      keyboardShortcuts: {
+        "Mod-Alt-E": ({ editor }) => {
+          const cursorPosition = editor.getTextCursorPosition();
+          const newBlock = editor.insertBlocks(
+            [{ type: "equation"}],
+            cursorPosition.block,
+            "before"
+          )[0];
+          editor.setTextCursorPosition(newBlock, "end");
+          return true;
+        },
+      },
+    }),
+  ]
+);

packages/core/src/blocks/defaultBlocks.ts

@@ -18,6 +18,7 @@ import {
   createVideoBlockSpec,
   defaultProps,
 } from "./index.js";
+import { createEquationBlockSpec } from "./Equation/block.js";
 import {
   BlockNoDefaults,
   BlockSchema,
@@ -39,6 +40,7 @@ export const defaultBlockSpecs = {
   bulletListItem: createBulletListItemBlockSpec(),
   checkListItem: createCheckListItemBlockSpec(),
   codeBlock: createCodeBlockSpec(),
+  equation: createEquationBlockSpec(),
   file: createFileBlockSpec(),
   heading: createHeadingBlockSpec(),
   image: createImageBlockSpec(),

packages/core/src/blocks/index.ts

@@ -14,6 +14,8 @@ export * from "./Quote/block.js";
 export * from "./Table/block.js";
 export * from "./Video/block.js";
 
+export * from "./Equation/block.js";
+
 export { EMPTY_CELL_HEIGHT, EMPTY_CELL_WIDTH } from "./Table/TableExtension.js";
 export * from "./ToggleWrapper/createToggleWrapper.js";
 export * from "./File/helpers/uploadToTmpFilesDotOrg_DEV_ONLY.js";