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

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.27",
   "homepage": "https://tiptap.dev",
   "keywords": [
     "tiptap",
@@ -52,11 +52,10 @@
     "jsx-dev-runtime"
   ],
   "devDependencies": {
-    "prosemirror-dev-toolkit": "^1.1.8",
-    "@tiptap/pm": "3.0.0-beta.25"
+    "@tiptap/pm": "3.0.0-beta.27"
   },
   "peerDependencies": {
-    "@tiptap/pm": "3.0.0-beta.25"
+    "@tiptap/pm": "3.0.0-beta.27"
   },
   "repository": {
     "type": "git",

package/src/Editor.ts

@@ -92,7 +92,6 @@ export class Editor extends EventEmitter<EditorEvents> {
     enablePasteRules: true,
     enableCoreExtensions: true,
     enableContentCheck: false,
-    enableDevTools: false,
     emitContentError: false,
     onBeforeCreate: () => null,
     onCreate: () => null,
@@ -187,43 +186,6 @@ export class Editor extends EventEmitter<EditorEvents> {
     this.css = null
   }
 
-  /**
-   *
-   * @returns
-   */
-  /**
-   * Applies ProseMirror dev tools to the editor instance if enabled and running in a browser environment.
-   *
-   * This method dynamically imports the `prosemirror-dev-toolkit` package and applies it to the current
-   * editor view. If the dev tools are not installed, a warning is logged to the console.
-   *
-   * @private
-   * @remarks
-   * - Dev tools are only applied if `this.options.enableDevTools` is `true` and the code is running in a browser.
-   * - If the editor view is not available, the dev tools are not applied.
-   * - If the `prosemirror-dev-toolkit` package is missing, a warning is shown in the console.
-   *
-   * @returns {void}
-   */
-  private applyDevTools(): void {
-    if (typeof window === 'undefined' || !this.options.enableDevTools) {
-      return
-    }
-
-    import('prosemirror-dev-toolkit')
-      .then(({ applyDevTools }) => {
-        if (!this.editorView) {
-          return
-        }
-
-        applyDevTools(this.editorView)
-      })
-      .catch(() => {
-        console.warn('[Tiptap warning]: Devtools are enabled but `prosemirror-dev-toolkit` is not installed.')
-        console.warn("Install 'prosemirror-dev-toolkit' as a dev dependency to use the dev tools.")
-      })
-  }
-
   /**
    * Returns the editor storage.
    */
@@ -527,11 +489,6 @@ export class Editor extends EventEmitter<EditorEvents> {
       state: this.editorState,
     })
 
-    // Apply dev tools if enabled
-    if (this.options.enableDevTools) {
-      this.applyDevTools()
-    }
-
     // `editor.view` is not yet available at this time.
     // Therefore we will add all plugins and node views directly afterwards.
     const newState = this.state.reconfigure({

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

@@ -363,18 +363,6 @@ export interface EditorOptions {
    * @default false
    */
   emitContentError: boolean
-  /**
-   * Enable a lazy-loaded Prosemirror DevTools integration.
-   *
-   * Requires having the `prosemirror-dev-toolkit` npm package installed.
-   * @type boolean
-   * @default false
-   * @example
-   * ```js
-   * enableDevTools: true
-   * ```
-   */
-  enableDevTools: boolean
   /**
    * Called before the editor is constructed.
    */
@@ -674,9 +662,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

package/dist/chunk-G3PMV62Z.js

@@ -1,36 +0,0 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __commonJS = (cb, mod) => function __require() {
-  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
-};
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-
-export {
-  __commonJS,
-  __export,
-  __toESM
-};
-//# sourceMappingURL=chunk-G3PMV62Z.js.map

package/dist/chunk-G3PMV62Z.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}