@tiptap/core 3.21.0 → 3.22.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tiptap/core",
   "description": "headless rich text editor",
-  "version": "3.21.0",
+  "version": "3.22.1",
   "homepage": "https://tiptap.dev",
   "keywords": [
     "tiptap",
@@ -52,10 +52,10 @@
     "jsx-dev-runtime"
   ],
   "devDependencies": {
-    "@tiptap/pm": "^3.21.0"
+    "@tiptap/pm": "^3.22.1"
   },
   "peerDependencies": {
-    "@tiptap/pm": "^3.21.0"
+    "@tiptap/pm": "^3.22.1"
   },
   "repository": {
     "type": "git",

package/src/NodeView.ts

@@ -173,6 +173,7 @@ export class NodeView<
     }
 
     const isDragEvent = event.type.startsWith('drag')
+    const isDragOverEnterEvent = event.type === 'dragover' || event.type === 'dragenter'
     const isDropEvent = event.type === 'drop'
     const isInput = ['INPUT', 'BUTTON', 'SELECT', 'TEXTAREA'].includes(target.tagName) || target.isContentEditable
 
@@ -237,7 +238,15 @@ export class NodeView<
     }
 
     // these events are handled by prosemirror
-    if (isDragging || isDropEvent || isCopyEvent || isPasteEvent || isCutEvent || (isClickEvent && isSelectable)) {
+    if (
+      isDragging ||
+      isDragOverEnterEvent ||
+      isDropEvent ||
+      isCopyEvent ||
+      isPasteEvent ||
+      isCutEvent ||
+      (isClickEvent && isSelectable)
+    ) {
       return false
     }
 

package/src/__tests__/htmlEntities.test.ts

@@ -0,0 +1,55 @@
+import { describe, expect, it } from 'vitest'
+
+import { decodeHtmlEntities, encodeHtmlEntities } from '../utilities/htmlEntities.js'
+
+describe('decodeHtmlEntities', () => {
+  it('decodes &lt; to <', () => {
+    expect(decodeHtmlEntities('&lt;div&gt;')).toBe('<div>')
+  })
+
+  it('decodes &amp; to &', () => {
+    expect(decodeHtmlEntities('a &amp; b')).toBe('a & b')
+  })
+
+  it('decodes &quot; to "', () => {
+    expect(decodeHtmlEntities('&quot;hello&quot;')).toBe('"hello"')
+  })
+
+  it('handles doubly-encoded sequences like &amp;lt;', () => {
+    expect(decodeHtmlEntities('&amp;lt;')).toBe('&lt;')
+  })
+
+  it('returns plain text unchanged', () => {
+    expect(decodeHtmlEntities('hello world')).toBe('hello world')
+  })
+})
+
+describe('encodeHtmlEntities', () => {
+  it('encodes < to &lt;', () => {
+    expect(encodeHtmlEntities('<div>')).toBe('&lt;div&gt;')
+  })
+
+  it('encodes & to &amp;', () => {
+    expect(encodeHtmlEntities('a & b')).toBe('a &amp; b')
+  })
+
+  it('does not encode " (quotes are valid in markdown)', () => {
+    expect(encodeHtmlEntities('"hello"')).toBe('"hello"')
+  })
+
+  it('returns plain text unchanged', () => {
+    expect(encodeHtmlEntities('hello world')).toBe('hello world')
+  })
+})
+
+describe('roundtrip', () => {
+  it.each(['<div>', 'a & b', 'x < y & y > z'])('encode then decode roundtrips: %s', input => {
+    expect(decodeHtmlEntities(encodeHtmlEntities(input))).toBe(input)
+  })
+
+  it('decode is a superset of encode – &quot; decodes but " is not encoded', () => {
+    // " passes through encode unchanged, &quot; decodes to "
+    expect(encodeHtmlEntities('"hello"')).toBe('"hello"')
+    expect(decodeHtmlEntities('&quot;hello&quot;')).toBe('"hello"')
+  })
+})

package/src/commands/extendMarkRange.ts

@@ -11,7 +11,8 @@ declare module '@tiptap/core' {
       /**
        * Extends the text selection to the current mark by type or name.
        * @param typeOrName The type or name of the mark.
-       * @param attributes The attributes of the mark.
+       * @param attributes The attributes to match against.
+       * If not provided, only the first mark at the position will be matched.
        * @example editor.commands.extendMarkRange('bold')
        * @example editor.commands.extendMarkRange('mention', { userId: "1" })
        */
@@ -31,7 +32,7 @@ declare module '@tiptap/core' {
 }
 
 export const extendMarkRange: RawCommands['extendMarkRange'] =
-  (typeOrName, attributes = {}) =>
+  (typeOrName, attributes) =>
   ({ tr, state, dispatch }) => {
     const type = getMarkType(typeOrName, state.schema)
     const { doc, selection } = tr

package/src/extensions/delete.ts

@@ -55,7 +55,8 @@ export const Delete = Extension.create({
           const oldStart = mapping.invert().map(newStart, -1)
           const oldEnd = mapping.invert().map(newEnd)
 
-          const foundBeforeMark = nextTransaction.doc.nodeAt(newStart - 1)?.marks.some(mark => mark.eq(step.mark))
+          const foundBeforeMark =
+            newStart > 0 ? nextTransaction.doc.nodeAt(newStart - 1)?.marks.some(mark => mark.eq(step.mark)) : false
           const foundAfterMark = nextTransaction.doc.nodeAt(newEnd)?.marks.some(mark => mark.eq(step.mark))
 
           this.editor.emit('delete', {

package/src/helpers/getMarkRange.ts

@@ -57,8 +57,13 @@ export function getMarkRange(
     return
   }
 
-  // Default to only matching against the first mark's attributes
-  attributes = attributes || start.node.marks[0]?.attrs
+  // Default to only matching against the attributes of the first mark with the given type
+  if (!attributes) {
+    const firstMark = start.node.marks.find(mark => mark.type === type)
+    if (firstMark) {
+      attributes = firstMark.attrs
+    }
+  }
 
   // We now know that the cursor is either at the start, middle or end of a text node with the specified mark
   // so we can look it up on the targeted mark

package/src/lib/ResizableNodeView.ts

@@ -548,7 +548,7 @@ export class ResizableNodeView {
     const element = document.createElement('div')
     element.dataset.resizeContainer = ''
     element.dataset.node = this.node.type.name
-    element.style.display = 'flex'
+    element.style.display = this.node.type.isInline ? 'inline-flex' : 'flex'
 
     if (this.classNames.container) {
       element.className = this.classNames.container

package/src/utilities/htmlEntities.ts

@@ -0,0 +1,26 @@
+/**
+ * Decode common HTML entities in text content so they display as literal
+ * characters inside the editor.  The decode order matters: `&` must be
+ * decoded **last** so that doubly-encoded sequences like `<` first
+ * survive the `&lt;` pass and then correctly become `&lt;` (not `<`).
+ */
+export function decodeHtmlEntities(text: string): string {
+  return text
+    .replace(/&lt;/g, '<')
+    .replace(/&gt;/g, '>')
+    .replace(/&quot;/g, '"')
+    .replace(/&amp;/g, '&')
+}
+
+/**
+ * Encode HTML special characters so they roundtrip safely through markdown.
+ * `&` is encoded **first** to avoid double-encoding the ampersand in other
+ * entities (e.g. `<` → `&lt;`, not `&amp;lt;`).
+ *
+ * Note: `"` is intentionally NOT encoded here because double quotes are
+ * ordinary characters in markdown and do not need escaping.  The decode
+ * function still handles `&quot;` because the markdown tokenizer may emit it.
+ */
+export function encodeHtmlEntities(text: string): string {
+  return text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
+}

package/src/utilities/index.ts

@@ -6,6 +6,7 @@ export * from './elementFromString.js'
 export * from './escapeForRegEx.js'
 export * from './findDuplicates.js'
 export * from './fromString.js'
+export * from './htmlEntities.js'
 export * from './isAndroid.js'
 export * from './isEmptyObject.js'
 export * from './isFirefox.js'
@@ -22,5 +23,6 @@ export * as markdown from './markdown/index.js'
 export * from './mergeAttributes.js'
 export * from './mergeDeep.js'
 export * from './minMax.js'
+export * from './nodeViewPositionRegistry.js'
 export * from './objectIncludes.js'
 export * from './removeDuplicates.js'

package/src/utilities/nodeViewPositionRegistry.ts

@@ -0,0 +1,70 @@
+import type { Editor } from '../Editor.js'
+
+/**
+ * Per-editor registry for centralized NodeView position-change checks.
+ * A single editor.on('update') listener + rAF is shared across all NodeViews
+ * for a given editor, keeping overhead bounded regardless of NodeView count.
+ *
+ * This is consumed by React, Vue 3, and Vue 2 NodeView renderers.
+ */
+interface PositionUpdateRegistry {
+  callbacks: Set<() => void>
+  rafId: number | null
+  handler: () => void
+}
+
+const positionUpdateRegistries = new WeakMap<Editor, PositionUpdateRegistry>()
+
+/**
+ * Register a callback to be called (via a shared rAF) after every editor
+ * update transaction. If this is the first registration for the given editor,
+ * a new registry entry and a single `editor.on('update')` listener are created.
+ */
+export function schedulePositionCheck(editor: Editor, callback: () => void): void {
+  let registry = positionUpdateRegistries.get(editor)
+
+  if (!registry) {
+    const newRegistry: PositionUpdateRegistry = {
+      callbacks: new Set(),
+      rafId: null,
+      handler: () => {
+        if (newRegistry.rafId !== null) {
+          cancelAnimationFrame(newRegistry.rafId)
+        }
+        newRegistry.rafId = requestAnimationFrame(() => {
+          newRegistry.rafId = null
+          newRegistry.callbacks.forEach(cb => cb())
+        })
+      },
+    }
+
+    positionUpdateRegistries.set(editor, newRegistry)
+    editor.on('update', newRegistry.handler)
+    registry = newRegistry
+  }
+
+  registry.callbacks.add(callback)
+}
+
+/**
+ * Unregister a previously registered callback. When the last callback for an
+ * editor is removed, the shared listener and any pending rAF are also cleaned up.
+ */
+export function cancelPositionCheck(editor: Editor, callback: () => void): void {
+  const registry = positionUpdateRegistries.get(editor)
+
+  if (!registry) {
+    return
+  }
+
+  registry.callbacks.delete(callback)
+
+  if (registry.callbacks.size === 0) {
+    if (registry.rafId !== null) {
+      cancelAnimationFrame(registry.rafId)
+    }
+
+    editor.off('update', registry.handler)
+    positionUpdateRegistries.delete(editor)
+  }
+}