@blocknote/core 0.11.2 → 0.12.1

package/src/extensions/LinkToolbar/LinkToolbarPlugin.ts

@@ -0,0 +1,330 @@
+import { getMarkRange, posToDOMRect, Range } from "@tiptap/core";
+import { EditorView } from "@tiptap/pm/view";
+import { Mark } from "prosemirror-model";
+import { Plugin, PluginKey } from "prosemirror-state";
+
+import type { BlockNoteEditor } from "../../editor/BlockNoteEditor";
+import { BlockSchema, InlineContentSchema, StyleSchema } from "../../schema";
+import { UiElementPosition } from "../../extensions-shared/UiElementPosition";
+import { EventEmitter } from "../../util/EventEmitter";
+
+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 {
+  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();
+      }, 250);
+    };
+
+    this.stopMenuUpdateTimer = () => {
+      if (this.menuUpdateTimer) {
+        clearTimeout(this.menuUpdateTimer);
+        this.menuUpdateTimer = undefined;
+      }
+
+      return false;
+    };
+
+    this.pmView.dom.addEventListener("mouseover", this.mouseOverHandler);
+    document.addEventListener("click", this.clickHandler, true);
+    document.addEventListener("scroll", this.scrollHandler);
+  }
+
+  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) {
+    const tr = this.pmView.state.tr.insertText(
+      text,
+      this.linkMarkRange!.from,
+      this.linkMarkRange!.to
+    );
+    tr.addMark(
+      this.linkMarkRange!.from,
+      this.linkMarkRange!.from + text.length,
+      this.pmView.state.schema.mark("link", { href: url })
+    );
+    this.pmView.dispatch(tr);
+    this.pmView.focus();
+
+    if (this.state?.show) {
+      this.state.show = false;
+      this.emitUpdate();
+    }
+  }
+
+  deleteLink() {
+    this.pmView.dispatch(
+      this.pmView.state.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() {
+    if (!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) {
+      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;
+    }
+  }
+
+  destroy() {
+    this.pmView.dom.removeEventListener("mouseover", this.mouseOverHandler);
+    document.removeEventListener("scroll", this.scrollHandler);
+    document.removeEventListener("click", this.clickHandler, true);
+  }
+}
+
+export const linkToolbarPluginKey = new PluginKey("LinkToolbarPlugin");
+
+export class LinkToolbarProsemirrorPlugin<
+  BSchema extends BlockSchema,
+  I extends InlineContentSchema,
+  S extends StyleSchema
+> extends EventEmitter<any> {
+  private view: LinkToolbarView | undefined;
+  public readonly plugin: Plugin;
+
+  constructor(editor: BlockNoteEditor<BSchema, I, S>) {
+    super();
+    this.plugin = new Plugin({
+      key: linkToolbarPluginKey,
+      view: (editorView) => {
+        this.view = new LinkToolbarView(editor, editorView, (state) => {
+          this.emit("update", state);
+        });
+        return this.view;
+      },
+    });
+  }
+
+  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();
+  };
+}

package/src/extensions/Placeholder/PlaceholderExtension.ts

@@ -1,8 +1,6 @@
-import { Editor, Extension } from "@tiptap/core";
-import { Node as ProsemirrorNode } from "prosemirror-model";
+import { Extension } from "@tiptap/core";
 import { Plugin, PluginKey } from "prosemirror-state";
 import { Decoration, DecorationSet } from "prosemirror-view";
-import { slashMenuPluginKey } from "../SlashMenu/SlashMenuPlugin";
 
 const PLUGIN_KEY = new PluginKey(`blocknote-placeholder`);
 
@@ -14,21 +12,7 @@ const PLUGIN_KEY = new PluginKey(`blocknote-placeholder`);
  *
  */
 export interface PlaceholderOptions {
-  emptyEditorClass: string;
-  emptyNodeClass: string;
-  isFilterClass: string;
-  hasAnchorClass: string;
-  placeholder:
-    | ((PlaceholderProps: {
-        editor: Editor;
-        node: ProsemirrorNode;
-        pos: number;
-        hasAnchor: boolean;
-      }) => string)
-    | string;
-  showOnlyWhenEditable: boolean;
-  showOnlyCurrent: boolean;
-  includeChildren: boolean;
+  placeholders: Record<string | "default", string>;
 }
 
 export const Placeholder = Extension.create<PlaceholderOptions>({
@@ -36,93 +20,102 @@ export const Placeholder = Extension.create<PlaceholderOptions>({
 
   addOptions() {
     return {
-      emptyEditorClass: "bn-is-editor-empty",
-      emptyNodeClass: "bn-is-empty",
-      isFilterClass: "bn-is-filter",
-      hasAnchorClass: "bn-has-anchor",
-      placeholder: "Write something …",
-      showOnlyWhenEditable: true,
-      showOnlyCurrent: true,
-      includeChildren: false,
+      placeholders: {
+        default: "Enter text or type '/' for commands",
+        heading: "Heading",
+        bulletListItem: "List",
+        numberedListItem: "List",
+      },
     };
   },
 
   addProseMirrorPlugins() {
+    const placeholders = this.options.placeholders;
     return [
       new Plugin({
         key: PLUGIN_KEY,
+        view: () => {
+          const styleEl = document.createElement("style");
+          document.head.appendChild(styleEl);
+          const styleSheet = styleEl.sheet!;
+
+          const getBaseSelector = (additionalSelectors = "") =>
+            `.bn-block-content${additionalSelectors} .bn-inline-content:has(> .ProseMirror-trailingBreak):before`;
+
+          const getSelector = (
+            blockType: string | "default",
+            mustBeFocused = true
+          ) => {
+            const mustBeFocusedSelector = mustBeFocused
+              ? `[data-is-empty-and-focused]`
+              : ``;
+
+            if (blockType === "default") {
+              return getBaseSelector(mustBeFocusedSelector);
+            }
+
+            const blockTypeSelector = `[data-content-type="${blockType}"]`;
+            return getBaseSelector(mustBeFocusedSelector + blockTypeSelector);
+          };
+
+          for (const [blockType, placeholder] of Object.entries(placeholders)) {
+            const mustBeFocused = blockType === "default";
+
+            styleSheet.insertRule(
+              `${getSelector(
+                blockType,
+                mustBeFocused
+              )}{ content: ${JSON.stringify(placeholder)}; }`
+            );
+
+            // 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
+                )}; }`
+              );
+            }
+          }
+
+          return {
+            destroy: () => {
+              document.head.removeChild(styleEl);
+            },
+          };
+        },
         props: {
+          // TODO: maybe also add placeholder for empty document ("e.g.: start writing..")
           decorations: (state) => {
             const { doc, selection } = state;
-            // Get state of slash menu
-            const menuState = slashMenuPluginKey.getState(state);
-            const active =
-              this.editor.isEditable || !this.options.showOnlyWhenEditable;
-            const { anchor } = selection;
-            const decorations: Decoration[] = [];
+
+            const active = this.editor.isEditable;
 
             if (!active) {
               return;
             }
 
-            doc.descendants((node, pos) => {
-              const hasAnchor = anchor >= pos && anchor <= pos + node.nodeSize;
-              const isEmpty = !node.isLeaf && !node.childCount;
-
-              if ((hasAnchor || !this.options.showOnlyCurrent) && isEmpty) {
-                const classes = [this.options.emptyNodeClass];
-
-                // TODO: Doesn't work?
-                if (this.editor.isEmpty) {
-                  classes.push(this.options.emptyEditorClass);
-                }
-
-                if (hasAnchor) {
-                  classes.push(this.options.hasAnchorClass);
-                }
-
-                // If slash menu is of drag type and active, show the filter placeholder
-                if (menuState?.triggerCharacter === "" && menuState?.active) {
-                  classes.push(this.options.isFilterClass);
-                }
-                // using widget, didn't work (caret position bug)
-                // const decoration = Decoration.widget(
-                //   pos + 1,
-                //   () => {
-                //     const el = document.createElement("span");
-                //     el.innerText = "hello";
-                //     return el;
-                //   },
-                //   { side: 0 }
-
-                // Code that sets variables / classes
-                // const ph =
-                //   typeof this.options.placeholder === "function"
-                //     ? this.options.placeholder({
-                //         editor: this.editor,
-                //         node,
-                //         pos,
-                //         hasAnchor,
-                //       })
-                //     : this.options.placeholder;
-                // const decoration = Decoration.node(pos, pos + node.nodeSize, {
-                //   class: classes.join(" "),
-                //   style: `--placeholder:'${ph.replaceAll("'", "\\'")}';`,
-                //   "data-placeholder": ph,
-                // });
-
-                // Latest version, only set isEmpty and hasAnchor, rest is done via CSS
-
-                const decoration = Decoration.node(pos, pos + node.nodeSize, {
-                  class: classes.join(" "),
-                });
-                decorations.push(decoration);
-              }
-
-              return this.options.includeChildren;
+            if (!selection.empty) {
+              return;
+            }
+
+            const $pos = selection.$anchor;
+            const node = $pos.parent;
+
+            if (node.content.size > 0) {
+              return null;
+            }
+
+            const before = $pos.before();
+
+            const dec = Decoration.node(before, before + node.nodeSize, {
+              "data-is-empty-and-focused": "true",
             });
 
-            return DecorationSet.create(doc, decorations);
+            return DecorationSet.create(doc, [dec]);
           },
         },
       }),