[Feat] Add LaTeX syntax support for math in notes

ui/package.json

@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "@apollo/client": "^3.7.0",
+    "@benrbray/prosemirror-math": "^0.2.2",
     "@bufbuild/buf": "^1.21.0-1",
     "@bufbuild/connect": "^0.9.1",
     "@bufbuild/connect-web": "^0.9.1",
@@ -35,6 +36,7 @@
     "graphql": "^16.6.0",
     "html-to-image": "^1.11.11",
     "jwt-decode": "^3.1.2",
+    "katex": "0.13.0",
     "kbar": "^0.1.0-beta.40",
     "monaco-editor": "^0.34.1",
     "monaco-editor-webpack-plugin": "^7.0.1",

ui/src/components/MyMonaco.tsx

@@ -8,7 +8,6 @@ import { RepoContext } from "../lib/store";
 import { MonacoBinding } from "y-monaco";
 import { useReactFlow } from "reactflow";
 import { Annotation } from "../lib/parser";
-import { MonacoCompletionProvider } from "../lib/monacoCompletionProvider";
 
 const theme: monaco.editor.IStandaloneThemeData = {
   base: "vs",

ui/src/components/nodes/Rich.tsx

@@ -56,7 +56,6 @@ import {
   SubExtension,
   SupExtension,
   TextHighlightExtension,
-  YjsExtension,
   createMarkPositioner,
   wysiwygPreset,
   MarkdownExtension,
@@ -105,7 +104,11 @@ import "./remirror-size.css";
 import { ProsemirrorPlugin, cx, htmlToProsemirrorNode } from "remirror";
 import { styled } from "@mui/material";
 
-import { MyYjsExtension } from "./YjsRemirror";
+import { MyYjsExtension } from "./extensions/YjsRemirror";
+import {
+  MathInlineExtension,
+  MathBlockExtension,
+} from "./extensions/mathExtension";
 import { NewPodButtons } from "./utils";
 
 function useLinkShortcut() {
@@ -558,6 +561,8 @@ const MyEditor = ({
       new DropCursorExtension(),
       new MarkdownExtension(),
       new MyYjsExtension({ getProvider: () => provider, id }),
+      new MathInlineExtension(),
+      new MathBlockExtension(),
       new MentionExtension({
         extraAttributes: { type: "user" },
         matchers: [

ui/src/components/nodes/extensions/mathExtension.ts

@@ -0,0 +1,189 @@
+// Adapted from https://github.com/phxtho/poche/blob/main/src/components/remirror-editor/extensions/math-inline-extension/math-inline-extension.ts
+
+import {
+  ApplySchemaAttributes,
+  command,
+  CommandFunction,
+  extension,
+  ExtensionTag,
+  NodeExtension,
+  NodeExtensionSpec,
+  NodeSpecOverride,
+  PrioritizedKeyBindings,
+} from "@remirror/core";
+import { chainKeyBindingCommands, convertCommand } from "@remirror/core-utils";
+import { InputRule, ProsemirrorPlugin } from "@remirror/pm";
+import {
+  deleteSelection,
+  selectNodeBackward,
+  joinBackward,
+} from "@remirror/pm/commands";
+import {
+  REGEX_INLINE_MATH_DOLLARS_ESCAPED,
+  REGEX_BLOCK_MATH_DOLLARS,
+  insertMathCmd,
+  mathBackspaceCmd,
+  mathPlugin,
+  makeInlineMathInputRule,
+  makeBlockMathInputRule,
+} from "@benrbray/prosemirror-math";
+import {
+  defaultInlineMathParseRules,
+  defaultBlockMathParseRules,
+} from "./mathParseRules";
+// CSS
+import "@benrbray/prosemirror-math/style/math.css";
+import "katex/dist/katex.min.css";
+
+export interface MathInlineOptions {}
+export interface MathBlockOptions {}
+
+@extension<MathInlineOptions>({
+  defaultOptions: {},
+})
+export class MathInlineExtension extends NodeExtension<MathInlineOptions> {
+  get name() {
+    return "math_inline" as const;
+  }
+
+  createTags() {
+    return [ExtensionTag.InlineNode];
+  }
+
+  createNodeSpec(
+    extra: ApplySchemaAttributes,
+    override: NodeSpecOverride
+  ): NodeExtensionSpec {
+    return {
+      group: "math",
+      content: "text*",
+      inline: true,
+      atom: true,
+      ...override,
+      attrs: {
+        ...extra.defaults(),
+      },
+      parseDOM: [
+        {
+          tag: "math-inline",
+        },
+        ...defaultInlineMathParseRules,
+      ],
+      toDOM: () => ["math-inline", { class: "math-node" }, 0],
+    };
+  }
+
+  createInputRules(): InputRule[] {
+    return [
+      makeInlineMathInputRule(REGEX_INLINE_MATH_DOLLARS_ESCAPED, this.type),
+    ];
+  }
+
+  createExternalPlugins(): ProsemirrorPlugin[] {
+    return [mathPlugin];
+  }
+
+  createKeymap(
+    extractShortcutNames: (shortcut: string) => string[]
+  ): PrioritizedKeyBindings {
+    const command = chainKeyBindingCommands(
+      convertCommand(deleteSelection),
+      convertCommand(mathBackspaceCmd),
+      convertCommand(joinBackward),
+      convertCommand(selectNodeBackward)
+    );
+    return { Backspace: command };
+  }
+
+  @command()
+  insertMathInline(): CommandFunction {
+    return (props) => {
+      try {
+        insertMathCmd(this.type);
+        return true;
+      } catch (e) {
+        console.log(e);
+        return false;
+      }
+    };
+  }
+}
+
+@extension<MathBlockOptions>({
+  defaultOptions: {},
+})
+export class MathBlockExtension extends NodeExtension<MathBlockOptions> {
+  get name() {
+    return "math_display" as const;
+  }
+
+  createTags() {
+    return [ExtensionTag.BlockNode];
+  }
+
+  createNodeSpec(
+    extra: ApplySchemaAttributes,
+    override: NodeSpecOverride
+  ): NodeExtensionSpec {
+    return {
+      group: "block math",
+      content: "text*",
+      atom: true,
+      code: true,
+      ...override,
+      attrs: {
+        ...extra.defaults(),
+      },
+      parseDOM: [
+        {
+          tag: "math-display",
+        },
+        ...defaultBlockMathParseRules,
+      ],
+      toDOM: () => ["math-display", { class: "math-node" }, 0],
+    };
+  }
+
+  createInputRules(): InputRule[] {
+    return [makeBlockMathInputRule(REGEX_BLOCK_MATH_DOLLARS, this.type)];
+  }
+
+  createExternalPlugins(): ProsemirrorPlugin[] {
+    // IMPORTANT: mathPlugin should be imported only once, if it is imported by MathInlineExtension, it will fail
+    return [];
+  }
+
+  createKeymap(
+    extractShortcutNames: (shortcut: string) => string[]
+  ): PrioritizedKeyBindings {
+    const command = chainKeyBindingCommands(
+      convertCommand(deleteSelection),
+      convertCommand(mathBackspaceCmd),
+      convertCommand(joinBackward),
+      convertCommand(selectNodeBackward)
+    );
+    return { Backspace: command };
+  }
+
+  @command()
+  insertMathBlock(): CommandFunction {
+    return (props) => {
+      try {
+        insertMathCmd(this.type);
+        return true;
+      } catch (e) {
+        console.log(e);
+        return false;
+      }
+    };
+  }
+}
+
+declare global {
+  namespace Remirror {
+    interface AllExtensions {
+      math_inline: MathInlineExtension;
+      block_math: MathBlockExtension;
+    }
+  }
+}