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

package/src/NodeView.ts

@@ -1,43 +1,44 @@
-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 { NodeViewRendererProps } from './types'
-
-interface NodeViewRendererOptions {
-  stopEvent: ((event: Event) => boolean) | null,
-  update: ((node: ProseMirrorNode, decorations: Decoration[]) => boolean) | null,
-}
-
-export class NodeView<Component, Editor extends CoreEditor = CoreEditor> implements ProseMirrorNodeView {
-
+import { DecorationWithType, NodeViewRendererOptions, NodeViewRendererProps } from './types'
+import { isiOS } from './utilities/isiOS'
+
+export class NodeView<
+  Component,
+  NodeEditor extends CoreEditor = CoreEditor,
+  Options extends NodeViewRendererOptions = NodeViewRendererOptions,
+> implements ProseMirrorNodeView {
   component: Component
 
-  editor: Editor
+  editor: NodeEditor
+
+  options: Options
 
   extension: Node
 
   node: ProseMirrorNode
 
-  decorations: Decoration[]
+  decorations: DecorationWithType[]
 
   getPos: any
 
   isDragging = false
 
-  options: NodeViewRendererOptions = {
-    stopEvent: null,
-    update: null,
-  }
-
-  constructor(component: Component, props: NodeViewRendererProps, options?: Partial<NodeViewRendererOptions>) {
+  constructor(component: Component, props: NodeViewRendererProps, options?: Partial<Options>) {
     this.component = component
-    this.options = { ...this.options, ...options }
-    this.editor = props.editor as Editor
+    this.editor = props.editor as NodeEditor
+    this.options = {
+      stopEvent: null,
+      ignoreMutation: null,
+      ...options,
+    } 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()
   }
@@ -47,29 +48,48 @@ export class NodeView<Component, Editor extends CoreEditor = CoreEditor> impleme
     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) {
-    if (!this.dom) {
+    const { view } = this.editor
+    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
+    const dragHandle = target.nodeType === 3
+      ? target.parentElement?.closest('[data-drag-handle]')
+      : target.closest('[data-drag-handle]')
+
+    if (!this.dom || this.contentDOM?.contains(target) || !dragHandle) {
       return
     }
 
-    const { view } = this.editor
-    const target = (event.target as HTMLElement)
+    let x = 0
+    let y = 0
 
-    if (this.contentDOM?.contains(target)) {
-      return
+    // calculate offset for drag element if we use a different drag handle element
+    if (this.dom !== dragHandle) {
+      const domBox = this.dom.getBoundingClientRect()
+      const handleBox = dragHandle.getBoundingClientRect()
+
+      // 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
     }
 
-    // sometimes `event.target` is not the `dom` element
-    event.dataTransfer?.setDragImage(this.dom, 0, 0)
+    event.dataTransfer?.setDragImage(this.dom, x, y)
 
+    // we need to tell ProseMirror that we want to move the whole node
+    // so we create a NodeSelection
     const selection = NodeSelection.create(view.state.doc, this.getPos())
     const transaction = view.state.tr.setSelection(selection)
 
@@ -82,10 +102,10 @@ export class NodeView<Component, Editor extends CoreEditor = CoreEditor> impleme
     }
 
     if (typeof this.options.stopEvent === 'function') {
-      return this.options.stopEvent(event)
+      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
@@ -93,11 +113,12 @@ export class NodeView<Component, Editor extends CoreEditor = CoreEditor> impleme
       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
     }
 
@@ -109,7 +130,6 @@ export class NodeView<Component, Editor extends CoreEditor = CoreEditor> impleme
     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`
@@ -126,25 +146,41 @@ export class NodeView<Component, Editor extends CoreEditor = CoreEditor> impleme
     // 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
@@ -156,38 +192,79 @@ export class NodeView<Component, Editor extends CoreEditor = CoreEditor> impleme
     return true
   }
 
-  ignoreMutation(mutation: MutationRecord | { type: 'selection', target: Element }) {
-    if (mutation.type === 'selection') {
-      if (this.node.isLeaf) {
-        return true
-      }
+  ignoreMutation(mutation: MutationRecord | { type: 'selection'; target: Element }) {
+    if (!this.dom || !this.contentDOM) {
+      return true
+    }
 
+    if (typeof this.options.ignoreMutation === 'function') {
+      return this.options.ignoreMutation({ mutation })
+    }
+
+    // a leaf/atom node is like a black box for ProseMirror
+    // and should be fully handled by the node view
+    if (this.node.isLeaf || this.node.isAtom) {
+      return true
+    }
+
+    // ProseMirror should handle any selections
+    if (mutation.type === 'selection') {
       return false
     }
 
-    if (!this.contentDOM) {
+    // try to prevent a bug on iOS that will break node views on enter
+    // 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()
+      && this.editor.isFocused
+    ) {
+      const changedNodes = [
+        ...Array.from(mutation.addedNodes),
+        ...Array.from(mutation.removedNodes),
+      ] as HTMLElement[]
+
+      // we’ll check if every changed node is contentEditable
+      // to make sure it’s probably mutated by ProseMirror
+      if (changedNodes.every(node => node.isContentEditable)) {
+        return false
+      }
+    }
+
+    // we will allow mutation contentDOM with attributes
+    // so we can for example adding classes within our node view
+    if (this.contentDOM === mutation.target && mutation.type === 'attributes') {
       return true
     }
 
-    const contentDOMHasChanged = !this.contentDOM.contains(mutation.target)
-      || this.contentDOM === mutation.target
+    // ProseMirror should handle any changes within contentDOM
+    if (this.contentDOM.contains(mutation.target)) {
+      return false
+    }
 
-    return contentDOMHasChanged
+    return true
   }
 
   updateAttributes(attributes: {}) {
-    if (!this.editor.view.editable) {
-      return
-    }
+    this.editor.commands.command(({ tr }) => {
+      const pos = this.getPos()
 
-    const { state } = this.editor.view
-    const pos = this.getPos()
-    const transaction = state.tr.setNodeMarkup(pos, undefined, {
-      ...this.node.attrs,
-      ...attributes,
-    })
+      tr.setNodeMarkup(pos, undefined, {
+        ...this.node.attrs,
+        ...attributes,
+      })
 
-    this.editor.view.dispatch(transaction)
+      return true
+    })
   }
 
+  deleteNode(): void {
+    const from = this.getPos()
+    const to = from + this.node.nodeSize
+
+    this.editor.commands.deleteRange({ from, to })
+  }
 }

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

@@ -0,0 +1,38 @@
+import { Transaction } from '@tiptap/pm/state'
+
+export interface TrackerResult {
+  position: number
+  deleted: boolean
+}
+
+export class Tracker {
+  transaction: Transaction
+
+  currentStep: number
+
+  constructor(transaction: Transaction) {
+    this.transaction = transaction
+    this.currentStep = this.transaction.steps.length
+  }
+
+  map(position: number): TrackerResult {
+    let deleted = false
+
+    const mappedPosition = this.transaction.steps
+      .slice(this.currentStep)
+      .reduce((newPosition, step) => {
+        const mapResult = step.getMap().mapResult(newPosition)
+
+        if (mapResult.deleted) {
+          deleted = true
+        }
+
+        return mapResult.pos
+      }, position)
+
+    return {
+      position: mappedPosition,
+      deleted,
+    }
+  }
+}

package/src/commands/blur.ts

@@ -1,20 +1,26 @@
-import { Command, RawCommands } from '../types'
+import { RawCommands } from '../types'
 
 declare module '@tiptap/core' {
-  interface Commands {
+  interface Commands<ReturnType> {
     blur: {
       /**
        * Removes focus from the editor.
        */
-      blur: () => Command,
+      blur: () => ReturnType,
     }
   }
 }
 
-export const blur: RawCommands['blur'] = () => ({ view }) => {
-  const element = view.dom as HTMLElement
+export const blur: RawCommands['blur'] = () => ({ editor, view }) => {
+  requestAnimationFrame(() => {
+    if (!editor.isDestroyed) {
+      (view.dom as HTMLElement).blur()
 
-  element.blur()
+      // Browsers should remove the caret on blur but safari does not.
+      // See: https://github.com/ueberdosis/tiptap/issues/2405
+      window?.getSelection()?.removeAllRanges()
+    }
+  })
 
   return true
 }

package/src/commands/clearContent.ts

@@ -1,12 +1,12 @@
-import { Command, RawCommands } from '../types'
+import { RawCommands } from '../types'
 
 declare module '@tiptap/core' {
-  interface Commands {
+  interface Commands<ReturnType> {
     clearContent: {
       /**
        * Clear the whole document.
        */
-      clearContent: (emitUpdate: Boolean) => Command,
+      clearContent: (emitUpdate?: boolean) => ReturnType,
     }
   }
 }