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

package/src/NodeView.ts

@@ -1,20 +1,20 @@
-import { Decoration, NodeView as ProseMirrorNodeView } from 'prosemirror-view'
-import { NodeSelection } from 'prosemirror-state'
-import { Node as ProseMirrorNode } from 'prosemirror-model'
+import { Node as ProseMirrorNode } from '@tiptap/pm/model'
+import { NodeSelection } from '@tiptap/pm/state'
+import { NodeView as ProseMirrorNodeView } from '@tiptap/pm/view'
+
 import { Editor as CoreEditor } from './Editor'
 import { Node } from './Node'
-import isiOS from './utilities/isiOS'
-import { NodeViewRendererProps, NodeViewRendererOptions } from './types'
+import { DecorationWithType, NodeViewRendererOptions, NodeViewRendererProps } from './types'
+import { isiOS } from './utilities/isiOS'
 
 export class NodeView<
   Component,
-  Editor extends CoreEditor = CoreEditor,
+  NodeEditor extends CoreEditor = CoreEditor,
   Options extends NodeViewRendererOptions = NodeViewRendererOptions,
 > implements ProseMirrorNodeView {
-
   component: Component
 
-  editor: Editor
+  editor: NodeEditor
 
   options: Options
 
@@ -22,7 +22,7 @@ export class NodeView<
 
   node: ProseMirrorNode
 
-  decorations: Decoration[]
+  decorations: DecorationWithType[]
 
   getPos: any
 
@@ -30,7 +30,7 @@ export class NodeView<
 
   constructor(component: Component, props: NodeViewRendererProps, options?: Partial<Options>) {
     this.component = component
-    this.editor = props.editor as Editor
+    this.editor = props.editor as NodeEditor
     this.options = {
       stopEvent: null,
       ignoreMutation: null,
@@ -38,7 +38,7 @@ export class NodeView<
     } as Options
     this.extension = props.extension
     this.node = props.node
-    this.decorations = props.decorations
+    this.decorations = props.decorations as DecorationWithType[]
     this.getPos = props.getPos
     this.mount()
   }
@@ -48,17 +48,17 @@ export class NodeView<
     return
   }
 
-  get dom(): Element | null {
-    return null
+  get dom(): HTMLElement {
+    return this.editor.view.dom as HTMLElement
   }
 
-  get contentDOM(): Element | null {
+  get contentDOM(): HTMLElement | null {
     return null
   }
 
   onDragStart(event: DragEvent) {
     const { view } = this.editor
-    const target = (event.target as HTMLElement)
+    const target = event.target as HTMLElement
 
     // get the drag handle element
     // `closest` is not available for text nodes so we may have to use its parent
@@ -66,11 +66,7 @@ export class NodeView<
       ? target.parentElement?.closest('[data-drag-handle]')
       : target.closest('[data-drag-handle]')
 
-    if (
-      !this.dom
-      || this.contentDOM?.contains(target)
-      || !dragHandle
-    ) {
+    if (!this.dom || this.contentDOM?.contains(target) || !dragHandle) {
       return
     }
 
@@ -82,8 +78,12 @@ export class NodeView<
       const domBox = this.dom.getBoundingClientRect()
       const handleBox = dragHandle.getBoundingClientRect()
 
-      x = handleBox.x - domBox.x + event.offsetX
-      y = handleBox.y - domBox.y + event.offsetY
+      // In React, we have to go through nativeEvent to reach offsetX/offsetY.
+      const offsetX = event.offsetX ?? (event as any).nativeEvent?.offsetX
+      const offsetY = event.offsetY ?? (event as any).nativeEvent?.offsetY
+
+      x = handleBox.x - domBox.x + offsetX
+      y = handleBox.y - domBox.y + offsetY
     }
 
     event.dataTransfer?.setDragImage(this.dom, x, y)
@@ -105,7 +105,7 @@ export class NodeView<
       return this.options.stopEvent({ event })
     }
 
-    const target = (event.target as HTMLElement)
+    const target = event.target as HTMLElement
     const isInElement = this.dom.contains(target) && !this.contentDOM?.contains(target)
 
     // any event from child nodes should be handled by ProseMirror
@@ -113,11 +113,12 @@ export class NodeView<
       return false
     }
 
-    const isInput = ['INPUT', 'BUTTON', 'SELECT', 'TEXTAREA'].includes(target.tagName)
-      || target.isContentEditable
+    const isDragEvent = event.type.startsWith('drag')
+    const isDropEvent = event.type === 'drop'
+    const isInput = ['INPUT', 'BUTTON', 'SELECT', 'TEXTAREA'].includes(target.tagName) || target.isContentEditable
 
     // any input event within node views should be ignored by ProseMirror
-    if (isInput) {
+    if (isInput && !isDropEvent && !isDragEvent) {
       return true
     }
 
@@ -129,7 +130,6 @@ export class NodeView<
     const isPasteEvent = event.type === 'paste'
     const isCutEvent = event.type === 'cut'
     const isClickEvent = event.type === 'mousedown'
-    const isDragEvent = event.type.startsWith('drag') || event.type === 'drop'
 
     // ProseMirror tries to drag selectable nodes
     // even if `draggable` is set to `false`
@@ -146,25 +146,41 @@ export class NodeView<
     // we have to store that dragging started
     if (isDraggable && isEditable && !isDragging && isClickEvent) {
       const dragHandle = target.closest('[data-drag-handle]')
-      const isValidDragHandle = dragHandle
-        && (this.dom === dragHandle || (this.dom.contains(dragHandle)))
+      const isValidDragHandle = dragHandle && (this.dom === dragHandle || this.dom.contains(dragHandle))
 
       if (isValidDragHandle) {
         this.isDragging = true
 
-        document.addEventListener('dragend', () => {
-          this.isDragging = false
-        }, { once: true })
-
-        document.addEventListener('mouseup', () => {
-          this.isDragging = false
-        }, { once: true })
+        document.addEventListener(
+          'dragend',
+          () => {
+            this.isDragging = false
+          },
+          { once: true },
+        )
+
+        document.addEventListener(
+          'drop',
+          () => {
+            this.isDragging = false
+          },
+          { once: true },
+        )
+
+        document.addEventListener(
+          'mouseup',
+          () => {
+            this.isDragging = false
+          },
+          { once: true },
+        )
       }
     }
 
     // these events are handled by prosemirror
     if (
       isDragging
+      || isDropEvent
       || isCopyEvent
       || isPasteEvent
       || isCutEvent
@@ -176,7 +192,7 @@ export class NodeView<
     return true
   }
 
-  ignoreMutation(mutation: MutationRecord | { type: 'selection', target: Element }) {
+  ignoreMutation(mutation: MutationRecord | { type: 'selection'; target: Element }) {
     if (!this.dom || !this.contentDOM) {
       return true
     }
@@ -200,7 +216,12 @@ export class NodeView<
     // this is because ProseMirror can’t preventDispatch on enter
     // this will lead to a re-render of the node view on enter
     // see: https://github.com/ueberdosis/tiptap/issues/1214
-    if (this.dom.contains(mutation.target) && mutation.type === 'childList' && isiOS()) {
+    if (
+      this.dom.contains(mutation.target)
+      && mutation.type === 'childList'
+      && isiOS()
+      && this.editor.isFocused
+    ) {
       const changedNodes = [
         ...Array.from(mutation.addedNodes),
         ...Array.from(mutation.removedNodes),

package/src/PasteRule.ts

@@ -0,0 +1,240 @@
+import { EditorState, Plugin } from '@tiptap/pm/state'
+
+import { CommandManager } from './CommandManager'
+import { Editor } from './Editor'
+import { createChainableState } from './helpers/createChainableState'
+import {
+  CanCommands,
+  ChainedCommands,
+  ExtendedRegExpMatchArray,
+  Range,
+  SingleCommands,
+} from './types'
+import { isNumber } from './utilities/isNumber'
+import { isRegExp } from './utilities/isRegExp'
+
+export type PasteRuleMatch = {
+  index: number
+  text: string
+  replaceWith?: string
+  match?: RegExpMatchArray
+  data?: Record<string, any>
+}
+
+export type PasteRuleFinder = RegExp | ((text: string) => PasteRuleMatch[] | null | undefined)
+
+export class PasteRule {
+  find: PasteRuleFinder
+
+  handler: (props: {
+    state: EditorState
+    range: Range
+    match: ExtendedRegExpMatchArray
+    commands: SingleCommands
+    chain: () => ChainedCommands
+    can: () => CanCommands
+  }) => void | null
+
+  constructor(config: {
+    find: PasteRuleFinder
+    handler: (props: {
+      state: EditorState
+      range: Range
+      match: ExtendedRegExpMatchArray
+      commands: SingleCommands
+      chain: () => ChainedCommands
+      can: () => CanCommands
+    }) => void | null
+  }) {
+    this.find = config.find
+    this.handler = config.handler
+  }
+}
+
+const pasteRuleMatcherHandler = (
+  text: string,
+  find: PasteRuleFinder,
+): ExtendedRegExpMatchArray[] => {
+  if (isRegExp(find)) {
+    return [...text.matchAll(find)]
+  }
+
+  const matches = find(text)
+
+  if (!matches) {
+    return []
+  }
+
+  return matches.map(pasteRuleMatch => {
+    const result: ExtendedRegExpMatchArray = [pasteRuleMatch.text]
+
+    result.index = pasteRuleMatch.index
+    result.input = text
+    result.data = pasteRuleMatch.data
+
+    if (pasteRuleMatch.replaceWith) {
+      if (!pasteRuleMatch.text.includes(pasteRuleMatch.replaceWith)) {
+        console.warn(
+          '[tiptap warn]: "pasteRuleMatch.replaceWith" must be part of "pasteRuleMatch.text".',
+        )
+      }
+
+      result.push(pasteRuleMatch.replaceWith)
+    }
+
+    return result
+  })
+}
+
+function run(config: {
+  editor: Editor
+  state: EditorState
+  from: number
+  to: number
+  rule: PasteRule
+}): boolean {
+  const {
+    editor, state, from, to, rule,
+  } = config
+
+  const { commands, chain, can } = new CommandManager({
+    editor,
+    state,
+  })
+
+  const handlers: (void | null)[] = []
+
+  state.doc.nodesBetween(from, to, (node, pos) => {
+    if (!node.isTextblock || node.type.spec.code) {
+      return
+    }
+
+    const resolvedFrom = Math.max(from, pos)
+    const resolvedTo = Math.min(to, pos + node.content.size)
+    const textToMatch = node.textBetween(resolvedFrom - pos, resolvedTo - pos, undefined, '\ufffc')
+
+    const matches = pasteRuleMatcherHandler(textToMatch, rule.find)
+
+    matches.forEach(match => {
+      if (match.index === undefined) {
+        return
+      }
+
+      const start = resolvedFrom + match.index + 1
+      const end = start + match[0].length
+      const range = {
+        from: state.tr.mapping.map(start),
+        to: state.tr.mapping.map(end),
+      }
+
+      const handler = rule.handler({
+        state,
+        range,
+        match,
+        commands,
+        chain,
+        can,
+      })
+
+      handlers.push(handler)
+    })
+  })
+
+  const success = handlers.every(handler => handler !== null)
+
+  return success
+}
+
+/**
+ * Create an paste rules plugin. When enabled, it will cause pasted
+ * text that matches any of the given rules to trigger the rule’s
+ * action.
+ */
+export function pasteRulesPlugin(props: { editor: Editor; rules: PasteRule[] }): Plugin[] {
+  const { editor, rules } = props
+  let dragSourceElement: Element | null = null
+  let isPastedFromProseMirror = false
+  let isDroppedFromProseMirror = false
+
+  const plugins = rules.map(rule => {
+    return new Plugin({
+      // we register a global drag handler to track the current drag source element
+      view(view) {
+        const handleDragstart = (event: DragEvent) => {
+          dragSourceElement = view.dom.parentElement?.contains(event.target as Element)
+            ? view.dom.parentElement
+            : null
+        }
+
+        window.addEventListener('dragstart', handleDragstart)
+
+        return {
+          destroy() {
+            window.removeEventListener('dragstart', handleDragstart)
+          },
+        }
+      },
+
+      props: {
+        handleDOMEvents: {
+          drop: view => {
+            isDroppedFromProseMirror = dragSourceElement === view.dom.parentElement
+
+            return false
+          },
+
+          paste: (view, event: Event) => {
+            const html = (event as ClipboardEvent).clipboardData?.getData('text/html')
+
+            isPastedFromProseMirror = !!html?.includes('data-pm-slice')
+
+            return false
+          },
+        },
+      },
+
+      appendTransaction: (transactions, oldState, state) => {
+        const transaction = transactions[0]
+        const isPaste = transaction.getMeta('uiEvent') === 'paste' && !isPastedFromProseMirror
+        const isDrop = transaction.getMeta('uiEvent') === 'drop' && !isDroppedFromProseMirror
+
+        if (!isPaste && !isDrop) {
+          return
+        }
+
+        // stop if there is no changed range
+        const from = oldState.doc.content.findDiffStart(state.doc.content)
+        const to = oldState.doc.content.findDiffEnd(state.doc.content)
+
+        if (!isNumber(from) || !to || from === to.b) {
+          return
+        }
+
+        // build a chainable state
+        // so we can use a single transaction for all paste rules
+        const tr = state.tr
+        const chainableState = createChainableState({
+          state,
+          transaction: tr,
+        })
+
+        const handler = run({
+          editor,
+          state: chainableState,
+          from: Math.max(from - 1, 0),
+          to: to.b - 1,
+          rule,
+        })
+
+        // stop if there are no changes
+        if (!handler || !tr.steps.length) {
+          return
+        }
+
+        return tr
+      },
+    })
+  })
+
+  return plugins
+}

package/src/Tracker.ts

@@ -1,12 +1,11 @@
-import { Transaction } from 'prosemirror-state'
+import { Transaction } from '@tiptap/pm/state'
 
 export interface TrackerResult {
-  position: number,
-  deleted: boolean,
+  position: number
+  deleted: boolean
 }
 
 export class Tracker {
-
   transaction: Transaction
 
   currentStep: number
@@ -22,9 +21,7 @@ export class Tracker {
     const mappedPosition = this.transaction.steps
       .slice(this.currentStep)
       .reduce((newPosition, step) => {
-        const mapResult = step
-          .getMap()
-          .mapResult(newPosition)
+        const mapResult = step.getMap().mapResult(newPosition)
 
         if (mapResult.deleted) {
           deleted = true
@@ -38,5 +35,4 @@ export class Tracker {
       deleted,
     }
   }
-
 }

package/src/commands/blur.ts

@@ -15,6 +15,10 @@ export const blur: RawCommands['blur'] = () => ({ editor, view }) => {
   requestAnimationFrame(() => {
     if (!editor.isDestroyed) {
       (view.dom as HTMLElement).blur()
+
+      // Browsers should remove the caret on blur but safari does not.
+      // See: https://github.com/ueberdosis/tiptap/issues/2405
+      window?.getSelection()?.removeAllRanges()
     }
   })
 

package/src/commands/clearNodes.ts

@@ -1,4 +1,5 @@
-import { liftTarget } from 'prosemirror-transform'
+import { liftTarget } from '@tiptap/pm/transform'
+
 import { RawCommands } from '../types'
 
 declare module '@tiptap/core' {
@@ -16,15 +17,20 @@ 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 (!dispatch) {
+    return true
+  }
+
+  ranges.forEach(({ $from, $to }) => {
+    state.doc.nodesBetween($from.pos, $to.pos, (node, pos) => {
       if (node.type.isText) {
         return
       }
 
-      const $fromPos = tr.doc.resolve(tr.mapping.map(pos))
-      const $toPos = tr.doc.resolve(tr.mapping.map(pos + node.nodeSize))
-      const nodeRange = $fromPos.blockRange($toPos)
+      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
@@ -32,13 +38,13 @@ export const clearNodes: RawCommands['clearNodes'] = () => ({ state, tr, dispatc
 
       const targetLiftDepth = liftTarget(nodeRange)
 
-      if (node.type.isTextblock && dispatch) {
-        const { defaultType } = $fromPos.parent.contentMatchAt($fromPos.index())
+      if (node.type.isTextblock) {
+        const { defaultType } = $mappedFrom.parent.contentMatchAt($mappedFrom.index())
 
         tr.setNodeMarkup(nodeRange.start, defaultType)
       }
 
-      if ((targetLiftDepth || targetLiftDepth === 0) && dispatch) {
+      if (targetLiftDepth || targetLiftDepth === 0) {
         tr.lift(nodeRange, targetLiftDepth)
       }
     })

package/src/commands/createParagraphNear.ts

@@ -1,4 +1,5 @@
-import { createParagraphNear as originalCreateParagraphNear } from 'prosemirror-commands'
+import { createParagraphNear as originalCreateParagraphNear } from '@tiptap/pm/commands'
+
 import { RawCommands } from '../types'
 
 declare module '@tiptap/core' {
@@ -7,7 +8,7 @@ declare module '@tiptap/core' {
       /**
        * Create a paragraph nearby.
        */
-      createParagraphNear: () => ReturnType,
+      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

@@ -1,5 +1,6 @@
-import { NodeType } from 'prosemirror-model'
-import getNodeType from '../helpers/getNodeType'
+import { NodeType } from '@tiptap/pm/model'
+
+import { getNodeType } from '../helpers/getNodeType'
 import { RawCommands } from '../types'
 
 declare module '@tiptap/core' {

package/src/commands/deleteRange.ts

@@ -1,4 +1,4 @@
-import { RawCommands, Range } from '../types'
+import { Range, RawCommands } from '../types'
 
 declare module '@tiptap/core' {
   interface Commands<ReturnType> {

package/src/commands/deleteSelection.ts

@@ -1,4 +1,5 @@
-import { deleteSelection as originalDeleteSelection } from 'prosemirror-commands'
+import { deleteSelection as originalDeleteSelection } from '@tiptap/pm/commands'
+
 import { RawCommands } from '../types'
 
 declare module '@tiptap/core' {
@@ -7,7 +8,7 @@ declare module '@tiptap/core' {
       /**
        * Delete the selection, if there is one.
        */
-      deleteSelection: () => ReturnType,
+      deleteSelection: () => ReturnType
     }
   }
 }

package/src/commands/exitCode.ts

@@ -1,4 +1,5 @@
-import { exitCode as originalExitCode } from 'prosemirror-commands'
+import { exitCode as originalExitCode } from '@tiptap/pm/commands'
+
 import { RawCommands } from '../types'
 
 declare module '@tiptap/core' {
@@ -7,7 +8,7 @@ declare module '@tiptap/core' {
       /**
        * Exit from a code block.
        */
-      exitCode: () => ReturnType,
+      exitCode: () => ReturnType
     }
   }
 }

package/src/commands/extendMarkRange.ts

@@ -1,8 +1,9 @@
-import { TextSelection } from 'prosemirror-state'
-import { MarkType } from 'prosemirror-model'
+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'
-import getMarkType from '../helpers/getMarkType'
-import getMarkRange from '../helpers/getMarkRange'
 
 declare module '@tiptap/core' {
   interface Commands<ReturnType> {
@@ -10,7 +11,10 @@ declare module '@tiptap/core' {
       /**
        * Extends the text selection to the current mark.
        */
-      extendMarkRange: (typeOrName: string | MarkType, attributes?: Record<string, any>) => ReturnType,
+      extendMarkRange: (
+        typeOrName: string | MarkType,
+        attributes?: Record<string, any>,
+      ) => ReturnType
     }
   }
 }