Suggestion plugin refactor (#94)

* upgrade to react 18

* Maybe fixed React error in build

* Added early implementation of bubble menu & editor in separate react package

* Moved all hyperlink menus to react package

* Major structural overhaul to menu factories

* Added suggestions menu factory with new (hopefully final) factory structure

* Refactored bubble menu code to use improved factory structure

* Changes to bubble menu code and documentation

* Changes to bubble menu code and documentation

* General improvements, mostly to bubble and hyperlink menus

* comments after call

* Split bubble menu props into init & update props
Moved animation delay timeout to bubble menu plugin

* clean up packaging

* fix react error

* Changed bubble menu plugin view back to use a separate class

* Split hyperlink menu props into init & update props

* Changed hyperlink menu plugin view to use a separate class

* fix gitignore

* fix tsconfig

* Major cleanup for bubble menu factory code

* Major cleanup for hyperlink menu factory code

* Minor fixes

* Converted suggestion plugin view to use a class

* Changed editor example to use React as before

* Improved file structure and minor tweaks

* Minor refactor

* Fixed hyperlink menu behaviour

* Separated drag handle UI elements to react package

* Separated drag handle UI elements to react package

* Minor improvements

* fix lint

* refactor entrypoints (#77)

* refactor entrypoints

* fix packages

* fix build

* move some more files / remove root.module.css

* Fixed hyperlink edit menu bugs

* re-add font

* Removed bubble menu animation update delay hack

* Changed bubble menu placement to be at the start of the selection bounding box

* Fixed hyperlink menu naming inconsistencies

* Refactored block/drag menu to use one factory and separate view class

* Fixed bubble menu sometimes attempting to hide when already hidden

* Fixed drag preview styling

* Fixed tooltip styling

* Removed unnecessary updates from block menu

* Vanilla example (#78)

* add vanilla example

* add bold toggle

* add other factories to vanilla example

* add dragging

* Updated naming for bubble, block, and hyperlink menus

* Fixed drag handle tests

* Fixed drag and drop tests

* Improved how UI element factories are passed to extensions

* Updated suggestions/slash menu naming

* Updated slash menu selector for tests

* Split factory params into static and dynamic

* Minor fix to `BNSetContentType()`

* Improved getting & setting block type in formatting toolbar factory API

* Minor typing fix

* Suggestions plugin refactor/rewrite

* Combined factory `update()` and `show()` functions into single `render()` function

* Changed item callback to delete both trigger character and query

* Minor fix

* rename props -> staticParams in vanilla example

* Changed suggestions menu behaviour when typing multiple "/" characters

* Minor change

* Fixed build error and placeholder when adding block using side menu

---------

Co-authored-by: yousefed <[email protected]>

Author: matthewlipski

examples/vanilla/src/ui/slashMenuFactory.ts

@@ -42,7 +42,7 @@ export const slashMenuFactory: SuggestionsMenuFactory<SlashMenuItem> = (
       updateItems(
         params.items,
         staticParams.itemCallback,
-        params.selectedItemIndex
+        params.keyboardHoveredItemIndex
       );
 
       if (isHidden) {

packages/core/src/extensions/Placeholder/PlaceholderExtension.ts

@@ -81,7 +81,7 @@ export const Placeholder = Extension.create<PlaceholderOptions>({
                 }
 
                 // If slash menu is of drag type and active, show the filter placeholder
-                if (menuState?.type === "drag" && menuState?.active) {
+                if (menuState?.triggerCharacter === "" && menuState?.active) {
                   classes.push(this.options.isFilterClass);
                 }
                 // using widget, didn't work (caret position bug)

packages/core/src/extensions/SlashMenu/SlashMenuExtension.ts

@@ -31,7 +31,7 @@ export const SlashMenuExtension = Extension.create<SlashMenuOptions>({
       createSuggestionPlugin<SlashMenuItem>({
         pluginKey: SlashMenuPluginKey,
         editor: this.editor,
-        char: "/",
+        defaultTriggerCharacter: "/",
         suggestionsMenuFactory: this.options.slashMenuFactory!,
         items: (query) => {
           const commands = [];

packages/core/src/extensions/SlashMenu/SlashMenuItem.ts

@@ -1,49 +1,24 @@
 import { Editor, Range } from "@tiptap/core";
 import { SuggestionItem } from "../../shared/plugins/suggestion/SuggestionItem";
 
-export type SlashMenuCallback = (editor: Editor, range: Range) => boolean;
-
-export enum SlashMenuGroups {
-  HEADINGS = "Headings",
-  BASIC_BLOCKS = "Basic Blocks",
-  CODE = "Code Blocks",
-
-  // Just some examples, that are not currently in use
-  INLINE = "Inline",
-  EMBED = "Embed",
-  PLUGIN = "Plugin",
-}
-
 /**
  * A class that defines a slash command (/<command>).
  *
  * Not to be confused with ProseMirror commands nor TipTap commands.
  */
 export class SlashMenuItem implements SuggestionItem {
-  groupName: string;
-  // other parameters initialized in the constructor
-
   /**
    * Constructs a new slash-command.
    *
    * @param name The name of the command
-   * @param group Used to organize the menu
    * @param execute The callback for creating a new node
    * @param aliases Aliases for this command
-   * @param icon To be shown next to the name in the menu
-   * @param hint Short description of command
-   * @param shortcut Info about keyboard shortcut that would activate this command
    */
   constructor(
     public readonly name: string,
-    public readonly group: SlashMenuGroups,
-    public readonly execute: SlashMenuCallback,
-    public readonly aliases: string[] = [],
-    public readonly hint?: string,
-    public readonly shortcut?: string
-  ) {
-    this.groupName = group;
-  }
+    public readonly execute: (editor: Editor, range: Range) => void,
+    public readonly aliases: string[] = []
+  ) {}
 
   match(query: string): boolean {
     return (

packages/core/src/extensions/SlashMenu/defaultCommands.tsx

@@ -1,5 +1,5 @@
-import { formatKeyboardShortcut } from "../../shared/utils";
-import { SlashMenuGroups, SlashMenuItem } from "./SlashMenuItem";
+import { SlashMenuItem } from "./SlashMenuItem";
+import { Editor, Range } from "@tiptap/core";
 
 /**
  * An array containing commands for creating all default blocks.
@@ -8,8 +8,7 @@ const defaultCommands: { [key: string]: SlashMenuItem } = {
   // Command for creating a level 1 heading
   heading: new SlashMenuItem(
     "Heading",
-    SlashMenuGroups.HEADINGS,
-    (editor, range) => {
+    (editor: Editor, range: Range) => {
       return editor
         .chain()
         .focus()
@@ -22,16 +21,13 @@ const defaultCommands: { [key: string]: SlashMenuItem } = {
         })
         .run();
     },
-    ["h", "heading1", "h1"],
-    "Used for a top-level heading",
-    formatKeyboardShortcut("Mod-Alt-1")
+    ["h", "heading1", "h1"]
   ),
 
   // Command for creating a level 2 heading
   heading2: new SlashMenuItem(
     "Heading 2",
-    SlashMenuGroups.HEADINGS,
-    (editor, range) => {
+    (editor: Editor, range: Range) => {
       return editor
         .chain()
         .focus()
@@ -44,16 +40,13 @@ const defaultCommands: { [key: string]: SlashMenuItem } = {
         })
         .run();
     },
-    ["h2", "heading2", "subheading"],
-    "Used for key sections",
-    formatKeyboardShortcut("Mod-Alt-2")
+    ["h2", "heading2", "subheading"]
   ),
 
   // Command for creating a level 3 heading
   heading3: new SlashMenuItem(
     "Heading 3",
-    SlashMenuGroups.HEADINGS,
-    (editor, range) => {
+    (editor: Editor, range: Range) => {
       return editor
         .chain()
         .focus()
@@ -66,16 +59,13 @@ const defaultCommands: { [key: string]: SlashMenuItem } = {
         })
         .run();
     },
-    ["h3", "heading3", "subheading"],
-    "Used for subsections and group headings",
-    formatKeyboardShortcut("Mod-Alt-3")
+    ["h3", "heading3", "subheading"]
   ),
 
   // Command for creating an ordered list
   numberedList: new SlashMenuItem(
     "Numbered List",
-    SlashMenuGroups.BASIC_BLOCKS,
-    (editor, range) => {
+    (editor: Editor, range: Range) => {
       return editor
         .chain()
         .focus()
@@ -86,16 +76,13 @@ const defaultCommands: { [key: string]: SlashMenuItem } = {
         })
         .run();
     },
-    ["li", "list", "numberedlist", "numbered list"],
-    "Used to display a numbered list",
-    formatKeyboardShortcut("Mod-Shift-7")
+    ["li", "list", "numberedlist", "numbered list"]
   ),
 
   // Command for creating a bullet list
   bulletList: new SlashMenuItem(
     "Bullet List",
-    SlashMenuGroups.BASIC_BLOCKS,
-    (editor, range) => {
+    (editor: Editor, range: Range) => {
       return editor
         .chain()
         .focus()
@@ -106,16 +93,13 @@ const defaultCommands: { [key: string]: SlashMenuItem } = {
         })
         .run();
     },
-    ["ul", "list", "bulletlist", "bullet list"],
-    "Used to display an unordered list",
-    formatKeyboardShortcut("Mod-Shift-8")
+    ["ul", "list", "bulletlist", "bullet list"]
   ),
 
   // Command for creating a paragraph (pretty useless)
   paragraph: new SlashMenuItem(
     "Paragraph",
-    SlashMenuGroups.BASIC_BLOCKS,
-    (editor, range) => {
+    (editor: Editor, range: Range) => {
       return editor
         .chain()
         .focus()
@@ -126,9 +110,7 @@ const defaultCommands: { [key: string]: SlashMenuItem } = {
         })
         .run();
     },
-    ["p"],
-    "Used for the body of your document",
-    formatKeyboardShortcut("Mod-Alt-0")
+    ["p"]
   ),
 
   //     replaceRangeWithNode(editor, range, node);

packages/core/src/extensions/SlashMenu/index.ts

@@ -1,11 +1,6 @@
 import { SlashMenuExtension } from "./SlashMenuExtension";
 import defaultCommands from "./defaultCommands";
-import { SlashMenuGroups, SlashMenuItem } from "./SlashMenuItem";
 
-export {
-  defaultCommands,
-  SlashMenuItem as SlashCommand,
-  SlashMenuGroups as CommandGroup,
-};
+export { defaultCommands };
 
 export default SlashMenuExtension;

packages/core/src/shared/plugins/suggestion/SuggestionItem.ts

@@ -7,15 +7,6 @@ export interface SuggestionItem {
    */
   name: string;
 
-  /**
-   * The name of the group to which this item belongs
-   */
-  groupName: string;
-
-  hint?: string;
-
-  shortcut?: string;
-
   /**
    * This function matches this item against a query string, the function should return **true** if the item
    * matches the query or **false** otherwise.