@tiptap/core 2.0.0-beta.153 → 2.0.0-beta.157

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tiptap/core",
   "description": "headless rich text editor",
-  "version": "2.0.0-beta.153",
+  "version": "2.0.0-beta.157",
   "homepage": "https://tiptap.dev",
   "keywords": [
     "tiptap",
@@ -29,7 +29,7 @@
     "@types/prosemirror-model": "^1.13.2",
     "@types/prosemirror-schema-list": "^1.0.3",
     "@types/prosemirror-state": "^1.2.8",
-    "@types/prosemirror-transform": "^1.1.4",
+    "@types/prosemirror-transform": "^1.1.5",
     "@types/prosemirror-view": "^1.19.2",
     "prosemirror-commands": "^1.1.12",
     "prosemirror-keymap": "^1.1.5",
@@ -44,5 +44,5 @@
     "url": "https://github.com/ueberdosis/tiptap",
     "directory": "packages/core"
   },
-  "gitHead": "113133b74d5ef2852e80bc257defe2a1d675ebbe"
+  "gitHead": "179b3e23a95b9c06c13afb5fcdf7636cf982da78"
 }

package/src/commands/clearNodes.ts

@@ -16,15 +16,20 @@ export const clearNodes: RawCommands['clearNodes'] = () => ({ state, tr, dispatc
   const { selection } = tr
   const { ranges } = selection
 
-  ranges.forEach(range => {
-    state.doc.nodesBetween(range.$from.pos, range.$to.pos, (node, pos) => {
+  if (!dispatch) {
+    return true
+  }
+
+  ranges.forEach(({ $from, $to }) => {
+    state.doc.nodesBetween($from.pos, $to.pos, (node, pos) => {
       if (node.type.isText) {
         return
       }
 
-      const $fromPos = tr.doc.resolve(tr.mapping.map(pos))
-      const $toPos = tr.doc.resolve(tr.mapping.map(pos + node.nodeSize))
-      const nodeRange = $fromPos.blockRange($toPos)
+      const { doc, mapping } = tr
+      const $mappedFrom = doc.resolve(mapping.map(pos))
+      const $mappedTo = doc.resolve(mapping.map(pos + node.nodeSize))
+      const nodeRange = $mappedFrom.blockRange($mappedTo)
 
       if (!nodeRange) {
         return
@@ -32,13 +37,13 @@ export const clearNodes: RawCommands['clearNodes'] = () => ({ state, tr, dispatc
 
       const targetLiftDepth = liftTarget(nodeRange)
 
-      if (node.type.isTextblock && dispatch) {
-        const { defaultType } = $fromPos.parent.contentMatchAt($fromPos.index())
+      if (node.type.isTextblock) {
+        const { defaultType } = $mappedFrom.parent.contentMatchAt($mappedFrom.index())
 
         tr.setNodeMarkup(nodeRange.start, defaultType)
       }
 
-      if ((targetLiftDepth || targetLiftDepth === 0) && dispatch) {
+      if (targetLiftDepth || targetLiftDepth === 0) {
         tr.lift(nodeRange, targetLiftDepth)
       }
     })

package/src/commands/setNode.ts

@@ -24,14 +24,17 @@ export const setNode: RawCommands['setNode'] = (typeOrName, attributes = {}) =>
     return false
   }
 
-  const canSetBlock = setBlockType(type, attributes)(state)
+  return chain()
+    // try to convert node to default node if needed
+    .command(({ commands }) => {
+      const canSetBlock = setBlockType(type, attributes)(state)
 
-  if (canSetBlock) {
-    return setBlockType(type, attributes)(state, dispatch)
-  }
+      if (canSetBlock) {
+        return true
+      }
 
-  return chain()
-    .clearNodes()
+      return commands.clearNodes()
+    })
     .command(({ state: updatedState }) => {
       return setBlockType(type, attributes)(updatedState, dispatch)
     })

package/src/commands/toggleList.ts

@@ -14,6 +14,11 @@ const joinListBackwards = (tr: Transaction, listType: NodeType): boolean => {
   }
 
   const before = tr.doc.resolve(Math.max(0, list.pos - 1)).before(list.depth)
+
+  if (before === undefined) {
+    return true
+  }
+
   const nodeBefore = tr.doc.nodeAt(before)
   const canJoinBackwards = list.node.type === nodeBefore?.type
     && canJoin(tr.doc, list.pos)
@@ -35,6 +40,11 @@ const joinListForwards = (tr: Transaction, listType: NodeType): boolean => {
   }
 
   const after = tr.doc.resolve(list.start).after(list.depth)
+
+  if (after === undefined) {
+    return true
+  }
+
   const nodeAfter = tr.doc.nodeAt(after)
   const canJoinForwards = list.node.type === nodeAfter?.type
     && canJoin(tr.doc, after)

package/src/extensions/keymap.ts

@@ -1,3 +1,6 @@
+import { Plugin, PluginKey, Selection } from 'prosemirror-state'
+import { createChainableState } from '../helpers/createChainableState'
+import { CommandManager } from '../CommandManager'
 import { Extension } from '../Extension'
 
 export const Keymap = Extension.create({
@@ -6,6 +9,24 @@ export const Keymap = Extension.create({
   addKeyboardShortcuts() {
     const handleBackspace = () => this.editor.commands.first(({ commands }) => [
       () => commands.undoInputRule(),
+      // maybe convert first text block node to default node
+      () => commands.command(({ tr }) => {
+        const { selection, doc } = tr
+        const { empty, $anchor } = selection
+        const { pos, parent } = $anchor
+        const isAtStart = Selection.atStart(doc).from === pos
+
+        if (
+          !empty
+          || !isAtStart
+          || !parent.type.isTextblock
+          || parent.textContent.length
+        ) {
+          return false
+        }
+
+        return commands.clearNodes()
+      }),
       () => commands.deleteSelection(),
       () => commands.joinBackward(),
       () => commands.selectNodeBackward(),
@@ -33,4 +54,53 @@ export const Keymap = Extension.create({
       'Mod-a': () => this.editor.commands.selectAll(),
     }
   },
+
+  addProseMirrorPlugins() {
+    return [
+      // With this plugin we check if the whole document was selected and deleted.
+      // In this case we will additionally call `clearNodes()` to convert e.g. a heading
+      // to a paragraph if necessary.
+      // This is an alternative to ProseMirror's `AllSelection`, which doesn’t work well
+      // with many other commands.
+      new Plugin({
+        key: new PluginKey('clearDocument'),
+        appendTransaction: (transactions, oldState, newState) => {
+          const docChanges = transactions.some(transaction => transaction.docChanged)
+            && !oldState.doc.eq(newState.doc)
+
+          if (!docChanges) {
+            return
+          }
+
+          const { empty, from, to } = oldState.selection
+          const allFrom = Selection.atStart(oldState.doc).from
+          const allEnd = Selection.atEnd(oldState.doc).to
+          const allWasSelected = from === allFrom && to === allEnd
+          const isEmpty = newState.doc.textBetween(0, newState.doc.content.size, ' ', ' ').length === 0
+
+          if (empty || !allWasSelected || !isEmpty) {
+            return
+          }
+
+          const tr = newState.tr
+          const state = createChainableState({
+            state: newState,
+            transaction: tr,
+          })
+          const { commands } = new CommandManager({
+            editor: this.editor,
+            state,
+          })
+
+          commands.clearNodes()
+
+          if (!tr.steps.length) {
+            return
+          }
+
+          return tr
+        },
+      }),
+    ]
+  },
 })