@tiptap/vue-3 2.6.6 → 2.7.0

package/dist/packages/core/src/types.d.ts

@@ -1,6 +1,6 @@
-import { Mark as ProseMirrorMark, Node as ProseMirrorNode, NodeType, ParseOptions } from '@tiptap/pm/model';
+import { Mark as ProseMirrorMark, Node as ProseMirrorNode, NodeType, ParseOptions, Slice } from '@tiptap/pm/model';
 import { EditorState, Transaction } from '@tiptap/pm/state';
-import { Decoration, EditorProps, EditorView, NodeView } from '@tiptap/pm/view';
+import { Decoration, EditorProps, EditorView, NodeView, NodeViewConstructor } from '@tiptap/pm/view';
 import { Editor } from './Editor.js';
 import { Extension } from './Extension.js';
 import { Commands, ExtensionConfig, MarkConfig, NodeConfig } from './index.js';
@@ -79,7 +79,24 @@ export interface EditorOptions {
     };
     enableInputRules: EnableRules;
     enablePasteRules: EnableRules;
-    enableCoreExtensions: boolean;
+    /**
+     * Determines whether core extensions are enabled.
+     *
+     * If set to `false`, all core extensions will be disabled.
+     * To disable specific core extensions, provide an object where the keys are the extension names and the values are `false`.
+     * Extensions not listed in the object will remain enabled.
+     *
+     * @example
+     * // Disable all core extensions
+     * enabledCoreExtensions: false
+     *
+     * @example
+     * // Disable only the keymap core extension
+     * enabledCoreExtensions: { keymap: false }
+     *
+     * @default true
+     */
+    enableCoreExtensions?: boolean | Partial<Record<'editable' | 'clipboardTextSerializer' | 'commands' | 'focusEvents' | 'keymap' | 'tabindex', false>>;
     /**
      * If `true`, the editor will check the content for errors on initialization.
      * Emitting the `contentError` event if the content is invalid.
@@ -100,6 +117,8 @@ export interface EditorOptions {
     onFocus: (props: EditorEvents['focus']) => void;
     onBlur: (props: EditorEvents['blur']) => void;
     onDestroy: (props: EditorEvents['destroy']) => void;
+    onPaste: (e: ClipboardEvent, slice: Slice) => void;
+    onDrop: (e: DragEvent, slice: Slice, moved: boolean) => void;
 }
 export type HTMLContent = string;
 export type JSONContent = {
@@ -170,19 +189,18 @@ export type ValuesOf<T> = T[keyof T];
 export type KeysWithTypeOf<T, Type> = {
     [P in keyof T]: T[P] extends Type ? P : never;
 }[keyof T];
+export type Simplify<T> = {
+    [KeyType in keyof T]: T[KeyType];
+} & {};
 export type DecorationWithType = Decoration & {
     type: NodeType;
 };
-export type NodeViewProps = {
-    editor: Editor;
-    node: ProseMirrorNode;
-    decorations: DecorationWithType[];
+export type NodeViewProps = Simplify<Omit<NodeViewRendererProps, 'decorations'> & {
+    decorations: readonly DecorationWithType[];
     selected: boolean;
-    extension: Node;
-    getPos: () => number;
     updateAttributes: (attributes: Record<string, any>) => void;
     deleteNode: () => void;
-};
+}>;
 export interface NodeViewRendererOptions {
     stopEvent: ((props: {
         event: Event;
@@ -196,14 +214,16 @@ export interface NodeViewRendererOptions {
     contentDOMElementTag: string;
 }
 export type NodeViewRendererProps = {
+    node: Parameters<NodeViewConstructor>[0];
+    view: Parameters<NodeViewConstructor>[1];
+    getPos: () => number;
+    decorations: Parameters<NodeViewConstructor>[3];
+    innerDecorations: Parameters<NodeViewConstructor>[4];
     editor: Editor;
-    node: ProseMirrorNode;
-    getPos: (() => number) | boolean;
-    HTMLAttributes: Record<string, any>;
-    decorations: Decoration[];
     extension: Node;
+    HTMLAttributes: Record<string, any>;
 };
-export type NodeViewRenderer = (props: NodeViewRendererProps) => NodeView | {};
+export type NodeViewRenderer = (props: NodeViewRendererProps) => NodeView;
 export type AnyCommands = Record<string, (...args: any[]) => Command>;
 export type UnionCommands<T = Command> = UnionToIntersection<ValuesOf<Pick<Commands<T>, KeysWithTypeOf<Commands<T>, {}>>>>;
 export type RawCommands = {

package/dist/packages/vue-3/src/VueNodeViewRenderer.d.ts

@@ -1,6 +1,6 @@
 import { NodeViewProps, NodeViewRenderer, NodeViewRendererOptions } from '@tiptap/core';
 import { Node as ProseMirrorNode } from '@tiptap/pm/model';
-import { Decoration } from '@tiptap/pm/view';
+import { Decoration, DecorationSource } from '@tiptap/pm/view';
 import { Component, PropType } from 'vue';
 export declare const nodeViewProps: {
     editor: {
@@ -39,10 +39,12 @@ export declare const nodeViewProps: {
 export interface VueNodeViewRendererOptions extends NodeViewRendererOptions {
     update: ((props: {
         oldNode: ProseMirrorNode;
-        oldDecorations: Decoration[];
+        oldDecorations: readonly Decoration[];
+        oldInnerDecorations: DecorationSource;
         newNode: ProseMirrorNode;
-        newDecorations: Decoration[];
+        newDecorations: readonly Decoration[];
+        innerDecorations: DecorationSource;
         updateProps: () => void;
     }) => boolean) | null;
 }
-export declare function VueNodeViewRenderer(component: Component, options?: Partial<VueNodeViewRendererOptions>): NodeViewRenderer;
+export declare function VueNodeViewRenderer(component: Component<NodeViewProps>, options?: Partial<VueNodeViewRendererOptions>): NodeViewRenderer;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tiptap/vue-3",
   "description": "Vue components for tiptap",
-  "version": "2.6.6",
+  "version": "2.7.0",
   "homepage": "https://tiptap.dev",
   "keywords": [
     "tiptap",
@@ -29,17 +29,17 @@
     "dist"
   ],
   "dependencies": {
-    "@tiptap/extension-bubble-menu": "^2.6.6",
-    "@tiptap/extension-floating-menu": "^2.6.6"
+    "@tiptap/extension-bubble-menu": "^2.7.0",
+    "@tiptap/extension-floating-menu": "^2.7.0"
   },
   "devDependencies": {
-    "@tiptap/core": "^2.6.6",
-    "@tiptap/pm": "^2.6.6",
+    "@tiptap/core": "^2.7.0",
+    "@tiptap/pm": "^2.7.0",
     "vue": "^3.0.0"
   },
   "peerDependencies": {
-    "@tiptap/core": "^2.6.6",
-    "@tiptap/pm": "^2.6.6",
+    "@tiptap/core": "^2.7.0-pre.0",
+    "@tiptap/pm": "^2.7.0-pre.0",
     "vue": "^3.0.0"
   },
   "repository": {

package/src/Editor.ts

@@ -75,7 +75,9 @@ export class Editor extends CoreEditor {
     handlePlugins?: (newPlugin: Plugin, plugins: Plugin[]) => Plugin[],
   ): void {
     super.registerPlugin(plugin, handlePlugins)
-    this.reactiveState.value = this.view.state
+    if (this.reactiveState) {
+      this.reactiveState.value = this.view.state
+    }
   }
 
   /**
@@ -83,6 +85,8 @@ export class Editor extends CoreEditor {
    */
   public unregisterPlugin(nameOrPluginKey: string | PluginKey): void {
     super.unregisterPlugin(nameOrPluginKey)
-    this.reactiveState.value = this.view.state
+    if (this.reactiveState) {
+      this.reactiveState.value = this.view.state
+    }
   }
 }

package/src/VueNodeViewRenderer.ts

@@ -1,20 +1,15 @@
+/* eslint-disable no-underscore-dangle */
 import {
   DecorationWithType,
   NodeView,
   NodeViewProps,
   NodeViewRenderer,
   NodeViewRendererOptions,
-  NodeViewRendererProps,
 } from '@tiptap/core'
 import { Node as ProseMirrorNode } from '@tiptap/pm/model'
-import { Decoration, NodeView as ProseMirrorNodeView } from '@tiptap/pm/view'
+import { Decoration, DecorationSource, NodeView as ProseMirrorNodeView } from '@tiptap/pm/view'
 import {
-  Component,
-  defineComponent,
-  PropType,
-  provide,
-  Ref,
-  ref,
+  Component, defineComponent, PropType, provide, Ref, ref,
 } from 'vue'
 
 import { Editor } from './Editor.js'
@@ -58,13 +53,15 @@ export const nodeViewProps = {
 export interface VueNodeViewRendererOptions extends NodeViewRendererOptions {
   update:
     | ((props: {
-        oldNode: ProseMirrorNode
-        oldDecorations: Decoration[]
-        newNode: ProseMirrorNode
-        newDecorations: Decoration[]
-        updateProps: () => void
+        oldNode: ProseMirrorNode;
+        oldDecorations: readonly Decoration[];
+        oldInnerDecorations: DecorationSource;
+        newNode: ProseMirrorNode;
+        newDecorations: readonly Decoration[];
+        innerDecorations: DecorationSource;
+        updateProps: () => void;
       }) => boolean)
-    | null
+    | null;
 }
 
 class VueNodeView extends NodeView<Component, Editor, VueNodeViewRendererOptions> {
@@ -73,16 +70,19 @@ class VueNodeView extends NodeView<Component, Editor, VueNodeViewRendererOptions
   decorationClasses!: Ref<string>
 
   mount() {
-    const props: NodeViewProps = {
+    const props = {
       editor: this.editor,
       node: this.node,
-      decorations: this.decorations,
+      decorations: this.decorations as DecorationWithType[],
+      innerDecorations: this.innerDecorations,
+      view: this.view,
       selected: false,
       extension: this.extension,
+      HTMLAttributes: this.HTMLAttributes,
       getPos: () => this.getPos(),
       updateAttributes: (attributes = {}) => this.updateAttributes(attributes),
       deleteNode: () => this.deleteNode(),
-    }
+    } satisfies NodeViewProps
 
     const onDragStart = this.onDragStart.bind(this)
 
@@ -117,12 +117,19 @@ class VueNodeView extends NodeView<Component, Editor, VueNodeViewRendererOptions
       __file: this.component.__file,
     })
 
+    this.handleSelectionUpdate = this.handleSelectionUpdate.bind(this)
+    this.editor.on('selectionUpdate', this.handleSelectionUpdate)
+
     this.renderer = new VueRenderer(extendedComponent, {
       editor: this.editor,
       props,
     })
   }
 
+  /**
+   * Return the DOM element.
+   * This is the element that will be used to display the node view.
+   */
   get dom() {
     if (!this.renderer.element || !this.renderer.element.hasAttribute('data-node-view-wrapper')) {
       throw Error('Please use the NodeViewWrapper component for your node view.')
@@ -131,6 +138,10 @@ class VueNodeView extends NodeView<Component, Editor, VueNodeViewRendererOptions
     return this.renderer.element as HTMLElement
   }
 
+  /**
+   * Return the content DOM element.
+   * This is the element that will be used to display the rich-text content of the node.
+   */
   get contentDOM() {
     if (this.node.isLeaf) {
       return null
@@ -139,8 +150,43 @@ class VueNodeView extends NodeView<Component, Editor, VueNodeViewRendererOptions
     return this.dom.querySelector('[data-node-view-content]') as HTMLElement | null
   }
 
-  update(node: ProseMirrorNode, decorations: DecorationWithType[]) {
-    const updateProps = (props?: Record<string, any>) => {
+  /**
+   * On editor selection update, check if the node is selected.
+   * If it is, call `selectNode`, otherwise call `deselectNode`.
+   */
+  handleSelectionUpdate() {
+    const { from, to } = this.editor.state.selection
+    const pos = this.getPos()
+
+    if (typeof pos !== 'number') {
+      return
+    }
+
+    if (from <= pos && to >= pos + this.node.nodeSize) {
+      if (this.renderer.props.selected) {
+        return
+      }
+
+      this.selectNode()
+    } else {
+      if (!this.renderer.props.selected) {
+        return
+      }
+
+      this.deselectNode()
+    }
+  }
+
+  /**
+   * On update, update the React component.
+   * To prevent unnecessary updates, the `update` option can be used.
+   */
+  update(
+    node: ProseMirrorNode,
+    decorations: readonly Decoration[],
+    innerDecorations: DecorationSource,
+  ): boolean {
+    const rerenderComponent = (props?: Record<string, any>) => {
       this.decorationClasses.value = this.getDecorationClasses()
       this.renderer.updateProps(props)
     }
@@ -148,16 +194,20 @@ class VueNodeView extends NodeView<Component, Editor, VueNodeViewRendererOptions
     if (typeof this.options.update === 'function') {
       const oldNode = this.node
       const oldDecorations = this.decorations
+      const oldInnerDecorations = this.innerDecorations
 
       this.node = node
       this.decorations = decorations
+      this.innerDecorations = innerDecorations
 
       return this.options.update({
         oldNode,
         oldDecorations,
         newNode: node,
         newDecorations: decorations,
-        updateProps: () => updateProps({ node, decorations }),
+        oldInnerDecorations,
+        innerDecorations,
+        updateProps: () => rerenderComponent({ node, decorations, innerDecorations }),
       })
     }
 
@@ -165,18 +215,23 @@ class VueNodeView extends NodeView<Component, Editor, VueNodeViewRendererOptions
       return false
     }
 
-    if (node === this.node && this.decorations === decorations) {
+    if (node === this.node && this.decorations === decorations && this.innerDecorations === innerDecorations) {
       return true
     }
 
     this.node = node
     this.decorations = decorations
+    this.innerDecorations = innerDecorations
 
-    updateProps({ node, decorations })
+    rerenderComponent({ node, decorations, innerDecorations })
 
     return true
   }
 
+  /**
+   * Select the node.
+   * Add the `selected` prop and the `ProseMirror-selectednode` class.
+   */
   selectNode() {
     this.renderer.updateProps({
       selected: true,
@@ -186,6 +241,10 @@ class VueNodeView extends NodeView<Component, Editor, VueNodeViewRendererOptions
     }
   }
 
+  /**
+   * Deselect the node.
+   * Remove the `selected` prop and the `ProseMirror-selectednode` class.
+   */
   deselectNode() {
     this.renderer.updateProps({
       selected: false,
@@ -207,26 +266,26 @@ class VueNodeView extends NodeView<Component, Editor, VueNodeViewRendererOptions
 
   destroy() {
     this.renderer.destroy()
+    this.editor.off('selectionUpdate', this.handleSelectionUpdate)
   }
 }
 
 export function VueNodeViewRenderer(
-  component: Component,
+  component: Component<NodeViewProps>,
   options?: Partial<VueNodeViewRendererOptions>,
 ): NodeViewRenderer {
-  return (props: NodeViewRendererProps) => {
+  return props => {
     // try to get the parent component
     // this is important for vue devtools to show the component hierarchy correctly
     // maybe it’s `undefined` because <editor-content> isn’t rendered yet
     if (!(props.editor as Editor).contentComponent) {
-      return {}
+      return {} as unknown as ProseMirrorNodeView
     }
     // check for class-component and normalize if neccessary
     const normalizedComponent = typeof component === 'function' && '__vccOpts' in component
-      // eslint-disable-next-line no-underscore-dangle
-      ? component.__vccOpts as Component
+      ? (component.__vccOpts as Component)
       : component
 
-    return new VueNodeView(normalizedComponent, props, options) as unknown as ProseMirrorNodeView
+    return new VueNodeView(normalizedComponent, props, options)
   }
 }