chore: Cleanup editor menu handlers (#5174

* wip

* wip

* refactor

shared/editor/extensions/BlockMenu.tsx

@@ -0,0 +1,99 @@
+import { PlusIcon } from "outline-icons";
+import { Plugin } from "prosemirror-state";
+import { findParentNode } from "prosemirror-utils";
+import { Decoration, DecorationSet } from "prosemirror-view";
+import * as React from "react";
+import ReactDOM from "react-dom";
+import { SuggestionsMenuType } from "../plugins/Suggestions";
+import { EventType } from "../types";
+import Suggestion from "./Suggestion";
+
+export default class BlockMenu extends Suggestion {
+  get defaultOptions() {
+    return {
+      type: SuggestionsMenuType.Block,
+      openRegex: /^\/(\w+)?$/,
+      closeRegex: /(^(?!\/(\w+)?)(.*)$|^\/(([\w\W]+)\s.*|\s)$|^\/((\W)+)$)/,
+    };
+  }
+
+  get name() {
+    return "blockmenu";
+  }
+
+  get plugins() {
+    const button = document.createElement("button");
+    button.className = "block-menu-trigger";
+    button.type = "button";
+    ReactDOM.render(<PlusIcon />, button);
+
+    return [
+      ...super.plugins,
+      new Plugin({
+        props: {
+          decorations: (state) => {
+            const parent = findParentNode(
+              (node) => node.type.name === "paragraph"
+            )(state.selection);
+
+            if (!parent) {
+              return;
+            }
+
+            const isTopLevel = state.selection.$from.depth === 1;
+            if (!isTopLevel) {
+              return;
+            }
+
+            const decorations: Decoration[] = [];
+            const isEmptyNode = parent && parent.node.content.size === 0;
+            const isSlash = parent && parent.node.textContent === "/";
+
+            if (isEmptyNode) {
+              decorations.push(
+                Decoration.widget(
+                  parent.pos,
+                  () => {
+                    button.addEventListener("click", () => {
+                      this.editor.events.emit(EventType.SuggestionsMenuOpen, {
+                        type: SuggestionsMenuType.Block,
+                        query: "",
+                      });
+                    });
+                    return button;
+                  },
+                  {
+                    key: "block-trigger",
+                  }
+                )
+              );
+
+              const isEmptyDoc = state.doc.textContent === "";
+              if (!isEmptyDoc) {
+                decorations.push(
+                  Decoration.node(
+                    parent.pos,
+                    parent.pos + parent.node.nodeSize,
+                    {
+                      class: "placeholder",
+                      "data-empty-text": this.options.dictionary.newLineEmpty,
+                    }
+                  )
+                );
+              }
+            } else if (isSlash) {
+              decorations.push(
+                Decoration.node(parent.pos, parent.pos + parent.node.nodeSize, {
+                  class: "placeholder",
+                  "data-empty-text": `  ${this.options.dictionary.newLineWithSlash}`,
+                })
+              );
+            }
+
+            return DecorationSet.create(state.doc, decorations);
+          },
+        },
+      }),
+    ];
+  }
+}

shared/editor/extensions/BlockMenuTrigger.tsx

@@ -1,199 +0,0 @@
-import { PlusIcon } from "outline-icons";
-import { InputRule } from "prosemirror-inputrules";
-import { EditorState, Plugin } from "prosemirror-state";
-import { isInTable } from "prosemirror-tables";
-import { findParentNode } from "prosemirror-utils";
-import { Decoration, DecorationSet, EditorView } from "prosemirror-view";
-import * as React from "react";
-import ReactDOM from "react-dom";
-import Extension from "../lib/Extension";
-import { EventType } from "../types";
-
-const MAX_MATCH = 500;
-const OPEN_REGEX = /^\/(\w+)?$/;
-const CLOSE_REGEX = /(^(?!\/(\w+)?)(.*)$|^\/(([\w\W]+)\s.*|\s)$|^\/((\W)+)$)/;
-
-// based on the input rules code in Prosemirror, here:
-// https://github.com/ProseMirror/prosemirror-inputrules/blob/master/src/inputrules.js
-export function run(
-  view: EditorView,
-  from: number,
-  to: number,
-  regex: RegExp,
-  handler: (
-    state: EditorState,
-    match: RegExpExecArray | null,
-    from?: number,
-    to?: number
-  ) => boolean | null
-) {
-  if (view.composing) {
-    return false;
-  }
-  const state = view.state;
-  const $from = state.doc.resolve(from);
-  if ($from.parent.type.spec.code) {
-    return false;
-  }
-
-  const textBefore = $from.parent.textBetween(
-    Math.max(0, $from.parentOffset - MAX_MATCH),
-    $from.parentOffset,
-    undefined,
-    "\ufffc"
-  );
-
-  const match = regex.exec(textBefore);
-  const tr = handler(state, match, match ? from - match[0].length : from, to);
-  if (!tr) {
-    return false;
-  }
-  return true;
-}
-
-export default class BlockMenuTrigger extends Extension {
-  get name() {
-    return "blockmenu";
-  }
-
-  get plugins() {
-    const button = document.createElement("button");
-    button.className = "block-menu-trigger";
-    button.type = "button";
-    ReactDOM.render(<PlusIcon />, button);
-
-    return [
-      new Plugin({
-        props: {
-          handleClick: () => {
-            this.editor.events.emit(EventType.blockMenuClose);
-            return false;
-          },
-          handleKeyDown: (view, event) => {
-            // Prosemirror input rules are not triggered on backspace, however
-            // we need them to be evaluted for the filter trigger to work
-            // correctly. This additional handler adds inputrules-like handling.
-            if (event.key === "Backspace") {
-              // timeout ensures that the delete has been handled by prosemirror
-              // and any characters removed, before we evaluate the rule.
-              setTimeout(() => {
-                const { pos } = view.state.selection.$from;
-                return run(view, pos, pos, OPEN_REGEX, (state, match) => {
-                  if (match) {
-                    this.editor.events.emit(EventType.blockMenuOpen, match[1]);
-                  } else {
-                    this.editor.events.emit(EventType.blockMenuClose);
-                  }
-                  return null;
-                });
-              });
-            }
-
-            // If the query is active and we're navigating the block menu then
-            // just ignore the key events in the editor itself until we're done
-            if (
-              event.key === "Enter" ||
-              event.key === "ArrowUp" ||
-              event.key === "ArrowDown" ||
-              event.key === "Tab"
-            ) {
-              const { pos } = view.state.selection.$from;
-
-              return run(view, pos, pos, OPEN_REGEX, (state, match) =>
-                // just tell Prosemirror we handled it and not to do anything
-                match ? true : null
-              );
-            }
-
-            return false;
-          },
-          decorations: (state) => {
-            const parent = findParentNode(
-              (node) => node.type.name === "paragraph"
-            )(state.selection);
-
-            if (!parent) {
-              return;
-            }
-
-            const isTopLevel = state.selection.$from.depth === 1;
-            if (!isTopLevel) {
-              return;
-            }
-
-            const decorations: Decoration[] = [];
-            const isEmptyNode = parent && parent.node.content.size === 0;
-            const isSlash = parent && parent.node.textContent === "/";
-
-            if (isEmptyNode) {
-              decorations.push(
-                Decoration.widget(
-                  parent.pos,
-                  () => {
-                    button.addEventListener("click", () => {
-                      this.editor.events.emit(EventType.blockMenuOpen, "");
-                    });
-                    return button;
-                  },
-                  {
-                    key: "block-trigger",
-                  }
-                )
-              );
-
-              const isEmptyDoc = state.doc.textContent === "";
-              if (!isEmptyDoc) {
-                decorations.push(
-                  Decoration.node(
-                    parent.pos,
-                    parent.pos + parent.node.nodeSize,
-                    {
-                      class: "placeholder",
-                      "data-empty-text": this.options.dictionary.newLineEmpty,
-                    }
-                  )
-                );
-              }
-            } else if (isSlash) {
-              decorations.push(
-                Decoration.node(parent.pos, parent.pos + parent.node.nodeSize, {
-                  class: "placeholder",
-                  "data-empty-text": `  ${this.options.dictionary.newLineWithSlash}`,
-                })
-              );
-            }
-
-            return DecorationSet.create(state.doc, decorations);
-          },
-        },
-      }),
-    ];
-  }
-
-  inputRules() {
-    return [
-      // main regex should match only:
-      // /word
-      new InputRule(OPEN_REGEX, (state, match) => {
-        if (
-          match &&
-          state.selection.$from.parent.type.name === "paragraph" &&
-          !isInTable(state)
-        ) {
-          this.editor.events.emit(EventType.blockMenuOpen, match[1]);
-        }
-        return null;
-      }),
-      // invert regex should match some of these scenarios:
-      // /<space>word
-      // /<space>
-      // /word<space>
-      new InputRule(CLOSE_REGEX, (state, match) => {
-        if (match) {
-          this.editor.events.emit(EventType.blockMenuClose);
-        }
-        return null;
-      }),
-    ];
-  }
-}

shared/editor/extensions/DateTime.ts

@@ -25,17 +25,17 @@ export default class DateTime extends Extension {
       // in places other than the start of a line
       new InputRule(/\/date\s$/, ({ tr }, _match, start, end) => {
         tr.delete(start, end).insertText(getCurrentDateAsString() + " ");
-        this.editor.events.emit(EventType.blockMenuClose);
+        this.editor.events.emit(EventType.SuggestionsMenuClose);
         return tr;
       }),
       new InputRule(/\/time\s$/, ({ tr }, _match, start, end) => {
         tr.delete(start, end).insertText(getCurrentTimeAsString() + " ");
-        this.editor.events.emit(EventType.blockMenuClose);
+        this.editor.events.emit(EventType.SuggestionsMenuClose);
         return tr;
       }),
       new InputRule(/\/datetime\s$/, ({ tr }, _match, start, end) => {
         tr.delete(start, end).insertText(`${getCurrentDateTimeAsString()} `);
-        this.editor.events.emit(EventType.blockMenuClose);
+        this.editor.events.emit(EventType.SuggestionsMenuClose);
         return tr;
       }),
     ];

shared/editor/extensions/Folding.tsx

@@ -1,75 +0,0 @@
-import { Plugin } from "prosemirror-state";
-import { findBlockNodes } from "prosemirror-utils";
-import { Decoration, DecorationSet } from "prosemirror-view";
-import Storage from "../../utils/Storage";
-import Extension from "../lib/Extension";
-import { headingToPersistenceKey } from "../lib/headingToSlug";
-import findCollapsedNodes from "../queries/findCollapsedNodes";
-
-export default class Folding extends Extension {
-  get name() {
-    return "folding";
-  }
-
-  get plugins() {
-    let loaded = false;
-
-    return [
-      new Plugin({
-        view: (view) => {
-          loaded = false;
-          view.dispatch(view.state.tr.setMeta("folding", { loaded: true }));
-          return {};
-        },
-        appendTransaction: (transactions, oldState, newState) => {
-          if (loaded) {
-            return;
-          }
-          if (
-            !transactions.some((transaction) => transaction.getMeta("folding"))
-          ) {
-            return;
-          }
-
-          let modified = false;
-          const tr = newState.tr;
-          const blocks = findBlockNodes(newState.doc);
-
-          for (const block of blocks) {
-            if (block.node.type.name === "heading") {
-              const persistKey = headingToPersistenceKey(
-                block.node,
-                this.editor.props.id
-              );
-              const persistedState = Storage.get(persistKey);
-
-              if (persistedState === "collapsed") {
-                tr.setNodeMarkup(block.pos, undefined, {
-                  ...block.node.attrs,
-                  collapsed: true,
-                });
-                modified = true;
-              }
-            }
-          }
-
-          loaded = true;
-          return modified ? tr : null;
-        },
-        props: {
-          decorations: (state) => {
-            const { doc } = state;
-            const decorations: Decoration[] = findCollapsedNodes(doc).map(
-              (block) =>
-                Decoration.node(block.pos, block.pos + block.node.nodeSize, {
-                  class: "folded-content",
-                })
-            );
-
-            return DecorationSet.create(doc, decorations);
-          },
-        },
-      }),
-    ];
-  }
-}

shared/editor/extensions/PasteHandler.ts

@@ -17,7 +17,7 @@ function isDropboxPaper(html: string): boolean {
 
 export default class PasteHandler extends Extension {
   get name() {
-    return "markdown-paste";
+    return "paste-handler";
   }
 
   get plugins() {

shared/editor/extensions/Suggestion.tsx

@@ -0,0 +1,41 @@
+import { InputRule } from "prosemirror-inputrules";
+import { NodeType, Schema } from "prosemirror-model";
+import { Plugin } from "prosemirror-state";
+import { isInTable } from "prosemirror-tables";
+import Extension from "../lib/Extension";
+import { SuggestionsMenuPlugin } from "../plugins/Suggestions";
+import isInCode from "../queries/isInCode";
+import { EventType } from "../types";
+
+export default class Suggestion extends Extension {
+  get plugins(): Plugin[] {
+    return [new SuggestionsMenuPlugin(this.editor, this.options)];
+  }
+
+  inputRules = (_options: { type: NodeType; schema: Schema }) => {
+    console.log(this.name, this.options.openRegex);
+
+    return [
+      new InputRule(this.options.openRegex, (state, match) => {
+        if (
+          match &&
+          state.selection.$from.parent.type.name === "paragraph" &&
+          (!isInCode(state) || this.options.enabledInCode) &&
+          (!isInTable(state) || this.options.enabledInTable)
+        ) {
+          this.editor.events.emit(EventType.SuggestionsMenuOpen, {
+            type: this.options.type,
+            query: match[1],
+          });
+        }
+        return null;
+      }),
+      new InputRule(this.options.closeRegex, (state, match) => {
+        if (match) {
+          this.editor.events.emit(EventType.SuggestionsMenuClose);
+        }
+        return null;
+      }),
+    ];
+  };
+}