@blocknote/core 0.42.3 → 0.44.0

package/src/extensions/LinkToolbar/LinkToolbar.ts

@@ -0,0 +1,121 @@
+import { getMarkRange, posToDOMRect } from "@tiptap/core";
+import { createExtension } from "../../editor/BlockNoteExtension.js";
+import { getPmSchema } from "../../api/pmUtil.js";
+
+export const LinkToolbarExtension = createExtension(({ editor }) => {
+  function getLinkElementAtPos(pos: number) {
+    let currentNode = editor.prosemirrorView.nodeDOM(pos);
+    while (currentNode && currentNode.parentElement) {
+      if (currentNode.nodeName === "A") {
+        return currentNode as HTMLAnchorElement;
+      }
+      currentNode = currentNode.parentElement;
+    }
+    return null;
+  }
+
+  function getMarkAtPos(pos: number, markType: string) {
+    return editor.transact((tr) => {
+      const resolvedPos = tr.doc.resolve(pos);
+      const mark = resolvedPos
+        .marks()
+        .find((mark) => mark.type.name === markType);
+
+      if (!mark) {
+        return;
+      }
+
+      const markRange = getMarkRange(resolvedPos, mark.type);
+      if (!markRange) {
+        return;
+      }
+
+      return {
+        range: markRange,
+        mark,
+        get text() {
+          return tr.doc.textBetween(markRange.from, markRange.to);
+        },
+        get position() {
+          // to minimize re-renders, we convert to JSON, which is the same shape anyway
+          return posToDOMRect(
+            editor.prosemirrorView,
+            markRange.from,
+            markRange.to,
+          ).toJSON() as DOMRect;
+        },
+      };
+    });
+  }
+
+  function getLinkAtSelection() {
+    return editor.transact((tr) => {
+      const selection = tr.selection;
+      if (!selection.empty) {
+        return undefined;
+      }
+      return getMarkAtPos(selection.anchor, "link");
+    });
+  }
+
+  return {
+    key: "linkToolbar",
+
+    getLinkAtSelection,
+    getLinkElementAtPos,
+    getMarkAtPos,
+
+    getLinkAtElement(element: HTMLElement) {
+      return editor.transact(() => {
+        const posAtElement = editor.prosemirrorView.posAtDOM(element, 0) + 1;
+        return getMarkAtPos(posAtElement, "link");
+      });
+    },
+
+    editLink(
+      url: string,
+      text: string,
+      position = editor.transact((tr) => tr.selection.anchor),
+    ) {
+      editor.transact((tr) => {
+        const pmSchema = getPmSchema(tr);
+        const { range } = getMarkAtPos(position + 1, "link") || {
+          range: {
+            from: tr.selection.from,
+            to: tr.selection.to,
+          },
+        };
+        if (!range) {
+          return;
+        }
+        tr.insertText(text, range.from, range.to);
+        tr.addMark(
+          range.from,
+          range.from + text.length,
+          pmSchema.mark("link", { href: url }),
+        );
+      });
+      editor.prosemirrorView.focus();
+    },
+    deleteLink(position = editor.transact((tr) => tr.selection.anchor)) {
+      editor.transact((tr) => {
+        const pmSchema = getPmSchema(tr);
+        const { range } = getMarkAtPos(position + 1, "link") || {
+          range: {
+            from: tr.selection.from,
+            to: tr.selection.to,
+          },
+        };
+        if (!range) {
+          return;
+        }
+
+        tr.removeMark(range.from, range.to, pmSchema.marks["link"]).setMeta(
+          "preventAutolink",
+          true,
+        );
+      });
+      editor.prosemirrorView.focus();
+    },
+  } as const;
+});

package/src/extensions/NodeSelectionKeyboard/NodeSelectionKeyboard.ts

@@ -0,0 +1,74 @@
+import { Plugin, PluginKey, TextSelection } from "prosemirror-state";
+import { createExtension } from "../../editor/BlockNoteExtension.js";
+
+const PLUGIN_KEY = new PluginKey("node-selection-keyboard");
+// By default, typing with a node selection active will cause ProseMirror to
+// replace the node with one that contains editable content. This plugin blocks
+// this behaviour without also blocking things like keyboard shortcuts:
+//
+// - Lets through key presses that do not include alphanumeric characters. This
+// includes things like backspace/delete/home/end/etc.
+// - Lets through any key presses that include ctrl/meta keys. These will be
+// shortcuts of some kind like ctrl+C/mod+C.
+// - Special case for Enter key which creates a new paragraph block below and
+// sets the selection to it. This is just to bring the UX closer to Notion
+//
+// 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 NodeSelectionKeyboardExtension = createExtension(
+  () =>
+    ({
+      key: "nodeSelectionKeyboard",
+      prosemirrorPlugins: [
+        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;
+                }
+              }
+
+              return false;
+            },
+          },
+        }),
+      ],
+    }) as const,
+);

package/src/extensions/Placeholder/Placeholder.ts

@@ -0,0 +1,148 @@
+import { Plugin, PluginKey } from "prosemirror-state";
+import { Decoration, DecorationSet } from "prosemirror-view";
+import { v4 } from "uuid";
+import {
+  createExtension,
+  ExtensionOptions,
+} from "../../editor/BlockNoteExtension.js";
+import { BlockNoteEditorOptions } from "../../editor/BlockNoteEditor.js";
+
+const PLUGIN_KEY = new PluginKey(`blocknote-placeholder`);
+
+export const PlaceholderExtension = createExtension(
+  ({
+    editor,
+    options,
+  }: ExtensionOptions<
+    Pick<BlockNoteEditorOptions<any, any, any>, "placeholders">
+  >) => {
+    const placeholders = options.placeholders;
+    return {
+      key: "placeholder",
+      prosemirrorPlugins: [
+        new Plugin({
+          key: PLUGIN_KEY,
+          view: (view) => {
+            const uniqueEditorSelector = `placeholder-selector-${v4()}`;
+            view.dom.classList.add(uniqueEditorSelector);
+            const styleEl = document.createElement("style");
+
+            const nonce = editor._tiptapEditor.options.injectNonce;
+            if (nonce) {
+              styleEl.setAttribute("nonce", nonce);
+            }
+
+            if (view.root instanceof window.ShadowRoot) {
+              view.root.append(styleEl);
+            } else {
+              view.root.head.appendChild(styleEl);
+            }
+
+            const styleSheet = styleEl.sheet!;
+
+            const getSelector = (additionalSelectors = "") =>
+              `.${uniqueEditorSelector} .bn-block-content${additionalSelectors} .bn-inline-content:has(> .ProseMirror-trailingBreak:only-child):before`;
+
+            try {
+              // FIXME: the names "default" and "emptyDocument" are hardcoded
+              const {
+                default: defaultPlaceholder,
+                emptyDocument: emptyPlaceholder,
+                ...rest
+              } = placeholders || {};
+
+              // add block specific placeholders
+              for (const [blockType, placeholder] of Object.entries(rest)) {
+                const blockTypeSelector = `[data-content-type="${blockType}"]`;
+
+                styleSheet.insertRule(
+                  `${getSelector(blockTypeSelector)} { content: ${JSON.stringify(
+                    placeholder,
+                  )}; }`,
+                );
+              }
+
+              const onlyBlockSelector = `[data-is-only-empty-block]`;
+              const mustBeFocusedSelector = `[data-is-empty-and-focused]`;
+
+              // placeholder for when there's only one empty block
+              styleSheet.insertRule(
+                `${getSelector(onlyBlockSelector)} { content: ${JSON.stringify(
+                  emptyPlaceholder,
+                )}; }`,
+              );
+
+              // placeholder for default blocks, only when the cursor is in the block (mustBeFocused)
+              styleSheet.insertRule(
+                `${getSelector(mustBeFocusedSelector)} { content: ${JSON.stringify(
+                  defaultPlaceholder,
+                )}; }`,
+              );
+            } catch (e) {
+              // eslint-disable-next-line no-console
+              console.warn(
+                `Failed to insert placeholder CSS rule - this is likely due to the browser not supporting certain CSS pseudo-element selectors (:has, :only-child:, or :before)`,
+                e,
+              );
+            }
+
+            return {
+              destroy: () => {
+                if (view.root instanceof window.ShadowRoot) {
+                  view.root.removeChild(styleEl);
+                } else {
+                  view.root.head.removeChild(styleEl);
+                }
+              },
+            };
+          },
+          props: {
+            decorations: (state) => {
+              const { doc, selection } = state;
+
+              if (!editor.isEditable) {
+                return;
+              }
+
+              if (!selection.empty) {
+                return;
+              }
+
+              // Don't show placeholder when the cursor is inside a code block
+              if (selection.$from.parent.type.spec.code) {
+                return;
+              }
+
+              const decs = [];
+
+              // decoration for when there's only one empty block
+              // positions are hardcoded for now
+              if (state.doc.content.size === 6) {
+                decs.push(
+                  Decoration.node(2, 4, {
+                    "data-is-only-empty-block": "true",
+                  }),
+                );
+              }
+
+              const $pos = selection.$anchor;
+              const node = $pos.parent;
+
+              if (node.content.size === 0) {
+                const before = $pos.before();
+
+                decs.push(
+                  Decoration.node(before, before + node.nodeSize, {
+                    "data-is-empty-and-focused": "true",
+                  }),
+                );
+              }
+
+              return DecorationSet.create(doc, decs);
+            },
+          },
+        }),
+      ],
+    } as const;
+  },
+);

package/src/extensions/PreviousBlockType/{PreviousBlockTypePlugin.ts → PreviousBlockType.ts}

@@ -1,7 +1,7 @@
 import { findChildren } from "@tiptap/core";
 import { Plugin, PluginKey } from "prosemirror-state";
 import { Decoration, DecorationSet } from "prosemirror-view";
-import { BlockNoteExtension } from "../../editor/BlockNoteExtension.js";
+import { createExtension } from "../../editor/BlockNoteExtension.js";
 
 const PLUGIN_KEY = new PluginKey(`previous-blocks`);
 
@@ -24,15 +24,11 @@ const nodeAttributes: Record<string, string> = {
  *
  * Solution: When attributes change on a node, this plugin sets a data-* attribute with the "previous" value. This way we can still use CSS transitions. (See block.module.css)
  */
-export class PreviousBlockTypePlugin extends BlockNoteExtension {
-  public static key() {
-    return "previousBlockType";
-  }
-
-  constructor() {
-    super();
-    let timeout: ReturnType<typeof setTimeout>;
-    this.addProsemirrorPlugin(
+export const PreviousBlockTypeExtension = createExtension(() => {
+  let timeout: ReturnType<typeof setTimeout>;
+  return {
+    key: "previousBlockType",
+    prosemirrorPlugins: [
       new Plugin({
         key: PLUGIN_KEY,
         view(_editorView) {
@@ -207,6 +203,6 @@ export class PreviousBlockTypePlugin extends BlockNoteExtension {
           },
         },
       }),
-    );
-  }
-}
+    ],
+  } as const;
+});

package/src/extensions/ShowSelection/{ShowSelectionPlugin.ts → ShowSelection.ts}

@@ -1,7 +1,9 @@
 import { Plugin, PluginKey } from "prosemirror-state";
 import { Decoration, DecorationSet } from "prosemirror-view";
-import { BlockNoteEditor } from "../../editor/BlockNoteEditor.js";
-import { BlockNoteExtension } from "../../editor/BlockNoteExtension.js";
+import {
+  createExtension,
+  createStore,
+} from "../../editor/BlockNoteExtension.js";
 
 const PLUGIN_KEY = new PluginKey(`blocknote-show-selection`);
 
@@ -10,48 +12,40 @@ const PLUGIN_KEY = new PluginKey(`blocknote-show-selection`);
  * This can be used to highlight the current selection in the UI even when the
  * text editor is not focused.
  */
-export class ShowSelectionPlugin extends BlockNoteExtension {
-  public static key() {
-    return "showSelection";
-  }
-
-  private enabled = false;
-
-  public constructor(private readonly editor: BlockNoteEditor<any, any, any>) {
-    super();
-    this.addProsemirrorPlugin(
+export const ShowSelectionExtension = createExtension(({ editor }) => {
+  const store = createStore(
+    { enabled: false },
+    {
+      onUpdate() {
+        editor.transact((tr) => tr.setMeta(PLUGIN_KEY, {}));
+      },
+    },
+  );
+  return {
+    key: "showSelection",
+    store,
+    prosemirrorPlugins: [
       new Plugin({
         key: PLUGIN_KEY,
         props: {
           decorations: (state) => {
             const { doc, selection } = state;
-
-            if (!this.enabled) {
+            if (!store.state.enabled) {
               return DecorationSet.empty;
             }
-
             const dec = Decoration.inline(selection.from, selection.to, {
               "data-show-selection": "true",
             });
-
             return DecorationSet.create(doc, [dec]);
           },
         },
       }),
-    );
-  }
-
-  public setEnabled(enabled: boolean) {
-    if (this.enabled === enabled) {
-      return;
-    }
-
-    this.enabled = enabled;
-
-    this.editor.transact((tr) => tr.setMeta(PLUGIN_KEY, {}));
-  }
-
-  public getEnabled() {
-    return this.enabled;
-  }
-}
+    ],
+    /**
+     * Show or hide the selection decoration
+     */
+    showSelection(shouldShow: boolean) {
+      store.setState({ enabled: shouldShow });
+    },
+  } as const;
+});

package/src/extensions/SideMenu/{SideMenuPlugin.ts → SideMenu.ts}

@@ -10,7 +10,10 @@ import { EditorView } from "@tiptap/pm/view";
 
 import { Block } from "../../blocks/defaultBlocks.js";
 import type { BlockNoteEditor } from "../../editor/BlockNoteEditor.js";
-import { BlockNoteExtension } from "../../editor/BlockNoteExtension.js";
+import {
+  createExtension,
+  createStore,
+} from "../../editor/BlockNoteExtension.js";
 import { UiElementPosition } from "../../extensions-shared/UiElementPosition.js";
 import {
   BlockSchema,
@@ -184,11 +187,6 @@ export class SideMenuView<
       this.onKeyDown as EventListener,
       true,
     );
-
-    // Setting capture=true ensures that any parent container of the editor that
-    // gets scrolled will trigger the scroll event. Scroll events do not bubble
-    // and so won't propagate to the document by default.
-    pmView.root.addEventListener("scroll", this.onScroll, true);
   }
 
   updateState = (state: SideMenuState<BSchema, I, S>) => {
@@ -621,14 +619,6 @@ export class SideMenuView<
     this.pmView.dom.dispatchEvent(evt);
   }
 
-  onScroll = () => {
-    if (this.state?.show) {
-      this.state.referencePos = this.hoveredBlock!.getBoundingClientRect();
-      this.emitUpdate(this.state);
-    }
-    this.updateStateFromMousePos();
-  };
-
   // Needed in cases where the editor state updates without the mouse cursor
   // moving, as some state updates can require a side menu update. For example,
   // adding a button to the side menu which removes the block can cause the
@@ -676,89 +666,79 @@ export class SideMenuView<
       this.onKeyDown as EventListener,
       true,
     );
-    this.pmView.root.removeEventListener("scroll", this.onScroll, true);
   }
 }
 
 export const sideMenuPluginKey = new PluginKey("SideMenuPlugin");
 
-export class SideMenuProsemirrorPlugin<
-  BSchema extends BlockSchema,
-  I extends InlineContentSchema,
-  S extends StyleSchema,
-> extends BlockNoteExtension {
-  public static key() {
-    return "sideMenu";
-  }
-
-  public view: SideMenuView<BSchema, I, S> | undefined;
+export const SideMenuExtension = createExtension(({ editor }) => {
+  let view: SideMenuView<any, any, any> | undefined;
+  const store = createStore<SideMenuState<any, any, any> | undefined>(
+    undefined,
+  );
 
-  constructor(private readonly editor: BlockNoteEditor<BSchema, I, S>) {
-    super();
-    this.addProsemirrorPlugin(
+  return {
+    key: "sideMenu",
+    store,
+    prosemirrorPlugins: [
       new Plugin({
         key: sideMenuPluginKey,
         view: (editorView) => {
-          this.view = new SideMenuView(editor, editorView, (state) => {
-            this.emit("update", state);
+          view = new SideMenuView(editor, editorView, (state) => {
+            // TODO: Without spreading the state, in some cases like toggling
+            // `show`, this doesn't trigger an update.
+            store.setState({ ...state });
           });
-          return this.view;
+          return view;
         },
       }),
-    );
-  }
-
-  public onUpdate(callback: (state: SideMenuState<BSchema, I, S>) => void) {
-    return this.on("update", callback);
-  }
-
-  /**
-   * Handles drag & drop events for blocks.
-   */
-  blockDragStart = (
-    event: {
-      dataTransfer: DataTransfer | null;
-      clientY: number;
+    ],
+
+    /**
+     * Handles drag & drop events for blocks.
+     */
+    blockDragStart(
+      event: { dataTransfer: DataTransfer | null; clientY: number },
+      block: Block<any, any, any>,
+    ) {
+      if (view) {
+        view.isDragOrigin = true;
+      }
+      dragStart(event, block, editor);
     },
-    block: Block<BSchema, I, S>,
-  ) => {
-    if (this.view) {
-      this.view.isDragOrigin = true;
-    }
 
-    dragStart(event, block, this.editor);
-  };
+    /**
+     * Handles drag & drop events for blocks.
+     */
+    blockDragEnd() {
+      unsetDragImage(editor.prosemirrorView.root);
+      if (view) {
+        view.isDragOrigin = false;
+      }
 
-  /**
-   * Handles drag & drop events for blocks.
-   */
-  blockDragEnd = () => {
-    unsetDragImage(this.editor.prosemirrorView.root);
+      editor.blur();
+    },
 
-    if (this.view) {
-      this.view.isDragOrigin = false;
-    }
+    /**
+     * Freezes the side menu. When frozen, the side menu will stay
+     * attached to the same block regardless of which block is hovered by the
+     * mouse cursor.
+     */
+    freezeMenu() {
+      view!.menuFrozen = true;
+      view!.state!.show = true;
+      view!.emitUpdate(view!.state!);
+    },
 
-    this.editor.blur();
-  };
-  /**
-   * Freezes the side menu. When frozen, the side menu will stay
-   * attached to the same block regardless of which block is hovered by the
-   * mouse cursor.
-   */
-  freezeMenu = () => {
-    this.view!.menuFrozen = true;
-    this.view!.state!.show = true;
-    this.view!.emitUpdate(this.view!.state!);
-  };
-  /**
-   * Unfreezes the side menu. When frozen, the side menu will stay
-   * attached to the same block regardless of which block is hovered by the
-   * mouse cursor.
-   */
-  unfreezeMenu = () => {
-    this.view!.menuFrozen = false;
-    this.view!.state!.show = false;
-    this.view!.emitUpdate(this.view!.state!);
-  };
-}
+    /**
+     * Unfreezes the side menu. When frozen, the side menu will stay
+     * attached to the same block regardless of which block is hovered by the
+     * mouse cursor.
+     */
+    unfreezeMenu() {
+      view!.menuFrozen = false;
+      view!.state!.show = false;
+      view!.emitUpdate(view!.state!);
+    },
+  } as const;
+});