@milkdown/vue 6.1.5 → 6.2.0

package/lib/Editor.d.ts

@@ -1,28 +1,13 @@
-import { Ctx, Editor } from '@milkdown/core';
-import { ViewFactory } from '@milkdown/prose';
-import { ComponentInternalInstance, DefineComponent, Ref } from 'vue';
-import { AnyVueComponent } from './utils';
-import { RenderOptions } from './VueNodeView';
-export declare type RenderVue = (Component: AnyVueComponent, options?: RenderOptions) => (ctx: Ctx) => ViewFactory;
-export declare type GetEditor = (container: HTMLDivElement, renderVue: RenderVue) => Editor;
-export declare const EditorComponent: DefineComponent<{
-    editor: GetEditor;
-    editorRef?: Ref<EditorRef> | undefined;
-}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    editor: GetEditor;
-    editorRef?: Ref<EditorRef> | undefined;
-}>, {}>;
-export declare type EditorRef = {
-    get: () => Editor | undefined;
-    dom: () => HTMLDivElement | null;
-};
+import { ComponentInternalInstance, DefineComponent, InjectionKey } from 'vue';
+import { EditorRef } from './EditorComponent';
+import { EditorInfo, EditorInfoCtx } from './types';
 export declare const getRootInstance: () => ComponentInternalInstance | null;
+export declare const editorInfoCtxKey: InjectionKey<EditorInfoCtx>;
 export declare const VueEditor: DefineComponent<{
-    editor: GetEditor;
-    editorRef?: Ref<EditorRef> | undefined;
+    editor: EditorInfo;
+    editorRef?: EditorRef | undefined;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    editor: GetEditor;
-    editorRef?: Ref<EditorRef> | undefined;
+    editor: EditorInfo;
+    editorRef?: EditorRef | undefined;
 }>, {}>;
-export declare const useEditor: (getEditor: GetEditor) => (container: HTMLDivElement, renderVue: RenderVue) => Editor;
 //# sourceMappingURL=Editor.d.ts.map

package/lib/Editor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Editor.d.ts","sourceRoot":"","sources":["../src/Editor.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,GAAG,EAAE,MAAM,EAA0B,MAAM,gBAAgB,CAAC;AACrE,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,EACH,yBAAyB,EACzB,eAAe,EAWf,GAAG,EAGN,MAAM,KAAK,CAAC;AAEb,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAC1C,OAAO,EAAiB,aAAa,EAAE,MAAM,eAAe,CAAC;AAK7D,oBAAY,SAAS,GAAG,CAAC,SAAS,EAAE,eAAe,EAAE,OAAO,CAAC,EAAE,aAAa,KAAK,CAAC,GAAG,EAAE,GAAG,KAAK,WAAW,CAAC;AAC3G,oBAAY,SAAS,GAAG,CAAC,SAAS,EAAE,cAAc,EAAE,SAAS,EAAE,SAAS,KAAK,MAAM,CAAC;AAiCpF,eAAO,MAAM,eAAe;YAA6B,SAAS;;;YAAT,SAAS;;OAahE,CAAC;AAGH,oBAAY,SAAS,GAAG;IAAE,GAAG,EAAE,MAAM,MAAM,GAAG,SAAS,CAAC;IAAC,GAAG,EAAE,MAAM,cAAc,GAAG,IAAI,CAAA;CAAE,CAAC;AAO5F,eAAO,MAAM,eAAe,wCAE3B,CAAC;AAGF,eAAO,MAAM,SAAS;YAA6B,SAAS;;;YAAT,SAAS;;OAmC1D,CAAC;AAGH,eAAO,MAAM,SAAS,cAAe,SAAS,gEAE7C,CAAC"}
+{"version":3,"file":"Editor.d.ts","sourceRoot":"","sources":["../src/Editor.tsx"],"names":[],"mappings":"AACA,OAAO,EACH,yBAAyB,EACzB,eAAe,EAKf,YAAY,EAMf,MAAM,KAAK,CAAC;AAEb,OAAO,EAAmB,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAC/D,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AASpD,eAAO,MAAM,eAAe,wCAE3B,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,YAAY,CAAC,aAAa,CAAY,CAAC;AA4BtE,eAAO,MAAM,SAAS;YAA6B,UAAU;;;YAAV,UAAU;;OA0D3D,CAAC"}

package/lib/EditorComponent.d.ts

@@ -0,0 +1,14 @@
+import { Editor } from '@milkdown/core';
+import { GetEditor } from './types';
+export declare const EditorComponent: import("vue").DefineComponent<{
+    editor: GetEditor;
+    editorRef?: EditorRef | undefined;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+    editor: GetEditor;
+    editorRef?: EditorRef | undefined;
+}>, {}>;
+export declare type EditorRef = {
+    get: () => Editor | undefined;
+    dom: () => HTMLDivElement | null;
+};
+//# sourceMappingURL=EditorComponent.d.ts.map

package/lib/EditorComponent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditorComponent.d.ts","sourceRoot":"","sources":["../src/EditorComponent.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAIxC,OAAO,EAAiB,SAAS,EAAE,MAAM,SAAS,CAAC;AAGnD,eAAO,MAAM,eAAe;YAA6B,SAAS;;;YAAT,SAAS;;OAahE,CAAC;AAGH,oBAAY,SAAS,GAAG;IAAE,GAAG,EAAE,MAAM,MAAM,GAAG,SAAS,CAAC;IAAC,GAAG,EAAE,MAAM,cAAc,GAAG,IAAI,CAAA;CAAE,CAAC"}

package/lib/VueNode.d.ts

@@ -2,17 +2,19 @@ import { Ctx } from '@milkdown/core';
 import { Mark, Node } from '@milkdown/prose/model';
 import { Decoration, EditorView } from '@milkdown/prose/view';
 import { InjectionKey } from 'vue';
-export declare type NodeContext = {
+export declare type NodeContext<T extends Node | Mark = Node | Mark> = {
     ctx: Ctx;
-    node: Node | Mark;
+    node: T;
     view: EditorView;
-    getPos: boolean | (() => number);
-    decorations: Decoration[];
+    getPos: T extends Mark ? boolean : T extends Node ? () => number : boolean | (() => number);
+    decorations: readonly Decoration[];
 };
 export declare const nodeMetadata: InjectionKey<NodeContext>;
-export declare const VueNodeContainer: import("vue").DefineComponent<NodeContext & {
+export declare type UseNodeCtx = <T extends Node | Mark = Node | Mark>() => NodeContext<T>;
+export declare const useNodeCtx: UseNodeCtx;
+export declare const VueNodeContainer: import("vue").DefineComponent<NodeContext<Mark | Node> & {
     as: string;
-}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<NodeContext & {
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<NodeContext<Mark | Node> & {
     as: string;
 }>, {}>;
 export declare const Content: import("vue").DefineComponent<{

package/lib/VueNode.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VueNode.d.ts","sourceRoot":"","sources":["../src/VueNode.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,GAAG,EAAE,MAAM,gBAAgB,CAAC;AACrC,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAsB,YAAY,EAAW,MAAM,KAAK,CAAC;AAEhE,oBAAY,WAAW,GAAG;IACtB,GAAG,EAAE,GAAG,CAAC;IACT,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC;IAClB,IAAI,EAAE,UAAU,CAAC;IACjB,MAAM,EAAE,OAAO,GAAG,CAAC,MAAM,MAAM,CAAC,CAAC;IACjC,WAAW,EAAE,UAAU,EAAE,CAAC;CAC7B,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,YAAY,CAAC,WAAW,CAAY,CAAC;AAEhE,eAAO,MAAM,gBAAgB;QAAuC,MAAM;;QAAN,MAAM;OAYxE,CAAC;AAGH,eAAO,MAAM,OAAO;;;;OAKlB,CAAC"}
+{"version":3,"file":"VueNode.d.ts","sourceRoot":"","sources":["../src/VueNode.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,GAAG,EAAE,MAAM,gBAAgB,CAAC;AACrC,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAA8B,YAAY,EAAW,MAAM,KAAK,CAAC;AAExE,oBAAY,WAAW,CAAC,CAAC,SAAS,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,IAAI;IAC3D,GAAG,EAAE,GAAG,CAAC;IACT,IAAI,EAAE,CAAC,CAAC;IACR,IAAI,EAAE,UAAU,CAAC;IACjB,MAAM,EAAE,CAAC,SAAS,IAAI,GAAG,OAAO,GAAG,CAAC,SAAS,IAAI,GAAG,MAAM,MAAM,GAAG,OAAO,GAAG,CAAC,MAAM,MAAM,CAAC,CAAC;IAC5F,WAAW,EAAE,SAAS,UAAU,EAAE,CAAC;CACtC,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,YAAY,CAAC,WAAW,CAAY,CAAC;AAEhE,oBAAY,UAAU,GAAG,CAAC,CAAC,SAAS,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,OAAO,WAAW,CAAC,CAAC,CAAC,CAAC;AACnF,eAAO,MAAM,UAAU,EAAE,UAA6D,CAAC;AAEvF,eAAO,MAAM,gBAAgB;QAAuC,MAAM;;QAAN,MAAM;OAYxE,CAAC;AAGH,eAAO,MAAM,OAAO;;;;OAKlB,CAAC"}

package/lib/VueNodeView.d.ts

@@ -1,12 +1,12 @@
 import { Ctx } from '@milkdown/core';
-import type { ViewFactory } from '@milkdown/prose';
 import { Mark, Node } from '@milkdown/prose/model';
-import type { Decoration, DecorationSet, EditorView, NodeView } from '@milkdown/prose/view';
+import type { Decoration, DecorationSource, EditorView, MarkViewConstructor, NodeView, NodeViewConstructor } from '@milkdown/prose/view';
 import { DefineComponent } from 'vue';
 export declare type RenderOptions = Partial<{
     as: string;
-} & Pick<NodeView, 'ignoreMutation' | 'deselectNode' | 'selectNode' | 'destroy' | 'update'>>;
-export declare const createVueView: (addPortal: (portal: DefineComponent, key: string) => void, removePortalByKey: (key: string) => void) => (component: DefineComponent, options?: RenderOptions) => (ctx: Ctx) => ViewFactory;
+    update?: (node: Node, decorations: readonly Decoration[], innerDecorations: DecorationSource) => boolean;
+} & Pick<NodeView, 'ignoreMutation' | 'deselectNode' | 'selectNode' | 'destroy'>>;
+export declare const createVueView: (addPortal: (portal: DefineComponent, key: string) => void, removePortalByKey: (key: string) => void) => (component: DefineComponent, options?: RenderOptions) => (ctx: Ctx) => NodeViewConstructor | MarkViewConstructor;
 export declare class VueNodeView implements NodeView {
     private ctx;
     private component;
@@ -20,17 +20,14 @@ export declare class VueNodeView implements NodeView {
     teleportDOM: HTMLElement;
     key: string;
     get isInlineOrMark(): boolean;
-    constructor(ctx: Ctx, component: DefineComponent, addPortal: (portal: DefineComponent, key: string) => void, removePortalByKey: (key: string) => void, options: RenderOptions, node: Node | Mark, view: EditorView, getPos: boolean | (() => number), decorations: Decoration[]);
-    get dom(): Element;
-    get contentDOM(): Element | null;
+    constructor(ctx: Ctx, component: DefineComponent, addPortal: (portal: DefineComponent, key: string) => void, removePortalByKey: (key: string) => void, options: RenderOptions, node: Node | Mark, view: EditorView, getPos: boolean | (() => number), decorations: readonly Decoration[]);
+    get dom(): HTMLElement;
+    get contentDOM(): HTMLElement | undefined;
     renderPortal(): void;
     destroy(): void;
-    ignoreMutation(mutation: MutationRecord | {
-        type: 'selection';
-        target: Element;
-    }): boolean;
-    update(node: Node, decorations: Decoration[], innerDecorations: DecorationSet): boolean;
-    selectNode: (() => void) | null | undefined;
-    deselectNode: (() => void) | null | undefined;
+    ignoreMutation(mutation: MutationRecord): boolean;
+    update(node: Node, decorations: readonly Decoration[], innerDecorations: DecorationSource): boolean;
+    selectNode: (() => void) | undefined;
+    deselectNode: (() => void) | undefined;
 }
 //# sourceMappingURL=VueNodeView.d.ts.map

package/lib/VueNodeView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VueNodeView.d.ts","sourceRoot":"","sources":["../src/VueNodeView.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,GAAG,EAAE,MAAM,gBAAgB,CAAC;AACrC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACnD,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,KAAK,EAAE,UAAU,EAAE,aAAa,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAE5F,OAAO,EAAE,eAAe,EAAyC,MAAM,KAAK,CAAC;AAO7E,oBAAY,aAAa,GAAG,OAAO,CAC/B;IACI,EAAE,EAAE,MAAM,CAAC;CACd,GAAG,IAAI,CAAC,QAAQ,EAAE,gBAAgB,GAAG,cAAc,GAAG,YAAY,GAAG,SAAS,GAAG,QAAQ,CAAC,CAC9F,CAAC;AAEF,eAAO,MAAM,aAAa,uBACD,eAAe,OAAO,MAAM,KAAK,IAAI,2BAA2B,MAAM,KAAK,IAAI,iBACxF,eAAe,YAAW,aAAa,WAAe,GAAG,KAAK,WAGiC,CAAC;AAEhH,qBAAa,WAAY,YAAW,QAAQ;IASpC,OAAO,CAAC,GAAG;IACX,OAAO,CAAC,SAAS;IACjB,OAAO,CAAC,SAAS;IACjB,OAAO,CAAC,iBAAiB;IACzB,OAAO,CAAC,OAAO;IACf,OAAO,CAAC,IAAI;IACZ,OAAO,CAAC,IAAI;IACZ,OAAO,CAAC,MAAM;IACd,OAAO,CAAC,WAAW;IAhBvB,WAAW,EAAE,WAAW,CAAC;IACzB,GAAG,EAAE,MAAM,CAAC;IAEZ,IAAI,cAAc,YAEjB;gBAGW,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,eAAe,EAC1B,SAAS,EAAE,CAAC,MAAM,EAAE,eAAe,EAAE,GAAG,EAAE,MAAM,KAAK,IAAI,EACzD,iBAAiB,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,EACxC,OAAO,EAAE,aAAa,EACtB,IAAI,EAAE,IAAI,GAAG,IAAI,EACjB,IAAI,EAAE,UAAU,EAChB,MAAM,EAAE,OAAO,GAAG,CAAC,MAAM,MAAM,CAAC,EAChC,WAAW,EAAE,UAAU,EAAE;IAQrC,IAAI,GAAG,YAEN;IAED,IAAI,UAAU,mBAMb;IAED,YAAY;IAiCZ,OAAO;IAKP,cAAc,CAAC,QAAQ,EAAE,cAAc,GAAG;QAAE,IAAI,EAAE,WAAW,CAAC;QAAC,MAAM,EAAE,OAAO,CAAA;KAAE;IA6BhF,MAAM,CAAC,IAAI,EAAE,IAAI,EAAE,WAAW,EAAE,UAAU,EAAE,EAAE,gBAAgB,EAAE,aAAa;IAoB7E,UAAU,kCAA4B;IAEtC,YAAY,kCAA8B;CAC7C"}
+{"version":3,"file":"VueNodeView.d.ts","sourceRoot":"","sources":["../src/VueNodeView.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,GAAG,EAAE,MAAM,gBAAgB,CAAC;AACrC,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,KAAK,EACR,UAAU,EACV,gBAAgB,EAChB,UAAU,EACV,mBAAmB,EACnB,QAAQ,EACR,mBAAmB,EACtB,MAAM,sBAAsB,CAAC;AAE9B,OAAO,EAAE,eAAe,EAAyC,MAAM,KAAK,CAAC;AAO7E,oBAAY,aAAa,GAAG,OAAO,CAC/B;IACI,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,WAAW,EAAE,SAAS,UAAU,EAAE,EAAE,gBAAgB,EAAE,gBAAgB,KAAK,OAAO,CAAC;CAC5G,GAAG,IAAI,CAAC,QAAQ,EAAE,gBAAgB,GAAG,cAAc,GAAG,YAAY,GAAG,SAAS,CAAC,CACnF,CAAC;AAEF,eAAO,MAAM,aAAa,uBACD,eAAe,OAAO,MAAM,KAAK,IAAI,2BAA2B,MAAM,KAAK,IAAI,iBAErF,eAAe,YACjB,aAAa,WAChB,GAAG,KAAK,mBAAmB,GAAG,mBAGmE,CAAC;AAEhH,qBAAa,WAAY,YAAW,QAAQ;IASpC,OAAO,CAAC,GAAG;IACX,OAAO,CAAC,SAAS;IACjB,OAAO,CAAC,SAAS;IACjB,OAAO,CAAC,iBAAiB;IACzB,OAAO,CAAC,OAAO;IACf,OAAO,CAAC,IAAI;IACZ,OAAO,CAAC,IAAI;IACZ,OAAO,CAAC,MAAM;IACd,OAAO,CAAC,WAAW;IAhBvB,WAAW,EAAE,WAAW,CAAC;IACzB,GAAG,EAAE,MAAM,CAAC;IAEZ,IAAI,cAAc,YAEjB;gBAGW,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,eAAe,EAC1B,SAAS,EAAE,CAAC,MAAM,EAAE,eAAe,EAAE,GAAG,EAAE,MAAM,KAAK,IAAI,EACzD,iBAAiB,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,EACxC,OAAO,EAAE,aAAa,EACtB,IAAI,EAAE,IAAI,GAAG,IAAI,EACjB,IAAI,EAAE,UAAU,EAChB,MAAM,EAAE,OAAO,GAAG,CAAC,MAAM,MAAM,CAAC,EAChC,WAAW,EAAE,SAAS,UAAU,EAAE;IAQ9C,IAAI,GAAG,gBAEN;IAED,IAAI,UAAU,4BAMb;IAED,YAAY;IAiCZ,OAAO;IAMP,cAAc,CAAC,QAAQ,EAAE,cAAc;IA6BvC,MAAM,CAAC,IAAI,EAAE,IAAI,EAAE,WAAW,EAAE,SAAS,UAAU,EAAE,EAAE,gBAAgB,EAAE,gBAAgB;IAoBzF,UAAU,2BAA4B;IAEtC,YAAY,2BAA8B;CAC7C"}

package/lib/index.d.ts

@@ -1,3 +1,5 @@
 export * from './Editor';
-export { nodeMetadata } from './VueNode';
+export * from './types';
+export * from './useEditor';
+export * from './VueNode';
 //# sourceMappingURL=index.d.ts.map

package/lib/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,cAAc,UAAU,CAAC;AACzB,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC"}

package/lib/index.es.js

@@ -5,11 +5,65 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 var _a, _b;
-import { defineComponent, provide, h, createVNode, Teleport, markRaw, shallowReactive, getCurrentInstance, onBeforeMount, onUnmounted, isVNode, ref, inject, onMounted } from "vue";
+import { inject, ref, onMounted, onUnmounted, defineComponent, createVNode, provide, h, Teleport, markRaw, shallowReactive, getCurrentInstance, onBeforeMount, effect, isVNode } from "vue";
 import { editorViewCtx, rootCtx } from "@milkdown/core";
 import { Mark, Node } from "@milkdown/prose/model";
 import { customAlphabet } from "nanoid";
+const rendererKey = Symbol();
+const useGetEditor = (getEditor) => {
+  const renderVue = inject(rendererKey, () => {
+    throw new Error();
+  });
+  const { dom, loading, editor: editorRef } = inject(editorInfoCtxKey, {});
+  const lock = ref(false);
+  onMounted(() => {
+    if (!dom.value)
+      return;
+    const editor = getEditor(dom.value, renderVue);
+    if (!editor)
+      return;
+    if (lock.value)
+      return;
+    loading.value = true;
+    lock.value = true;
+    editor.create().then((editor2) => {
+      editorRef.value = editor2;
+      return;
+    }).finally(() => {
+      loading.value = false;
+      lock.value = false;
+    }).catch((e) => console.error(e));
+  });
+  onUnmounted(() => {
+    var _a2, _b2, _c;
+    const view = (_a2 = editorRef.value) == null ? void 0 : _a2.action((ctx) => ctx.get(editorViewCtx));
+    const root = (_b2 = editorRef.value) == null ? void 0 : _b2.action((ctx) => ctx.get(rootCtx));
+    (_c = root == null ? void 0 : root.firstChild) == null ? void 0 : _c.remove();
+    view == null ? void 0 : view.destroy();
+  });
+};
+const EditorComponent = defineComponent({
+  name: "milkdown-dom-root",
+  setup: (props, {
+    slots
+  }) => {
+    useGetEditor(props.editor);
+    const ctx = inject(editorInfoCtxKey, {});
+    if (props.editorRef) {
+      props.editorRef.get = () => ctx.editor.value;
+      props.editorRef.dom = () => ctx.dom.value;
+    }
+    return () => {
+      var _a2;
+      return createVNode("div", {
+        "ref": ctx.dom
+      }, [(_a2 = slots["default"]) == null ? void 0 : _a2.call(slots)]);
+    };
+  }
+});
+EditorComponent["props"] = ["editor", "editorRef"];
 const nodeMetadata = Symbol();
+const useNodeCtx = () => inject(nodeMetadata);
 const VueNodeContainer = defineComponent({
   name: "milkdown-node-container",
   setup: ({
@@ -77,7 +131,7 @@ class VueNodeView {
   }
   get contentDOM() {
     if (this.node instanceof Node && this.node.isLeaf) {
-      return null;
+      return void 0;
     }
     return this.teleportDOM.querySelector("[data-view-content]") || this.dom;
   }
@@ -119,6 +173,7 @@ class VueNodeView {
   destroy() {
     var _a2, _b2;
     (_b2 = (_a2 = this.options).destroy) == null ? void 0 : _b2.call(_a2);
+    this.teleportDOM.remove();
     this.removePortalByKey(this.key);
   }
   ignoreMutation(mutation) {
@@ -166,60 +221,36 @@ class VueNodeView {
 function _isSlot(s) {
   return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
 }
-const rendererKey = Symbol();
-const useGetEditor = (getEditor) => {
-  const divRef = ref(null);
-  const renderVue = inject(rendererKey, () => {
-    throw new Error();
-  });
-  const editorRef = markRaw({});
-  onMounted(() => {
-    if (!divRef.value)
-      return;
-    getEditor(divRef.value, renderVue).create().then((editor) => {
-      editorRef.editor = editor;
-      return;
-    }).catch((e) => console.error(e));
-  });
-  onUnmounted(() => {
-    var _a2, _b2, _c;
-    const view = (_a2 = editorRef.editor) == null ? void 0 : _a2.action((ctx) => ctx.get(editorViewCtx));
-    const root = (_b2 = editorRef.editor) == null ? void 0 : _b2.action((ctx) => ctx.get(rootCtx));
-    (_c = root == null ? void 0 : root.firstChild) == null ? void 0 : _c.remove();
-    view == null ? void 0 : view.destroy();
-  });
-  return {
-    divRef,
-    editorRef
-  };
-};
-const EditorComponent = defineComponent({
-  name: "milkdown-dom-root",
-  setup: (props, {
-    slots
-  }) => {
-    const refs = useGetEditor(props.editor);
-    if (props.editorRef) {
-      props.editorRef.value = {
-        get: () => refs.editorRef.editor,
-        dom: () => refs.divRef.value
-      };
-    }
-    return () => {
-      var _a2;
-      return createVNode("div", {
-        "ref": refs.divRef
-      }, [(_a2 = slots["default"]) == null ? void 0 : _a2.call(slots)]);
-    };
-  }
-});
-EditorComponent["props"] = ["editor", "editorRef"];
 const rootInstance = {
   instance: null
 };
 const getRootInstance = () => {
   return rootInstance.instance;
 };
+const editorInfoCtxKey = Symbol();
+const refDeprecatedInfo = `
+@milkdown/vue:
+Passing ref to VueEditor will soon be deprecated, please use:
+
+const { editor, getInstance, getDom, loading } = useEditor(/* creator */);
+
+effect(() => {
+    if (!loading) {
+        const editor = getInstance();
+        const rootDOM = getDom();
+    }
+})
+
+<VueEditor editor={editor} />
+`;
+const compositionDeprecatedInfo = `
+@milkdown/vue:
+Passing editor directly to VueEditor will soon be deprecated, please use:
+
+const { editor } = useEditor(/* creator */);
+
+<VueEditor editor={editor} />
+`;
 const VueEditor = defineComponent({
   name: "milkdown-vue-root",
   setup: (props) => {
@@ -240,13 +271,33 @@ const VueEditor = defineComponent({
     });
     const renderVue = createVueView(addPortal, removePortalByKey);
     provide(rendererKey, renderVue);
+    const usingDeprecatedCompositionAPI = Object.hasOwnProperty.call(props.editor, "getInstance");
+    const {
+      getEditorCallback,
+      dom,
+      editor,
+      loading
+    } = usingDeprecatedCompositionAPI ? props.editor.editor : props.editor;
+    effect(() => {
+      if (usingDeprecatedCompositionAPI) {
+        console.warn(compositionDeprecatedInfo);
+      }
+      if (props.editorRef) {
+        console.warn(refDeprecatedInfo);
+      }
+    });
+    provide(editorInfoCtxKey, {
+      dom,
+      editor,
+      loading
+    });
     return () => {
       const portalElements = portals.map(([id, P]) => createVNode(P, {
         "key": id
       }, null));
       return createVNode(EditorComponent, {
         "editorRef": props.editorRef,
-        "editor": props.editor
+        "editor": getEditorCallback.value
       }, _isSlot(portalElements) ? portalElements : {
         default: () => [portalElements]
       });
@@ -255,7 +306,21 @@ const VueEditor = defineComponent({
 });
 VueEditor["props"] = ["editor", "editorRef"];
 const useEditor = (getEditor) => {
-  return (...args) => getEditor(...args);
+  const dom = ref(null);
+  const editor = ref();
+  const loading = ref(true);
+  const getEditorCallback = ref((...args) => getEditor(...args));
+  return {
+    loading,
+    getInstance: () => editor.value,
+    getDom: () => dom.value,
+    editor: {
+      getEditorCallback,
+      dom,
+      editor,
+      loading
+    }
+  };
 };
-export { EditorComponent, VueEditor, getRootInstance, nodeMetadata, useEditor };
+export { Content, VueEditor, VueNodeContainer, editorInfoCtxKey, getRootInstance, nodeMetadata, useEditor, useNodeCtx };
 //# sourceMappingURL=index.es.js.map

package/lib/index.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es.js","sources":["../src/VueNode.tsx","../src/VueNodeView.tsx","../src/Editor.tsx"],"sourcesContent":["/* Copyright 2021, Milkdown by Mirone. */\nimport { Ctx } from '@milkdown/core';\nimport { Mark, Node } from '@milkdown/prose/model';\nimport { Decoration, EditorView } from '@milkdown/prose/view';\nimport { defineComponent, h, InjectionKey, provide } from 'vue';\n\nexport type NodeContext = {\n    ctx: Ctx;\n    node: Node | Mark;\n    view: EditorView;\n    getPos: boolean | (() => number);\n    decorations: Decoration[];\n};\n\nexport const nodeMetadata: InjectionKey<NodeContext> = Symbol();\n\nexport const VueNodeContainer = defineComponent<NodeContext & { as: string }>({\n    name: 'milkdown-node-container',\n    setup: ({ node, view, getPos, decorations, ctx, as }, context) => {\n        provide(nodeMetadata, {\n            ctx,\n            node,\n            view,\n            getPos,\n            decorations,\n        });\n        return () => h(as, { 'data-view-container': true }, context.slots['default']?.());\n    },\n});\nVueNodeContainer['props'] = ['ctx', 'editor', 'node', 'view', 'getPos', 'decorations', 'as'];\n\nexport const Content = defineComponent<{ isInline?: boolean }>({\n    name: 'milkdown-content',\n    setup: ({ isInline }) => {\n        return () => (isInline ? <span data-view-content /> : <div data-view-content />);\n    },\n});\nContent['props'] = ['isInline'];\n","/* Copyright 2021, Milkdown by Mirone. */\nimport { Ctx } from '@milkdown/core';\nimport type { ViewFactory } from '@milkdown/prose';\nimport { Mark, Node } from '@milkdown/prose/model';\nimport type { Decoration, DecorationSet, EditorView, NodeView } from '@milkdown/prose/view';\nimport { customAlphabet } from 'nanoid';\nimport { DefineComponent, defineComponent, h, markRaw, Teleport } from 'vue';\n\nimport { getRootInstance } from '.';\nimport { Content, VueNodeContainer } from './VueNode';\n\nconst nanoid = customAlphabet('abcedfghicklmn', 10);\n\nexport type RenderOptions = Partial<\n    {\n        as: string;\n    } & Pick<NodeView, 'ignoreMutation' | 'deselectNode' | 'selectNode' | 'destroy' | 'update'>\n>;\n\nexport const createVueView =\n    (addPortal: (portal: DefineComponent, key: string) => void, removePortalByKey: (key: string) => void) =>\n    (component: DefineComponent, options: RenderOptions = {}): ((ctx: Ctx) => ViewFactory) =>\n    (ctx) =>\n    (node, view, getPos, decorations) =>\n        new VueNodeView(ctx, component, addPortal, removePortalByKey, options, node, view, getPos, decorations);\n\nexport class VueNodeView implements NodeView {\n    teleportDOM: HTMLElement;\n    key: string;\n\n    get isInlineOrMark() {\n        return this.node instanceof Mark || this.node.isInline;\n    }\n\n    constructor(\n        private ctx: Ctx,\n        private component: DefineComponent,\n        private addPortal: (portal: DefineComponent, key: string) => void,\n        private removePortalByKey: (key: string) => void,\n        private options: RenderOptions,\n        private node: Node | Mark,\n        private view: EditorView,\n        private getPos: boolean | (() => number),\n        private decorations: Decoration[],\n    ) {\n        this.key = nanoid();\n        const elementName = options.as ? options.as : this.isInlineOrMark ? 'span' : 'div';\n        this.teleportDOM = document.createElement(elementName);\n        this.renderPortal();\n    }\n\n    get dom() {\n        return this.teleportDOM.firstElementChild || this.teleportDOM;\n    }\n\n    get contentDOM() {\n        if (this.node instanceof Node && this.node.isLeaf) {\n            return null;\n        }\n\n        return this.teleportDOM.querySelector('[data-view-content]') || this.dom;\n    }\n\n    renderPortal() {\n        if (!this.teleportDOM) return;\n\n        const CustomComponent = this.component;\n        const elementName = this.options.as ? this.options.as : this.isInlineOrMark ? 'span' : 'div';\n        const Portal = defineComponent({\n            name: 'milkdown-portal',\n            setup: () => {\n                return () => (\n                    <Teleport key={this.key} to={this.teleportDOM}>\n                        <VueNodeContainer\n                            as={elementName}\n                            ctx={this.ctx}\n                            node={this.node}\n                            view={this.view}\n                            getPos={this.getPos}\n                            decorations={this.decorations}\n                        >\n                            <CustomComponent>\n                                <Content isInline={this.isInlineOrMark} />\n                            </CustomComponent>\n                        </VueNodeContainer>\n                    </Teleport>\n                );\n            },\n        });\n        this.addPortal(markRaw(Portal) as DefineComponent, this.key);\n        const instance = getRootInstance();\n        if (instance) {\n            instance.update();\n        }\n    }\n\n    destroy() {\n        this.options.destroy?.();\n        this.removePortalByKey(this.key);\n    }\n\n    ignoreMutation(mutation: MutationRecord | { type: 'selection'; target: Element }) {\n        if (this.options.ignoreMutation) {\n            return this.options.ignoreMutation(mutation);\n        }\n        if (!this.dom || !this.contentDOM) {\n            return true;\n        }\n\n        if (this.node instanceof Node) {\n            if (this.node.isLeaf || this.node.isAtom) {\n                return true;\n            }\n        }\n\n        if (mutation.type === 'selection') {\n            return false;\n        }\n\n        if (this.contentDOM === this.dom) {\n            return false;\n        }\n\n        if (this.contentDOM.contains(mutation.target)) {\n            return false;\n        }\n\n        return true;\n    }\n\n    update(node: Node, decorations: Decoration[], innerDecorations: DecorationSet) {\n        if (this.options.update) {\n            const result = this.options.update?.(node, decorations, innerDecorations);\n            if (result != null) {\n                return result;\n            }\n        }\n        if (this.node.type !== node.type) {\n            return false;\n        }\n\n        if (node === this.node && this.decorations === decorations) {\n            return true;\n        }\n\n        this.node = node;\n        this.decorations = decorations;\n        return true;\n    }\n\n    selectNode = this.options?.selectNode;\n\n    deselectNode = this.options?.deselectNode;\n}\n","/* Copyright 2021, Milkdown by Mirone. */\nimport { Ctx, Editor, editorViewCtx, rootCtx } from '@milkdown/core';\nimport { ViewFactory } from '@milkdown/prose';\nimport {\n    ComponentInternalInstance,\n    DefineComponent,\n    defineComponent,\n    getCurrentInstance,\n    h,\n    inject,\n    InjectionKey,\n    markRaw,\n    onBeforeMount,\n    onMounted,\n    onUnmounted,\n    provide,\n    Ref,\n    ref,\n    shallowReactive,\n} from 'vue';\n\nimport { AnyVueComponent } from './utils';\nimport { createVueView, RenderOptions } from './VueNodeView';\n\nconst rendererKey: InjectionKey<(component: DefineComponent, options?: RenderOptions) => (ctx: Ctx) => ViewFactory> =\n    Symbol();\n\nexport type RenderVue = (Component: AnyVueComponent, options?: RenderOptions) => (ctx: Ctx) => ViewFactory;\nexport type GetEditor = (container: HTMLDivElement, renderVue: RenderVue) => Editor;\n\nconst useGetEditor = (getEditor: GetEditor) => {\n    const divRef = ref<HTMLDivElement | null>(null);\n    const renderVue = inject<(Component: DefineComponent, options?: RenderOptions) => (ctx: Ctx) => ViewFactory>(\n        rendererKey,\n        () => {\n            throw new Error();\n        },\n    );\n    const editorRef = markRaw<{ editor?: Editor }>({});\n    onMounted(() => {\n        if (!divRef.value) return;\n\n        getEditor(divRef.value, renderVue)\n            .create()\n            .then((editor) => {\n                editorRef.editor = editor;\n                return;\n            })\n            .catch((e) => console.error(e));\n    });\n    onUnmounted(() => {\n        const view = editorRef.editor?.action((ctx) => ctx.get(editorViewCtx));\n        const root = editorRef.editor?.action((ctx) => ctx.get(rootCtx)) as HTMLElement;\n\n        root?.firstChild?.remove();\n        view?.destroy();\n    });\n\n    return { divRef, editorRef };\n};\n\nexport const EditorComponent = defineComponent<{ editor: GetEditor; editorRef?: Ref<EditorRef> }>({\n    name: 'milkdown-dom-root',\n    setup: (props, { slots }) => {\n        const refs = useGetEditor(props.editor);\n        if (props.editorRef) {\n            props.editorRef.value = {\n                get: () => refs.editorRef.editor,\n                dom: () => refs.divRef.value,\n            };\n        }\n\n        return () => <div ref={refs.divRef}>{slots['default']?.()}</div>;\n    },\n});\nEditorComponent['props'] = ['editor', 'editorRef'];\n\nexport type EditorRef = { get: () => Editor | undefined; dom: () => HTMLDivElement | null };\n\nconst rootInstance: {\n    instance: null | ComponentInternalInstance;\n} = {\n    instance: null,\n};\nexport const getRootInstance = () => {\n    return rootInstance.instance;\n};\n\ntype PortalPair = [key: string, component: DefineComponent];\nexport const VueEditor = defineComponent<{ editor: GetEditor; editorRef?: Ref<EditorRef> }>({\n    name: 'milkdown-vue-root',\n    setup: (props) => {\n        const portals = shallowReactive<PortalPair[]>([]);\n\n        const instance = getCurrentInstance();\n\n        onBeforeMount(() => {\n            rootInstance.instance = (instance as ComponentInternalInstance & { ctx: { _: ComponentInternalInstance } })\n                .ctx._ as ComponentInternalInstance;\n        });\n\n        onUnmounted(() => {\n            rootInstance.instance = null;\n        });\n\n        const addPortal = markRaw((component: DefineComponent, key: string) => {\n            portals.push([key, component]);\n        });\n        const removePortalByKey = markRaw((key: string) => {\n            const index = portals.findIndex((p) => p[0] === key);\n            portals.splice(index, 1);\n        });\n        const renderVue = createVueView(addPortal, removePortalByKey);\n        provide(rendererKey, renderVue);\n\n        return () => {\n            const portalElements = portals.map(([id, P]) => <P key={id} />);\n            return (\n                <EditorComponent editorRef={props.editorRef} editor={props.editor}>\n                    {portalElements}\n                </EditorComponent>\n            );\n        };\n    },\n});\nVueEditor['props'] = ['editor', 'editorRef'];\n\nexport const useEditor = (getEditor: GetEditor) => {\n    return (...args: Parameters<GetEditor>) => getEditor(...args);\n};\n"],"names":["nodeMetadata","Symbol","VueNodeContainer","defineComponent","name","setup","node","view","getPos","decorations","ctx","as","context","provide","h","slots","Content","isInline","_createVNode","nanoid","customAlphabet","createVueView","addPortal","removePortalByKey","component","options","VueNodeView","constructor","selectNode","deselectNode","key","elementName","isInlineOrMark","teleportDOM","document","createElement","renderPortal","Mark","dom","firstElementChild","contentDOM","Node","isLeaf","querySelector","CustomComponent","Portal","markRaw","instance","getRootInstance","update","destroy","ignoreMutation","mutation","isAtom","type","contains","target","innerDecorations","result","rendererKey","useGetEditor","getEditor","divRef","ref","renderVue","inject","Error","editorRef","onMounted","value","create","then","editor","catch","e","console","error","onUnmounted","action","get","editorViewCtx","root","rootCtx","firstChild","remove","EditorComponent","props","refs","rootInstance","VueEditor","portals","shallowReactive","getCurrentInstance","onBeforeMount","_","push","index","findIndex","p","splice","portalElements","map","id","P","useEditor","args"],"mappings":"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"}
+{"version":3,"file":"index.es.js","sources":["../src/useGetEditor.ts","../src/EditorComponent.tsx","../src/VueNode.tsx","../src/VueNodeView.tsx","../src/Editor.tsx","../src/useEditor.ts"],"sourcesContent":["/* Copyright 2021, Milkdown by Mirone. */\nimport { Ctx, editorViewCtx, rootCtx } from '@milkdown/core';\nimport { MarkViewConstructor, NodeViewConstructor } from '@milkdown/prose/view';\nimport { DefineComponent, inject, InjectionKey, onMounted, onUnmounted, ref } from 'vue';\n\nimport { editorInfoCtxKey } from '.';\nimport { EditorInfoCtx, GetEditor, RenderOptions, RenderVue } from './types';\n\nexport const rendererKey: InjectionKey<\n    (component: DefineComponent, options?: RenderOptions) => (ctx: Ctx) => NodeViewConstructor | MarkViewConstructor\n> = Symbol();\n\nexport const useGetEditor = (getEditor: GetEditor) => {\n    const renderVue = inject<RenderVue>(rendererKey, () => {\n        throw new Error();\n    });\n    const { dom, loading, editor: editorRef } = inject(editorInfoCtxKey, {} as EditorInfoCtx);\n    const lock = ref(false);\n\n    onMounted(() => {\n        if (!dom.value) return;\n\n        const editor = getEditor(dom.value, renderVue);\n        if (!editor) return;\n\n        if (lock.value) return;\n\n        loading.value = true;\n        lock.value = true;\n\n        editor\n            .create()\n            .then((editor) => {\n                editorRef.value = editor;\n                return;\n            })\n            .finally(() => {\n                loading.value = false;\n                lock.value = false;\n            })\n            .catch((e) => console.error(e));\n    });\n    onUnmounted(() => {\n        const view = editorRef.value?.action((ctx) => ctx.get(editorViewCtx));\n        const root = editorRef.value?.action((ctx) => ctx.get(rootCtx)) as HTMLElement;\n\n        root?.firstChild?.remove();\n        view?.destroy();\n    });\n};\n","/* Copyright 2021, Milkdown by Mirone. */\nimport { Editor } from '@milkdown/core';\nimport { defineComponent, h, inject } from 'vue';\n\nimport { editorInfoCtxKey } from './Editor';\nimport { EditorInfoCtx, GetEditor } from './types';\nimport { useGetEditor } from './useGetEditor';\n\nexport const EditorComponent = defineComponent<{ editor: GetEditor; editorRef?: EditorRef }>({\n    name: 'milkdown-dom-root',\n    setup: (props, { slots }) => {\n        useGetEditor(props.editor);\n        const ctx = inject(editorInfoCtxKey, {} as EditorInfoCtx);\n\n        if (props.editorRef) {\n            props.editorRef.get = () => ctx.editor.value;\n            props.editorRef.dom = () => ctx.dom.value;\n        }\n\n        return () => <div ref={ctx.dom}>{slots['default']?.()}</div>;\n    },\n});\nEditorComponent['props'] = ['editor', 'editorRef'];\n\nexport type EditorRef = { get: () => Editor | undefined; dom: () => HTMLDivElement | null };\n","/* Copyright 2021, Milkdown by Mirone. */\nimport { Ctx } from '@milkdown/core';\nimport { Mark, Node } from '@milkdown/prose/model';\nimport { Decoration, EditorView } from '@milkdown/prose/view';\nimport { defineComponent, h, inject, InjectionKey, provide } from 'vue';\n\nexport type NodeContext<T extends Node | Mark = Node | Mark> = {\n    ctx: Ctx;\n    node: T;\n    view: EditorView;\n    getPos: T extends Mark ? boolean : T extends Node ? () => number : boolean | (() => number);\n    decorations: readonly Decoration[];\n};\n\nexport const nodeMetadata: InjectionKey<NodeContext> = Symbol();\n\nexport type UseNodeCtx = <T extends Node | Mark = Node | Mark>() => NodeContext<T>;\nexport const useNodeCtx: UseNodeCtx = () => inject(nodeMetadata) as NodeContext<never>;\n\nexport const VueNodeContainer = defineComponent<NodeContext & { as: string }>({\n    name: 'milkdown-node-container',\n    setup: ({ node, view, getPos, decorations, ctx, as }, context) => {\n        provide(nodeMetadata, {\n            ctx,\n            node,\n            view,\n            getPos,\n            decorations,\n        });\n        return () => h(as, { 'data-view-container': true }, context.slots['default']?.());\n    },\n});\nVueNodeContainer['props'] = ['ctx', 'editor', 'node', 'view', 'getPos', 'decorations', 'as'];\n\nexport const Content = defineComponent<{ isInline?: boolean }>({\n    name: 'milkdown-content',\n    setup: ({ isInline }) => {\n        return () => (isInline ? <span data-view-content /> : <div data-view-content />);\n    },\n});\nContent['props'] = ['isInline'];\n","/* Copyright 2021, Milkdown by Mirone. */\nimport { Ctx } from '@milkdown/core';\nimport { Mark, Node } from '@milkdown/prose/model';\nimport type {\n    Decoration,\n    DecorationSource,\n    EditorView,\n    MarkViewConstructor,\n    NodeView,\n    NodeViewConstructor,\n} from '@milkdown/prose/view';\nimport { customAlphabet } from 'nanoid';\nimport { DefineComponent, defineComponent, h, markRaw, Teleport } from 'vue';\n\nimport { getRootInstance } from '.';\nimport { Content, VueNodeContainer } from './VueNode';\n\nconst nanoid = customAlphabet('abcedfghicklmn', 10);\n\nexport type RenderOptions = Partial<\n    {\n        as: string;\n        update?: (node: Node, decorations: readonly Decoration[], innerDecorations: DecorationSource) => boolean;\n    } & Pick<NodeView, 'ignoreMutation' | 'deselectNode' | 'selectNode' | 'destroy'>\n>;\n\nexport const createVueView =\n    (addPortal: (portal: DefineComponent, key: string) => void, removePortalByKey: (key: string) => void) =>\n    (\n        component: DefineComponent,\n        options: RenderOptions = {},\n    ): ((ctx: Ctx) => NodeViewConstructor | MarkViewConstructor) =>\n    (ctx) =>\n    (node, view, getPos, decorations) =>\n        new VueNodeView(ctx, component, addPortal, removePortalByKey, options, node, view, getPos, decorations);\n\nexport class VueNodeView implements NodeView {\n    teleportDOM: HTMLElement;\n    key: string;\n\n    get isInlineOrMark() {\n        return this.node instanceof Mark || this.node.isInline;\n    }\n\n    constructor(\n        private ctx: Ctx,\n        private component: DefineComponent,\n        private addPortal: (portal: DefineComponent, key: string) => void,\n        private removePortalByKey: (key: string) => void,\n        private options: RenderOptions,\n        private node: Node | Mark,\n        private view: EditorView,\n        private getPos: boolean | (() => number),\n        private decorations: readonly Decoration[],\n    ) {\n        this.key = nanoid();\n        const elementName = options.as ? options.as : this.isInlineOrMark ? 'span' : 'div';\n        this.teleportDOM = document.createElement(elementName);\n        this.renderPortal();\n    }\n\n    get dom() {\n        return (this.teleportDOM.firstElementChild || this.teleportDOM) as HTMLElement;\n    }\n\n    get contentDOM() {\n        if (this.node instanceof Node && this.node.isLeaf) {\n            return undefined;\n        }\n\n        return this.teleportDOM.querySelector<HTMLElement>('[data-view-content]') || this.dom;\n    }\n\n    renderPortal() {\n        if (!this.teleportDOM) return;\n\n        const CustomComponent = this.component;\n        const elementName = this.options.as ? this.options.as : this.isInlineOrMark ? 'span' : 'div';\n        const Portal = defineComponent({\n            name: 'milkdown-portal',\n            setup: () => {\n                return () => (\n                    <Teleport key={this.key} to={this.teleportDOM}>\n                        <VueNodeContainer\n                            as={elementName}\n                            ctx={this.ctx}\n                            node={this.node}\n                            view={this.view}\n                            getPos={this.getPos}\n                            decorations={this.decorations}\n                        >\n                            <CustomComponent>\n                                <Content isInline={this.isInlineOrMark} />\n                            </CustomComponent>\n                        </VueNodeContainer>\n                    </Teleport>\n                );\n            },\n        });\n        this.addPortal(markRaw(Portal) as DefineComponent, this.key);\n        const instance = getRootInstance();\n        if (instance) {\n            instance.update();\n        }\n    }\n\n    destroy() {\n        this.options.destroy?.();\n        this.teleportDOM.remove();\n        this.removePortalByKey(this.key);\n    }\n\n    ignoreMutation(mutation: MutationRecord) {\n        if (this.options.ignoreMutation) {\n            return this.options.ignoreMutation(mutation);\n        }\n        if (!this.dom || !this.contentDOM) {\n            return true;\n        }\n\n        if (this.node instanceof Node) {\n            if (this.node.isLeaf || this.node.isAtom) {\n                return true;\n            }\n        }\n\n        if ((mutation as unknown as { type: string }).type === 'selection') {\n            return false;\n        }\n\n        if (this.contentDOM === this.dom) {\n            return false;\n        }\n\n        if (this.contentDOM.contains(mutation.target)) {\n            return false;\n        }\n\n        return true;\n    }\n\n    update(node: Node, decorations: readonly Decoration[], innerDecorations: DecorationSource) {\n        if (this.options.update) {\n            const result = this.options.update?.(node, decorations, innerDecorations);\n            if (result != null) {\n                return result;\n            }\n        }\n        if (this.node.type !== node.type) {\n            return false;\n        }\n\n        if (node === this.node && this.decorations === decorations) {\n            return true;\n        }\n\n        this.node = node;\n        this.decorations = decorations;\n        return true;\n    }\n\n    selectNode = this.options?.selectNode;\n\n    deselectNode = this.options?.deselectNode;\n}\n","/* Copyright 2021, Milkdown by Mirone. */\nimport {\n    ComponentInternalInstance,\n    DefineComponent,\n    defineComponent,\n    effect,\n    getCurrentInstance,\n    h,\n    InjectionKey,\n    markRaw,\n    onBeforeMount,\n    onUnmounted,\n    provide,\n    shallowReactive,\n} from 'vue';\n\nimport { EditorComponent, EditorRef } from './EditorComponent';\nimport { EditorInfo, EditorInfoCtx } from './types';\nimport { rendererKey } from './useGetEditor';\nimport { createVueView } from './VueNodeView';\n\nconst rootInstance: {\n    instance: null | ComponentInternalInstance;\n} = {\n    instance: null,\n};\nexport const getRootInstance = () => {\n    return rootInstance.instance;\n};\n\nexport const editorInfoCtxKey: InjectionKey<EditorInfoCtx> = Symbol();\n\nconst refDeprecatedInfo = `\n@milkdown/vue:\nPassing ref to VueEditor will soon be deprecated, please use:\n\nconst { editor, getInstance, getDom, loading } = useEditor(/* creator */);\n\neffect(() => {\n    if (!loading) {\n        const editor = getInstance();\n        const rootDOM = getDom();\n    }\n})\n\n<VueEditor editor={editor} />\n`;\n\nconst compositionDeprecatedInfo = `\n@milkdown/vue:\nPassing editor directly to VueEditor will soon be deprecated, please use:\n\nconst { editor } = useEditor(/* creator */);\n\n<VueEditor editor={editor} />\n`;\n\ntype PortalPair = [key: string, component: DefineComponent];\nexport const VueEditor = defineComponent<{ editor: EditorInfo; editorRef?: EditorRef }>({\n    name: 'milkdown-vue-root',\n    setup: (props) => {\n        const portals = shallowReactive<PortalPair[]>([]);\n\n        const instance = getCurrentInstance();\n\n        onBeforeMount(() => {\n            rootInstance.instance = (instance as ComponentInternalInstance & { ctx: { _: ComponentInternalInstance } })\n                .ctx._ as ComponentInternalInstance;\n        });\n\n        onUnmounted(() => {\n            rootInstance.instance = null;\n        });\n\n        const addPortal = markRaw((component: DefineComponent, key: string) => {\n            portals.push([key, component]);\n        });\n        const removePortalByKey = markRaw((key: string) => {\n            const index = portals.findIndex((p) => p[0] === key);\n            portals.splice(index, 1);\n        });\n        const renderVue = createVueView(addPortal, removePortalByKey);\n\n        provide(rendererKey, renderVue);\n\n        const usingDeprecatedCompositionAPI = Object.hasOwnProperty.call(props.editor, 'getInstance');\n\n        const { getEditorCallback, dom, editor, loading } = usingDeprecatedCompositionAPI\n            ? // @ts-expect-error deprecated old composition API\n              (props.editor.editor as EditorInfo)\n            : props.editor;\n\n        effect(() => {\n            if (usingDeprecatedCompositionAPI) {\n                console.warn(compositionDeprecatedInfo);\n            }\n            if (props.editorRef) {\n                console.warn(refDeprecatedInfo);\n            }\n        });\n\n        provide(editorInfoCtxKey, {\n            dom,\n            editor,\n            loading,\n        });\n\n        return () => {\n            const portalElements = portals.map(([id, P]) => <P key={id} />);\n            return (\n                <EditorComponent editorRef={props.editorRef} editor={getEditorCallback.value}>\n                    {portalElements}\n                </EditorComponent>\n            );\n        };\n    },\n});\nVueEditor['props'] = ['editor', 'editorRef'];\n","/* Copyright 2021, Milkdown by Mirone. */\n\nimport { Editor } from '@milkdown/core';\nimport { ref } from 'vue';\n\nimport { GetEditor, UseEditorReturn } from './types';\n\nexport const useEditor = (getEditor: GetEditor): UseEditorReturn => {\n    const dom = ref<HTMLDivElement | null>(null);\n    const editor = ref<Editor>();\n    const loading = ref(true);\n    const getEditorCallback = ref<GetEditor>((...args) => getEditor(...args));\n\n    return {\n        loading,\n        getInstance: () => editor.value,\n        getDom: () => dom.value,\n        editor: {\n            getEditorCallback,\n            dom,\n            editor,\n            loading,\n        },\n    };\n};\n"],"names":["EditorComponent","defineComponent","name","setup","props","slots","useGetEditor","editor","ctx","inject","editorInfoCtxKey","editorRef","get","value","dom","_createVNode","nodeMetadata","Symbol","useNodeCtx","VueNodeContainer","node","view","getPos","decorations","as","context","provide","h","Content","isInline","nanoid","customAlphabet","createVueView","addPortal","removePortalByKey","component","options","VueNodeView","constructor","selectNode","deselectNode","key","elementName","isInlineOrMark","teleportDOM","document","createElement","renderPortal","Mark","firstElementChild","contentDOM","Node","isLeaf","undefined","querySelector","CustomComponent","Portal","markRaw","instance","getRootInstance","update","destroy","remove","ignoreMutation","mutation","isAtom","type","contains","target","innerDecorations","result","rootInstance","refDeprecatedInfo","compositionDeprecatedInfo","VueEditor","portals","shallowReactive","getCurrentInstance","onBeforeMount","_","onUnmounted","push","index","findIndex","p","splice","renderVue","rendererKey","usingDeprecatedCompositionAPI","Object","hasOwnProperty","call","getEditorCallback","loading","effect","console","warn","portalElements","map","id","P"],"mappings":"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"}

package/lib/types.d.ts

@@ -0,0 +1,26 @@
+import { Ctx, Editor } from '@milkdown/core';
+import type { Mark, Node } from '@milkdown/prose/model';
+import { Decoration, DecorationSource, MarkViewConstructor, NodeView, NodeViewConstructor } from '@milkdown/prose/view';
+import { Ref } from 'vue';
+import { AnyVueComponent } from './utils';
+export declare type RenderOptions = Partial<{
+    as: string;
+    update?: (node: Node, decorations: readonly Decoration[], innerDecorations: DecorationSource) => boolean;
+} & Pick<NodeView, 'ignoreMutation' | 'deselectNode' | 'selectNode' | 'destroy'>>;
+export declare type RenderVue<U = never> = <T extends Node | Mark = Node | Mark>(Component: AnyVueComponent, options?: RenderOptions) => (ctx: Ctx) => U extends never ? T extends Node ? NodeViewConstructor : T extends Mark ? MarkViewConstructor : NodeViewConstructor & MarkViewConstructor : U extends Node ? NodeViewConstructor : U extends Mark ? MarkViewConstructor : NodeViewConstructor & MarkViewConstructor;
+export declare type GetEditor = (container: HTMLDivElement, renderVue: RenderVue) => Editor;
+export declare type EditorInfoCtx = {
+    dom: Ref<HTMLDivElement | null>;
+    editor: Ref<Editor | undefined>;
+    loading: Ref<boolean>;
+};
+export declare type EditorInfo = {
+    getEditorCallback: Ref<GetEditor>;
+} & EditorInfoCtx;
+export declare type UseEditorReturn = {
+    loading: Ref<boolean>;
+    getInstance: () => Editor | undefined;
+    getDom: () => HTMLDivElement | null;
+    editor: EditorInfo;
+};
+//# sourceMappingURL=types.d.ts.map

package/lib/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AACxD,OAAO,EAAE,UAAU,EAAE,gBAAgB,EAAE,mBAAmB,EAAE,QAAQ,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AACxH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE1C,oBAAY,aAAa,GAAG,OAAO,CAC/B;IACI,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,WAAW,EAAE,SAAS,UAAU,EAAE,EAAE,gBAAgB,EAAE,gBAAgB,KAAK,OAAO,CAAC;CAC5G,GAAG,IAAI,CAAC,QAAQ,EAAE,gBAAgB,GAAG,cAAc,GAAG,YAAY,GAAG,SAAS,CAAC,CACnF,CAAC;AAEF,oBAAY,SAAS,CAAC,CAAC,GAAG,KAAK,IAAI,CAAC,CAAC,SAAS,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,EACnE,SAAS,EAAE,eAAe,EAC1B,OAAO,CAAC,EAAE,aAAa,KACtB,CACD,GAAG,EAAE,GAAG,KACP,CAAC,SAAS,KAAK,GACd,CAAC,SAAS,IAAI,GACV,mBAAmB,GACnB,CAAC,SAAS,IAAI,GACd,mBAAmB,GACnB,mBAAmB,GAAG,mBAAmB,GAC7C,CAAC,SAAS,IAAI,GACd,mBAAmB,GACnB,CAAC,SAAS,IAAI,GACd,mBAAmB,GACnB,mBAAmB,GAAG,mBAAmB,CAAC;AAEhD,oBAAY,SAAS,GAAG,CAAC,SAAS,EAAE,cAAc,EAAE,SAAS,EAAE,SAAS,KAAK,MAAM,CAAC;AAEpF,oBAAY,aAAa,GAAG;IACxB,GAAG,EAAE,GAAG,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAChC,MAAM,EAAE,GAAG,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC;IAChC,OAAO,EAAE,GAAG,CAAC,OAAO,CAAC,CAAC;CACzB,CAAC;AAEF,oBAAY,UAAU,GAAG;IACrB,iBAAiB,EAAE,GAAG,CAAC,SAAS,CAAC,CAAC;CACrC,GAAG,aAAa,CAAC;AAElB,oBAAY,eAAe,GAAG;IAC1B,OAAO,EAAE,GAAG,CAAC,OAAO,CAAC,CAAC;IACtB,WAAW,EAAE,MAAM,MAAM,GAAG,SAAS,CAAC;IACtC,MAAM,EAAE,MAAM,cAAc,GAAG,IAAI,CAAC;IACpC,MAAM,EAAE,UAAU,CAAC;CACtB,CAAC"}

package/lib/useEditor.d.ts

@@ -0,0 +1,3 @@
+import { GetEditor, UseEditorReturn } from './types';
+export declare const useEditor: (getEditor: GetEditor) => UseEditorReturn;
+//# sourceMappingURL=useEditor.d.ts.map

package/lib/useEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useEditor.d.ts","sourceRoot":"","sources":["../src/useEditor.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAErD,eAAO,MAAM,SAAS,cAAe,SAAS,KAAG,eAiBhD,CAAC"}

package/lib/useGetEditor.d.ts

@@ -0,0 +1,7 @@
+import { Ctx } from '@milkdown/core';
+import { MarkViewConstructor, NodeViewConstructor } from '@milkdown/prose/view';
+import { DefineComponent, InjectionKey } from 'vue';
+import { GetEditor, RenderOptions } from './types';
+export declare const rendererKey: InjectionKey<(component: DefineComponent, options?: RenderOptions) => (ctx: Ctx) => NodeViewConstructor | MarkViewConstructor>;
+export declare const useGetEditor: (getEditor: GetEditor) => void;
+//# sourceMappingURL=useGetEditor.d.ts.map

package/lib/useGetEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useGetEditor.d.ts","sourceRoot":"","sources":["../src/useGetEditor.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,GAAG,EAA0B,MAAM,gBAAgB,CAAC;AAC7D,OAAO,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAChF,OAAO,EAAE,eAAe,EAAU,YAAY,EAA+B,MAAM,KAAK,CAAC;AAGzF,OAAO,EAAiB,SAAS,EAAE,aAAa,EAAa,MAAM,SAAS,CAAC;AAE7E,eAAO,MAAM,WAAW,EAAE,YAAY,CAClC,CAAC,SAAS,EAAE,eAAe,EAAE,OAAO,CAAC,EAAE,aAAa,KAAK,CAAC,GAAG,EAAE,GAAG,KAAK,mBAAmB,GAAG,mBAAmB,CACxG,CAAC;AAEb,eAAO,MAAM,YAAY,cAAe,SAAS,SAqChD,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@milkdown/vue",
-  "version": "6.1.5",
+  "version": "6.2.0",
   "type": "module",
   "main": "./lib/index.es.js",
   "types": "./lib/index.d.ts",
@@ -16,8 +16,8 @@
     "vue"
   ],
   "dependencies": {
-    "@milkdown/utils": "6.1.5",
-    "nanoid": "^3.1.25",
+    "@milkdown/utils": "6.2.0",
+    "nanoid": "^4.0.0",
     "tslib": "^2.3.1"
   },
   "peerDependencies": {
@@ -26,8 +26,8 @@
     "vue": "^3.0.0"
   },
   "devDependencies": {
-    "@milkdown/core": "6.1.5",
-    "@milkdown/prose": "6.1.5",
+    "@milkdown/core": "6.2.0",
+    "@milkdown/prose": "6.2.0",
     "vue": "^3.0.0"
   },
   "nx": {

package/src/Editor.tsx

@@ -1,81 +1,23 @@
 /* Copyright 2021, Milkdown by Mirone. */
-import { Ctx, Editor, editorViewCtx, rootCtx } from '@milkdown/core';
-import { ViewFactory } from '@milkdown/prose';
 import {
     ComponentInternalInstance,
     DefineComponent,
     defineComponent,
+    effect,
     getCurrentInstance,
     h,
-    inject,
     InjectionKey,
     markRaw,
     onBeforeMount,
-    onMounted,
     onUnmounted,
     provide,
-    Ref,
-    ref,
     shallowReactive,
 } from 'vue';
 
-import { AnyVueComponent } from './utils';
-import { createVueView, RenderOptions } from './VueNodeView';
-
-const rendererKey: InjectionKey<(component: DefineComponent, options?: RenderOptions) => (ctx: Ctx) => ViewFactory> =
-    Symbol();
-
-export type RenderVue = (Component: AnyVueComponent, options?: RenderOptions) => (ctx: Ctx) => ViewFactory;
-export type GetEditor = (container: HTMLDivElement, renderVue: RenderVue) => Editor;
-
-const useGetEditor = (getEditor: GetEditor) => {
-    const divRef = ref<HTMLDivElement | null>(null);
-    const renderVue = inject<(Component: DefineComponent, options?: RenderOptions) => (ctx: Ctx) => ViewFactory>(
-        rendererKey,
-        () => {
-            throw new Error();
-        },
-    );
-    const editorRef = markRaw<{ editor?: Editor }>({});
-    onMounted(() => {
-        if (!divRef.value) return;
-
-        getEditor(divRef.value, renderVue)
-            .create()
-            .then((editor) => {
-                editorRef.editor = editor;
-                return;
-            })
-            .catch((e) => console.error(e));
-    });
-    onUnmounted(() => {
-        const view = editorRef.editor?.action((ctx) => ctx.get(editorViewCtx));
-        const root = editorRef.editor?.action((ctx) => ctx.get(rootCtx)) as HTMLElement;
-
-        root?.firstChild?.remove();
-        view?.destroy();
-    });
-
-    return { divRef, editorRef };
-};
-
-export const EditorComponent = defineComponent<{ editor: GetEditor; editorRef?: Ref<EditorRef> }>({
-    name: 'milkdown-dom-root',
-    setup: (props, { slots }) => {
-        const refs = useGetEditor(props.editor);
-        if (props.editorRef) {
-            props.editorRef.value = {
-                get: () => refs.editorRef.editor,
-                dom: () => refs.divRef.value,
-            };
-        }
-
-        return () => <div ref={refs.divRef}>{slots['default']?.()}</div>;
-    },
-});
-EditorComponent['props'] = ['editor', 'editorRef'];
-
-export type EditorRef = { get: () => Editor | undefined; dom: () => HTMLDivElement | null };
+import { EditorComponent, EditorRef } from './EditorComponent';
+import { EditorInfo, EditorInfoCtx } from './types';
+import { rendererKey } from './useGetEditor';
+import { createVueView } from './VueNodeView';
 
 const rootInstance: {
     instance: null | ComponentInternalInstance;
@@ -86,8 +28,35 @@ export const getRootInstance = () => {
     return rootInstance.instance;
 };
 
+export const editorInfoCtxKey: InjectionKey<EditorInfoCtx> = Symbol();
+
+const refDeprecatedInfo = `
+@milkdown/vue:
+Passing ref to VueEditor will soon be deprecated, please use:
+
+const { editor, getInstance, getDom, loading } = useEditor(/* creator */);
+
+effect(() => {
+    if (!loading) {
+        const editor = getInstance();
+        const rootDOM = getDom();
+    }
+})
+
+<VueEditor editor={editor} />
+`;
+
+const compositionDeprecatedInfo = `
+@milkdown/vue:
+Passing editor directly to VueEditor will soon be deprecated, please use:
+
+const { editor } = useEditor(/* creator */);
+
+<VueEditor editor={editor} />
+`;
+
 type PortalPair = [key: string, component: DefineComponent];
-export const VueEditor = defineComponent<{ editor: GetEditor; editorRef?: Ref<EditorRef> }>({
+export const VueEditor = defineComponent<{ editor: EditorInfo; editorRef?: EditorRef }>({
     name: 'milkdown-vue-root',
     setup: (props) => {
         const portals = shallowReactive<PortalPair[]>([]);
@@ -111,12 +80,35 @@ export const VueEditor = defineComponent<{ editor: GetEditor; editorRef?: Ref<Ed
             portals.splice(index, 1);
         });
         const renderVue = createVueView(addPortal, removePortalByKey);
+
         provide(rendererKey, renderVue);
 
+        const usingDeprecatedCompositionAPI = Object.hasOwnProperty.call(props.editor, 'getInstance');
+
+        const { getEditorCallback, dom, editor, loading } = usingDeprecatedCompositionAPI
+            ? // @ts-expect-error deprecated old composition API
+              (props.editor.editor as EditorInfo)
+            : props.editor;
+
+        effect(() => {
+            if (usingDeprecatedCompositionAPI) {
+                console.warn(compositionDeprecatedInfo);
+            }
+            if (props.editorRef) {
+                console.warn(refDeprecatedInfo);
+            }
+        });
+
+        provide(editorInfoCtxKey, {
+            dom,
+            editor,
+            loading,
+        });
+
         return () => {
             const portalElements = portals.map(([id, P]) => <P key={id} />);
             return (
-                <EditorComponent editorRef={props.editorRef} editor={props.editor}>
+                <EditorComponent editorRef={props.editorRef} editor={getEditorCallback.value}>
                     {portalElements}
                 </EditorComponent>
             );
@@ -124,7 +116,3 @@ export const VueEditor = defineComponent<{ editor: GetEditor; editorRef?: Ref<Ed
     },
 });
 VueEditor['props'] = ['editor', 'editorRef'];
-
-export const useEditor = (getEditor: GetEditor) => {
-    return (...args: Parameters<GetEditor>) => getEditor(...args);
-};

package/src/EditorComponent.tsx

@@ -0,0 +1,25 @@
+/* Copyright 2021, Milkdown by Mirone. */
+import { Editor } from '@milkdown/core';
+import { defineComponent, h, inject } from 'vue';
+
+import { editorInfoCtxKey } from './Editor';
+import { EditorInfoCtx, GetEditor } from './types';
+import { useGetEditor } from './useGetEditor';
+
+export const EditorComponent = defineComponent<{ editor: GetEditor; editorRef?: EditorRef }>({
+    name: 'milkdown-dom-root',
+    setup: (props, { slots }) => {
+        useGetEditor(props.editor);
+        const ctx = inject(editorInfoCtxKey, {} as EditorInfoCtx);
+
+        if (props.editorRef) {
+            props.editorRef.get = () => ctx.editor.value;
+            props.editorRef.dom = () => ctx.dom.value;
+        }
+
+        return () => <div ref={ctx.dom}>{slots['default']?.()}</div>;
+    },
+});
+EditorComponent['props'] = ['editor', 'editorRef'];
+
+export type EditorRef = { get: () => Editor | undefined; dom: () => HTMLDivElement | null };

package/src/VueNode.tsx

@@ -2,18 +2,21 @@
 import { Ctx } from '@milkdown/core';
 import { Mark, Node } from '@milkdown/prose/model';
 import { Decoration, EditorView } from '@milkdown/prose/view';
-import { defineComponent, h, InjectionKey, provide } from 'vue';
+import { defineComponent, h, inject, InjectionKey, provide } from 'vue';
 
-export type NodeContext = {
+export type NodeContext<T extends Node | Mark = Node | Mark> = {
     ctx: Ctx;
-    node: Node | Mark;
+    node: T;
     view: EditorView;
-    getPos: boolean | (() => number);
-    decorations: Decoration[];
+    getPos: T extends Mark ? boolean : T extends Node ? () => number : boolean | (() => number);
+    decorations: readonly Decoration[];
 };
 
 export const nodeMetadata: InjectionKey<NodeContext> = Symbol();
 
+export type UseNodeCtx = <T extends Node | Mark = Node | Mark>() => NodeContext<T>;
+export const useNodeCtx: UseNodeCtx = () => inject(nodeMetadata) as NodeContext<never>;
+
 export const VueNodeContainer = defineComponent<NodeContext & { as: string }>({
     name: 'milkdown-node-container',
     setup: ({ node, view, getPos, decorations, ctx, as }, context) => {

package/src/VueNodeView.tsx

@@ -1,8 +1,14 @@
 /* Copyright 2021, Milkdown by Mirone. */
 import { Ctx } from '@milkdown/core';
-import type { ViewFactory } from '@milkdown/prose';
 import { Mark, Node } from '@milkdown/prose/model';
-import type { Decoration, DecorationSet, EditorView, NodeView } from '@milkdown/prose/view';
+import type {
+    Decoration,
+    DecorationSource,
+    EditorView,
+    MarkViewConstructor,
+    NodeView,
+    NodeViewConstructor,
+} from '@milkdown/prose/view';
 import { customAlphabet } from 'nanoid';
 import { DefineComponent, defineComponent, h, markRaw, Teleport } from 'vue';
 
@@ -14,12 +20,16 @@ const nanoid = customAlphabet('abcedfghicklmn', 10);
 export type RenderOptions = Partial<
     {
         as: string;
-    } & Pick<NodeView, 'ignoreMutation' | 'deselectNode' | 'selectNode' | 'destroy' | 'update'>
+        update?: (node: Node, decorations: readonly Decoration[], innerDecorations: DecorationSource) => boolean;
+    } & Pick<NodeView, 'ignoreMutation' | 'deselectNode' | 'selectNode' | 'destroy'>
 >;
 
 export const createVueView =
     (addPortal: (portal: DefineComponent, key: string) => void, removePortalByKey: (key: string) => void) =>
-    (component: DefineComponent, options: RenderOptions = {}): ((ctx: Ctx) => ViewFactory) =>
+    (
+        component: DefineComponent,
+        options: RenderOptions = {},
+    ): ((ctx: Ctx) => NodeViewConstructor | MarkViewConstructor) =>
     (ctx) =>
     (node, view, getPos, decorations) =>
         new VueNodeView(ctx, component, addPortal, removePortalByKey, options, node, view, getPos, decorations);
@@ -41,7 +51,7 @@ export class VueNodeView implements NodeView {
         private node: Node | Mark,
         private view: EditorView,
         private getPos: boolean | (() => number),
-        private decorations: Decoration[],
+        private decorations: readonly Decoration[],
     ) {
         this.key = nanoid();
         const elementName = options.as ? options.as : this.isInlineOrMark ? 'span' : 'div';
@@ -50,15 +60,15 @@ export class VueNodeView implements NodeView {
     }
 
     get dom() {
-        return this.teleportDOM.firstElementChild || this.teleportDOM;
+        return (this.teleportDOM.firstElementChild || this.teleportDOM) as HTMLElement;
     }
 
     get contentDOM() {
         if (this.node instanceof Node && this.node.isLeaf) {
-            return null;
+            return undefined;
         }
 
-        return this.teleportDOM.querySelector('[data-view-content]') || this.dom;
+        return this.teleportDOM.querySelector<HTMLElement>('[data-view-content]') || this.dom;
     }
 
     renderPortal() {
@@ -96,10 +106,11 @@ export class VueNodeView implements NodeView {
 
     destroy() {
         this.options.destroy?.();
+        this.teleportDOM.remove();
         this.removePortalByKey(this.key);
     }
 
-    ignoreMutation(mutation: MutationRecord | { type: 'selection'; target: Element }) {
+    ignoreMutation(mutation: MutationRecord) {
         if (this.options.ignoreMutation) {
             return this.options.ignoreMutation(mutation);
         }
@@ -113,7 +124,7 @@ export class VueNodeView implements NodeView {
             }
         }
 
-        if (mutation.type === 'selection') {
+        if ((mutation as unknown as { type: string }).type === 'selection') {
             return false;
         }
 
@@ -128,7 +139,7 @@ export class VueNodeView implements NodeView {
         return true;
     }
 
-    update(node: Node, decorations: Decoration[], innerDecorations: DecorationSet) {
+    update(node: Node, decorations: readonly Decoration[], innerDecorations: DecorationSource) {
         if (this.options.update) {
             const result = this.options.update?.(node, decorations, innerDecorations);
             if (result != null) {

package/src/index.ts

@@ -1,3 +1,5 @@
 /* Copyright 2021, Milkdown by Mirone. */
 export * from './Editor';
-export { nodeMetadata } from './VueNode';
+export * from './types';
+export * from './useEditor';
+export * from './VueNode';

package/src/types.ts

@@ -0,0 +1,50 @@
+/* Copyright 2021, Milkdown by Mirone. */
+import { Ctx, Editor } from '@milkdown/core';
+import type { Mark, Node } from '@milkdown/prose/model';
+import { Decoration, DecorationSource, MarkViewConstructor, NodeView, NodeViewConstructor } from '@milkdown/prose/view';
+import { Ref } from 'vue';
+
+import { AnyVueComponent } from './utils';
+
+export type RenderOptions = Partial<
+    {
+        as: string;
+        update?: (node: Node, decorations: readonly Decoration[], innerDecorations: DecorationSource) => boolean;
+    } & Pick<NodeView, 'ignoreMutation' | 'deselectNode' | 'selectNode' | 'destroy'>
+>;
+
+export type RenderVue<U = never> = <T extends Node | Mark = Node | Mark>(
+    Component: AnyVueComponent,
+    options?: RenderOptions,
+) => (
+    ctx: Ctx,
+) => U extends never
+    ? T extends Node
+        ? NodeViewConstructor
+        : T extends Mark
+        ? MarkViewConstructor
+        : NodeViewConstructor & MarkViewConstructor
+    : U extends Node
+    ? NodeViewConstructor
+    : U extends Mark
+    ? MarkViewConstructor
+    : NodeViewConstructor & MarkViewConstructor;
+
+export type GetEditor = (container: HTMLDivElement, renderVue: RenderVue) => Editor;
+
+export type EditorInfoCtx = {
+    dom: Ref<HTMLDivElement | null>;
+    editor: Ref<Editor | undefined>;
+    loading: Ref<boolean>;
+};
+
+export type EditorInfo = {
+    getEditorCallback: Ref<GetEditor>;
+} & EditorInfoCtx;
+
+export type UseEditorReturn = {
+    loading: Ref<boolean>;
+    getInstance: () => Editor | undefined;
+    getDom: () => HTMLDivElement | null;
+    editor: EditorInfo;
+};

package/src/useEditor.ts

@@ -0,0 +1,25 @@
+/* Copyright 2021, Milkdown by Mirone. */
+
+import { Editor } from '@milkdown/core';
+import { ref } from 'vue';
+
+import { GetEditor, UseEditorReturn } from './types';
+
+export const useEditor = (getEditor: GetEditor): UseEditorReturn => {
+    const dom = ref<HTMLDivElement | null>(null);
+    const editor = ref<Editor>();
+    const loading = ref(true);
+    const getEditorCallback = ref<GetEditor>((...args) => getEditor(...args));
+
+    return {
+        loading,
+        getInstance: () => editor.value,
+        getDom: () => dom.value,
+        editor: {
+            getEditorCallback,
+            dom,
+            editor,
+            loading,
+        },
+    };
+};

package/src/useGetEditor.ts

@@ -0,0 +1,50 @@
+/* Copyright 2021, Milkdown by Mirone. */
+import { Ctx, editorViewCtx, rootCtx } from '@milkdown/core';
+import { MarkViewConstructor, NodeViewConstructor } from '@milkdown/prose/view';
+import { DefineComponent, inject, InjectionKey, onMounted, onUnmounted, ref } from 'vue';
+
+import { editorInfoCtxKey } from '.';
+import { EditorInfoCtx, GetEditor, RenderOptions, RenderVue } from './types';
+
+export const rendererKey: InjectionKey<
+    (component: DefineComponent, options?: RenderOptions) => (ctx: Ctx) => NodeViewConstructor | MarkViewConstructor
+> = Symbol();
+
+export const useGetEditor = (getEditor: GetEditor) => {
+    const renderVue = inject<RenderVue>(rendererKey, () => {
+        throw new Error();
+    });
+    const { dom, loading, editor: editorRef } = inject(editorInfoCtxKey, {} as EditorInfoCtx);
+    const lock = ref(false);
+
+    onMounted(() => {
+        if (!dom.value) return;
+
+        const editor = getEditor(dom.value, renderVue);
+        if (!editor) return;
+
+        if (lock.value) return;
+
+        loading.value = true;
+        lock.value = true;
+
+        editor
+            .create()
+            .then((editor) => {
+                editorRef.value = editor;
+                return;
+            })
+            .finally(() => {
+                loading.value = false;
+                lock.value = false;
+            })
+            .catch((e) => console.error(e));
+    });
+    onUnmounted(() => {
+        const view = editorRef.value?.action((ctx) => ctx.get(editorViewCtx));
+        const root = editorRef.value?.action((ctx) => ctx.get(rootCtx)) as HTMLElement;
+
+        root?.firstChild?.remove();
+        view?.destroy();
+    });
+};