@tiptap/core 2.0.0-beta.21 → 2.0.0-beta.211

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,
+  )
 }

package/src/commands/insertContentAt.ts

@@ -0,0 +1,94 @@
+import { Fragment, Node as ProseMirrorNode, ParseOptions } from '@tiptap/pm/model'
+
+import { createNodeFromContent } from '../helpers/createNodeFromContent'
+import { selectionToInsertionEnd } from '../helpers/selectionToInsertionEnd'
+import { Content, Range, RawCommands } from '../types'
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    insertContentAt: {
+      /**
+       * Insert a node or string of HTML at a specific position.
+       */
+      insertContentAt: (
+        position: number | Range,
+        value: Content,
+        options?: {
+          parseOptions?: ParseOptions
+          updateSelection?: boolean
+        },
+      ) => ReturnType
+    }
+  }
+}
+
+const isFragment = (nodeOrFragment: ProseMirrorNode | Fragment): nodeOrFragment is Fragment => {
+  return nodeOrFragment.toString().startsWith('<')
+}
+
+export const insertContentAt: RawCommands['insertContentAt'] = (position, value, options) => ({ tr, dispatch, editor }) => {
+  if (dispatch) {
+    options = {
+      parseOptions: {},
+      updateSelection: true,
+      ...options,
+    }
+
+    const content = createNodeFromContent(value, editor.schema, {
+      parseOptions: {
+        preserveWhitespace: 'full',
+        ...options.parseOptions,
+      },
+    })
+
+    // don’t dispatch an empty fragment because this can lead to strange errors
+    if (content.toString() === '<>') {
+      return true
+    }
+
+    let { from, to } = typeof position === 'number' ? { from: position, to: position } : position
+
+    let isOnlyTextContent = true
+    let isOnlyBlockContent = true
+    const nodes = isFragment(content) ? content : [content]
+
+    nodes.forEach(node => {
+      // check if added node is valid
+      node.check()
+
+      isOnlyTextContent = isOnlyTextContent ? node.isText && node.marks.length === 0 : false
+
+      isOnlyBlockContent = isOnlyBlockContent ? node.isBlock : false
+    })
+
+    // check if we can replace the wrapping node by
+    // the newly inserted content
+    // example:
+    // replace an empty paragraph by an inserted image
+    // instead of inserting the image below the paragraph
+    if (from === to && isOnlyBlockContent) {
+      const { parent } = tr.doc.resolve(from)
+      const isEmptyTextBlock = parent.isTextblock && !parent.type.spec.code && !parent.childCount
+
+      if (isEmptyTextBlock) {
+        from -= 1
+        to += 1
+      }
+    }
+
+    // if there is only plain text we have to use `insertText`
+    // because this will keep the current marks
+    if (isOnlyTextContent) {
+      tr.insertText(value as string, from, to)
+    } else {
+      tr.replaceWith(from, to, content)
+    }
+
+    // set cursor at end of inserted content
+    if (options.updateSelection) {
+      selectionToInsertionEnd(tr, tr.steps.length - 1, -1)
+    }
+  }
+
+  return true
+}

package/src/commands/join.ts

@@ -0,0 +1,53 @@
+import {
+  joinBackward as originalJoinBackward,
+  joinDown as originalJoinDown,
+  joinForward as originalJoinForward,
+  joinUp as originalJoinUp,
+} from '@tiptap/pm/commands'
+
+import { RawCommands } from '../types'
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    joinUp: {
+      /**
+       * Join two nodes Up.
+       */
+      joinUp: () => ReturnType
+    }
+    joinDown: {
+      /**
+       * Join two nodes Down.
+       */
+      joinDown: () => ReturnType
+    }
+    joinBackward: {
+      /**
+       * Join two nodes Backwards.
+       */
+      joinBackward: () => ReturnType
+    }
+    joinForward: {
+      /**
+       * Join two nodes Forwards.
+       */
+      joinForward: () => ReturnType
+    }
+  }
+}
+
+export const joinUp: RawCommands['joinUp'] = () => ({ state, dispatch }) => {
+  return originalJoinUp(state, dispatch)
+}
+
+export const joinDown: RawCommands['joinDown'] = () => ({ state, dispatch }) => {
+  return originalJoinDown(state, dispatch)
+}
+
+export const joinBackward: RawCommands['joinBackward'] = () => ({ state, dispatch }) => {
+  return originalJoinBackward(state, dispatch)
+}
+
+export const joinForward: RawCommands['joinForward'] = () => ({ state, dispatch }) => {
+  return originalJoinForward(state, dispatch)
+}