@tiptap/core 2.0.0-beta.16 → 2.0.0-beta.163

package/src/commands/undoInputRule.ts

@@ -1,17 +1,46 @@
-import { undoInputRule as originalUndoInputRule } from 'prosemirror-inputrules'
-import { Command, RawCommands } from '../types'
+import { RawCommands } from '../types'
 
 declare module '@tiptap/core' {
-  interface Commands {
+  interface Commands<ReturnType> {
     undoInputRule: {
       /**
        * Undo an input rule.
        */
-      undoInputRule: () => Command,
+      undoInputRule: () => ReturnType,
     }
   }
 }
 
 export const undoInputRule: RawCommands['undoInputRule'] = () => ({ state, dispatch }) => {
-  return originalUndoInputRule(state, dispatch)
+  const plugins = state.plugins
+
+  for (let i = 0; i < plugins.length; i += 1) {
+    const plugin = plugins[i]
+    let undoable
+
+    // @ts-ignore
+    // eslint-disable-next-line
+    if (plugin.spec.isInputRules && (undoable = plugin.getState(state))) {
+      if (dispatch) {
+        const tr = state.tr
+        const toUndo = undoable.transform
+
+        for (let j = toUndo.steps.length - 1; j >= 0; j -= 1) {
+          tr.step(toUndo.steps[j].invert(toUndo.docs[j]))
+        }
+
+        if (undoable.text) {
+          const marks = tr.doc.resolve(undoable.from).marks()
+
+          tr.replaceWith(undoable.from, undoable.to, state.schema.text(undoable.text, marks))
+        } else {
+          tr.delete(undoable.from, undoable.to)
+        }
+      }
+
+      return true
+    }
+  }
+
+  return false
 }

package/src/commands/unsetAllMarks.ts

@@ -1,17 +1,17 @@
-import { Command, RawCommands } from '../types'
+import { RawCommands } from '../types'
 
 declare module '@tiptap/core' {
-  interface Commands {
+  interface Commands<ReturnType> {
     unsetAllMarks: {
       /**
        * Remove all marks in the current selection.
        */
-      unsetAllMarks: () => Command,
+      unsetAllMarks: () => ReturnType,
     }
   }
 }
 
-export const unsetAllMarks: RawCommands['unsetAllMarks'] = () => ({ tr, state, dispatch }) => {
+export const unsetAllMarks: RawCommands['unsetAllMarks'] = () => ({ tr, dispatch }) => {
   const { selection } = tr
   const { empty, ranges } = selection
 
@@ -20,13 +20,9 @@ export const unsetAllMarks: RawCommands['unsetAllMarks'] = () => ({ tr, state, d
   }
 
   if (dispatch) {
-    Object
-      .entries(state.schema.marks)
-      .forEach(([, mark]) => {
-        ranges.forEach(range => {
-          tr.removeMark(range.$from.pos, range.$to.pos, mark as any)
-        })
-      })
+    ranges.forEach(range => {
+      tr.removeMark(range.$from.pos, range.$to.pos)
+    })
   }
 
   return true

package/src/commands/unsetMark.ts

@@ -1,43 +1,55 @@
 import { MarkType } from 'prosemirror-model'
-import { Command, RawCommands } from '../types'
-import getMarkType from '../helpers/getMarkType'
-import getMarkRange from '../helpers/getMarkRange'
+import { RawCommands } from '../types'
+import { getMarkType } from '../helpers/getMarkType'
+import { getMarkRange } from '../helpers/getMarkRange'
 
 declare module '@tiptap/core' {
-  interface Commands {
+  interface Commands<ReturnType> {
     unsetMark: {
       /**
        * Remove all marks in the current selection.
        */
-      unsetMark: (typeOrName: string | MarkType) => Command,
+      unsetMark: (
+        typeOrName: string | MarkType,
+        options?: {
+          /**
+           * Removes the mark even across the current selection. Defaults to `false`.
+           */
+          extendEmptyMarkRange?: boolean,
+        },
+      ) => ReturnType,
     }
   }
 }
 
-export const unsetMark: RawCommands['unsetMark'] = typeOrName => ({ tr, state, dispatch }) => {
+export const unsetMark: RawCommands['unsetMark'] = (typeOrName, options = {}) => ({ tr, state, dispatch }) => {
+  const { extendEmptyMarkRange = false } = options
   const { selection } = tr
   const type = getMarkType(typeOrName, state.schema)
   const { $from, empty, ranges } = selection
 
-  if (dispatch) {
-    if (empty) {
-      let { from, to } = selection
-      const range = getMarkRange($from, type)
-
-      if (range) {
-        from = range.from
-        to = range.to
-      }
-
-      tr.removeMark(from, to, type)
-    } else {
-      ranges.forEach(range => {
-        tr.removeMark(range.$from.pos, range.$to.pos, type)
-      })
+  if (!dispatch) {
+    return true
+  }
+
+  if (empty && extendEmptyMarkRange) {
+    let { from, to } = selection
+    const attrs = $from.marks().find(mark => mark.type === type)?.attrs
+    const range = getMarkRange($from, type, attrs)
+
+    if (range) {
+      from = range.from
+      to = range.to
     }
 
-    tr.removeStoredMark(type)
+    tr.removeMark(from, to, type)
+  } else {
+    ranges.forEach(range => {
+      tr.removeMark(range.$from.pos, range.$to.pos, type)
+    })
   }
 
+  tr.removeStoredMark(type)
+
   return true
 }

package/src/commands/updateAttributes.ts

@@ -0,0 +1,72 @@
+import { NodeType, MarkType } from 'prosemirror-model'
+import { getNodeType } from '../helpers/getNodeType'
+import { getMarkType } from '../helpers/getMarkType'
+import { getSchemaTypeNameByName } from '../helpers/getSchemaTypeNameByName'
+import { RawCommands } from '../types'
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    updateAttributes: {
+      /**
+       * Update attributes of a node or mark.
+       */
+      updateAttributes: (typeOrName: string | NodeType | MarkType, attributes: Record<string, any>) => ReturnType,
+    }
+  }
+}
+
+export const updateAttributes: RawCommands['updateAttributes'] = (typeOrName, attributes = {}) => ({ tr, state, dispatch }) => {
+  let nodeType: NodeType | null = null
+  let markType: MarkType | null = null
+
+  const schemaType = getSchemaTypeNameByName(
+    typeof typeOrName === 'string'
+      ? typeOrName
+      : typeOrName.name,
+    state.schema,
+  )
+
+  if (!schemaType) {
+    return false
+  }
+
+  if (schemaType === 'node') {
+    nodeType = getNodeType(typeOrName as NodeType, state.schema)
+  }
+
+  if (schemaType === 'mark') {
+    markType = getMarkType(typeOrName as MarkType, state.schema)
+  }
+
+  if (dispatch) {
+    tr.selection.ranges.forEach(range => {
+      const from = range.$from.pos
+      const to = range.$to.pos
+
+      state.doc.nodesBetween(from, to, (node, pos) => {
+        if (nodeType && nodeType === node.type) {
+          tr.setNodeMarkup(pos, undefined, {
+            ...node.attrs,
+            ...attributes,
+          })
+        }
+
+        if (markType && node.marks.length) {
+          node.marks.forEach(mark => {
+            if (markType === mark.type) {
+              const trimmedFrom = Math.max(pos, from)
+              const trimmedTo = Math.min(pos + node.nodeSize, to)
+
+              tr.addMark(trimmedFrom, trimmedTo, markType.create({
+                ...mark.attrs,
+                ...attributes,
+              }))
+            }
+          })
+        }
+      })
+    })
+  }
+
+  return true
+}

package/src/commands/wrapIn.ts

@@ -1,27 +1,21 @@
 import { wrapIn as originalWrapIn } from 'prosemirror-commands'
 import { NodeType } from 'prosemirror-model'
-import { AnyObject, Command, RawCommands } from '../types'
-import isNodeActive from '../helpers/isNodeActive'
-import getNodeType from '../helpers/getNodeType'
+import { RawCommands } from '../types'
+import { getNodeType } from '../helpers/getNodeType'
 
 declare module '@tiptap/core' {
-  interface Commands {
+  interface Commands<ReturnType> {
     wrapIn: {
       /**
        * Wraps nodes in another node.
        */
-      wrapIn: (typeOrName: string | NodeType, attributes?: AnyObject) => Command,
+      wrapIn: (typeOrName: string | NodeType, attributes?: Record<string, any>) => ReturnType,
     }
   }
 }
 
 export const wrapIn: RawCommands['wrapIn'] = (typeOrName, attributes = {}) => ({ state, dispatch }) => {
   const type = getNodeType(typeOrName, state.schema)
-  const isActive = isNodeActive(state, type, attributes)
-
-  if (isActive) {
-    return false
-  }
 
   return originalWrapIn(type, attributes)(state, dispatch)
 }

package/src/commands/wrapInList.ts

@@ -1,15 +1,15 @@
 import { wrapInList as originalWrapInList } from 'prosemirror-schema-list'
 import { NodeType } from 'prosemirror-model'
-import { AnyObject, Command, RawCommands } from '../types'
-import getNodeType from '../helpers/getNodeType'
+import { RawCommands } from '../types'
+import { getNodeType } from '../helpers/getNodeType'
 
 declare module '@tiptap/core' {
-  interface Commands {
+  interface Commands<ReturnType> {
     wrapInList: {
       /**
        * Wrap a node in a list.
        */
-      wrapInList: (typeOrName: string | NodeType, attributes?: AnyObject) => Command,
+      wrapInList: (typeOrName: string | NodeType, attributes?: Record<string, any>) => ReturnType,
     }
   }
 }

package/src/extensions/clipboardTextSerializer.ts

@@ -1,40 +1,10 @@
-import { Editor } from '@tiptap/core'
 import { Plugin, PluginKey } from 'prosemirror-state'
 import { Extension } from '../Extension'
-
-const textBetween = (
-  editor: Editor,
-  from: number,
-  to: number,
-  blockSeparator?: string,
-  leafText?: string,
-): string => {
-  let text = ''
-  let separated = true
-
-  editor.state.doc.nodesBetween(from, to, (node, pos) => {
-    const textSerializer = editor.extensionManager.textSerializers[node.type.name]
-
-    if (textSerializer) {
-      text += textSerializer({ node })
-      separated = !blockSeparator
-    } else if (node.isText) {
-      text += node?.text?.slice(Math.max(from, pos) - pos, to - pos)
-      separated = !blockSeparator
-    } else if (node.isLeaf && leafText) {
-      text += leafText
-      separated = !blockSeparator
-    } else if (!separated && node.isBlock) {
-      text += blockSeparator
-      separated = true
-    }
-  }, 0)
-
-  return text
-}
+import { getTextBetween } from '../helpers/getTextBetween'
+import { getTextSeralizersFromSchema } from '../helpers/getTextSeralizersFromSchema'
 
 export const ClipboardTextSerializer = Extension.create({
-  name: 'editable',
+  name: 'clipboardTextSerializer',
 
   addProseMirrorPlugins() {
     return [
@@ -43,9 +13,17 @@ export const ClipboardTextSerializer = Extension.create({
         props: {
           clipboardTextSerializer: () => {
             const { editor } = this
-            const { from, to } = editor.state.selection
+            const { state, schema } = editor
+            const { doc, selection } = state
+            const { ranges } = selection
+            const from = Math.min(...ranges.map(range => range.$from.pos))
+            const to = Math.max(...ranges.map(range => range.$to.pos))
+            const textSerializers = getTextSeralizersFromSchema(schema)
+            const range = { from, to }
 
-            return textBetween(editor, from, to, '\n')
+            return getTextBetween(doc, range, {
+              textSerializers,
+            })
           },
         },
       }),

package/src/extensions/commands.ts

@@ -4,6 +4,7 @@ import * as clearContent from '../commands/clearContent'
 import * as clearNodes from '../commands/clearNodes'
 import * as command from '../commands/command'
 import * as createParagraphNear from '../commands/createParagraphNear'
+import * as deleteNode from '../commands/deleteNode'
 import * as deleteRange from '../commands/deleteRange'
 import * as deleteSelection from '../commands/deleteSelection'
 import * as enter from '../commands/enter'
@@ -11,10 +12,9 @@ import * as exitCode from '../commands/exitCode'
 import * as extendMarkRange from '../commands/extendMarkRange'
 import * as first from '../commands/first'
 import * as focus from '../commands/focus'
+import * as forEach from '../commands/forEach'
 import * as insertContent from '../commands/insertContent'
-import * as insertHTML from '../commands/insertHTML'
-import * as insertNode from '../commands/insertNode'
-import * as insertText from '../commands/insertText'
+import * as insertContentAt from '../commands/insertContentAt'
 import * as joinBackward from '../commands/joinBackward'
 import * as joinForward from '../commands/joinForward'
 import * as keyboardShortcut from '../commands/keyboardShortcut'
@@ -22,9 +22,7 @@ import * as lift from '../commands/lift'
 import * as liftEmptyBlock from '../commands/liftEmptyBlock'
 import * as liftListItem from '../commands/liftListItem'
 import * as newlineInCode from '../commands/newlineInCode'
-import * as replace from '../commands/replace'
-import * as replaceRange from '../commands/replaceRange'
-import * as resetNodeAttributes from '../commands/resetNodeAttributes'
+import * as resetAttributes from '../commands/resetAttributes'
 import * as scrollIntoView from '../commands/scrollIntoView'
 import * as selectAll from '../commands/selectAll'
 import * as selectNodeBackward from '../commands/selectNodeBackward'
@@ -32,7 +30,10 @@ import * as selectNodeForward from '../commands/selectNodeForward'
 import * as selectParentNode from '../commands/selectParentNode'
 import * as setContent from '../commands/setContent'
 import * as setMark from '../commands/setMark'
+import * as setMeta from '../commands/setMeta'
 import * as setNode from '../commands/setNode'
+import * as setNodeSelection from '../commands/setNodeSelection'
+import * as setTextSelection from '../commands/setTextSelection'
 import * as sinkListItem from '../commands/sinkListItem'
 import * as splitBlock from '../commands/splitBlock'
 import * as splitListItem from '../commands/splitListItem'
@@ -43,7 +44,7 @@ import * as toggleWrap from '../commands/toggleWrap'
 import * as undoInputRule from '../commands/undoInputRule'
 import * as unsetAllMarks from '../commands/unsetAllMarks'
 import * as unsetMark from '../commands/unsetMark'
-import * as updateNodeAttributes from '../commands/updateNodeAttributes'
+import * as updateAttributes from '../commands/updateAttributes'
 import * as wrapIn from '../commands/wrapIn'
 import * as wrapInList from '../commands/wrapInList'
 
@@ -52,6 +53,7 @@ export { clearContent }
 export { clearNodes }
 export { command }
 export { createParagraphNear }
+export { deleteNode }
 export { deleteRange }
 export { deleteSelection }
 export { enter }
@@ -59,10 +61,9 @@ export { exitCode }
 export { extendMarkRange }
 export { first }
 export { focus }
+export { forEach }
 export { insertContent }
-export { insertHTML }
-export { insertNode }
-export { insertText }
+export { insertContentAt }
 export { joinBackward }
 export { joinForward }
 export { keyboardShortcut }
@@ -70,9 +71,7 @@ export { lift }
 export { liftEmptyBlock }
 export { liftListItem }
 export { newlineInCode }
-export { replace }
-export { replaceRange }
-export { resetNodeAttributes }
+export { resetAttributes }
 export { scrollIntoView }
 export { selectAll }
 export { selectNodeBackward }
@@ -80,7 +79,10 @@ export { selectNodeForward }
 export { selectParentNode }
 export { setContent }
 export { setMark }
+export { setMeta }
 export { setNode }
+export { setNodeSelection }
+export { setTextSelection }
 export { sinkListItem }
 export { splitBlock }
 export { splitListItem }
@@ -91,7 +93,7 @@ export { toggleWrap }
 export { undoInputRule }
 export { unsetAllMarks }
 export { unsetMark }
-export { updateNodeAttributes }
+export { updateAttributes }
 export { wrapIn }
 export { wrapInList }
 
@@ -105,6 +107,7 @@ export const Commands = Extension.create({
       ...clearNodes,
       ...command,
       ...createParagraphNear,
+      ...deleteNode,
       ...deleteRange,
       ...deleteSelection,
       ...enter,
@@ -112,10 +115,9 @@ export const Commands = Extension.create({
       ...extendMarkRange,
       ...first,
       ...focus,
+      ...forEach,
       ...insertContent,
-      ...insertHTML,
-      ...insertNode,
-      ...insertText,
+      ...insertContentAt,
       ...joinBackward,
       ...joinForward,
       ...keyboardShortcut,
@@ -123,9 +125,7 @@ export const Commands = Extension.create({
       ...liftEmptyBlock,
       ...liftListItem,
       ...newlineInCode,
-      ...replace,
-      ...replaceRange,
-      ...resetNodeAttributes,
+      ...resetAttributes,
       ...scrollIntoView,
       ...selectAll,
       ...selectNodeBackward,
@@ -133,7 +133,10 @@ export const Commands = Extension.create({
       ...selectParentNode,
       ...setContent,
       ...setMark,
+      ...setMeta,
       ...setNode,
+      ...setNodeSelection,
+      ...setTextSelection,
       ...sinkListItem,
       ...splitBlock,
       ...splitListItem,
@@ -144,7 +147,7 @@ export const Commands = Extension.create({
       ...undoInputRule,
       ...unsetAllMarks,
       ...unsetMark,
-      ...updateNodeAttributes,
+      ...updateAttributes,
       ...wrapIn,
       ...wrapInList,
     }

package/src/extensions/focusEvents.ts

@@ -11,9 +11,6 @@ export const FocusEvents = Extension.create({
       new Plugin({
         key: new PluginKey('focusEvents'),
         props: {
-          attributes: {
-            tabindex: '0',
-          },
           handleDOMEvents: {
             focus: (view, event) => {
               editor.isFocused = true

package/src/extensions/index.ts

@@ -3,3 +3,4 @@ export { Commands } from './commands'
 export { Editable } from './editable'
 export { FocusEvents } from './focusEvents'
 export { Keymap } from './keymap'
+export { Tabindex } from './tabindex'

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(),
@@ -25,12 +46,61 @@ export const Keymap = Extension.create({
         () => commands.splitBlock(),
       ]),
       'Mod-Enter': () => this.editor.commands.exitCode(),
-      Backspace: () => handleBackspace(),
-      'Mod-Backspace': () => handleBackspace(),
-      Delete: () => handleDelete(),
-      'Mod-Delete': () => handleDelete(),
-      // we don’t need a custom `selectAll` for now
-      // 'Mod-a': () => this.editor.commands.selectAll(),
+      Backspace: handleBackspace,
+      'Mod-Backspace': handleBackspace,
+      'Shift-Backspace': handleBackspace,
+      Delete: handleDelete,
+      'Mod-Delete': handleDelete,
+      '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
+        },
+      }),
+    ]
+  },
 })

package/src/extensions/tabindex.ts

@@ -0,0 +1,19 @@
+import { Plugin, PluginKey } from 'prosemirror-state'
+import { Extension } from '../Extension'
+
+export const Tabindex = Extension.create({
+  name: 'tabindex',
+
+  addProseMirrorPlugins() {
+    return [
+      new Plugin({
+        key: new PluginKey('tabindex'),
+        props: {
+          attributes: {
+            tabindex: '0',
+          },
+        },
+      }),
+    ]
+  },
+})

package/src/helpers/combineTransactionSteps.ts

@@ -0,0 +1,18 @@
+import { Node as ProseMirrorNode } from 'prosemirror-model'
+import { Transaction } from 'prosemirror-state'
+import { Transform } from 'prosemirror-transform'
+
+/**
+ * Returns a new `Transform` based on all steps of the passed transactions.
+ */
+export function combineTransactionSteps(oldDoc: ProseMirrorNode, transactions: Transaction[]): Transform {
+  const transform = new Transform(oldDoc)
+
+  transactions.forEach(transaction => {
+    transaction.steps.forEach(step => {
+      transform.step(step)
+    })
+  })
+
+  return transform
+}