mirror/tiptap
1
0
Fork 0
mirror of https://github.com/ueberdosis/tiptap.git synced 2025-06-08 01:53:04 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

refactor(core): update typings for NodeViews to be accurate to implementation #5483 (#5526)

Browse Source
This commit is contained in:
Nick Perez 2024-08-20 16:25:16 +02:00 committed by GitHub
parent 04bf24aed0
commit 7f24a6677b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
10 changed files with 412 additions and 127 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
.changeset/purple-bobcats-grab.md Normal file
View File

@ -0,0 +1,8 @@
---
"@tiptap/react": patch
"@tiptap/vue-2": patch
"@tiptap/vue-3": patch
"@tiptap/core": patch
---
Update the Typescript types for NodeViews, bringing them inline with there actual implementation

6
.changeset/shaggy-dolphins-applaud.md Normal file
View File

@ -0,0 +1,6 @@
---
"@tiptap/vue-2": minor
"@tiptap/vue-3": minor
---
Vue NodeViews now listen for changes to selections and re-render when the selection is actually over the nodeview

25
packages/core/src/ExtensionManager.ts
View File

@ -1,7 +1,7 @@
import { keymap } from '@tiptap/pm/keymap'
import { Node as ProsemirrorNode, Schema } from '@tiptap/pm/model'
import { Schema } from '@tiptap/pm/model'
import { Plugin } from '@tiptap/pm/state'
import { Decoration, EditorView } from '@tiptap/pm/view'
import { NodeViewConstructor } from '@tiptap/pm/view'
import type { Editor } from './Editor.js'
import { getAttributesFromExtensions } from './helpers/getAttributesFromExtensions.js'
@ -288,21 +288,26 @@ export class ExtensionManager {
return []
}
const nodeview = (
node: ProsemirrorNode,
view: EditorView,
getPos: (() => number) | boolean,
decorations: Decoration[],
const nodeview: NodeViewConstructor = (
node,
view,
getPos,
decorations,
innerDecorations,
) => {
const HTMLAttributes = getRenderedAttributes(node, extensionAttributes)
return addNodeView()({
editor,
// pass-through
node,
getPos,
view,
getPos: getPos as () => number,
decorations,
HTMLAttributes,
innerDecorations,
// tiptap-specific
editor,
extension,
HTMLAttributes,
})
}

47
packages/core/src/NodeView.ts
View File

@ -1,9 +1,7 @@
import { Node as ProseMirrorNode } from '@tiptap/pm/model'
import { NodeSelection } from '@tiptap/pm/state'
import { NodeView as ProseMirrorNodeView } from '@tiptap/pm/view'
import { Editor as CoreEditor } from './Editor.js'
import { Node } from './Node.js'
import { DecorationWithType, NodeViewRendererOptions, NodeViewRendererProps } from './types.js'
import { isAndroid } from './utilities/isAndroid.js'
import { isiOS } from './utilities/isiOS.js'
@ -23,13 +21,19 @@ export class NodeView<
options: Options
extension: Node
extension: NodeViewRendererProps['extension']
node: ProseMirrorNode
node: NodeViewRendererProps['node']
decorations: DecorationWithType[]
decorations: NodeViewRendererProps['decorations']
getPos: any
innerDecorations: NodeViewRendererProps['innerDecorations']
view: NodeViewRendererProps['view']
getPos: NodeViewRendererProps['getPos']
HTMLAttributes: NodeViewRendererProps['HTMLAttributes']
isDragging = false
@ -44,6 +48,9 @@ export class NodeView<
this.extension = props.extension
this.node = props.node
this.decorations = props.decorations as DecorationWithType[]
this.innerDecorations = props.innerDecorations
this.view = props.view
this.HTMLAttributes = props.HTMLAttributes
this.getPos = props.getPos
this.mount()
}
@ -93,9 +100,14 @@ export class NodeView<
event.dataTransfer?.setDragImage(this.dom, x, y)
const pos = this.getPos()
if (typeof pos !== 'number') {
return
}
// we need to tell ProseMirror that we want to move the whole node
// so we create a NodeSelection
const selection = NodeSelection.create(view.state.doc, this.getPos())
const selection = NodeSelection.create(view.state.doc, pos)
const transaction = view.state.tr.setSelection(selection)
view.dispatch(transaction)
@ -197,6 +209,11 @@ export class NodeView<
return true
}
/**
* Called when a DOM [mutation](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver) or a selection change happens within the view.
* @return `false` if the editor should re-read the selection or re-parse the range around the mutation
* @return `true` if it can safely be ignored.
*/
ignoreMutation(mutation: MutationRecord | { type: 'selection'; target: Element }) {
if (!this.dom || !this.contentDOM) {
return true
@ -254,10 +271,17 @@ export class NodeView<
return true
}
updateAttributes(attributes: {}) {
/**
* Update the attributes of the prosemirror node.
*/
updateAttributes(attributes: Record<string, any>): void {
this.editor.commands.command(({ tr }) => {
const pos = this.getPos()
if (typeof pos !== 'number') {
return false
}
tr.setNodeMarkup(pos, undefined, {
...this.node.attrs,
...attributes,
@ -267,8 +291,15 @@ export class NodeView<
})
}
/**
* Delete the node.
*/
deleteNode(): void {
const from = this.getPos()
if (typeof from !== 'number') {
return
}
const to = from + this.node.nodeSize
this.editor.commands.deleteRange({ from, to })

41
packages/core/src/types.ts
View File

@ -6,7 +6,11 @@ import {
} from '@tiptap/pm/model'
import { EditorState, Transaction } from '@tiptap/pm/state'
import {
Decoration, EditorProps, EditorView, NodeView,
Decoration,
EditorProps,
EditorView,
NodeView,
NodeViewConstructor,
} from '@tiptap/pm/view'
import { Editor } from './Editor.js'
@ -184,20 +188,21 @@ 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[];
selected: boolean;
extension: Node;
getPos: () => number;
updateAttributes: (attributes: Record<string, any>) => void;
deleteNode: () => void;
};
export type NodeViewProps = Simplify<
Omit<NodeViewRendererProps, 'decorations'> & {
// TODO this type is not technically correct, but it's the best we can do for now since prosemirror doesn't expose the type of decorations
decorations: readonly DecorationWithType[];
selected: boolean;
updateAttributes: (attributes: Record<string, any>) => void;
deleteNode: () => void;
}
>;
export interface NodeViewRendererOptions {
stopEvent: ((props: { event: Event }) => boolean) | null;
@ -208,15 +213,19 @@ export interface NodeViewRendererOptions {
}
export type NodeViewRendererProps = {
// pass-through from prosemirror
node: Parameters<NodeViewConstructor>[0];
view: Parameters<NodeViewConstructor>[1];
getPos: () => number; // TODO getPos was incorrectly typed before, change to `Parameters<NodeViewConstructor>[2];` in the next major version
decorations: Parameters<NodeViewConstructor>[3];
innerDecorations: Parameters<NodeViewConstructor>[4];
// tiptap-specific
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>;

4
packages/extension-task-item/src/task-item.ts
View File

@ -154,6 +154,10 @@ export const TaskItem = Node.create<TaskItemOptions>({
.focus(undefined, { scrollIntoView: false })
.command(({ tr }) => {
const position = getPos()
if (typeof position !== 'number') {
return false
}
const currentNode = tr.doc.nodeAt(position)
tr.setNodeMarkup(position, undefined, {

165
packages/react/src/ReactNodeViewRenderer.tsx
View File

@ -6,56 +6,85 @@ import {
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 React from 'react'
import { Node, Node as ProseMirrorNode } from '@tiptap/pm/model'
import { Decoration, DecorationSource, NodeView as ProseMirrorNodeView } from '@tiptap/pm/view'
import React, { ComponentType } from 'react'
import { EditorWithContentComponent } from './Editor.js'
import { ReactRenderer } from './ReactRenderer.js'
import { ReactNodeViewContext, ReactNodeViewContextProps } from './useReactNodeView.js'
export interface ReactNodeViewRendererOptions extends NodeViewRendererOptions {
/**
* This function is called when the node view is updated.
* It allows you to compare the old node with the new node and decide if the component should update.
*/
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
as?: string
className?: string
| null;
/**
* The tag name of the element wrapping the React component.
*/
as?: string;
/**
* The class name of the element wrapping the React component.
*/
className?: string;
/**
* Attributes that should be applied to the element wrapping the React component.
* If this is a function, it will be called each time the node view is updated.
* If this is an object, it will be applied once when the node view is mounted.
*/
attrs?:
| Record<string, string>
| ((props: {
node: ProseMirrorNode
HTMLAttributes: Record<string, any>
}) => Record<string, string>)
node: ProseMirrorNode;
HTMLAttributes: Record<string, any>;
}) => Record<string, string>);
}
class ReactNodeView extends NodeView<
React.FunctionComponent,
Editor,
ReactNodeViewRendererOptions
> {
renderer!: ReactRenderer
export class ReactNodeView<
Component extends ComponentType<NodeViewProps> = ComponentType<NodeViewProps>,
NodeEditor extends Editor = Editor,
Options extends ReactNodeViewRendererOptions = ReactNodeViewRendererOptions,
> extends NodeView<Component, NodeEditor, Options> {
/**
* The renderer instance.
*/
renderer!: ReactRenderer<unknown, NodeViewProps>
/**
* The element that holds the rich-text content of the node.
*/
contentDOMElement!: HTMLElement | null
/**
* Setup the React component.
* Called on initialization.
*/
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
if (!(this.component as any).displayName) {
const capitalizeFirstChar = (string: string): string => {
@ -75,13 +104,15 @@ class ReactNodeView extends NodeView<
const Component = this.component
// For performance reasons, we memoize the provider component
// And all of the things it requires are declared outside of the component, so it doesn't need to re-render
const ReactNodeViewProvider: React.FunctionComponent = React.memo(componentProps => {
return (
<ReactNodeViewContext.Provider value={context}>
{React.createElement(Component, componentProps)}
</ReactNodeViewContext.Provider>
)
})
const ReactNodeViewProvider: React.FunctionComponent<NodeViewProps> = React.memo(
componentProps => {
return (
<ReactNodeViewContext.Provider value={context}>
{React.createElement(Component, componentProps)}
</ReactNodeViewContext.Provider>
)
},
)
ReactNodeViewProvider.displayName = 'ReactNodeView'
@ -121,6 +152,10 @@ class ReactNodeView extends NodeView<
this.updateElementAttributes()
}
/**
* Return the DOM element.
* This is the element that will be used to display the node view.
*/
get dom() {
if (
this.renderer.element.firstElementChild
@ -132,6 +167,10 @@ class ReactNodeView extends NodeView<
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
@ -140,10 +179,19 @@ class ReactNodeView extends NodeView<
return this.contentDOMElement
}
/**
* 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 (from <= this.getPos() && to >= this.getPos() + this.node.nodeSize) {
if (typeof pos !== 'number') {
return
}
if (from <= pos && to >= pos + this.node.nodeSize) {
if (this.renderer.props.selected) {
return
}
@ -158,8 +206,16 @@ class ReactNodeView extends NodeView<
}
}
update(node: ProseMirrorNode, decorations: DecorationWithType[]) {
const updateProps = (props?: Record<string, any>) => {
/**
* On update, update the React component.
* To prevent unnecessary updates, the `update` option can be used.
*/
update(
node: Node,
decorations: readonly Decoration[],
innerDecorations: DecorationSource,
): boolean {
const rerenderComponent = (props?: Record<string, any>) => {
this.renderer.updateProps(props)
if (typeof this.options.attrs === 'function') {
this.updateElementAttributes()
@ -173,31 +229,44 @@ class ReactNodeView extends NodeView<
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 }),
})
}
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,
@ -205,6 +274,10 @@ class ReactNodeView extends NodeView<
this.renderer.element.classList.add('ProseMirror-selectednode')
}
/**
* Deselect the node.
* Remove the `selected` prop and the `ProseMirror-selectednode` class.
*/
deselectNode() {
this.renderer.updateProps({
selected: false,
@ -212,12 +285,19 @@ class ReactNodeView extends NodeView<
this.renderer.element.classList.remove('ProseMirror-selectednode')
}
/**
* Destroy the React component instance.
*/
destroy() {
this.renderer.destroy()
this.editor.off('selectionUpdate', this.handleSelectionUpdate)
this.contentDOMElement = null
}
/**
* Update the attributes of the top-level element that holds the React component.
* Applying the attributes defined in the `attrs` option.
*/
updateElementAttributes() {
if (this.options.attrs) {
let attrsObj: Record<string, string> = {}
@ -236,18 +316,21 @@ class ReactNodeView extends NodeView<
}
}
/**
* Create a React node view renderer.
*/
export function ReactNodeViewRenderer(
component: any,
component: ComponentType<NodeViewProps>,
options?: Partial<ReactNodeViewRendererOptions>,
): 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 EditorWithContentComponent).contentComponent) {
return {}
return {} as unknown as ProseMirrorNodeView
}
return new ReactNodeView(component, props, options) as unknown as ProseMirrorNodeView
return new ReactNodeView(component, props, options)
}
}

22
packages/react/src/ReactRenderer.tsx
View File

@ -75,7 +75,7 @@ type ComponentType<R, P> =
* as: 'span',
* })
*/
export class ReactRenderer<R = unknown, P = unknown> {
export class ReactRenderer<R = unknown, P extends Record<string, any> = {}> {
id: string
editor: Editor
@ -84,12 +84,15 @@ export class ReactRenderer<R = unknown, P = unknown> {
element: Element
props: Record<string, any>
props: P
reactElement: React.ReactNode
ref: R | null = null
/**
* Immediately creates element and renders the provided React component.
*/
constructor(component: ComponentType<R, P>, {
editor,
props = {},
@ -99,7 +102,7 @@ export class ReactRenderer<R = unknown, P = unknown> {
this.id = Math.floor(Math.random() * 0xFFFFFFFF).toString()
this.component = component
this.editor = editor as EditorWithContentComponent
this.props = props
this.props = props as P
this.element = document.createElement(as)
this.element.classList.add('react-renderer')
@ -118,12 +121,16 @@ export class ReactRenderer<R = unknown, P = unknown> {
}
}
/**
* Render the React component.
*/
render(): void {
const Component = this.component
const props = this.props
const editor = this.editor as EditorWithContentComponent
if (isClassComponent(Component) || isForwardRefComponent(Component)) {
// @ts-ignore This is a hack to make the ref work
props.ref = (ref: R) => {
this.ref = ref
}
@ -134,6 +141,9 @@ export class ReactRenderer<R = unknown, P = unknown> {
editor?.contentComponent?.setRenderer(this.id, this)
}
/**
* Re-renders the React component with new props.
*/
updateProps(props: Record<string, any> = {}): void {
this.props = {
...this.props,
@ -143,12 +153,18 @@ export class ReactRenderer<R = unknown, P = unknown> {
this.render()
}
/**
* Destroy the React component.
*/
destroy(): void {
const editor = this.editor as EditorWithContentComponent
editor?.contentComponent?.removeRenderer(this.id)
}
/**
* Update the attributes of the element that holds the React component.
*/
updateAttributes(attributes: Record<string, string>): void {
Object.keys(attributes).forEach(key => {
this.element.setAttribute(key, attributes[key])

106
packages/vue-2/src/VueNodeViewRenderer.ts
View File

@ -4,10 +4,9 @@ import {
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 Vue from 'vue'
import { VueConstructor } from 'vue/types/umd'
import { booleanProp, functionProp, objectProp } from 'vue-ts-types'
@ -29,33 +28,38 @@ 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<Vue | VueConstructor, Editor, VueNodeViewRendererOptions> {
renderer!: VueRenderer
decorationClasses!: {
value: string
value: 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)
@ -64,7 +68,7 @@ class VueNodeView extends NodeView<Vue | VueConstructor, Editor, VueNodeViewRend
})
// @ts-ignore
const vue = this.editor.contentComponent?.$options._base ?? Vue // eslint-disable-line
const vue = this.editor.contentComponent?.$options._base ?? Vue; // eslint-disable-line
const Component = vue.extend(this.component).extend({
props: Object.keys(props),
@ -76,12 +80,19 @@ class VueNodeView extends NodeView<Vue | VueConstructor, Editor, VueNodeViewRend
},
})
this.handleSelectionUpdate = this.handleSelectionUpdate.bind(this)
this.editor.on('selectionUpdate', this.handleSelectionUpdate)
this.renderer = new VueRenderer(Component, {
parent: this.editor.contentComponent,
propsData: props,
})
}
/**
* Return the DOM element.
* This is the element that will be used to display the node view.
*/
get dom() {
if (!this.renderer.element.hasAttribute('data-node-view-wrapper')) {
throw Error('Please use the NodeViewWrapper component for your node view.')
@ -90,6 +101,10 @@ class VueNodeView extends NodeView<Vue | VueConstructor, Editor, VueNodeViewRend
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
@ -100,8 +115,43 @@ class VueNodeView extends NodeView<Vue | VueConstructor, Editor, VueNodeViewRend
return (contentElement || this.dom) 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.ref.$props.selected) {
return
}
this.selectNode()
} else {
if (!this.renderer.ref.$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)
}
@ -109,16 +159,20 @@ class VueNodeView extends NodeView<Vue | VueConstructor, Editor, VueNodeViewRend
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 }),
})
}
@ -126,18 +180,23 @@ class VueNodeView extends NodeView<Vue | VueConstructor, Editor, VueNodeViewRend
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,
@ -145,6 +204,10 @@ class VueNodeView extends NodeView<Vue | VueConstructor, Editor, VueNodeViewRend
this.renderer.element.classList.add('ProseMirror-selectednode')
}
/**
* Deselect the node.
* Remove the `selected` prop and the `ProseMirror-selectednode` class.
*/
deselectNode() {
this.renderer.updateProps({
selected: false,
@ -164,6 +227,7 @@ class VueNodeView extends NodeView<Vue | VueConstructor, Editor, VueNodeViewRend
destroy() {
this.renderer.destroy()
this.editor.off('selectionUpdate', this.handleSelectionUpdate)
}
}
@ -171,14 +235,14 @@ export function VueNodeViewRenderer(
component: Vue | VueConstructor,
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
}
return new VueNodeView(component, props, options) as unknown as ProseMirrorNodeView
return new VueNodeView(component, props, options)
}
}

115
packages/vue-3/src/VueNodeViewRenderer.ts
View File

@ -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)
}
}