@blocknote/core 0.19.2 → 0.20.0

package/src/api/blockManipulation/selections/selection.ts

@@ -0,0 +1,244 @@
+import { TextSelection } from "prosemirror-state";
+import { TableMap } from "prosemirror-tables";
+
+import { Block } from "../../../blocks/defaultBlocks.js";
+import type { BlockNoteEditor } from "../../../editor/BlockNoteEditor";
+import { Selection } from "../../../editor/selectionTypes.js";
+import {
+  BlockIdentifier,
+  BlockSchema,
+  InlineContentSchema,
+  StyleSchema,
+} from "../../../schema/index.js";
+import { getBlockInfo, getNearestBlockPos } from "../../getBlockInfoFromPos.js";
+import { nodeToBlock } from "../../nodeConversions/nodeToBlock.js";
+import { getNodeById } from "../../nodeUtil.js";
+
+export function getSelection<
+  BSchema extends BlockSchema,
+  I extends InlineContentSchema,
+  S extends StyleSchema
+>(
+  editor: BlockNoteEditor<BSchema, I, S>
+): Selection<BSchema, I, S> | undefined {
+  const state = editor._tiptapEditor.state;
+
+  const $startBlockBeforePos = state.doc.resolve(
+    getNearestBlockPos(state.doc, state.selection.from).posBeforeNode
+  );
+  const $endBlockBeforePos = state.doc.resolve(
+    getNearestBlockPos(state.doc, state.selection.to).posBeforeNode
+  );
+
+  // Return undefined if anchor and head are in the same block.
+  if ($startBlockBeforePos.pos === $endBlockBeforePos.pos) {
+    return undefined;
+  }
+
+  // Converts the node at the given index and depth around `$startBlockBeforePos`
+  // to a block. Used to get blocks at given indices at the shared depth and
+  // at the depth of `$startBlockBeforePos`.
+  const indexToBlock = (
+    index: number,
+    depth?: number
+  ): Block<BSchema, I, S> => {
+    const pos = $startBlockBeforePos.posAtIndex(index, depth);
+    const node = state.doc.resolve(pos).nodeAfter;
+
+    if (!node) {
+      throw new Error(
+        `Error getting selection - node not found at position ${pos}`
+      );
+    }
+
+    return nodeToBlock(
+      node,
+      editor.schema.blockSchema,
+      editor.schema.inlineContentSchema,
+      editor.schema.styleSchema,
+      editor.blockCache
+    );
+  };
+
+  const blocks: Block<BSchema, I, S>[] = [];
+  // Minimum depth at which the blocks share a common ancestor.
+  const sharedDepth = $startBlockBeforePos.sharedDepth($endBlockBeforePos.pos);
+  const startIndex = $startBlockBeforePos.index(sharedDepth);
+  const endIndex = $endBlockBeforePos.index(sharedDepth);
+
+  // In most cases, we want to return the blocks spanned by the selection at the
+  // shared depth. However, when the block in which the selection starts is at a
+  // higher depth than the shared depth, we omit the first block at the shared
+  // depth. Instead, we include the first block at its depth, and any blocks at
+  // a higher index up to the shared depth. The following  example illustrates
+  // this:
+  // - id-0
+  //   - id-1
+  //     - >|id-2
+  //     - id-3
+  //   - id-4
+  //     - id-5
+  //   - id-6
+  // - id-7
+  // - id-8
+  // - id-9|<
+  //   - id-10
+  // Here, each block is represented by its ID, and the selection is represented
+  // by the `>|` and `|<` markers. So the selection starts in block `id-2` and
+  // ends in block `id-8`. In this case, the shared depth is 0, since the blocks
+  // `id-6`, `id-7`, and `id-8` set the shared depth, as they are the least
+  // nested blocks spanned by the selection. Therefore, these blocks are all
+  // added to the `blocks` array. However, the selection starts in block `id-2`,
+  // which is at a higher depth than the shared depth. So we add block `id-2` to
+  // the `blocks` array, as well as any later siblings (in this case, `id-3`),
+  // and move up one level of depth. The ancestor of block `id-2` at this depth
+  // is block `id-1`, so we add all its later siblings to the `blocks` array as
+  // well, again moving up one level of depth. Since we're now at the shared
+  // depth, we are done. The final `blocks` array for this example would be:
+  // [ id-2, id-3, id-4, id-6, id-7, id-8, id-9 ]
+  if ($startBlockBeforePos.depth > sharedDepth) {
+    // Adds the block that the selection starts in.
+    blocks.push(
+      nodeToBlock(
+        $startBlockBeforePos.nodeAfter!,
+        editor.schema.blockSchema,
+        editor.schema.inlineContentSchema,
+        editor.schema.styleSchema,
+        editor.blockCache
+      )
+    );
+
+    // Traverses all depths from the depth of the block in which the selection
+    // starts, up to the shared depth.
+    for (let depth = $startBlockBeforePos.depth; depth > sharedDepth; depth--) {
+      const parentNode = $startBlockBeforePos.node(depth);
+
+      if (parentNode.type.isInGroup("childContainer")) {
+        const startIndexAtDepth = $startBlockBeforePos.index(depth) + 1;
+        const childCountAtDepth = $startBlockBeforePos.node(depth).childCount;
+
+        // Adds all blocks after the index of the block in which the selection
+        // starts (or its ancestors at lower depths).
+        for (let i = startIndexAtDepth; i < childCountAtDepth; i++) {
+          blocks.push(indexToBlock(i, depth));
+        }
+      }
+    }
+  } else {
+    // Adds the first block spanned by the selection at the shared depth.
+    blocks.push(indexToBlock(startIndex, sharedDepth));
+  }
+
+  // Adds all blocks spanned by the selection at the shared depth, excluding
+  // the first.
+  for (let i = startIndex + 1; i <= endIndex; i++) {
+    blocks.push(indexToBlock(i, sharedDepth));
+  }
+
+  if (blocks.length === 0) {
+    throw new Error(
+      `Error getting selection - selection doesn't span any blocks (${state.selection})`
+    );
+  }
+
+  return {
+    blocks,
+  };
+}
+
+export function setSelection<
+  BSchema extends BlockSchema,
+  I extends InlineContentSchema,
+  S extends StyleSchema
+>(
+  editor: BlockNoteEditor<BSchema, I, S>,
+  startBlock: BlockIdentifier,
+  endBlock: BlockIdentifier
+) {
+  const startBlockId =
+    typeof startBlock === "string" ? startBlock : startBlock.id;
+  const endBlockId = typeof endBlock === "string" ? endBlock : endBlock.id;
+
+  if (startBlockId === endBlockId) {
+    throw new Error(
+      `Attempting to set selection with the same anchor and head blocks (id ${startBlockId})`
+    );
+  }
+
+  const doc = editor._tiptapEditor.state.doc;
+
+  const anchorPosInfo = getNodeById(startBlockId, doc);
+  if (!anchorPosInfo) {
+    throw new Error(`Block with ID ${startBlockId} not found`);
+  }
+  const headPosInfo = getNodeById(endBlockId, doc);
+  if (!headPosInfo) {
+    throw new Error(`Block with ID ${endBlockId} not found`);
+  }
+
+  const anchorBlockInfo = getBlockInfo(anchorPosInfo);
+  const headBlockInfo = getBlockInfo(headPosInfo);
+
+  const anchorBlockConfig =
+    editor.schema.blockSchema[
+      anchorBlockInfo.blockNoteType as keyof typeof editor.schema.blockSchema
+    ];
+  const headBlockConfig =
+    editor.schema.blockSchema[
+      headBlockInfo.blockNoteType as keyof typeof editor.schema.blockSchema
+    ];
+
+  if (
+    !anchorBlockInfo.isBlockContainer ||
+    anchorBlockConfig.content === "none"
+  ) {
+    throw new Error(
+      `Attempting to set selection anchor in block without content (id ${startBlockId})`
+    );
+  }
+  if (!headBlockInfo.isBlockContainer || headBlockConfig.content === "none") {
+    throw new Error(
+      `Attempting to set selection anchor in block without content (id ${endBlockId})`
+    );
+  }
+
+  let startPos: number;
+  let endPos: number;
+
+  if (anchorBlockConfig.content === "table") {
+    const tableMap = TableMap.get(anchorBlockInfo.blockContent.node);
+    const firstCellPos =
+      anchorBlockInfo.blockContent.beforePos +
+      tableMap.positionAt(0, 0, anchorBlockInfo.blockContent.node) +
+      1;
+    startPos = firstCellPos + 2;
+  } else {
+    startPos = anchorBlockInfo.blockContent.beforePos + 1;
+  }
+
+  if (headBlockConfig.content === "table") {
+    const tableMap = TableMap.get(headBlockInfo.blockContent.node);
+    const lastCellPos =
+      headBlockInfo.blockContent.beforePos +
+      tableMap.positionAt(
+        tableMap.height - 1,
+        tableMap.width - 1,
+        headBlockInfo.blockContent.node
+      ) +
+      1;
+    const lastCellNodeSize = doc.resolve(lastCellPos).nodeAfter!.nodeSize;
+    endPos = lastCellPos + lastCellNodeSize - 2;
+  } else {
+    endPos = headBlockInfo.blockContent.afterPos - 1;
+  }
+
+  // TODO: We should polish up the `MultipleNodeSelection` and use that instead.
+  //  Right now it's missing a few things like a jsonID and styling to show
+  //  which nodes are selected. `TextSelection` is ok for now, but has the
+  //  restriction that the start/end blocks must have content.
+  editor._tiptapEditor.dispatch(
+    editor._tiptapEditor.state.tr.setSelection(
+      TextSelection.create(editor._tiptapEditor.state.doc, startPos, endPos)
+    )
+  );
+}

package/src/api/blockManipulation/selections/textCursorPosition/textCursorPosition.ts

@@ -96,6 +96,10 @@ export function setTextCursorPosition<
   const id = typeof targetBlock === "string" ? targetBlock : targetBlock.id;
 
   const posInfo = getNodeById(id, editor._tiptapEditor.state.doc);
+  if (!posInfo) {
+    throw new Error(`Block with ID ${id} not found`);
+  }
+
   const info = getBlockInfo(posInfo);
 
   const contentType: "none" | "inline" | "table" =

package/src/api/nodeUtil.ts

@@ -6,7 +6,7 @@ import { Node } from "prosemirror-model";
 export function getNodeById(
   id: string,
   doc: Node
-): { node: Node; posBeforeNode: number } {
+): { node: Node; posBeforeNode: number } | undefined {
   let targetNode: Node | undefined = undefined;
   let posBeforeNode: number | undefined = undefined;
 
@@ -28,7 +28,7 @@ export function getNodeById(
   });
 
   if (targetNode === undefined || posBeforeNode === undefined) {
-    throw Error("Could not find block in the editor with matching ID.");
+    return undefined;
   }
 
   return {

package/src/blocks/TableBlockContent/TableExtension.ts

@@ -1,5 +1,5 @@
 import { callOrReturn, Extension, getExtensionField } from "@tiptap/core";
-import { columnResizing, tableEditing } from "prosemirror-tables";
+import { columnResizing, goToNextCell, tableEditing } from "prosemirror-tables";
 
 export const RESIZE_MIN_WIDTH = 35;
 export const EMPTY_CELL_WIDTH = 120;
@@ -53,6 +53,17 @@ export const TableExtension = Extension.create({
           selectionIsInTableParagraphNode
         );
       },
+      // Enables navigating cells using the tab key.
+      Tab: () => {
+        return this.editor.commands.command(({ state, dispatch, view }) =>
+          goToNextCell(1)(state, dispatch, view)
+        );
+      },
+      "Shift-Tab": () => {
+        return this.editor.commands.command(({ state, dispatch, view }) =>
+          goToNextCell(-1)(state, dispatch, view)
+        );
+      },
     };
   },
 

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";
@@ -219,6 +229,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 = {
@@ -395,6 +420,7 @@ export class BlockNoteEditor<
       tableHandles: checkDefaultBlockTypeInSchema("table", this),
       dropCursor: this.options.dropCursor ?? dropCursor,
       placeholders: newOptions.placeholders,
+      tabBehavior: newOptions.tabBehavior,
     });
 
     // add extensions from _tiptapOptions
@@ -610,39 +636,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 +772,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 +1034,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);
   }
 
   /**

package/src/editor/BlockNoteExtensions.ts

@@ -67,6 +67,7 @@ type ExtensionOptions<
   tableHandles: boolean;
   dropCursor: (opts: any) => Plugin;
   placeholders: Record<string | "default", string>;
+  tabBehavior?: "prefer-navigate-ui" | "prefer-indent";
 };
 
 /**
@@ -200,6 +201,7 @@ const getTipTapExtensions = <
     }),
     KeyboardShortcutsExtension.configure({
       editor: opts.editor,
+      tabBehavior: opts.tabBehavior,
     }),
     BlockGroup.configure({
       domAttributes: opts.domAttributes,

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;
     }