@tiptap/vue-2 3.23.2 → 3.23.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +33 -33
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +34 -34
- package/dist/index.js.map +1 -1
- package/package.json +7 -7
- package/src/VueNodeViewRenderer.ts +62 -53
package/dist/index.cjs
CHANGED
|
@@ -203,13 +203,19 @@ var nodeViewProps = {
|
|
|
203
203
|
deleteNode: (0, import_vue_ts_types.functionProp)().required
|
|
204
204
|
};
|
|
205
205
|
var VueNodeView = class extends import_core2.NodeView {
|
|
206
|
-
constructor() {
|
|
207
|
-
super(
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
206
|
+
constructor(component, props, options) {
|
|
207
|
+
super(component, props, options);
|
|
208
|
+
this.handlePositionUpdate = () => {
|
|
209
|
+
const newPos = this.getPos();
|
|
210
|
+
if (typeof newPos !== "number" || newPos === this.currentPos) {
|
|
211
|
+
return;
|
|
212
|
+
}
|
|
213
|
+
this.currentPos = newPos;
|
|
214
|
+
this.renderer.updateProps({ getPos: () => this.getPos() });
|
|
215
|
+
};
|
|
216
|
+
if (this.options.trackNodeViewPosition) {
|
|
217
|
+
this.editor.on("update", this.handlePositionUpdate);
|
|
218
|
+
}
|
|
213
219
|
}
|
|
214
220
|
mount() {
|
|
215
221
|
var _a, _b;
|
|
@@ -226,6 +232,7 @@ var VueNodeView = class extends import_core2.NodeView {
|
|
|
226
232
|
updateAttributes: (attributes = {}) => this.updateAttributes(attributes),
|
|
227
233
|
deleteNode: () => this.deleteNode()
|
|
228
234
|
};
|
|
235
|
+
const mountProps = props;
|
|
229
236
|
const onDragStart = this.onDragStart.bind(this);
|
|
230
237
|
this.decorationClasses = Vue.observable({
|
|
231
238
|
value: this.getDecorationClasses()
|
|
@@ -243,21 +250,9 @@ var VueNodeView = class extends import_core2.NodeView {
|
|
|
243
250
|
this.handleSelectionUpdate = this.handleSelectionUpdate.bind(this);
|
|
244
251
|
this.editor.on("selectionUpdate", this.handleSelectionUpdate);
|
|
245
252
|
this.currentPos = this.getPos();
|
|
246
|
-
this.positionCheckCallback = () => {
|
|
247
|
-
if (!this.renderer) {
|
|
248
|
-
return;
|
|
249
|
-
}
|
|
250
|
-
const newPos = this.getPos();
|
|
251
|
-
if (typeof newPos !== "number" || newPos === this.currentPos) {
|
|
252
|
-
return;
|
|
253
|
-
}
|
|
254
|
-
this.currentPos = newPos;
|
|
255
|
-
this.renderer.updateProps({ getPos: () => this.getPos() });
|
|
256
|
-
};
|
|
257
|
-
(0, import_core2.schedulePositionCheck)(this.editor, this.positionCheckCallback);
|
|
258
253
|
this.renderer = new VueRenderer(Component, {
|
|
259
254
|
parent: this.editor.contentComponent,
|
|
260
|
-
propsData:
|
|
255
|
+
propsData: mountProps
|
|
261
256
|
});
|
|
262
257
|
}
|
|
263
258
|
/**
|
|
@@ -323,7 +318,6 @@ var VueNodeView = class extends import_core2.NodeView {
|
|
|
323
318
|
this.node = node;
|
|
324
319
|
this.decorations = decorations;
|
|
325
320
|
this.innerDecorations = innerDecorations;
|
|
326
|
-
this.currentPos = this.getPos();
|
|
327
321
|
return this.options.update({
|
|
328
322
|
oldNode,
|
|
329
323
|
oldDecorations,
|
|
@@ -337,20 +331,27 @@ var VueNodeView = class extends import_core2.NodeView {
|
|
|
337
331
|
if (node.type !== this.node.type) {
|
|
338
332
|
return false;
|
|
339
333
|
}
|
|
340
|
-
const
|
|
341
|
-
if (
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
this.
|
|
346
|
-
rerenderComponent({ node, decorations, innerDecorations, getPos: () => this.getPos() });
|
|
334
|
+
const nodeChanged = node !== this.node;
|
|
335
|
+
if (!nodeChanged) {
|
|
336
|
+
this.node = node;
|
|
337
|
+
this.decorations = decorations;
|
|
338
|
+
this.innerDecorations = innerDecorations;
|
|
339
|
+
this.decorationClasses.value = this.getDecorationClasses();
|
|
347
340
|
return true;
|
|
348
341
|
}
|
|
349
342
|
this.node = node;
|
|
350
343
|
this.decorations = decorations;
|
|
351
344
|
this.innerDecorations = innerDecorations;
|
|
352
|
-
this.currentPos =
|
|
353
|
-
|
|
345
|
+
this.currentPos = this.getPos();
|
|
346
|
+
const extraProps = {
|
|
347
|
+
node,
|
|
348
|
+
decorations,
|
|
349
|
+
innerDecorations
|
|
350
|
+
};
|
|
351
|
+
if (this.options.trackNodeViewPosition) {
|
|
352
|
+
extraProps.getPos = () => this.getPos();
|
|
353
|
+
}
|
|
354
|
+
rerenderComponent(extraProps);
|
|
354
355
|
return true;
|
|
355
356
|
}
|
|
356
357
|
/**
|
|
@@ -379,9 +380,8 @@ var VueNodeView = class extends import_core2.NodeView {
|
|
|
379
380
|
destroy() {
|
|
380
381
|
this.renderer.destroy();
|
|
381
382
|
this.editor.off("selectionUpdate", this.handleSelectionUpdate);
|
|
382
|
-
if (this.
|
|
383
|
-
|
|
384
|
-
this.positionCheckCallback = null;
|
|
383
|
+
if (this.options.trackNodeViewPosition) {
|
|
384
|
+
this.editor.off("update", this.handlePositionUpdate);
|
|
385
385
|
}
|
|
386
386
|
}
|
|
387
387
|
};
|
package/dist/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts","../src/Editor.ts","../src/EditorContent.ts","../src/NodeViewContent.ts","../src/NodeViewWrapper.ts","../src/VueNodeViewRenderer.ts","../src/Vue.ts","../src/VueRenderer.ts"],"sourcesContent":["export { Editor } from './Editor.js'\nexport * from './EditorContent.js'\nexport * from './NodeViewContent.js'\nexport * from './NodeViewWrapper.js'\nexport * from './VueNodeViewRenderer.js'\nexport * from './VueRenderer.js'\nexport * from '@tiptap/core'\n","import { Editor as CoreEditor } from '@tiptap/core'\nimport type Vue from 'vue'\n\nexport class Editor extends CoreEditor {\n public contentComponent: Vue | null = null\n}\n","import type { Component, CreateElement, PropType } from 'vue'\nimport type Vue from 'vue'\n\nimport type { Editor } from './Editor.js'\n\nexport interface EditorContentInterface extends Vue {\n editor: Editor\n}\n\nexport const EditorContent: Component = {\n name: 'EditorContent',\n\n props: {\n editor: {\n default: null,\n type: Object as PropType<Editor>,\n },\n },\n\n watch: {\n editor: {\n immediate: true,\n handler(this: EditorContentInterface, editor: Editor) {\n if (editor && editor.options.element) {\n this.$nextTick(() => {\n const element = this.$el\n\n if (!element || !editor.view.dom?.parentNode) {\n return\n }\n\n element.append(...editor.view.dom.parentNode.childNodes)\n editor.contentComponent = this\n\n editor.setOptions({\n element,\n })\n\n editor.createNodeViews()\n })\n }\n },\n },\n },\n\n render(createElement: CreateElement) {\n return createElement('div')\n },\n\n beforeDestroy(this: EditorContentInterface) {\n const { editor } = this\n\n if (!editor) {\n return\n }\n\n if (!editor.isDestroyed) {\n editor.view.setProps({\n nodeViews: {},\n })\n }\n\n editor.contentComponent = null\n\n if (!editor.view.dom?.parentNode) {\n return\n }\n\n // TODO using the new editor.mount method might allow us to remove this\n const newElement = document.createElement('div')\n\n newElement.append(...editor.view.dom.parentNode.childNodes)\n\n editor.setOptions({\n element: newElement,\n })\n },\n}\n","import type { Component, CreateElement } from 'vue'\nimport type Vue from 'vue'\n\nexport interface NodeViewContentInterface extends Vue {\n as: string\n}\n\nexport const NodeViewContent: Component = {\n props: {\n as: {\n type: String,\n default: 'div',\n },\n },\n\n render(this: NodeViewContentInterface, createElement: CreateElement) {\n return createElement(this.as, {\n style: {\n whiteSpace: 'pre-wrap',\n },\n attrs: {\n 'data-node-view-content': '',\n },\n })\n },\n}\n","import type { Component, CreateElement } from 'vue'\nimport type Vue from 'vue'\n\nexport interface NodeViewWrapperInterface extends Vue {\n as: string\n decorationClasses: {\n value: string\n }\n onDragStart: () => void\n}\n\nexport const NodeViewWrapper: Component = {\n props: {\n as: {\n type: String,\n default: 'div',\n },\n },\n\n inject: ['onDragStart', 'decorationClasses'],\n\n render(this: NodeViewWrapperInterface, createElement: CreateElement) {\n return createElement(\n this.as,\n {\n class: this.decorationClasses.value,\n style: {\n whiteSpace: 'normal',\n },\n attrs: {\n 'data-node-view-wrapper': '',\n },\n on: {\n dragstart: this.onDragStart,\n },\n },\n this.$slots.default,\n )\n },\n}\n","import type { DecorationWithType, NodeViewProps, NodeViewRenderer, NodeViewRendererOptions } from '@tiptap/core'\nimport { cancelPositionCheck, isNodeViewSelected, NodeView, schedulePositionCheck } from '@tiptap/core'\nimport type { Node as ProseMirrorNode } from '@tiptap/pm/model'\nimport type { Decoration, DecorationSource, NodeView as ProseMirrorNodeView } from '@tiptap/pm/view'\nimport type { VueConstructor } from 'vue'\nimport { booleanProp, functionProp, objectProp } from 'vue-ts-types'\n\nimport type { Editor } from './Editor.js'\nimport { Vue } from './Vue.js'\nimport { VueRenderer } from './VueRenderer.js'\n\nexport const nodeViewProps = {\n editor: objectProp<NodeViewProps['editor']>().required,\n node: objectProp<NodeViewProps['node']>().required,\n decorations: objectProp<NodeViewProps['decorations']>().required,\n selected: booleanProp().required,\n extension: objectProp<NodeViewProps['extension']>().required,\n getPos: functionProp<NodeViewProps['getPos']>().required,\n updateAttributes: functionProp<NodeViewProps['updateAttributes']>().required,\n deleteNode: functionProp<NodeViewProps['deleteNode']>().required,\n}\n\nexport interface VueNodeViewRendererOptions extends NodeViewRendererOptions {\n update:\n | ((props: {\n oldNode: ProseMirrorNode\n oldDecorations: readonly Decoration[]\n oldInnerDecorations: DecorationSource\n newNode: ProseMirrorNode\n newDecorations: readonly Decoration[]\n innerDecorations: DecorationSource\n updateProps: () => void\n }) => boolean)\n | null\n}\n\nclass VueNodeView extends NodeView<Vue | VueConstructor, Editor, VueNodeViewRendererOptions> {\n renderer!: VueRenderer\n\n /**\n * The last known position of this node view, used to detect position-only\n * changes that don't produce a new node object reference.\n */\n private currentPos: number | undefined\n\n /**\n * Callback registered with the per-editor position-update registry.\n * Stored so it can be unregistered in destroy().\n */\n private positionCheckCallback: (() => void) | null = null\n\n decorationClasses!: {\n value: string\n }\n\n mount() {\n const props = {\n editor: this.editor,\n node: this.node,\n decorations: this.decorations as DecorationWithType[],\n innerDecorations: this.innerDecorations,\n view: this.view,\n selected: false,\n extension: this.extension,\n HTMLAttributes: this.HTMLAttributes,\n getPos: () => this.getPos(),\n updateAttributes: (attributes = {}) => this.updateAttributes(attributes),\n deleteNode: () => this.deleteNode(),\n } satisfies NodeViewProps\n\n const onDragStart = this.onDragStart.bind(this)\n\n this.decorationClasses = Vue.observable({\n value: this.getDecorationClasses(),\n })\n\n // @ts-ignore\n const vue = this.editor.contentComponent?.$options._base ?? Vue // eslint-disable-line\n\n const Component = vue.extend(this.component).extend({\n props: Object.keys(props),\n provide: () => {\n return {\n onDragStart,\n decorationClasses: this.decorationClasses,\n }\n },\n })\n\n this.handleSelectionUpdate = this.handleSelectionUpdate.bind(this)\n this.editor.on('selectionUpdate', this.handleSelectionUpdate)\n this.currentPos = this.getPos()\n\n this.positionCheckCallback = () => {\n // Guard against the callback firing before the renderer is fully initialized.\n if (!this.renderer) {\n return\n }\n\n const newPos = this.getPos()\n\n if (typeof newPos !== 'number' || newPos === this.currentPos) {\n return\n }\n\n this.currentPos = newPos\n\n // Pass a fresh getPos reference so Vue's reactivity detects a prop change.\n this.renderer.updateProps({ getPos: () => this.getPos() })\n }\n\n schedulePositionCheck(this.editor, this.positionCheckCallback)\n\n this.renderer = new VueRenderer(Component, {\n parent: this.editor.contentComponent,\n propsData: props,\n })\n }\n\n /**\n * Return the DOM element.\n * This is the element that will be used to display the node view.\n */\n get dom() {\n if (!this.renderer.element.hasAttribute('data-node-view-wrapper')) {\n throw Error('Please use the NodeViewWrapper component for your node view.')\n }\n\n return this.renderer.element as HTMLElement\n }\n\n /**\n * Return the content DOM element.\n * This is the element that will be used to display the rich-text content of the node.\n */\n get contentDOM() {\n if (this.node.isLeaf) {\n return null\n }\n\n return this.dom.querySelector('[data-node-view-content]') as HTMLElement | null\n }\n\n /**\n * On editor selection update, check if the node is selected.\n * If it is, call `selectNode`, otherwise call `deselectNode`.\n */\n handleSelectionUpdate() {\n const pos = this.getPos()\n\n if (typeof pos !== 'number') {\n return\n }\n\n const isSelected = isNodeViewSelected({\n selection: this.editor.state.selection,\n pos,\n nodeSize: this.node.nodeSize,\n selectedOnTextSelection: this.options.selectedOnTextSelection,\n })\n\n if (isSelected) {\n if (this.renderer.ref.$props.selected) {\n return\n }\n\n this.selectNode()\n } else {\n if (!this.renderer.ref.$props.selected) {\n return\n }\n\n this.deselectNode()\n }\n }\n\n /**\n * On update, update the React component.\n * To prevent unnecessary updates, the `update` option can be used.\n */\n update(node: ProseMirrorNode, decorations: readonly Decoration[], innerDecorations: DecorationSource): boolean {\n const rerenderComponent = (props?: Record<string, any>) => {\n this.decorationClasses.value = this.getDecorationClasses()\n this.renderer.updateProps(props)\n }\n\n if (typeof this.options.update === 'function') {\n const oldNode = this.node\n const oldDecorations = this.decorations\n const oldInnerDecorations = this.innerDecorations\n\n this.node = node\n this.decorations = decorations\n this.innerDecorations = innerDecorations\n this.currentPos = this.getPos()\n\n return this.options.update({\n oldNode,\n oldDecorations,\n newNode: node,\n newDecorations: decorations,\n oldInnerDecorations,\n innerDecorations,\n updateProps: () => rerenderComponent({ node, decorations, innerDecorations }),\n })\n }\n\n if (node.type !== this.node.type) {\n return false\n }\n\n const newPos = this.getPos()\n\n if (node === this.node && this.decorations === decorations && this.innerDecorations === innerDecorations) {\n if (newPos === this.currentPos) {\n return true\n }\n\n // Position changed without a content/decoration change — trigger re-render\n // so the component receives an up-to-date value from getPos().\n // Pass a fresh getPos reference so Vue's reactivity detects a prop change.\n this.currentPos = newPos\n rerenderComponent({ node, decorations, innerDecorations, getPos: () => this.getPos() })\n return true\n }\n\n this.node = node\n this.decorations = decorations\n this.innerDecorations = innerDecorations\n this.currentPos = newPos\n\n rerenderComponent({ node, decorations, innerDecorations })\n\n return true\n }\n\n /**\n * Select the node.\n * Add the `selected` prop and the `ProseMirror-selectednode` class.\n */\n selectNode() {\n this.renderer.updateProps({\n selected: true,\n })\n this.renderer.element.classList.add('ProseMirror-selectednode')\n }\n\n /**\n * Deselect the node.\n * Remove the `selected` prop and the `ProseMirror-selectednode` class.\n */\n deselectNode() {\n this.renderer.updateProps({\n selected: false,\n })\n this.renderer.element.classList.remove('ProseMirror-selectednode')\n }\n\n getDecorationClasses() {\n return (\n this.decorations\n // @ts-ignore\n .flatMap(item => item.type.attrs.class)\n .join(' ')\n )\n }\n\n destroy() {\n this.renderer.destroy()\n this.editor.off('selectionUpdate', this.handleSelectionUpdate)\n\n if (this.positionCheckCallback) {\n cancelPositionCheck(this.editor, this.positionCheckCallback)\n this.positionCheckCallback = null\n }\n }\n}\n\nexport function VueNodeViewRenderer(\n component: Vue | VueConstructor,\n options?: Partial<VueNodeViewRendererOptions>,\n): NodeViewRenderer {\n return props => {\n // try to get the parent component\n // this is important for vue devtools to show the component hierarchy correctly\n // maybe it’s `undefined` because <editor-content> isn’t rendered yet\n if (!(props.editor as Editor).contentComponent) {\n return {} as unknown as ProseMirrorNodeView\n }\n\n return new VueNodeView(component, props, options)\n }\n}\n","import type { VueConstructor } from 'vue'\nimport VueDefault from 'vue'\n\n// With nodenext module resolution, TypeScript treats the default import as the module type.\n// We need to explicitly type it as VueConstructor to access static methods like extend and observable.\n// This is necessary because Vue 2's type definitions export Vue as VueConstructor, but nodenext\n// doesn't correctly infer the default export type.\nexport const Vue: VueConstructor = VueDefault as unknown as VueConstructor\n","import type { VueConstructor } from 'vue'\n\nimport { Vue } from './Vue.js'\n\n/**\n * The VueRenderer class is responsible for rendering a Vue component as a ProseMirror node view.\n */\nexport class VueRenderer {\n ref!: Vue\n\n constructor(component: Vue | VueConstructor, props: any) {\n const Component = typeof component === 'function' ? component : Vue.extend(component)\n\n this.ref = new Component(props).$mount()\n }\n\n get element(): Element {\n return this.ref.$el\n }\n\n updateProps(props: Record<string, any> = {}): void {\n if (!this.ref.$props) {\n return\n }\n\n // prevents `Avoid mutating a prop directly` error message\n // Fix: `VueNodeViewRenderer` change vue Constructor `config.silent` not working\n const currentVueConstructor = this.ref.$props.editor?.contentComponent?.$options._base ?? Vue // eslint-disable-line\n const originalSilent = currentVueConstructor.config.silent\n\n currentVueConstructor.config.silent = true\n\n Object.entries(props).forEach(([key, value]) => {\n this.ref.$props[key] = value\n })\n\n currentVueConstructor.config.silent = originalSilent\n }\n\n destroy(): void {\n this.ref.$destroy()\n }\n}\n"],"mappings":"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","names":["CoreEditor","import_core","VueDefault"]}
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/Editor.ts","../src/EditorContent.ts","../src/NodeViewContent.ts","../src/NodeViewWrapper.ts","../src/VueNodeViewRenderer.ts","../src/Vue.ts","../src/VueRenderer.ts"],"sourcesContent":["export { Editor } from './Editor.js'\nexport * from './EditorContent.js'\nexport * from './NodeViewContent.js'\nexport * from './NodeViewWrapper.js'\nexport * from './VueNodeViewRenderer.js'\nexport * from './VueRenderer.js'\nexport * from '@tiptap/core'\n","import { Editor as CoreEditor } from '@tiptap/core'\nimport type Vue from 'vue'\n\nexport class Editor extends CoreEditor {\n public contentComponent: Vue | null = null\n}\n","import type { Component, CreateElement, PropType } from 'vue'\nimport type Vue from 'vue'\n\nimport type { Editor } from './Editor.js'\n\nexport interface EditorContentInterface extends Vue {\n editor: Editor\n}\n\nexport const EditorContent: Component = {\n name: 'EditorContent',\n\n props: {\n editor: {\n default: null,\n type: Object as PropType<Editor>,\n },\n },\n\n watch: {\n editor: {\n immediate: true,\n handler(this: EditorContentInterface, editor: Editor) {\n if (editor && editor.options.element) {\n this.$nextTick(() => {\n const element = this.$el\n\n if (!element || !editor.view.dom?.parentNode) {\n return\n }\n\n element.append(...editor.view.dom.parentNode.childNodes)\n editor.contentComponent = this\n\n editor.setOptions({\n element,\n })\n\n editor.createNodeViews()\n })\n }\n },\n },\n },\n\n render(createElement: CreateElement) {\n return createElement('div')\n },\n\n beforeDestroy(this: EditorContentInterface) {\n const { editor } = this\n\n if (!editor) {\n return\n }\n\n if (!editor.isDestroyed) {\n editor.view.setProps({\n nodeViews: {},\n })\n }\n\n editor.contentComponent = null\n\n if (!editor.view.dom?.parentNode) {\n return\n }\n\n // TODO using the new editor.mount method might allow us to remove this\n const newElement = document.createElement('div')\n\n newElement.append(...editor.view.dom.parentNode.childNodes)\n\n editor.setOptions({\n element: newElement,\n })\n },\n}\n","import type { Component, CreateElement } from 'vue'\nimport type Vue from 'vue'\n\nexport interface NodeViewContentInterface extends Vue {\n as: string\n}\n\nexport const NodeViewContent: Component = {\n props: {\n as: {\n type: String,\n default: 'div',\n },\n },\n\n render(this: NodeViewContentInterface, createElement: CreateElement) {\n return createElement(this.as, {\n style: {\n whiteSpace: 'pre-wrap',\n },\n attrs: {\n 'data-node-view-content': '',\n },\n })\n },\n}\n","import type { Component, CreateElement } from 'vue'\nimport type Vue from 'vue'\n\nexport interface NodeViewWrapperInterface extends Vue {\n as: string\n decorationClasses: {\n value: string\n }\n onDragStart: () => void\n}\n\nexport const NodeViewWrapper: Component = {\n props: {\n as: {\n type: String,\n default: 'div',\n },\n },\n\n inject: ['onDragStart', 'decorationClasses'],\n\n render(this: NodeViewWrapperInterface, createElement: CreateElement) {\n return createElement(\n this.as,\n {\n class: this.decorationClasses.value,\n style: {\n whiteSpace: 'normal',\n },\n attrs: {\n 'data-node-view-wrapper': '',\n },\n on: {\n dragstart: this.onDragStart,\n },\n },\n this.$slots.default,\n )\n },\n}\n","import type {\n DecorationWithType,\n NodeViewProps,\n NodeViewRenderer,\n NodeViewRendererOptions,\n NodeViewRendererProps,\n} from '@tiptap/core'\nimport { isNodeViewSelected, NodeView } from '@tiptap/core'\nimport type { Node as ProseMirrorNode } from '@tiptap/pm/model'\nimport type { Decoration, DecorationSource, NodeView as ProseMirrorNodeView } from '@tiptap/pm/view'\nimport type { VueConstructor } from 'vue'\nimport { booleanProp, functionProp, objectProp } from 'vue-ts-types'\n\nimport type { Editor } from './Editor.js'\nimport { Vue } from './Vue.js'\nimport { VueRenderer } from './VueRenderer.js'\n\nexport const nodeViewProps = {\n editor: objectProp<NodeViewProps['editor']>().required,\n node: objectProp<NodeViewProps['node']>().required,\n decorations: objectProp<NodeViewProps['decorations']>().required,\n selected: booleanProp().required,\n extension: objectProp<NodeViewProps['extension']>().required,\n getPos: functionProp<NodeViewProps['getPos']>().required,\n updateAttributes: functionProp<NodeViewProps['updateAttributes']>().required,\n deleteNode: functionProp<NodeViewProps['deleteNode']>().required,\n}\n\nexport interface VueNodeViewRendererOptions extends NodeViewRendererOptions {\n update:\n | ((props: {\n oldNode: ProseMirrorNode\n oldDecorations: readonly Decoration[]\n oldInnerDecorations: DecorationSource\n newNode: ProseMirrorNode\n newDecorations: readonly Decoration[]\n innerDecorations: DecorationSource\n updateProps: () => void\n }) => boolean)\n | null\n}\n\nclass VueNodeView extends NodeView<Vue | VueConstructor, Editor, VueNodeViewRendererOptions> {\n renderer!: VueRenderer\n\n decorationClasses!: {\n value: string\n }\n\n private currentPos: number | undefined\n\n constructor(\n component: Vue | VueConstructor,\n props: NodeViewRendererProps,\n options?: Partial<VueNodeViewRendererOptions>,\n ) {\n super(component, props, options)\n\n if (this.options.trackNodeViewPosition) {\n this.editor.on('update', this.handlePositionUpdate)\n }\n }\n\n private handlePositionUpdate = () => {\n const newPos = this.getPos()\n if (typeof newPos !== 'number' || newPos === this.currentPos) {\n return\n }\n this.currentPos = newPos\n this.renderer.updateProps({ getPos: () => this.getPos() })\n }\n\n mount() {\n const props: Record<string, any> = {\n editor: this.editor,\n node: this.node,\n decorations: this.decorations as DecorationWithType[],\n innerDecorations: this.innerDecorations,\n view: this.view,\n selected: false,\n extension: this.extension,\n HTMLAttributes: this.HTMLAttributes,\n getPos: () => this.getPos(),\n updateAttributes: (attributes = {}) => this.updateAttributes(attributes),\n deleteNode: () => this.deleteNode(),\n }\n\n const mountProps = props as NodeViewProps\n\n const onDragStart = this.onDragStart.bind(this)\n\n this.decorationClasses = Vue.observable({\n value: this.getDecorationClasses(),\n })\n\n // @ts-ignore\n const vue = this.editor.contentComponent?.$options._base ?? Vue // eslint-disable-line\n\n const Component = vue.extend(this.component).extend({\n props: Object.keys(props),\n provide: () => {\n return {\n onDragStart,\n decorationClasses: this.decorationClasses,\n }\n },\n })\n\n this.handleSelectionUpdate = this.handleSelectionUpdate.bind(this)\n this.editor.on('selectionUpdate', this.handleSelectionUpdate)\n\n this.currentPos = this.getPos()\n\n this.renderer = new VueRenderer(Component, {\n parent: this.editor.contentComponent,\n propsData: mountProps,\n })\n }\n\n /**\n * Return the DOM element.\n * This is the element that will be used to display the node view.\n */\n get dom() {\n if (!this.renderer.element.hasAttribute('data-node-view-wrapper')) {\n throw Error('Please use the NodeViewWrapper component for your node view.')\n }\n\n return this.renderer.element as HTMLElement\n }\n\n /**\n * Return the content DOM element.\n * This is the element that will be used to display the rich-text content of the node.\n */\n get contentDOM() {\n if (this.node.isLeaf) {\n return null\n }\n\n return this.dom.querySelector('[data-node-view-content]') as HTMLElement | null\n }\n\n /**\n * On editor selection update, check if the node is selected.\n * If it is, call `selectNode`, otherwise call `deselectNode`.\n */\n handleSelectionUpdate() {\n const pos = this.getPos()\n\n if (typeof pos !== 'number') {\n return\n }\n\n const isSelected = isNodeViewSelected({\n selection: this.editor.state.selection,\n pos,\n nodeSize: this.node.nodeSize,\n selectedOnTextSelection: this.options.selectedOnTextSelection,\n })\n\n if (isSelected) {\n if (this.renderer.ref.$props.selected) {\n return\n }\n\n this.selectNode()\n } else {\n if (!this.renderer.ref.$props.selected) {\n return\n }\n\n this.deselectNode()\n }\n }\n\n /**\n * On update, update the React component.\n * To prevent unnecessary updates, the `update` option can be used.\n */\n update(node: ProseMirrorNode, decorations: readonly Decoration[], innerDecorations: DecorationSource): boolean {\n const rerenderComponent = (props?: Record<string, any>) => {\n this.decorationClasses.value = this.getDecorationClasses()\n this.renderer.updateProps(props)\n }\n\n if (typeof this.options.update === 'function') {\n const oldNode = this.node\n const oldDecorations = this.decorations\n const oldInnerDecorations = this.innerDecorations\n\n this.node = node\n this.decorations = decorations\n this.innerDecorations = innerDecorations\n\n return this.options.update({\n oldNode,\n oldDecorations,\n newNode: node,\n newDecorations: decorations,\n oldInnerDecorations,\n innerDecorations,\n updateProps: () => rerenderComponent({ node, decorations, innerDecorations }),\n })\n }\n\n if (node.type !== this.node.type) {\n return false\n }\n\n const nodeChanged = node !== this.node\n\n // Node reference unchanged — only decorations may have changed.\n // ProseMirror renders decorations independently on the contentDOM,\n // and the getPos closure (bound in mount()) calls through to\n // ProseMirror's position function at call time, so it is always\n // current. Update internal refs, refresh decoration classes for\n // the wrapper component, and skip the Vue re-render.\n if (!nodeChanged) {\n this.node = node\n this.decorations = decorations\n this.innerDecorations = innerDecorations\n this.decorationClasses.value = this.getDecorationClasses()\n return true\n }\n\n this.node = node\n this.decorations = decorations\n this.innerDecorations = innerDecorations\n this.currentPos = this.getPos()\n\n const extraProps: Record<string, any> = {\n node,\n decorations,\n innerDecorations,\n }\n\n if (this.options.trackNodeViewPosition) {\n extraProps.getPos = () => this.getPos()\n }\n\n rerenderComponent(extraProps)\n\n return true\n }\n\n /**\n * Select the node.\n * Add the `selected` prop and the `ProseMirror-selectednode` class.\n */\n selectNode() {\n this.renderer.updateProps({\n selected: true,\n })\n this.renderer.element.classList.add('ProseMirror-selectednode')\n }\n\n /**\n * Deselect the node.\n * Remove the `selected` prop and the `ProseMirror-selectednode` class.\n */\n deselectNode() {\n this.renderer.updateProps({\n selected: false,\n })\n this.renderer.element.classList.remove('ProseMirror-selectednode')\n }\n\n getDecorationClasses() {\n return (\n this.decorations\n // @ts-ignore\n .flatMap(item => item.type.attrs.class)\n .join(' ')\n )\n }\n\n destroy() {\n this.renderer.destroy()\n this.editor.off('selectionUpdate', this.handleSelectionUpdate)\n\n if (this.options.trackNodeViewPosition) {\n this.editor.off('update', this.handlePositionUpdate)\n }\n }\n}\n\nexport function VueNodeViewRenderer(\n component: Vue | VueConstructor,\n options?: Partial<VueNodeViewRendererOptions>,\n): NodeViewRenderer {\n return props => {\n // try to get the parent component\n // this is important for vue devtools to show the component hierarchy correctly\n // maybe it’s `undefined` because <editor-content> isn’t rendered yet\n if (!(props.editor as Editor).contentComponent) {\n return {} as unknown as ProseMirrorNodeView\n }\n\n return new VueNodeView(component, props, options)\n }\n}\n","import type { VueConstructor } from 'vue'\nimport VueDefault from 'vue'\n\n// With nodenext module resolution, TypeScript treats the default import as the module type.\n// We need to explicitly type it as VueConstructor to access static methods like extend and observable.\n// This is necessary because Vue 2's type definitions export Vue as VueConstructor, but nodenext\n// doesn't correctly infer the default export type.\nexport const Vue: VueConstructor = VueDefault as unknown as VueConstructor\n","import type { VueConstructor } from 'vue'\n\nimport { Vue } from './Vue.js'\n\n/**\n * The VueRenderer class is responsible for rendering a Vue component as a ProseMirror node view.\n */\nexport class VueRenderer {\n ref!: Vue\n\n constructor(component: Vue | VueConstructor, props: any) {\n const Component = typeof component === 'function' ? component : Vue.extend(component)\n\n this.ref = new Component(props).$mount()\n }\n\n get element(): Element {\n return this.ref.$el\n }\n\n updateProps(props: Record<string, any> = {}): void {\n if (!this.ref.$props) {\n return\n }\n\n // prevents `Avoid mutating a prop directly` error message\n // Fix: `VueNodeViewRenderer` change vue Constructor `config.silent` not working\n const currentVueConstructor = this.ref.$props.editor?.contentComponent?.$options._base ?? Vue // eslint-disable-line\n const originalSilent = currentVueConstructor.config.silent\n\n currentVueConstructor.config.silent = true\n\n Object.entries(props).forEach(([key, value]) => {\n this.ref.$props[key] = value\n })\n\n currentVueConstructor.config.silent = originalSilent\n }\n\n destroy(): void {\n this.ref.$destroy()\n }\n}\n"],"mappings":"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","names":["CoreEditor","import_core","VueDefault"]}
|
package/dist/index.js
CHANGED
|
@@ -114,7 +114,7 @@ var NodeViewWrapper = {
|
|
|
114
114
|
};
|
|
115
115
|
|
|
116
116
|
// src/VueNodeViewRenderer.ts
|
|
117
|
-
import {
|
|
117
|
+
import { isNodeViewSelected, NodeView } from "@tiptap/core";
|
|
118
118
|
import { booleanProp, functionProp, objectProp } from "vue-ts-types";
|
|
119
119
|
|
|
120
120
|
// src/Vue.ts
|
|
@@ -160,13 +160,19 @@ var nodeViewProps = {
|
|
|
160
160
|
deleteNode: functionProp().required
|
|
161
161
|
};
|
|
162
162
|
var VueNodeView = class extends NodeView {
|
|
163
|
-
constructor() {
|
|
164
|
-
super(
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
163
|
+
constructor(component, props, options) {
|
|
164
|
+
super(component, props, options);
|
|
165
|
+
this.handlePositionUpdate = () => {
|
|
166
|
+
const newPos = this.getPos();
|
|
167
|
+
if (typeof newPos !== "number" || newPos === this.currentPos) {
|
|
168
|
+
return;
|
|
169
|
+
}
|
|
170
|
+
this.currentPos = newPos;
|
|
171
|
+
this.renderer.updateProps({ getPos: () => this.getPos() });
|
|
172
|
+
};
|
|
173
|
+
if (this.options.trackNodeViewPosition) {
|
|
174
|
+
this.editor.on("update", this.handlePositionUpdate);
|
|
175
|
+
}
|
|
170
176
|
}
|
|
171
177
|
mount() {
|
|
172
178
|
var _a, _b;
|
|
@@ -183,6 +189,7 @@ var VueNodeView = class extends NodeView {
|
|
|
183
189
|
updateAttributes: (attributes = {}) => this.updateAttributes(attributes),
|
|
184
190
|
deleteNode: () => this.deleteNode()
|
|
185
191
|
};
|
|
192
|
+
const mountProps = props;
|
|
186
193
|
const onDragStart = this.onDragStart.bind(this);
|
|
187
194
|
this.decorationClasses = Vue.observable({
|
|
188
195
|
value: this.getDecorationClasses()
|
|
@@ -200,21 +207,9 @@ var VueNodeView = class extends NodeView {
|
|
|
200
207
|
this.handleSelectionUpdate = this.handleSelectionUpdate.bind(this);
|
|
201
208
|
this.editor.on("selectionUpdate", this.handleSelectionUpdate);
|
|
202
209
|
this.currentPos = this.getPos();
|
|
203
|
-
this.positionCheckCallback = () => {
|
|
204
|
-
if (!this.renderer) {
|
|
205
|
-
return;
|
|
206
|
-
}
|
|
207
|
-
const newPos = this.getPos();
|
|
208
|
-
if (typeof newPos !== "number" || newPos === this.currentPos) {
|
|
209
|
-
return;
|
|
210
|
-
}
|
|
211
|
-
this.currentPos = newPos;
|
|
212
|
-
this.renderer.updateProps({ getPos: () => this.getPos() });
|
|
213
|
-
};
|
|
214
|
-
schedulePositionCheck(this.editor, this.positionCheckCallback);
|
|
215
210
|
this.renderer = new VueRenderer(Component, {
|
|
216
211
|
parent: this.editor.contentComponent,
|
|
217
|
-
propsData:
|
|
212
|
+
propsData: mountProps
|
|
218
213
|
});
|
|
219
214
|
}
|
|
220
215
|
/**
|
|
@@ -280,7 +275,6 @@ var VueNodeView = class extends NodeView {
|
|
|
280
275
|
this.node = node;
|
|
281
276
|
this.decorations = decorations;
|
|
282
277
|
this.innerDecorations = innerDecorations;
|
|
283
|
-
this.currentPos = this.getPos();
|
|
284
278
|
return this.options.update({
|
|
285
279
|
oldNode,
|
|
286
280
|
oldDecorations,
|
|
@@ -294,20 +288,27 @@ var VueNodeView = class extends NodeView {
|
|
|
294
288
|
if (node.type !== this.node.type) {
|
|
295
289
|
return false;
|
|
296
290
|
}
|
|
297
|
-
const
|
|
298
|
-
if (
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
this.
|
|
303
|
-
rerenderComponent({ node, decorations, innerDecorations, getPos: () => this.getPos() });
|
|
291
|
+
const nodeChanged = node !== this.node;
|
|
292
|
+
if (!nodeChanged) {
|
|
293
|
+
this.node = node;
|
|
294
|
+
this.decorations = decorations;
|
|
295
|
+
this.innerDecorations = innerDecorations;
|
|
296
|
+
this.decorationClasses.value = this.getDecorationClasses();
|
|
304
297
|
return true;
|
|
305
298
|
}
|
|
306
299
|
this.node = node;
|
|
307
300
|
this.decorations = decorations;
|
|
308
301
|
this.innerDecorations = innerDecorations;
|
|
309
|
-
this.currentPos =
|
|
310
|
-
|
|
302
|
+
this.currentPos = this.getPos();
|
|
303
|
+
const extraProps = {
|
|
304
|
+
node,
|
|
305
|
+
decorations,
|
|
306
|
+
innerDecorations
|
|
307
|
+
};
|
|
308
|
+
if (this.options.trackNodeViewPosition) {
|
|
309
|
+
extraProps.getPos = () => this.getPos();
|
|
310
|
+
}
|
|
311
|
+
rerenderComponent(extraProps);
|
|
311
312
|
return true;
|
|
312
313
|
}
|
|
313
314
|
/**
|
|
@@ -336,9 +337,8 @@ var VueNodeView = class extends NodeView {
|
|
|
336
337
|
destroy() {
|
|
337
338
|
this.renderer.destroy();
|
|
338
339
|
this.editor.off("selectionUpdate", this.handleSelectionUpdate);
|
|
339
|
-
if (this.
|
|
340
|
-
|
|
341
|
-
this.positionCheckCallback = null;
|
|
340
|
+
if (this.options.trackNodeViewPosition) {
|
|
341
|
+
this.editor.off("update", this.handlePositionUpdate);
|
|
342
342
|
}
|
|
343
343
|
}
|
|
344
344
|
};
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/Editor.ts","../src/EditorContent.ts","../src/NodeViewContent.ts","../src/NodeViewWrapper.ts","../src/VueNodeViewRenderer.ts","../src/Vue.ts","../src/VueRenderer.ts","../src/index.ts"],"sourcesContent":["import { Editor as CoreEditor } from '@tiptap/core'\nimport type Vue from 'vue'\n\nexport class Editor extends CoreEditor {\n public contentComponent: Vue | null = null\n}\n","import type { Component, CreateElement, PropType } from 'vue'\nimport type Vue from 'vue'\n\nimport type { Editor } from './Editor.js'\n\nexport interface EditorContentInterface extends Vue {\n editor: Editor\n}\n\nexport const EditorContent: Component = {\n name: 'EditorContent',\n\n props: {\n editor: {\n default: null,\n type: Object as PropType<Editor>,\n },\n },\n\n watch: {\n editor: {\n immediate: true,\n handler(this: EditorContentInterface, editor: Editor) {\n if (editor && editor.options.element) {\n this.$nextTick(() => {\n const element = this.$el\n\n if (!element || !editor.view.dom?.parentNode) {\n return\n }\n\n element.append(...editor.view.dom.parentNode.childNodes)\n editor.contentComponent = this\n\n editor.setOptions({\n element,\n })\n\n editor.createNodeViews()\n })\n }\n },\n },\n },\n\n render(createElement: CreateElement) {\n return createElement('div')\n },\n\n beforeDestroy(this: EditorContentInterface) {\n const { editor } = this\n\n if (!editor) {\n return\n }\n\n if (!editor.isDestroyed) {\n editor.view.setProps({\n nodeViews: {},\n })\n }\n\n editor.contentComponent = null\n\n if (!editor.view.dom?.parentNode) {\n return\n }\n\n // TODO using the new editor.mount method might allow us to remove this\n const newElement = document.createElement('div')\n\n newElement.append(...editor.view.dom.parentNode.childNodes)\n\n editor.setOptions({\n element: newElement,\n })\n },\n}\n","import type { Component, CreateElement } from 'vue'\nimport type Vue from 'vue'\n\nexport interface NodeViewContentInterface extends Vue {\n as: string\n}\n\nexport const NodeViewContent: Component = {\n props: {\n as: {\n type: String,\n default: 'div',\n },\n },\n\n render(this: NodeViewContentInterface, createElement: CreateElement) {\n return createElement(this.as, {\n style: {\n whiteSpace: 'pre-wrap',\n },\n attrs: {\n 'data-node-view-content': '',\n },\n })\n },\n}\n","import type { Component, CreateElement } from 'vue'\nimport type Vue from 'vue'\n\nexport interface NodeViewWrapperInterface extends Vue {\n as: string\n decorationClasses: {\n value: string\n }\n onDragStart: () => void\n}\n\nexport const NodeViewWrapper: Component = {\n props: {\n as: {\n type: String,\n default: 'div',\n },\n },\n\n inject: ['onDragStart', 'decorationClasses'],\n\n render(this: NodeViewWrapperInterface, createElement: CreateElement) {\n return createElement(\n this.as,\n {\n class: this.decorationClasses.value,\n style: {\n whiteSpace: 'normal',\n },\n attrs: {\n 'data-node-view-wrapper': '',\n },\n on: {\n dragstart: this.onDragStart,\n },\n },\n this.$slots.default,\n )\n },\n}\n","import type { DecorationWithType, NodeViewProps, NodeViewRenderer, NodeViewRendererOptions } from '@tiptap/core'\nimport { cancelPositionCheck, isNodeViewSelected, NodeView, schedulePositionCheck } from '@tiptap/core'\nimport type { Node as ProseMirrorNode } from '@tiptap/pm/model'\nimport type { Decoration, DecorationSource, NodeView as ProseMirrorNodeView } from '@tiptap/pm/view'\nimport type { VueConstructor } from 'vue'\nimport { booleanProp, functionProp, objectProp } from 'vue-ts-types'\n\nimport type { Editor } from './Editor.js'\nimport { Vue } from './Vue.js'\nimport { VueRenderer } from './VueRenderer.js'\n\nexport const nodeViewProps = {\n editor: objectProp<NodeViewProps['editor']>().required,\n node: objectProp<NodeViewProps['node']>().required,\n decorations: objectProp<NodeViewProps['decorations']>().required,\n selected: booleanProp().required,\n extension: objectProp<NodeViewProps['extension']>().required,\n getPos: functionProp<NodeViewProps['getPos']>().required,\n updateAttributes: functionProp<NodeViewProps['updateAttributes']>().required,\n deleteNode: functionProp<NodeViewProps['deleteNode']>().required,\n}\n\nexport interface VueNodeViewRendererOptions extends NodeViewRendererOptions {\n update:\n | ((props: {\n oldNode: ProseMirrorNode\n oldDecorations: readonly Decoration[]\n oldInnerDecorations: DecorationSource\n newNode: ProseMirrorNode\n newDecorations: readonly Decoration[]\n innerDecorations: DecorationSource\n updateProps: () => void\n }) => boolean)\n | null\n}\n\nclass VueNodeView extends NodeView<Vue | VueConstructor, Editor, VueNodeViewRendererOptions> {\n renderer!: VueRenderer\n\n /**\n * The last known position of this node view, used to detect position-only\n * changes that don't produce a new node object reference.\n */\n private currentPos: number | undefined\n\n /**\n * Callback registered with the per-editor position-update registry.\n * Stored so it can be unregistered in destroy().\n */\n private positionCheckCallback: (() => void) | null = null\n\n decorationClasses!: {\n value: string\n }\n\n mount() {\n const props = {\n editor: this.editor,\n node: this.node,\n decorations: this.decorations as DecorationWithType[],\n innerDecorations: this.innerDecorations,\n view: this.view,\n selected: false,\n extension: this.extension,\n HTMLAttributes: this.HTMLAttributes,\n getPos: () => this.getPos(),\n updateAttributes: (attributes = {}) => this.updateAttributes(attributes),\n deleteNode: () => this.deleteNode(),\n } satisfies NodeViewProps\n\n const onDragStart = this.onDragStart.bind(this)\n\n this.decorationClasses = Vue.observable({\n value: this.getDecorationClasses(),\n })\n\n // @ts-ignore\n const vue = this.editor.contentComponent?.$options._base ?? Vue // eslint-disable-line\n\n const Component = vue.extend(this.component).extend({\n props: Object.keys(props),\n provide: () => {\n return {\n onDragStart,\n decorationClasses: this.decorationClasses,\n }\n },\n })\n\n this.handleSelectionUpdate = this.handleSelectionUpdate.bind(this)\n this.editor.on('selectionUpdate', this.handleSelectionUpdate)\n this.currentPos = this.getPos()\n\n this.positionCheckCallback = () => {\n // Guard against the callback firing before the renderer is fully initialized.\n if (!this.renderer) {\n return\n }\n\n const newPos = this.getPos()\n\n if (typeof newPos !== 'number' || newPos === this.currentPos) {\n return\n }\n\n this.currentPos = newPos\n\n // Pass a fresh getPos reference so Vue's reactivity detects a prop change.\n this.renderer.updateProps({ getPos: () => this.getPos() })\n }\n\n schedulePositionCheck(this.editor, this.positionCheckCallback)\n\n this.renderer = new VueRenderer(Component, {\n parent: this.editor.contentComponent,\n propsData: props,\n })\n }\n\n /**\n * Return the DOM element.\n * This is the element that will be used to display the node view.\n */\n get dom() {\n if (!this.renderer.element.hasAttribute('data-node-view-wrapper')) {\n throw Error('Please use the NodeViewWrapper component for your node view.')\n }\n\n return this.renderer.element as HTMLElement\n }\n\n /**\n * Return the content DOM element.\n * This is the element that will be used to display the rich-text content of the node.\n */\n get contentDOM() {\n if (this.node.isLeaf) {\n return null\n }\n\n return this.dom.querySelector('[data-node-view-content]') as HTMLElement | null\n }\n\n /**\n * On editor selection update, check if the node is selected.\n * If it is, call `selectNode`, otherwise call `deselectNode`.\n */\n handleSelectionUpdate() {\n const pos = this.getPos()\n\n if (typeof pos !== 'number') {\n return\n }\n\n const isSelected = isNodeViewSelected({\n selection: this.editor.state.selection,\n pos,\n nodeSize: this.node.nodeSize,\n selectedOnTextSelection: this.options.selectedOnTextSelection,\n })\n\n if (isSelected) {\n if (this.renderer.ref.$props.selected) {\n return\n }\n\n this.selectNode()\n } else {\n if (!this.renderer.ref.$props.selected) {\n return\n }\n\n this.deselectNode()\n }\n }\n\n /**\n * On update, update the React component.\n * To prevent unnecessary updates, the `update` option can be used.\n */\n update(node: ProseMirrorNode, decorations: readonly Decoration[], innerDecorations: DecorationSource): boolean {\n const rerenderComponent = (props?: Record<string, any>) => {\n this.decorationClasses.value = this.getDecorationClasses()\n this.renderer.updateProps(props)\n }\n\n if (typeof this.options.update === 'function') {\n const oldNode = this.node\n const oldDecorations = this.decorations\n const oldInnerDecorations = this.innerDecorations\n\n this.node = node\n this.decorations = decorations\n this.innerDecorations = innerDecorations\n this.currentPos = this.getPos()\n\n return this.options.update({\n oldNode,\n oldDecorations,\n newNode: node,\n newDecorations: decorations,\n oldInnerDecorations,\n innerDecorations,\n updateProps: () => rerenderComponent({ node, decorations, innerDecorations }),\n })\n }\n\n if (node.type !== this.node.type) {\n return false\n }\n\n const newPos = this.getPos()\n\n if (node === this.node && this.decorations === decorations && this.innerDecorations === innerDecorations) {\n if (newPos === this.currentPos) {\n return true\n }\n\n // Position changed without a content/decoration change — trigger re-render\n // so the component receives an up-to-date value from getPos().\n // Pass a fresh getPos reference so Vue's reactivity detects a prop change.\n this.currentPos = newPos\n rerenderComponent({ node, decorations, innerDecorations, getPos: () => this.getPos() })\n return true\n }\n\n this.node = node\n this.decorations = decorations\n this.innerDecorations = innerDecorations\n this.currentPos = newPos\n\n rerenderComponent({ node, decorations, innerDecorations })\n\n return true\n }\n\n /**\n * Select the node.\n * Add the `selected` prop and the `ProseMirror-selectednode` class.\n */\n selectNode() {\n this.renderer.updateProps({\n selected: true,\n })\n this.renderer.element.classList.add('ProseMirror-selectednode')\n }\n\n /**\n * Deselect the node.\n * Remove the `selected` prop and the `ProseMirror-selectednode` class.\n */\n deselectNode() {\n this.renderer.updateProps({\n selected: false,\n })\n this.renderer.element.classList.remove('ProseMirror-selectednode')\n }\n\n getDecorationClasses() {\n return (\n this.decorations\n // @ts-ignore\n .flatMap(item => item.type.attrs.class)\n .join(' ')\n )\n }\n\n destroy() {\n this.renderer.destroy()\n this.editor.off('selectionUpdate', this.handleSelectionUpdate)\n\n if (this.positionCheckCallback) {\n cancelPositionCheck(this.editor, this.positionCheckCallback)\n this.positionCheckCallback = null\n }\n }\n}\n\nexport function VueNodeViewRenderer(\n component: Vue | VueConstructor,\n options?: Partial<VueNodeViewRendererOptions>,\n): NodeViewRenderer {\n return props => {\n // try to get the parent component\n // this is important for vue devtools to show the component hierarchy correctly\n // maybe it’s `undefined` because <editor-content> isn’t rendered yet\n if (!(props.editor as Editor).contentComponent) {\n return {} as unknown as ProseMirrorNodeView\n }\n\n return new VueNodeView(component, props, options)\n }\n}\n","import type { VueConstructor } from 'vue'\nimport VueDefault from 'vue'\n\n// With nodenext module resolution, TypeScript treats the default import as the module type.\n// We need to explicitly type it as VueConstructor to access static methods like extend and observable.\n// This is necessary because Vue 2's type definitions export Vue as VueConstructor, but nodenext\n// doesn't correctly infer the default export type.\nexport const Vue: VueConstructor = VueDefault as unknown as VueConstructor\n","import type { VueConstructor } from 'vue'\n\nimport { Vue } from './Vue.js'\n\n/**\n * The VueRenderer class is responsible for rendering a Vue component as a ProseMirror node view.\n */\nexport class VueRenderer {\n ref!: Vue\n\n constructor(component: Vue | VueConstructor, props: any) {\n const Component = typeof component === 'function' ? component : Vue.extend(component)\n\n this.ref = new Component(props).$mount()\n }\n\n get element(): Element {\n return this.ref.$el\n }\n\n updateProps(props: Record<string, any> = {}): void {\n if (!this.ref.$props) {\n return\n }\n\n // prevents `Avoid mutating a prop directly` error message\n // Fix: `VueNodeViewRenderer` change vue Constructor `config.silent` not working\n const currentVueConstructor = this.ref.$props.editor?.contentComponent?.$options._base ?? Vue // eslint-disable-line\n const originalSilent = currentVueConstructor.config.silent\n\n currentVueConstructor.config.silent = true\n\n Object.entries(props).forEach(([key, value]) => {\n this.ref.$props[key] = value\n })\n\n currentVueConstructor.config.silent = originalSilent\n }\n\n destroy(): void {\n this.ref.$destroy()\n }\n}\n","export { Editor } from './Editor.js'\nexport * from './EditorContent.js'\nexport * from './NodeViewContent.js'\nexport * from './NodeViewWrapper.js'\nexport * from './VueNodeViewRenderer.js'\nexport * from './VueRenderer.js'\nexport * from '@tiptap/core'\n"],"mappings":"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","names":[]}
|
|
1
|
+
{"version":3,"sources":["../src/Editor.ts","../src/EditorContent.ts","../src/NodeViewContent.ts","../src/NodeViewWrapper.ts","../src/VueNodeViewRenderer.ts","../src/Vue.ts","../src/VueRenderer.ts","../src/index.ts"],"sourcesContent":["import { Editor as CoreEditor } from '@tiptap/core'\nimport type Vue from 'vue'\n\nexport class Editor extends CoreEditor {\n public contentComponent: Vue | null = null\n}\n","import type { Component, CreateElement, PropType } from 'vue'\nimport type Vue from 'vue'\n\nimport type { Editor } from './Editor.js'\n\nexport interface EditorContentInterface extends Vue {\n editor: Editor\n}\n\nexport const EditorContent: Component = {\n name: 'EditorContent',\n\n props: {\n editor: {\n default: null,\n type: Object as PropType<Editor>,\n },\n },\n\n watch: {\n editor: {\n immediate: true,\n handler(this: EditorContentInterface, editor: Editor) {\n if (editor && editor.options.element) {\n this.$nextTick(() => {\n const element = this.$el\n\n if (!element || !editor.view.dom?.parentNode) {\n return\n }\n\n element.append(...editor.view.dom.parentNode.childNodes)\n editor.contentComponent = this\n\n editor.setOptions({\n element,\n })\n\n editor.createNodeViews()\n })\n }\n },\n },\n },\n\n render(createElement: CreateElement) {\n return createElement('div')\n },\n\n beforeDestroy(this: EditorContentInterface) {\n const { editor } = this\n\n if (!editor) {\n return\n }\n\n if (!editor.isDestroyed) {\n editor.view.setProps({\n nodeViews: {},\n })\n }\n\n editor.contentComponent = null\n\n if (!editor.view.dom?.parentNode) {\n return\n }\n\n // TODO using the new editor.mount method might allow us to remove this\n const newElement = document.createElement('div')\n\n newElement.append(...editor.view.dom.parentNode.childNodes)\n\n editor.setOptions({\n element: newElement,\n })\n },\n}\n","import type { Component, CreateElement } from 'vue'\nimport type Vue from 'vue'\n\nexport interface NodeViewContentInterface extends Vue {\n as: string\n}\n\nexport const NodeViewContent: Component = {\n props: {\n as: {\n type: String,\n default: 'div',\n },\n },\n\n render(this: NodeViewContentInterface, createElement: CreateElement) {\n return createElement(this.as, {\n style: {\n whiteSpace: 'pre-wrap',\n },\n attrs: {\n 'data-node-view-content': '',\n },\n })\n },\n}\n","import type { Component, CreateElement } from 'vue'\nimport type Vue from 'vue'\n\nexport interface NodeViewWrapperInterface extends Vue {\n as: string\n decorationClasses: {\n value: string\n }\n onDragStart: () => void\n}\n\nexport const NodeViewWrapper: Component = {\n props: {\n as: {\n type: String,\n default: 'div',\n },\n },\n\n inject: ['onDragStart', 'decorationClasses'],\n\n render(this: NodeViewWrapperInterface, createElement: CreateElement) {\n return createElement(\n this.as,\n {\n class: this.decorationClasses.value,\n style: {\n whiteSpace: 'normal',\n },\n attrs: {\n 'data-node-view-wrapper': '',\n },\n on: {\n dragstart: this.onDragStart,\n },\n },\n this.$slots.default,\n )\n },\n}\n","import type {\n DecorationWithType,\n NodeViewProps,\n NodeViewRenderer,\n NodeViewRendererOptions,\n NodeViewRendererProps,\n} from '@tiptap/core'\nimport { isNodeViewSelected, NodeView } from '@tiptap/core'\nimport type { Node as ProseMirrorNode } from '@tiptap/pm/model'\nimport type { Decoration, DecorationSource, NodeView as ProseMirrorNodeView } from '@tiptap/pm/view'\nimport type { VueConstructor } from 'vue'\nimport { booleanProp, functionProp, objectProp } from 'vue-ts-types'\n\nimport type { Editor } from './Editor.js'\nimport { Vue } from './Vue.js'\nimport { VueRenderer } from './VueRenderer.js'\n\nexport const nodeViewProps = {\n editor: objectProp<NodeViewProps['editor']>().required,\n node: objectProp<NodeViewProps['node']>().required,\n decorations: objectProp<NodeViewProps['decorations']>().required,\n selected: booleanProp().required,\n extension: objectProp<NodeViewProps['extension']>().required,\n getPos: functionProp<NodeViewProps['getPos']>().required,\n updateAttributes: functionProp<NodeViewProps['updateAttributes']>().required,\n deleteNode: functionProp<NodeViewProps['deleteNode']>().required,\n}\n\nexport interface VueNodeViewRendererOptions extends NodeViewRendererOptions {\n update:\n | ((props: {\n oldNode: ProseMirrorNode\n oldDecorations: readonly Decoration[]\n oldInnerDecorations: DecorationSource\n newNode: ProseMirrorNode\n newDecorations: readonly Decoration[]\n innerDecorations: DecorationSource\n updateProps: () => void\n }) => boolean)\n | null\n}\n\nclass VueNodeView extends NodeView<Vue | VueConstructor, Editor, VueNodeViewRendererOptions> {\n renderer!: VueRenderer\n\n decorationClasses!: {\n value: string\n }\n\n private currentPos: number | undefined\n\n constructor(\n component: Vue | VueConstructor,\n props: NodeViewRendererProps,\n options?: Partial<VueNodeViewRendererOptions>,\n ) {\n super(component, props, options)\n\n if (this.options.trackNodeViewPosition) {\n this.editor.on('update', this.handlePositionUpdate)\n }\n }\n\n private handlePositionUpdate = () => {\n const newPos = this.getPos()\n if (typeof newPos !== 'number' || newPos === this.currentPos) {\n return\n }\n this.currentPos = newPos\n this.renderer.updateProps({ getPos: () => this.getPos() })\n }\n\n mount() {\n const props: Record<string, any> = {\n editor: this.editor,\n node: this.node,\n decorations: this.decorations as DecorationWithType[],\n innerDecorations: this.innerDecorations,\n view: this.view,\n selected: false,\n extension: this.extension,\n HTMLAttributes: this.HTMLAttributes,\n getPos: () => this.getPos(),\n updateAttributes: (attributes = {}) => this.updateAttributes(attributes),\n deleteNode: () => this.deleteNode(),\n }\n\n const mountProps = props as NodeViewProps\n\n const onDragStart = this.onDragStart.bind(this)\n\n this.decorationClasses = Vue.observable({\n value: this.getDecorationClasses(),\n })\n\n // @ts-ignore\n const vue = this.editor.contentComponent?.$options._base ?? Vue // eslint-disable-line\n\n const Component = vue.extend(this.component).extend({\n props: Object.keys(props),\n provide: () => {\n return {\n onDragStart,\n decorationClasses: this.decorationClasses,\n }\n },\n })\n\n this.handleSelectionUpdate = this.handleSelectionUpdate.bind(this)\n this.editor.on('selectionUpdate', this.handleSelectionUpdate)\n\n this.currentPos = this.getPos()\n\n this.renderer = new VueRenderer(Component, {\n parent: this.editor.contentComponent,\n propsData: mountProps,\n })\n }\n\n /**\n * Return the DOM element.\n * This is the element that will be used to display the node view.\n */\n get dom() {\n if (!this.renderer.element.hasAttribute('data-node-view-wrapper')) {\n throw Error('Please use the NodeViewWrapper component for your node view.')\n }\n\n return this.renderer.element as HTMLElement\n }\n\n /**\n * Return the content DOM element.\n * This is the element that will be used to display the rich-text content of the node.\n */\n get contentDOM() {\n if (this.node.isLeaf) {\n return null\n }\n\n return this.dom.querySelector('[data-node-view-content]') as HTMLElement | null\n }\n\n /**\n * On editor selection update, check if the node is selected.\n * If it is, call `selectNode`, otherwise call `deselectNode`.\n */\n handleSelectionUpdate() {\n const pos = this.getPos()\n\n if (typeof pos !== 'number') {\n return\n }\n\n const isSelected = isNodeViewSelected({\n selection: this.editor.state.selection,\n pos,\n nodeSize: this.node.nodeSize,\n selectedOnTextSelection: this.options.selectedOnTextSelection,\n })\n\n if (isSelected) {\n if (this.renderer.ref.$props.selected) {\n return\n }\n\n this.selectNode()\n } else {\n if (!this.renderer.ref.$props.selected) {\n return\n }\n\n this.deselectNode()\n }\n }\n\n /**\n * On update, update the React component.\n * To prevent unnecessary updates, the `update` option can be used.\n */\n update(node: ProseMirrorNode, decorations: readonly Decoration[], innerDecorations: DecorationSource): boolean {\n const rerenderComponent = (props?: Record<string, any>) => {\n this.decorationClasses.value = this.getDecorationClasses()\n this.renderer.updateProps(props)\n }\n\n if (typeof this.options.update === 'function') {\n const oldNode = this.node\n const oldDecorations = this.decorations\n const oldInnerDecorations = this.innerDecorations\n\n this.node = node\n this.decorations = decorations\n this.innerDecorations = innerDecorations\n\n return this.options.update({\n oldNode,\n oldDecorations,\n newNode: node,\n newDecorations: decorations,\n oldInnerDecorations,\n innerDecorations,\n updateProps: () => rerenderComponent({ node, decorations, innerDecorations }),\n })\n }\n\n if (node.type !== this.node.type) {\n return false\n }\n\n const nodeChanged = node !== this.node\n\n // Node reference unchanged — only decorations may have changed.\n // ProseMirror renders decorations independently on the contentDOM,\n // and the getPos closure (bound in mount()) calls through to\n // ProseMirror's position function at call time, so it is always\n // current. Update internal refs, refresh decoration classes for\n // the wrapper component, and skip the Vue re-render.\n if (!nodeChanged) {\n this.node = node\n this.decorations = decorations\n this.innerDecorations = innerDecorations\n this.decorationClasses.value = this.getDecorationClasses()\n return true\n }\n\n this.node = node\n this.decorations = decorations\n this.innerDecorations = innerDecorations\n this.currentPos = this.getPos()\n\n const extraProps: Record<string, any> = {\n node,\n decorations,\n innerDecorations,\n }\n\n if (this.options.trackNodeViewPosition) {\n extraProps.getPos = () => this.getPos()\n }\n\n rerenderComponent(extraProps)\n\n return true\n }\n\n /**\n * Select the node.\n * Add the `selected` prop and the `ProseMirror-selectednode` class.\n */\n selectNode() {\n this.renderer.updateProps({\n selected: true,\n })\n this.renderer.element.classList.add('ProseMirror-selectednode')\n }\n\n /**\n * Deselect the node.\n * Remove the `selected` prop and the `ProseMirror-selectednode` class.\n */\n deselectNode() {\n this.renderer.updateProps({\n selected: false,\n })\n this.renderer.element.classList.remove('ProseMirror-selectednode')\n }\n\n getDecorationClasses() {\n return (\n this.decorations\n // @ts-ignore\n .flatMap(item => item.type.attrs.class)\n .join(' ')\n )\n }\n\n destroy() {\n this.renderer.destroy()\n this.editor.off('selectionUpdate', this.handleSelectionUpdate)\n\n if (this.options.trackNodeViewPosition) {\n this.editor.off('update', this.handlePositionUpdate)\n }\n }\n}\n\nexport function VueNodeViewRenderer(\n component: Vue | VueConstructor,\n options?: Partial<VueNodeViewRendererOptions>,\n): NodeViewRenderer {\n return props => {\n // try to get the parent component\n // this is important for vue devtools to show the component hierarchy correctly\n // maybe it’s `undefined` because <editor-content> isn’t rendered yet\n if (!(props.editor as Editor).contentComponent) {\n return {} as unknown as ProseMirrorNodeView\n }\n\n return new VueNodeView(component, props, options)\n }\n}\n","import type { VueConstructor } from 'vue'\nimport VueDefault from 'vue'\n\n// With nodenext module resolution, TypeScript treats the default import as the module type.\n// We need to explicitly type it as VueConstructor to access static methods like extend and observable.\n// This is necessary because Vue 2's type definitions export Vue as VueConstructor, but nodenext\n// doesn't correctly infer the default export type.\nexport const Vue: VueConstructor = VueDefault as unknown as VueConstructor\n","import type { VueConstructor } from 'vue'\n\nimport { Vue } from './Vue.js'\n\n/**\n * The VueRenderer class is responsible for rendering a Vue component as a ProseMirror node view.\n */\nexport class VueRenderer {\n ref!: Vue\n\n constructor(component: Vue | VueConstructor, props: any) {\n const Component = typeof component === 'function' ? component : Vue.extend(component)\n\n this.ref = new Component(props).$mount()\n }\n\n get element(): Element {\n return this.ref.$el\n }\n\n updateProps(props: Record<string, any> = {}): void {\n if (!this.ref.$props) {\n return\n }\n\n // prevents `Avoid mutating a prop directly` error message\n // Fix: `VueNodeViewRenderer` change vue Constructor `config.silent` not working\n const currentVueConstructor = this.ref.$props.editor?.contentComponent?.$options._base ?? Vue // eslint-disable-line\n const originalSilent = currentVueConstructor.config.silent\n\n currentVueConstructor.config.silent = true\n\n Object.entries(props).forEach(([key, value]) => {\n this.ref.$props[key] = value\n })\n\n currentVueConstructor.config.silent = originalSilent\n }\n\n destroy(): void {\n this.ref.$destroy()\n }\n}\n","export { Editor } from './Editor.js'\nexport * from './EditorContent.js'\nexport * from './NodeViewContent.js'\nexport * from './NodeViewWrapper.js'\nexport * from './VueNodeViewRenderer.js'\nexport * from './VueRenderer.js'\nexport * from '@tiptap/core'\n"],"mappings":"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","names":[]}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tiptap/vue-2",
|
|
3
3
|
"description": "Vue components for tiptap",
|
|
4
|
-
"version": "3.23.
|
|
4
|
+
"version": "3.23.5",
|
|
5
5
|
"homepage": "https://tiptap.dev",
|
|
6
6
|
"keywords": [
|
|
7
7
|
"tiptap",
|
|
@@ -43,17 +43,17 @@
|
|
|
43
43
|
},
|
|
44
44
|
"devDependencies": {
|
|
45
45
|
"vue": "^2.7.16",
|
|
46
|
-
"@tiptap/core": "^3.23.
|
|
47
|
-
"@tiptap/pm": "^3.23.
|
|
46
|
+
"@tiptap/core": "^3.23.5",
|
|
47
|
+
"@tiptap/pm": "^3.23.5"
|
|
48
48
|
},
|
|
49
49
|
"optionalDependencies": {
|
|
50
|
-
"@tiptap/extension-
|
|
51
|
-
"@tiptap/extension-
|
|
50
|
+
"@tiptap/extension-floating-menu": "^3.23.5",
|
|
51
|
+
"@tiptap/extension-bubble-menu": "^3.23.5"
|
|
52
52
|
},
|
|
53
53
|
"peerDependencies": {
|
|
54
54
|
"vue": "^2.6.0",
|
|
55
|
-
"@tiptap/core": "3.23.
|
|
56
|
-
"@tiptap/pm": "3.23.
|
|
55
|
+
"@tiptap/core": "3.23.5",
|
|
56
|
+
"@tiptap/pm": "3.23.5"
|
|
57
57
|
},
|
|
58
58
|
"repository": {
|
|
59
59
|
"type": "git",
|
|
@@ -1,5 +1,11 @@
|
|
|
1
|
-
import type {
|
|
2
|
-
|
|
1
|
+
import type {
|
|
2
|
+
DecorationWithType,
|
|
3
|
+
NodeViewProps,
|
|
4
|
+
NodeViewRenderer,
|
|
5
|
+
NodeViewRendererOptions,
|
|
6
|
+
NodeViewRendererProps,
|
|
7
|
+
} from '@tiptap/core'
|
|
8
|
+
import { isNodeViewSelected, NodeView } from '@tiptap/core'
|
|
3
9
|
import type { Node as ProseMirrorNode } from '@tiptap/pm/model'
|
|
4
10
|
import type { Decoration, DecorationSource, NodeView as ProseMirrorNodeView } from '@tiptap/pm/view'
|
|
5
11
|
import type { VueConstructor } from 'vue'
|
|
@@ -37,24 +43,35 @@ export interface VueNodeViewRendererOptions extends NodeViewRendererOptions {
|
|
|
37
43
|
class VueNodeView extends NodeView<Vue | VueConstructor, Editor, VueNodeViewRendererOptions> {
|
|
38
44
|
renderer!: VueRenderer
|
|
39
45
|
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
46
|
+
decorationClasses!: {
|
|
47
|
+
value: string
|
|
48
|
+
}
|
|
49
|
+
|
|
44
50
|
private currentPos: number | undefined
|
|
45
51
|
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
52
|
+
constructor(
|
|
53
|
+
component: Vue | VueConstructor,
|
|
54
|
+
props: NodeViewRendererProps,
|
|
55
|
+
options?: Partial<VueNodeViewRendererOptions>,
|
|
56
|
+
) {
|
|
57
|
+
super(component, props, options)
|
|
51
58
|
|
|
52
|
-
|
|
53
|
-
|
|
59
|
+
if (this.options.trackNodeViewPosition) {
|
|
60
|
+
this.editor.on('update', this.handlePositionUpdate)
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
private handlePositionUpdate = () => {
|
|
65
|
+
const newPos = this.getPos()
|
|
66
|
+
if (typeof newPos !== 'number' || newPos === this.currentPos) {
|
|
67
|
+
return
|
|
68
|
+
}
|
|
69
|
+
this.currentPos = newPos
|
|
70
|
+
this.renderer.updateProps({ getPos: () => this.getPos() })
|
|
54
71
|
}
|
|
55
72
|
|
|
56
73
|
mount() {
|
|
57
|
-
const props = {
|
|
74
|
+
const props: Record<string, any> = {
|
|
58
75
|
editor: this.editor,
|
|
59
76
|
node: this.node,
|
|
60
77
|
decorations: this.decorations as DecorationWithType[],
|
|
@@ -66,7 +83,9 @@ class VueNodeView extends NodeView<Vue | VueConstructor, Editor, VueNodeViewRend
|
|
|
66
83
|
getPos: () => this.getPos(),
|
|
67
84
|
updateAttributes: (attributes = {}) => this.updateAttributes(attributes),
|
|
68
85
|
deleteNode: () => this.deleteNode(),
|
|
69
|
-
}
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
const mountProps = props as NodeViewProps
|
|
70
89
|
|
|
71
90
|
const onDragStart = this.onDragStart.bind(this)
|
|
72
91
|
|
|
@@ -89,31 +108,12 @@ class VueNodeView extends NodeView<Vue | VueConstructor, Editor, VueNodeViewRend
|
|
|
89
108
|
|
|
90
109
|
this.handleSelectionUpdate = this.handleSelectionUpdate.bind(this)
|
|
91
110
|
this.editor.on('selectionUpdate', this.handleSelectionUpdate)
|
|
92
|
-
this.currentPos = this.getPos()
|
|
93
|
-
|
|
94
|
-
this.positionCheckCallback = () => {
|
|
95
|
-
// Guard against the callback firing before the renderer is fully initialized.
|
|
96
|
-
if (!this.renderer) {
|
|
97
|
-
return
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
const newPos = this.getPos()
|
|
101
|
-
|
|
102
|
-
if (typeof newPos !== 'number' || newPos === this.currentPos) {
|
|
103
|
-
return
|
|
104
|
-
}
|
|
105
|
-
|
|
106
|
-
this.currentPos = newPos
|
|
107
111
|
|
|
108
|
-
|
|
109
|
-
this.renderer.updateProps({ getPos: () => this.getPos() })
|
|
110
|
-
}
|
|
111
|
-
|
|
112
|
-
schedulePositionCheck(this.editor, this.positionCheckCallback)
|
|
112
|
+
this.currentPos = this.getPos()
|
|
113
113
|
|
|
114
114
|
this.renderer = new VueRenderer(Component, {
|
|
115
115
|
parent: this.editor.contentComponent,
|
|
116
|
-
propsData:
|
|
116
|
+
propsData: mountProps,
|
|
117
117
|
})
|
|
118
118
|
}
|
|
119
119
|
|
|
@@ -192,7 +192,6 @@ class VueNodeView extends NodeView<Vue | VueConstructor, Editor, VueNodeViewRend
|
|
|
192
192
|
this.node = node
|
|
193
193
|
this.decorations = decorations
|
|
194
194
|
this.innerDecorations = innerDecorations
|
|
195
|
-
this.currentPos = this.getPos()
|
|
196
195
|
|
|
197
196
|
return this.options.update({
|
|
198
197
|
oldNode,
|
|
@@ -209,27 +208,38 @@ class VueNodeView extends NodeView<Vue | VueConstructor, Editor, VueNodeViewRend
|
|
|
209
208
|
return false
|
|
210
209
|
}
|
|
211
210
|
|
|
212
|
-
const
|
|
213
|
-
|
|
214
|
-
if (node === this.node && this.decorations === decorations && this.innerDecorations === innerDecorations) {
|
|
215
|
-
if (newPos === this.currentPos) {
|
|
216
|
-
return true
|
|
217
|
-
}
|
|
211
|
+
const nodeChanged = node !== this.node
|
|
218
212
|
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
213
|
+
// Node reference unchanged — only decorations may have changed.
|
|
214
|
+
// ProseMirror renders decorations independently on the contentDOM,
|
|
215
|
+
// and the getPos closure (bound in mount()) calls through to
|
|
216
|
+
// ProseMirror's position function at call time, so it is always
|
|
217
|
+
// current. Update internal refs, refresh decoration classes for
|
|
218
|
+
// the wrapper component, and skip the Vue re-render.
|
|
219
|
+
if (!nodeChanged) {
|
|
220
|
+
this.node = node
|
|
221
|
+
this.decorations = decorations
|
|
222
|
+
this.innerDecorations = innerDecorations
|
|
223
|
+
this.decorationClasses.value = this.getDecorationClasses()
|
|
224
224
|
return true
|
|
225
225
|
}
|
|
226
226
|
|
|
227
227
|
this.node = node
|
|
228
228
|
this.decorations = decorations
|
|
229
229
|
this.innerDecorations = innerDecorations
|
|
230
|
-
this.currentPos =
|
|
230
|
+
this.currentPos = this.getPos()
|
|
231
|
+
|
|
232
|
+
const extraProps: Record<string, any> = {
|
|
233
|
+
node,
|
|
234
|
+
decorations,
|
|
235
|
+
innerDecorations,
|
|
236
|
+
}
|
|
237
|
+
|
|
238
|
+
if (this.options.trackNodeViewPosition) {
|
|
239
|
+
extraProps.getPos = () => this.getPos()
|
|
240
|
+
}
|
|
231
241
|
|
|
232
|
-
rerenderComponent(
|
|
242
|
+
rerenderComponent(extraProps)
|
|
233
243
|
|
|
234
244
|
return true
|
|
235
245
|
}
|
|
@@ -269,9 +279,8 @@ class VueNodeView extends NodeView<Vue | VueConstructor, Editor, VueNodeViewRend
|
|
|
269
279
|
this.renderer.destroy()
|
|
270
280
|
this.editor.off('selectionUpdate', this.handleSelectionUpdate)
|
|
271
281
|
|
|
272
|
-
if (this.
|
|
273
|
-
|
|
274
|
-
this.positionCheckCallback = null
|
|
282
|
+
if (this.options.trackNodeViewPosition) {
|
|
283
|
+
this.editor.off('update', this.handlePositionUpdate)
|
|
275
284
|
}
|
|
276
285
|
}
|
|
277
286
|
}
|