pref: Optimize list keymap

console/packages/editor/package.json

@@ -61,6 +61,7 @@
     "@tiptap/extension-italic": "^2.1.10",
     "@tiptap/extension-link": "^2.1.10",
     "@tiptap/extension-list-item": "^2.1.10",
+    "@tiptap/extension-list-keymap": "^2.1.10",
     "@tiptap/extension-ordered-list": "^2.1.10",
     "@tiptap/extension-paragraph": "^2.1.10",
     "@tiptap/extension-placeholder": "^2.1.10",

console/packages/editor/src/extensions/bullet-list/index.ts

@@ -2,6 +2,7 @@ import type { Editor, Range } from "@/tiptap/vue-3";
 import TiptapBulletList from "@tiptap/extension-bullet-list";
 import type { BulletListOptions } from "@tiptap/extension-bullet-list";
 import ExtensionListItem from "@tiptap/extension-list-item";
+import ExtensionListKeymap from "@/extensions/list-keymap";
 import ToolbarItem from "@/components/toolbar/ToolbarItem.vue";
 import MdiFormatListBulleted from "~icons/mdi/format-list-bulleted";
 import { markRaw } from "vue";
@@ -57,7 +58,7 @@ const BulletList = TiptapBulletList.extend<
     };
   },
   addExtensions() {
-    return [ExtensionListItem];
+    return [ExtensionListItem, ExtensionListKeymap];
   },
 });
 

console/packages/editor/src/extensions/list-keymap/helpers/isAllSelection.ts

@@ -0,0 +1,25 @@
+import { AllSelection, EditorState, TextSelection } from "@tiptap/pm/state";
+
+export function isAllSelection(value: unknown): value is AllSelection {
+  return value instanceof AllSelection;
+}
+
+export function isWholeDocSelected(state: EditorState) {
+  const selection = state.selection;
+  const selectionAtStart = TextSelection.atStart(state.doc);
+  const selectionAtEnd = TextSelection.atEnd(state.doc);
+
+  const selectionHasSameParent =
+    selectionAtStart.$from.sameParent(selection.$from) &&
+    selectionAtEnd.$from.sameParent(selection.$to);
+
+  const isAllTextSelection =
+    selectionHasSameParent &&
+    selectionAtStart.$from.pos === selection.$from.pos &&
+    selectionAtEnd.$from.pos === selection.$to.pos;
+
+  // allSelection covers cases where selection starts with a nodeSelection
+  // we need to check for text selection that covers the whole document as well
+  // ref: https://prosemirror.net/docs/ref/#state.AllSelection
+  return isAllSelection(state.selection) || isAllTextSelection;
+}

console/packages/editor/src/extensions/list-keymap/index.ts

@@ -0,0 +1,91 @@
+import {
+  listHelpers,
+  ListKeymap,
+  type ListKeymapOptions,
+} from "@tiptap/extension-list-keymap";
+import { isWholeDocSelected } from "./helpers/isAllSelection";
+
+/**
+ *  Optimize the listKeymap extension until the issue with @tiptap/extension-list-keymap is resolved.
+ *  https://github.com/ueberdosis/tiptap/issues/4395
+ */
+const ExtensionListKeymap = ListKeymap.extend<ListKeymapOptions>({
+  addKeyboardShortcuts() {
+    return {
+      Delete: ({ editor }) => {
+        let handled = false;
+        if (isWholeDocSelected(editor.state)) {
+          return false;
+        }
+
+        this.options.listTypes.forEach(({ itemName }) => {
+          if (editor.state.schema.nodes[itemName] === undefined) {
+            return;
+          }
+
+          if (listHelpers.handleDelete(editor, itemName)) {
+            handled = true;
+          }
+        });
+
+        return handled;
+      },
+      "Mod-Delete": ({ editor }) => {
+        let handled = false;
+        if (isWholeDocSelected(editor.state)) {
+          return false;
+        }
+
+        this.options.listTypes.forEach(({ itemName }) => {
+          if (editor.state.schema.nodes[itemName] === undefined) {
+            return;
+          }
+
+          if (listHelpers.handleDelete(editor, itemName)) {
+            handled = true;
+          }
+        });
+
+        return handled;
+      },
+      Backspace: ({ editor }) => {
+        let handled = false;
+        if (isWholeDocSelected(editor.state)) {
+          return false;
+        }
+
+        this.options.listTypes.forEach(({ itemName, wrapperNames }) => {
+          if (editor.state.schema.nodes[itemName] === undefined) {
+            return;
+          }
+
+          if (listHelpers.handleBackspace(editor, itemName, wrapperNames)) {
+            handled = true;
+          }
+        });
+
+        return handled;
+      },
+      "Mod-Backspace": ({ editor }) => {
+        let handled = false;
+        if (isWholeDocSelected(editor.state)) {
+          return false;
+        }
+
+        this.options.listTypes.forEach(({ itemName, wrapperNames }) => {
+          if (editor.state.schema.nodes[itemName] === undefined) {
+            return;
+          }
+
+          if (listHelpers.handleBackspace(editor, itemName, wrapperNames)) {
+            handled = true;
+          }
+        });
+
+        return handled;
+      },
+    };
+  },
+});
+
+export default ExtensionListKeymap;

console/packages/editor/src/extensions/ordered-list/index.ts

@@ -2,6 +2,7 @@ import type { Editor, Range } from "@/tiptap/vue-3";
 import TiptapOrderedList from "@tiptap/extension-ordered-list";
 import type { OrderedListOptions } from "@tiptap/extension-ordered-list";
 import ExtensionListItem from "@tiptap/extension-list-item";
+import ExtensionListKeymap from "@/extensions/list-keymap";
 import ToolbarItem from "@/components/toolbar/ToolbarItem.vue";
 import MdiFormatListNumbered from "~icons/mdi/format-list-numbered";
 import { markRaw } from "vue";
@@ -58,7 +59,7 @@ const OrderedList = TiptapOrderedList.extend<
     };
   },
   addExtensions() {
-    return [ExtensionListItem];
+    return [ExtensionListItem, ExtensionListKeymap];
   },
 });