Add support for LaTeX inline and block expressions. (#4446)

* Add support for LaTeX inline and block expressions. (#4364)

Co-authored-by: Tom Moor <tom@getoutline.com>

* tsc

* Show heading markers when LaTeX block is being edited

* Tab to space, name katex chunk

* Fork htmldiff, add support for math nodes

Co-authored-by: luisbc92 <luiscarlos.banuelos@gmail.com>

shared/editor/plugins/Math.ts

@@ -0,0 +1,75 @@
+import { MathView } from "@benrbray/prosemirror-math";
+import { Node as ProseNode } from "prosemirror-model";
+import { Plugin, PluginKey, PluginSpec } from "prosemirror-state";
+import { EditorView } from "prosemirror-view";
+
+export interface IMathPluginState {
+  macros: { [cmd: string]: string };
+  activeNodeViews: MathView[];
+  prevCursorPos: number;
+}
+
+const MATH_PLUGIN_KEY = new PluginKey<IMathPluginState>("prosemirror-math");
+
+export function createMathView(displayMode: boolean) {
+  return (
+    node: ProseNode,
+    view: EditorView,
+    getPos: boolean | (() => number)
+  ): MathView => {
+    // dynamically load katex styles and fonts
+    import(
+      /* webpackChunkName: "katex" */
+      "katex/dist/katex.min.css"
+    );
+
+    const pluginState = MATH_PLUGIN_KEY.getState(view.state);
+    if (!pluginState) {
+      throw new Error("no math plugin!");
+    }
+    const nodeViews = pluginState.activeNodeViews;
+
+    // set up NodeView
+    const nodeView = new MathView(
+      node,
+      view,
+      getPos as () => number,
+      { katexOptions: { displayMode, macros: pluginState.macros } },
+      MATH_PLUGIN_KEY,
+      () => {
+        nodeViews.splice(nodeViews.indexOf(nodeView));
+      }
+    );
+
+    nodeViews.push(nodeView);
+    return nodeView;
+  };
+}
+
+const mathPluginSpec: PluginSpec<IMathPluginState> = {
+  key: MATH_PLUGIN_KEY,
+  state: {
+    init() {
+      return {
+        macros: {},
+        activeNodeViews: [],
+        prevCursorPos: 0,
+      };
+    },
+    apply(tr, value, oldState) {
+      return {
+        activeNodeViews: value.activeNodeViews,
+        macros: value.macros,
+        prevCursorPos: oldState.selection.from,
+      };
+    },
+  },
+  props: {
+    nodeViews: {
+      math_inline: createMathView(false),
+      math_block: createMathView(true),
+    },
+  },
+};
+
+export default new Plugin(mathPluginSpec);