@blocknote/core 0.19.2 → 0.21.0

package/src/blocks/VideoBlockContent/VideoBlockContent.ts

@@ -7,16 +7,11 @@ import {
   PropSchema,
 } from "../../schema/index.js";
 import { defaultProps } from "../defaultProps.js";
-
-import {
-  createFigureWithCaption,
-  createFileAndCaptionWrapper,
-  createFileBlockWrapper,
-  createLinkWithCaption,
-  createResizeHandlesWrapper,
-  parseFigureElement,
-} from "../FileBlockContent/fileBlockHelpers.js";
-import { parseVideoElement } from "./videoBlockHelpers.js";
+import { parseFigureElement } from "../FileBlockContent/helpers/parse/parseFigureElement.js";
+import { createFigureWithCaption } from "../FileBlockContent/helpers/toExternalHTML/createFigureWithCaption.js";
+import { createLinkWithCaption } from "../FileBlockContent/helpers/toExternalHTML/createLinkWithCaption.js";
+import { createResizableFileBlockWrapper } from "../FileBlockContent/helpers/render/createResizableFileBlockWrapper.js";
+import { parseVideoElement } from "./parseVideoElement.js";
 
 export const FILE_VIDEO_ICON_SVG =
   '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M2 3.9934C2 3.44476 2.45531 3 2.9918 3H21.0082C21.556 3 22 3.44495 22 3.9934V20.0066C22 20.5552 21.5447 21 21.0082 21H2.9918C2.44405 21 2 20.5551 2 20.0066V3.9934ZM8 5V19H16V5H8ZM4 5V7H6V5H4ZM18 5V7H20V5H18ZM4 9V11H6V9H4ZM18 9V11H20V9H18ZM4 13V15H6V13H4ZM18 13V15H20V13H18ZM4 17V19H6V17H4ZM18 17V19H20V17H18Z"></path></svg>';
@@ -61,31 +56,29 @@ export const videoRender = (
   const icon = document.createElement("div");
   icon.innerHTML = FILE_VIDEO_ICON_SVG;
 
+  const videoWrapper = document.createElement("div");
+  videoWrapper.className = "bn-visual-media-wrapper";
+
   const video = document.createElement("video");
   video.className = "bn-visual-media";
-  video.src = block.props.url;
+  if (editor.resolveFileUrl) {
+    editor.resolveFileUrl(block.props.url).then((downloadUrl) => {
+      video.src = downloadUrl;
+    });
+  } else {
+    video.src = block.props.url;
+  }
   video.controls = true;
   video.contentEditable = "false";
   video.draggable = false;
-  video.width = Math.min(
-    block.props.previewWidth,
-    editor.domElement.firstElementChild!.clientWidth
-  );
-
-  const file = createResizeHandlesWrapper(
-    block,
-    editor,
-    video,
-    () => video.width,
-    (width) => (video.width = width)
-  );
-
-  const element = createFileAndCaptionWrapper(block, file.dom);
+  video.width = block.props.previewWidth;
+  videoWrapper.appendChild(video);
 
-  return createFileBlockWrapper(
+  return createResizableFileBlockWrapper(
     block,
     editor,
-    element,
+    { dom: videoWrapper },
+    videoWrapper,
     editor.dictionary.file_blocks.video.add_button_text,
     icon.firstElementChild as HTMLElement
   );

package/src/editor/Block.css

@@ -310,85 +310,66 @@ NESTED BLOCKS
 
 /* FILES */
 
-/* Add block button & default preview */
-[data-file-block] .bn-file-block-content-wrapper:has(.bn-add-file-button),
-[data-file-block] .bn-file-block-content-wrapper:has(.bn-file-default-preview) {
-  width: 100%;
-}
-
+/* Element that wraps content for all file blocks */
 [data-file-block] .bn-file-block-content-wrapper {
   cursor: pointer;
   display: flex;
   flex-direction: column;
-  justify-content: stretch;
   user-select: none;
 }
 
+/* Add block button & default element (name with icon) */
+[data-file-block] .bn-file-block-content-wrapper:has(.bn-add-file-button),
+[data-file-block] .bn-file-block-content-wrapper:has(.bn-file-name-with-icon) {
+  width: 100%;
+}
+
 [data-file-block] .bn-add-file-button {
   align-items: center;
   background-color: rgb(242, 241, 238);
   border-radius: 4px;
   color: rgb(125, 121, 122);
   display: flex;
-  flex-direction: row;
   gap: 10px;
   padding: 12px;
-  width: 100%;
 }
 
-.bn-editor[contenteditable="true"] [data-file-block] .bn-add-file-button:hover {
+.bn-editor[contenteditable="true"] [data-file-block] .bn-add-file-button:hover,
+[data-file-block] .bn-file-name-with-icon:hover,
+.ProseMirror-selectednode .bn-file-name-with-icon{
   background-color: rgb(225, 225, 225);
 }
 
-[data-file-block] .bn-add-file-button-icon {
+[data-file-block] .bn-add-file-button-icon,
+[data-file-block] .bn-file-icon {
   width: 24px;
   height: 24px;
 }
 
-[data-file-block] .bn-add-file-button .bn-add-file-button-text {
+[data-file-block] .bn-add-file-button-text {
   font-size: 0.9rem;
 }
 
-[data-file-block] .bn-file-and-caption-wrapper {
-  display: flex;
-  flex-direction: column;
-  border-radius: 4px;
-}
-
-[data-file-block] .bn-file-default-preview {
-  align-items: center;
+[data-file-block] .bn-file-name-with-icon {
   border-radius: 4px;
   display: flex;
-  flex-direction: row;
   gap: 4px;
   padding: 4px;
-  width: 100%;
-}
-
-[data-file-block] .bn-file-default-preview:hover,
-.ProseMirror-selectednode .bn-file-default-preview {
-  background-color: rgb(225, 225, 225);
-}
-
-[data-file-block] .bn-file-default-preview-icon {
-  width: 24px;
-  height: 24px;
 }
 
-[data-file-block] .bn-visual-media-wrapper {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  position: relative;
-  width: fit-content;
+/* File captions */
+[data-file-block] .bn-file-caption {
+  font-size: 0.8em;
+  padding-block: 4px;
+  word-break: break-word;
 }
 
-[data-file-block] .bn-visual-media {
-  border-radius: 4px;
-  max-width: 100%;
+[data-file-block] .bn-file-caption:empty {
+  padding-block: 0;
 }
 
-[data-file-block] .bn-visual-media-resize-handle {
+/* Resize handles */
+[data-file-block] .bn-resize-handle {
   position: absolute;
   width: 8px;
   height: 30px;
@@ -398,19 +379,22 @@ NESTED BLOCKS
   cursor: ew-resize;
 }
 
-[data-content-type="audio"] > .bn-file-block-content-wrapper,
-.bn-audio {
-  width: 100%;
+/* Visual media file blocks, e.g. images & videos */
+[data-file-block] .bn-visual-media-wrapper {
+  display: flex;
+  align-items: center;
+  position: relative;
 }
 
-[data-file-block] .bn-file-caption {
-  font-size: 0.8em;
-  padding-block: 4px;
-  word-break: break-word;
+[data-file-block] .bn-visual-media {
+  border-radius: 4px;
+  width: 100%;
 }
 
-[data-file-block] .bn-file-caption:empty {
-  padding-block: 0;
+/* Block-specific styles */
+[data-content-type="audio"] > .bn-file-block-content-wrapper,
+.bn-audio {
+  width: 100%;
 }
 
 /* PLACEHOLDERS*/

package/src/editor/BlockNoteEditor.ts

@@ -9,11 +9,17 @@ import {
 import { Node, Schema } from "prosemirror-model";
 // import "./blocknote.css";
 import * as Y from "yjs";
+import {
+  getBlock,
+  getNextBlock,
+  getParentBlock,
+  getPrevBlock,
+} from "../api/blockManipulation/getBlock/getBlock.js";
 import { insertBlocks } from "../api/blockManipulation/commands/insertBlocks/insertBlocks.js";
 import {
-  moveBlockDown,
-  moveBlockUp,
-} from "../api/blockManipulation/commands/moveBlock/moveBlock.js";
+  moveBlocksDown,
+  moveBlocksUp,
+} from "../api/blockManipulation/commands/moveBlocks/moveBlocks.js";
 import {
   canNestBlock,
   canUnnestBlock,
@@ -28,6 +34,10 @@ import {
   getTextCursorPosition,
   setTextCursorPosition,
 } from "../api/blockManipulation/selections/textCursorPosition/textCursorPosition.js";
+import {
+  getSelection,
+  setSelection,
+} from "../api/blockManipulation/selections/selection.js";
 import { createExternalHTMLExporter } from "../api/exporters/html/externalHTMLExporter.js";
 import { blocksToMarkdown } from "../api/exporters/markdown/markdownExporter.js";
 import { HTMLToBlocks } from "../api/parsers/html/parseHTML.js";
@@ -83,6 +93,7 @@ import { createInternalHTMLSerializer } from "../api/exporters/html/internalHTML
 import { inlineContentToNodes } from "../api/nodeConversions/blockToNode.js";
 import { nodeToBlock } from "../api/nodeConversions/nodeToBlock.js";
 import "../style.css";
+import { EditorView } from "prosemirror-view";
 
 export type BlockNoteExtension =
   | AnyExtension
@@ -219,6 +230,21 @@ export type BlockNoteEditorOptions<
   setIdAttribute?: boolean;
 
   dropCursor?: (opts: any) => Plugin;
+
+  /**
+   Select desired behavior when pressing `Tab` (or `Shift-Tab`). Specifically,
+   what should happen when a user has selected multiple blocks while a toolbar
+   is open:
+   - `"prefer-navigate-ui"`: Change focus to the toolbar. The user needs to
+   first press `Escape` to close the toolbar, and can then indent multiple
+   blocks. Better for keyboard accessibility.
+   - `"prefer-indent"`: Regardless of whether toolbars are open, indent the
+   selection of blocks. In this case, it's not possible to navigate toolbars
+   with the keyboard.
+
+   @default "prefer-navigate-ui"
+   */
+  tabBehavior: "prefer-navigate-ui" | "prefer-indent";
 };
 
 const blockNoteTipTapOptions = {
@@ -249,7 +275,8 @@ export class BlockNoteEditor<
   public readonly headless: boolean = false;
 
   public readonly _tiptapEditor:
-    | BlockNoteTipTapEditor & {
+    | Omit<BlockNoteTipTapEditor, "view"> & {
+        view: EditorView | undefined;
         contentComponent: any;
       } = undefined as any; // TODO: Type should actually reflect that it can be `undefined` in headless mode
 
@@ -319,7 +346,7 @@ export class BlockNoteEditor<
   private onUploadStartCallbacks: ((blockId?: string) => void)[] = [];
   private onUploadEndCallbacks: ((blockId?: string) => void)[] = [];
 
-  public readonly resolveFileUrl: (url: string) => Promise<string>;
+  public readonly resolveFileUrl?: (url: string) => Promise<string>;
 
   public get pmSchema() {
     return this._pmSchema;
@@ -395,6 +422,7 @@ export class BlockNoteEditor<
       tableHandles: checkDefaultBlockTypeInSchema("table", this),
       dropCursor: this.options.dropCursor ?? dropCursor,
       placeholders: newOptions.placeholders,
+      tabBehavior: newOptions.tabBehavior,
     });
 
     // add extensions from _tiptapOptions
@@ -430,7 +458,7 @@ export class BlockNoteEditor<
       };
     }
 
-    this.resolveFileUrl = newOptions.resolveFileUrl || (async (url) => url);
+    this.resolveFileUrl = newOptions.resolveFileUrl;
     this.headless = newOptions._headless;
 
     if (newOptions.collaboration && newOptions.initialContent) {
@@ -516,6 +544,7 @@ export class BlockNoteEditor<
         tiptapOptions,
         this.schema.styleSchema
       ) as BlockNoteTipTapEditor & {
+        view: any;
         contentComponent: any;
       };
       this._pmSchema = this._tiptapEditor.schema;
@@ -544,15 +573,15 @@ export class BlockNoteEditor<
   }
 
   public get domElement() {
-    return this._tiptapEditor.view.dom as HTMLDivElement;
+    return this.prosemirrorView?.dom as HTMLDivElement | undefined;
   }
 
   public isFocused() {
-    return this._tiptapEditor.view.hasFocus();
+    return this.prosemirrorView?.hasFocus() || false;
   }
 
   public focus() {
-    this._tiptapEditor.view.focus();
+    this.prosemirrorView?.focus();
   }
 
   public onUploadStart(callback: (blockId?: string) => void) {
@@ -610,39 +639,57 @@ export class BlockNoteEditor<
 
   /**
    * Gets a snapshot of an existing block from the editor.
-   * @param blockIdentifier The identifier of an existing block that should be retrieved.
-   * @returns The block that matches the identifier, or `undefined` if no matching block was found.
+   * @param blockIdentifier The identifier of an existing block that should be
+   * retrieved.
+   * @returns The block that matches the identifier, or `undefined` if no
+   * matching block was found.
    */
   public getBlock(
     blockIdentifier: BlockIdentifier
   ): Block<BSchema, ISchema, SSchema> | undefined {
-    const id =
-      typeof blockIdentifier === "string"
-        ? blockIdentifier
-        : blockIdentifier.id;
-    let newBlock: Block<BSchema, ISchema, SSchema> | undefined = undefined;
-
-    this._tiptapEditor.state.doc.firstChild!.descendants((node) => {
-      if (typeof newBlock !== "undefined") {
-        return false;
-      }
-
-      if (node.type.name !== "blockContainer" || node.attrs.id !== id) {
-        return true;
-      }
+    return getBlock(this, blockIdentifier);
+  }
 
-      newBlock = nodeToBlock(
-        node,
-        this.schema.blockSchema,
-        this.schema.inlineContentSchema,
-        this.schema.styleSchema,
-        this.blockCache
-      );
+  /**
+   * Gets a snapshot of the previous sibling of an existing block from the
+   * editor.
+   * @param blockIdentifier The identifier of an existing block for which the
+   * previous sibling should be retrieved.
+   * @returns The previous sibling of the block that matches the identifier.
+   * `undefined` if no matching block was found, or it's the first child/block
+   * in the document.
+   */
+  public getPrevBlock(
+    blockIdentifier: BlockIdentifier
+  ): Block<BSchema, ISchema, SSchema> | undefined {
+    return getPrevBlock(this, blockIdentifier);
+  }
 
-      return false;
-    });
+  /**
+   * Gets a snapshot of the next sibling of an existing block from the editor.
+   * @param blockIdentifier The identifier of an existing block for which the
+   * next sibling should be retrieved.
+   * @returns The next sibling of the block that matches the identifier.
+   * `undefined` if no matching block was found, or it's the last child/block in
+   * the document.
+   */
+  public getNextBlock(
+    blockIdentifier: BlockIdentifier
+  ): Block<BSchema, ISchema, SSchema> | undefined {
+    return getNextBlock(this, blockIdentifier);
+  }
 
-    return newBlock;
+  /**
+   * Gets a snapshot of the parent of an existing block from the editor.
+   * @param blockIdentifier The identifier of an existing block for which the
+   * parent should be retrieved.
+   * @returns The parent of the block that matches the identifier. `undefined`
+   * if no matching block was found, or the block isn't nested.
+   */
+  public getParentBlock(
+    blockIdentifier: BlockIdentifier
+  ): Block<BSchema, ISchema, SSchema> | undefined {
+    return getParentBlock(this, blockIdentifier);
   }
 
   /**
@@ -728,53 +775,11 @@ export class BlockNoteEditor<
    * Gets a snapshot of the current selection.
    */
   public getSelection(): Selection<BSchema, ISchema, SSchema> | undefined {
-    // Either the TipTap selection is empty, or it's a node selection. In either
-    // case, it only spans one block, so we return undefined.
-    if (
-      this._tiptapEditor.state.selection.from ===
-        this._tiptapEditor.state.selection.to ||
-      "node" in this._tiptapEditor.state.selection
-    ) {
-      return undefined;
-    }
-
-    const blocks: Block<BSchema, ISchema, SSchema>[] = [];
-
-    // TODO: This adds all child blocks to the same array. Needs to find min
-    //  depth and only add blocks at that depth.
-    this._tiptapEditor.state.doc.descendants((node, pos) => {
-      if (node.type.spec.group !== "blockContent") {
-        return true;
-      }
-
-      // Fixed the block pos and size
-      // all block is wrapped with a blockContent wrapper
-      // and blockContent wrapper pos = inner block pos - 1
-      // blockContent wrapper end = inner block pos + nodeSize + 1
-      // need to add 1 to start and -1 to end
-      const end = pos + node.nodeSize - 1;
-      const start = pos + 1;
-      if (
-        end <= this._tiptapEditor.state.selection.from ||
-        start >= this._tiptapEditor.state.selection.to
-      ) {
-        return true;
-      }
-
-      blocks.push(
-        nodeToBlock(
-          this._tiptapEditor.state.doc.resolve(pos).node(),
-          this.schema.blockSchema,
-          this.schema.inlineContentSchema,
-          this.schema.styleSchema,
-          this.blockCache
-        )
-      );
-
-      return false;
-    });
+    return getSelection(this);
+  }
 
-    return { blocks: blocks };
+  public setSelection(startBlock: BlockIdentifier, endBlock: BlockIdentifier) {
+    setSelection(this, startBlock, endBlock);
   }
 
   /**
@@ -1032,21 +1037,21 @@ export class BlockNoteEditor<
   }
 
   /**
-   * Moves the block containing the text cursor up. If the previous block has
-   * children, moves it to the end of its children. If there is no previous
-   * block, but the current block is nested, moves it out of & before its parent.
+   * Moves the selected blocks up. If the previous block has children, moves
+   * them to the end of its children. If there is no previous block, but the
+   * current blocks share a common parent, moves them out of & before it.
    */
-  public moveBlockUp() {
-    moveBlockUp(this);
+  public moveBlocksUp() {
+    moveBlocksUp(this);
   }
 
   /**
-   * Moves the block containing the text cursor down. If the next block has
-   * children, moves it to the start of its children. If there is no next block,
-   * but the current block is nested, moves it out of & after its parent.
+   * Moves the selected blocks down. If the next block has children, moves
+   * them to the start of its children. If there is no next block, but the
+   * current blocks share a common parent, moves them out of & after it.
    */
-  public moveBlockDown() {
-    moveBlockDown(this);
+  public moveBlocksDown() {
+    moveBlocksDown(this);
   }
 
   /**
@@ -1196,7 +1201,11 @@ export class BlockNoteEditor<
       ignoreQueryLength?: boolean;
     }
   ) {
-    const tr = this.prosemirrorView.state.tr;
+    const tr = this.prosemirrorView?.state.tr;
+    if (!tr) {
+      return;
+    }
+
     const transaction =
       pluginState && pluginState.deleteTriggerCharacter
         ? tr.insertText(triggerCharacter)

package/src/editor/BlockNoteExtensions.ts

@@ -19,6 +19,10 @@ import { FilePanelProsemirrorPlugin } from "../extensions/FilePanel/FilePanelPlu
 import { FormattingToolbarProsemirrorPlugin } from "../extensions/FormattingToolbar/FormattingToolbarPlugin.js";
 import { KeyboardShortcutsExtension } from "../extensions/KeyboardShortcuts/KeyboardShortcutsExtension.js";
 import { LinkToolbarProsemirrorPlugin } from "../extensions/LinkToolbar/LinkToolbarPlugin.js";
+import {
+  DEFAULT_LINK_PROTOCOL,
+  VALID_LINK_PROTOCOLS,
+} from "../extensions/LinkToolbar/protocols.js";
 import { NodeSelectionKeyboardPlugin } from "../extensions/NodeSelectionKeyboard/NodeSelectionKeyboardPlugin.js";
 import { PlaceholderPlugin } from "../extensions/Placeholder/PlaceholderPlugin.js";
 import { PreviousBlockTypePlugin } from "../extensions/PreviousBlockType/PreviousBlockTypePlugin.js";
@@ -67,6 +71,7 @@ type ExtensionOptions<
   tableHandles: boolean;
   dropCursor: (opts: any) => Plugin;
   placeholders: Record<string | "default", string>;
+  tabBehavior?: "prefer-navigate-ui" | "prefer-indent";
 };
 
 /**
@@ -158,14 +163,9 @@ const getTipTapExtensions = <
     // marks:
     Link.extend({
       inclusive: false,
-      addKeyboardShortcuts() {
-        return {
-          "Mod-k": () => {
-            this.editor.commands.toggleLink({ href: "" });
-            return true;
-          },
-        };
-      },
+    }).configure({
+      defaultProtocol: DEFAULT_LINK_PROTOCOL,
+      protocols: VALID_LINK_PROTOCOLS,
     }),
     ...Object.values(opts.styleSpecs).map((styleSpec) => {
       return styleSpec.implementation.mark;
@@ -200,6 +200,7 @@ const getTipTapExtensions = <
     }),
     KeyboardShortcutsExtension.configure({
       editor: opts.editor,
+      tabBehavior: opts.tabBehavior,
     }),
     BlockGroup.configure({
       domAttributes: opts.domAttributes,

package/src/editor/editor.css

@@ -86,6 +86,7 @@ Tippy popups that are appended to document.body directly
   pointer-events: none;
   position: relative;
   word-break: normal;
+  white-space: nowrap !important;
 }
 
 /* Render the username above the caret */

package/src/extensions/FormattingToolbar/FormattingToolbarPlugin.ts

@@ -139,9 +139,11 @@ export class FormattingToolbarView implements PluginView {
     // Wrapping in a setTimeout gives enough time to wait for the blur event to
     // occur before updating the toolbar.
     const { state, composing } = view;
-    const { doc, selection } = state;
+    const { selection } = state;
     const isSame =
-      oldState && oldState.doc.eq(doc) && oldState.selection.eq(selection);
+      oldState &&
+      oldState.selection.from === state.selection.from &&
+      oldState.selection.to === state.selection.to;
 
     if (composing || isSame) {
       return;

package/src/extensions/KeyboardShortcuts/KeyboardShortcutsExtension.ts

@@ -16,6 +16,7 @@ import { BlockNoteEditor } from "../../editor/BlockNoteEditor.js";
 
 export const KeyboardShortcutsExtension = Extension.create<{
   editor: BlockNoteEditor<any, any, any>;
+  tabBehavior: "prefer-navigate-ui" | "prefer-indent";
 }>({
   priority: 50,
 
@@ -479,9 +480,10 @@ export const KeyboardShortcutsExtension = Extension.create<{
       // editor since the browser will try to use tab for keyboard navigation.
       Tab: () => {
         if (
-          this.options.editor.formattingToolbar?.shown ||
-          this.options.editor.linkToolbar?.shown ||
-          this.options.editor.filePanel?.shown
+          this.options.tabBehavior !== "prefer-indent" &&
+          (this.options.editor.formattingToolbar?.shown ||
+            this.options.editor.linkToolbar?.shown ||
+            this.options.editor.filePanel?.shown)
         ) {
           // don't handle tabs if a toolbar is shown, so we can tab into / out of it
           return false;
@@ -491,9 +493,10 @@ export const KeyboardShortcutsExtension = Extension.create<{
       },
       "Shift-Tab": () => {
         if (
-          this.options.editor.formattingToolbar?.shown ||
-          this.options.editor.linkToolbar?.shown ||
-          this.options.editor.filePanel?.shown
+          this.options.tabBehavior !== "prefer-indent" &&
+          (this.options.editor.formattingToolbar?.shown ||
+            this.options.editor.linkToolbar?.shown ||
+            this.options.editor.filePanel?.shown)
         ) {
           // don't handle tabs if a toolbar is shown, so we can tab into / out of it
           return false;
@@ -502,11 +505,11 @@ export const KeyboardShortcutsExtension = Extension.create<{
         return true;
       },
       "Shift-Mod-ArrowUp": () => {
-        this.options.editor.moveBlockUp();
+        this.options.editor.moveBlocksUp();
         return true;
       },
       "Shift-Mod-ArrowDown": () => {
-        this.options.editor.moveBlockDown();
+        this.options.editor.moveBlocksDown();
         return true;
       },
     };

package/src/extensions/LinkToolbar/LinkToolbarPlugin.ts

@@ -2,7 +2,7 @@ import { getMarkRange, posToDOMRect, Range } from "@tiptap/core";
 
 import { EditorView } from "@tiptap/pm/view";
 import { Mark } from "prosemirror-model";
-import { Plugin, PluginKey, PluginView } from "prosemirror-state";
+import { EditorState, Plugin, PluginKey, PluginView } from "prosemirror-state";
 
 import type { BlockNoteEditor } from "../../editor/BlockNoteEditor.js";
 import { UiElementPosition } from "../../extensions-shared/UiElementPosition.js";
@@ -52,7 +52,7 @@ class LinkToolbarView implements PluginView {
 
     this.startMenuUpdateTimer = () => {
       this.menuUpdateTimer = setTimeout(() => {
-        this.update();
+        this.update(this.pmView);
       }, 250);
     };
 
@@ -190,8 +190,15 @@ class LinkToolbarView implements PluginView {
     }
   }
 
-  update() {
-    if (!this.pmView.hasFocus()) {
+  update(view: EditorView, oldState?: EditorState) {
+    const { state } = view;
+
+    const isSame =
+      oldState &&
+      oldState.selection.from === state.selection.from &&
+      oldState.selection.to === state.selection.to;
+
+    if (isSame || !this.pmView.hasFocus()) {
       return;
     }