fix: Tab handling (indentation and toolbar focus) (#1285)

* Added editor option to disable tabbing into toolbars

* Made formatting & link toolbars stay hidden after indenting/unindenting using tab/shift+tab

* Removed log

* Implemented PR feedback

Author: matthewlipski

packages/core/src/editor/BlockNoteEditor.ts

@@ -219,6 +219,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 +410,7 @@ export class BlockNoteEditor<
       tableHandles: checkDefaultBlockTypeInSchema("table", this),
       dropCursor: this.options.dropCursor ?? dropCursor,
       placeholders: newOptions.placeholders,
+      tabBehavior: newOptions.tabBehavior,
     });
 
     // add extensions from _tiptapOptions

packages/core/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,

packages/core/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;

packages/core/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;

packages/core/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;
     }