@tiptap/core 2.0.0-beta.22 → 2.0.0-beta.220

package/src/commands/clearNodes.ts

@@ -1,13 +1,14 @@
-import { liftTarget } from 'prosemirror-transform'
-import { Command, RawCommands } from '../types'
+import { liftTarget } from '@tiptap/pm/transform'
+
+import { RawCommands } from '../types'
 
 declare module '@tiptap/core' {
-  interface Commands {
+  interface Commands<ReturnType> {
     clearNodes: {
       /**
        * Normalize nodes to a simple paragraph.
        */
-      clearNodes: () => Command,
+      clearNodes: () => ReturnType,
     }
   }
 }
@@ -16,24 +17,35 @@ 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 (!node.type.isText) {
-        const fromPos = tr.doc.resolve(tr.mapping.map(pos + 1))
-        const toPos = tr.doc.resolve(tr.mapping.map(pos + node.nodeSize - 1))
-        const nodeRange = fromPos.blockRange(toPos)
+  if (!dispatch) {
+    return true
+  }
 
-        if (nodeRange) {
-          const targetLiftDepth = liftTarget(nodeRange)
+  ranges.forEach(({ $from, $to }) => {
+    state.doc.nodesBetween($from.pos, $to.pos, (node, pos) => {
+      if (node.type.isText) {
+        return
+      }
 
-          if (node.type.isTextblock && dispatch) {
-            tr.setNodeMarkup(nodeRange.start, state.doc.type.contentMatch.defaultType)
-          }
+      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
+      }
+
+      const targetLiftDepth = liftTarget(nodeRange)
+
+      if (node.type.isTextblock) {
+        const { defaultType } = $mappedFrom.parent.contentMatchAt($mappedFrom.index())
+
+        tr.setNodeMarkup(nodeRange.start, defaultType)
+      }
 
-          if ((targetLiftDepth || targetLiftDepth === 0) && dispatch) {
-            tr.lift(nodeRange, targetLiftDepth)
-          }
-        }
+      if (targetLiftDepth || targetLiftDepth === 0) {
+        tr.lift(nodeRange, targetLiftDepth)
       }
     })
   })

package/src/commands/command.ts

@@ -1,12 +1,12 @@
 import { Command, RawCommands } from '../types'
 
 declare module '@tiptap/core' {
-  interface Commands {
+  interface Commands<ReturnType> {
     command: {
       /**
        * Define a command inline.
        */
-      command: (fn: (props: Parameters<Command>[0]) => boolean) => Command,
+      command: (fn: (props: Parameters<Command>[0]) => boolean) => ReturnType,
     }
   }
 }

package/src/commands/createParagraphNear.ts

@@ -1,13 +1,14 @@
-import { createParagraphNear as originalCreateParagraphNear } from 'prosemirror-commands'
-import { Command, RawCommands } from '../types'
+import { createParagraphNear as originalCreateParagraphNear } from '@tiptap/pm/commands'
+
+import { RawCommands } from '../types'
 
 declare module '@tiptap/core' {
-  interface Commands {
+  interface Commands<ReturnType> {
     createParagraphNear: {
       /**
        * Create a paragraph nearby.
        */
-      createParagraphNear: () => Command,
+      createParagraphNear: () => ReturnType
     }
   }
 }

package/src/commands/deleteCurrentNode.ts

@@ -0,0 +1,41 @@
+import { RawCommands } from '../types'
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    deleteCurrentNode: {
+      /**
+       * Delete the node that currently has the selection anchor.
+       */
+      deleteCurrentNode: () => ReturnType,
+    }
+  }
+}
+
+export const deleteCurrentNode: RawCommands['deleteCurrentNode'] = () => ({ tr, dispatch }) => {
+  const { selection } = tr
+  const currentNode = selection.$anchor.node()
+
+  // if there is content inside the current node, break out of this command
+  if (currentNode.content.size > 0) {
+    return false
+  }
+
+  const $pos = tr.selection.$anchor
+
+  for (let depth = $pos.depth; depth > 0; depth -= 1) {
+    const node = $pos.node(depth)
+
+    if (node.type === currentNode.type) {
+      if (dispatch) {
+        const from = $pos.before(depth)
+        const to = $pos.after(depth)
+
+        tr.delete(from, to).scrollIntoView()
+      }
+
+      return true
+    }
+  }
+
+  return false
+}

package/src/commands/deleteNode.ts

@@ -0,0 +1,37 @@
+import { NodeType } from '@tiptap/pm/model'
+
+import { getNodeType } from '../helpers/getNodeType'
+import { RawCommands } from '../types'
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    deleteNode: {
+      /**
+       * Delete a node.
+       */
+      deleteNode: (typeOrName: string | NodeType) => ReturnType,
+    }
+  }
+}
+
+export const deleteNode: RawCommands['deleteNode'] = typeOrName => ({ tr, state, dispatch }) => {
+  const type = getNodeType(typeOrName, state.schema)
+  const $pos = tr.selection.$anchor
+
+  for (let depth = $pos.depth; depth > 0; depth -= 1) {
+    const node = $pos.node(depth)
+
+    if (node.type === type) {
+      if (dispatch) {
+        const from = $pos.before(depth)
+        const to = $pos.after(depth)
+
+        tr.delete(from, to).scrollIntoView()
+      }
+
+      return true
+    }
+  }
+
+  return false
+}

package/src/commands/deleteRange.ts

@@ -1,12 +1,12 @@
-import { Command, RawCommands, Range } from '../types'
+import { Range, RawCommands } from '../types'
 
 declare module '@tiptap/core' {
-  interface Commands {
+  interface Commands<ReturnType> {
     deleteRange: {
       /**
        * Delete a given range.
        */
-      deleteRange: (range: Range) => Command,
+      deleteRange: (range: Range) => ReturnType,
     }
   }
 }

package/src/commands/deleteSelection.ts

@@ -1,13 +1,14 @@
-import { deleteSelection as originalDeleteSelection } from 'prosemirror-commands'
-import { Command, RawCommands } from '../types'
+import { deleteSelection as originalDeleteSelection } from '@tiptap/pm/commands'
+
+import { RawCommands } from '../types'
 
 declare module '@tiptap/core' {
-  interface Commands {
+  interface Commands<ReturnType> {
     deleteSelection: {
       /**
        * Delete the selection, if there is one.
        */
-      deleteSelection: () => Command,
+      deleteSelection: () => ReturnType
     }
   }
 }

package/src/commands/enter.ts

@@ -1,12 +1,12 @@
-import { Command, RawCommands } from '../types'
+import { RawCommands } from '../types'
 
 declare module '@tiptap/core' {
-  interface Commands {
+  interface Commands<ReturnType> {
     enter: {
       /**
        * Trigger enter.
        */
-      enter: () => Command,
+      enter: () => ReturnType,
     }
   }
 }

package/src/commands/exitCode.ts

@@ -1,13 +1,14 @@
-import { exitCode as originalExitCode } from 'prosemirror-commands'
-import { Command, RawCommands } from '../types'
+import { exitCode as originalExitCode } from '@tiptap/pm/commands'
+
+import { RawCommands } from '../types'
 
 declare module '@tiptap/core' {
-  interface Commands {
+  interface Commands<ReturnType> {
     exitCode: {
       /**
        * Exit from a code block.
        */
-      exitCode: () => Command,
+      exitCode: () => ReturnType
     }
   }
 }

package/src/commands/extendMarkRange.ts

@@ -1,29 +1,33 @@
-import { TextSelection } from 'prosemirror-state'
-import { MarkType } from 'prosemirror-model'
-import { Command, RawCommands } from '../types'
-import getMarkType from '../helpers/getMarkType'
-import getMarkRange from '../helpers/getMarkRange'
+import { MarkType } from '@tiptap/pm/model'
+import { TextSelection } from '@tiptap/pm/state'
+
+import { getMarkRange } from '../helpers/getMarkRange'
+import { getMarkType } from '../helpers/getMarkType'
+import { RawCommands } from '../types'
 
 declare module '@tiptap/core' {
-  interface Commands {
+  interface Commands<ReturnType> {
     extendMarkRange: {
       /**
        * Extends the text selection to the current mark.
        */
-      extendMarkRange: (typeOrName: string | MarkType) => Command,
+      extendMarkRange: (
+        typeOrName: string | MarkType,
+        attributes?: Record<string, any>,
+      ) => ReturnType
     }
   }
 }
 
-export const extendMarkRange: RawCommands['extendMarkRange'] = typeOrName => ({ tr, state, dispatch }) => {
+export const extendMarkRange: RawCommands['extendMarkRange'] = (typeOrName, attributes = {}) => ({ tr, state, dispatch }) => {
   const type = getMarkType(typeOrName, state.schema)
   const { doc, selection } = tr
-  const { $from, empty } = selection
+  const { $from, from, to } = selection
 
-  if (empty && dispatch) {
-    const range = getMarkRange($from, type)
+  if (dispatch) {
+    const range = getMarkRange($from, type, attributes)
 
-    if (range) {
+    if (range && range.from <= from && range.to >= to) {
       const newSelection = TextSelection.create(doc, range.from, range.to)
 
       tr.setSelection(newSelection)

package/src/commands/first.ts

@@ -1,12 +1,12 @@
-import { Command, RawCommands } from '../types'
+import { Command, CommandProps, RawCommands } from '../types'
 
 declare module '@tiptap/core' {
-  interface Commands {
+  interface Commands<ReturnType> {
     first: {
       /**
        * Runs one command after the other and stops at the first which returns true.
        */
-      first: (commands: Command[] | ((props: Parameters<Command>[0]) => Command[])) => Command,
+      first: (commands: Command[] | ((props: CommandProps) => Command[])) => ReturnType,
     }
   }
 }

package/src/commands/focus.ts

@@ -1,79 +1,82 @@
-import { EditorState, TextSelection } from 'prosemirror-state'
-import { Command, RawCommands, FocusPosition } from '../types'
-import minMax from '../utilities/minMax'
-import isTextSelection from '../helpers/isTextSelection'
-
-function resolveSelection(state: EditorState, position: FocusPosition = null) {
-  if (!position) {
-    return null
-  }
-
-  if (position === 'start' || position === true) {
-    return {
-      from: 0,
-      to: 0,
-    }
-  }
-
-  if (position === 'end') {
-    const { size } = state.doc.content
-
-    return {
-      from: size,
-      to: size,
-    }
-  }
-
-  return {
-    from: position,
-    to: position,
-  }
-}
+import { isTextSelection } from '../helpers/isTextSelection'
+import { resolveFocusPosition } from '../helpers/resolveFocusPosition'
+import { FocusPosition, RawCommands } from '../types'
+import { isiOS } from '../utilities/isiOS'
 
 declare module '@tiptap/core' {
-  interface Commands {
+  interface Commands<ReturnType> {
     focus: {
       /**
        * Focus the editor at the given position.
        */
-      focus: (position?: FocusPosition) => Command,
+      focus: (
+        position?: FocusPosition,
+        options?: {
+          scrollIntoView?: boolean,
+        },
+      ) => ReturnType,
     }
   }
 }
 
-export const focus: RawCommands['focus'] = (position = null) => ({
+export const focus: RawCommands['focus'] = (position = null, options = {}) => ({
   editor,
   view,
   tr,
   dispatch,
 }) => {
+  options = {
+    scrollIntoView: true,
+    ...options,
+  }
+
+  const delayedFocus = () => {
+    // focus within `requestAnimationFrame` breaks focus on iOS
+    // so we have to call this
+    if (isiOS()) {
+      (view.dom as HTMLElement).focus()
+    }
+
+    // For React we have to focus asynchronously. Otherwise wild things happen.
+    // see: https://github.com/ueberdosis/tiptap/issues/1520
+    requestAnimationFrame(() => {
+      if (!editor.isDestroyed) {
+        view.focus()
+
+        if (options?.scrollIntoView) {
+          editor.commands.scrollIntoView()
+        }
+      }
+    })
+  }
+
   if ((view.hasFocus() && position === null) || position === false) {
     return true
   }
 
   // we don’t try to resolve a NodeSelection or CellSelection
   if (dispatch && position === null && !isTextSelection(editor.state.selection)) {
-    view.focus()
+    delayedFocus()
     return true
   }
 
-  const { from, to } = resolveSelection(editor.state, position) || editor.state.selection
-  const { doc, storedMarks } = tr
-  const resolvedFrom = minMax(from, 0, doc.content.size)
-  const resolvedEnd = minMax(to, 0, doc.content.size)
-  const selection = TextSelection.create(doc, resolvedFrom, resolvedEnd)
+  // pass through tr.doc instead of editor.state.doc
+  // since transactions could change the editors state before this command has been run
+  const selection = resolveFocusPosition(tr.doc, position) || editor.state.selection
   const isSameSelection = editor.state.selection.eq(selection)
 
   if (dispatch) {
-    tr.setSelection(selection)
+    if (!isSameSelection) {
+      tr.setSelection(selection)
+    }
 
     // `tr.setSelection` resets the stored marks
     // so we’ll restore them if the selection is the same as before
-    if (isSameSelection && storedMarks) {
-      tr.setStoredMarks(storedMarks)
+    if (isSameSelection && tr.storedMarks) {
+      tr.setStoredMarks(tr.storedMarks)
     }
 
-    view.focus()
+    delayedFocus()
   }
 
   return true

package/src/commands/forEach.ts

@@ -0,0 +1,24 @@
+import { CommandProps, RawCommands } from '../types'
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    forEach: {
+      /**
+       * Loop through an array of items.
+       */
+      forEach: <T>(
+        items: T[],
+        fn: (
+          item: T,
+          props: CommandProps & {
+            index: number,
+          },
+        ) => boolean,
+      ) => ReturnType,
+    }
+  }
+}
+
+export const forEach: RawCommands['forEach'] = (items, fn) => props => {
+  return items.every((item, index) => fn(item, { ...props, index }))
+}

package/src/commands/index.ts

@@ -0,0 +1,50 @@
+export * from './blur'
+export * from './clearContent'
+export * from './clearNodes'
+export * from './command'
+export * from './createParagraphNear'
+export * from './deleteCurrentNode'
+export * from './deleteNode'
+export * from './deleteRange'
+export * from './deleteSelection'
+export * from './enter'
+export * from './exitCode'
+export * from './extendMarkRange'
+export * from './first'
+export * from './focus'
+export * from './forEach'
+export * from './insertContent'
+export * from './insertContentAt'
+export * from './join'
+export * from './keyboardShortcut'
+export * from './lift'
+export * from './liftEmptyBlock'
+export * from './liftListItem'
+export * from './newlineInCode'
+export * from './resetAttributes'
+export * from './scrollIntoView'
+export * from './selectAll'
+export * from './selectNodeBackward'
+export * from './selectNodeForward'
+export * from './selectParentNode'
+export * from './selectTextblockEnd'
+export * from './selectTextblockStart'
+export * from './setContent'
+export * from './setMark'
+export * from './setMeta'
+export * from './setNode'
+export * from './setNodeSelection'
+export * from './setTextSelection'
+export * from './sinkListItem'
+export * from './splitBlock'
+export * from './splitListItem'
+export * from './toggleList'
+export * from './toggleMark'
+export * from './toggleNode'
+export * from './toggleWrap'
+export * from './undoInputRule'
+export * from './unsetAllMarks'
+export * from './unsetMark'
+export * from './updateAttributes'
+export * from './wrapIn'
+export * from './wrapInList'

package/src/commands/insertContent.ts

@@ -1,35 +1,28 @@
-import createNodeFromContent from '../helpers/createNodeFromContent'
-import selectionToInsertionEnd from '../helpers/selectionToInsertionEnd'
-import { Command, RawCommands, Content } from '../types'
+import { ParseOptions } from '@tiptap/pm/model'
+
+import { Content, RawCommands } from '../types'
 
 declare module '@tiptap/core' {
-  interface Commands {
+  interface Commands<ReturnType> {
     insertContent: {
       /**
        * Insert a node or string of HTML at the current position.
        */
-      insertContent: (value: Content) => Command,
+      insertContent: (
+        value: Content,
+        options?: {
+          parseOptions?: ParseOptions
+          updateSelection?: boolean
+        },
+      ) => ReturnType
     }
   }
 }
 
-export const insertContent: RawCommands['insertContent'] = value => ({ tr, dispatch, editor }) => {
-  if (dispatch) {
-    const content = createNodeFromContent(value, editor.schema)
-
-    if (typeof content === 'string') {
-      tr.insertText(content)
-
-      return true
-    }
-
-    if (!tr.selection.empty) {
-      tr.deleteSelection()
-    }
-
-    tr.insert(tr.selection.anchor, content)
-    selectionToInsertionEnd(tr, tr.steps.length - 1, -1)
-  }
-
-  return true
+export const insertContent: RawCommands['insertContent'] = (value, options) => ({ tr, commands }) => {
+  return commands.insertContentAt(
+    { from: tr.selection.from, to: tr.selection.to },
+    value,
+    options,
+  )
 }