@blocknote/core 0.11.2 → 0.12.1

package/src/extensions/{SlashMenu/defaultSlashMenuItems.ts → SuggestionMenu/getDefaultSlashMenuItems.ts}

@@ -1,15 +1,14 @@
-import { defaultBlockSchema } from "../../blocks/defaultBlocks";
-import type { BlockNoteEditor } from "../../editor/BlockNoteEditor";
+import { Block, PartialBlock } from "../../blocks/defaultBlocks";
+import { checkDefaultBlockTypeInSchema } from "../../blocks/defaultBlockTypeGuards";
+import { BlockNoteEditor } from "../../editor/BlockNoteEditor";
 import {
-  Block,
   BlockSchema,
   InlineContentSchema,
-  PartialBlock,
-  StyleSchema,
   isStyledTextInlineContent,
+  StyleSchema,
 } from "../../schema";
-import { imageToolbarPluginKey } from "../ImageToolbar/ImageToolbarPlugin";
-import { BaseSlashMenuItem } from "./BaseSlashMenuItem";
+import { formatKeyboardShortcut } from "../../util/browser";
+import { DefaultSuggestionItem } from "./DefaultSuggestionItem";
 
 // Sets the editor's text cursor position to the next content editable block,
 // so either a block with inline content or a table. The last block is always a
@@ -21,11 +20,11 @@ function setSelectionToNextContentEditableBlock<
   S extends StyleSchema
 >(editor: BlockNoteEditor<BSchema, I, S>) {
   let block = editor.getTextCursorPosition().block;
-  let contentType = editor.blockSchema[block.type].content;
+  let contentType = editor.schema.blockSchema[block.type].content;
 
   while (contentType === "none") {
     block = editor.getTextCursorPosition().nextBlock!;
-    contentType = editor.blockSchema[block.type].content as
+    contentType = editor.schema.blockSchema[block.type].content as
       | "inline"
       | "table"
       | "none";
@@ -37,7 +36,7 @@ function setSelectionToNextContentEditableBlock<
 // updates the current block instead of inserting a new one below. If the new
 // block doesn't contain editable content, the cursor is moved to the next block
 // that does.
-function insertOrUpdateBlock<
+export function insertOrUpdateBlock<
   BSchema extends BlockSchema,
   I extends InlineContentSchema,
   S extends StyleSchema
@@ -74,94 +73,106 @@ function insertOrUpdateBlock<
   return insertedBlock;
 }
 
-export const getDefaultSlashMenuItems = <
+export function getDefaultSlashMenuItems<
   BSchema extends BlockSchema,
   I extends InlineContentSchema,
   S extends StyleSchema
->(
-  schema: BSchema = defaultBlockSchema as unknown as BSchema
-) => {
-  const slashMenuItems: BaseSlashMenuItem<BSchema, I, S>[] = [];
-
-  if ("heading" in schema && "level" in schema.heading.propSchema) {
-    // Command for creating a level 1 heading
-    if (schema.heading.propSchema.level.values?.includes(1)) {
-      slashMenuItems.push({
-        name: "Heading",
-        aliases: ["h", "heading1", "h1"],
-        execute: (editor) =>
+>(editor: BlockNoteEditor<BSchema, I, S>) {
+  const items: DefaultSuggestionItem[] = [];
+
+  if (checkDefaultBlockTypeInSchema("heading", editor)) {
+    items.push(
+      {
+        title: "Heading 1",
+        onItemClick: () => {
           insertOrUpdateBlock(editor, {
             type: "heading",
             props: { level: 1 },
-          } as PartialBlock<BSchema, I, S>),
-      });
-    }
-
-    // Command for creating a level 2 heading
-    if (schema.heading.propSchema.level.values?.includes(2)) {
-      slashMenuItems.push({
-        name: "Heading 2",
-        aliases: ["h2", "heading2", "subheading"],
-        execute: (editor) =>
+          });
+        },
+        subtext: "Used for a top-level heading",
+        badge: formatKeyboardShortcut("Mod-Alt-1"),
+        aliases: ["h", "heading1", "h1"],
+        group: "Headings",
+      },
+      {
+        title: "Heading 2",
+        onItemClick: () => {
           insertOrUpdateBlock(editor, {
             type: "heading",
             props: { level: 2 },
-          } as PartialBlock<BSchema, I, S>),
-      });
-    }
-
-    // Command for creating a level 3 heading
-    if (schema.heading.propSchema.level.values?.includes(3)) {
-      slashMenuItems.push({
-        name: "Heading 3",
-        aliases: ["h3", "heading3", "subheading"],
-        execute: (editor) =>
+          });
+        },
+        subtext: "Used for key sections",
+        badge: formatKeyboardShortcut("Mod-Alt-2"),
+        aliases: ["h2", "heading2", "subheading"],
+        group: "Headings",
+      },
+      {
+        title: "Heading 3",
+        onItemClick: () => {
           insertOrUpdateBlock(editor, {
             type: "heading",
             props: { level: 3 },
-          } as PartialBlock<BSchema, I, S>),
-      });
-    }
+          });
+        },
+        subtext: "Used for subsections and group headings",
+        badge: formatKeyboardShortcut("Mod-Alt-3"),
+        aliases: ["h3", "heading3", "subheading"],
+        group: "Headings",
+      }
+    );
   }
 
-  if ("bulletListItem" in schema) {
-    slashMenuItems.push({
-      name: "Bullet List",
-      aliases: ["ul", "list", "bulletlist", "bullet list"],
-      execute: (editor) =>
+  if (checkDefaultBlockTypeInSchema("numberedListItem", editor)) {
+    items.push({
+      title: "Numbered List",
+      onItemClick: () => {
         insertOrUpdateBlock(editor, {
-          type: "bulletListItem",
-        }),
+          type: "numberedListItem",
+        });
+      },
+      subtext: "Used to display a numbered list",
+      badge: formatKeyboardShortcut("Mod-Shift-7"),
+      aliases: ["ol", "li", "list", "numberedlist", "numbered list"],
+      group: "Basic blocks",
     });
   }
 
-  if ("numberedListItem" in schema) {
-    slashMenuItems.push({
-      name: "Numbered List",
-      aliases: ["li", "list", "numberedlist", "numbered list"],
-      execute: (editor) =>
+  if (checkDefaultBlockTypeInSchema("bulletListItem", editor)) {
+    items.push({
+      title: "Bullet List",
+      onItemClick: () => {
         insertOrUpdateBlock(editor, {
-          type: "numberedListItem",
-        }),
+          type: "bulletListItem",
+        });
+      },
+      subtext: "Used to display an unordered list",
+      badge: formatKeyboardShortcut("Mod-Shift-8"),
+      aliases: ["ul", "li", "list", "bulletlist", "bullet list"],
+      group: "Basic blocks",
     });
   }
 
-  if ("paragraph" in schema) {
-    slashMenuItems.push({
-      name: "Paragraph",
-      aliases: ["p"],
-      execute: (editor) =>
+  if (checkDefaultBlockTypeInSchema("paragraph", editor)) {
+    items.push({
+      title: "Paragraph",
+      onItemClick: () => {
         insertOrUpdateBlock(editor, {
           type: "paragraph",
-        }),
+        });
+      },
+      subtext: "Used for the body of your document",
+      badge: formatKeyboardShortcut("Mod-Alt-0"),
+      aliases: ["p", "paragraph"],
+      group: "Basic blocks",
     });
   }
 
-  if ("table" in schema) {
-    slashMenuItems.push({
-      name: "Table",
-      aliases: ["table"],
-      execute: (editor) => {
+  if (checkDefaultBlockTypeInSchema("table", editor)) {
+    items.push({
+      title: "Table",
+      onItemClick: () => {
         insertOrUpdateBlock(editor, {
           type: "table",
           content: {
@@ -175,14 +186,31 @@ export const getDefaultSlashMenuItems = <
               },
             ],
           },
-        } as PartialBlock<BSchema, I, S>);
+        });
       },
+      subtext: "Used for for tables",
+      aliases: ["table"],
+      group: "Advanced",
+      badge: undefined,
     });
   }
 
-  if ("image" in schema) {
-    slashMenuItems.push({
-      name: "Image",
+  if (checkDefaultBlockTypeInSchema("image", editor)) {
+    items.push({
+      title: "Image",
+      onItemClick: () => {
+        const insertedBlock = insertOrUpdateBlock(editor, {
+          type: "image",
+        });
+
+        // Immediately open the image toolbar
+        editor.prosemirrorView.dispatch(
+          editor._tiptapEditor.state.tr.setMeta(editor.imagePanel!.plugin, {
+            block: insertedBlock,
+          })
+        );
+      },
+      subtext: "Insert an image",
       aliases: [
         "image",
         "imageUpload",
@@ -194,20 +222,22 @@ export const getDefaultSlashMenuItems = <
         "drive",
         "dropbox",
       ],
-      execute: (editor) => {
-        const insertedBlock = insertOrUpdateBlock(editor, {
-          type: "image",
-        });
-
-        // Immediately open the image toolbar
-        editor._tiptapEditor.view.dispatch(
-          editor._tiptapEditor.state.tr.setMeta(imageToolbarPluginKey, {
-            block: insertedBlock,
-          })
-        );
-      },
+      group: "Media",
     });
   }
 
-  return slashMenuItems;
-};
+  return items;
+}
+
+export function filterSuggestionItems<
+  T extends { title: string; aliases?: readonly string[] }
+>(items: T[], query: string) {
+  return items.filter(
+    ({ title, aliases }) =>
+      title.toLowerCase().startsWith(query.toLowerCase()) ||
+      (aliases &&
+        aliases.filter((alias) =>
+          alias.toLowerCase().startsWith(query.toLowerCase())
+        ).length !== 0)
+  );
+}

package/src/extensions/TableHandles/TableHandlesPlugin.ts

@@ -1,42 +1,20 @@
 import { Plugin, PluginKey, PluginView } from "prosemirror-state";
 import { Decoration, DecorationSet, EditorView } from "prosemirror-view";
-import { EventEmitter } from "../../util/EventEmitter";
 import { nodeToBlock } from "../../api/nodeConversions/nodeConversions";
-import { DefaultBlockSchema } from "../../blocks/defaultBlocks";
+import { Block, DefaultBlockSchema } from "../../blocks/defaultBlocks";
 import type { BlockNoteEditor } from "../../editor/BlockNoteEditor";
 import {
-  Block,
   BlockFromConfigNoChildren,
   BlockSchemaWithBlock,
   InlineContentSchema,
-  PartialBlock,
   SpecificBlock,
   StyleSchema,
 } from "../../schema";
+import { EventEmitter } from "../../util/EventEmitter";
 import { getDraggableBlockFromCoords } from "../SideMenu/SideMenuPlugin";
 
 let dragImageElement: HTMLElement | undefined;
 
-function setHiddenDragImage() {
-  if (dragImageElement) {
-    return;
-  }
-
-  dragImageElement = document.createElement("div");
-  dragImageElement.innerHTML = "_";
-  dragImageElement.style.opacity = "0";
-  dragImageElement.style.height = "1px";
-  dragImageElement.style.width = "1px";
-  document.body.appendChild(dragImageElement);
-}
-
-function unsetHiddenDragImage() {
-  if (dragImageElement) {
-    document.body.removeChild(dragImageElement);
-    dragImageElement = undefined;
-  }
-}
-
 export type TableHandlesState<
   I extends InlineContentSchema,
   S extends StyleSchema
@@ -58,6 +36,26 @@ export type TableHandlesState<
     | undefined;
 };
 
+function setHiddenDragImage() {
+  if (dragImageElement) {
+    return;
+  }
+
+  dragImageElement = document.createElement("div");
+  dragImageElement.innerHTML = "_";
+  dragImageElement.style.opacity = "0";
+  dragImageElement.style.height = "1px";
+  dragImageElement.style.width = "1px";
+  document.body.appendChild(dragImageElement);
+}
+
+function unsetHiddenDragImage() {
+  if (dragImageElement) {
+    document.body.removeChild(dragImageElement);
+    dragImageElement = undefined;
+  }
+}
+
 function getChildIndex(node: Element) {
   return Array.prototype.indexOf.call(node.parentElement!.childNodes, node);
 }
@@ -91,7 +89,7 @@ export class TableHandlesView<
 > implements PluginView
 {
   public state?: TableHandlesState<I, S>;
-  public updateState: () => void;
+  public emitUpdate: () => void;
 
   public tableId: string | undefined;
   public tablePos: number | undefined;
@@ -101,16 +99,20 @@ export class TableHandlesView<
   public prevWasEditable: boolean | null = null;
 
   constructor(
-    private readonly editor: BlockNoteEditor<BSchema, I, S>,
+    private readonly editor: BlockNoteEditor<
+      BlockSchemaWithBlock<"table", DefaultBlockSchema["table"]>,
+      I,
+      S
+    >,
     private readonly pmView: EditorView,
-    updateState: (state: TableHandlesState<I, S>) => void
+    emitUpdate: (state: TableHandlesState<I, S>) => void
   ) {
-    this.updateState = () => {
+    this.emitUpdate = () => {
       if (!this.state) {
         throw new Error("Attempting to update uninitialized image toolbar");
       }
 
-      updateState(this.state);
+      emitUpdate(this.state);
     };
 
     pmView.dom.addEventListener("mousemove", this.mouseMoveHandler);
@@ -131,7 +133,7 @@ export class TableHandlesView<
     if (!target || !this.editor.isEditable) {
       if (this.state?.show) {
         this.state.show = false;
-        this.updateState();
+        this.emitUpdate();
       }
       return;
     }
@@ -175,9 +177,9 @@ export class TableHandlesView<
 
       block = nodeToBlock(
         node,
-        this.editor.blockSchema,
-        this.editor.inlineContentSchema,
-        this.editor.styleSchema,
+        this.editor.schema.blockSchema,
+        this.editor.schema.inlineContentSchema,
+        this.editor.schema.styleSchema,
         this.editor.blockCache
       );
       this.tablePos = pos + 1;
@@ -196,7 +198,7 @@ export class TableHandlesView<
 
       draggingState: undefined,
     };
-    this.updateState();
+    this.emitUpdate();
 
     return false;
   };
@@ -286,7 +288,7 @@ export class TableHandlesView<
 
     // Emits a state update if any of the fields have changed.
     if (emitStateUpdate) {
-      this.updateState();
+      this.emitUpdate();
     }
 
     // Dispatches a dummy transaction to force a decorations update if
@@ -327,7 +329,7 @@ export class TableHandlesView<
         type: "tableContent",
         rows: rows,
       },
-    } as PartialBlock<BSchema, I, S>);
+    });
   };
 
   scrollHandler = () => {
@@ -343,7 +345,7 @@ export class TableHandlesView<
 
       this.state.referencePosTable = tableElement.getBoundingClientRect();
       this.state.referencePosCell = cellElement.getBoundingClientRect();
-      this.updateState();
+      this.emitUpdate();
     }
   };
 
@@ -360,14 +362,25 @@ export class TableHandlesView<
 export const tableHandlesPluginKey = new PluginKey("TableHandlesPlugin");
 
 export class TableHandlesProsemirrorPlugin<
-  BSchema extends BlockSchemaWithBlock<"table", DefaultBlockSchema["table"]>,
   I extends InlineContentSchema,
   S extends StyleSchema
 > extends EventEmitter<any> {
-  private view: TableHandlesView<BSchema, I, S> | undefined;
+  private view:
+    | TableHandlesView<
+        BlockSchemaWithBlock<"table", DefaultBlockSchema["table"]>,
+        I,
+        S
+      >
+    | undefined;
   public readonly plugin: Plugin;
 
-  constructor(private readonly editor: BlockNoteEditor<BSchema, I, S>) {
+  constructor(
+    private readonly editor: BlockNoteEditor<
+      BlockSchemaWithBlock<"table", DefaultBlockSchema["table"]>,
+      I,
+      S
+    >
+  ) {
     super();
     this.plugin = new Plugin({
       key: tableHandlesPluginKey,
@@ -531,7 +544,7 @@ export class TableHandlesProsemirrorPlugin<
       originalIndex: this.view!.state.colIndex,
       mousePos: event.clientX,
     };
-    this.view!.updateState();
+    this.view!.emitUpdate();
 
     this.editor._tiptapEditor.view.dispatch(
       this.editor._tiptapEditor.state.tr.setMeta(tableHandlesPluginKey, {
@@ -567,7 +580,7 @@ export class TableHandlesProsemirrorPlugin<
       originalIndex: this.view!.state.rowIndex,
       mousePos: event.clientY,
     };
-    this.view!.updateState();
+    this.view!.emitUpdate();
 
     this.editor._tiptapEditor.view.dispatch(
       this.editor._tiptapEditor.state.tr.setMeta(tableHandlesPluginKey, {
@@ -596,7 +609,7 @@ export class TableHandlesProsemirrorPlugin<
     }
 
     this.view!.state.draggingState = undefined;
-    this.view!.updateState();
+    this.view!.emitUpdate();
 
     this.editor._tiptapEditor.view.dispatch(
       this.editor._tiptapEditor.state.tr.setMeta(tableHandlesPluginKey, null)
@@ -609,11 +622,15 @@ export class TableHandlesProsemirrorPlugin<
    * Freezes the drag handles. When frozen, they will stay attached to the same
    * cell regardless of which cell is hovered by the mouse cursor.
    */
-  freezeHandles = () => (this.view!.menuFrozen = true);
+  freezeHandles = () => {
+    this.view!.menuFrozen = true;
+  };
 
   /**
    * Unfreezes the drag handles. When frozen, they will stay attached to the
    * same cell regardless of which cell is hovered by the mouse cursor.
    */
-  unfreezeHandles = () => (this.view!.menuFrozen = false);
+  unfreezeHandles = () => {
+    this.view!.menuFrozen = false;
+  };
 }

package/src/extensions-shared/UiElementPosition.ts

@@ -0,0 +1,4 @@
+export type UiElementPosition = {
+  show: boolean;
+  referencePos: DOMRect;
+};

package/src/index.ts

@@ -2,21 +2,21 @@ export * from "./api/exporters/html/externalHTMLExporter";
 export * from "./api/exporters/html/internalHTMLSerializer";
 export * from "./api/testUtil";
 export * from "./blocks/ImageBlockContent/uploadToTmpFilesDotOrg_DEV_ONLY";
+export * from "./blocks/defaultBlockTypeGuards";
 export * from "./blocks/defaultBlocks";
 export * from "./blocks/defaultProps";
 export * from "./editor/BlockNoteEditor";
 export * from "./editor/BlockNoteExtensions";
+export * from "./editor/BlockNoteSchema";
 export * from "./editor/selectionTypes";
-export * from "./extensions-shared/BaseUiElementTypes";
-export type { SuggestionItem } from "./extensions-shared/suggestion/SuggestionItem";
-export * from "./extensions-shared/suggestion/SuggestionPlugin";
+export * from "./extensions-shared/UiElementPosition";
 export * from "./extensions/FormattingToolbar/FormattingToolbarPlugin";
-export * from "./extensions/HyperlinkToolbar/HyperlinkToolbarPlugin";
-export * from "./extensions/ImageToolbar/ImageToolbarPlugin";
+export * from "./extensions/ImagePanel/ImageToolbarPlugin";
+export * from "./extensions/LinkToolbar/LinkToolbarPlugin";
 export * from "./extensions/SideMenu/SideMenuPlugin";
-export * from "./extensions/SlashMenu/BaseSlashMenuItem";
-export * from "./extensions/SlashMenu/SlashMenuPlugin";
-export { getDefaultSlashMenuItems } from "./extensions/SlashMenu/defaultSlashMenuItems";
+export * from "./extensions/SuggestionMenu/DefaultSuggestionItem";
+export * from "./extensions/SuggestionMenu/SuggestionPlugin";
+export * from "./extensions/SuggestionMenu/getDefaultSlashMenuItems";
 export * from "./extensions/TableHandles/TableHandlesPlugin";
 export * from "./schema";
 export * from "./util/browser";

package/src/pm-nodes/BlockContainer.ts

@@ -8,6 +8,7 @@ import {
   inlineContentToNodes,
   tableContentToNodes,
 } from "../api/nodeConversions/nodeConversions";
+import { PartialBlock } from "../blocks/defaultBlocks";
 import type { BlockNoteEditor } from "../editor/BlockNoteEditor";
 import { NonEditableBlockPlugin } from "../extensions/NonEditableBlocks/NonEditableBlockPlugin";
 import { PreviousBlockTypePlugin } from "../extensions/PreviousBlockType/PreviousBlockTypePlugin";
@@ -15,7 +16,6 @@ import {
   BlockNoteDOMAttributes,
   BlockSchema,
   InlineContentSchema,
-  PartialBlock,
   StyleSchema,
 } from "../schema";
 import { mergeCSSClasses } from "../util/browser";
@@ -109,7 +109,7 @@ export const BlockContainer = Node.create<{
     }
 
     const blockHTMLAttributes = {
-      ...(this.options.domAttributes?.blockContainer || {}),
+      ...(this.options.domAttributes?.block || {}),
       ...HTMLAttributes,
     };
     const block = document.createElement("div");
@@ -183,7 +183,7 @@ export const BlockContainer = Node.create<{
                   blockToNode(
                     child,
                     state.schema,
-                    this.options.editor.styleSchema
+                    this.options.editor.schema.styleSchema
                   )
                 );
               }
@@ -223,13 +223,13 @@ export const BlockContainer = Node.create<{
                 content = inlineContentToNodes(
                   block.content,
                   state.schema,
-                  this.options.editor.styleSchema
+                  this.options.editor.schema.styleSchema
                 );
               } else if (block.content.type === "tableContent") {
                 content = tableContentToNodes(
                   block.content,
                   state.schema,
-                  this.options.editor.styleSchema
+                  this.options.editor.schema.styleSchema
                 );
               } else {
                 throw new UnreachableCaseError(block.content.type);