@tiptap/vue-3 2.5.0-beta.1 → 2.5.0-beta.3

package/dist/packages/vue-3/src/BubbleMenu.d.ts

@@ -1,72 +1,72 @@
-import { PropType } from 'vue';
-export declare const BubbleMenu: import("vue").DefineComponent<{
-    pluginKey: {
-        type: PropType<string | import("prosemirror-state").PluginKey<any>>;
-        default: string;
-    };
-    editor: {
-        type: PropType<import("@tiptap/core").Editor>;
-        required: true;
-    };
-    updateDelay: {
-        type: PropType<number | undefined>;
-        default: undefined;
-    };
-    tippyOptions: {
-        type: PropType<Partial<import("tippy.js").Props> | undefined>;
-        default: () => {};
-    };
-    shouldShow: {
-        type: PropType<(props: {
-            editor: import("@tiptap/core").Editor;
-            view: import("prosemirror-view").EditorView;
-            state: import("prosemirror-state").EditorState;
-            oldState?: import("prosemirror-state").EditorState | undefined;
-            from: number;
-            to: number;
-        }) => boolean>;
-        default: null;
-    };
-}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-    [key: string]: any;
-}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    pluginKey: {
-        type: PropType<string | import("prosemirror-state").PluginKey<any>>;
-        default: string;
-    };
-    editor: {
-        type: PropType<import("@tiptap/core").Editor>;
-        required: true;
-    };
-    updateDelay: {
-        type: PropType<number | undefined>;
-        default: undefined;
-    };
-    tippyOptions: {
-        type: PropType<Partial<import("tippy.js").Props> | undefined>;
-        default: () => {};
-    };
-    shouldShow: {
-        type: PropType<(props: {
-            editor: import("@tiptap/core").Editor;
-            view: import("prosemirror-view").EditorView;
-            state: import("prosemirror-state").EditorState;
-            oldState?: import("prosemirror-state").EditorState | undefined;
-            from: number;
-            to: number;
-        }) => boolean>;
-        default: null;
-    };
-}>>, {
-    pluginKey: string | import("prosemirror-state").PluginKey<any>;
-    updateDelay: number | undefined;
-    tippyOptions: Partial<import("tippy.js").Props> | undefined;
-    shouldShow: (props: {
-        editor: import("@tiptap/core").Editor;
-        view: import("prosemirror-view").EditorView;
-        state: import("prosemirror-state").EditorState;
-        oldState?: import("prosemirror-state").EditorState | undefined;
-        from: number;
-        to: number;
-    }) => boolean;
-}>;
+import { PropType } from 'vue';
+export declare const BubbleMenu: import("vue").DefineComponent<{
+    pluginKey: {
+        type: PropType<string | import("prosemirror-state").PluginKey<any>>;
+        default: string;
+    };
+    editor: {
+        type: PropType<import("@tiptap/core").Editor>;
+        required: true;
+    };
+    updateDelay: {
+        type: PropType<number | undefined>;
+        default: undefined;
+    };
+    tippyOptions: {
+        type: PropType<Partial<import("tippy.js").Props> | undefined>;
+        default: () => {};
+    };
+    shouldShow: {
+        type: PropType<(props: {
+            editor: import("@tiptap/core").Editor;
+            view: import("prosemirror-view").EditorView;
+            state: import("prosemirror-state").EditorState;
+            oldState?: import("prosemirror-state").EditorState | undefined;
+            from: number;
+            to: number;
+        }) => boolean>;
+        default: null;
+    };
+}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    pluginKey: {
+        type: PropType<string | import("prosemirror-state").PluginKey<any>>;
+        default: string;
+    };
+    editor: {
+        type: PropType<import("@tiptap/core").Editor>;
+        required: true;
+    };
+    updateDelay: {
+        type: PropType<number | undefined>;
+        default: undefined;
+    };
+    tippyOptions: {
+        type: PropType<Partial<import("tippy.js").Props> | undefined>;
+        default: () => {};
+    };
+    shouldShow: {
+        type: PropType<(props: {
+            editor: import("@tiptap/core").Editor;
+            view: import("prosemirror-view").EditorView;
+            state: import("prosemirror-state").EditorState;
+            oldState?: import("prosemirror-state").EditorState | undefined;
+            from: number;
+            to: number;
+        }) => boolean>;
+        default: null;
+    };
+}>>, {
+    pluginKey: string | import("prosemirror-state").PluginKey<any>;
+    updateDelay: number | undefined;
+    tippyOptions: Partial<import("tippy.js").Props> | undefined;
+    shouldShow: (props: {
+        editor: import("@tiptap/core").Editor;
+        view: import("prosemirror-view").EditorView;
+        state: import("prosemirror-state").EditorState;
+        oldState?: import("prosemirror-state").EditorState | undefined;
+        from: number;
+        to: number;
+    }) => boolean;
+}>;

package/dist/packages/vue-3/src/Editor.d.ts

@@ -1,24 +1,23 @@
-import { Editor as CoreEditor, EditorOptions } from '@tiptap/core';
-import { EditorState, Plugin, PluginKey } from '@tiptap/pm/state';
-import { ComponentInternalInstance, ComponentPublicInstance } from 'vue';
-import { VueRenderer } from './VueRenderer.js';
-export declare type ContentComponent = ComponentInternalInstance & {
-    ctx: ComponentPublicInstance;
-};
-export declare class Editor extends CoreEditor {
-    private reactiveState;
-    private reactiveExtensionStorage;
-    vueRenderers: Map<string, VueRenderer>;
-    contentComponent: ContentComponent | null;
-    constructor(options?: Partial<EditorOptions>);
-    get state(): EditorState;
-    get storage(): Record<string, any>;
-    /**
-     * Register a ProseMirror plugin.
-     */
-    registerPlugin(plugin: Plugin, handlePlugins?: (newPlugin: Plugin, plugins: Plugin[]) => Plugin[]): void;
-    /**
-     * Unregister a ProseMirror plugin.
-     */
-    unregisterPlugin(nameOrPluginKey: string | PluginKey): void;
-}
+import { Editor as CoreEditor, EditorOptions } from '@tiptap/core';
+import { EditorState, Plugin, PluginKey } from '@tiptap/pm/state';
+import { AppContext, ComponentInternalInstance, ComponentPublicInstance } from 'vue';
+export type ContentComponent = ComponentInternalInstance & {
+    ctx: ComponentPublicInstance;
+};
+export declare class Editor extends CoreEditor {
+    private reactiveState;
+    private reactiveExtensionStorage;
+    contentComponent: ContentComponent | null;
+    appContext: AppContext | null;
+    constructor(options?: Partial<EditorOptions>);
+    get state(): EditorState;
+    get storage(): Record<string, any>;
+    /**
+     * Register a ProseMirror plugin.
+     */
+    registerPlugin(plugin: Plugin, handlePlugins?: (newPlugin: Plugin, plugins: Plugin[]) => Plugin[]): void;
+    /**
+     * Unregister a ProseMirror plugin.
+     */
+    unregisterPlugin(nameOrPluginKey: string | PluginKey): void;
+}

package/dist/packages/vue-3/src/EditorContent.d.ts

@@ -1,17 +1,17 @@
-import { DefineComponent, PropType, Ref } from 'vue';
-import { Editor } from './Editor.js';
-export declare const EditorContent: DefineComponent<{
-    editor: {
-        default: null;
-        type: PropType<Editor>;
-    };
-}, {
-    rootEl: Ref<Element | undefined>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    editor: {
-        default: null;
-        type: PropType<Editor>;
-    };
-}>>, {
-    editor: Editor;
-}>;
+import { PropType, Ref } from 'vue';
+import { Editor } from './Editor.js';
+export declare const EditorContent: import("vue").DefineComponent<{
+    editor: {
+        default: null;
+        type: PropType<Editor>;
+    };
+}, {
+    rootEl: Ref<Element | undefined>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    editor: {
+        default: null;
+        type: PropType<Editor>;
+    };
+}>>, {
+    editor: Editor;
+}>;

package/dist/packages/vue-3/src/FloatingMenu.d.ts

@@ -1,57 +1,57 @@
-import { PropType } from 'vue';
-export declare const FloatingMenu: import("vue").DefineComponent<{
-    pluginKey: {
-        type: null;
-        default: string;
-    };
-    editor: {
-        type: PropType<import("@tiptap/core").Editor>;
-        required: true;
-    };
-    tippyOptions: {
-        type: PropType<Partial<import("tippy.js").Props> | undefined>;
-        default: () => {};
-    };
-    shouldShow: {
-        type: PropType<(props: {
-            editor: import("@tiptap/core").Editor;
-            view: import("prosemirror-view").EditorView;
-            state: import("prosemirror-state").EditorState;
-            oldState?: import("prosemirror-state").EditorState | undefined;
-        }) => boolean>;
-        default: null;
-    };
-}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-    [key: string]: any;
-}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    pluginKey: {
-        type: null;
-        default: string;
-    };
-    editor: {
-        type: PropType<import("@tiptap/core").Editor>;
-        required: true;
-    };
-    tippyOptions: {
-        type: PropType<Partial<import("tippy.js").Props> | undefined>;
-        default: () => {};
-    };
-    shouldShow: {
-        type: PropType<(props: {
-            editor: import("@tiptap/core").Editor;
-            view: import("prosemirror-view").EditorView;
-            state: import("prosemirror-state").EditorState;
-            oldState?: import("prosemirror-state").EditorState | undefined;
-        }) => boolean>;
-        default: null;
-    };
-}>>, {
-    tippyOptions: Partial<import("tippy.js").Props> | undefined;
-    shouldShow: (props: {
-        editor: import("@tiptap/core").Editor;
-        view: import("prosemirror-view").EditorView;
-        state: import("prosemirror-state").EditorState;
-        oldState?: import("prosemirror-state").EditorState | undefined;
-    }) => boolean;
-    pluginKey: any;
-}>;
+import { PropType } from 'vue';
+export declare const FloatingMenu: import("vue").DefineComponent<{
+    pluginKey: {
+        type: null;
+        default: string;
+    };
+    editor: {
+        type: PropType<import("@tiptap/core").Editor>;
+        required: true;
+    };
+    tippyOptions: {
+        type: PropType<Partial<import("tippy.js").Props> | undefined>;
+        default: () => {};
+    };
+    shouldShow: {
+        type: PropType<(props: {
+            editor: import("@tiptap/core").Editor;
+            view: import("prosemirror-view").EditorView;
+            state: import("prosemirror-state").EditorState;
+            oldState?: import("prosemirror-state").EditorState | undefined;
+        }) => boolean>;
+        default: null;
+    };
+}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    pluginKey: {
+        type: null;
+        default: string;
+    };
+    editor: {
+        type: PropType<import("@tiptap/core").Editor>;
+        required: true;
+    };
+    tippyOptions: {
+        type: PropType<Partial<import("tippy.js").Props> | undefined>;
+        default: () => {};
+    };
+    shouldShow: {
+        type: PropType<(props: {
+            editor: import("@tiptap/core").Editor;
+            view: import("prosemirror-view").EditorView;
+            state: import("prosemirror-state").EditorState;
+            oldState?: import("prosemirror-state").EditorState | undefined;
+        }) => boolean>;
+        default: null;
+    };
+}>>, {
+    tippyOptions: Partial<import("tippy.js").Props> | undefined;
+    shouldShow: (props: {
+        editor: import("@tiptap/core").Editor;
+        view: import("prosemirror-view").EditorView;
+        state: import("prosemirror-state").EditorState;
+        oldState?: import("prosemirror-state").EditorState | undefined;
+    }) => boolean;
+    pluginKey: any;
+}>;

package/dist/packages/vue-3/src/NodeViewContent.d.ts

@@ -1,13 +1,13 @@
-export declare const NodeViewContent: import("vue").DefineComponent<{
-    as: {
-        type: StringConstructor;
-        default: string;
-    };
-}, unknown, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    as: {
-        type: StringConstructor;
-        default: string;
-    };
-}>>, {
-    as: string;
-}>;
+export declare const NodeViewContent: import("vue").DefineComponent<{
+    as: {
+        type: StringConstructor;
+        default: string;
+    };
+}, unknown, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    as: {
+        type: StringConstructor;
+        default: string;
+    };
+}>>, {
+    as: string;
+}>;

package/dist/packages/vue-3/src/NodeViewWrapper.d.ts

@@ -1,13 +1,13 @@
-export declare const NodeViewWrapper: import("vue").DefineComponent<{
-    as: {
-        type: StringConstructor;
-        default: string;
-    };
-}, unknown, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    as: {
-        type: StringConstructor;
-        default: string;
-    };
-}>>, {
-    as: string;
-}>;
+export declare const NodeViewWrapper: import("vue").DefineComponent<{
+    as: {
+        type: StringConstructor;
+        default: string;
+    };
+}, unknown, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    as: {
+        type: StringConstructor;
+        default: string;
+    };
+}>>, {
+    as: string;
+}>;

package/dist/packages/vue-3/src/VueNodeViewRenderer.d.ts

@@ -1,48 +1,48 @@
-import { DecorationWithType, NodeViewRenderer, NodeViewRendererOptions } from '@tiptap/core';
-import { Node as ProseMirrorNode } from '@tiptap/pm/model';
-import { Decoration } from '@tiptap/pm/view';
-import { Component, PropType } from 'vue';
-export declare const nodeViewProps: {
-    editor: {
-        type: PropType<import("@tiptap/core").Editor>;
-        required: true;
-    };
-    node: {
-        type: PropType<ProseMirrorNode>;
-        required: true;
-    };
-    decorations: {
-        type: PropType<DecorationWithType[]>;
-        required: true;
-    };
-    selected: {
-        type: PropType<boolean>;
-        required: true;
-    };
-    extension: {
-        type: PropType<import("@tiptap/core").Node<any, any>>;
-        required: true;
-    };
-    getPos: {
-        type: PropType<() => number>;
-        required: true;
-    };
-    updateAttributes: {
-        type: PropType<(attributes: Record<string, any>) => void>;
-        required: true;
-    };
-    deleteNode: {
-        type: PropType<() => void>;
-        required: true;
-    };
-};
-export interface VueNodeViewRendererOptions extends NodeViewRendererOptions {
-    update: ((props: {
-        oldNode: ProseMirrorNode;
-        oldDecorations: Decoration[];
-        newNode: ProseMirrorNode;
-        newDecorations: Decoration[];
-        updateProps: () => void;
-    }) => boolean) | null;
-}
-export declare function VueNodeViewRenderer(component: Component, options?: Partial<VueNodeViewRendererOptions>): NodeViewRenderer;
+import { DecorationWithType, NodeViewRenderer, NodeViewRendererOptions } from '@tiptap/core';
+import { Node as ProseMirrorNode } from '@tiptap/pm/model';
+import { Decoration } from '@tiptap/pm/view';
+import { Component, PropType } from 'vue';
+export declare const nodeViewProps: {
+    editor: {
+        type: PropType<import("@tiptap/core").Editor>;
+        required: true;
+    };
+    node: {
+        type: PropType<ProseMirrorNode>;
+        required: true;
+    };
+    decorations: {
+        type: PropType<DecorationWithType[]>;
+        required: true;
+    };
+    selected: {
+        type: PropType<boolean>;
+        required: true;
+    };
+    extension: {
+        type: PropType<import("@tiptap/core").Node<any, any>>;
+        required: true;
+    };
+    getPos: {
+        type: PropType<() => number>;
+        required: true;
+    };
+    updateAttributes: {
+        type: PropType<(attributes: Record<string, any>) => void>;
+        required: true;
+    };
+    deleteNode: {
+        type: PropType<() => void>;
+        required: true;
+    };
+};
+export interface VueNodeViewRendererOptions extends NodeViewRendererOptions {
+    update: ((props: {
+        oldNode: ProseMirrorNode;
+        oldDecorations: Decoration[];
+        newNode: ProseMirrorNode;
+        newDecorations: Decoration[];
+        updateProps: () => void;
+    }) => boolean) | null;
+}
+export declare function VueNodeViewRenderer(component: Component, options?: Partial<VueNodeViewRendererOptions>): NodeViewRenderer;

package/dist/packages/vue-3/src/VueRenderer.d.ts

@@ -1,22 +1,36 @@
-import { Editor } from '@tiptap/core';
-import { Component } from 'vue';
-import { Editor as ExtendedEditor } from './Editor.js';
-export interface VueRendererOptions {
-    editor: Editor;
-    props?: Record<string, any>;
-}
-/**
- * This class is used to render Vue components inside the editor.
- */
-export declare class VueRenderer {
-    id: string;
-    editor: ExtendedEditor;
-    component: Component;
-    teleportElement: Element;
-    element: Element;
-    props: Record<string, any>;
-    constructor(component: Component, { props, editor }: VueRendererOptions);
-    get ref(): any;
-    updateProps(props?: Record<string, any>): void;
-    destroy(): void;
-}
+import { Editor } from '@tiptap/core';
+import { Component, h } from 'vue';
+import { Editor as ExtendedEditor } from './Editor.js';
+export interface VueRendererOptions {
+    editor: Editor;
+    props?: Record<string, any>;
+}
+type ExtendedVNode = ReturnType<typeof h> | null;
+interface RenderedComponent {
+    vNode: ExtendedVNode;
+    destroy: () => void;
+    el: Element | null;
+}
+/**
+ * This class is used to render Vue components inside the editor.
+ */
+export declare class VueRenderer {
+    id: string;
+    renderedComponent: RenderedComponent;
+    editor: ExtendedEditor;
+    component: Component;
+    el: Element | null;
+    props: Record<string, any>;
+    constructor(component: Component, { props, editor }: VueRendererOptions);
+    get element(): Element | null;
+    renderComponent(): {
+        vNode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+            [key: string]: any;
+        }>;
+        destroy: () => void;
+        el: Element | null;
+    };
+    updateProps(props?: Record<string, any>): void;
+    destroy(): void;
+}
+export {};

package/dist/packages/vue-3/src/index.d.ts

@@ -1,10 +1,10 @@
-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 './useEditor.js';
-export * from './VueNodeViewRenderer.js';
-export * from './VueRenderer.js';
-export * from '@tiptap/core';
+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 './useEditor.js';
+export * from './VueNodeViewRenderer.js';
+export * from './VueRenderer.js';
+export * from '@tiptap/core';

package/dist/packages/vue-3/src/useEditor.d.ts

@@ -1,3 +1,3 @@
-import { EditorOptions } from '@tiptap/core';
-import { Editor } from './Editor.js';
-export declare const useEditor: (options?: Partial<EditorOptions>) => import("vue").ShallowRef<Editor | undefined>;
+import { EditorOptions } from '@tiptap/core';
+import { Editor } from './Editor.js';
+export declare const useEditor: (options?: Partial<EditorOptions>) => import("vue").ShallowRef<Editor | undefined>;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tiptap/vue-3",
   "description": "Vue components for tiptap",
-  "version": "2.5.0-beta.1",
+  "version": "2.5.0-beta.3",
   "homepage": "https://tiptap.dev",
   "keywords": [
     "tiptap",
@@ -29,12 +29,12 @@
     "dist"
   ],
   "dependencies": {
-    "@tiptap/extension-bubble-menu": "^2.5.0-beta.1",
-    "@tiptap/extension-floating-menu": "^2.5.0-beta.1"
+    "@tiptap/extension-bubble-menu": "^2.5.0-beta.3",
+    "@tiptap/extension-floating-menu": "^2.5.0-beta.3"
   },
   "devDependencies": {
-    "@tiptap/core": "^2.5.0-beta.1",
-    "@tiptap/pm": "^2.5.0-beta.1",
+    "@tiptap/core": "^2.5.0-beta.3",
+    "@tiptap/pm": "^2.5.0-beta.3",
     "vue": "^3.0.0"
   },
   "peerDependencies": {

package/src/Editor.ts

@@ -1,16 +1,14 @@
 import { Editor as CoreEditor, EditorOptions } from '@tiptap/core'
 import { EditorState, Plugin, PluginKey } from '@tiptap/pm/state'
 import {
+  AppContext,
   ComponentInternalInstance,
   ComponentPublicInstance,
   customRef,
   markRaw,
-  reactive,
   Ref,
 } from 'vue'
 
-import { VueRenderer } from './VueRenderer.js'
-
 function useDebouncedRef<T>(value: T) {
   return customRef<T>((track, trigger) => {
     return {
@@ -42,10 +40,10 @@ export class Editor extends CoreEditor {
 
   private reactiveExtensionStorage: Ref<Record<string, any>>
 
-  public vueRenderers = reactive<Map<string, VueRenderer>>(new Map())
-
   public contentComponent: ContentComponent | null = null
 
+  public appContext: AppContext | null = null
+
   constructor(options: Partial<EditorOptions> = {}) {
     super(options)