@tiptap/core 2.0.0-beta.99 → 2.0.0-rc.2

package/src/commands/setMark.ts

@@ -1,7 +1,10 @@
-import { MarkType } from 'prosemirror-model'
+import { MarkType, ResolvedPos } from '@tiptap/pm/model'
+import { EditorState, Transaction } from '@tiptap/pm/state'
+
+import { isTextSelection } from '../helpers'
+import { getMarkAttributes } from '../helpers/getMarkAttributes'
+import { getMarkType } from '../helpers/getMarkType'
 import { RawCommands } from '../types'
-import getMarkType from '../helpers/getMarkType'
-import getMarkAttributes from '../helpers/getMarkAttributes'
 
 declare module '@tiptap/core' {
   interface Commands<ReturnType> {
@@ -9,11 +12,55 @@ declare module '@tiptap/core' {
       /**
        * Add a mark with new attributes.
        */
-      setMark: (typeOrName: string | MarkType, attributes?: Record<string, any>) => ReturnType,
+      setMark: (typeOrName: string | MarkType, attributes?: Record<string, any>) => ReturnType
     }
   }
 }
 
+function canSetMark(state: EditorState, tr: Transaction, newMarkType: MarkType) {
+  const { selection } = tr
+  let cursor: ResolvedPos | null = null
+
+  if (isTextSelection(selection)) {
+    cursor = selection.$cursor
+  }
+
+  if (cursor) {
+    const currentMarks = state.storedMarks ?? cursor.marks()
+
+    // There can be no current marks that exclude the new mark
+    return (
+      !!newMarkType.isInSet(currentMarks)
+      || !currentMarks.some(mark => mark.type.excludes(newMarkType))
+    )
+  }
+
+  const { ranges } = selection
+
+  return ranges.some(({ $from, $to }) => {
+    let someNodeSupportsMark = $from.depth === 0
+      ? state.doc.inlineContent && state.doc.type.allowsMarkType(newMarkType)
+      : false
+
+    state.doc.nodesBetween($from.pos, $to.pos, (node, _pos, parent) => {
+      // If we already found a mark that we can enable, return false to bypass the remaining search
+      if (someNodeSupportsMark) {
+        return false
+      }
+
+      if (node.isInline) {
+        const parentAllowsMarkType = !parent || parent.type.allowsMarkType(newMarkType)
+        const currentMarksAllowMarkType = !!newMarkType.isInSet(node.marks)
+          || !node.marks.some(otherMark => otherMark.type.excludes(newMarkType))
+
+        someNodeSupportsMark = parentAllowsMarkType && currentMarksAllowMarkType
+      }
+      return !someNodeSupportsMark
+    })
+
+    return someNodeSupportsMark
+  })
+}
 export const setMark: RawCommands['setMark'] = (typeOrName, attributes = {}) => ({ tr, state, dispatch }) => {
   const { selection } = tr
   const { empty, ranges } = selection
@@ -23,10 +70,12 @@ export const setMark: RawCommands['setMark'] = (typeOrName, attributes = {}) =>
     if (empty) {
       const oldAttributes = getMarkAttributes(state, type)
 
-      tr.addStoredMark(type.create({
-        ...oldAttributes,
-        ...attributes,
-      }))
+      tr.addStoredMark(
+        type.create({
+          ...oldAttributes,
+          ...attributes,
+        }),
+      )
     } else {
       ranges.forEach(range => {
         const from = range.$from.pos
@@ -43,10 +92,14 @@ export const setMark: RawCommands['setMark'] = (typeOrName, attributes = {}) =>
           if (someHasMark) {
             node.marks.forEach(mark => {
               if (type === mark.type) {
-                tr.addMark(trimmedFrom, trimmedTo, type.create({
-                  ...mark.attrs,
-                  ...attributes,
-                }))
+                tr.addMark(
+                  trimmedFrom,
+                  trimmedTo,
+                  type.create({
+                    ...mark.attrs,
+                    ...attributes,
+                  }),
+                )
               }
             })
           } else {
@@ -57,5 +110,5 @@ export const setMark: RawCommands['setMark'] = (typeOrName, attributes = {}) =>
     }
   }
 
-  return true
+  return canSetMark(state, tr, type)
 }

package/src/commands/setNode.ts

@@ -1,7 +1,8 @@
-import { NodeType } from 'prosemirror-model'
-import { setBlockType } from 'prosemirror-commands'
+import { setBlockType } from '@tiptap/pm/commands'
+import { NodeType } from '@tiptap/pm/model'
+
+import { getNodeType } from '../helpers/getNodeType'
 import { RawCommands } from '../types'
-import getNodeType from '../helpers/getNodeType'
 
 declare module '@tiptap/core' {
   interface Commands<ReturnType> {
@@ -9,13 +10,36 @@ declare module '@tiptap/core' {
       /**
        * Replace a given range with a node.
        */
-      setNode: (typeOrName: string | NodeType, attributes?: Record<string, any>) => ReturnType,
+      setNode: (typeOrName: string | NodeType, attributes?: Record<string, any>) => ReturnType
     }
   }
 }
 
-export const setNode: RawCommands['setNode'] = (typeOrName, attributes = {}) => ({ state, dispatch }) => {
+export const setNode: RawCommands['setNode'] = (typeOrName, attributes = {}) => ({ state, dispatch, chain }) => {
   const type = getNodeType(typeOrName, state.schema)
 
-  return setBlockType(type, attributes)(state, dispatch)
+  // TODO: use a fallback like insertContent?
+  if (!type.isTextblock) {
+    console.warn('[tiptap warn]: Currently "setNode()" only supports text block nodes.')
+
+    return false
+  }
+
+  return (
+    chain()
+    // try to convert node to default node if needed
+      .command(({ commands }) => {
+        const canSetBlock = setBlockType(type, attributes)(state)
+
+        if (canSetBlock) {
+          return true
+        }
+
+        return commands.clearNodes()
+      })
+      .command(({ state: updatedState }) => {
+        return setBlockType(type, attributes)(updatedState, dispatch)
+      })
+      .run()
+  )
 }

package/src/commands/setNodeSelection.ts

@@ -1,6 +1,7 @@
-import { Selection, NodeSelection } from 'prosemirror-state'
-import minMax from '../utilities/minMax'
+import { NodeSelection } from '@tiptap/pm/state'
+
 import { RawCommands } from '../types'
+import { minMax } from '../utilities/minMax'
 
 declare module '@tiptap/core' {
   interface Commands<ReturnType> {
@@ -8,7 +9,7 @@ declare module '@tiptap/core' {
       /**
        * Creates a NodeSelection.
        */
-      setNodeSelection: (position: number) => ReturnType,
+      setNodeSelection: (position: number) => ReturnType
     }
   }
 }
@@ -16,10 +17,8 @@ declare module '@tiptap/core' {
 export const setNodeSelection: RawCommands['setNodeSelection'] = position => ({ tr, dispatch }) => {
   if (dispatch) {
     const { doc } = tr
-    const minPos = Selection.atStart(doc).from
-    const maxPos = Selection.atEnd(doc).to
-    const resolvedPos = minMax(position, minPos, maxPos)
-    const selection = NodeSelection.create(doc, resolvedPos)
+    const from = minMax(position, 0, doc.content.size)
+    const selection = NodeSelection.create(doc, from)
 
     tr.setSelection(selection)
   }

package/src/commands/setTextSelection.ts

@@ -1,6 +1,7 @@
-import { Selection, TextSelection } from 'prosemirror-state'
-import minMax from '../utilities/minMax'
-import { RawCommands, Range } from '../types'
+import { TextSelection } from '@tiptap/pm/state'
+
+import { Range, RawCommands } from '../types'
+import { minMax } from '../utilities/minMax'
 
 declare module '@tiptap/core' {
   interface Commands<ReturnType> {
@@ -8,7 +9,7 @@ declare module '@tiptap/core' {
       /**
        * Creates a TextSelection.
        */
-      setTextSelection: (position: number | Range) => ReturnType,
+      setTextSelection: (position: number | Range) => ReturnType
     }
   }
 }
@@ -16,11 +17,9 @@ declare module '@tiptap/core' {
 export const setTextSelection: RawCommands['setTextSelection'] = position => ({ tr, dispatch }) => {
   if (dispatch) {
     const { doc } = tr
-    const { from, to } = typeof position === 'number'
-      ? { from: position, to: position }
-      : position
-    const minPos = Selection.atStart(doc).from
-    const maxPos = Selection.atEnd(doc).to
+    const { from, to } = typeof position === 'number' ? { from: position, to: position } : position
+    const minPos = TextSelection.atStart(doc).from
+    const maxPos = TextSelection.atEnd(doc).to
     const resolvedFrom = minMax(from, minPos, maxPos)
     const resolvedEnd = minMax(to, minPos, maxPos)
     const selection = TextSelection.create(doc, resolvedFrom, resolvedEnd)

package/src/commands/sinkListItem.ts

@@ -1,7 +1,8 @@
-import { sinkListItem as originalSinkListItem } from 'prosemirror-schema-list'
-import { NodeType } from 'prosemirror-model'
+import { NodeType } from '@tiptap/pm/model'
+import { sinkListItem as originalSinkListItem } from '@tiptap/pm/schema-list'
+
+import { getNodeType } from '../helpers/getNodeType'
 import { RawCommands } from '../types'
-import getNodeType from '../helpers/getNodeType'
 
 declare module '@tiptap/core' {
   interface Commands<ReturnType> {
@@ -9,7 +10,7 @@ declare module '@tiptap/core' {
       /**
        * Sink the list item down into an inner list.
        */
-      sinkListItem: (typeOrName: string | NodeType) => ReturnType,
+      sinkListItem: (typeOrName: string | NodeType) => ReturnType
     }
   }
 }

package/src/commands/splitBlock.ts

@@ -1,23 +1,12 @@
-import { canSplit } from 'prosemirror-transform'
-import { ContentMatch } from 'prosemirror-model'
-import { EditorState, NodeSelection, TextSelection } from 'prosemirror-state'
-import { RawCommands } from '../types'
-import getSplittedAttributes from '../helpers/getSplittedAttributes'
-
-function defaultBlockAt(match: ContentMatch) {
-  for (let i = 0; i < match.edgeCount; i += 1) {
-    const { type } = match.edge(i)
+import { EditorState, NodeSelection, TextSelection } from '@tiptap/pm/state'
+import { canSplit } from '@tiptap/pm/transform'
 
-    if (type.isTextblock && !type.hasRequiredAttrs()) {
-      return type
-    }
-  }
-  return null
-}
+import { defaultBlockAt } from '../helpers/defaultBlockAt'
+import { getSplittedAttributes } from '../helpers/getSplittedAttributes'
+import { RawCommands } from '../types'
 
 function ensureMarks(state: EditorState, splittableMarks?: string[]) {
-  const marks = state.storedMarks
-    || (state.selection.$to.parentOffset && state.selection.$from.marks())
+  const marks = state.storedMarks || (state.selection.$to.parentOffset && state.selection.$from.marks())
 
   if (marks) {
     const filteredMarks = marks.filter(mark => splittableMarks?.includes(mark.type.name))
@@ -32,16 +21,13 @@ declare module '@tiptap/core' {
       /**
        * Forks a new node from an existing node.
        */
-      splitBlock: (options?: { keepMarks?: boolean }) => ReturnType,
+      splitBlock: (options?: { keepMarks?: boolean }) => ReturnType
     }
   }
 }
 
 export const splitBlock: RawCommands['splitBlock'] = ({ keepMarks = true } = {}) => ({
-  tr,
-  state,
-  dispatch,
-  editor,
+  tr, state, dispatch, editor,
 }) => {
   const { selection, doc } = tr
   const { $from, $to } = selection
@@ -84,37 +70,36 @@ export const splitBlock: RawCommands['splitBlock'] = ({ keepMarks = true } = {})
       : defaultBlockAt($from.node(-1).contentMatchAt($from.indexAfter(-1)))
 
     let types = atEnd && deflt
-      ? [{
-        type: deflt,
-        attrs: newAttributes,
-      }]
+      ? [
+        {
+          type: deflt,
+          attrs: newAttributes,
+        },
+      ]
       : undefined
 
     let can = canSplit(tr.doc, tr.mapping.map($from.pos), 1, types)
 
     if (
       !types
-      && !can
-      && canSplit(tr.doc, tr.mapping.map($from.pos), 1, deflt ? [{ type: deflt }] : undefined)
+        && !can
+        && canSplit(tr.doc, tr.mapping.map($from.pos), 1, deflt ? [{ type: deflt }] : undefined)
     ) {
       can = true
       types = deflt
-        ? [{
-          type: deflt,
-          attrs: newAttributes,
-        }]
+        ? [
+          {
+            type: deflt,
+            attrs: newAttributes,
+          },
+        ]
         : undefined
     }
 
     if (can) {
       tr.split(tr.mapping.map($from.pos), 1, types)
 
-      if (
-        deflt
-        && !atEnd
-        && !$from.parentOffset
-        && $from.parent.type !== deflt
-      ) {
+      if (deflt && !atEnd && !$from.parentOffset && $from.parent.type !== deflt) {
         const first = tr.mapping.map($from.before())
         const $first = tr.doc.resolve(first)
 

package/src/commands/splitListItem.ts

@@ -1,14 +1,12 @@
 import {
-  NodeType,
-  Node as ProseMirrorNode,
-  Fragment,
-  Slice,
-} from 'prosemirror-model'
-import { canSplit } from 'prosemirror-transform'
-import { TextSelection } from 'prosemirror-state'
+  Fragment, Node as ProseMirrorNode, NodeType, Slice,
+} from '@tiptap/pm/model'
+import { TextSelection } from '@tiptap/pm/state'
+import { canSplit } from '@tiptap/pm/transform'
+
+import { getNodeType } from '../helpers/getNodeType'
+import { getSplittedAttributes } from '../helpers/getSplittedAttributes'
 import { RawCommands } from '../types'
-import getNodeType from '../helpers/getNodeType'
-import getSplittedAttributes from '../helpers/getSplittedAttributes'
 
 declare module '@tiptap/core' {
   interface Commands<ReturnType> {
@@ -16,7 +14,7 @@ declare module '@tiptap/core' {
       /**
        * Splits one list item into two list items.
        */
-      splitListItem: (typeOrName: string | NodeType) => ReturnType,
+      splitListItem: (typeOrName: string | NodeType) => ReturnType
     }
   }
 }
@@ -29,7 +27,7 @@ export const splitListItem: RawCommands['splitListItem'] = typeOrName => ({
 
   // @ts-ignore
   // eslint-disable-next-line
-  const node: ProseMirrorNode = state.selection.node
+    const node: ProseMirrorNode = state.selection.node
 
   if ((node && node.isBlock) || $from.depth < 2 || !$from.sameParent($to)) {
     return false
@@ -49,8 +47,8 @@ export const splitListItem: RawCommands['splitListItem'] = typeOrName => ({
     // command handle lifting.
     if (
       $from.depth === 2
-      || $from.node(-3).type !== type
-      || $from.index(-2) !== $from.node(-2).childCount - 1
+        || $from.node(-3).type !== type
+        || $from.index(-2) !== $from.node(-2).childCount - 1
     ) {
       return false
     }
@@ -58,11 +56,7 @@ export const splitListItem: RawCommands['splitListItem'] = typeOrName => ({
     if (dispatch) {
       let wrap = Fragment.empty
       // eslint-disable-next-line
-      const depthBefore = $from.index(-1)
-        ? 1
-        : $from.index(-2)
-          ? 2
-          : 3
+        const depthBefore = $from.index(-1) ? 1 : $from.index(-2) ? 2 : 3
 
       // Build a fragment containing empty versions of the structure
       // from the outer list item to the parent node of the cursor
@@ -71,11 +65,7 @@ export const splitListItem: RawCommands['splitListItem'] = typeOrName => ({
       }
 
       // eslint-disable-next-line
-      const depthAfter = $from.indexAfter(-1) < $from.node(-2).childCount
-        ? 1
-        : $from.indexAfter(-2) < $from.node(-3).childCount
-          ? 2
-          : 3
+        const depthAfter = $from.indexAfter(-1) < $from.node(-2).childCount ? 1 : $from.indexAfter(-2) < $from.node(-3).childCount ? 2 : 3
 
       // Add a second list item with an empty default start node
       const newNextTypeAttributes = getSplittedAttributes(
@@ -113,9 +103,7 @@ export const splitListItem: RawCommands['splitListItem'] = typeOrName => ({
     return true
   }
 
-  const nextType = $to.pos === $from.end()
-    ? grandParent.contentMatchAt(0).defaultType
-    : null
+  const nextType = $to.pos === $from.end() ? grandParent.contentMatchAt(0).defaultType : null
 
   const newTypeAttributes = getSplittedAttributes(
     extensionAttributes,
@@ -131,7 +119,10 @@ export const splitListItem: RawCommands['splitListItem'] = typeOrName => ({
   tr.delete($from.pos, $to.pos)
 
   const types = nextType
-    ? [{ type, attrs: newTypeAttributes }, { type: nextType, attrs: newNextTypeAttributes }]
+    ? [
+      { type, attrs: newTypeAttributes },
+      { type: nextType, attrs: newNextTypeAttributes },
+    ]
     : [{ type, attrs: newTypeAttributes }]
 
   if (!canSplit(tr.doc, $from.pos, 2)) {
@@ -139,7 +130,19 @@ export const splitListItem: RawCommands['splitListItem'] = typeOrName => ({
   }
 
   if (dispatch) {
+    const { selection, storedMarks } = state
+    const { splittableMarks } = editor.extensionManager
+    const marks = storedMarks || (selection.$to.parentOffset && selection.$from.marks())
+
     tr.split($from.pos, 2, types).scrollIntoView()
+
+    if (!marks || !dispatch) {
+      return true
+    }
+
+    const filteredMarks = marks.filter(mark => splittableMarks.includes(mark.type.name))
+
+    tr.ensureMarks(filteredMarks)
   }
 
   return true

package/src/commands/toggleList.ts

@@ -1,8 +1,61 @@
-import { NodeType } from 'prosemirror-model'
+import { NodeType } from '@tiptap/pm/model'
+import { Transaction } from '@tiptap/pm/state'
+import { canJoin } from '@tiptap/pm/transform'
+
+import { findParentNode } from '../helpers/findParentNode'
+import { getNodeType } from '../helpers/getNodeType'
+import { isList } from '../helpers/isList'
 import { RawCommands } from '../types'
-import getNodeType from '../helpers/getNodeType'
-import findParentNode from '../helpers/findParentNode'
-import isList from '../helpers/isList'
+
+const joinListBackwards = (tr: Transaction, listType: NodeType): boolean => {
+  const list = findParentNode(node => node.type === listType)(tr.selection)
+
+  if (!list) {
+    return true
+  }
+
+  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)
+
+  if (!canJoinBackwards) {
+    return true
+  }
+
+  tr.join(list.pos)
+
+  return true
+}
+
+const joinListForwards = (tr: Transaction, listType: NodeType): boolean => {
+  const list = findParentNode(node => node.type === listType)(tr.selection)
+
+  if (!list) {
+    return true
+  }
+
+  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)
+
+  if (!canJoinForwards) {
+    return true
+  }
+
+  tr.join(after)
+
+  return true
+}
 
 declare module '@tiptap/core' {
   interface Commands<ReturnType> {
@@ -10,21 +63,23 @@ declare module '@tiptap/core' {
       /**
        * Toggle between different list types.
        */
-      toggleList: (listTypeOrName: string | NodeType, itemTypeOrName: string | NodeType) => ReturnType,
+      toggleList: (listTypeOrName: string | NodeType, itemTypeOrName: string | NodeType, keepMarks?: boolean, attributes?: Record<string, any>) => ReturnType;
     }
   }
 }
 
-export const toggleList: RawCommands['toggleList'] = (listTypeOrName, itemTypeOrName) => ({
+export const toggleList: RawCommands['toggleList'] = (listTypeOrName, itemTypeOrName, keepMarks, attributes = {}) => ({
   editor, tr, state, dispatch, chain, commands, can,
 }) => {
-  const { extensions } = editor.extensionManager
+  const { extensions, splittableMarks } = editor.extensionManager
   const listType = getNodeType(listTypeOrName, state.schema)
   const itemType = getNodeType(itemTypeOrName, state.schema)
-  const { selection } = state
+  const { selection, storedMarks } = state
   const { $from, $to } = selection
   const range = $from.blockRange($to)
 
+  const marks = storedMarks || (selection.$to.parentOffset && selection.$from.marks())
+
   if (!range) {
     return false
   }
@@ -40,24 +95,58 @@ export const toggleList: RawCommands['toggleList'] = (listTypeOrName, itemTypeOr
     // change list type
     if (
       isList(parentList.node.type.name, extensions)
-      && listType.validContent(parentList.node.content)
-      && dispatch
+        && listType.validContent(parentList.node.content)
+        && dispatch
     ) {
-      tr.setNodeMarkup(parentList.pos, listType)
+      return chain()
+        .command(() => {
+          tr.setNodeMarkup(parentList.pos, listType)
 
-      return true
+          return true
+        })
+        .command(() => joinListBackwards(tr, listType))
+        .command(() => joinListForwards(tr, listType))
+        .run()
     }
   }
+  if (!keepMarks || !marks || !dispatch) {
 
-  const canWrapInList = can().wrapInList(listType)
-
-  // try to convert node to paragraph if needed
-  if (!canWrapInList) {
     return chain()
-      .clearNodes()
-      .wrapInList(listType)
+      // try to convert node to default node if needed
+      .command(() => {
+        const canWrapInList = can().wrapInList(listType, attributes)
+
+        if (canWrapInList) {
+          return true
+        }
+
+        return commands.clearNodes()
+      })
+      .wrapInList(listType, attributes)
+      .command(() => joinListBackwards(tr, listType))
+      .command(() => joinListForwards(tr, listType))
       .run()
   }
 
-  return commands.wrapInList(listType)
+  return (
+    chain()
+    // try to convert node to default node if needed
+      .command(() => {
+        const canWrapInList = can().wrapInList(listType, attributes)
+
+        const filteredMarks = marks.filter(mark => splittableMarks.includes(mark.type.name))
+
+        tr.ensureMarks(filteredMarks)
+
+        if (canWrapInList) {
+          return true
+        }
+
+        return commands.clearNodes()
+      })
+      .wrapInList(listType, attributes)
+      .command(() => joinListBackwards(tr, listType))
+      .command(() => joinListForwards(tr, listType))
+      .run()
+  )
 }

package/src/commands/toggleMark.ts

@@ -1,7 +1,8 @@
-import { MarkType } from 'prosemirror-model'
+import { MarkType } from '@tiptap/pm/model'
+
+import { getMarkType } from '../helpers/getMarkType'
+import { isMarkActive } from '../helpers/isMarkActive'
 import { RawCommands } from '../types'
-import getMarkType from '../helpers/getMarkType'
-import isMarkActive from '../helpers/isMarkActive'
 
 declare module '@tiptap/core' {
   interface Commands<ReturnType> {
@@ -9,17 +10,27 @@ declare module '@tiptap/core' {
       /**
        * Toggle a mark on and off.
        */
-      toggleMark: (typeOrName: string | MarkType, attributes?: Record<string, any>) => ReturnType,
+      toggleMark: (
+        typeOrName: string | MarkType,
+        attributes?: Record<string, any>,
+        options?: {
+          /**
+           * Removes the mark even across the current selection. Defaults to `false`.
+           */
+          extendEmptyMarkRange?: boolean
+        },
+      ) => ReturnType
     }
   }
 }
 
-export const toggleMark: RawCommands['toggleMark'] = (typeOrName, attributes = {}) => ({ state, commands }) => {
+export const toggleMark: RawCommands['toggleMark'] = (typeOrName, attributes = {}, options = {}) => ({ state, commands }) => {
+  const { extendEmptyMarkRange = false } = options
   const type = getMarkType(typeOrName, state.schema)
   const isActive = isMarkActive(state, type, attributes)
 
   if (isActive) {
-    return commands.unsetMark(type)
+    return commands.unsetMark(type, { extendEmptyMarkRange })
   }
 
   return commands.setMark(type, attributes)