@tiptap/core 2.0.0-beta.2 → 2.0.0-beta.200

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 { RawCommands } from '../types'
 
 declare module '@tiptap/core' {
-  interface Commands {
+  interface Commands<ReturnType> {
     createParagraphNear: {
       /**
        * Create a paragraph nearby.
        */
-      createParagraphNear: () => Command,
+      createParagraphNear: () => ReturnType,
     }
   }
 }

package/src/commands/deleteNode.ts

@@ -0,0 +1,37 @@
+import { NodeType } from 'prosemirror-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 { 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 { 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,30 @@
-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 { TextSelection } from 'prosemirror-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 './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 './joinBackward'
+export * from './joinForward'
+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

@@ -0,0 +1,24 @@
+import { ParseOptions } from 'prosemirror-model'
+
+import { Content, RawCommands } from '../types'
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    insertContent: {
+      /**
+       * Insert a node or string of HTML at the current position.
+       */
+      insertContent: (
+        value: Content,
+        options?: {
+          parseOptions?: ParseOptions,
+          updateSelection?: boolean,
+        },
+      ) => ReturnType,
+    }
+  }
+}
+
+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,108 @@
+import { Fragment, Node as ProseMirrorNode, ParseOptions } from 'prosemirror-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/joinBackward.ts

@@ -1,13 +1,14 @@
 import { joinBackward as originalJoinBackward } from 'prosemirror-commands'
-import { Command, RawCommands } from '../types'
+
+import { RawCommands } from '../types'
 
 declare module '@tiptap/core' {
-  interface Commands {
+  interface Commands<ReturnType> {
     joinBackward: {
       /**
        * Join two nodes backward.
        */
-      joinBackward: () => Command,
+      joinBackward: () => ReturnType,
     }
   }
 }

package/src/commands/joinForward.ts

@@ -1,13 +1,14 @@
 import { joinForward as originalJoinForward } from 'prosemirror-commands'
-import { Command, RawCommands } from '../types'
+
+import { RawCommands } from '../types'
 
 declare module '@tiptap/core' {
-  interface Commands {
+  interface Commands<ReturnType> {
     joinForward: {
       /**
        * Join two nodes forward.
        */
-      joinForward: () => Command,
+      joinForward: () => ReturnType,
     }
   }
 }

package/src/commands/keyboardShortcut.ts

@@ -1,6 +1,6 @@
-import { Command, RawCommands } from '../types'
-
-const mac = typeof navigator !== 'undefined' ? /Mac/.test(navigator.platform) : false
+import { RawCommands } from '../types'
+import { isiOS } from '../utilities/isiOS'
+import { isMacOS } from '../utilities/isMacOS'
 
 function normalizeKeyName(name: string) {
   const parts = name.split(/-(?!$)/)
@@ -27,7 +27,7 @@ function normalizeKeyName(name: string) {
     } else if (/^s(hift)?$/i.test(mod)) {
       shift = true
     } else if (/^mod$/i.test(mod)) {
-      if (mac) {
+      if (isiOS() || isMacOS()) {
         meta = true
       } else {
         ctrl = true
@@ -57,12 +57,12 @@ function normalizeKeyName(name: string) {
 }
 
 declare module '@tiptap/core' {
-  interface Commands {
+  interface Commands<ReturnType> {
     keyboardShortcut: {
       /**
        * Trigger a keyboard shortcut.
        */
-      keyboardShortcut: (name: string) => Command,
+      keyboardShortcut: (name: string) => ReturnType,
     }
   }
 }

package/src/commands/lift.ts

@@ -1,16 +1,17 @@
 import { lift as originalLift } from 'prosemirror-commands'
 import { NodeType } from 'prosemirror-model'
-import { Command, RawCommands, AnyObject } from '../types'
-import isNodeActive from '../helpers/isNodeActive'
-import getNodeType from '../helpers/getNodeType'
+
+import { getNodeType } from '../helpers/getNodeType'
+import { isNodeActive } from '../helpers/isNodeActive'
+import { RawCommands } from '../types'
 
 declare module '@tiptap/core' {
-  interface Commands {
+  interface Commands<ReturnType> {
     lift: {
       /**
        * Removes an existing wrap.
        */
-      lift: (typeOrName: string | NodeType, attributes?: AnyObject) => Command,
+      lift: (typeOrName: string | NodeType, attributes?: Record<string, any>) => ReturnType,
     }
   }
 }

package/src/commands/liftEmptyBlock.ts

@@ -1,13 +1,14 @@
 import { liftEmptyBlock as originalLiftEmptyBlock } from 'prosemirror-commands'
-import { Command, RawCommands } from '../types'
+
+import { RawCommands } from '../types'
 
 declare module '@tiptap/core' {
-  interface Commands {
+  interface Commands<ReturnType> {
     liftEmptyBlock: {
       /**
        * Lift block if empty.
        */
-      liftEmptyBlock: () => Command,
+      liftEmptyBlock: () => ReturnType,
     }
   }
 }

package/src/commands/liftListItem.ts

@@ -1,15 +1,16 @@
-import { liftListItem as originalLiftListItem } from 'prosemirror-schema-list'
 import { NodeType } from 'prosemirror-model'
-import { Command, RawCommands } from '../types'
-import getNodeType from '../helpers/getNodeType'
+import { liftListItem as originalLiftListItem } from 'prosemirror-schema-list'
+
+import { getNodeType } from '../helpers/getNodeType'
+import { RawCommands } from '../types'
 
 declare module '@tiptap/core' {
-  interface Commands {
+  interface Commands<ReturnType> {
     liftListItem: {
       /**
        * Lift the list item into a wrapping list.
        */
-      liftListItem: (typeOrName: string | NodeType) => Command,
+      liftListItem: (typeOrName: string | NodeType) => ReturnType,
     }
   }
 }