Merge pull request #420 from phyohtetarkar/main

feature: add mathematics extension

Author: andrewdoro

apps/web/components/tailwind/advanced-editor.tsx

@@ -17,6 +17,7 @@ import { defaultExtensions } from "./extensions";
 import { ColorSelector } from "./selectors/color-selector";
 import { LinkSelector } from "./selectors/link-selector";
 import { NodeSelector } from "./selectors/node-selector";
+import { MathSelector } from "./selectors/math-selector";
 import { Separator } from "./ui/separator";
 
 import { handleImageDrop, handleImagePaste } from "novel/plugins";
@@ -126,6 +127,8 @@ const TailwindAdvancedEditor = () => {
 
             <LinkSelector open={openLink} onOpenChange={setOpenLink} />
             <Separator orientation="vertical" />
+            <MathSelector />
+            <Separator orientation="vertical" />
             <TextButtons />
             <Separator orientation="vertical" />
             <ColorSelector open={openColor} onOpenChange={setOpenColor} />

apps/web/components/tailwind/extensions.ts

@@ -19,6 +19,7 @@ import {
   Twitter,
   UpdatedImage,
   Youtube,
+  Mathematics,
 } from "novel/extensions";
 import { UploadImagesPlugin } from "novel/plugins";
 
@@ -136,6 +137,15 @@ const twitter = Twitter.configure({
   inline: false,
 });
 
+const mathematics = Mathematics.configure({
+  HTMLAttributes: {
+    class: cx("text-foreground rounded p-1 hover:bg-accent cursor-pointer"),
+  },
+  katexOptions: {
+    throwOnError: false,
+  },
+});
+
 const characterCount = CharacterCount.configure();
 
 export const defaultExtensions = [
@@ -151,6 +161,7 @@ export const defaultExtensions = [
   codeBlockLowlight,
   youtube,
   twitter,
+  mathematics,
   characterCount,
   TiptapUnderline,
   MarkdownExtension,

apps/web/components/tailwind/selectors/math-selector.tsx

@@ -0,0 +1,35 @@
+import { Button } from "@/components/tailwind/ui/button";
+import { cn } from "@/lib/utils";
+import { SigmaIcon } from "lucide-react";
+import { useEditor } from "novel";
+
+export const MathSelector = () => {
+  const { editor } = useEditor();
+
+  if (!editor) return null;
+
+  return (
+    <Button
+      variant="ghost"
+      size="sm"
+      className="rounded-none w-12"
+      onClick={(evt) => {
+        if (editor.isActive("math")) {
+          editor.chain().focus().unsetLatex().run();
+        } else {
+          const { from, to } = editor.state.selection;
+          const latex = editor.state.doc.textBetween(from, to);
+
+          if (!latex) return;
+
+          editor.chain().focus().setLatex({ latex }).run();
+        }
+      }}
+    >
+      <SigmaIcon
+        className={cn("size-4", { "text-blue-500": editor.isActive("math") })}
+        strokeWidth={2.3}
+      />
+    </Button>
+  );
+};

apps/web/lib/content.ts

@@ -149,6 +149,111 @@ export const defaultEditorContent = {
             },
           ],
         },
+        {
+          type: "listItem",
+          content: [
+            {
+              type: "paragraph",
+              content: [
+                {
+                  type: "text",
+                  text: "Mathematical symbols with LaTeX expression:",
+                },
+              ],
+            },
+            {
+              type: "orderedList",
+              attrs: {
+                tight: true,
+                start: 1,
+              },
+              content: [
+                {
+                  type: "listItem",
+                  content: [
+                    {
+                      type: "paragraph",
+                      content: [
+                        {
+                          type: "math",
+                          attrs: {
+                            latex: "E = mc^2",
+                          },
+                        },
+                      ],
+                    },
+                  ],
+                },
+                {
+                  type: "listItem",
+                  content: [
+                    {
+                      type: "paragraph",
+                      content: [
+                        {
+                          type: "math",
+                          attrs: {
+                            latex: "a^2 = \\sqrt{b^2 + c^2}",
+                          },
+                        },
+                      ],
+                    },
+                  ],
+                },
+                {
+                  type: "listItem",
+                  content: [
+                    {
+                      type: "paragraph",
+                      content: [
+                        {
+                          type: "math",
+                          attrs: {
+                            latex:
+                              "\\hat{f} (\\xi)=\\int_{-\\infty}^{\\infty}f(x)e^{-2\\pi ix\\xi}dx",
+                          },
+                        },
+                      ],
+                    },
+                  ],
+                },
+                {
+                  type: "listItem",
+                  content: [
+                    {
+                      type: "paragraph",
+                      content: [
+                        {
+                          type: "math",
+                          attrs: {
+                            latex:
+                              "A=\\begin{bmatrix}a&b\\\\c&d \\end{bmatrix}",
+                          },
+                        },
+                      ],
+                    },
+                  ],
+                },
+                {
+                  type: "listItem",
+                  content: [
+                    {
+                      type: "paragraph",
+                      content: [
+                        {
+                          type: "math",
+                          attrs: {
+                            latex: "\\sum_{i=0}^n x_i",
+                          },
+                        },
+                      ],
+                    },
+                  ],
+                },
+              ],
+            },
+          ],
+        },
       ],
     },
     {

packages/headless/package.json

@@ -70,13 +70,15 @@
     "react-markdown": "^8.0.7",
     "react-moveable": "^0.56.0",
     "react-tweet": "^3.2.1",
+    "katex": "^0.16.10",
     "tippy.js": "^6.3.7",
     "tiptap-extension-global-drag-handle": "^0.1.7",
     "tiptap-markdown": "^0.8.9",
     "tunnel-rat": "^0.1.2"
   },
   "devDependencies": {
     "@biomejs/biome": "^1.7.2",
+    "@types/katex": "^0.16.7",
     "@types/react": "^18.2.55",
     "@types/react-dom": "18.2.19",
     "tsconfig": "workspace:*",

packages/headless/src/extensions/index.ts

@@ -14,6 +14,7 @@ import { Markdown } from "tiptap-markdown";
 import CustomKeymap from "./custom-keymap";
 import { ImageResizer } from "./image-resizer";
 import { Twitter } from "./twitter";
+import { Mathematics } from "./mathematics";
 import UpdatedImage from "./updated-image";
 
 import CharacterCount from "@tiptap/extension-character-count";
@@ -81,6 +82,7 @@ export {
   UpdatedImage,
   Youtube,
   Twitter,
+  Mathematics,
   CharacterCount,
   GlobalDragHandle,
 };