@blocknote/core 0.1.2 → 0.2.1-alpha.0

package/src/extensions/FormattingToolbar/FormattingToolbarPlugin.ts

@@ -0,0 +1,308 @@
+import {
+  Editor,
+  isNodeSelection,
+  isTextSelection,
+  posToDOMRect,
+} from "@tiptap/core";
+import { EditorState, Plugin, PluginKey } from "prosemirror-state";
+import { EditorView } from "prosemirror-view";
+import {
+  FormattingToolbar,
+  FormattingToolbarDynamicParams,
+  FormattingToolbarFactory,
+  FormattingToolbarStaticParams,
+} from "./FormattingToolbarFactoryTypes";
+import { BlockContentType } from "../Blocks/nodes/Block";
+
+// Same as TipTap bubblemenu plugin, but with these changes:
+// https://github.com/ueberdosis/tiptap/pull/2596/files
+export interface FormattingToolbarPluginProps {
+  pluginKey: PluginKey;
+  editor: Editor;
+  formattingToolbarFactory: FormattingToolbarFactory;
+  shouldShow?:
+    | ((props: {
+        editor: Editor;
+        view: EditorView;
+        state: EditorState;
+        oldState?: EditorState;
+        from: number;
+        to: number;
+      }) => boolean)
+    | null;
+}
+
+export type FormattingToolbarViewProps = FormattingToolbarPluginProps & {
+  view: EditorView;
+};
+
+export class FormattingToolbarView {
+  public editor: Editor;
+
+  public view: EditorView;
+
+  public formattingToolbar: FormattingToolbar;
+
+  public preventHide = false;
+
+  public preventShow = false;
+
+  public toolbarIsOpen = false;
+
+  public shouldShow: Exclude<FormattingToolbarPluginProps["shouldShow"], null> =
+    ({ view, state, from, to }) => {
+      const { doc, selection } = state;
+      const { empty } = selection;
+
+      // Sometime check for `empty` is not enough.
+      // Doubleclick an empty paragraph returns a node size of 2.
+      // So we check also for an empty text size.
+      const isEmptyTextBlock =
+        !doc.textBetween(from, to).length && isTextSelection(state.selection);
+
+      return !(!view.hasFocus() || empty || isEmptyTextBlock);
+    };
+
+  constructor({
+    editor,
+    formattingToolbarFactory,
+    view,
+    shouldShow,
+  }: FormattingToolbarViewProps) {
+    this.editor = editor;
+    this.view = view;
+
+    this.formattingToolbar = formattingToolbarFactory(this.getStaticParams());
+
+    if (shouldShow) {
+      this.shouldShow = shouldShow;
+    }
+
+    this.view.dom.addEventListener("mousedown", this.viewMousedownHandler);
+    this.view.dom.addEventListener("mouseup", this.viewMouseupHandler);
+    this.view.dom.addEventListener("dragstart", this.dragstartHandler);
+
+    this.editor.on("focus", this.focusHandler);
+    this.editor.on("blur", this.blurHandler);
+  }
+
+  viewMousedownHandler = () => {
+    this.preventShow = true;
+  };
+
+  viewMouseupHandler = () => {
+    this.preventShow = false;
+    setTimeout(() => this.update(this.editor.view));
+  };
+
+  dragstartHandler = () => {
+    this.formattingToolbar.hide();
+    this.toolbarIsOpen = false;
+  };
+
+  focusHandler = () => {
+    // we use `setTimeout` to make sure `selection` is already updated
+    setTimeout(() => this.update(this.editor.view));
+  };
+
+  blurHandler = ({ event }: { event: FocusEvent }) => {
+    if (this.preventHide) {
+      this.preventHide = false;
+
+      return;
+    }
+
+    if (
+      event?.relatedTarget &&
+      this.formattingToolbar.element?.parentNode?.contains(
+        event.relatedTarget as Node
+      )
+    ) {
+      return;
+    }
+
+    if (this.toolbarIsOpen) {
+      this.formattingToolbar.hide();
+      this.toolbarIsOpen = false;
+    }
+  };
+
+  update(view: EditorView, oldState?: EditorState) {
+    const { state, composing } = view;
+    const { doc, selection } = state;
+    const isSame =
+      oldState && oldState.doc.eq(doc) && oldState.selection.eq(selection);
+
+    if (composing || isSame) {
+      return;
+    }
+
+    // support for CellSelections
+    const { ranges } = selection;
+    const from = Math.min(...ranges.map((range) => range.$from.pos));
+    const to = Math.max(...ranges.map((range) => range.$to.pos));
+
+    const shouldShow = this.shouldShow?.({
+      editor: this.editor,
+      view,
+      state,
+      oldState,
+      from,
+      to,
+    });
+
+    // Checks if menu should be shown.
+    if (
+      !this.toolbarIsOpen &&
+      !this.preventShow &&
+      (shouldShow || this.preventHide)
+    ) {
+      this.formattingToolbar.render(this.getDynamicParams(), true);
+      this.toolbarIsOpen = true;
+
+      // TODO: Is this necessary? Also for other menu plugins.
+      // Listener stops focus moving to the menu on click.
+      this.formattingToolbar.element!.addEventListener("mousedown", (event) =>
+        event.preventDefault()
+      );
+
+      return;
+    }
+
+    // Checks if menu should be updated.
+    if (
+      this.toolbarIsOpen &&
+      !this.preventShow &&
+      (shouldShow || this.preventHide)
+    ) {
+      this.formattingToolbar.render(this.getDynamicParams(), false);
+      return;
+    }
+
+    // Checks if menu should be hidden.
+    if (
+      this.toolbarIsOpen &&
+      !this.preventHide &&
+      (!shouldShow || this.preventShow)
+    ) {
+      this.formattingToolbar.hide();
+      this.toolbarIsOpen = false;
+
+      // Listener stops focus moving to the menu on click.
+      this.formattingToolbar.element!.removeEventListener(
+        "mousedown",
+        (event) => event.preventDefault()
+      );
+
+      return;
+    }
+  }
+
+  destroy() {
+    this.view.dom.removeEventListener("mousedown", this.viewMousedownHandler);
+    this.view.dom.removeEventListener("mouseup", this.viewMouseupHandler);
+    this.view.dom.removeEventListener("dragstart", this.dragstartHandler);
+
+    this.editor.off("focus", this.focusHandler);
+    this.editor.off("blur", this.blurHandler);
+  }
+
+  getSelectionBoundingBox() {
+    const { state } = this.editor.view;
+    const { selection } = state;
+
+    // support for CellSelections
+    const { ranges } = selection;
+    const from = Math.min(...ranges.map((range) => range.$from.pos));
+    const to = Math.max(...ranges.map((range) => range.$to.pos));
+
+    if (isNodeSelection(selection)) {
+      const node = this.editor.view.nodeDOM(from) as HTMLElement;
+
+      if (node) {
+        return node.getBoundingClientRect();
+      }
+    }
+
+    return posToDOMRect(this.editor.view, from, to);
+  }
+
+  getStaticParams(): FormattingToolbarStaticParams {
+    return {
+      toggleBold: () => {
+        this.editor.view.focus();
+        this.editor.commands.toggleBold();
+      },
+      toggleItalic: () => {
+        this.editor.view.focus();
+        this.editor.commands.toggleItalic();
+      },
+      toggleUnderline: () => {
+        this.editor.view.focus();
+        this.editor.commands.toggleUnderline();
+      },
+      toggleStrike: () => {
+        this.editor.view.focus();
+        this.editor.commands.toggleStrike();
+      },
+      setHyperlink: (url: string, text?: string) => {
+        if (url === "") {
+          return;
+        }
+
+        let { from, to } = this.editor.state.selection;
+
+        if (!text) {
+          text = this.editor.state.doc.textBetween(from, to);
+        }
+
+        const mark = this.editor.schema.mark("link", { href: url });
+
+        this.editor.view.dispatch(
+          this.editor.view.state.tr
+            .insertText(text, from, to)
+            .addMark(from, from + text.length, mark)
+        );
+        this.editor.view.focus();
+      },
+      setBlockType: (type: BlockContentType) => {
+        this.editor.view.focus();
+        this.editor.commands.BNSetContentType(
+          this.editor.state.selection.from,
+          type
+        );
+      },
+    };
+  }
+
+  getDynamicParams(): FormattingToolbarDynamicParams {
+    return {
+      boldIsActive: this.editor.isActive("bold"),
+      italicIsActive: this.editor.isActive("italic"),
+      underlineIsActive: this.editor.isActive("underline"),
+      strikeIsActive: this.editor.isActive("strike"),
+      hyperlinkIsActive: this.editor.isActive("link"),
+      activeHyperlinkUrl: this.editor.getAttributes("link").href
+        ? this.editor.getAttributes("link").href
+        : "",
+      activeHyperlinkText: this.editor.state.doc.textBetween(
+        this.editor.state.selection.from,
+        this.editor.state.selection.to
+      ),
+      activeBlockType: {
+        name: this.editor.state.selection.$from.node().type.name,
+        attrs: this.editor.state.selection.$from.node().attrs,
+      } as Required<BlockContentType>,
+      selectionBoundingBox: this.getSelectionBoundingBox(),
+    };
+  }
+}
+
+export const createFormattingToolbarPlugin = (
+  options: FormattingToolbarPluginProps
+) => {
+  return new Plugin({
+    key: new PluginKey("FormattingToolbarPlugin"),
+    view: (view) => new FormattingToolbarView({ view, ...options }),
+  });
+};

package/src/extensions/HyperlinkToolbar/HyperlinkMark.ts

@@ -0,0 +1,28 @@
+import { Link } from "@tiptap/extension-link";
+import {
+  createHyperlinkToolbarPlugin,
+  HyperlinkToolbarPluginProps,
+} from "./HyperlinkToolbarPlugin";
+
+/**
+ * This custom link includes a special menu for editing/deleting/opening the link.
+ * The menu will be triggered by hovering over the link with the mouse,
+ * or by moving the cursor inside the link text
+ */
+const Hyperlink = Link.extend<HyperlinkToolbarPluginProps>({
+  priority: 500,
+  addProseMirrorPlugins() {
+    if (!this.options.hyperlinkToolbarFactory) {
+      throw new Error("UI Element factory not defined for HyperlinkMark");
+    }
+
+    return [
+      ...(this.parent?.() || []),
+      createHyperlinkToolbarPlugin(this.editor, {
+        hyperlinkToolbarFactory: this.options.hyperlinkToolbarFactory,
+      }),
+    ];
+  },
+});
+
+export default Hyperlink;

package/src/extensions/HyperlinkToolbar/HyperlinkToolbarFactoryTypes.ts

@@ -0,0 +1,19 @@
+import { EditorElement, ElementFactory } from "../../shared/EditorElement";
+
+export type HyperlinkToolbarStaticParams = {
+  editHyperlink: (url: string, text: string) => void;
+  deleteHyperlink: () => void;
+};
+
+export type HyperlinkToolbarDynamicParams = {
+  url: string;
+  text: string;
+
+  boundingBox: DOMRect;
+};
+
+export type HyperlinkToolbar = EditorElement<HyperlinkToolbarDynamicParams>;
+export type HyperlinkToolbarFactory = ElementFactory<
+  HyperlinkToolbarStaticParams,
+  HyperlinkToolbarDynamicParams
+>;

package/src/extensions/HyperlinkToolbar/HyperlinkToolbarPlugin.ts

@@ -0,0 +1,251 @@
+import { Editor, getMarkRange, posToDOMRect, Range } from "@tiptap/core";
+import { Mark } from "prosemirror-model";
+import { Plugin, PluginKey } from "prosemirror-state";
+import {
+  HyperlinkToolbar,
+  HyperlinkToolbarDynamicParams,
+  HyperlinkToolbarFactory,
+  HyperlinkToolbarStaticParams,
+} from "./HyperlinkToolbarFactoryTypes";
+const PLUGIN_KEY = new PluginKey("HyperlinkToolbarPlugin");
+
+export type HyperlinkToolbarPluginProps = {
+  hyperlinkToolbarFactory: HyperlinkToolbarFactory;
+};
+
+export type HyperlinkToolbarViewProps = {
+  editor: Editor;
+  hyperlinkToolbarFactory: HyperlinkToolbarFactory;
+};
+
+class HyperlinkToolbarView {
+  editor: Editor;
+
+  hyperlinkToolbar: HyperlinkToolbar;
+
+  menuUpdateTimer: NodeJS.Timeout | undefined;
+  startMenuUpdateTimer: () => void;
+  stopMenuUpdateTimer: () => void;
+
+  mouseHoveredHyperlinkMark: Mark | undefined;
+  mouseHoveredHyperlinkMarkRange: Range | undefined;
+
+  keyboardHoveredHyperlinkMark: Mark | undefined;
+  keyboardHoveredHyperlinkMarkRange: Range | undefined;
+
+  hyperlinkMark: Mark | undefined;
+  hyperlinkMarkRange: Range | undefined;
+
+  constructor({ editor, hyperlinkToolbarFactory }: HyperlinkToolbarViewProps) {
+    this.editor = editor;
+
+    this.hyperlinkToolbar = hyperlinkToolbarFactory(this.getStaticParams());
+
+    this.startMenuUpdateTimer = () => {
+      this.menuUpdateTimer = setTimeout(() => {
+        this.update();
+      }, 250);
+    };
+
+    this.stopMenuUpdateTimer = () => {
+      if (this.menuUpdateTimer) {
+        clearTimeout(this.menuUpdateTimer);
+        this.menuUpdateTimer = undefined;
+      }
+
+      return false;
+    };
+
+    editor.view.dom.addEventListener("mouseover", (event) => {
+      // Resets the hyperlink mark currently hovered by the mouse cursor.
+      this.mouseHoveredHyperlinkMark = undefined;
+      this.mouseHoveredHyperlinkMarkRange = undefined;
+
+      this.stopMenuUpdateTimer();
+
+      if (
+        event.target instanceof HTMLAnchorElement &&
+        event.target.nodeName === "A"
+      ) {
+        // Finds link mark at the hovered element's position to update mouseHoveredHyperlinkMark and
+        // mouseHoveredHyperlinkMarkRange.
+        const hoveredHyperlinkElement = event.target;
+        const posInHoveredHyperlinkMark =
+          editor.view.posAtDOM(hoveredHyperlinkElement, 0) + 1;
+        const resolvedPosInHoveredHyperlinkMark = editor.state.doc.resolve(
+          posInHoveredHyperlinkMark
+        );
+        const marksAtPos = resolvedPosInHoveredHyperlinkMark.marks();
+
+        for (const mark of marksAtPos) {
+          if (mark.type.name === editor.schema.mark("link").type.name) {
+            this.mouseHoveredHyperlinkMark = mark;
+            this.mouseHoveredHyperlinkMarkRange =
+              getMarkRange(
+                resolvedPosInHoveredHyperlinkMark,
+                mark.type,
+                mark.attrs
+              ) || undefined;
+
+            break;
+          }
+        }
+      }
+
+      this.startMenuUpdateTimer();
+
+      return false;
+    });
+  }
+
+  update() {
+    if (!this.editor.view.hasFocus()) {
+      return;
+    }
+
+    // Saves the currently hovered hyperlink mark before it's updated.
+    const prevHyperlinkMark = this.hyperlinkMark;
+
+    // Resets the currently hovered hyperlink mark.
+    this.hyperlinkMark = undefined;
+    this.hyperlinkMarkRange = undefined;
+
+    // Resets the hyperlink mark currently hovered by the keyboard cursor.
+    this.keyboardHoveredHyperlinkMark = undefined;
+    this.keyboardHoveredHyperlinkMarkRange = undefined;
+
+    // Finds link mark at the editor selection's position to update keyboardHoveredHyperlinkMark and
+    // keyboardHoveredHyperlinkMarkRange.
+    if (this.editor.state.selection.empty) {
+      const marksAtPos = this.editor.state.selection.$from.marks();
+
+      for (const mark of marksAtPos) {
+        if (mark.type.name === this.editor.schema.mark("link").type.name) {
+          this.keyboardHoveredHyperlinkMark = mark;
+          this.keyboardHoveredHyperlinkMarkRange =
+            getMarkRange(
+              this.editor.state.selection.$from,
+              mark.type,
+              mark.attrs
+            ) || undefined;
+
+          break;
+        }
+      }
+    }
+
+    if (this.mouseHoveredHyperlinkMark) {
+      this.hyperlinkMark = this.mouseHoveredHyperlinkMark;
+      this.hyperlinkMarkRange = this.mouseHoveredHyperlinkMarkRange;
+    }
+
+    // Keyboard cursor position takes precedence over mouse hovered hyperlink.
+    if (this.keyboardHoveredHyperlinkMark) {
+      this.hyperlinkMark = this.keyboardHoveredHyperlinkMark;
+      this.hyperlinkMarkRange = this.keyboardHoveredHyperlinkMarkRange;
+    }
+
+    if (this.hyperlinkMark) {
+      this.getDynamicParams();
+
+      // Shows menu.
+      if (!prevHyperlinkMark) {
+        this.hyperlinkToolbar.render(this.getDynamicParams(), true);
+
+        this.hyperlinkToolbar.element?.addEventListener(
+          "mouseleave",
+          this.startMenuUpdateTimer
+        );
+        this.hyperlinkToolbar.element?.addEventListener(
+          "mouseenter",
+          this.stopMenuUpdateTimer
+        );
+
+        return;
+      }
+
+      // Updates menu.
+      this.hyperlinkToolbar.render(this.getDynamicParams(), false);
+    }
+
+    // Hides menu.
+    if (!this.hyperlinkMark && prevHyperlinkMark) {
+      this.hyperlinkToolbar.element?.removeEventListener(
+        "mouseleave",
+        this.startMenuUpdateTimer
+      );
+      this.hyperlinkToolbar.element?.removeEventListener(
+        "mouseenter",
+        this.stopMenuUpdateTimer
+      );
+
+      this.hyperlinkToolbar.hide();
+
+      return;
+    }
+  }
+
+  getStaticParams(): HyperlinkToolbarStaticParams {
+    return {
+      editHyperlink: (url: string, text: string) => {
+        const tr = this.editor.view.state.tr.insertText(
+          text,
+          this.hyperlinkMarkRange!.from,
+          this.hyperlinkMarkRange!.to
+        );
+        tr.addMark(
+          this.hyperlinkMarkRange!.from,
+          this.hyperlinkMarkRange!.from + text.length,
+          this.editor.schema.mark("link", { href: url })
+        );
+        this.editor.view.dispatch(tr);
+        this.editor.view.focus();
+
+        this.hyperlinkToolbar.hide();
+      },
+      deleteHyperlink: () => {
+        this.editor.view.dispatch(
+          this.editor.view.state.tr
+            .removeMark(
+              this.hyperlinkMarkRange!.from,
+              this.hyperlinkMarkRange!.to,
+              this.hyperlinkMark!.type
+            )
+            .setMeta("preventAutolink", true)
+        );
+        this.editor.view.focus();
+
+        this.hyperlinkToolbar.hide();
+      },
+    };
+  }
+
+  getDynamicParams(): HyperlinkToolbarDynamicParams {
+    return {
+      url: this.hyperlinkMark!.attrs.href,
+      text: this.editor.view.state.doc.textBetween(
+        this.hyperlinkMarkRange!.from,
+        this.hyperlinkMarkRange!.to
+      ),
+      boundingBox: posToDOMRect(
+        this.editor.view,
+        this.hyperlinkMarkRange!.from,
+        this.hyperlinkMarkRange!.to
+      ),
+    };
+  }
+}
+
+export const createHyperlinkToolbarPlugin = (
+  editor: Editor,
+  options: HyperlinkToolbarPluginProps
+) => {
+  return new Plugin({
+    key: PLUGIN_KEY,
+    view: () =>
+      new HyperlinkToolbarView({
+        editor: editor,
+        hyperlinkToolbarFactory: options.hyperlinkToolbarFactory,
+      }),
+  });
+};

package/src/extensions/Placeholder/PlaceholderExtension.ts

@@ -1,9 +1,11 @@
 import { Editor, Extension } from "@tiptap/core";
 import { Node as ProsemirrorNode } from "prosemirror-model";
+import { Plugin, PluginKey } from "prosemirror-state";
 import { Decoration, DecorationSet } from "prosemirror-view";
-import { Plugin } from "prosemirror-state";
 import { SlashMenuPluginKey } from "../SlashMenu/SlashMenuExtension";
 
+const PLUGIN_KEY = new PluginKey(`blocknote-placeholder`);
+
 /**
  * This is a modified version of the tiptap
  * placeholder plugin, that also sets hasAnchorClass
@@ -48,6 +50,7 @@ export const Placeholder = Extension.create<PlaceholderOptions>({
   addProseMirrorPlugins() {
     return [
       new Plugin({
+        key: PLUGIN_KEY,
         props: {
           decorations: (state) => {
             const { doc, selection } = state;
@@ -78,7 +81,7 @@ export const Placeholder = Extension.create<PlaceholderOptions>({
                 }
 
                 // If slash menu is of drag type and active, show the filter placeholder
-                if (menuState.type === "drag" && menuState.active) {
+                if (menuState?.type === "drag" && menuState?.active) {
                   classes.push(this.options.isFilterClass);
                 }
                 // using widget, didn't work (caret position bug)

package/src/extensions/SlashMenu/SlashMenuExtension.ts

@@ -1,11 +1,13 @@
 import { Extension } from "@tiptap/core";
+import { PluginKey } from "prosemirror-state";
 import { createSuggestionPlugin } from "../../shared/plugins/suggestion/SuggestionPlugin";
+import { SuggestionsMenuFactory } from "../../shared/plugins/suggestion/SuggestionsMenuFactoryTypes";
 import defaultCommands from "./defaultCommands";
 import { SlashMenuItem } from "./SlashMenuItem";
-import { PluginKey } from "prosemirror-state";
 
 export type SlashMenuOptions = {
   commands: { [key: string]: SlashMenuItem };
+  slashMenuFactory: SuggestionsMenuFactory<any> | undefined;
 };
 
 export const SlashMenuPluginKey = new PluginKey("suggestions-slash-commands");
@@ -16,15 +18,21 @@ export const SlashMenuExtension = Extension.create<SlashMenuOptions>({
   addOptions() {
     return {
       commands: defaultCommands,
+      slashMenuFactory: undefined, // TODO: fix undefined
     };
   },
 
   addProseMirrorPlugins() {
+    if (!this.options.slashMenuFactory) {
+      throw new Error("UI Element factory not defined for SlashMenuExtension");
+    }
+
     return [
       createSuggestionPlugin<SlashMenuItem>({
         pluginKey: SlashMenuPluginKey,
         editor: this.editor,
         char: "/",
+        suggestionsMenuFactory: this.options.slashMenuFactory!,
         items: (query) => {
           const commands = [];
 

package/src/extensions/SlashMenu/SlashMenuItem.ts

@@ -1,6 +1,5 @@
 import { Editor, Range } from "@tiptap/core";
-import SuggestionItem from "../../shared/plugins/suggestion/SuggestionItem";
-import { IconType } from "react-icons";
+import { SuggestionItem } from "../../shared/plugins/suggestion/SuggestionItem";
 
 export type SlashMenuCallback = (editor: Editor, range: Range) => boolean;
 
@@ -40,7 +39,6 @@ export class SlashMenuItem implements SuggestionItem {
     public readonly group: SlashMenuGroups,
     public readonly execute: SlashMenuCallback,
     public readonly aliases: string[] = [],
-    public readonly icon?: IconType,
     public readonly hint?: string,
     public readonly shortcut?: string
   ) {