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

package/src/commands/focus.ts

@@ -1,34 +1,7 @@
-import { EditorState, Selection, TextSelection } from 'prosemirror-state'
-import { 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<ReturnType> {
@@ -36,23 +9,43 @@ declare module '@tiptap/core' {
       /**
        * Focus the editor at the given position.
        */
-      focus: (position?: FocusPosition) => ReturnType,
+      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()
+        }
       }
     })
   }
@@ -67,13 +60,9 @@ export const focus: RawCommands['focus'] = (position = null) => ({
     return true
   }
 
-  const { from, to } = resolveSelection(editor.state, position) || editor.state.selection
-  const { doc, storedMarks } = tr
-  const minPos = Selection.atStart(doc).from
-  const maxPos = Selection.atEnd(doc).to
-  const resolvedFrom = minMax(from, minPos, maxPos)
-  const resolvedEnd = minMax(to, minPos, maxPos)
-  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) {
@@ -83,8 +72,8 @@ export const focus: RawCommands['focus'] = (position = null) => ({
 
     // `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)
     }
 
     delayedFocus()

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,5 +1,6 @@
-import { CreateNodeFromContentOptions } from '../helpers/createNodeFromContent'
-import { RawCommands, Content } from '../types'
+import { ParseOptions } from '@tiptap/pm/model'
+
+import { Content, RawCommands } from '../types'
 
 declare module '@tiptap/core' {
   interface Commands<ReturnType> {
@@ -7,11 +8,21 @@ declare module '@tiptap/core' {
       /**
        * Insert a node or string of HTML at the current position.
        */
-      insertContent: (value: Content, options?: CreateNodeFromContentOptions) => ReturnType,
+      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)
+  return commands.insertContentAt(
+    { from: tr.selection.from, to: tr.selection.to },
+    value,
+    options,
+  )
 }

package/src/commands/insertContentAt.ts

@@ -1,10 +1,8 @@
-import createNodeFromContent, { CreateNodeFromContentOptions } from '../helpers/createNodeFromContent'
-import selectionToInsertionEnd from '../helpers/selectionToInsertionEnd'
-import {
-  RawCommands,
-  Content,
-  Range,
-} from '../types'
+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> {
@@ -12,18 +10,35 @@ declare module '@tiptap/core' {
       /**
        * Insert a node or string of HTML at a specific position.
        */
-      insertContentAt: (position: number | Range, value: Content, options?: CreateNodeFromContentOptions) => ReturnType,
+      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,
       },
-      ...(options || {}),
     })
 
     // don’t dispatch an empty fragment because this can lead to strange errors
@@ -31,14 +46,56 @@ export const insertContentAt: RawCommands['insertContentAt'] = (position, value,
       return true
     }
 
-    const { from, to } = typeof position === 'number'
-      ? { from: position, to: position }
-      : position
+    let { from, to } = typeof position === 'number' ? { from: position, to: position } : position
+
+    let isOnlyTextContent = true
+    let isOnlyBlockContent = true
+    const nodes = isFragment(content) ? content : [content]
 
-    tr.replaceWith(from, to, 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) {
+      // if value is string, we can use it directly
+      // otherwise if it is an array, we have to join it
+      if (Array.isArray(value)) {
+        tr.insertText(value.map(v => v.text || '').join(''), from, to)
+      } else if (typeof value === 'object' && !!value && !!value.text) {
+        tr.insertText(value.text, from, to)
+      } else {
+        tr.insertText(value as string, from, to)
+      }
+    } else {
+      tr.replaceWith(from, to, content)
+    }
 
     // set cursor at end of inserted content
-    selectionToInsertionEnd(tr, tr.steps.length - 1, 1)
+    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)
+}

package/src/commands/keyboardShortcut.ts

@@ -1,6 +1,6 @@
 import { RawCommands } from '../types'
-
-const mac = typeof navigator !== 'undefined' ? /Mac/.test(navigator.platform) : false
+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

package/src/commands/lift.ts

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

package/src/commands/liftEmptyBlock.ts

@@ -1,4 +1,5 @@
-import { liftEmptyBlock as originalLiftEmptyBlock } from 'prosemirror-commands'
+import { liftEmptyBlock as originalLiftEmptyBlock } from '@tiptap/pm/commands'
+
 import { RawCommands } from '../types'
 
 declare module '@tiptap/core' {

package/src/commands/liftListItem.ts

@@ -1,7 +1,8 @@
-import { liftListItem as originalLiftListItem } from 'prosemirror-schema-list'
-import { NodeType } from 'prosemirror-model'
+import { NodeType } from '@tiptap/pm/model'
+import { liftListItem as originalLiftListItem } 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' {
       /**
        * Lift the list item into a wrapping list.
        */
-      liftListItem: (typeOrName: string | NodeType) => ReturnType,
+      liftListItem: (typeOrName: string | NodeType) => ReturnType
     }
   }
 }

package/src/commands/newlineInCode.ts

@@ -1,4 +1,5 @@
-import { newlineInCode as originalNewlineInCode } from 'prosemirror-commands'
+import { newlineInCode as originalNewlineInCode } from '@tiptap/pm/commands'
+
 import { RawCommands } from '../types'
 
 declare module '@tiptap/core' {
@@ -7,7 +8,7 @@ declare module '@tiptap/core' {
       /**
        * Add a newline character in code.
        */
-      newlineInCode: () => ReturnType,
+      newlineInCode: () => ReturnType
     }
   }
 }

package/src/commands/resetAttributes.ts

@@ -1,9 +1,10 @@
-import { NodeType, MarkType } from 'prosemirror-model'
-import getNodeType from '../helpers/getNodeType'
-import getMarkType from '../helpers/getMarkType'
-import getSchemaTypeNameByName from '../helpers/getSchemaTypeNameByName'
-import deleteProps from '../utilities/deleteProps'
+import { MarkType, NodeType } from '@tiptap/pm/model'
+
+import { getMarkType } from '../helpers/getMarkType'
+import { getNodeType } from '../helpers/getNodeType'
+import { getSchemaTypeNameByName } from '../helpers/getSchemaTypeNameByName'
 import { RawCommands } from '../types'
+import { deleteProps } from '../utilities/deleteProps'
 
 declare module '@tiptap/core' {
   interface Commands<ReturnType> {
@@ -11,7 +12,10 @@ declare module '@tiptap/core' {
       /**
        * Resets some node attributes to the default value.
        */
-      resetAttributes: (typeOrName: string | NodeType | MarkType, attributes: string | string[]) => ReturnType,
+      resetAttributes: (
+        typeOrName: string | NodeType | MarkType,
+        attributes: string | string[],
+      ) => ReturnType
     }
   }
 }
@@ -21,9 +25,7 @@ export const resetAttributes: RawCommands['resetAttributes'] = (typeOrName, attr
   let markType: MarkType | null = null
 
   const schemaType = getSchemaTypeNameByName(
-    typeof typeOrName === 'string'
-      ? typeOrName
-      : typeOrName.name,
+    typeof typeOrName === 'string' ? typeOrName : typeOrName.name,
     state.schema,
   )
 
@@ -49,7 +51,11 @@ export const resetAttributes: RawCommands['resetAttributes'] = (typeOrName, attr
         if (markType && node.marks.length) {
           node.marks.forEach(mark => {
             if (markType === mark.type) {
-              tr.addMark(pos, pos + node.nodeSize, markType.create(deleteProps(mark.attrs, attributes)))
+              tr.addMark(
+                pos,
+                pos + node.nodeSize,
+                markType.create(deleteProps(mark.attrs, attributes)),
+              )
             }
           })
         }

package/src/commands/selectAll.ts

@@ -1,4 +1,3 @@
-import { selectAll as originalSelectAll } from 'prosemirror-commands'
 import { RawCommands } from '../types'
 
 declare module '@tiptap/core' {
@@ -12,6 +11,9 @@ declare module '@tiptap/core' {
   }
 }
 
-export const selectAll: RawCommands['selectAll'] = () => ({ state, dispatch }) => {
-  return originalSelectAll(state, dispatch)
+export const selectAll: RawCommands['selectAll'] = () => ({ tr, commands }) => {
+  return commands.setTextSelection({
+    from: 0,
+    to: tr.doc.content.size,
+  })
 }

package/src/commands/selectNodeBackward.ts

@@ -1,4 +1,5 @@
-import { selectNodeBackward as originalSelectNodeBackward } from 'prosemirror-commands'
+import { selectNodeBackward as originalSelectNodeBackward } from '@tiptap/pm/commands'
+
 import { RawCommands } from '../types'
 
 declare module '@tiptap/core' {
@@ -7,7 +8,7 @@ declare module '@tiptap/core' {
       /**
        * Select a node backward.
        */
-      selectNodeBackward: () => ReturnType,
+      selectNodeBackward: () => ReturnType
     }
   }
 }

package/src/commands/selectNodeForward.ts

@@ -1,4 +1,5 @@
-import { selectNodeForward as originalSelectNodeForward } from 'prosemirror-commands'
+import { selectNodeForward as originalSelectNodeForward } from '@tiptap/pm/commands'
+
 import { RawCommands } from '../types'
 
 declare module '@tiptap/core' {
@@ -7,7 +8,7 @@ declare module '@tiptap/core' {
       /**
        * Select a node forward.
        */
-      selectNodeForward: () => ReturnType,
+      selectNodeForward: () => ReturnType
     }
   }
 }

package/src/commands/selectParentNode.ts

@@ -1,4 +1,5 @@
-import { selectParentNode as originalSelectParentNode } from 'prosemirror-commands'
+import { selectParentNode as originalSelectParentNode } from '@tiptap/pm/commands'
+
 import { RawCommands } from '../types'
 
 declare module '@tiptap/core' {
@@ -7,7 +8,7 @@ declare module '@tiptap/core' {
       /**
        * Select the parent node.
        */
-      selectParentNode: () => ReturnType,
+      selectParentNode: () => ReturnType
     }
   }
 }

package/src/commands/selectTextblockEnd.ts

@@ -0,0 +1,20 @@
+// @ts-ignore
+// TODO: add types to @types/prosemirror-commands
+import { selectTextblockEnd as originalSelectTextblockEnd } from '@tiptap/pm/commands'
+
+import { RawCommands } from '../types'
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    selectTextblockEnd: {
+      /**
+       * Moves the cursor to the end of current text block.
+       */
+      selectTextblockEnd: () => ReturnType
+    }
+  }
+}
+
+export const selectTextblockEnd: RawCommands['selectTextblockEnd'] = () => ({ state, dispatch }) => {
+  return originalSelectTextblockEnd(state, dispatch)
+}

package/src/commands/selectTextblockStart.ts

@@ -0,0 +1,20 @@
+// @ts-ignore
+// TODO: add types to @types/prosemirror-commands
+import { selectTextblockStart as originalSelectTextblockStart } from '@tiptap/pm/commands'
+
+import { RawCommands } from '../types'
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    selectTextblockStart: {
+      /**
+       * Moves the cursor to the start of current text block.
+       */
+      selectTextblockStart: () => ReturnType
+    }
+  }
+}
+
+export const selectTextblockStart: RawCommands['selectTextblockStart'] = () => ({ state, dispatch }) => {
+  return originalSelectTextblockStart(state, dispatch)
+}

package/src/commands/setContent.ts

@@ -1,7 +1,7 @@
-import { TextSelection } from 'prosemirror-state'
-import { ParseOptions } from 'prosemirror-model'
-import createDocument from '../helpers/createDocument'
-import { RawCommands, Content } from '../types'
+import { ParseOptions } from '@tiptap/pm/model'
+
+import { createDocument } from '../helpers/createDocument'
+import { Content, RawCommands } from '../types'
 
 declare module '@tiptap/core' {
   interface Commands<ReturnType> {
@@ -13,7 +13,7 @@ declare module '@tiptap/core' {
         content: Content,
         emitUpdate?: boolean,
         parseOptions?: ParseOptions,
-      ) => ReturnType,
+      ) => ReturnType
     }
   }
 }
@@ -21,12 +21,9 @@ declare module '@tiptap/core' {
 export const setContent: RawCommands['setContent'] = (content, emitUpdate = false, parseOptions = {}) => ({ tr, editor, dispatch }) => {
   const { doc } = tr
   const document = createDocument(content, editor.schema, parseOptions)
-  const selection = TextSelection.create(doc, 0, doc.content.size)
 
   if (dispatch) {
-    tr.setSelection(selection)
-      .replaceSelectionWith(document, false)
-      .setMeta('preventUpdate', !emitUpdate)
+    tr.replaceWith(0, doc.content.size, document).setMeta('preventUpdate', !emitUpdate)
   }
 
   return true