@blocknote/core 0.19.0 → 0.19.1

package/src/editor/BlockNoteExtensions.ts

@@ -1,6 +1,6 @@
-import { Extension, Extensions, extensions } from "@tiptap/core";
+import { AnyExtension, Extension, extensions } from "@tiptap/core";
 
-import type { BlockNoteEditor } from "./BlockNoteEditor.js";
+import type { BlockNoteEditor, BlockNoteExtension } from "./BlockNoteEditor.js";
 
 import Collaboration from "@tiptap/extension-collaboration";
 import CollaborationCursor from "@tiptap/extension-collaboration-cursor";
@@ -9,12 +9,22 @@ import { HardBreak } from "@tiptap/extension-hard-break";
 import { History } from "@tiptap/extension-history";
 import { Link } from "@tiptap/extension-link";
 import { Text } from "@tiptap/extension-text";
+import { Plugin } from "prosemirror-state";
 import * as Y from "yjs";
 import { createDropFileExtension } from "../api/clipboard/fromClipboard/fileDropExtension.js";
 import { createPasteFromClipboardExtension } from "../api/clipboard/fromClipboard/pasteExtension.js";
 import { createCopyToClipboardExtension } from "../api/clipboard/toClipboard/copyExtension.js";
 import { BackgroundColorExtension } from "../extensions/BackgroundColor/BackgroundColorExtension.js";
+import { FilePanelProsemirrorPlugin } from "../extensions/FilePanel/FilePanelPlugin.js";
+import { FormattingToolbarProsemirrorPlugin } from "../extensions/FormattingToolbar/FormattingToolbarPlugin.js";
 import { KeyboardShortcutsExtension } from "../extensions/KeyboardShortcuts/KeyboardShortcutsExtension.js";
+import { LinkToolbarProsemirrorPlugin } from "../extensions/LinkToolbar/LinkToolbarPlugin.js";
+import { NodeSelectionKeyboardPlugin } from "../extensions/NodeSelectionKeyboard/NodeSelectionKeyboardPlugin.js";
+import { PlaceholderPlugin } from "../extensions/Placeholder/PlaceholderPlugin.js";
+import { PreviousBlockTypePlugin } from "../extensions/PreviousBlockType/PreviousBlockTypePlugin.js";
+import { SideMenuProsemirrorPlugin } from "../extensions/SideMenu/SideMenuPlugin.js";
+import { SuggestionMenuProseMirrorPlugin } from "../extensions/SuggestionMenu/SuggestionPlugin.js";
+import { TableHandlesProsemirrorPlugin } from "../extensions/TableHandles/TableHandlesPlugin.js";
 import { TextAlignmentExtension } from "../extensions/TextAlignment/TextAlignmentExtension.js";
 import { TextColorExtension } from "../extensions/TextColor/TextColorExtension.js";
 import { TrailingNode } from "../extensions/TrailingNode/TrailingNodeExtension.js";
@@ -30,14 +40,11 @@ import {
   StyleSpecs,
 } from "../schema/index.js";
 
-/**
- * Get all the Tiptap extensions BlockNote is configured with by default
- */
-export const getBlockNoteExtensions = <
+type ExtensionOptions<
   BSchema extends BlockSchema,
   I extends InlineContentSchema,
   S extends StyleSchema
->(opts: {
+> = {
   editor: BlockNoteEditor<BSchema, I, S>;
   domAttributes: Partial<BlockNoteDOMAttributes>;
   blockSpecs: BlockSpecs;
@@ -56,8 +63,77 @@ export const getBlockNoteExtensions = <
   };
   disableExtensions: string[] | undefined;
   setIdAttribute?: boolean;
-}) => {
-  const ret: Extensions = [
+  animations: boolean;
+  tableHandles: boolean;
+  dropCursor: (opts: any) => Plugin;
+  placeholders: Record<string | "default", string>;
+};
+
+/**
+ * Get all the Tiptap extensions BlockNote is configured with by default
+ */
+export const getBlockNoteExtensions = <
+  BSchema extends BlockSchema,
+  I extends InlineContentSchema,
+  S extends StyleSchema
+>(
+  opts: ExtensionOptions<BSchema, I, S>
+) => {
+  const ret: Record<string, BlockNoteExtension> = {};
+  const tiptapExtensions = getTipTapExtensions(opts);
+
+  for (const ext of tiptapExtensions) {
+    ret[ext.name] = ext;
+  }
+
+  // Note: this is pretty hardcoded and will break when user provides plugins with same keys.
+  // Define name on plugins instead and not make this a map?
+  ret["formattingToolbar"] = new FormattingToolbarProsemirrorPlugin(
+    opts.editor
+  );
+  ret["linkToolbar"] = new LinkToolbarProsemirrorPlugin(opts.editor);
+  ret["sideMenu"] = new SideMenuProsemirrorPlugin(opts.editor);
+  ret["suggestionMenus"] = new SuggestionMenuProseMirrorPlugin(opts.editor);
+  ret["filePanel"] = new FilePanelProsemirrorPlugin(opts.editor as any);
+  ret["placeholder"] = new PlaceholderPlugin(opts.editor, opts.placeholders);
+
+  if (opts.animations ?? true) {
+    ret["animations"] = new PreviousBlockTypePlugin();
+  }
+
+  if (opts.tableHandles) {
+    ret["tableHandles"] = new TableHandlesProsemirrorPlugin(opts.editor as any);
+  }
+
+  ret["dropCursor"] = {
+    plugin: opts.dropCursor({
+      width: 5,
+      color: "#ddeeff",
+      editor: opts.editor,
+    }),
+  };
+
+  ret["nodeSelectionKeyboard"] = new NodeSelectionKeyboardPlugin();
+
+  const disableExtensions: string[] = opts.disableExtensions || [];
+  for (const ext of Object.keys(disableExtensions)) {
+    delete ret[ext];
+  }
+
+  return ret;
+};
+
+/**
+ * Get all the Tiptap extensions BlockNote is configured with by default
+ */
+const getTipTapExtensions = <
+  BSchema extends BlockSchema,
+  I extends InlineContentSchema,
+  S extends StyleSchema
+>(
+  opts: ExtensionOptions<BSchema, I, S>
+) => {
+  const tiptapExtensions: AnyExtension[] = [
     extensions.ClipboardTextSerializer,
     extensions.Commands,
     extensions.Editable,
@@ -81,6 +157,7 @@ export const getBlockNoteExtensions = <
 
     // marks:
     Link.extend({
+      inclusive: false,
       addKeyboardShortcuts() {
         return {
           "Mod-k": () => {
@@ -163,7 +240,7 @@ export const getBlockNoteExtensions = <
   ];
 
   if (opts.collaboration) {
-    ret.push(
+    tiptapExtensions.push(
       Collaboration.configure({
         fragment: opts.collaboration.fragment,
       })
@@ -188,7 +265,7 @@ export const getBlockNoteExtensions = <
         cursor.insertBefore(nonbreakingSpace2, null);
         return cursor;
       };
-      ret.push(
+      tiptapExtensions.push(
         CollaborationCursor.configure({
           user: opts.collaboration.user,
           render: opts.collaboration.renderCursor || defaultRender,
@@ -198,9 +275,8 @@ export const getBlockNoteExtensions = <
     }
   } else {
     // disable history extension when collaboration is enabled as Yjs takes care of undo / redo
-    ret.push(History);
+    tiptapExtensions.push(History);
   }
 
-  const disableExtensions: string[] = opts.disableExtensions || [];
-  return ret.filter((ex) => !disableExtensions.includes(ex.name));
+  return tiptapExtensions;
 };

package/src/extensions/KeyboardShortcuts/KeyboardShortcutsExtension.ts

@@ -33,6 +33,9 @@ export const KeyboardShortcutsExtension = Extension.create<{
         () =>
           commands.command(({ state }) => {
             const blockInfo = getBlockInfoFromSelection(state);
+            if (!blockInfo.isBlockContainer) {
+              return false;
+            }
 
             const selectionAtBlockStart =
               state.selection.from === blockInfo.blockContent.beforePos + 1;
@@ -57,7 +60,11 @@ export const KeyboardShortcutsExtension = Extension.create<{
         // Removes a level of nesting if the block is indented if the selection is at the start of the block.
         () =>
           commands.command(({ state }) => {
-            const { blockContent } = getBlockInfoFromSelection(state);
+            const blockInfo = getBlockInfoFromSelection(state);
+            if (!blockInfo.isBlockContainer) {
+              return false;
+            }
+            const { blockContent } = blockInfo;
 
             const selectionAtBlockStart =
               state.selection.from === blockContent.beforePos + 1;
@@ -72,8 +79,11 @@ export const KeyboardShortcutsExtension = Extension.create<{
         // block. The target block for merging must contain inline content.
         () =>
           commands.command(({ state }) => {
-            const { bnBlock: blockContainer, blockContent } =
-              getBlockInfoFromSelection(state);
+            const blockInfo = getBlockInfoFromSelection(state);
+            if (!blockInfo.isBlockContainer) {
+              return false;
+            }
+            const { bnBlock: blockContainer, blockContent } = blockInfo;
 
             const selectionAtBlockStart =
               state.selection.from === blockContent.beforePos + 1;
@@ -94,6 +104,9 @@ export const KeyboardShortcutsExtension = Extension.create<{
           commands.command(({ state, dispatch }) => {
             // when at the start of a first block in a column
             const blockInfo = getBlockInfoFromSelection(state);
+            if (!blockInfo.isBlockContainer) {
+              return false;
+            }
 
             const selectionAtBlockStart =
               state.selection.from === blockInfo.blockContent.beforePos + 1;
@@ -315,11 +328,15 @@ export const KeyboardShortcutsExtension = Extension.create<{
         () =>
           commands.command(({ state }) => {
             // TODO: Change this to not rely on offsets & schema assumptions
+            const blockInfo = getBlockInfoFromSelection(state);
+            if (!blockInfo.isBlockContainer) {
+              return false;
+            }
             const {
               bnBlock: blockContainer,
               blockContent,
               childContainer,
-            } = getBlockInfoFromSelection(state);
+            } = blockInfo;
 
             const { depth } = state.doc.resolve(blockContainer.beforePos);
             const blockAtDocEnd =
@@ -358,8 +375,11 @@ export const KeyboardShortcutsExtension = Extension.create<{
         // of the block.
         () =>
           commands.command(({ state }) => {
-            const { blockContent, bnBlock: blockContainer } =
-              getBlockInfoFromSelection(state);
+            const blockInfo = getBlockInfoFromSelection(state);
+            if (!blockInfo.isBlockContainer) {
+              return false;
+            }
+            const { bnBlock: blockContainer, blockContent } = blockInfo;
 
             const { depth } = state.doc.resolve(blockContainer.beforePos);
 
@@ -385,8 +405,11 @@ export const KeyboardShortcutsExtension = Extension.create<{
         // empty & at the start of the block.
         () =>
           commands.command(({ state, dispatch }) => {
-            const { bnBlock: blockContainer, blockContent } =
-              getBlockInfoFromSelection(state);
+            const blockInfo = getBlockInfoFromSelection(state);
+            if (!blockInfo.isBlockContainer) {
+              return false;
+            }
+            const { bnBlock: blockContainer, blockContent } = blockInfo;
 
             const selectionAtBlockStart =
               state.selection.$anchor.parentOffset === 0;
@@ -419,7 +442,11 @@ export const KeyboardShortcutsExtension = Extension.create<{
         // deletes the selection beforehand, if it's not empty.
         () =>
           commands.command(({ state, chain }) => {
-            const { blockContent } = getBlockInfoFromSelection(state);
+            const blockInfo = getBlockInfoFromSelection(state);
+            if (!blockInfo.isBlockContainer) {
+              return false;
+            }
+            const { blockContent } = blockInfo;
 
             const selectionAtBlockStart =
               state.selection.$anchor.parentOffset === 0;

package/src/extensions/NodeSelectionKeyboard/NodeSelectionKeyboardPlugin.ts

@@ -15,51 +15,54 @@ const PLUGIN_KEY = new PluginKey("node-selection-keyboard");
 // While a more elegant solution would probably process transactions instead of
 // keystrokes, this brings us most of the way to Notion's UX without much added
 // complexity.
-export const NodeSelectionKeyboardPlugin = () => {
-  return new Plugin({
-    key: PLUGIN_KEY,
-    props: {
-      handleKeyDown: (view, event) => {
-        // Checks for node selection
-        if ("node" in view.state.selection) {
-          // Checks if key press uses ctrl/meta modifier
-          if (event.ctrlKey || event.metaKey) {
-            return false;
-          }
-          // Checks if key press is alphanumeric
-          if (event.key.length === 1) {
-            event.preventDefault();
+export class NodeSelectionKeyboardPlugin {
+  public readonly plugin: Plugin;
+  constructor() {
+    this.plugin = new Plugin({
+      key: PLUGIN_KEY,
+      props: {
+        handleKeyDown: (view, event) => {
+          // Checks for node selection
+          if ("node" in view.state.selection) {
+            // Checks if key press uses ctrl/meta modifier
+            if (event.ctrlKey || event.metaKey) {
+              return false;
+            }
+            // Checks if key press is alphanumeric
+            if (event.key.length === 1) {
+              event.preventDefault();
 
-            return true;
-          }
-          // Checks if key press is Enter
-          if (
-            event.key === "Enter" &&
-            !event.shiftKey &&
-            !event.altKey &&
-            !event.ctrlKey &&
-            !event.metaKey
-          ) {
-            const tr = view.state.tr;
-            view.dispatch(
-              tr
-                .insert(
-                  view.state.tr.selection.$to.after(),
-                  view.state.schema.nodes["paragraph"].createChecked()
-                )
-                .setSelection(
-                  new TextSelection(
-                    tr.doc.resolve(view.state.tr.selection.$to.after() + 1)
+              return true;
+            }
+            // Checks if key press is Enter
+            if (
+              event.key === "Enter" &&
+              !event.shiftKey &&
+              !event.altKey &&
+              !event.ctrlKey &&
+              !event.metaKey
+            ) {
+              const tr = view.state.tr;
+              view.dispatch(
+                tr
+                  .insert(
+                    view.state.tr.selection.$to.after(),
+                    view.state.schema.nodes["paragraph"].createChecked()
+                  )
+                  .setSelection(
+                    new TextSelection(
+                      tr.doc.resolve(view.state.tr.selection.$to.after() + 1)
+                    )
                   )
-                )
-            );
+              );
 
-            return true;
+              return true;
+            }
           }
-        }
 
-        return false;
+          return false;
+        },
       },
-    },
-  });
-};
+    });
+  }
+}

package/src/extensions/Placeholder/PlaceholderPlugin.ts

@@ -4,110 +4,114 @@ import type { BlockNoteEditor } from "../../editor/BlockNoteEditor.js";
 
 const PLUGIN_KEY = new PluginKey(`blocknote-placeholder`);
 
-export const PlaceholderPlugin = (
-  editor: BlockNoteEditor<any, any, any>,
-  placeholders: Record<string | "default", string>
-) => {
-  return new Plugin({
-    key: PLUGIN_KEY,
-    view: () => {
-      const styleEl = document.createElement("style");
-      const nonce = editor._tiptapEditor.options.injectNonce;
-      if (nonce) {
-        styleEl.setAttribute("nonce", nonce);
-      }
-      if (editor._tiptapEditor.view.root instanceof ShadowRoot) {
-        editor._tiptapEditor.view.root.append(styleEl);
-      } else {
-        editor._tiptapEditor.view.root.head.appendChild(styleEl);
-      }
-
-      const styleSheet = styleEl.sheet!;
-
-      const getBaseSelector = (additionalSelectors = "") =>
-        `.bn-block-content${additionalSelectors} .bn-inline-content:has(> .ProseMirror-trailingBreak:only-child):before`;
-
-      const getSelector = (
-        blockType: string | "default",
-        mustBeFocused = true
-      ) => {
-        const mustBeFocusedSelector = mustBeFocused
-          ? `[data-is-empty-and-focused]`
-          : ``;
-
-        if (blockType === "default") {
-          return getBaseSelector(mustBeFocusedSelector);
+export class PlaceholderPlugin {
+  public readonly plugin: Plugin;
+  constructor(
+    editor: BlockNoteEditor<any, any, any>,
+    placeholders: Record<string | "default", string>
+  ) {
+    this.plugin = new Plugin({
+      key: PLUGIN_KEY,
+      view: () => {
+        const styleEl = document.createElement("style");
+        const nonce = editor._tiptapEditor.options.injectNonce;
+        if (nonce) {
+          styleEl.setAttribute("nonce", nonce);
         }
+        if (editor._tiptapEditor.view.root instanceof ShadowRoot) {
+          editor._tiptapEditor.view.root.append(styleEl);
+        } else {
+          editor._tiptapEditor.view.root.head.appendChild(styleEl);
+        }
+
+        const styleSheet = styleEl.sheet!;
+
+        const getBaseSelector = (additionalSelectors = "") =>
+          `.bn-block-content${additionalSelectors} .bn-inline-content:has(> .ProseMirror-trailingBreak:only-child):before`;
 
-        const blockTypeSelector = `[data-content-type="${blockType}"]`;
-        return getBaseSelector(mustBeFocusedSelector + blockTypeSelector);
-      };
+        const getSelector = (
+          blockType: string | "default",
+          mustBeFocused = true
+        ) => {
+          const mustBeFocusedSelector = mustBeFocused
+            ? `[data-is-empty-and-focused]`
+            : ``;
+
+          if (blockType === "default") {
+            return getBaseSelector(mustBeFocusedSelector);
+          }
 
-      for (const [blockType, placeholder] of Object.entries(placeholders)) {
-        const mustBeFocused = blockType === "default";
+          const blockTypeSelector = `[data-content-type="${blockType}"]`;
+          return getBaseSelector(mustBeFocusedSelector + blockTypeSelector);
+        };
 
-        styleSheet.insertRule(
-          `${getSelector(blockType, mustBeFocused)}{ content: ${JSON.stringify(
-            placeholder
-          )}; }`
-        );
+        for (const [blockType, placeholder] of Object.entries(placeholders)) {
+          const mustBeFocused = blockType === "default";
 
-        // For some reason, the placeholders which show when the block is focused
-        // take priority over ones which show depending on block type, so we need
-        // to make sure the block specific ones are also used when the block is
-        // focused.
-        if (!mustBeFocused) {
           styleSheet.insertRule(
-            `${getSelector(blockType, true)}{ content: ${JSON.stringify(
-              placeholder
-            )}; }`
+            `${getSelector(
+              blockType,
+              mustBeFocused
+            )}{ content: ${JSON.stringify(placeholder)}; }`
           );
-        }
-      }
-
-      return {
-        destroy: () => {
-          if (editor._tiptapEditor.view.root instanceof ShadowRoot) {
-            editor._tiptapEditor.view.root.removeChild(styleEl);
-          } else {
-            editor._tiptapEditor.view.root.head.removeChild(styleEl);
+
+          // For some reason, the placeholders which show when the block is focused
+          // take priority over ones which show depending on block type, so we need
+          // to make sure the block specific ones are also used when the block is
+          // focused.
+          if (!mustBeFocused) {
+            styleSheet.insertRule(
+              `${getSelector(blockType, true)}{ content: ${JSON.stringify(
+                placeholder
+              )}; }`
+            );
           }
-        },
-      };
-    },
-    props: {
-      // TODO: maybe also add placeholder for empty document ("e.g.: start writing..")
-      decorations: (state) => {
-        const { doc, selection } = state;
-
-        if (!editor.isEditable) {
-          return;
         }
 
-        if (!selection.empty) {
-          return;
-        }
+        return {
+          destroy: () => {
+            if (editor._tiptapEditor.view.root instanceof ShadowRoot) {
+              editor._tiptapEditor.view.root.removeChild(styleEl);
+            } else {
+              editor._tiptapEditor.view.root.head.removeChild(styleEl);
+            }
+          },
+        };
+      },
+      props: {
+        // TODO: maybe also add placeholder for empty document ("e.g.: start writing..")
+        decorations: (state) => {
+          const { doc, selection } = state;
 
-        // Don't show placeholder when the cursor is inside a code block
-        if (selection.$from.parent.type.spec.code) {
-          return;
-        }
+          if (!editor.isEditable) {
+            return;
+          }
 
-        const $pos = selection.$anchor;
-        const node = $pos.parent;
+          if (!selection.empty) {
+            return;
+          }
 
-        if (node.content.size > 0) {
-          return null;
-        }
+          // Don't show placeholder when the cursor is inside a code block
+          if (selection.$from.parent.type.spec.code) {
+            return;
+          }
 
-        const before = $pos.before();
+          const $pos = selection.$anchor;
+          const node = $pos.parent;
 
-        const dec = Decoration.node(before, before + node.nodeSize, {
-          "data-is-empty-and-focused": "true",
-        });
+          if (node.content.size > 0) {
+            return null;
+          }
+
+          const before = $pos.before();
 
-        return DecorationSet.create(doc, [dec]);
+          const dec = Decoration.node(before, before + node.nodeSize, {
+            "data-is-empty-and-focused": "true",
+          });
+
+          return DecorationSet.create(doc, [dec]);
+        },
       },
-    },
-  });
-};
+    });
+  }
+}