@blade-hq/agent-react 2612.0.0-beta.5 → 2612.0.0-beta.7

package/node_modules/@tiptap/core/src/NodeView.ts

@@ -0,0 +1,339 @@
+import { NodeSelection } from '@tiptap/pm/state'
+import type { NodeView as ProseMirrorNodeView, ViewMutationRecord } from '@tiptap/pm/view'
+
+import type { Editor as CoreEditor } from './Editor.js'
+import type { DecorationWithType, NodeViewRendererOptions, NodeViewRendererProps } from './types.js'
+import { isAndroid } from './utilities/isAndroid.js'
+import { isiOS } from './utilities/isiOS.js'
+
+/**
+ * Node views are used to customize the rendered DOM structure of a node.
+ * @see https://tiptap.dev/guide/node-views
+ */
+export class NodeView<
+  Component,
+  NodeEditor extends CoreEditor = CoreEditor,
+  Options extends NodeViewRendererOptions = NodeViewRendererOptions,
+> implements ProseMirrorNodeView
+{
+  component: Component
+
+  editor: NodeEditor
+
+  options: Options
+
+  extension: NodeViewRendererProps['extension']
+
+  node: NodeViewRendererProps['node']
+
+  decorations: NodeViewRendererProps['decorations']
+
+  innerDecorations: NodeViewRendererProps['innerDecorations']
+
+  view: NodeViewRendererProps['view']
+
+  getPos: NodeViewRendererProps['getPos']
+
+  HTMLAttributes: NodeViewRendererProps['HTMLAttributes']
+
+  isDragging = false
+
+  constructor(component: Component, props: NodeViewRendererProps, options?: Partial<Options>) {
+    this.component = component
+    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 as DecorationWithType[]
+    this.innerDecorations = props.innerDecorations
+    this.view = props.view
+    this.HTMLAttributes = props.HTMLAttributes
+    this.getPos = props.getPos
+    this.mount()
+  }
+
+  mount() {
+    // eslint-disable-next-line
+    return
+  }
+
+  get dom(): HTMLElement {
+    return this.editor.view.dom as HTMLElement
+  }
+
+  get contentDOM(): HTMLElement | null {
+    return null
+  }
+
+  onDragStart(event: DragEvent) {
+    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
+    }
+
+    let x = 0
+    let y = 0
+
+    // 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
+    }
+
+    const clonedNode = this.dom.cloneNode(true) as HTMLElement
+
+    // Preserve the visual size of the original when using the clone as
+    // the drag image.
+    try {
+      const domBox = this.dom.getBoundingClientRect()
+      clonedNode.style.width = `${Math.round(domBox.width)}px`
+      clonedNode.style.height = `${Math.round(domBox.height)}px`
+      clonedNode.style.boxSizing = 'border-box'
+      // Ensure the clone doesn't capture pointer events while offscreen
+      clonedNode.style.pointerEvents = 'none'
+    } catch {
+      // ignore measurement errors (e.g. if element not in DOM)
+    }
+
+    // Some browsers (notably Safari) require the element passed to
+    // setDragImage to be present in the DOM. Using a detached node can
+    // cause the drag to immediately end.
+    let dragImageWrapper: HTMLElement | null = null
+
+    try {
+      dragImageWrapper = document.createElement('div')
+      dragImageWrapper.style.position = 'absolute'
+      dragImageWrapper.style.top = '-9999px'
+      dragImageWrapper.style.left = '-9999px'
+      dragImageWrapper.style.pointerEvents = 'none'
+      dragImageWrapper.appendChild(clonedNode)
+      document.body.appendChild(dragImageWrapper)
+
+      event.dataTransfer?.setDragImage(clonedNode, x, y)
+    } finally {
+      // Remove the wrapper on the next tick so the browser can use the
+      // element as the drag image. A 0ms timeout is enough in practice.
+      if (dragImageWrapper) {
+        setTimeout(() => {
+          try {
+            dragImageWrapper?.remove()
+          } catch {
+            // ignore removal errors
+          }
+        }, 0)
+      }
+    }
+
+    const pos = this.getPos()
+
+    if (typeof pos !== 'number') {
+      return
+    }
+    // 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, pos)
+    const transaction = view.state.tr.setSelection(selection)
+
+    view.dispatch(transaction)
+  }
+
+  stopEvent(event: Event) {
+    if (!this.dom) {
+      return false
+    }
+
+    if (typeof this.options.stopEvent === 'function') {
+      return this.options.stopEvent({ event })
+    }
+
+    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
+    if (!isInElement) {
+      return false
+    }
+
+    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 && !isDropEvent && !isDragEvent) {
+      return true
+    }
+
+    const { isEditable } = this.editor
+    const { isDragging } = this
+    const isDraggable = !!this.node.type.spec.draggable
+    const isSelectable = NodeSelection.isSelectable(this.node)
+    const isCopyEvent = event.type === 'copy'
+    const isPasteEvent = event.type === 'paste'
+    const isCutEvent = event.type === 'cut'
+    const isClickEvent = event.type === 'mousedown'
+
+    // ProseMirror tries to drag selectable nodes
+    // even if `draggable` is set to `false`
+    // this fix prevents that
+    if (!isDraggable && isSelectable && isDragEvent && event.target === this.dom) {
+      event.preventDefault()
+    }
+
+    if (isDraggable && isDragEvent && !isDragging && event.target === this.dom) {
+      event.preventDefault()
+      return false
+    }
+
+    // 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))
+
+      if (isValidDragHandle) {
+        this.isDragging = 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 || (isClickEvent && isSelectable)) {
+      return false
+    }
+
+    return true
+  }
+
+  /**
+   * Called when a DOM [mutation](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver) or a selection change happens within the view.
+   * @return `false` if the editor should re-read the selection or re-parse the range around the mutation
+   * @return `true` if it can safely be ignored.
+   */
+  ignoreMutation(mutation: ViewMutationRecord) {
+    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
+    }
+
+    // try to prevent a bug on iOS and Android 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
+    // see: https://github.com/ueberdosis/tiptap/issues/2534
+    if (
+      this.dom.contains(mutation.target) &&
+      mutation.type === 'childList' &&
+      (isiOS() || isAndroid()) &&
+      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
+    }
+
+    // ProseMirror should handle any changes within contentDOM
+    if (this.contentDOM.contains(mutation.target)) {
+      return false
+    }
+
+    return true
+  }
+
+  /**
+   * Update the attributes of the prosemirror node.
+   */
+  updateAttributes(attributes: Record<string, any>): void {
+    this.editor.commands.command(({ tr }) => {
+      const pos = this.getPos()
+
+      if (typeof pos !== 'number') {
+        return false
+      }
+
+      tr.setNodeMarkup(pos, undefined, {
+        ...this.node.attrs,
+        ...attributes,
+      })
+
+      return true
+    })
+  }
+
+  /**
+   * Delete the node.
+   */
+  deleteNode(): void {
+    const from = this.getPos()
+
+    if (typeof from !== 'number') {
+      return
+    }
+    const to = from + this.node.nodeSize
+
+    this.editor.commands.deleteRange({ from, to })
+  }
+}

package/node_modules/@tiptap/core/src/PasteRule.ts

@@ -0,0 +1,373 @@
+import type { Node as ProseMirrorNode } from '@tiptap/pm/model'
+import { Fragment } from '@tiptap/pm/model'
+import type { EditorState } from '@tiptap/pm/state'
+import { Plugin } from '@tiptap/pm/state'
+
+import { CommandManager } from './CommandManager.js'
+import type { Editor } from './Editor.js'
+import { createChainableState } from './helpers/createChainableState.js'
+import { getHTMLFromFragment } from './helpers/getHTMLFromFragment.js'
+import type { CanCommands, ChainedCommands, ExtendedRegExpMatchArray, Range, SingleCommands } from './types.js'
+import { isNumber } from './utilities/isNumber.js'
+import { isRegExp } from './utilities/isRegExp.js'
+
+export type PasteRuleMatch = {
+  index: number
+  text: string
+  replaceWith?: string
+  match?: RegExpMatchArray
+  data?: Record<string, any>
+}
+
+export type PasteRuleFinder =
+  | RegExp
+  | ((text: string, event?: ClipboardEvent | null) => PasteRuleMatch[] | null | undefined)
+
+/**
+ * Paste rules are used to react to pasted content.
+ * @see https://tiptap.dev/docs/editor/extensions/custom-extensions/extend-existing#paste-rules
+ */
+export class PasteRule {
+  find: PasteRuleFinder
+
+  handler: (props: {
+    state: EditorState
+    range: Range
+    match: ExtendedRegExpMatchArray
+    commands: SingleCommands
+    chain: () => ChainedCommands
+    can: () => CanCommands
+    pasteEvent: ClipboardEvent | null
+    dropEvent: DragEvent | null
+  }) => void | null
+
+  constructor(config: {
+    find: PasteRuleFinder
+    handler: (props: {
+      can: () => CanCommands
+      chain: () => ChainedCommands
+      commands: SingleCommands
+      dropEvent: DragEvent | null
+      match: ExtendedRegExpMatchArray
+      pasteEvent: ClipboardEvent | null
+      range: Range
+      state: EditorState
+    }) => void | null
+  }) {
+    this.find = config.find
+    this.handler = config.handler
+  }
+}
+
+const pasteRuleMatcherHandler = (
+  text: string,
+  find: PasteRuleFinder,
+  event?: ClipboardEvent | null,
+): ExtendedRegExpMatchArray[] => {
+  if (isRegExp(find)) {
+    return [...text.matchAll(find)]
+  }
+
+  const matches = find(text, event)
+
+  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
+  pasteEvent: ClipboardEvent | null
+  dropEvent: DragEvent | null
+}): boolean {
+  const { editor, state, from, to, rule, pasteEvent, dropEvent } = config
+
+  const { commands, chain, can } = new CommandManager({
+    editor,
+    state,
+  })
+
+  const handlers: (void | null)[] = []
+
+  state.doc.nodesBetween(from, to, (node, pos) => {
+    // Skip code blocks and non-textual nodes.
+    // Be defensive: `node` may be a Fragment without a `type`. Only text,
+    // inline, or textblock nodes are processed by paste rules.
+    if (node.type?.spec?.code || !(node.isText || node.isTextblock || node.isInline)) {
+      return
+    }
+
+    // For textblock and inline/text nodes, compute the range relative to the node.
+    // Prefer `node.nodeSize` when available (some Node shapes expose this),
+    // otherwise fall back to `node.content?.size`. Default to 0 if neither exists.
+    const contentSize = node.content?.size ?? node.nodeSize ?? 0
+    const resolvedFrom = Math.max(from, pos)
+    const resolvedTo = Math.min(to, pos + contentSize)
+
+    // If the resolved range is empty or invalid for this node, skip it. This
+    // avoids calling `textBetween` with start > end which can cause internal
+    // Fragment/Node traversal to access undefined `nodeSize` values.
+    if (resolvedFrom >= resolvedTo) {
+      return
+    }
+
+    const textToMatch = node.isText
+      ? node.text || ''
+      : node.textBetween(resolvedFrom - pos, resolvedTo - pos, undefined, '\ufffc')
+
+    const matches = pasteRuleMatcherHandler(textToMatch, rule.find, pasteEvent)
+
+    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,
+        pasteEvent,
+        dropEvent,
+      })
+
+      handlers.push(handler)
+    })
+  })
+
+  const success = handlers.every(handler => handler !== null)
+
+  return success
+}
+
+// When dragging across editors, must get another editor instance to delete selection content.
+let tiptapDragFromOtherEditor: Editor | null = null
+
+const createClipboardPasteEvent = (text: string) => {
+  const event = new ClipboardEvent('paste', {
+    clipboardData: new DataTransfer(),
+  })
+
+  event.clipboardData?.setData('text/html', text)
+
+  return event
+}
+
+/**
+ * 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
+  let pasteEvent = typeof ClipboardEvent !== 'undefined' ? new ClipboardEvent('paste') : null
+  let dropEvent: DragEvent | null
+
+  try {
+    dropEvent = typeof DragEvent !== 'undefined' ? new DragEvent('drop') : null
+  } catch {
+    dropEvent = null
+  }
+
+  const processEvent = ({
+    state,
+    from,
+    to,
+    rule,
+    pasteEvt,
+  }: {
+    state: EditorState
+    from: number
+    to: { b: number }
+    rule: PasteRule
+    pasteEvt: ClipboardEvent | null
+  }) => {
+    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,
+      pasteEvent: pasteEvt,
+      dropEvent,
+    })
+
+    if (!handler || !tr.steps.length) {
+      return
+    }
+
+    try {
+      dropEvent = typeof DragEvent !== 'undefined' ? new DragEvent('drop') : null
+    } catch {
+      dropEvent = null
+    }
+    pasteEvent = typeof ClipboardEvent !== 'undefined' ? new ClipboardEvent('paste') : null
+
+    return tr
+  }
+
+  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
+
+          if (dragSourceElement) {
+            tiptapDragFromOtherEditor = editor
+          }
+        }
+
+        const handleDragend = () => {
+          if (tiptapDragFromOtherEditor) {
+            tiptapDragFromOtherEditor = null
+          }
+        }
+
+        window.addEventListener('dragstart', handleDragstart)
+        window.addEventListener('dragend', handleDragend)
+
+        return {
+          destroy() {
+            window.removeEventListener('dragstart', handleDragstart)
+            window.removeEventListener('dragend', handleDragend)
+          },
+        }
+      },
+
+      props: {
+        handleDOMEvents: {
+          drop: (view, event: Event) => {
+            isDroppedFromProseMirror = dragSourceElement === view.dom.parentElement
+            dropEvent = event as DragEvent
+
+            if (!isDroppedFromProseMirror) {
+              const dragFromOtherEditor = tiptapDragFromOtherEditor
+
+              if (dragFromOtherEditor?.isEditable) {
+                // setTimeout to avoid the wrong content after drop, timeout arg can't be empty or 0
+                setTimeout(() => {
+                  const selection = dragFromOtherEditor.state.selection
+
+                  if (selection) {
+                    dragFromOtherEditor.commands.deleteRange({ from: selection.from, to: selection.to })
+                  }
+                }, 10)
+              }
+            }
+            return false
+          },
+
+          paste: (_view, event: Event) => {
+            const html = (event as ClipboardEvent).clipboardData?.getData('text/html')
+
+            pasteEvent = event as ClipboardEvent
+
+            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 PasteRule is triggered by insertContent()
+        const simulatedPasteMeta = transaction.getMeta('applyPasteRules') as
+          | undefined
+          | { from: number; text: string | ProseMirrorNode | Fragment }
+        const isSimulatedPaste = !!simulatedPasteMeta
+
+        if (!isPaste && !isDrop && !isSimulatedPaste) {
+          return
+        }
+
+        // Handle simulated paste
+        if (isSimulatedPaste) {
+          let { text } = simulatedPasteMeta
+
+          if (typeof text === 'string') {
+            text = text as string
+          } else {
+            text = getHTMLFromFragment(Fragment.from(text), state.schema)
+          }
+
+          const { from } = simulatedPasteMeta
+          const to = from + text.length
+
+          const pasteEvt = createClipboardPasteEvent(text)
+
+          return processEvent({
+            rule,
+            state,
+            from,
+            to: { b: to },
+            pasteEvt,
+          })
+        }
+
+        // handle actual paste/drop
+        const from = oldState.doc.content.findDiffStart(state.doc.content)
+        const to = oldState.doc.content.findDiffEnd(state.doc.content)
+
+        // stop if there is no changed range
+        if (!isNumber(from) || !to || from === to.b) {
+          return
+        }
+
+        return processEvent({
+          rule,
+          state,
+          from,
+          to,
+          pasteEvt: pasteEvent,
+        })
+      },
+    })
+  })
+
+  return plugins
+}