@blocknote/core 0.42.3 → 0.44.0

package/src/extensions/LinkToolbar/LinkToolbarPlugin.ts

@@ -1,380 +0,0 @@
-import { getMarkRange, posToDOMRect, Range } from "@tiptap/core";
-
-import { EditorView } from "@tiptap/pm/view";
-import { Mark } from "prosemirror-model";
-import { EditorState, Plugin, PluginKey, PluginView } from "prosemirror-state";
-
-import { getPmSchema } from "../../api/pmUtil.js";
-import type { BlockNoteEditor } from "../../editor/BlockNoteEditor.js";
-import { BlockNoteExtension } from "../../editor/BlockNoteExtension.js";
-import { UiElementPosition } from "../../extensions-shared/UiElementPosition.js";
-import {
-  BlockSchema,
-  InlineContentSchema,
-  StyleSchema,
-} from "../../schema/index.js";
-
-export type LinkToolbarState = UiElementPosition & {
-  // The hovered link's URL, and the text it's displayed with in the
-  // editor.
-  url: string;
-  text: string;
-};
-
-class LinkToolbarView implements PluginView {
-  public state?: LinkToolbarState;
-  public emitUpdate: () => void;
-
-  menuUpdateTimer: ReturnType<typeof setTimeout> | undefined;
-  startMenuUpdateTimer: () => void;
-  stopMenuUpdateTimer: () => void;
-
-  mouseHoveredLinkMark: Mark | undefined;
-  mouseHoveredLinkMarkRange: Range | undefined;
-
-  keyboardHoveredLinkMark: Mark | undefined;
-  keyboardHoveredLinkMarkRange: Range | undefined;
-
-  linkMark: Mark | undefined;
-  linkMarkRange: Range | undefined;
-
-  constructor(
-    private readonly editor: BlockNoteEditor<any, any, any>,
-    private readonly pmView: EditorView,
-    emitUpdate: (state: LinkToolbarState) => void,
-  ) {
-    this.emitUpdate = () => {
-      if (!this.state) {
-        throw new Error("Attempting to update uninitialized link toolbar");
-      }
-
-      emitUpdate(this.state);
-    };
-
-    this.startMenuUpdateTimer = () => {
-      this.menuUpdateTimer = setTimeout(() => {
-        this.update(this.pmView, undefined, true);
-      }, 250);
-    };
-
-    this.stopMenuUpdateTimer = () => {
-      if (this.menuUpdateTimer) {
-        clearTimeout(this.menuUpdateTimer);
-        this.menuUpdateTimer = undefined;
-      }
-
-      return false;
-    };
-
-    this.pmView.dom.addEventListener("mouseover", this.mouseOverHandler);
-    this.pmView.root.addEventListener(
-      "click",
-      this.clickHandler 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.
-    this.pmView.root.addEventListener("scroll", this.scrollHandler, true);
-  }
-
-  mouseOverHandler = (event: MouseEvent) => {
-    // Resets the link mark currently hovered by the mouse cursor.
-    this.mouseHoveredLinkMark = undefined;
-    this.mouseHoveredLinkMarkRange = undefined;
-
-    this.stopMenuUpdateTimer();
-
-    if (
-      event.target instanceof HTMLAnchorElement &&
-      event.target.nodeName === "A"
-    ) {
-      // Finds link mark at the hovered element's position to update mouseHoveredLinkMark and
-      // mouseHoveredLinkMarkRange.
-      const hoveredLinkElement = event.target;
-      const posInHoveredLinkMark =
-        this.pmView.posAtDOM(hoveredLinkElement, 0) + 1;
-      const resolvedPosInHoveredLinkMark =
-        this.pmView.state.doc.resolve(posInHoveredLinkMark);
-      const marksAtPos = resolvedPosInHoveredLinkMark.marks();
-
-      for (const mark of marksAtPos) {
-        if (
-          mark.type.name === this.pmView.state.schema.mark("link").type.name
-        ) {
-          this.mouseHoveredLinkMark = mark;
-          this.mouseHoveredLinkMarkRange =
-            getMarkRange(resolvedPosInHoveredLinkMark, mark.type, mark.attrs) ||
-            undefined;
-
-          break;
-        }
-      }
-    }
-
-    this.startMenuUpdateTimer();
-
-    return false;
-  };
-
-  clickHandler = (event: MouseEvent) => {
-    const editorWrapper = this.pmView.dom.parentElement!;
-
-    if (
-      // Toolbar is open.
-      this.linkMark &&
-      // An element is clicked.
-      event &&
-      event.target &&
-      // The clicked element is not the editor.
-      !(
-        editorWrapper === (event.target as Node) ||
-        editorWrapper.contains(event.target as Node)
-      )
-    ) {
-      if (this.state?.show) {
-        this.state.show = false;
-        this.emitUpdate();
-      }
-    }
-  };
-
-  scrollHandler = () => {
-    if (this.linkMark !== undefined) {
-      if (this.state?.show) {
-        this.state.referencePos = posToDOMRect(
-          this.pmView,
-          this.linkMarkRange!.from,
-          this.linkMarkRange!.to,
-        );
-        this.emitUpdate();
-      }
-    }
-  };
-
-  editLink(url: string, text: string) {
-    this.editor.transact((tr) => {
-      const pmSchema = getPmSchema(tr);
-      tr.insertText(text, this.linkMarkRange!.from, this.linkMarkRange!.to);
-      tr.addMark(
-        this.linkMarkRange!.from,
-        this.linkMarkRange!.from + text.length,
-        pmSchema.mark("link", { href: url }),
-      );
-    });
-    this.pmView.focus();
-
-    if (this.state?.show) {
-      this.state.show = false;
-      this.emitUpdate();
-    }
-  }
-
-  deleteLink() {
-    this.editor.transact((tr) =>
-      tr
-        .removeMark(
-          this.linkMarkRange!.from,
-          this.linkMarkRange!.to,
-          this.linkMark!.type,
-        )
-        .setMeta("preventAutolink", true),
-    );
-    this.pmView.focus();
-
-    if (this.state?.show) {
-      this.state.show = false;
-      this.emitUpdate();
-    }
-  }
-
-  update(view: EditorView, oldState?: EditorState, fromMouseOver = false) {
-    const { state } = view;
-
-    const isSame =
-      oldState &&
-      oldState.selection.from === state.selection.from &&
-      oldState.selection.to === state.selection.to;
-
-    if (isSame || !this.pmView.hasFocus()) {
-      return;
-    }
-
-    // Saves the currently hovered link mark before it's updated.
-    const prevLinkMark = this.linkMark;
-
-    // Resets the currently hovered link mark.
-    this.linkMark = undefined;
-    this.linkMarkRange = undefined;
-
-    // Resets the link mark currently hovered by the keyboard cursor.
-    this.keyboardHoveredLinkMark = undefined;
-    this.keyboardHoveredLinkMarkRange = undefined;
-
-    // Finds link mark at the editor selection's position to update keyboardHoveredLinkMark and
-    // keyboardHoveredLinkMarkRange.
-    if (this.pmView.state.selection.empty) {
-      const marksAtPos = this.pmView.state.selection.$from.marks();
-
-      for (const mark of marksAtPos) {
-        if (
-          mark.type.name === this.pmView.state.schema.mark("link").type.name
-        ) {
-          this.keyboardHoveredLinkMark = mark;
-          this.keyboardHoveredLinkMarkRange =
-            getMarkRange(
-              this.pmView.state.selection.$from,
-              mark.type,
-              mark.attrs,
-            ) || undefined;
-
-          break;
-        }
-      }
-    }
-
-    if (this.mouseHoveredLinkMark && fromMouseOver) {
-      this.linkMark = this.mouseHoveredLinkMark;
-      this.linkMarkRange = this.mouseHoveredLinkMarkRange;
-    }
-
-    // Keyboard cursor position takes precedence over mouse hovered link.
-    if (this.keyboardHoveredLinkMark) {
-      this.linkMark = this.keyboardHoveredLinkMark;
-      this.linkMarkRange = this.keyboardHoveredLinkMarkRange;
-    }
-
-    if (this.linkMark && this.editor.isEditable) {
-      this.state = {
-        show: true,
-        referencePos: posToDOMRect(
-          this.pmView,
-          this.linkMarkRange!.from,
-          this.linkMarkRange!.to,
-        ),
-        url: this.linkMark!.attrs.href,
-        text: this.pmView.state.doc.textBetween(
-          this.linkMarkRange!.from,
-          this.linkMarkRange!.to,
-        ),
-      };
-      this.emitUpdate();
-
-      return;
-    }
-
-    // Hides menu.
-    if (
-      this.state?.show &&
-      prevLinkMark &&
-      (!this.linkMark || !this.editor.isEditable)
-    ) {
-      this.state.show = false;
-      this.emitUpdate();
-
-      return;
-    }
-  }
-
-  closeMenu = () => {
-    if (this.state?.show) {
-      this.state.show = false;
-      this.emitUpdate();
-    }
-  };
-
-  destroy() {
-    this.pmView.dom.removeEventListener("mouseover", this.mouseOverHandler);
-    this.pmView.root.removeEventListener("scroll", this.scrollHandler, true);
-    this.pmView.root.removeEventListener(
-      "click",
-      this.clickHandler as EventListener,
-      true,
-    );
-  }
-}
-
-export const linkToolbarPluginKey = new PluginKey("LinkToolbarPlugin");
-
-export class LinkToolbarProsemirrorPlugin<
-  BSchema extends BlockSchema,
-  I extends InlineContentSchema,
-  S extends StyleSchema,
-> extends BlockNoteExtension {
-  public static key() {
-    return "linkToolbar";
-  }
-
-  private view: LinkToolbarView | undefined;
-
-  constructor(editor: BlockNoteEditor<BSchema, I, S>) {
-    super();
-    this.addProsemirrorPlugin(
-      new Plugin({
-        key: linkToolbarPluginKey,
-        view: (editorView) => {
-          this.view = new LinkToolbarView(editor, editorView, (state) => {
-            this.emit("update", state);
-          });
-          return this.view;
-        },
-        props: {
-          handleKeyDown: (_view, event: KeyboardEvent) => {
-            if (event.key === "Escape" && this.shown) {
-              this.view!.closeMenu();
-              return true;
-            }
-            return false;
-          },
-        },
-      }),
-    );
-  }
-
-  public onUpdate(callback: (state: LinkToolbarState) => void) {
-    return this.on("update", callback);
-  }
-
-  /**
-   * Edit the currently hovered link.
-   */
-  public editLink = (url: string, text: string) => {
-    this.view!.editLink(url, text);
-  };
-
-  /**
-   * Delete the currently hovered link.
-   */
-  public deleteLink = () => {
-    this.view!.deleteLink();
-  };
-
-  /**
-   * When hovering on/off links using the mouse cursor, the link toolbar will
-   * open & close with a delay.
-   *
-   * This function starts the delay timer, and should be used for when the mouse
-   * cursor enters the link toolbar.
-   */
-  public startHideTimer = () => {
-    this.view!.startMenuUpdateTimer();
-  };
-
-  /**
-   * When hovering on/off links using the mouse cursor, the link toolbar will
-   * open & close with a delay.
-   *
-   * This function stops the delay timer, and should be used for when the mouse
-   * cursor exits the link toolbar.
-   */
-  public stopHideTimer = () => {
-    this.view!.stopMenuUpdateTimer();
-  };
-
-  public get shown() {
-    return this.view?.state?.show || false;
-  }
-
-  public closeMenu = () => this.view!.closeMenu();
-}

package/src/extensions/NodeSelectionKeyboard/NodeSelectionKeyboardPlugin.ts

@@ -1,75 +0,0 @@
-import { Plugin, PluginKey, TextSelection } from "prosemirror-state";
-import { BlockNoteExtension } 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 class NodeSelectionKeyboardPlugin extends BlockNoteExtension {
-  public static key() {
-    return "nodeSelectionKeyboard";
-  }
-
-  constructor() {
-    super();
-    this.addProsemirrorPlugin(
-      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;
-          },
-        },
-      }),
-    );
-  }
-}

package/src/extensions/Placeholder/PlaceholderPlugin.ts

@@ -1,147 +0,0 @@
-import { Plugin, PluginKey } from "prosemirror-state";
-import { Decoration, DecorationSet } from "prosemirror-view";
-import { v4 } from "uuid";
-import type { BlockNoteEditor } from "../../editor/BlockNoteEditor.js";
-import { BlockNoteExtension } from "../../editor/BlockNoteExtension.js";
-
-const PLUGIN_KEY = new PluginKey(`blocknote-placeholder`);
-
-export class PlaceholderPlugin extends BlockNoteExtension {
-  public static key() {
-    return "placeholder";
-  }
-
-  constructor(
-    editor: BlockNoteEditor<any, any, any>,
-    placeholders: Record<
-      string | "default" | "emptyDocument",
-      string | undefined
-    >,
-  ) {
-    super();
-    this.addProsemirrorPlugin(
-      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);
-          },
-        },
-      }),
-    );
-  }
-}

package/types/src/comments/models/User.d.ts

@@ -1,8 +0,0 @@
-/**
- * A collaborator of the document.
- */
-export type User = {
-    id: string;
-    username: string;
-    avatarUrl: string;
-};

package/types/src/editor/BlockNoteExtensions.d.ts

@@ -1,43 +0,0 @@
-import { Plugin } from "prosemirror-state";
-import * as Y from "yjs";
-import type { ThreadStore, User } from "../comments/index.js";
-import { BlockNoteDOMAttributes, BlockSchema, BlockSpecs, InlineContentSchema, InlineContentSpecs, StyleSchema, StyleSpecs } from "../schema/index.js";
-import type { BlockNoteEditor, BlockNoteEditorOptions, SupportedExtension } from "./BlockNoteEditor.js";
-import { BlockNoteSchema } from "../blocks/BlockNoteSchema.js";
-type ExtensionOptions<BSchema extends BlockSchema, I extends InlineContentSchema, S extends StyleSchema> = {
-    editor: BlockNoteEditor<BSchema, I, S>;
-    domAttributes: Partial<BlockNoteDOMAttributes>;
-    blockSpecs: BlockSpecs;
-    inlineContentSpecs: InlineContentSpecs;
-    styleSpecs: StyleSpecs;
-    trailingBlock: boolean | undefined;
-    collaboration?: {
-        fragment: Y.XmlFragment;
-        user: {
-            name: string;
-            color: string;
-            [key: string]: string;
-        };
-        provider: any;
-        renderCursor?: (user: any) => HTMLElement;
-        showCursorLabels?: "always" | "activity";
-    };
-    disableExtensions: string[] | undefined;
-    setIdAttribute?: boolean;
-    animations: boolean;
-    tableHandles: boolean;
-    dropCursor: (opts: any) => Plugin;
-    placeholders: Record<string | "default" | "emptyDocument", string | undefined>;
-    tabBehavior?: "prefer-navigate-ui" | "prefer-indent";
-    comments?: {
-        schema?: BlockNoteSchema<any, any, any>;
-        threadStore: ThreadStore;
-        resolveUsers?: (userIds: string[]) => Promise<User[]>;
-    };
-    pasteHandler: BlockNoteEditorOptions<any, any, any>["pasteHandler"];
-};
-/**
- * Get all the Tiptap extensions BlockNote is configured with by default
- */
-export declare const getBlockNoteExtensions: <BSchema extends BlockSchema, I extends InlineContentSchema, S extends StyleSchema>(opts: ExtensionOptions<BSchema, I, S>) => Record<string, SupportedExtension>;
-export {};