@tiptap/vue-2 2.11.6 → 3.0.0-beta.0

package/src/index.ts

@@ -1,7 +1,5 @@
-export * from './BubbleMenu.js'
 export { Editor } from './Editor.js'
 export * from './EditorContent.js'
-export * from './FloatingMenu.js'
 export * from './NodeViewContent.js'
 export * from './NodeViewWrapper.js'
 export * from './VueNodeViewRenderer.js'

package/src/menus/BubbleMenu.ts

@@ -0,0 +1,85 @@
+import type { BubbleMenuPluginProps } from '@tiptap/extension-bubble-menu'
+import { BubbleMenuPlugin } from '@tiptap/extension-bubble-menu'
+import type { Component, CreateElement, PropType } from 'vue'
+import type Vue from 'vue'
+
+export interface BubbleMenuInterface extends Vue {
+  pluginKey: BubbleMenuPluginProps['pluginKey']
+  editor: BubbleMenuPluginProps['editor']
+  updateDelay: BubbleMenuPluginProps['updateDelay']
+  resizeDelay: BubbleMenuPluginProps['resizeDelay']
+  shouldShow: BubbleMenuPluginProps['shouldShow']
+  options: BubbleMenuPluginProps['options']
+}
+
+export const BubbleMenu: Component = {
+  name: 'BubbleMenu',
+
+  props: {
+    pluginKey: {
+      type: [String, Object as PropType<Exclude<BubbleMenuPluginProps['pluginKey'], string>>],
+      default: 'bubbleMenu',
+    },
+
+    editor: {
+      type: Object as PropType<BubbleMenuPluginProps['editor']>,
+      required: true,
+    },
+
+    updateDelay: {
+      type: Number as PropType<BubbleMenuPluginProps['updateDelay']>,
+    },
+
+    options: {
+      type: Object as PropType<BubbleMenuPluginProps['options']>,
+      default: {},
+    },
+
+    resizeDelay: {
+      type: Number as PropType<BubbleMenuPluginProps['resizeDelay']>,
+    },
+
+    shouldShow: {
+      type: Function as PropType<Exclude<BubbleMenuPluginProps['shouldShow'], null>>,
+      default: null,
+    },
+  },
+
+  watch: {
+    editor: {
+      immediate: true,
+      handler(this: BubbleMenuInterface, editor: BubbleMenuPluginProps['editor']) {
+        if (!editor) {
+          return
+        }
+
+        ;(this.$el as HTMLElement).style.visibility = 'hidden'
+        ;(this.$el as HTMLElement).style.position = 'absolute'
+
+        this.$el.remove()
+
+        this.$nextTick(() => {
+          editor.registerPlugin(
+            BubbleMenuPlugin({
+              updateDelay: this.updateDelay,
+              resizeDelay: this.resizeDelay,
+              options: this.options,
+              editor,
+              element: this.$el as HTMLElement,
+              pluginKey: this.pluginKey,
+              shouldShow: this.shouldShow,
+            }),
+          )
+        })
+      },
+    },
+  },
+
+  render(this: BubbleMenuInterface, createElement: CreateElement) {
+    return createElement('div', { style: { visibility: 'hidden' } }, this.$slots.default)
+  },
+
+  beforeDestroy(this: BubbleMenuInterface) {
+    this.editor.unregisterPlugin(this.pluginKey)
+  },
+}

package/src/{FloatingMenu.ts → menus/FloatingMenu.ts}

@@ -1,11 +1,13 @@
-import { FloatingMenuPlugin, FloatingMenuPluginProps } from '@tiptap/extension-floating-menu'
-import Vue, { Component, CreateElement, PropType } from 'vue'
+import type { FloatingMenuPluginProps } from '@tiptap/extension-floating-menu'
+import { FloatingMenuPlugin } from '@tiptap/extension-floating-menu'
+import type { Component, CreateElement, PropType } from 'vue'
+import type Vue from 'vue'
 
 export interface FloatingMenuInterface extends Vue {
-  pluginKey: FloatingMenuPluginProps['pluginKey'],
-  tippyOptions: FloatingMenuPluginProps['tippyOptions'],
-  editor: FloatingMenuPluginProps['editor'],
-  shouldShow: FloatingMenuPluginProps['shouldShow'],
+  pluginKey: FloatingMenuPluginProps['pluginKey']
+  options: FloatingMenuPluginProps['options']
+  editor: FloatingMenuPluginProps['editor']
+  shouldShow: FloatingMenuPluginProps['shouldShow']
 }
 
 export const FloatingMenu: Component = {
@@ -22,8 +24,8 @@ export const FloatingMenu: Component = {
       required: true,
     },
 
-    tippyOptions: {
-      type: Object as PropType<FloatingMenuPluginProps['tippyOptions']>,
+    options: {
+      type: Object as PropType<FloatingMenuPluginProps['options']>,
       default: () => ({}),
     },
 
@@ -41,14 +43,21 @@ export const FloatingMenu: Component = {
           return
         }
 
+        ;(this.$el as HTMLElement).style.visibility = 'hidden'
+        ;(this.$el as HTMLElement).style.position = 'absolute'
+
+        this.$el.remove()
+
         this.$nextTick(() => {
-          editor.registerPlugin(FloatingMenuPlugin({
-            pluginKey: this.pluginKey,
-            editor,
-            element: this.$el as HTMLElement,
-            tippyOptions: this.tippyOptions,
-            shouldShow: this.shouldShow,
-          }))
+          editor.registerPlugin(
+            FloatingMenuPlugin({
+              pluginKey: this.pluginKey,
+              editor,
+              element: this.$el as HTMLElement,
+              options: this.options,
+              shouldShow: this.shouldShow,
+            }),
+          )
         })
       },
     },

package/src/menus/index.ts

@@ -0,0 +1,2 @@
+export * from './BubbleMenu.js'
+export * from './FloatingMenu.js'

package/dist/BubbleMenu.d.ts

@@ -1,11 +0,0 @@
-import { BubbleMenuPluginProps } from '@tiptap/extension-bubble-menu';
-import Vue, { Component } from 'vue';
-export interface BubbleMenuInterface extends Vue {
-    pluginKey: BubbleMenuPluginProps['pluginKey'];
-    editor: BubbleMenuPluginProps['editor'];
-    tippyOptions: BubbleMenuPluginProps['tippyOptions'];
-    updateDelay: BubbleMenuPluginProps['updateDelay'];
-    shouldShow: BubbleMenuPluginProps['shouldShow'];
-}
-export declare const BubbleMenu: Component;
-//# sourceMappingURL=BubbleMenu.d.ts.map

package/dist/BubbleMenu.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"BubbleMenu.d.ts","sourceRoot":"","sources":["../src/BubbleMenu.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,qBAAqB,EAAE,MAAM,+BAA+B,CAAA;AACvF,OAAO,GAAG,EAAE,EAAE,SAAS,EAA2B,MAAM,KAAK,CAAA;AAE7D,MAAM,WAAW,mBAAoB,SAAQ,GAAG;IAC9C,SAAS,EAAE,qBAAqB,CAAC,WAAW,CAAC,CAAC;IAC9C,MAAM,EAAE,qBAAqB,CAAC,QAAQ,CAAC,CAAC;IACxC,YAAY,EAAE,qBAAqB,CAAC,cAAc,CAAC,CAAC;IACpD,WAAW,EAAE,qBAAqB,CAAC,aAAa,CAAC,CAAC;IAClD,UAAU,EAAE,qBAAqB,CAAC,YAAY,CAAC,CAAC;CACjD;AAED,eAAO,MAAM,UAAU,EAAE,SA0DxB,CAAA"}

package/dist/Editor.d.ts

@@ -1,6 +0,0 @@
-import { Editor as CoreEditor } from '@tiptap/core';
-import Vue from 'vue';
-export declare class Editor extends CoreEditor {
-    contentComponent: Vue | null;
-}
-//# sourceMappingURL=Editor.d.ts.map

package/dist/Editor.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Editor.d.ts","sourceRoot":"","sources":["../src/Editor.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,cAAc,CAAA;AACnD,OAAO,GAAG,MAAM,KAAK,CAAA;AAErB,qBAAa,MAAO,SAAQ,UAAU;IAC7B,gBAAgB,EAAE,GAAG,GAAG,IAAI,CAAO;CAC3C"}

package/dist/EditorContent.d.ts

@@ -1,7 +0,0 @@
-import Vue, { Component } from 'vue';
-import { Editor } from './Editor.js';
-export interface EditorContentInterface extends Vue {
-    editor: Editor;
-}
-export declare const EditorContent: Component;
-//# sourceMappingURL=EditorContent.d.ts.map

package/dist/EditorContent.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"EditorContent.d.ts","sourceRoot":"","sources":["../src/EditorContent.ts"],"names":[],"mappings":"AAAA,OAAO,GAAG,EAAE,EAAE,SAAS,EAA2B,MAAM,KAAK,CAAA;AAE7D,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAA;AAEpC,MAAM,WAAW,sBAAuB,SAAQ,GAAG;IACjD,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,aAAa,EAAE,SAmE3B,CAAA"}

package/dist/FloatingMenu.d.ts

@@ -1,10 +0,0 @@
-import { FloatingMenuPluginProps } from '@tiptap/extension-floating-menu';
-import Vue, { Component } from 'vue';
-export interface FloatingMenuInterface extends Vue {
-    pluginKey: FloatingMenuPluginProps['pluginKey'];
-    tippyOptions: FloatingMenuPluginProps['tippyOptions'];
-    editor: FloatingMenuPluginProps['editor'];
-    shouldShow: FloatingMenuPluginProps['shouldShow'];
-}
-export declare const FloatingMenu: Component;
-//# sourceMappingURL=FloatingMenu.d.ts.map

package/dist/FloatingMenu.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"FloatingMenu.d.ts","sourceRoot":"","sources":["../src/FloatingMenu.ts"],"names":[],"mappings":"AAAA,OAAO,EAAsB,uBAAuB,EAAE,MAAM,iCAAiC,CAAA;AAC7F,OAAO,GAAG,EAAE,EAAE,SAAS,EAA2B,MAAM,KAAK,CAAA;AAE7D,MAAM,WAAW,qBAAsB,SAAQ,GAAG;IAChD,SAAS,EAAE,uBAAuB,CAAC,WAAW,CAAC,CAAC;IAChD,YAAY,EAAE,uBAAuB,CAAC,cAAc,CAAC,CAAC;IACtD,MAAM,EAAE,uBAAuB,CAAC,QAAQ,CAAC,CAAC;IAC1C,UAAU,EAAE,uBAAuB,CAAC,YAAY,CAAC,CAAC;CACnD;AAED,eAAO,MAAM,YAAY,EAAE,SAqD1B,CAAA"}

package/dist/NodeViewContent.d.ts

@@ -1,6 +0,0 @@
-import Vue, { Component } from 'vue';
-export interface NodeViewContentInterface extends Vue {
-    as: string;
-}
-export declare const NodeViewContent: Component;
-//# sourceMappingURL=NodeViewContent.d.ts.map

package/dist/NodeViewContent.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"NodeViewContent.d.ts","sourceRoot":"","sources":["../src/NodeViewContent.ts"],"names":[],"mappings":"AAAA,OAAO,GAAG,EAAE,EAAE,SAAS,EAAiB,MAAM,KAAK,CAAA;AAEnD,MAAM,WAAW,wBAAyB,SAAQ,GAAG;IACnD,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,eAAO,MAAM,eAAe,EAAE,SAkB7B,CAAA"}

package/dist/NodeViewWrapper.d.ts

@@ -1,10 +0,0 @@
-import Vue, { Component } from 'vue';
-export interface NodeViewWrapperInterface extends Vue {
-    as: string;
-    decorationClasses: {
-        value: string;
-    };
-    onDragStart: () => void;
-}
-export declare const NodeViewWrapper: Component;
-//# sourceMappingURL=NodeViewWrapper.d.ts.map

package/dist/NodeViewWrapper.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"NodeViewWrapper.d.ts","sourceRoot":"","sources":["../src/NodeViewWrapper.ts"],"names":[],"mappings":"AAAA,OAAO,GAAG,EAAE,EAAE,SAAS,EAAiB,MAAM,KAAK,CAAA;AAEnD,MAAM,WAAW,wBAAyB,SAAQ,GAAG;IACnD,EAAE,EAAE,MAAM,CAAC;IACX,iBAAiB,EAAE;QACjB,KAAK,EAAE,MAAM,CAAC;KACf,CAAC;IACF,WAAW,EAAE,MAAM,IAAI,CAAC;CACzB;AAED,eAAO,MAAM,eAAe,EAAE,SA4B7B,CAAA"}

package/dist/VueNodeViewRenderer.d.ts

@@ -1,40 +0,0 @@
-import { DecorationWithType, NodeViewRenderer, NodeViewRendererOptions } from '@tiptap/core';
-import { Node as ProseMirrorNode } from '@tiptap/pm/model';
-import { Decoration, DecorationSource } from '@tiptap/pm/view';
-import Vue from 'vue';
-import { VueConstructor } from 'vue/types/umd';
-export declare const nodeViewProps: {
-    editor: import("vue-ts-types/dist/types.js").RequiredPropOptions<import("@tiptap/core").Editor>;
-    node: import("vue-ts-types/dist/types.js").RequiredPropOptions<ProseMirrorNode>;
-    decorations: import("vue-ts-types/dist/types.js").RequiredPropOptions<readonly DecorationWithType[]>;
-    selected: import("vue-ts-types/dist/types.js").RequiredPropOptions<boolean>;
-    extension: import("vue-ts-types/dist/types.js").RequiredPropOptions<import("@tiptap/core").Node<any, any>>;
-    getPos: import("vue-ts-types/dist/types.js").PropOptions<() => number> & {
-        required: true;
-    } & {
-        default?: (() => () => number) | undefined;
-    };
-    updateAttributes: import("vue-ts-types/dist/types.js").PropOptions<(attributes: Record<string, any>) => void> & {
-        required: true;
-    } & {
-        default?: (() => (attributes: Record<string, any>) => void) | undefined;
-    };
-    deleteNode: import("vue-ts-types/dist/types.js").PropOptions<() => void> & {
-        required: true;
-    } & {
-        default?: (() => () => void) | undefined;
-    };
-};
-export interface VueNodeViewRendererOptions extends NodeViewRendererOptions {
-    update: ((props: {
-        oldNode: ProseMirrorNode;
-        oldDecorations: readonly Decoration[];
-        oldInnerDecorations: DecorationSource;
-        newNode: ProseMirrorNode;
-        newDecorations: readonly Decoration[];
-        innerDecorations: DecorationSource;
-        updateProps: () => void;
-    }) => boolean) | null;
-}
-export declare function VueNodeViewRenderer(component: Vue | VueConstructor, options?: Partial<VueNodeViewRendererOptions>): NodeViewRenderer;
-//# sourceMappingURL=VueNodeViewRenderer.d.ts.map

package/dist/VueNodeViewRenderer.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"VueNodeViewRenderer.d.ts","sourceRoot":"","sources":["../src/VueNodeViewRenderer.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,kBAAkB,EAGlB,gBAAgB,EAChB,uBAAuB,EACxB,MAAM,cAAc,CAAA;AACrB,OAAO,EAAE,IAAI,IAAI,eAAe,EAAE,MAAM,kBAAkB,CAAA;AAC1D,OAAO,EAAE,UAAU,EAAE,gBAAgB,EAAmC,MAAM,iBAAiB,CAAA;AAC/F,OAAO,GAAG,MAAM,KAAK,CAAA;AACrB,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAM9C,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;CASzB,CAAA;AAED,MAAM,WAAW,0BAA2B,SAAQ,uBAAuB;IACzE,MAAM,EACF,CAAC,CAAC,KAAK,EAAE;QACT,OAAO,EAAE,eAAe,CAAC;QACzB,cAAc,EAAE,SAAS,UAAU,EAAE,CAAC;QACtC,mBAAmB,EAAE,gBAAgB,CAAC;QACtC,OAAO,EAAE,eAAe,CAAC;QACzB,cAAc,EAAE,SAAS,UAAU,EAAE,CAAC;QACtC,gBAAgB,EAAE,gBAAgB,CAAC;QACnC,WAAW,EAAE,MAAM,IAAI,CAAC;KACvB,KAAK,OAAO,CAAC,GACd,IAAI,CAAC;CACV;AAkMD,wBAAgB,mBAAmB,CACjC,SAAS,EAAE,GAAG,GAAG,cAAc,EAC/B,OAAO,CAAC,EAAE,OAAO,CAAC,0BAA0B,CAAC,GAC5C,gBAAgB,CAWlB"}

package/dist/VueRenderer.d.ts

@@ -1,13 +0,0 @@
-import Vue from 'vue';
-import { VueConstructor } from 'vue/types/umd';
-/**
- * The VueRenderer class is responsible for rendering a Vue component as a ProseMirror node view.
- */
-export declare class VueRenderer {
-    ref: Vue;
-    constructor(component: Vue | VueConstructor, props: any);
-    get element(): Element;
-    updateProps(props?: Record<string, any>): void;
-    destroy(): void;
-}
-//# sourceMappingURL=VueRenderer.d.ts.map

package/dist/VueRenderer.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"VueRenderer.d.ts","sourceRoot":"","sources":["../src/VueRenderer.ts"],"names":[],"mappings":"AAAA,OAAO,GAAG,MAAM,KAAK,CAAA;AACrB,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAE9C;;GAEG;AACH,qBAAa,WAAW;IACtB,GAAG,EAAG,GAAG,CAAA;gBAEG,SAAS,EAAE,GAAG,GAAG,cAAc,EAAE,KAAK,EAAE,GAAG;IAMvD,IAAI,OAAO,IAAI,OAAO,CAErB;IAED,WAAW,CAAC,KAAK,GAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAM,GAAG,IAAI;IAqBlD,OAAO,IAAI,IAAI;CAGhB"}

package/dist/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAA;AAC/B,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAA;AACpC,cAAc,oBAAoB,CAAA;AAClC,cAAc,mBAAmB,CAAA;AACjC,cAAc,sBAAsB,CAAA;AACpC,cAAc,sBAAsB,CAAA;AACpC,cAAc,0BAA0B,CAAA;AACxC,cAAc,kBAAkB,CAAA;AAChC,cAAc,cAAc,CAAA"}