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;
+      }),
+    ];
+  };
+}

shared/editor/marks/Link.tsx

@@ -117,7 +117,7 @@ export default class Link extends Mark {
     return {
       "Mod-k": (state: EditorState, dispatch: Dispatch) => {
         if (state.selection.empty) {
-          this.editor.events.emit(EventType.linkMenuOpen);
+          this.editor.events.emit(EventType.LinkToolbarOpen);
           return true;
         }
 

shared/editor/nodes/Emoji.tsx

@@ -1,19 +1,32 @@
 import nameToEmoji from "gemoji/name-to-emoji.json";
 import Token from "markdown-it/lib/token";
-import { InputRule } from "prosemirror-inputrules";
-import { NodeSpec, Node as ProsemirrorNode, NodeType } from "prosemirror-model";
-import { EditorState, TextSelection, Plugin } from "prosemirror-state";
-import { run } from "../extensions/BlockMenuTrigger";
+import {
+  NodeSpec,
+  Node as ProsemirrorNode,
+  NodeType,
+  Schema,
+} from "prosemirror-model";
+import { EditorState, TextSelection } from "prosemirror-state";
+import Suggestion from "../extensions/Suggestion";
 import { MarkdownSerializerState } from "../lib/markdown/serializer";
-import isInCode from "../queries/isInCode";
+import { SuggestionsMenuType } from "../plugins/Suggestions";
 import emojiRule from "../rules/emoji";
-import { Dispatch, EventType } from "../types";
-import Node from "./Node";
+import { Dispatch } from "../types";
 
-const OPEN_REGEX = /(?:^|\s):([0-9a-zA-Z_+-]+)?$/;
-const CLOSE_REGEX = /(?:^|\s):(([0-9a-zA-Z_+-]*\s+)|(\s+[0-9a-zA-Z_+-]+)|[^0-9a-zA-Z_+-]+)$/;
+export default class Emoji extends Suggestion {
+  get type() {
+    return "node";
+  }
+
+  get defaultOptions() {
+    return {
+      type: SuggestionsMenuType.Emoji,
+      openRegex: /(?:^|\s):([0-9a-zA-Z_+-]+)?$/,
+      closeRegex: /(?:^|\s):(([0-9a-zA-Z_+-]*\s+)|(\s+[0-9a-zA-Z_+-]+)|[^0-9a-zA-Z_+-]+)$/,
+      enabledInTable: true,
+    };
+  }
 
-export default class Emoji extends Node {
   get name() {
     return "emoji";
   }
@@ -63,58 +76,7 @@ export default class Emoji extends Node {
     return [emojiRule];
   }
 
-  get plugins() {
-    return [
-      new Plugin({
-        props: {
-          handleClick: () => {
-            this.editor.events.emit(EventType.emojiMenuClose);
-            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.emojiMenuOpen, match[1]);
-                  } else {
-                    this.editor.events.emit(EventType.emojiMenuClose);
-                  }
-                  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;
-          },
-        },
-      }),
-    ];
-  }
-
-  commands({ type }: { type: NodeType }) {
+  commands({ type }: { type: NodeType; schema: Schema }) {
     return (attrs: Record<string, string>) => (
       state: EditorState,
       dispatch: Dispatch
@@ -135,50 +97,6 @@ export default class Emoji extends Node {
     };
   }
 
-  inputRules({ type }: { type: NodeType }): InputRule[] {
-    return [
-      new InputRule(/^:([a-zA-Z0-9_+-]+):$/, (state, match, start, end) => {
-        const [okay, markup] = match;
-        const { tr } = state;
-        if (okay) {
-          tr.replaceWith(
-            start - 1,
-            end,
-            type.create({
-              "data-name": markup,
-              markup,
-            })
-          );
-        }
-
-        return tr;
-      }),
-      // main regex should match only:
-      // :word
-      new InputRule(OPEN_REGEX, (state, match) => {
-        if (
-          match &&
-          state.selection.$from.parent.type.name === "paragraph" &&
-          !isInCode(state)
-        ) {
-          this.editor.events.emit(EventType.emojiMenuOpen, 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.emojiMenuClose);
-        }
-        return null;
-      }),
-    ];
-  }
-
   toMarkdown(state: MarkdownSerializerState, node: ProsemirrorNode) {
     const name = node.attrs["data-name"];
     if (name) {

shared/editor/nodes/Heading.ts

@@ -15,6 +15,7 @@ import toggleBlockType from "../commands/toggleBlockType";
 import { Command } from "../lib/Extension";
 import headingToSlug, { headingToPersistenceKey } from "../lib/headingToSlug";
 import { MarkdownSerializerState } from "../lib/markdown/serializer";
+import { FoldingHeadersPlugin } from "../plugins/FoldingHeaders";
 import Node from "./Node";
 
 export default class Heading extends Node {
@@ -264,7 +265,7 @@ export default class Heading extends Node {
       },
     });
 
-    return [plugin];
+    return [new FoldingHeadersPlugin(this.editor.props.id), plugin];
   }
 
   inputRules({ type }: { type: NodeType }) {

shared/editor/nodes/Mention.ts

@@ -1,19 +1,32 @@
 import Token from "markdown-it/lib/token";
-import { InputRule } from "prosemirror-inputrules";
-import { NodeSpec, Node as ProsemirrorNode, NodeType } from "prosemirror-model";
-import { EditorState, TextSelection, Plugin } from "prosemirror-state";
-import { run } from "../extensions/BlockMenuTrigger";
+import {
+  NodeSpec,
+  Node as ProsemirrorNode,
+  NodeType,
+  Schema,
+} from "prosemirror-model";
+import { EditorState, TextSelection } from "prosemirror-state";
+import Suggestion from "../extensions/Suggestion";
 import { MarkdownSerializerState } from "../lib/markdown/serializer";
-import isInCode from "../queries/isInCode";
+import { SuggestionsMenuType } from "../plugins/Suggestions";
 import mentionRule from "../rules/mention";
-import { Dispatch, EventType } from "../types";
-import Node from "./Node";
+import { Dispatch } from "../types";
 
-// ported from https://github.com/tc39/proposal-regexp-unicode-property-escapes#unicode-aware-version-of-w
-const OPEN_REGEX = /(?:^|\s)@([\p{L}\p{M}\d]+)?$/u;
-const CLOSE_REGEX = /(?:^|\s)@(([\p{L}\p{M}\d]*\s+)|(\s+[\p{L}\p{M}\d]+))$/u;
+export default class Mention extends Suggestion {
+  get type() {
+    return "node";
+  }
+
+  get defaultOptions() {
+    return {
+      type: SuggestionsMenuType.Mention,
+      // ported from https://github.com/tc39/proposal-regexp-unicode-property-escapes#unicode-aware-version-of-w
+      openRegex: /(?:^|\s)@([\p{L}\p{M}\d]+)?$/u,
+      closeRegex: /(?:^|\s)@(([\p{L}\p{M}\d]*\s+)|(\s+[\p{L}\p{M}\d]+))$/u,
+      enabledInTable: true,
+    };
+  }
 
-export default class Mention extends Node {
   get name() {
     return "mention";
   }
@@ -66,61 +79,7 @@ export default class Mention extends Node {
     return [mentionRule];
   }
 
-  get plugins() {
-    return [
-      new Plugin({
-        props: {
-          handleClick: () => {
-            this.editor.events.emit(EventType.mentionMenuClose);
-            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.mentionMenuOpen,
-                      match[1]
-                    );
-                  } else {
-                    this.editor.events.emit(EventType.mentionMenuClose);
-                  }
-                  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;
-          },
-        },
-      }),
-    ];
-  }
-
-  commands({ type }: { type: NodeType }) {
+  commands({ type }: { type: NodeType; schema: Schema }) {
     return (attrs: Record<string, string>) => (
       state: EditorState,
       dispatch: Dispatch
@@ -141,33 +100,6 @@ export default class Mention extends Node {
     };
   }
 
-  inputRules(): InputRule[] {
-    return [
-      // main regex should match only:
-      // @word
-      new InputRule(OPEN_REGEX, (state, match) => {
-        if (
-          match &&
-          state.selection.$from.parent.type.name === "paragraph" &&
-          !isInCode(state)
-        ) {
-          this.editor.events.emit(EventType.mentionMenuOpen, 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.mentionMenuClose);
-        }
-        return null;
-      }),
-    ];
-  }
-
   toMarkdown(state: MarkdownSerializerState, node: ProsemirrorNode) {
     const mType = node.attrs.type;
     const mId = node.attrs.modelId;

shared/editor/nodes/index.ts

@@ -1,7 +1,6 @@
-import BlockMenuTrigger from "../extensions/BlockMenuTrigger";
+import BlockMenu from "../extensions/BlockMenu";
 import ClipboardTextSerializer from "../extensions/ClipboardTextSerializer";
 import DateTime from "../extensions/DateTime";
-import Folding from "../extensions/Folding";
 import History from "../extensions/History";
 import Keys from "../extensions/Keys";
 import MaxLength from "../extensions/MaxLength";
@@ -106,8 +105,7 @@ export const richExtensions: Nodes = [
   TableRow,
   Highlight,
   TemplatePlaceholder,
-  Folding,
-  BlockMenuTrigger,
+  BlockMenu,
   Math,
   MathBlock,
   PreventTab,

shared/editor/plugins/FoldingHeaders.ts

@@ -0,0 +1,67 @@
+import { Plugin, PluginKey } from "prosemirror-state";
+import { findBlockNodes } from "prosemirror-utils";
+import { Decoration, DecorationSet } from "prosemirror-view";
+import Storage from "../../utils/Storage";
+import { headingToPersistenceKey } from "../lib/headingToSlug";
+import findCollapsedNodes from "../queries/findCollapsedNodes";
+
+export class FoldingHeadersPlugin extends Plugin {
+  constructor(documentId: string | undefined) {
+    const plugin = new PluginKey("folding");
+    let loaded = false;
+
+    super({
+      key: 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, documentId);
+            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/plugins/Suggestions.ts

@@ -0,0 +1,126 @@
+import { EditorState, Plugin } from "prosemirror-state";
+import { EditorView } from "prosemirror-view";
+import type { Editor } from "../../../app/editor";
+import { EventType } from "../types";
+
+const MAX_MATCH = 500;
+
+export enum SuggestionsMenuType {
+  Emoji = "emoji",
+  Block = "block",
+  Mention = "mention",
+}
+
+type Options = {
+  type: SuggestionsMenuType;
+  openRegex: RegExp;
+  closeRegex: RegExp;
+  enabledInCode: true;
+  enabledInTable: true;
+};
+
+export class SuggestionsMenuPlugin extends Plugin {
+  constructor(editor: Editor, options: Options) {
+    super({
+      props: {
+        handleClick: () => {
+          editor.events.emit(options.type);
+          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 this.execute(
+                view,
+                pos,
+                pos,
+                options.openRegex,
+                (state, match) => {
+                  if (match) {
+                    editor.events.emit(EventType.SuggestionsMenuOpen, {
+                      type: options.type,
+                      query: match[1],
+                    });
+                  } else {
+                    editor.events.emit(
+                      EventType.SuggestionsMenuClose,
+                      options.type
+                    );
+                  }
+                  return null;
+                }
+              );
+            });
+          }
+
+          const { pos } = view.state.selection.$from;
+
+          // 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"
+          ) {
+            return this.execute(
+              view,
+              pos,
+              pos,
+              options.openRegex,
+              (state, match) =>
+                // just tell Prosemirror we handled it and not to do anything
+                match ? true : null
+            );
+          }
+
+          return false;
+        },
+      },
+    });
+  }
+
+  // based on the input rules code in Prosemirror, here:
+  // https://github.com/ProseMirror/prosemirror-inputrules/blob/master/src/inputrules.js
+  private execute(
+    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;
+  }
+}

shared/editor/types/index.ts

@@ -7,14 +7,9 @@ import { DefaultTheme } from "styled-components";
 export type PlainTextSerializer = (node: ProsemirrorNode) => string;
 
 export enum EventType {
-  blockMenuOpen = "blockMenuOpen",
-  blockMenuClose = "blockMenuClose",
-  emojiMenuOpen = "emojiMenuOpen",
-  emojiMenuClose = "emojiMenuClose",
-  linkMenuOpen = "linkMenuOpen",
-  linkMenuClose = "linkMenuClose",
-  mentionMenuOpen = "mentionMenuOpen",
-  mentionMenuClose = "mentionMenuClose",
+  SuggestionsMenuOpen = "suggestionMenuOpen",
+  SuggestionsMenuClose = "suggestionMenuClose",
+  LinkToolbarOpen = "linkMenuOpen",
 }
 
 export type MenuItem = {