@tiptap/vue-2 3.0.0-next.2 → 3.0.0-next.4
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/LICENSE.md +21 -0
- package/README.md +5 -1
- package/dist/index.cjs +26 -20
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +23 -19
- package/dist/index.js.map +1 -1
- package/package.json +13 -9
- package/src/BubbleMenu.ts +19 -17
- package/src/EditorContent.ts +1 -1
- package/src/FloatingMenu.ts +15 -13
- package/src/NodeViewContent.ts +1 -1
- package/src/NodeViewWrapper.ts +4 -4
- package/src/VueNodeViewRenderer.ts +12 -22
- package/src/VueRenderer.ts +4 -6
package/LICENSE.md
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2024, Tiptap GmbH
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
CHANGED
|
@@ -1,14 +1,18 @@
|
|
|
1
1
|
# @tiptap/vue-2
|
|
2
|
+
|
|
2
3
|
[](https://www.npmjs.com/package/@tiptap/vue-2)
|
|
3
4
|
[](https://npmcharts.com/compare/tiptap?minimal=true)
|
|
4
5
|
[](https://www.npmjs.com/package/@tiptap/vue-2)
|
|
5
6
|
[](https://github.com/sponsors/ueberdosis)
|
|
6
7
|
|
|
7
8
|
## Introduction
|
|
8
|
-
|
|
9
|
+
|
|
10
|
+
Tiptap is a headless wrapper around [ProseMirror](https://ProseMirror.net) – a toolkit for building rich text WYSIWYG editors, which is already in use at many well-known companies such as _New York Times_, _The Guardian_ or _Atlassian_.
|
|
9
11
|
|
|
10
12
|
## Official Documentation
|
|
13
|
+
|
|
11
14
|
Documentation can be found on the [Tiptap website](https://tiptap.dev).
|
|
12
15
|
|
|
13
16
|
## License
|
|
17
|
+
|
|
14
18
|
Tiptap is open sourced software licensed under the [MIT license](https://github.com/ueberdosis/tiptap/blob/main/LICENSE.md).
|
package/dist/index.cjs
CHANGED
|
@@ -29,8 +29,8 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
|
|
|
29
29
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
30
30
|
|
|
31
31
|
// src/index.ts
|
|
32
|
-
var
|
|
33
|
-
__export(
|
|
32
|
+
var index_exports = {};
|
|
33
|
+
__export(index_exports, {
|
|
34
34
|
BubbleMenu: () => BubbleMenu,
|
|
35
35
|
Editor: () => Editor,
|
|
36
36
|
EditorContent: () => EditorContent,
|
|
@@ -41,7 +41,7 @@ __export(src_exports, {
|
|
|
41
41
|
VueRenderer: () => VueRenderer,
|
|
42
42
|
nodeViewProps: () => nodeViewProps
|
|
43
43
|
});
|
|
44
|
-
module.exports = __toCommonJS(
|
|
44
|
+
module.exports = __toCommonJS(index_exports);
|
|
45
45
|
|
|
46
46
|
// src/BubbleMenu.ts
|
|
47
47
|
var import_extension_bubble_menu = require("@tiptap/extension-bubble-menu");
|
|
@@ -78,19 +78,22 @@ var BubbleMenu = {
|
|
|
78
78
|
if (!editor) {
|
|
79
79
|
return;
|
|
80
80
|
}
|
|
81
|
+
;
|
|
81
82
|
this.$el.style.visibility = "hidden";
|
|
82
83
|
this.$el.style.position = "absolute";
|
|
83
84
|
this.$el.remove();
|
|
84
85
|
this.$nextTick(() => {
|
|
85
|
-
editor.registerPlugin(
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
86
|
+
editor.registerPlugin(
|
|
87
|
+
(0, import_extension_bubble_menu.BubbleMenuPlugin)({
|
|
88
|
+
updateDelay: this.updateDelay,
|
|
89
|
+
resizeDelay: this.resizeDelay,
|
|
90
|
+
options: this.options,
|
|
91
|
+
editor,
|
|
92
|
+
element: this.$el,
|
|
93
|
+
pluginKey: this.pluginKey,
|
|
94
|
+
shouldShow: this.shouldShow
|
|
95
|
+
})
|
|
96
|
+
);
|
|
94
97
|
});
|
|
95
98
|
}
|
|
96
99
|
}
|
|
@@ -196,17 +199,20 @@ var FloatingMenu = {
|
|
|
196
199
|
if (!editor) {
|
|
197
200
|
return;
|
|
198
201
|
}
|
|
202
|
+
;
|
|
199
203
|
this.$el.style.visibility = "hidden";
|
|
200
204
|
this.$el.style.position = "absolute";
|
|
201
205
|
this.$el.remove();
|
|
202
206
|
this.$nextTick(() => {
|
|
203
|
-
editor.registerPlugin(
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
207
|
+
editor.registerPlugin(
|
|
208
|
+
(0, import_extension_floating_menu.FloatingMenuPlugin)({
|
|
209
|
+
pluginKey: this.pluginKey,
|
|
210
|
+
editor,
|
|
211
|
+
element: this.$el,
|
|
212
|
+
options: this.options,
|
|
213
|
+
shouldShow: this.shouldShow
|
|
214
|
+
})
|
|
215
|
+
);
|
|
210
216
|
});
|
|
211
217
|
}
|
|
212
218
|
}
|
|
@@ -468,7 +474,7 @@ function VueNodeViewRenderer(component, options) {
|
|
|
468
474
|
}
|
|
469
475
|
|
|
470
476
|
// src/index.ts
|
|
471
|
-
__reExport(
|
|
477
|
+
__reExport(index_exports, require("@tiptap/core"), module.exports);
|
|
472
478
|
// Annotate the CommonJS export names for ESM import in node:
|
|
473
479
|
0 && (module.exports = {
|
|
474
480
|
BubbleMenu,
|
package/dist/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts","../src/BubbleMenu.ts","../src/Editor.ts","../src/EditorContent.ts","../src/FloatingMenu.ts","../src/NodeViewContent.ts","../src/NodeViewWrapper.ts","../src/VueNodeViewRenderer.ts","../src/VueRenderer.ts"],"sourcesContent":["export * from './BubbleMenu.js'\nexport { Editor } from './Editor.js'\nexport * from './EditorContent.js'\nexport * from './FloatingMenu.js'\nexport * from './NodeViewContent.js'\nexport * from './NodeViewWrapper.js'\nexport * from './VueNodeViewRenderer.js'\nexport * from './VueRenderer.js'\nexport * from '@tiptap/core'\n","import { BubbleMenuPlugin, BubbleMenuPluginProps } from '@tiptap/extension-bubble-menu'\nimport Vue, { Component, CreateElement, PropType } from 'vue'\n\nexport interface BubbleMenuInterface extends Vue {\n pluginKey: BubbleMenuPluginProps['pluginKey'],\n editor: BubbleMenuPluginProps['editor'],\n updateDelay: BubbleMenuPluginProps['updateDelay'],\n resizeDelay: BubbleMenuPluginProps['resizeDelay'],\n shouldShow: BubbleMenuPluginProps['shouldShow'],\n options: BubbleMenuPluginProps['options'],\n}\n\nexport const BubbleMenu: Component = {\n name: 'BubbleMenu',\n\n props: {\n pluginKey: {\n type: [String, Object as PropType<Exclude<BubbleMenuPluginProps['pluginKey'], string>>],\n default: 'bubbleMenu',\n },\n\n editor: {\n type: Object as PropType<BubbleMenuPluginProps['editor']>,\n required: true,\n },\n\n updateDelay: {\n type: Number as PropType<BubbleMenuPluginProps['updateDelay']>,\n },\n\n options: {\n type: Object as PropType<BubbleMenuPluginProps['options']>,\n default: {},\n },\n\n resizeDelay: {\n type: Number as PropType<BubbleMenuPluginProps['resizeDelay']>,\n },\n\n shouldShow: {\n type: Function as PropType<Exclude<BubbleMenuPluginProps['shouldShow'], null>>,\n default: null,\n },\n },\n\n watch: {\n editor: {\n immediate: true,\n handler(this: BubbleMenuInterface, editor: BubbleMenuPluginProps['editor']) {\n if (!editor) {\n return\n }\n\n (this.$el as HTMLElement).style.visibility = 'hidden';\n (this.$el as HTMLElement).style.position = 'absolute'\n\n this.$el.remove()\n\n this.$nextTick(() => {\n editor.registerPlugin(BubbleMenuPlugin({\n updateDelay: this.updateDelay,\n resizeDelay: this.resizeDelay,\n options: this.options,\n editor,\n element: this.$el as HTMLElement,\n pluginKey: this.pluginKey,\n shouldShow: this.shouldShow,\n }))\n })\n },\n },\n },\n\n render(this: BubbleMenuInterface, createElement: CreateElement) {\n return createElement('div', { style: { visibility: 'hidden' } }, this.$slots.default)\n },\n\n beforeDestroy(this: BubbleMenuInterface) {\n this.editor.unregisterPlugin(this.pluginKey)\n },\n}\n","import { Editor as CoreEditor } from '@tiptap/core'\nimport Vue from 'vue'\n\nexport class Editor extends CoreEditor {\n public contentComponent: Vue | null = null\n}\n","import Vue, { Component, CreateElement, PropType } from 'vue'\n\nimport { 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.options.element.firstChild) {\n return\n }\n\n element.append(...editor.options.element.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.options.element.firstChild) {\n return\n }\n\n const newElement = document.createElement('div')\n\n newElement.append(...editor.options.element.childNodes)\n\n editor.setOptions({\n element: newElement,\n })\n },\n}\n","import { FloatingMenuPlugin, FloatingMenuPluginProps } from '@tiptap/extension-floating-menu'\nimport Vue, { Component, CreateElement, PropType } from 'vue'\n\nexport interface FloatingMenuInterface extends Vue {\n pluginKey: FloatingMenuPluginProps['pluginKey'],\n options: FloatingMenuPluginProps['options'],\n editor: FloatingMenuPluginProps['editor'],\n shouldShow: FloatingMenuPluginProps['shouldShow'],\n}\n\nexport const FloatingMenu: Component = {\n name: 'FloatingMenu',\n\n props: {\n pluginKey: {\n type: [String, Object as PropType<Exclude<FloatingMenuPluginProps['pluginKey'], string>>],\n default: 'floatingMenu',\n },\n\n editor: {\n type: Object as PropType<FloatingMenuPluginProps['editor']>,\n required: true,\n },\n\n options: {\n type: Object as PropType<FloatingMenuPluginProps['options']>,\n default: () => ({}),\n },\n\n shouldShow: {\n type: Function as PropType<Exclude<FloatingMenuPluginProps['shouldShow'], null>>,\n default: null,\n },\n },\n\n watch: {\n editor: {\n immediate: true,\n handler(this: FloatingMenuInterface, editor: FloatingMenuPluginProps['editor']) {\n if (!editor) {\n return\n }\n\n (this.$el as HTMLElement).style.visibility = 'hidden';\n (this.$el as HTMLElement).style.position = 'absolute'\n\n this.$el.remove()\n\n this.$nextTick(() => {\n editor.registerPlugin(FloatingMenuPlugin({\n pluginKey: this.pluginKey,\n editor,\n element: this.$el as HTMLElement,\n options: this.options,\n shouldShow: this.shouldShow,\n }))\n })\n },\n },\n },\n\n render(this: FloatingMenuInterface, createElement: CreateElement) {\n return createElement('div', { style: { visibility: 'hidden' } }, this.$slots.default)\n },\n\n beforeDestroy(this: FloatingMenuInterface) {\n this.editor.unregisterPlugin(this.pluginKey)\n },\n}\n","import Vue, { Component, CreateElement } 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 Vue, { Component, CreateElement } from 'vue'\n\nexport interface NodeViewWrapperInterface extends Vue {\n as: string,\n decorationClasses: {\n value: string,\n },\n onDragStart: Function,\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 {\n DecorationWithType,\n NodeView,\n NodeViewProps,\n NodeViewRenderer,\n NodeViewRendererOptions,\n} from '@tiptap/core'\nimport { Node as ProseMirrorNode } from '@tiptap/pm/model'\nimport { Decoration, DecorationSource, NodeView as ProseMirrorNodeView } from '@tiptap/pm/view'\nimport Vue from 'vue'\nimport { VueConstructor } from 'vue/types/umd'\nimport { booleanProp, functionProp, objectProp } from 'vue-ts-types'\n\nimport { Editor } from './Editor.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 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\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 const contentElement = this.dom.querySelector('[data-node-view-content]')\n\n return (contentElement || this.dom) 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 { from, to } = this.editor.state.selection\n const pos = this.getPos()\n\n if (typeof pos !== 'number') {\n return\n }\n\n if (from <= pos && to >= pos + this.node.nodeSize) {\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(\n node: ProseMirrorNode,\n decorations: readonly Decoration[],\n innerDecorations: DecorationSource,\n ): 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 if (node === this.node && this.decorations === decorations && this.innerDecorations === innerDecorations) {\n return true\n }\n\n this.node = node\n this.decorations = decorations\n this.innerDecorations = innerDecorations\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 .map(item => item.type.attrs.class)\n .flat()\n .join(' ')\n )\n }\n\n destroy() {\n this.renderer.destroy()\n this.editor.off('selectionUpdate', this.handleSelectionUpdate)\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 Vue from 'vue'\nimport { VueConstructor } from 'vue/types/umd'\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\n .entries(props)\n .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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mCAAwD;AAYjD,IAAM,aAAwB;AAAA,EACnC,MAAM;AAAA,EAEN,OAAO;AAAA,IACL,WAAW;AAAA,MACT,MAAM,CAAC,QAAQ,MAAuE;AAAA,MACtF,SAAS;AAAA,IACX;AAAA,IAEA,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,UAAU;AAAA,IACZ;AAAA,IAEA,aAAa;AAAA,MACX,MAAM;AAAA,IACR;AAAA,IAEA,SAAS;AAAA,MACP,MAAM;AAAA,MACN,SAAS,CAAC;AAAA,IACZ;AAAA,IAEA,aAAa;AAAA,MACX,MAAM;AAAA,IACR;AAAA,IAEA,YAAY;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA,IACX;AAAA,EACF;AAAA,EAEA,OAAO;AAAA,IACL,QAAQ;AAAA,MACN,WAAW;AAAA,MACX,QAAmC,QAAyC;AAC1E,YAAI,CAAC,QAAQ;AACX;AAAA,QACF;AAEA,QAAC,KAAK,IAAoB,MAAM,aAAa;AAC7C,QAAC,KAAK,IAAoB,MAAM,WAAW;AAE3C,aAAK,IAAI,OAAO;AAEhB,aAAK,UAAU,MAAM;AACnB,iBAAO,mBAAe,+CAAiB;AAAA,YACrC,aAAa,KAAK;AAAA,YAClB,aAAa,KAAK;AAAA,YAClB,SAAS,KAAK;AAAA,YACd;AAAA,YACA,SAAS,KAAK;AAAA,YACd,WAAW,KAAK;AAAA,YAChB,YAAY,KAAK;AAAA,UACnB,CAAC,CAAC;AAAA,QACJ,CAAC;AAAA,MACH;AAAA,IACF;AAAA,EACF;AAAA,EAEA,OAAkC,eAA8B;AAC9D,WAAO,cAAc,OAAO,EAAE,OAAO,EAAE,YAAY,SAAS,EAAE,GAAG,KAAK,OAAO,OAAO;AAAA,EACtF;AAAA,EAEA,gBAAyC;AACvC,SAAK,OAAO,iBAAiB,KAAK,SAAS;AAAA,EAC7C;AACF;;;AChFA,kBAAqC;AAG9B,IAAM,SAAN,cAAqB,YAAAA,OAAW;AAAA,EAAhC;AAAA;AACL,SAAO,mBAA+B;AAAA;AACxC;;;ACGO,IAAM,gBAA2B;AAAA,EACtC,MAAM;AAAA,EAEN,OAAO;AAAA,IACL,QAAQ;AAAA,MACN,SAAS;AAAA,MACT,MAAM;AAAA,IACR;AAAA,EACF;AAAA,EAEA,OAAO;AAAA,IACL,QAAQ;AAAA,MACN,WAAW;AAAA,MACX,QAAsC,QAAgB;AACpD,YAAI,UAAU,OAAO,QAAQ,SAAS;AACpC,eAAK,UAAU,MAAM;AACnB,kBAAM,UAAU,KAAK;AAErB,gBAAI,CAAC,WAAW,CAAC,OAAO,QAAQ,QAAQ,YAAY;AAClD;AAAA,YACF;AAEA,oBAAQ,OAAO,GAAG,OAAO,QAAQ,QAAQ,UAAU;AACnD,mBAAO,mBAAmB;AAE1B,mBAAO,WAAW;AAAA,cAChB;AAAA,YACF,CAAC;AAED,mBAAO,gBAAgB;AAAA,UACzB,CAAC;AAAA,QACH;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAAA,EAEA,OAAO,eAA8B;AACnC,WAAO,cAAc,KAAK;AAAA,EAC5B;AAAA,EAEA,gBAA4C;AAC1C,UAAM,EAAE,OAAO,IAAI;AAEnB,QAAI,CAAC,QAAQ;AACX;AAAA,IACF;AAEA,QAAI,CAAC,OAAO,aAAa;AACvB,aAAO,KAAK,SAAS;AAAA,QACnB,WAAW,CAAC;AAAA,MACd,CAAC;AAAA,IACH;AAEA,WAAO,mBAAmB;AAE1B,QAAI,CAAC,OAAO,QAAQ,QAAQ,YAAY;AACtC;AAAA,IACF;AAEA,UAAM,aAAa,SAAS,cAAc,KAAK;AAE/C,eAAW,OAAO,GAAG,OAAO,QAAQ,QAAQ,UAAU;AAEtD,WAAO,WAAW;AAAA,MAChB,SAAS;AAAA,IACX,CAAC;AAAA,EACH;AACF;;;AC3EA,qCAA4D;AAUrD,IAAM,eAA0B;AAAA,EACrC,MAAM;AAAA,EAEN,OAAO;AAAA,IACL,WAAW;AAAA,MACT,MAAM,CAAC,QAAQ,MAAyE;AAAA,MACxF,SAAS;AAAA,IACX;AAAA,IAEA,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,UAAU;AAAA,IACZ;AAAA,IAEA,SAAS;AAAA,MACP,MAAM;AAAA,MACN,SAAS,OAAO,CAAC;AAAA,IACnB;AAAA,IAEA,YAAY;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA,IACX;AAAA,EACF;AAAA,EAEA,OAAO;AAAA,IACL,QAAQ;AAAA,MACN,WAAW;AAAA,MACX,QAAqC,QAA2C;AAC9E,YAAI,CAAC,QAAQ;AACX;AAAA,QACF;AAEA,QAAC,KAAK,IAAoB,MAAM,aAAa;AAC7C,QAAC,KAAK,IAAoB,MAAM,WAAW;AAE3C,aAAK,IAAI,OAAO;AAEhB,aAAK,UAAU,MAAM;AACnB,iBAAO,mBAAe,mDAAmB;AAAA,YACvC,WAAW,KAAK;AAAA,YAChB;AAAA,YACA,SAAS,KAAK;AAAA,YACd,SAAS,KAAK;AAAA,YACd,YAAY,KAAK;AAAA,UACnB,CAAC,CAAC;AAAA,QACJ,CAAC;AAAA,MACH;AAAA,IACF;AAAA,EACF;AAAA,EAEA,OAAoC,eAA8B;AAChE,WAAO,cAAc,OAAO,EAAE,OAAO,EAAE,YAAY,SAAS,EAAE,GAAG,KAAK,OAAO,OAAO;AAAA,EACtF;AAAA,EAEA,gBAA2C;AACzC,SAAK,OAAO,iBAAiB,KAAK,SAAS;AAAA,EAC7C;AACF;;;AC9DO,IAAM,kBAA6B;AAAA,EACxC,OAAO;AAAA,IACL,IAAI;AAAA,MACF,MAAM;AAAA,MACN,SAAS;AAAA,IACX;AAAA,EACF;AAAA,EAEA,OAAuC,eAA8B;AACnE,WAAO,cAAc,KAAK,IAAI;AAAA,MAC5B,OAAO;AAAA,QACL,YAAY;AAAA,MACd;AAAA,MACA,OAAO;AAAA,QACL,0BAA0B;AAAA,MAC5B;AAAA,IACF,CAAC;AAAA,EACH;AACF;;;ACdO,IAAM,kBAA6B;AAAA,EACxC,OAAO;AAAA,IACL,IAAI;AAAA,MACF,MAAM;AAAA,MACN,SAAS;AAAA,IACX;AAAA,EACF;AAAA,EAEA,QAAQ,CAAC,eAAe,mBAAmB;AAAA,EAE3C,OAAuC,eAA8B;AACnE,WAAO;AAAA,MACL,KAAK;AAAA,MACL;AAAA,QACE,OAAO,KAAK,kBAAkB;AAAA,QAC9B,OAAO;AAAA,UACL,YAAY;AAAA,QACd;AAAA,QACA,OAAO;AAAA,UACL,0BAA0B;AAAA,QAC5B;AAAA,QACA,IAAI;AAAA,UACF,WAAW,KAAK;AAAA,QAClB;AAAA,MACF;AAAA,MACA,KAAK,OAAO;AAAA,IACd;AAAA,EACF;AACF;;;ACtCA,IAAAC,eAMO;AAGP,IAAAC,cAAgB;AAEhB,0BAAsD;;;ACXtD,iBAAgB;AAMT,IAAM,cAAN,MAAkB;AAAA,EAGvB,YAAY,WAAiC,OAAY;AACvD,UAAM,YAAa,OAAO,cAAc,aAAc,YAAY,WAAAC,QAAI,OAAO,SAAS;AAEtF,SAAK,MAAM,IAAI,UAAU,KAAK,EAAE,OAAO;AAAA,EACzC;AAAA,EAEA,IAAI,UAAmB;AACrB,WAAO,KAAK,IAAI;AAAA,EAClB;AAAA,EAEA,YAAY,QAA6B,CAAC,GAAS;AAnBrD;AAoBI,QAAI,CAAC,KAAK,IAAI,QAAQ;AACpB;AAAA,IACF;AAIA,UAAM,yBAAwB,sBAAK,IAAI,OAAO,WAAhB,mBAAwB,qBAAxB,mBAA0C,SAAS,UAAnD,YAA4D,WAAAA;AAC1F,UAAM,iBAAiB,sBAAsB,OAAO;AAEpD,0BAAsB,OAAO,SAAS;AAEtC,WACG,QAAQ,KAAK,EACb,QAAQ,CAAC,CAAC,KAAK,KAAK,MAAM;AACzB,WAAK,IAAI,OAAO,GAAG,IAAI;AAAA,IACzB,CAAC;AAEH,0BAAsB,OAAO,SAAS;AAAA,EACxC;AAAA,EAEA,UAAgB;AACd,SAAK,IAAI,SAAS;AAAA,EACpB;AACF;;;AD3BO,IAAM,gBAAgB;AAAA,EAC3B,YAAQ,gCAAoC,EAAE;AAAA,EAC9C,UAAM,gCAAkC,EAAE;AAAA,EAC1C,iBAAa,gCAAyC,EAAE;AAAA,EACxD,cAAU,iCAAY,EAAE;AAAA,EACxB,eAAW,gCAAuC,EAAE;AAAA,EACpD,YAAQ,kCAAsC,EAAE;AAAA,EAChD,sBAAkB,kCAAgD,EAAE;AAAA,EACpE,gBAAY,kCAA0C,EAAE;AAC1D;AAgBA,IAAM,cAAN,cAA0B,sBAAmE;AAAA,EAO3F,QAAQ;AAhDV;AAiDI,UAAM,QAAQ;AAAA,MACZ,QAAQ,KAAK;AAAA,MACb,MAAM,KAAK;AAAA,MACX,aAAa,KAAK;AAAA,MAClB,kBAAkB,KAAK;AAAA,MACvB,MAAM,KAAK;AAAA,MACX,UAAU;AAAA,MACV,WAAW,KAAK;AAAA,MAChB,gBAAgB,KAAK;AAAA,MACrB,QAAQ,MAAM,KAAK,OAAO;AAAA,MAC1B,kBAAkB,CAAC,aAAa,CAAC,MAAM,KAAK,iBAAiB,UAAU;AAAA,MACvE,YAAY,MAAM,KAAK,WAAW;AAAA,IACpC;AAEA,UAAM,cAAc,KAAK,YAAY,KAAK,IAAI;AAE9C,SAAK,oBAAoB,YAAAC,QAAI,WAAW;AAAA,MACtC,OAAO,KAAK,qBAAqB;AAAA,IACnC,CAAC;AAGD,UAAM,OAAM,gBAAK,OAAO,qBAAZ,mBAA8B,SAAS,UAAvC,YAAgD,YAAAA;AAE5D,UAAM,YAAY,IAAI,OAAO,KAAK,SAAS,EAAE,OAAO;AAAA,MAClD,OAAO,OAAO,KAAK,KAAK;AAAA,MACxB,SAAS,MAAM;AACb,eAAO;AAAA,UACL;AAAA,UACA,mBAAmB,KAAK;AAAA,QAC1B;AAAA,MACF;AAAA,IACF,CAAC;AAED,SAAK,wBAAwB,KAAK,sBAAsB,KAAK,IAAI;AACjE,SAAK,OAAO,GAAG,mBAAmB,KAAK,qBAAqB;AAE5D,SAAK,WAAW,IAAI,YAAY,WAAW;AAAA,MACzC,QAAQ,KAAK,OAAO;AAAA,MACpB,WAAW;AAAA,IACb,CAAC;AAAA,EACH;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,MAAM;AACR,QAAI,CAAC,KAAK,SAAS,QAAQ,aAAa,wBAAwB,GAAG;AACjE,YAAM,MAAM,8DAA8D;AAAA,IAC5E;AAEA,WAAO,KAAK,SAAS;AAAA,EACvB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,aAAa;AACf,QAAI,KAAK,KAAK,QAAQ;AACpB,aAAO;AAAA,IACT;AAEA,UAAM,iBAAiB,KAAK,IAAI,cAAc,0BAA0B;AAExE,WAAQ,kBAAkB,KAAK;AAAA,EACjC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,wBAAwB;AACtB,UAAM,EAAE,MAAM,GAAG,IAAI,KAAK,OAAO,MAAM;AACvC,UAAM,MAAM,KAAK,OAAO;AAExB,QAAI,OAAO,QAAQ,UAAU;AAC3B;AAAA,IACF;AAEA,QAAI,QAAQ,OAAO,MAAM,MAAM,KAAK,KAAK,UAAU;AACjD,UAAI,KAAK,SAAS,IAAI,OAAO,UAAU;AACrC;AAAA,MACF;AAEA,WAAK,WAAW;AAAA,IAClB,OAAO;AACL,UAAI,CAAC,KAAK,SAAS,IAAI,OAAO,UAAU;AACtC;AAAA,MACF;AAEA,WAAK,aAAa;AAAA,IACpB;AAAA,EACF;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,OACE,MACA,aACA,kBACS;AACT,UAAM,oBAAoB,CAAC,UAAgC;AACzD,WAAK,kBAAkB,QAAQ,KAAK,qBAAqB;AACzD,WAAK,SAAS,YAAY,KAAK;AAAA,IACjC;AAEA,QAAI,OAAO,KAAK,QAAQ,WAAW,YAAY;AAC7C,YAAM,UAAU,KAAK;AACrB,YAAM,iBAAiB,KAAK;AAC5B,YAAM,sBAAsB,KAAK;AAEjC,WAAK,OAAO;AACZ,WAAK,cAAc;AACnB,WAAK,mBAAmB;AAExB,aAAO,KAAK,QAAQ,OAAO;AAAA,QACzB;AAAA,QACA;AAAA,QACA,SAAS;AAAA,QACT,gBAAgB;AAAA,QAChB;AAAA,QACA;AAAA,QACA,aAAa,MAAM,kBAAkB,EAAE,MAAM,aAAa,iBAAiB,CAAC;AAAA,MAC9E,CAAC;AAAA,IACH;AAEA,QAAI,KAAK,SAAS,KAAK,KAAK,MAAM;AAChC,aAAO;AAAA,IACT;AAEA,QAAI,SAAS,KAAK,QAAQ,KAAK,gBAAgB,eAAe,KAAK,qBAAqB,kBAAkB;AACxG,aAAO;AAAA,IACT;AAEA,SAAK,OAAO;AACZ,SAAK,cAAc;AACnB,SAAK,mBAAmB;AAExB,sBAAkB,EAAE,MAAM,aAAa,iBAAiB,CAAC;AAEzD,WAAO;AAAA,EACT;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,aAAa;AACX,SAAK,SAAS,YAAY;AAAA,MACxB,UAAU;AAAA,IACZ,CAAC;AACD,SAAK,SAAS,QAAQ,UAAU,IAAI,0BAA0B;AAAA,EAChE;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,eAAe;AACb,SAAK,SAAS,YAAY;AAAA,MACxB,UAAU;AAAA,IACZ,CAAC;AACD,SAAK,SAAS,QAAQ,UAAU,OAAO,0BAA0B;AAAA,EACnE;AAAA,EAEA,uBAAuB;AACrB,WACE,KAAK,YAEF,IAAI,UAAQ,KAAK,KAAK,MAAM,KAAK,EACjC,KAAK,EACL,KAAK,GAAG;AAAA,EAEf;AAAA,EAEA,UAAU;AACR,SAAK,SAAS,QAAQ;AACtB,SAAK,OAAO,IAAI,mBAAmB,KAAK,qBAAqB;AAAA,EAC/D;AACF;AAEO,SAAS,oBACd,WACA,SACkB;AAClB,SAAO,WAAS;AAId,QAAI,CAAE,MAAM,OAAkB,kBAAkB;AAC9C,aAAO,CAAC;AAAA,IACV;AAEA,WAAO,IAAI,YAAY,WAAW,OAAO,OAAO;AAAA,EAClD;AACF;;;AP/OA,wBAAc,yBARd;","names":["CoreEditor","import_core","import_vue","Vue","Vue"]}
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/BubbleMenu.ts","../src/Editor.ts","../src/EditorContent.ts","../src/FloatingMenu.ts","../src/NodeViewContent.ts","../src/NodeViewWrapper.ts","../src/VueNodeViewRenderer.ts","../src/VueRenderer.ts"],"sourcesContent":["export * from './BubbleMenu.js'\nexport { Editor } from './Editor.js'\nexport * from './EditorContent.js'\nexport * from './FloatingMenu.js'\nexport * from './NodeViewContent.js'\nexport * from './NodeViewWrapper.js'\nexport * from './VueNodeViewRenderer.js'\nexport * from './VueRenderer.js'\nexport * from '@tiptap/core'\n","import { BubbleMenuPlugin, BubbleMenuPluginProps } from '@tiptap/extension-bubble-menu'\nimport Vue, { Component, CreateElement, PropType } from 'vue'\n\nexport interface BubbleMenuInterface extends Vue {\n pluginKey: BubbleMenuPluginProps['pluginKey']\n editor: BubbleMenuPluginProps['editor']\n updateDelay: BubbleMenuPluginProps['updateDelay']\n resizeDelay: BubbleMenuPluginProps['resizeDelay']\n shouldShow: BubbleMenuPluginProps['shouldShow']\n options: BubbleMenuPluginProps['options']\n}\n\nexport const BubbleMenu: Component = {\n name: 'BubbleMenu',\n\n props: {\n pluginKey: {\n type: [String, Object as PropType<Exclude<BubbleMenuPluginProps['pluginKey'], string>>],\n default: 'bubbleMenu',\n },\n\n editor: {\n type: Object as PropType<BubbleMenuPluginProps['editor']>,\n required: true,\n },\n\n updateDelay: {\n type: Number as PropType<BubbleMenuPluginProps['updateDelay']>,\n },\n\n options: {\n type: Object as PropType<BubbleMenuPluginProps['options']>,\n default: {},\n },\n\n resizeDelay: {\n type: Number as PropType<BubbleMenuPluginProps['resizeDelay']>,\n },\n\n shouldShow: {\n type: Function as PropType<Exclude<BubbleMenuPluginProps['shouldShow'], null>>,\n default: null,\n },\n },\n\n watch: {\n editor: {\n immediate: true,\n handler(this: BubbleMenuInterface, editor: BubbleMenuPluginProps['editor']) {\n if (!editor) {\n return\n }\n\n ;(this.$el as HTMLElement).style.visibility = 'hidden'\n ;(this.$el as HTMLElement).style.position = 'absolute'\n\n this.$el.remove()\n\n this.$nextTick(() => {\n editor.registerPlugin(\n BubbleMenuPlugin({\n updateDelay: this.updateDelay,\n resizeDelay: this.resizeDelay,\n options: this.options,\n editor,\n element: this.$el as HTMLElement,\n pluginKey: this.pluginKey,\n shouldShow: this.shouldShow,\n }),\n )\n })\n },\n },\n },\n\n render(this: BubbleMenuInterface, createElement: CreateElement) {\n return createElement('div', { style: { visibility: 'hidden' } }, this.$slots.default)\n },\n\n beforeDestroy(this: BubbleMenuInterface) {\n this.editor.unregisterPlugin(this.pluginKey)\n },\n}\n","import { Editor as CoreEditor } from '@tiptap/core'\nimport Vue from 'vue'\n\nexport class Editor extends CoreEditor {\n public contentComponent: Vue | null = null\n}\n","import Vue, { Component, CreateElement, PropType } from 'vue'\n\nimport { 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.options.element.firstChild) {\n return\n }\n\n element.append(...editor.options.element.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.options.element.firstChild) {\n return\n }\n\n const newElement = document.createElement('div')\n\n newElement.append(...editor.options.element.childNodes)\n\n editor.setOptions({\n element: newElement,\n })\n },\n}\n","import { FloatingMenuPlugin, FloatingMenuPluginProps } from '@tiptap/extension-floating-menu'\nimport Vue, { Component, CreateElement, PropType } from 'vue'\n\nexport interface FloatingMenuInterface extends Vue {\n pluginKey: FloatingMenuPluginProps['pluginKey']\n options: FloatingMenuPluginProps['options']\n editor: FloatingMenuPluginProps['editor']\n shouldShow: FloatingMenuPluginProps['shouldShow']\n}\n\nexport const FloatingMenu: Component = {\n name: 'FloatingMenu',\n\n props: {\n pluginKey: {\n type: [String, Object as PropType<Exclude<FloatingMenuPluginProps['pluginKey'], string>>],\n default: 'floatingMenu',\n },\n\n editor: {\n type: Object as PropType<FloatingMenuPluginProps['editor']>,\n required: true,\n },\n\n options: {\n type: Object as PropType<FloatingMenuPluginProps['options']>,\n default: () => ({}),\n },\n\n shouldShow: {\n type: Function as PropType<Exclude<FloatingMenuPluginProps['shouldShow'], null>>,\n default: null,\n },\n },\n\n watch: {\n editor: {\n immediate: true,\n handler(this: FloatingMenuInterface, editor: FloatingMenuPluginProps['editor']) {\n if (!editor) {\n return\n }\n\n ;(this.$el as HTMLElement).style.visibility = 'hidden'\n ;(this.$el as HTMLElement).style.position = 'absolute'\n\n this.$el.remove()\n\n this.$nextTick(() => {\n editor.registerPlugin(\n FloatingMenuPlugin({\n pluginKey: this.pluginKey,\n editor,\n element: this.$el as HTMLElement,\n options: this.options,\n shouldShow: this.shouldShow,\n }),\n )\n })\n },\n },\n },\n\n render(this: FloatingMenuInterface, createElement: CreateElement) {\n return createElement('div', { style: { visibility: 'hidden' } }, this.$slots.default)\n },\n\n beforeDestroy(this: FloatingMenuInterface) {\n this.editor.unregisterPlugin(this.pluginKey)\n },\n}\n","import Vue, { Component, CreateElement } 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 Vue, { Component, CreateElement } 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 { DecorationWithType, NodeView, NodeViewProps, NodeViewRenderer, NodeViewRendererOptions } from '@tiptap/core'\nimport { Node as ProseMirrorNode } from '@tiptap/pm/model'\nimport { Decoration, DecorationSource, NodeView as ProseMirrorNodeView } from '@tiptap/pm/view'\nimport Vue from 'vue'\nimport { VueConstructor } from 'vue/types/umd'\nimport { booleanProp, functionProp, objectProp } from 'vue-ts-types'\n\nimport { Editor } from './Editor.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 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\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 const contentElement = this.dom.querySelector('[data-node-view-content]')\n\n return (contentElement || this.dom) 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 { from, to } = this.editor.state.selection\n const pos = this.getPos()\n\n if (typeof pos !== 'number') {\n return\n }\n\n if (from <= pos && to >= pos + this.node.nodeSize) {\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 if (node === this.node && this.decorations === decorations && this.innerDecorations === innerDecorations) {\n return true\n }\n\n this.node = node\n this.decorations = decorations\n this.innerDecorations = innerDecorations\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 .map(item => item.type.attrs.class)\n .flat()\n .join(' ')\n )\n }\n\n destroy() {\n this.renderer.destroy()\n this.editor.off('selectionUpdate', this.handleSelectionUpdate)\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 Vue from 'vue'\nimport { VueConstructor } from 'vue/types/umd'\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","import_vue","Vue","Vue"]}
|
package/dist/index.d.cts
CHANGED
package/dist/index.d.ts
CHANGED
package/dist/index.js
CHANGED
|
@@ -33,19 +33,22 @@ var BubbleMenu = {
|
|
|
33
33
|
if (!editor) {
|
|
34
34
|
return;
|
|
35
35
|
}
|
|
36
|
+
;
|
|
36
37
|
this.$el.style.visibility = "hidden";
|
|
37
38
|
this.$el.style.position = "absolute";
|
|
38
39
|
this.$el.remove();
|
|
39
40
|
this.$nextTick(() => {
|
|
40
|
-
editor.registerPlugin(
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
41
|
+
editor.registerPlugin(
|
|
42
|
+
BubbleMenuPlugin({
|
|
43
|
+
updateDelay: this.updateDelay,
|
|
44
|
+
resizeDelay: this.resizeDelay,
|
|
45
|
+
options: this.options,
|
|
46
|
+
editor,
|
|
47
|
+
element: this.$el,
|
|
48
|
+
pluginKey: this.pluginKey,
|
|
49
|
+
shouldShow: this.shouldShow
|
|
50
|
+
})
|
|
51
|
+
);
|
|
49
52
|
});
|
|
50
53
|
}
|
|
51
54
|
}
|
|
@@ -151,17 +154,20 @@ var FloatingMenu = {
|
|
|
151
154
|
if (!editor) {
|
|
152
155
|
return;
|
|
153
156
|
}
|
|
157
|
+
;
|
|
154
158
|
this.$el.style.visibility = "hidden";
|
|
155
159
|
this.$el.style.position = "absolute";
|
|
156
160
|
this.$el.remove();
|
|
157
161
|
this.$nextTick(() => {
|
|
158
|
-
editor.registerPlugin(
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
162
|
+
editor.registerPlugin(
|
|
163
|
+
FloatingMenuPlugin({
|
|
164
|
+
pluginKey: this.pluginKey,
|
|
165
|
+
editor,
|
|
166
|
+
element: this.$el,
|
|
167
|
+
options: this.options,
|
|
168
|
+
shouldShow: this.shouldShow
|
|
169
|
+
})
|
|
170
|
+
);
|
|
165
171
|
});
|
|
166
172
|
}
|
|
167
173
|
}
|
|
@@ -224,9 +230,7 @@ var NodeViewWrapper = {
|
|
|
224
230
|
};
|
|
225
231
|
|
|
226
232
|
// src/VueNodeViewRenderer.ts
|
|
227
|
-
import {
|
|
228
|
-
NodeView
|
|
229
|
-
} from "@tiptap/core";
|
|
233
|
+
import { NodeView } from "@tiptap/core";
|
|
230
234
|
import Vue2 from "vue";
|
|
231
235
|
import { booleanProp, functionProp, objectProp } from "vue-ts-types";
|
|
232
236
|
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/BubbleMenu.ts","../src/Editor.ts","../src/EditorContent.ts","../src/FloatingMenu.ts","../src/NodeViewContent.ts","../src/NodeViewWrapper.ts","../src/VueNodeViewRenderer.ts","../src/VueRenderer.ts","../src/index.ts"],"sourcesContent":["import { BubbleMenuPlugin, BubbleMenuPluginProps } from '@tiptap/extension-bubble-menu'\nimport Vue, { Component, CreateElement, PropType } from 'vue'\n\nexport interface BubbleMenuInterface extends Vue {\n pluginKey: BubbleMenuPluginProps['pluginKey'],\n editor: BubbleMenuPluginProps['editor'],\n updateDelay: BubbleMenuPluginProps['updateDelay'],\n resizeDelay: BubbleMenuPluginProps['resizeDelay'],\n shouldShow: BubbleMenuPluginProps['shouldShow'],\n options: BubbleMenuPluginProps['options'],\n}\n\nexport const BubbleMenu: Component = {\n name: 'BubbleMenu',\n\n props: {\n pluginKey: {\n type: [String, Object as PropType<Exclude<BubbleMenuPluginProps['pluginKey'], string>>],\n default: 'bubbleMenu',\n },\n\n editor: {\n type: Object as PropType<BubbleMenuPluginProps['editor']>,\n required: true,\n },\n\n updateDelay: {\n type: Number as PropType<BubbleMenuPluginProps['updateDelay']>,\n },\n\n options: {\n type: Object as PropType<BubbleMenuPluginProps['options']>,\n default: {},\n },\n\n resizeDelay: {\n type: Number as PropType<BubbleMenuPluginProps['resizeDelay']>,\n },\n\n shouldShow: {\n type: Function as PropType<Exclude<BubbleMenuPluginProps['shouldShow'], null>>,\n default: null,\n },\n },\n\n watch: {\n editor: {\n immediate: true,\n handler(this: BubbleMenuInterface, editor: BubbleMenuPluginProps['editor']) {\n if (!editor) {\n return\n }\n\n (this.$el as HTMLElement).style.visibility = 'hidden';\n (this.$el as HTMLElement).style.position = 'absolute'\n\n this.$el.remove()\n\n this.$nextTick(() => {\n editor.registerPlugin(BubbleMenuPlugin({\n updateDelay: this.updateDelay,\n resizeDelay: this.resizeDelay,\n options: this.options,\n editor,\n element: this.$el as HTMLElement,\n pluginKey: this.pluginKey,\n shouldShow: this.shouldShow,\n }))\n })\n },\n },\n },\n\n render(this: BubbleMenuInterface, createElement: CreateElement) {\n return createElement('div', { style: { visibility: 'hidden' } }, this.$slots.default)\n },\n\n beforeDestroy(this: BubbleMenuInterface) {\n this.editor.unregisterPlugin(this.pluginKey)\n },\n}\n","import { Editor as CoreEditor } from '@tiptap/core'\nimport Vue from 'vue'\n\nexport class Editor extends CoreEditor {\n public contentComponent: Vue | null = null\n}\n","import Vue, { Component, CreateElement, PropType } from 'vue'\n\nimport { 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.options.element.firstChild) {\n return\n }\n\n element.append(...editor.options.element.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.options.element.firstChild) {\n return\n }\n\n const newElement = document.createElement('div')\n\n newElement.append(...editor.options.element.childNodes)\n\n editor.setOptions({\n element: newElement,\n })\n },\n}\n","import { FloatingMenuPlugin, FloatingMenuPluginProps } from '@tiptap/extension-floating-menu'\nimport Vue, { Component, CreateElement, PropType } from 'vue'\n\nexport interface FloatingMenuInterface extends Vue {\n pluginKey: FloatingMenuPluginProps['pluginKey'],\n options: FloatingMenuPluginProps['options'],\n editor: FloatingMenuPluginProps['editor'],\n shouldShow: FloatingMenuPluginProps['shouldShow'],\n}\n\nexport const FloatingMenu: Component = {\n name: 'FloatingMenu',\n\n props: {\n pluginKey: {\n type: [String, Object as PropType<Exclude<FloatingMenuPluginProps['pluginKey'], string>>],\n default: 'floatingMenu',\n },\n\n editor: {\n type: Object as PropType<FloatingMenuPluginProps['editor']>,\n required: true,\n },\n\n options: {\n type: Object as PropType<FloatingMenuPluginProps['options']>,\n default: () => ({}),\n },\n\n shouldShow: {\n type: Function as PropType<Exclude<FloatingMenuPluginProps['shouldShow'], null>>,\n default: null,\n },\n },\n\n watch: {\n editor: {\n immediate: true,\n handler(this: FloatingMenuInterface, editor: FloatingMenuPluginProps['editor']) {\n if (!editor) {\n return\n }\n\n (this.$el as HTMLElement).style.visibility = 'hidden';\n (this.$el as HTMLElement).style.position = 'absolute'\n\n this.$el.remove()\n\n this.$nextTick(() => {\n editor.registerPlugin(FloatingMenuPlugin({\n pluginKey: this.pluginKey,\n editor,\n element: this.$el as HTMLElement,\n options: this.options,\n shouldShow: this.shouldShow,\n }))\n })\n },\n },\n },\n\n render(this: FloatingMenuInterface, createElement: CreateElement) {\n return createElement('div', { style: { visibility: 'hidden' } }, this.$slots.default)\n },\n\n beforeDestroy(this: FloatingMenuInterface) {\n this.editor.unregisterPlugin(this.pluginKey)\n },\n}\n","import Vue, { Component, CreateElement } 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 Vue, { Component, CreateElement } from 'vue'\n\nexport interface NodeViewWrapperInterface extends Vue {\n as: string,\n decorationClasses: {\n value: string,\n },\n onDragStart: Function,\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 {\n DecorationWithType,\n NodeView,\n NodeViewProps,\n NodeViewRenderer,\n NodeViewRendererOptions,\n} from '@tiptap/core'\nimport { Node as ProseMirrorNode } from '@tiptap/pm/model'\nimport { Decoration, DecorationSource, NodeView as ProseMirrorNodeView } from '@tiptap/pm/view'\nimport Vue from 'vue'\nimport { VueConstructor } from 'vue/types/umd'\nimport { booleanProp, functionProp, objectProp } from 'vue-ts-types'\n\nimport { Editor } from './Editor.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 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\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 const contentElement = this.dom.querySelector('[data-node-view-content]')\n\n return (contentElement || this.dom) 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 { from, to } = this.editor.state.selection\n const pos = this.getPos()\n\n if (typeof pos !== 'number') {\n return\n }\n\n if (from <= pos && to >= pos + this.node.nodeSize) {\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(\n node: ProseMirrorNode,\n decorations: readonly Decoration[],\n innerDecorations: DecorationSource,\n ): 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 if (node === this.node && this.decorations === decorations && this.innerDecorations === innerDecorations) {\n return true\n }\n\n this.node = node\n this.decorations = decorations\n this.innerDecorations = innerDecorations\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 .map(item => item.type.attrs.class)\n .flat()\n .join(' ')\n )\n }\n\n destroy() {\n this.renderer.destroy()\n this.editor.off('selectionUpdate', this.handleSelectionUpdate)\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 Vue from 'vue'\nimport { VueConstructor } from 'vue/types/umd'\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\n .entries(props)\n .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 * from './BubbleMenu.js'\nexport { Editor } from './Editor.js'\nexport * from './EditorContent.js'\nexport * from './FloatingMenu.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":["Vue","Vue"]}
|
|
1
|
+
{"version":3,"sources":["../src/BubbleMenu.ts","../src/Editor.ts","../src/EditorContent.ts","../src/FloatingMenu.ts","../src/NodeViewContent.ts","../src/NodeViewWrapper.ts","../src/VueNodeViewRenderer.ts","../src/VueRenderer.ts","../src/index.ts"],"sourcesContent":["import { BubbleMenuPlugin, BubbleMenuPluginProps } from '@tiptap/extension-bubble-menu'\nimport Vue, { Component, CreateElement, PropType } from 'vue'\n\nexport interface BubbleMenuInterface extends Vue {\n pluginKey: BubbleMenuPluginProps['pluginKey']\n editor: BubbleMenuPluginProps['editor']\n updateDelay: BubbleMenuPluginProps['updateDelay']\n resizeDelay: BubbleMenuPluginProps['resizeDelay']\n shouldShow: BubbleMenuPluginProps['shouldShow']\n options: BubbleMenuPluginProps['options']\n}\n\nexport const BubbleMenu: Component = {\n name: 'BubbleMenu',\n\n props: {\n pluginKey: {\n type: [String, Object as PropType<Exclude<BubbleMenuPluginProps['pluginKey'], string>>],\n default: 'bubbleMenu',\n },\n\n editor: {\n type: Object as PropType<BubbleMenuPluginProps['editor']>,\n required: true,\n },\n\n updateDelay: {\n type: Number as PropType<BubbleMenuPluginProps['updateDelay']>,\n },\n\n options: {\n type: Object as PropType<BubbleMenuPluginProps['options']>,\n default: {},\n },\n\n resizeDelay: {\n type: Number as PropType<BubbleMenuPluginProps['resizeDelay']>,\n },\n\n shouldShow: {\n type: Function as PropType<Exclude<BubbleMenuPluginProps['shouldShow'], null>>,\n default: null,\n },\n },\n\n watch: {\n editor: {\n immediate: true,\n handler(this: BubbleMenuInterface, editor: BubbleMenuPluginProps['editor']) {\n if (!editor) {\n return\n }\n\n ;(this.$el as HTMLElement).style.visibility = 'hidden'\n ;(this.$el as HTMLElement).style.position = 'absolute'\n\n this.$el.remove()\n\n this.$nextTick(() => {\n editor.registerPlugin(\n BubbleMenuPlugin({\n updateDelay: this.updateDelay,\n resizeDelay: this.resizeDelay,\n options: this.options,\n editor,\n element: this.$el as HTMLElement,\n pluginKey: this.pluginKey,\n shouldShow: this.shouldShow,\n }),\n )\n })\n },\n },\n },\n\n render(this: BubbleMenuInterface, createElement: CreateElement) {\n return createElement('div', { style: { visibility: 'hidden' } }, this.$slots.default)\n },\n\n beforeDestroy(this: BubbleMenuInterface) {\n this.editor.unregisterPlugin(this.pluginKey)\n },\n}\n","import { Editor as CoreEditor } from '@tiptap/core'\nimport Vue from 'vue'\n\nexport class Editor extends CoreEditor {\n public contentComponent: Vue | null = null\n}\n","import Vue, { Component, CreateElement, PropType } from 'vue'\n\nimport { 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.options.element.firstChild) {\n return\n }\n\n element.append(...editor.options.element.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.options.element.firstChild) {\n return\n }\n\n const newElement = document.createElement('div')\n\n newElement.append(...editor.options.element.childNodes)\n\n editor.setOptions({\n element: newElement,\n })\n },\n}\n","import { FloatingMenuPlugin, FloatingMenuPluginProps } from '@tiptap/extension-floating-menu'\nimport Vue, { Component, CreateElement, PropType } from 'vue'\n\nexport interface FloatingMenuInterface extends Vue {\n pluginKey: FloatingMenuPluginProps['pluginKey']\n options: FloatingMenuPluginProps['options']\n editor: FloatingMenuPluginProps['editor']\n shouldShow: FloatingMenuPluginProps['shouldShow']\n}\n\nexport const FloatingMenu: Component = {\n name: 'FloatingMenu',\n\n props: {\n pluginKey: {\n type: [String, Object as PropType<Exclude<FloatingMenuPluginProps['pluginKey'], string>>],\n default: 'floatingMenu',\n },\n\n editor: {\n type: Object as PropType<FloatingMenuPluginProps['editor']>,\n required: true,\n },\n\n options: {\n type: Object as PropType<FloatingMenuPluginProps['options']>,\n default: () => ({}),\n },\n\n shouldShow: {\n type: Function as PropType<Exclude<FloatingMenuPluginProps['shouldShow'], null>>,\n default: null,\n },\n },\n\n watch: {\n editor: {\n immediate: true,\n handler(this: FloatingMenuInterface, editor: FloatingMenuPluginProps['editor']) {\n if (!editor) {\n return\n }\n\n ;(this.$el as HTMLElement).style.visibility = 'hidden'\n ;(this.$el as HTMLElement).style.position = 'absolute'\n\n this.$el.remove()\n\n this.$nextTick(() => {\n editor.registerPlugin(\n FloatingMenuPlugin({\n pluginKey: this.pluginKey,\n editor,\n element: this.$el as HTMLElement,\n options: this.options,\n shouldShow: this.shouldShow,\n }),\n )\n })\n },\n },\n },\n\n render(this: FloatingMenuInterface, createElement: CreateElement) {\n return createElement('div', { style: { visibility: 'hidden' } }, this.$slots.default)\n },\n\n beforeDestroy(this: FloatingMenuInterface) {\n this.editor.unregisterPlugin(this.pluginKey)\n },\n}\n","import Vue, { Component, CreateElement } 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 Vue, { Component, CreateElement } 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 { DecorationWithType, NodeView, NodeViewProps, NodeViewRenderer, NodeViewRendererOptions } from '@tiptap/core'\nimport { Node as ProseMirrorNode } from '@tiptap/pm/model'\nimport { Decoration, DecorationSource, NodeView as ProseMirrorNodeView } from '@tiptap/pm/view'\nimport Vue from 'vue'\nimport { VueConstructor } from 'vue/types/umd'\nimport { booleanProp, functionProp, objectProp } from 'vue-ts-types'\n\nimport { Editor } from './Editor.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 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\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 const contentElement = this.dom.querySelector('[data-node-view-content]')\n\n return (contentElement || this.dom) 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 { from, to } = this.editor.state.selection\n const pos = this.getPos()\n\n if (typeof pos !== 'number') {\n return\n }\n\n if (from <= pos && to >= pos + this.node.nodeSize) {\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 if (node === this.node && this.decorations === decorations && this.innerDecorations === innerDecorations) {\n return true\n }\n\n this.node = node\n this.decorations = decorations\n this.innerDecorations = innerDecorations\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 .map(item => item.type.attrs.class)\n .flat()\n .join(' ')\n )\n }\n\n destroy() {\n this.renderer.destroy()\n this.editor.off('selectionUpdate', this.handleSelectionUpdate)\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 Vue from 'vue'\nimport { VueConstructor } from 'vue/types/umd'\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 * from './BubbleMenu.js'\nexport { Editor } from './Editor.js'\nexport * from './EditorContent.js'\nexport * from './FloatingMenu.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":["Vue","Vue"]}
|
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.0.0-next.
|
|
4
|
+
"version": "3.0.0-next.4",
|
|
5
5
|
"homepage": "https://tiptap.dev",
|
|
6
6
|
"keywords": [
|
|
7
7
|
"tiptap",
|
|
@@ -14,7 +14,10 @@
|
|
|
14
14
|
},
|
|
15
15
|
"exports": {
|
|
16
16
|
".": {
|
|
17
|
-
"types":
|
|
17
|
+
"types": {
|
|
18
|
+
"import": "./dist/index.d.ts",
|
|
19
|
+
"require": "./dist/index.d.cts"
|
|
20
|
+
},
|
|
18
21
|
"import": "./dist/index.js",
|
|
19
22
|
"require": "./dist/index.cjs"
|
|
20
23
|
}
|
|
@@ -28,14 +31,14 @@
|
|
|
28
31
|
"dist"
|
|
29
32
|
],
|
|
30
33
|
"dependencies": {
|
|
31
|
-
"@tiptap/extension-bubble-menu": "^3.0.0-next.
|
|
32
|
-
"@tiptap/extension-floating-menu": "^3.0.0-next.
|
|
34
|
+
"@tiptap/extension-bubble-menu": "^3.0.0-next.4",
|
|
35
|
+
"@tiptap/extension-floating-menu": "^3.0.0-next.4",
|
|
33
36
|
"vue-ts-types": "1.6.2"
|
|
34
37
|
},
|
|
35
38
|
"devDependencies": {
|
|
36
|
-
"@tiptap/core": "^3.0.0-next.
|
|
37
|
-
"@tiptap/pm": "^3.0.0-next.
|
|
38
|
-
"vue": "^2.
|
|
39
|
+
"@tiptap/core": "^3.0.0-next.4",
|
|
40
|
+
"@tiptap/pm": "^3.0.0-next.4",
|
|
41
|
+
"vue": "^2.7.16"
|
|
39
42
|
},
|
|
40
43
|
"peerDependencies": {
|
|
41
44
|
"@tiptap/core": "^3.0.0-next.1",
|
|
@@ -49,6 +52,7 @@
|
|
|
49
52
|
},
|
|
50
53
|
"sideEffects": false,
|
|
51
54
|
"scripts": {
|
|
52
|
-
"build": "tsup"
|
|
55
|
+
"build": "tsup",
|
|
56
|
+
"lint": "prettier ./src/ --check && eslint --cache --quiet --no-error-on-unmatched-pattern ./src/"
|
|
53
57
|
}
|
|
54
|
-
}
|
|
58
|
+
}
|
package/src/BubbleMenu.ts
CHANGED
|
@@ -2,12 +2,12 @@ import { BubbleMenuPlugin, BubbleMenuPluginProps } from '@tiptap/extension-bubbl
|
|
|
2
2
|
import Vue, { Component, CreateElement, PropType } from 'vue'
|
|
3
3
|
|
|
4
4
|
export interface BubbleMenuInterface extends Vue {
|
|
5
|
-
pluginKey: BubbleMenuPluginProps['pluginKey']
|
|
6
|
-
editor: BubbleMenuPluginProps['editor']
|
|
7
|
-
updateDelay: BubbleMenuPluginProps['updateDelay']
|
|
8
|
-
resizeDelay: BubbleMenuPluginProps['resizeDelay']
|
|
9
|
-
shouldShow: BubbleMenuPluginProps['shouldShow']
|
|
10
|
-
options: BubbleMenuPluginProps['options']
|
|
5
|
+
pluginKey: BubbleMenuPluginProps['pluginKey']
|
|
6
|
+
editor: BubbleMenuPluginProps['editor']
|
|
7
|
+
updateDelay: BubbleMenuPluginProps['updateDelay']
|
|
8
|
+
resizeDelay: BubbleMenuPluginProps['resizeDelay']
|
|
9
|
+
shouldShow: BubbleMenuPluginProps['shouldShow']
|
|
10
|
+
options: BubbleMenuPluginProps['options']
|
|
11
11
|
}
|
|
12
12
|
|
|
13
13
|
export const BubbleMenu: Component = {
|
|
@@ -51,21 +51,23 @@ export const BubbleMenu: Component = {
|
|
|
51
51
|
return
|
|
52
52
|
}
|
|
53
53
|
|
|
54
|
-
(this.$el as HTMLElement).style.visibility = 'hidden'
|
|
55
|
-
(this.$el as HTMLElement).style.position = 'absolute'
|
|
54
|
+
;(this.$el as HTMLElement).style.visibility = 'hidden'
|
|
55
|
+
;(this.$el as HTMLElement).style.position = 'absolute'
|
|
56
56
|
|
|
57
57
|
this.$el.remove()
|
|
58
58
|
|
|
59
59
|
this.$nextTick(() => {
|
|
60
|
-
editor.registerPlugin(
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
60
|
+
editor.registerPlugin(
|
|
61
|
+
BubbleMenuPlugin({
|
|
62
|
+
updateDelay: this.updateDelay,
|
|
63
|
+
resizeDelay: this.resizeDelay,
|
|
64
|
+
options: this.options,
|
|
65
|
+
editor,
|
|
66
|
+
element: this.$el as HTMLElement,
|
|
67
|
+
pluginKey: this.pluginKey,
|
|
68
|
+
shouldShow: this.shouldShow,
|
|
69
|
+
}),
|
|
70
|
+
)
|
|
69
71
|
})
|
|
70
72
|
},
|
|
71
73
|
},
|
package/src/EditorContent.ts
CHANGED
package/src/FloatingMenu.ts
CHANGED
|
@@ -2,10 +2,10 @@ import { FloatingMenuPlugin, FloatingMenuPluginProps } from '@tiptap/extension-f
|
|
|
2
2
|
import Vue, { Component, CreateElement, PropType } from 'vue'
|
|
3
3
|
|
|
4
4
|
export interface FloatingMenuInterface extends Vue {
|
|
5
|
-
pluginKey: FloatingMenuPluginProps['pluginKey']
|
|
6
|
-
options: FloatingMenuPluginProps['options']
|
|
7
|
-
editor: FloatingMenuPluginProps['editor']
|
|
8
|
-
shouldShow: FloatingMenuPluginProps['shouldShow']
|
|
5
|
+
pluginKey: FloatingMenuPluginProps['pluginKey']
|
|
6
|
+
options: FloatingMenuPluginProps['options']
|
|
7
|
+
editor: FloatingMenuPluginProps['editor']
|
|
8
|
+
shouldShow: FloatingMenuPluginProps['shouldShow']
|
|
9
9
|
}
|
|
10
10
|
|
|
11
11
|
export const FloatingMenu: Component = {
|
|
@@ -41,19 +41,21 @@ export const FloatingMenu: Component = {
|
|
|
41
41
|
return
|
|
42
42
|
}
|
|
43
43
|
|
|
44
|
-
(this.$el as HTMLElement).style.visibility = 'hidden'
|
|
45
|
-
(this.$el as HTMLElement).style.position = 'absolute'
|
|
44
|
+
;(this.$el as HTMLElement).style.visibility = 'hidden'
|
|
45
|
+
;(this.$el as HTMLElement).style.position = 'absolute'
|
|
46
46
|
|
|
47
47
|
this.$el.remove()
|
|
48
48
|
|
|
49
49
|
this.$nextTick(() => {
|
|
50
|
-
editor.registerPlugin(
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
50
|
+
editor.registerPlugin(
|
|
51
|
+
FloatingMenuPlugin({
|
|
52
|
+
pluginKey: this.pluginKey,
|
|
53
|
+
editor,
|
|
54
|
+
element: this.$el as HTMLElement,
|
|
55
|
+
options: this.options,
|
|
56
|
+
shouldShow: this.shouldShow,
|
|
57
|
+
}),
|
|
58
|
+
)
|
|
57
59
|
})
|
|
58
60
|
},
|
|
59
61
|
},
|
package/src/NodeViewContent.ts
CHANGED
package/src/NodeViewWrapper.ts
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import Vue, { Component, CreateElement } from 'vue'
|
|
2
2
|
|
|
3
3
|
export interface NodeViewWrapperInterface extends Vue {
|
|
4
|
-
as: string
|
|
4
|
+
as: string
|
|
5
5
|
decorationClasses: {
|
|
6
|
-
value: string
|
|
7
|
-
}
|
|
8
|
-
onDragStart:
|
|
6
|
+
value: string
|
|
7
|
+
}
|
|
8
|
+
onDragStart: () => void
|
|
9
9
|
}
|
|
10
10
|
|
|
11
11
|
export const NodeViewWrapper: Component = {
|
|
@@ -1,10 +1,4 @@
|
|
|
1
|
-
import {
|
|
2
|
-
DecorationWithType,
|
|
3
|
-
NodeView,
|
|
4
|
-
NodeViewProps,
|
|
5
|
-
NodeViewRenderer,
|
|
6
|
-
NodeViewRendererOptions,
|
|
7
|
-
} from '@tiptap/core'
|
|
1
|
+
import { DecorationWithType, NodeView, NodeViewProps, NodeViewRenderer, NodeViewRendererOptions } from '@tiptap/core'
|
|
8
2
|
import { Node as ProseMirrorNode } from '@tiptap/pm/model'
|
|
9
3
|
import { Decoration, DecorationSource, NodeView as ProseMirrorNodeView } from '@tiptap/pm/view'
|
|
10
4
|
import Vue from 'vue'
|
|
@@ -28,22 +22,22 @@ export const nodeViewProps = {
|
|
|
28
22
|
export interface VueNodeViewRendererOptions extends NodeViewRendererOptions {
|
|
29
23
|
update:
|
|
30
24
|
| ((props: {
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
25
|
+
oldNode: ProseMirrorNode
|
|
26
|
+
oldDecorations: readonly Decoration[]
|
|
27
|
+
oldInnerDecorations: DecorationSource
|
|
28
|
+
newNode: ProseMirrorNode
|
|
29
|
+
newDecorations: readonly Decoration[]
|
|
30
|
+
innerDecorations: DecorationSource
|
|
31
|
+
updateProps: () => void
|
|
38
32
|
}) => boolean)
|
|
39
|
-
| null
|
|
33
|
+
| null
|
|
40
34
|
}
|
|
41
35
|
|
|
42
36
|
class VueNodeView extends NodeView<Vue | VueConstructor, Editor, VueNodeViewRendererOptions> {
|
|
43
37
|
renderer!: VueRenderer
|
|
44
38
|
|
|
45
39
|
decorationClasses!: {
|
|
46
|
-
value: string
|
|
40
|
+
value: string
|
|
47
41
|
}
|
|
48
42
|
|
|
49
43
|
mount() {
|
|
@@ -68,7 +62,7 @@ class VueNodeView extends NodeView<Vue | VueConstructor, Editor, VueNodeViewRend
|
|
|
68
62
|
})
|
|
69
63
|
|
|
70
64
|
// @ts-ignore
|
|
71
|
-
const vue = this.editor.contentComponent?.$options._base ?? Vue
|
|
65
|
+
const vue = this.editor.contentComponent?.$options._base ?? Vue // eslint-disable-line
|
|
72
66
|
|
|
73
67
|
const Component = vue.extend(this.component).extend({
|
|
74
68
|
props: Object.keys(props),
|
|
@@ -146,11 +140,7 @@ class VueNodeView extends NodeView<Vue | VueConstructor, Editor, VueNodeViewRend
|
|
|
146
140
|
* On update, update the React component.
|
|
147
141
|
* To prevent unnecessary updates, the `update` option can be used.
|
|
148
142
|
*/
|
|
149
|
-
update(
|
|
150
|
-
node: ProseMirrorNode,
|
|
151
|
-
decorations: readonly Decoration[],
|
|
152
|
-
innerDecorations: DecorationSource,
|
|
153
|
-
): boolean {
|
|
143
|
+
update(node: ProseMirrorNode, decorations: readonly Decoration[], innerDecorations: DecorationSource): boolean {
|
|
154
144
|
const rerenderComponent = (props?: Record<string, any>) => {
|
|
155
145
|
this.decorationClasses.value = this.getDecorationClasses()
|
|
156
146
|
this.renderer.updateProps(props)
|
package/src/VueRenderer.ts
CHANGED
|
@@ -8,7 +8,7 @@ export class VueRenderer {
|
|
|
8
8
|
ref!: Vue
|
|
9
9
|
|
|
10
10
|
constructor(component: Vue | VueConstructor, props: any) {
|
|
11
|
-
const Component =
|
|
11
|
+
const Component = typeof component === 'function' ? component : Vue.extend(component)
|
|
12
12
|
|
|
13
13
|
this.ref = new Component(props).$mount()
|
|
14
14
|
}
|
|
@@ -29,11 +29,9 @@ export class VueRenderer {
|
|
|
29
29
|
|
|
30
30
|
currentVueConstructor.config.silent = true
|
|
31
31
|
|
|
32
|
-
Object
|
|
33
|
-
.
|
|
34
|
-
|
|
35
|
-
this.ref.$props[key] = value
|
|
36
|
-
})
|
|
32
|
+
Object.entries(props).forEach(([key, value]) => {
|
|
33
|
+
this.ref.$props[key] = value
|
|
34
|
+
})
|
|
37
35
|
|
|
38
36
|
currentVueConstructor.config.silent = originalSilent
|
|
39
37
|
}
|