@tiptap/extension-list-keymap 2.1.0-rc.13

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@tiptap/extension-list-keymap",
+  "description": "list keymap extension for tiptap",
+  "version": "2.1.0-rc.13",
+  "homepage": "https://tiptap.dev",
+  "keywords": [
+    "tiptap",
+    "tiptap extension"
+  ],
+  "license": "MIT",
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/ueberdosis"
+  },
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/packages/extension-list-keymap/src/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "umd": "dist/index.umd.js",
+  "types": "dist/packages/extension-list-keymap/src/index.d.ts",
+  "files": [
+    "src",
+    "dist"
+  ],
+  "devDependencies": {
+    "@tiptap/core": "^2.1.0-rc.13"
+  },
+  "peerDependencies": {
+    "@tiptap/core": "^2.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ueberdosis/tiptap",
+    "directory": "packages/extension-list-keymap"
+  },
+  "scripts": {
+    "clean": "rm -rf dist",
+    "build": "npm run clean && rollup -c"
+  }
+}

package/src/index.ts

@@ -0,0 +1,6 @@
+import { ListKeymap } from './list-keymap.js'
+
+export * from './list-keymap.js'
+export * as listHelpers from './listHelpers/index.js'
+
+export default ListKeymap

package/src/list-keymap.ts

@@ -0,0 +1,94 @@
+import { Extension } from '@tiptap/core'
+
+import { handleBackspace, handleDelete } from './listHelpers/index.js'
+
+export type ListKeymapOptions = {
+  listTypes: Array<{
+    itemName: string,
+    wrapperNames: string[],
+  }>
+}
+
+export const ListKeymap = Extension.create<ListKeymapOptions>({
+  name: 'listKeymap',
+
+  addOptions() {
+    return {
+      listTypes: [
+        {
+          itemName: 'listItem',
+          wrapperNames: ['bulletList', 'orderedList'],
+        },
+        {
+          itemName: 'taskItem',
+          wrapperNames: ['taskList'],
+        },
+      ],
+    }
+  },
+
+  addKeyboardShortcuts() {
+    return {
+      Delete: ({ editor }) => {
+        let handled = false
+
+        this.options.listTypes.forEach(({ itemName }) => {
+          if (editor.state.schema.nodes[itemName] === undefined) {
+            return
+          }
+
+          if (handleDelete(editor, itemName)) {
+            handled = true
+          }
+        })
+
+        return handled
+      },
+      'Mod-Delete': ({ editor }) => {
+        let handled = false
+
+        this.options.listTypes.forEach(({ itemName }) => {
+          if (editor.state.schema.nodes[itemName] === undefined) {
+            return
+          }
+
+          if (handleDelete(editor, itemName)) {
+            handled = true
+          }
+        })
+
+        return handled
+      },
+      Backspace: ({ editor }) => {
+        let handled = false
+
+        this.options.listTypes.forEach(({ itemName, wrapperNames }) => {
+          if (editor.state.schema.nodes[itemName] === undefined) {
+            return
+          }
+
+          if (handleBackspace(editor, itemName, wrapperNames)) {
+            handled = true
+          }
+        })
+
+        return handled
+      },
+      'Mod-Backspace': ({ editor }) => {
+        let handled = false
+
+        this.options.listTypes.forEach(({ itemName, wrapperNames }) => {
+          if (editor.state.schema.nodes[itemName] === undefined) {
+            return
+          }
+
+          if (handleBackspace(editor, itemName, wrapperNames)) {
+            handled = true
+          }
+        })
+
+        return handled
+      },
+    }
+  },
+})

package/src/listHelpers/findListItemPos.ts

@@ -0,0 +1,31 @@
+import { NodeType } from '@tiptap/pm/model'
+import { EditorState } from '@tiptap/pm/state'
+
+import { getNodeType } from '../../../core/src/helpers/getNodeType.js'
+
+export const findListItemPos = (typeOrName: string | NodeType, state: EditorState) => {
+  const { $from } = state.selection
+  const nodeType = getNodeType(typeOrName, state.schema)
+
+  let currentNode = null
+  let currentDepth = $from.depth
+  let currentPos = $from.pos
+  let targetDepth: number | null = null
+
+  while (currentDepth > 0 && targetDepth === null) {
+    currentNode = $from.node(currentDepth)
+
+    if (currentNode.type === nodeType) {
+      targetDepth = currentDepth
+    } else {
+      currentDepth -= 1
+      currentPos -= 1
+    }
+  }
+
+  if (targetDepth === null) {
+    return null
+  }
+
+  return { $pos: state.doc.resolve(currentPos), depth: targetDepth }
+}

package/src/listHelpers/getNextListDepth.ts

@@ -0,0 +1,16 @@
+import { EditorState } from '@tiptap/pm/state'
+
+import { getNodeAtPosition } from '../../../core/src/helpers/getNodeAtPosition.js'
+import { findListItemPos } from './findListItemPos.js'
+
+export const getNextListDepth = (typeOrName: string, state: EditorState) => {
+  const listItemPos = findListItemPos(typeOrName, state)
+
+  if (!listItemPos) {
+    return false
+  }
+
+  const [, depth] = getNodeAtPosition(state, typeOrName, listItemPos.$pos.pos + 4)
+
+  return depth
+}

package/src/listHelpers/handleBackspace.ts

@@ -0,0 +1,76 @@
+import { Node } from '@tiptap/pm/model'
+
+import { Editor } from '../../../core/src/Editor.js'
+import { isAtStartOfNode } from '../../../core/src/helpers/isAtStartOfNode.js'
+import { isNodeActive } from '../../../core/src/helpers/isNodeActive.js'
+import { findListItemPos } from './findListItemPos.js'
+import { hasListBefore } from './hasListBefore.js'
+import { hasListItemBefore } from './hasListItemBefore.js'
+import { listItemHasSubList } from './listItemHasSubList.js'
+
+export const handleBackspace = (editor: Editor, name: string, parentListTypes: string[]) => {
+  // this is required to still handle the undo handling
+  if (editor.commands.undoInputRule()) {
+    return true
+  }
+
+  // if the current item is NOT inside a list item &
+  // the previous item is a list (orderedList or bulletList)
+  // move the cursor into the list and delete the current item
+  if (!isNodeActive(editor.state, name) && hasListBefore(editor.state, name, parentListTypes)) {
+    const { $anchor } = editor.state.selection
+
+    const $listPos = editor.state.doc.resolve($anchor.before() - 1)
+
+    const listDescendants: Array<{ node: Node, pos: number }> = []
+
+    $listPos.node().descendants((node, pos) => {
+      if (node.type.name === name) {
+        listDescendants.push({ node, pos })
+      }
+    })
+
+    const lastItem = listDescendants.at(-1)
+
+    if (!lastItem) {
+      return false
+    }
+
+    const $lastItemPos = editor.state.doc.resolve($listPos.start() + lastItem.pos + 1)
+
+    return editor.chain().cut({ from: $anchor.start() - 1, to: $anchor.end() + 1 }, $lastItemPos.end()).joinForward().run()
+  }
+
+  // if the cursor is not inside the current node type
+  // do nothing and proceed
+  if (!isNodeActive(editor.state, name)) {
+    return false
+  }
+
+  // if the cursor is not at the start of a node
+  // do nothing and proceed
+  if (!isAtStartOfNode(editor.state)) {
+    return false
+  }
+
+  const listItemPos = findListItemPos(name, editor.state)
+
+  if (!listItemPos) {
+    return false
+  }
+
+  const $prev = editor.state.doc.resolve(listItemPos.$pos.pos - 2)
+  const prevNode = $prev.node(listItemPos.depth)
+
+  const previousListItemHasSubList = listItemHasSubList(name, editor.state, prevNode)
+
+  // if the previous item is a list item and doesn't have a sublist, join the list items
+  if (hasListItemBefore(name, editor.state) && !previousListItemHasSubList) {
+    return editor.commands.joinItemBackward()
+  }
+
+  // otherwise in the end, a backspace should
+  // always just lift the list item if
+  // joining / merging is not possible
+  return editor.chain().liftListItem(name).run()
+}

package/src/listHelpers/handleDelete.ts

@@ -0,0 +1,38 @@
+import { Editor } from '../../../core/src/Editor.js'
+import { isAtEndOfNode } from '../../../core/src/helpers/isAtEndOfNode.js'
+import { isNodeActive } from '../../../core/src/helpers/isNodeActive.js'
+import { nextListIsDeeper } from './nextListIsDeeper.js'
+import { nextListIsHigher } from './nextListIsHigher.js'
+
+export const handleDelete = (editor: Editor, name: string) => {
+  // if the cursor is not inside the current node type
+  // do nothing and proceed
+  if (!isNodeActive(editor.state, name)) {
+    return false
+  }
+
+  // if the cursor is not at the end of a node
+  // do nothing and proceed
+  if (!isAtEndOfNode(editor.state, name)) {
+    return false
+  }
+
+  // check if the next node is a list with a deeper depth
+  if (nextListIsDeeper(name, editor.state)) {
+    return editor
+      .chain()
+      .focus(editor.state.selection.from + 4)
+      .lift(name)
+      .joinBackward()
+      .run()
+  }
+
+  if (nextListIsHigher(name, editor.state)) {
+    return editor.chain()
+      .joinForward()
+      .joinBackward()
+      .run()
+  }
+
+  return editor.commands.joinItemForward()
+}

package/src/listHelpers/hasListBefore.ts

@@ -0,0 +1,15 @@
+import { EditorState } from '@tiptap/pm/state'
+
+export const hasListBefore = (editorState: EditorState, name: string, parentListTypes: string[]) => {
+  const { $anchor } = editorState.selection
+
+  const previousNodePos = Math.max(0, $anchor.pos - 2)
+
+  const previousNode = editorState.doc.resolve(previousNodePos).node()
+
+  if (!previousNode || !parentListTypes.includes(previousNode.type.name)) {
+    return false
+  }
+
+  return true
+}

package/src/listHelpers/hasListItemAfter.ts

@@ -0,0 +1,17 @@
+import { EditorState } from '@tiptap/pm/state'
+
+export const hasListItemAfter = (typeOrName: string, state: EditorState): boolean => {
+  const { $anchor } = state.selection
+
+  const $targetPos = state.doc.resolve($anchor.pos - $anchor.parentOffset - 2)
+
+  if ($targetPos.index() === $targetPos.parent.childCount - 1) {
+    return false
+  }
+
+  if ($targetPos.nodeAfter?.type.name !== typeOrName) {
+    return false
+  }
+
+  return true
+}

package/src/listHelpers/hasListItemBefore.ts

@@ -0,0 +1,17 @@
+import { EditorState } from '@tiptap/pm/state'
+
+export const hasListItemBefore = (typeOrName: string, state: EditorState): boolean => {
+  const { $anchor } = state.selection
+
+  const $targetPos = state.doc.resolve($anchor.pos - 2)
+
+  if ($targetPos.index() === 0) {
+    return false
+  }
+
+  if ($targetPos.nodeBefore?.type.name !== typeOrName) {
+    return false
+  }
+
+  return true
+}

package/src/listHelpers/index.ts

@@ -0,0 +1,10 @@
+export * from './findListItemPos.js'
+export * from './getNextListDepth.js'
+export * from './handleBackspace.js'
+export * from './handleDelete.js'
+export * from './hasListBefore.js'
+export * from './hasListItemAfter.js'
+export * from './hasListItemBefore.js'
+export * from './listItemHasSubList.js'
+export * from './nextListIsDeeper.js'
+export * from './nextListIsHigher.js'

package/src/listHelpers/listItemHasSubList.ts

@@ -0,0 +1,22 @@
+import { Node } from '@tiptap/pm/model'
+import { EditorState } from '@tiptap/pm/state'
+
+import { getNodeType } from '../../../core/src/helpers/getNodeType.js'
+
+export const listItemHasSubList = (typeOrName: string, state: EditorState, node?: Node) => {
+  if (!node) {
+    return false
+  }
+
+  const nodeType = getNodeType(typeOrName, state.schema)
+
+  let hasSubList = false
+
+  node.descendants(child => {
+    if (child.type === nodeType) {
+      hasSubList = true
+    }
+  })
+
+  return hasSubList
+}

package/src/listHelpers/nextListIsDeeper.ts

@@ -0,0 +1,19 @@
+import { EditorState } from '@tiptap/pm/state'
+
+import { findListItemPos } from './findListItemPos.js'
+import { getNextListDepth } from './getNextListDepth.js'
+
+export const nextListIsDeeper = (typeOrName: string, state: EditorState) => {
+  const listDepth = getNextListDepth(typeOrName, state)
+  const listItemPos = findListItemPos(typeOrName, state)
+
+  if (!listItemPos || !listDepth) {
+    return false
+  }
+
+  if (listDepth > listItemPos.depth) {
+    return true
+  }
+
+  return false
+}

package/src/listHelpers/nextListIsHigher.ts

@@ -0,0 +1,19 @@
+import { EditorState } from '@tiptap/pm/state'
+
+import { findListItemPos } from './findListItemPos.js'
+import { getNextListDepth } from './getNextListDepth.js'
+
+export const nextListIsHigher = (typeOrName: string, state: EditorState) => {
+  const listDepth = getNextListDepth(typeOrName, state)
+  const listItemPos = findListItemPos(typeOrName, state)
+
+  if (!listItemPos || !listDepth) {
+    return false
+  }
+
+  if (listDepth < listItemPos.depth) {
+    return true
+  }
+
+  return false
+}