TypeCellOS · Kartikayy007 · May 25, 2025
diff --git a/examples/katex-example/README.md b/examples/katex-example/README.md
@@ -0,0 +1,39 @@
+# BlockNote KaTeX Equation Block
+
+This example demonstrates the implementation of a custom block for KaTeX equations in BlockNote. It allows users to write and render LaTeX mathematical equations directly in the editor.
+
+## Features
+
+- Dedicated block for inputting and displaying LaTeX equations
+- Display mode toggle for inline vs. block equations
+- Real-time rendering preview as you type
+- Keyboard shortcut: Type `$$` at the beginning of a line and press space to create an equation block
+- Full LaTeX syntax support via KaTeX
+
+## Usage
+
+To use the KaTeX block in your BlockNote editor:
+
+1. Create a new equation block via the block menu or by typing `$$` at the beginning of a line
+2. Enter your LaTeX equation in the input field
+3. Toggle "Display mode" to switch between inline and block equation display
+4. The equation will be rendered in real-time as you type
+
+## Example LaTeX Equations
+
+Try these examples:
+
+- Simple: `E = mc^2`
+- Fractions: `\frac{1}{2} + \frac{1}{3} = \frac{5}{6}`
+- Integrals: `\int_{0}^{\infty} e^{-x^2} dx = \frac{\sqrt{\pi}}{2}`
+- Matrices: `\begin{pmatrix} a & b \\ c & d \end{pmatrix}`
+- Aligned equations: `\begin{align} a &= b + c \\ &= d + e \end{align}`
+
+## Implementation
+
+This block uses KaTeX for rendering LaTeX equations. The implementation adds:
+
+1. A dedicated KaTeX block type
+2. Configuration options for KaTeX rendering
+3. CSS styling for proper equation display
+4. Input handling for LaTeX content
diff --git a/examples/katex-example/index.html b/examples/katex-example/index.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>BlockNote KaTeX Example</title>
+  <script type="module">
+    import { BlockNoteEditor } from "https://cdn.jsdelivr.net/npm/@blocknote/core@latest/dist/blocknote.js";
+    import { BlockNoteView } from "https://cdn.jsdelivr.net/npm/@blocknote/react@latest/dist/index.js";
+    import * as ReactDOM from "https://cdn.jsdelivr.net/npm/react-dom@latest/+esm";
+    import * as React from "https://cdn.jsdelivr.net/npm/react@latest/+esm";
+    import katex from "https://cdn.jsdelivr.net/npm/katex@latest/dist/katex.mjs";
+
+    // Import KaTeX CSS
+    document.head.innerHTML += '<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@latest/dist/katex.min.css">';
+
+    // Create a new editor
+    const editor = BlockNoteEditor.create({
+      // Additional settings if needed
+    });
+
+    // Add some initial content with a KaTeX block
+    editor.insertBlocks([
+      {
+        type: "paragraph",
+        content: "This is a demo of the KaTeX equation block in BlockNote. Try editing the equation below:"
+      },
+      {
+        type: "katexBlock",
+        props: {
+          equation: "E = mc^2",
+          displayMode: true
+        }
+      },
+      {
+        type: "paragraph",
+        content: "You can also create a new equation block by typing '$$' at the beginning of a line and pressing space."
+      }
+    ], 0);
+
+    // Component to render the editor
+    function App() {
+      return React.createElement(
+        "div",
+        {
+          style: {
+            margin: "20px auto",
+            maxWidth: "800px"
+          }
+        },
+        React.createElement(
+          "h1",
+          null,
+          "BlockNote KaTeX Equation Block Demo"
+        ),
+        React.createElement(
+          BlockNoteView,
+          {
+            editor: editor,
+            theme: "light"
+          }
+        )
+      );
+    }
+
+    // Render the app
+    const root = ReactDOM.createRoot(document.getElementById("root"));
+    root.render(React.createElement(App));
+  </script>
+</head>
+<body>
+  <div id="root"></div>
+</body>
+</html>
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -91,8 +91,10 @@
     "@tiptap/extension-text": "^2.11.5",
     "@tiptap/extension-underline": "^2.11.5",
     "@tiptap/pm": "^2.12.0",
+    "@types/katex": "^0.16.7",
     "emoji-mart": "^5.6.0",
     "hast-util-from-dom": "^5.0.1",
+    "katex": "^0.16.22",
     "prosemirror-dropcursor": "^1.8.1",
     "prosemirror-highlight": "^0.13.0",
     "prosemirror-model": "^1.25.1",