feat(core): add support for markviews

packages/core/src/Editor.ts

@@ -400,6 +400,7 @@ export class Editor extends EventEmitter<EditorEvents> {
     }
 
     this.view.setProps({
+      markViews: this.extensionManager.markViews,
       nodeViews: this.extensionManager.nodeViews,
     })
   }

packages/core/src/ExtensionManager.ts

@@ -1,7 +1,7 @@
 import { keymap } from '@tiptap/pm/keymap'
 import { Schema } from '@tiptap/pm/model'
 import { Plugin } from '@tiptap/pm/state'
-import { NodeViewConstructor } from '@tiptap/pm/view'
+import { MarkViewConstructor, NodeViewConstructor } from '@tiptap/pm/view'
 
 import type { Editor } from './Editor.js'
 import { getAttributesFromExtensions } from './helpers/getAttributesFromExtensions.js'
@@ -12,7 +12,7 @@ import { getSchemaByResolvedExtensions } from './helpers/getSchemaByResolvedExte
 import { getSchemaTypeByName } from './helpers/getSchemaTypeByName.js'
 import { isExtensionRulesEnabled } from './helpers/isExtensionRulesEnabled.js'
 import { splitExtensions } from './helpers/splitExtensions.js'
-import type { NodeConfig } from './index.js'
+import { type MarkConfig, type NodeConfig, getMarkType } from './index.js'
 import { InputRule, inputRulesPlugin } from './InputRule.js'
 import { Mark } from './Mark.js'
 import { PasteRule, pasteRulesPlugin } from './PasteRule.js'
@@ -317,6 +317,58 @@ export class ExtensionManager {
     )
   }
 
+  get markViews(): Record<string, MarkViewConstructor> {
+    const { editor } = this
+    const { markExtensions } = splitExtensions(this.extensions)
+
+    return Object.fromEntries(
+      markExtensions
+        .filter(extension => !!getExtensionField(extension, 'addMarkView'))
+        .map(extension => {
+          const extensionAttributes = this.attributes.filter(
+            attribute => attribute.type === extension.name,
+          )
+          const context = {
+            name: extension.name,
+            options: extension.options,
+            storage: extension.storage,
+            editor,
+            type: getMarkType(extension.name, this.schema),
+          }
+          const addMarkView = getExtensionField<MarkConfig['addMarkView']>(
+            extension,
+            'addMarkView',
+            context,
+          )
+
+          if (!addMarkView) {
+            return []
+          }
+
+          const markView: MarkViewConstructor = (
+            mark,
+            view,
+            inline,
+          ) => {
+            const HTMLAttributes = getRenderedAttributes(mark, extensionAttributes)
+
+            return addMarkView()({
+              // pass-through
+              mark,
+              view,
+              inline,
+              // tiptap-specific
+              editor,
+              extension,
+              HTMLAttributes,
+            })
+          }
+
+          return [extension.name, markView]
+        }),
+    )
+  }
+
   /**
    * Go through all extensions, create extension storages & setup marks
    * & bind editor event listener.

packages/core/src/Mark.ts

@@ -15,6 +15,7 @@ import {
   Extensions,
   GlobalAttributes,
   KeyboardShortcutCommand,
+  MarkViewRenderer,
   ParentConfig,
   RawCommands,
 } from './types.js'
@@ -410,6 +411,20 @@ declare module '@tiptap/core' {
         }) => void)
       | null
 
+    /**
+     * Node View
+     */
+    addMarkView?:
+    | ((this: {
+        name: string
+        options: Options
+        storage: Storage
+        editor: Editor
+        type: MarkType
+        parent: ParentConfig<MarkConfig<Options, Storage>>['addMarkView']
+      }) => MarkViewRenderer)
+    | null
+
     /**
      * Keep mark after split node
      */

packages/core/src/types.ts

@@ -11,6 +11,8 @@ import {
   DecorationAttrs,
   EditorProps,
   EditorView,
+  MarkView,
+  MarkViewConstructor,
   NodeView,
   NodeViewConstructor,
 } from '@tiptap/pm/view'
@@ -305,6 +307,37 @@ export interface NodeViewRendererProps {
 
 export type NodeViewRenderer = (props: NodeViewRendererProps) => NodeView;
 
+export interface MarkViewRendererProps {
+  // pass-through from prosemirror
+  /**
+   * The node that is being rendered.
+   */
+  mark: Parameters<MarkViewConstructor>[0];
+  /**
+   * The editor's view.
+   */
+  view: Parameters<MarkViewConstructor>[1];
+  /**
+   * indicates whether the mark's content is inline
+   */
+  inline: Parameters<MarkViewConstructor>[2];
+  // tiptap-specific
+  /**
+   * The editor instance.
+   */
+  editor: Editor;
+  /**
+   * The extension that is responsible for the mark.
+   */
+  extension: Mark;
+  /**
+   * The HTML attributes that should be added to the mark's DOM element.
+   */
+  HTMLAttributes: Record<string, any>;
+}
+
+export type MarkViewRenderer = (props: MarkViewRendererProps) => MarkView;
+
 export type AnyCommands = Record<string, (...args: any[]) => Command>;
 
 export type UnionCommands<T = Command> = UnionToIntersection<

packages/pm/package.json

@@ -128,22 +128,22 @@
   "dependencies": {
     "prosemirror-changeset": "^2.2.1",
     "prosemirror-collab": "^1.3.1",
-    "prosemirror-commands": "^1.6.0",
+    "prosemirror-commands": "^1.6.2",
     "prosemirror-dropcursor": "^1.8.1",
     "prosemirror-gapcursor": "^1.3.2",
     "prosemirror-history": "^1.4.1",
     "prosemirror-inputrules": "^1.4.0",
     "prosemirror-keymap": "^1.2.2",
-    "prosemirror-markdown": "^1.13.0",
+    "prosemirror-markdown": "^1.13.1",
     "prosemirror-menu": "^1.2.4",
-    "prosemirror-model": "^1.22.3",
+    "prosemirror-model": "^1.23.0",
     "prosemirror-schema-basic": "^1.2.3",
     "prosemirror-schema-list": "^1.4.1",
     "prosemirror-state": "^1.4.3",
-    "prosemirror-tables": "^1.4.0",
+    "prosemirror-tables": "^1.6.1",
     "prosemirror-trailing-node": "^3.0.0",
-    "prosemirror-transform": "^1.10.0",
-    "prosemirror-view": "^1.34.3"
+    "prosemirror-transform": "^1.10.2",
+    "prosemirror-view": "^1.36.0"
   },
   "repository": {
     "type": "git",