@tiptap/core 3.0.0-beta.25 → 3.0.0-beta.26

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tiptap/core",
   "description": "headless rich text editor",
-  "version": "3.0.0-beta.25",
+  "version": "3.0.0-beta.26",
   "homepage": "https://tiptap.dev",
   "keywords": [
     "tiptap",
@@ -53,10 +53,10 @@
   ],
   "devDependencies": {
     "prosemirror-dev-toolkit": "^1.1.8",
-    "@tiptap/pm": "3.0.0-beta.25"
+    "@tiptap/pm": "3.0.0-beta.26"
   },
   "peerDependencies": {
-    "@tiptap/pm": "3.0.0-beta.25"
+    "@tiptap/pm": "3.0.0-beta.26"
   },
   "repository": {
     "type": "git",

package/src/ExtensionManager.ts

@@ -17,7 +17,7 @@ import {
   sortExtensions,
   splitExtensions,
 } from './helpers/index.js'
-import { type MarkConfig, type NodeConfig, type Storage, getMarkType } from './index.js'
+import { type MarkConfig, type NodeConfig, type Storage, getMarkType, updateMarkViewAttributes } from './index.js'
 import type { InputRule } from './InputRule.js'
 import { inputRulesPlugin } from './InputRule.js'
 import { Mark } from './Mark.js'
@@ -262,6 +262,9 @@ export class ExtensionManager {
               editor,
               extension,
               HTMLAttributes,
+              updateAttributes: (attrs: Record<string, any>) => {
+                updateMarkViewAttributes(mark, editor, attrs)
+              },
             })
           }
 

package/src/MarkView.ts

@@ -1,9 +1,57 @@
+import type { Mark } from '@tiptap/pm/model'
 import type { ViewMutationRecord } from '@tiptap/pm/view'
 
 import type { Editor } from './Editor.js'
 import type { MarkViewProps, MarkViewRendererOptions } from './types.js'
 import { isAndroid, isiOS } from './utilities/index.js'
 
+export function updateMarkViewAttributes(checkMark: Mark, editor: Editor, attrs: Record<string, any> = {}): void {
+  const { state } = editor
+  const { doc, tr } = state
+  const thisMark = checkMark
+
+  doc.descendants((node, pos) => {
+    const from = tr.mapping.map(pos)
+    const to = tr.mapping.map(pos) + node.nodeSize
+    let foundMark: Mark | null = null
+
+    // find the mark on the current node
+    node.marks.forEach(mark => {
+      if (mark !== thisMark) {
+        return false
+      }
+
+      foundMark = mark
+    })
+
+    if (!foundMark) {
+      return
+    }
+
+    // check if we need to update given the attributes
+    let needsUpdate = false
+    Object.keys(attrs).forEach(k => {
+      if (attrs[k] !== foundMark!.attrs[k]) {
+        needsUpdate = true
+      }
+    })
+
+    if (needsUpdate) {
+      const updatedMark = checkMark.type.create({
+        ...checkMark.attrs,
+        ...attrs,
+      })
+
+      tr.removeMark(from, to, checkMark.type)
+      tr.addMark(from, to, updatedMark)
+    }
+  })
+
+  if (tr.docChanged) {
+    editor.view.dispatch(tr)
+  }
+}
+
 export class MarkView<Component, Options extends MarkViewRendererOptions = MarkViewRendererOptions> {
   component: Component
   editor: Editor
@@ -27,6 +75,14 @@ export class MarkView<Component, Options extends MarkViewRendererOptions = MarkV
     return null
   }
 
+  /**
+   * Update the attributes of the mark in the document.
+   * @param attrs The attributes to update.
+   */
+  updateAttributes(attrs: Record<string, any>, checkMark?: Mark): void {
+    updateMarkViewAttributes(checkMark || this.mark, this.editor, attrs)
+  }
+
   ignoreMutation(mutation: ViewMutationRecord): boolean {
     if (!this.dom || !this.contentDOM) {
       return true

package/src/types.ts

@@ -674,9 +674,11 @@ export interface MarkViewRendererProps {
    * The HTML attributes that should be added to the mark's DOM element.
    */
   HTMLAttributes: Record<string, any>
+
+  updateAttributes: (attrs: Record<string, any>) => void
 }
 
-export type MarkViewRenderer = (props: MarkViewRendererProps) => MarkView
+export type MarkViewRenderer<Props = MarkViewRendererProps> = (props: Props) => MarkView
 
 export interface MarkViewRendererOptions {
   ignoreMutation: ((props: { mutation: ViewMutationRecord }) => boolean) | null