@tiptap/vue-2 3.0.0-beta.0 → 3.0.0-beta.2
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 +1 -2
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +1 -2
- package/dist/index.js.map +1 -1
- package/dist/menus/index.cjs +48 -20
- package/dist/menus/index.cjs.map +1 -1
- package/dist/menus/index.d.cts +1 -1
- package/dist/menus/index.d.ts +1 -1
- package/dist/menus/index.js +43 -15
- package/dist/menus/index.js.map +1 -1
- package/package.json +5 -5
- package/src/VueNodeViewRenderer.ts +1 -3
package/dist/index.cjs
CHANGED
|
@@ -255,8 +255,7 @@ var VueNodeView = class extends import_core2.NodeView {
|
|
|
255
255
|
if (this.node.isLeaf) {
|
|
256
256
|
return null;
|
|
257
257
|
}
|
|
258
|
-
|
|
259
|
-
return contentElement || this.dom;
|
|
258
|
+
return this.dom.querySelector("[data-node-view-content]");
|
|
260
259
|
}
|
|
261
260
|
/**
|
|
262
261
|
* On editor selection update, check if the node is selected.
|
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/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.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 // TODO using the new editor.mount method might allow us to remove this\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 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 { 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 Vue from 'vue'\nimport type { VueConstructor } from 'vue/types/umd'\nimport { booleanProp, functionProp, objectProp } from 'vue-ts-types'\n\nimport type { 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 type { 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"]}
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/Editor.ts","../src/EditorContent.ts","../src/NodeViewContent.ts","../src/NodeViewWrapper.ts","../src/VueNodeViewRenderer.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.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 // TODO using the new editor.mount method might allow us to remove this\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 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 { 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 Vue from 'vue'\nimport type { VueConstructor } from 'vue/types/umd'\nimport { booleanProp, functionProp, objectProp } from 'vue-ts-types'\n\nimport type { 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 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 { 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 type { 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.js
CHANGED
|
@@ -212,8 +212,7 @@ var VueNodeView = class extends NodeView {
|
|
|
212
212
|
if (this.node.isLeaf) {
|
|
213
213
|
return null;
|
|
214
214
|
}
|
|
215
|
-
|
|
216
|
-
return contentElement || this.dom;
|
|
215
|
+
return this.dom.querySelector("[data-node-view-content]");
|
|
217
216
|
}
|
|
218
217
|
/**
|
|
219
218
|
* On editor selection update, check if the node is selected.
|
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/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.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 // TODO using the new editor.mount method might allow us to remove this\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 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 { 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 Vue from 'vue'\nimport type { VueConstructor } from 'vue/types/umd'\nimport { booleanProp, functionProp, objectProp } from 'vue-ts-types'\n\nimport type { 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 type { 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 { 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":["Vue","Vue"]}
|
|
1
|
+
{"version":3,"sources":["../src/Editor.ts","../src/EditorContent.ts","../src/NodeViewContent.ts","../src/NodeViewWrapper.ts","../src/VueNodeViewRenderer.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.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 // TODO using the new editor.mount method might allow us to remove this\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 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 { 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 Vue from 'vue'\nimport type { VueConstructor } from 'vue/types/umd'\nimport { booleanProp, functionProp, objectProp } from 'vue-ts-types'\n\nimport type { 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 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 { 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 type { 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 { 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":["Vue","Vue"]}
|
package/dist/menus/index.cjs
CHANGED
|
@@ -20,11 +20,14 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
|
|
|
20
20
|
// src/menus/index.ts
|
|
21
21
|
var index_exports = {};
|
|
22
22
|
__export(index_exports, {
|
|
23
|
-
BubbleMenu: () =>
|
|
23
|
+
BubbleMenu: () => BubbleMenu2,
|
|
24
24
|
FloatingMenu: () => FloatingMenu2
|
|
25
25
|
});
|
|
26
26
|
module.exports = __toCommonJS(index_exports);
|
|
27
27
|
|
|
28
|
+
// ../extension-bubble-menu/dist/index.js
|
|
29
|
+
var import_core2 = require("@tiptap/core");
|
|
30
|
+
|
|
28
31
|
// ../../node_modules/.pnpm/@floating-ui+utils@0.2.9/node_modules/@floating-ui/utils/dist/floating-ui.utils.mjs
|
|
29
32
|
var sides = ["top", "right", "bottom", "left"];
|
|
30
33
|
var alignments = ["start", "end"];
|
|
@@ -1608,8 +1611,8 @@ var computePosition2 = (reference, floating, options) => {
|
|
|
1608
1611
|
});
|
|
1609
1612
|
};
|
|
1610
1613
|
|
|
1611
|
-
// ../extension-bubble-menu/
|
|
1612
|
-
var
|
|
1614
|
+
// ../extension-bubble-menu/dist/index.js
|
|
1615
|
+
var import_core3 = require("@tiptap/core");
|
|
1613
1616
|
var import_state = require("@tiptap/pm/state");
|
|
1614
1617
|
var BubbleMenuView = class {
|
|
1615
1618
|
constructor({
|
|
@@ -1634,12 +1637,12 @@ var BubbleMenuView = class {
|
|
|
1634
1637
|
hide: false,
|
|
1635
1638
|
inline: false
|
|
1636
1639
|
};
|
|
1637
|
-
this.shouldShow = ({ view, state, from, to }) => {
|
|
1640
|
+
this.shouldShow = ({ view: view2, state, from, to }) => {
|
|
1638
1641
|
const { doc, selection } = state;
|
|
1639
1642
|
const { empty } = selection;
|
|
1640
|
-
const isEmptyTextBlock = !doc.textBetween(from, to).length && (0,
|
|
1643
|
+
const isEmptyTextBlock = !doc.textBetween(from, to).length && (0, import_core3.isTextSelection)(state.selection);
|
|
1641
1644
|
const isChildOfMenu = this.element.contains(document.activeElement);
|
|
1642
|
-
const hasEditorFocus =
|
|
1645
|
+
const hasEditorFocus = view2.hasFocus() || isChildOfMenu;
|
|
1643
1646
|
if (!hasEditorFocus || empty || isEmptyTextBlock || !this.editor.isEditable) {
|
|
1644
1647
|
return false;
|
|
1645
1648
|
}
|
|
@@ -1668,9 +1671,9 @@ var BubbleMenuView = class {
|
|
|
1668
1671
|
}
|
|
1669
1672
|
this.hide();
|
|
1670
1673
|
};
|
|
1671
|
-
this.handleDebouncedUpdate = (
|
|
1672
|
-
const selectionChanged = !(oldState == null ? void 0 : oldState.selection.eq(
|
|
1673
|
-
const docChanged = !(oldState == null ? void 0 : oldState.doc.eq(
|
|
1674
|
+
this.handleDebouncedUpdate = (view2, oldState) => {
|
|
1675
|
+
const selectionChanged = !(oldState == null ? void 0 : oldState.selection.eq(view2.state.selection));
|
|
1676
|
+
const docChanged = !(oldState == null ? void 0 : oldState.doc.eq(view2.state.doc));
|
|
1674
1677
|
if (!selectionChanged && !docChanged) {
|
|
1675
1678
|
return;
|
|
1676
1679
|
}
|
|
@@ -1678,17 +1681,17 @@ var BubbleMenuView = class {
|
|
|
1678
1681
|
clearTimeout(this.updateDebounceTimer);
|
|
1679
1682
|
}
|
|
1680
1683
|
this.updateDebounceTimer = window.setTimeout(() => {
|
|
1681
|
-
this.updateHandler(
|
|
1684
|
+
this.updateHandler(view2, selectionChanged, docChanged, oldState);
|
|
1682
1685
|
}, this.updateDelay);
|
|
1683
1686
|
};
|
|
1684
|
-
this.updateHandler = (
|
|
1685
|
-
const { composing } =
|
|
1687
|
+
this.updateHandler = (view2, selectionChanged, docChanged, oldState) => {
|
|
1688
|
+
const { composing } = view2;
|
|
1686
1689
|
const isSame = !selectionChanged && !docChanged;
|
|
1687
1690
|
if (composing || isSame) {
|
|
1688
1691
|
return;
|
|
1689
1692
|
}
|
|
1690
|
-
const
|
|
1691
|
-
if (!
|
|
1693
|
+
const shouldShow2 = this.getShouldShow(oldState);
|
|
1694
|
+
if (!shouldShow2) {
|
|
1692
1695
|
this.hide();
|
|
1693
1696
|
return;
|
|
1694
1697
|
}
|
|
@@ -1765,7 +1768,7 @@ var BubbleMenuView = class {
|
|
|
1765
1768
|
updatePosition() {
|
|
1766
1769
|
const { selection } = this.editor.state;
|
|
1767
1770
|
const virtualElement = {
|
|
1768
|
-
getBoundingClientRect: () => (0,
|
|
1771
|
+
getBoundingClientRect: () => (0, import_core3.posToDOMRect)(this.view, selection.from, selection.to)
|
|
1769
1772
|
};
|
|
1770
1773
|
computePosition2(virtualElement, this.element, {
|
|
1771
1774
|
placement: this.floatingUIOptions.placement,
|
|
@@ -1832,9 +1835,34 @@ var BubbleMenuPlugin = (options) => {
|
|
|
1832
1835
|
view: (view) => new BubbleMenuView({ view, ...options })
|
|
1833
1836
|
});
|
|
1834
1837
|
};
|
|
1838
|
+
var BubbleMenu = import_core2.Extension.create({
|
|
1839
|
+
name: "bubbleMenu",
|
|
1840
|
+
addOptions() {
|
|
1841
|
+
return {
|
|
1842
|
+
element: null,
|
|
1843
|
+
pluginKey: "bubbleMenu",
|
|
1844
|
+
updateDelay: void 0,
|
|
1845
|
+
shouldShow: null
|
|
1846
|
+
};
|
|
1847
|
+
},
|
|
1848
|
+
addProseMirrorPlugins() {
|
|
1849
|
+
if (!this.options.element) {
|
|
1850
|
+
return [];
|
|
1851
|
+
}
|
|
1852
|
+
return [
|
|
1853
|
+
BubbleMenuPlugin({
|
|
1854
|
+
pluginKey: this.options.pluginKey,
|
|
1855
|
+
editor: this.editor,
|
|
1856
|
+
element: this.options.element,
|
|
1857
|
+
updateDelay: this.options.updateDelay,
|
|
1858
|
+
shouldShow: this.options.shouldShow
|
|
1859
|
+
})
|
|
1860
|
+
];
|
|
1861
|
+
}
|
|
1862
|
+
});
|
|
1835
1863
|
|
|
1836
1864
|
// src/menus/BubbleMenu.ts
|
|
1837
|
-
var
|
|
1865
|
+
var BubbleMenu2 = {
|
|
1838
1866
|
name: "BubbleMenu",
|
|
1839
1867
|
props: {
|
|
1840
1868
|
pluginKey: {
|
|
@@ -1896,8 +1924,8 @@ var BubbleMenu = {
|
|
|
1896
1924
|
};
|
|
1897
1925
|
|
|
1898
1926
|
// ../extension-floating-menu/dist/index.js
|
|
1899
|
-
var import_core3 = require("@tiptap/core");
|
|
1900
1927
|
var import_core4 = require("@tiptap/core");
|
|
1928
|
+
var import_core5 = require("@tiptap/core");
|
|
1901
1929
|
var import_state2 = require("@tiptap/pm/state");
|
|
1902
1930
|
var FloatingMenuView = class {
|
|
1903
1931
|
constructor({ editor, element, view, options, shouldShow }) {
|
|
@@ -1977,7 +2005,7 @@ var FloatingMenuView = class {
|
|
|
1977
2005
|
}
|
|
1978
2006
|
}
|
|
1979
2007
|
getTextContent(node) {
|
|
1980
|
-
return (0,
|
|
2008
|
+
return (0, import_core5.getText)(node, { textSerializers: (0, import_core5.getTextSerializersFromSchema)(this.editor.schema) });
|
|
1981
2009
|
}
|
|
1982
2010
|
get middlewares() {
|
|
1983
2011
|
const middlewares = [];
|
|
@@ -2037,7 +2065,7 @@ var FloatingMenuView = class {
|
|
|
2037
2065
|
updatePosition() {
|
|
2038
2066
|
const { selection } = this.editor.state;
|
|
2039
2067
|
const virtualElement = {
|
|
2040
|
-
getBoundingClientRect: () => (0,
|
|
2068
|
+
getBoundingClientRect: () => (0, import_core5.posToDOMRect)(this.view, selection.from, selection.to)
|
|
2041
2069
|
};
|
|
2042
2070
|
computePosition2(virtualElement, this.element, {
|
|
2043
2071
|
placement: this.floatingUIOptions.placement,
|
|
@@ -2079,7 +2107,7 @@ var FloatingMenuPlugin = (options) => {
|
|
|
2079
2107
|
view: (view) => new FloatingMenuView({ view, ...options })
|
|
2080
2108
|
});
|
|
2081
2109
|
};
|
|
2082
|
-
var FloatingMenu =
|
|
2110
|
+
var FloatingMenu = import_core4.Extension.create({
|
|
2083
2111
|
name: "floatingMenu",
|
|
2084
2112
|
addOptions() {
|
|
2085
2113
|
return {
|