@milkdown/vue 6.5.4 → 7.0.0-next.0

package/lib/Editor.d.ts

@@ -1,12 +1,6 @@
-import type { DefineComponent, InjectionKey } from 'vue';
-import type { EditorRef } from './EditorComponent';
-import type { EditorInfo, EditorInfoCtx } from './types';
+import type { InjectionKey } from 'vue';
+import type { EditorInfoCtx } from './types';
 export declare const editorInfoCtxKey: InjectionKey<EditorInfoCtx>;
-export declare const VueEditor: DefineComponent<{
-    editor: EditorInfo;
-    editorRef?: EditorRef | undefined;
-}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    editor: EditorInfo;
-    editorRef?: EditorRef | undefined;
-}>, {}>;
+export declare const Milkdown: import("vue").DefineComponent<{}, () => JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+export declare const MilkdownProvider: import("vue").DefineComponent<{}, () => JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
 //# 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,KAAK,EAEV,eAAe,EACf,YAAY,EACb,MAAM,KAAK,CAAA;AAcZ,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAA;AAElD,OAAO,KAAK,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAIxD,eAAO,MAAM,gBAAgB,EAAE,YAAY,CAAC,aAAa,CAA8B,CAAA;AA4BvF,eAAO,MAAM,SAAS;YAA6B,UAAU;;;YAAV,UAAU;;OA2D3D,CAAA"}
+{"version":3,"file":"Editor.d.ts","sourceRoot":"","sources":["../src/Editor.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,KAAK,CAAA;AASvC,OAAO,KAAK,EAAE,aAAa,EAAa,MAAM,SAAS,CAAA;AAGvD,eAAO,MAAM,gBAAgB,EAAE,YAAY,CAAC,aAAa,CAA8B,CAAA;AAEvF,eAAO,MAAM,QAAQ,+SAOnB,CAAA;AAEF,eAAO,MAAM,gBAAgB,+SAiB3B,CAAA"}

package/lib/index.d.ts

@@ -1,5 +1,5 @@
 export * from './Editor';
 export * from './types';
 export * from './useEditor';
-export * from './VueNode';
+export * from './useInstance';
 //# 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,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,aAAa,CAAA;AAC3B,cAAc,WAAW,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,aAAa,CAAA;AAC3B,cAAc,eAAe,CAAA"}

package/lib/index.es.js

@@ -1,236 +1,59 @@
-var x = Object.defineProperty;
-var K = (o, e, t) => e in o ? x(o, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[e] = t;
-var m = (o, e, t) => (K(o, typeof e != "symbol" ? e + "" : e, t), t);
-import { inject as v, ref as u, onMounted as S, onUnmounted as C, defineComponent as p, createVNode as l, provide as w, h as j, markRaw as k, Teleport as U, shallowReactive as B, getCurrentInstance as A, onBeforeMount as L, effect as _, isVNode as q } from "vue";
-import { vueRendererCallOutOfScope as G } from "@milkdown/exception";
-import { Mark as T, Node as I } from "@milkdown/prose/model";
-import { customAlphabet as z } from "nanoid";
-const E = Symbol("rendererKey"), F = (o) => {
-  const e = v(E, () => {
-    throw G();
-  }), { dom: t, loading: n, editor: a } = v(O, {}), s = u(!1);
-  S(() => {
-    if (!t.value)
+import { inject as a, onMounted as s, onUnmounted as v, defineComponent as c, createVNode as f, ref as d, provide as m, Fragment as y } from "vue";
+const g = () => {
+  const { dom: e, loading: o, editor: n, editorFactory: r } = a(i, {});
+  return s(() => {
+    if (!e.value)
       return;
-    const i = o(t.value, e);
-    !i || s.value || (n.value = !0, s.value = !0, i.create().then((r) => {
-      a.value = r;
+    const t = r.value(e.value);
+    !t || (o.value = !0, t.create().then((u) => {
+      n.value = u;
     }).finally(() => {
-      n.value = !1, s.value = !1;
-    }).catch((r) => console.error(r)));
-  }), C(() => {
-    var i;
-    (i = a.value) == null || i.destroy();
-  });
-}, V = p({
-  name: "MilkdownDomRoot",
-  setup: (o, {
-    slots: e
+      o.value = !1;
+    }).catch(console.error));
+  }), v(() => {
+    var t;
+    (t = n.value) == null || t.destroy();
+  }), e;
+}, i = Symbol("editorInfoCtxKey"), k = /* @__PURE__ */ c({
+  name: "Milkdown",
+  setup: () => {
+    const e = g();
+    return () => f("div", {
+      "data-milkdown-root": !0,
+      ref: e
+    }, null);
+  }
+}), w = /* @__PURE__ */ c({
+  name: "MilkdownProvider",
+  setup: (e, {
+    slots: o
   }) => {
-    F(o.editor);
-    const t = v(O, {});
-    return o.editorRef && (o.editorRef.get = () => t.editor.value, o.editorRef.dom = () => t.dom.value), () => {
-      var n;
-      return l("div", {
-        ref: t.dom
-      }, [(n = e.default) == null ? void 0 : n.call(e)]);
-    };
-  }
-});
-V.props = ["editor", "editorRef"];
-const R = Symbol("nodeMetadata"), ie = () => v(R), b = p({
-  name: "MilkdownNodeContainer",
-  setup: ({
-    node: o,
-    view: e,
-    getPos: t,
-    decorations: n,
-    ctx: a,
-    as: s
-  }, i) => (w(R, {
-    ctx: a,
-    node: o,
-    view: e,
-    getPos: t,
-    decorations: n
-  }), () => {
-    var r, d;
-    return j(s, {
-      "data-view-container": !0
-    }, (d = (r = i.slots).default) == null ? void 0 : d.call(r));
-  })
-});
-b.props = ["ctx", "editor", "node", "view", "getPos", "decorations", "as"];
-const N = p({
-  name: "MilkdownContent",
-  setup: ({
-    isInline: o
-  }) => () => o ? l("span", {
-    "data-view-content": !0
-  }, null) : l("div", {
-    "data-view-content": !0
-  }, null)
-});
-N.props = ["isInline"];
-const H = z("abcedfghicklmn", 10), J = (o, e, t) => (n, a = {}) => (s) => (i, r, d, f) => new Q(s, n, o, e, t, a, i, r, d, f);
-var P, D;
-class Q {
-  constructor(e, t, n, a, s, i, r, d, f, g) {
-    m(this, "getPortal", () => {
-      const e = this.component, t = this.options.as ? this.options.as : this.isInlineOrMark ? "span" : "div";
-      return k(p({
-        name: "MilkdownPortal",
-        setup: () => () => l(U, {
-          key: this.key,
-          to: this.teleportDOM
-        }, {
-          default: () => [l(b, {
-            as: t,
-            ctx: this.ctx,
-            node: this.node,
-            view: this.view,
-            getPos: this.getPos,
-            decorations: this.decorations
-          }, {
-            default: () => [l(e, null, {
-              default: () => [l(N, {
-                isInline: this.isInlineOrMark
-              }, null)]
-            })]
-          })]
-        })
-      }));
-    });
-    m(this, "selectNode", (P = this.options) == null ? void 0 : P.selectNode);
-    m(this, "deselectNode", (D = this.options) == null ? void 0 : D.deselectNode);
-    this.ctx = e, this.component = t, this.rootInstance = n, this.addPortal = a, this.removePortalByKey = s, this.options = i, this.view = d, this.getPos = f, this.key = H(), this.node = u(r), this.decorations = u(g);
-    const y = i.as ? i.as : this.isInlineOrMark ? "span" : "div";
-    this.teleportDOM = document.createElement(y), this.renderPortal();
-  }
-  get isInlineOrMark() {
-    return this.node.value instanceof T || this.node.value.isInline;
-  }
-  get dom() {
-    return this.teleportDOM.firstElementChild || this.teleportDOM;
-  }
-  get contentDOM() {
-    if (!(this.node instanceof I && this.node.isLeaf))
-      return this.teleportDOM.querySelector("[data-view-content]") || this.dom;
-  }
-  renderPortal() {
-    if (!this.teleportDOM)
-      return;
-    const e = this.getPortal();
-    this.addPortal(e, this.key);
-    const t = this.rootInstance.value;
-    t && t.update();
-  }
-  destroy() {
-    var e, t;
-    (t = (e = this.options).destroy) == null || t.call(e), this.teleportDOM.remove(), this.removePortalByKey(this.key);
-  }
-  ignoreMutation(e) {
-    return this.options.ignoreMutation ? this.options.ignoreMutation(e) : !this.dom || !this.contentDOM || this.node instanceof I && (this.node.isLeaf || this.node.isAtom) ? !0 : !(e.type === "selection" || this.contentDOM === this.dom || this.contentDOM.contains(e.target));
-  }
-  update(e, t, n) {
-    return (() => {
-      var i, r;
-      if (this.options.update) {
-        const d = (r = (i = this.options).update) == null ? void 0 : r.call(i, e, t, n);
-        if (d != null)
-          return d;
-      }
-      return this.node.value.type !== e.type ? !1 : (e === this.node.value && this.decorations.value === t || (this.node.value = e, this.decorations.value = t), !0);
-    })();
-  }
-}
-function W(o) {
-  return typeof o == "function" || Object.prototype.toString.call(o) === "[object Object]" && !q(o);
-}
-const O = Symbol("editorInfoCtxKey"), X = `
-@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} />
-`, Y = `
-@milkdown/vue:
-Passing editor directly to VueEditor will soon be deprecated, please use:
-
-const { editor } = useEditor(/* creator */);
-
-<VueEditor editor={editor} />
-`, Z = p({
-  name: "MilkdownVueRoot",
-  setup: (o) => {
-    const e = B([]), t = A(), n = u(null);
-    L(() => {
-      n.value = t.ctx._;
-    }), C(() => {
-      n.value = null;
-    });
-    const a = k((c, h) => {
-      e.push([h, c]);
-    }), s = k((c) => {
-      const h = e.findIndex((M) => M[0] === c);
-      e.splice(h, 1);
-    }), i = J(n, a, s);
-    w(E, i);
-    const r = Object.hasOwnProperty.call(o.editor, "getInstance"), {
-      getEditorCallback: d,
-      dom: f,
-      editor: g,
-      loading: y
-    } = r ? o.editor.editor : o.editor;
-    return _(() => {
-      r && console.warn(Y), o.editorRef && console.warn(X);
-    }), w(O, {
-      dom: f,
-      editor: g,
-      loading: y
+    const n = d(null), r = d(void 0), t = d(void 0), u = d(!0);
+    return m(i, {
+      loading: u,
+      dom: n,
+      editor: t,
+      editorFactory: r
     }), () => {
-      const c = e.map(([h, M]) => l(M, {
-        key: h
-      }, null));
-      return l(V, {
-        editorRef: o.editorRef,
-        editor: d.value
-      }, W(c) ? c : {
-        default: () => [c]
-      });
+      var l;
+      return f(y, null, [(l = o.default) == null ? void 0 : l.call(o)]);
     };
   }
-});
-Z.props = ["editor", "editorRef"];
-const re = (o) => {
-  const e = u(null), t = u(), n = u(!0), a = u((...s) => o(...s));
-  return {
+}), M = (e) => {
+  const { editorFactory: o, loading: n, editor: r } = a(i);
+  return o.value = e, {
     loading: n,
-    getInstance: () => t.value,
-    getDom: () => e.value,
-    editor: {
-      getEditorCallback: a,
-      dom: e,
-      editor: t,
-      loading: n
-    }
+    get: () => r.value
   };
+}, F = () => {
+  const e = a(i);
+  return [e.loading, () => e.editor.value];
 };
 export {
-  N as Content,
-  Z as VueEditor,
-  b as VueNodeContainer,
-  O as editorInfoCtxKey,
-  R as nodeMetadata,
-  re as useEditor,
-  ie as useNodeCtx
+  k as Milkdown,
+  w as MilkdownProvider,
+  i as editorInfoCtxKey,
+  M as useEditor,
+  F as useInstance
 };
 //# sourceMappingURL=index.es.js.map

package/lib/index.es.js.map

@@ -1 +1 @@
-{"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 type { Ctx } from '@milkdown/core'\nimport { vueRendererCallOutOfScope } from '@milkdown/exception'\nimport type { MarkViewConstructor, NodeViewConstructor } from '@milkdown/prose/view'\nimport type { DefineComponent, InjectionKey } from 'vue'\nimport { inject, onMounted, onUnmounted, ref } from 'vue'\n\nimport type { EditorInfoCtx, GetEditor, RenderOptions, RenderVue } from './types'\nimport { editorInfoCtxKey } from '.'\n\nexport const rendererKey: InjectionKey<\n    (component: DefineComponent, options?: RenderOptions) => (ctx: Ctx) => NodeViewConstructor | MarkViewConstructor\n> = Symbol('rendererKey')\n\nexport const useGetEditor = (getEditor: GetEditor) => {\n  const renderVue = inject<RenderVue>(rendererKey, () => {\n    throw vueRendererCallOutOfScope()\n  })\n  const { dom, loading, editor: editorRef } = inject(editorInfoCtxKey, {} as EditorInfoCtx)\n  const lock = ref(false)\n\n  onMounted(() => {\n    if (!dom.value)\n      return\n\n    const editor = getEditor(dom.value, renderVue)\n    if (!editor)\n      return\n\n    if (lock.value)\n      return\n\n    loading.value = true\n    lock.value = true\n\n    editor\n      .create()\n      .then((editor) => {\n        editorRef.value = editor\n      })\n      .finally(() => {\n        loading.value = false\n        lock.value = false\n      })\n      .catch(e => console.error(e))\n  })\n  onUnmounted(() => {\n    editorRef.value?.destroy()\n  })\n}\n","/* Copyright 2021, Milkdown by Mirone. */\nimport type { Editor } from '@milkdown/core'\nimport { defineComponent, h, inject } from 'vue'\n\nimport { editorInfoCtxKey } from './Editor'\nimport type { EditorInfoCtx, GetEditor } from './types'\nimport { useGetEditor } from './useGetEditor'\n\nexport const EditorComponent = defineComponent<{ editor: GetEditor; editorRef?: EditorRef }>({\n  name: 'MilkdownDomRoot',\n  setup: (props, { slots }) => {\n    useGetEditor(props.editor)\n    const ctx = inject(editorInfoCtxKey, {} as EditorInfoCtx)\n\n    if (props.editorRef) {\n      // eslint-disable-next-line vue/no-mutating-props\n      props.editorRef.get = () => ctx.editor.value\n      // eslint-disable-next-line vue/no-mutating-props\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 interface EditorRef { get: () => Editor | undefined; dom: () => HTMLDivElement | null }\n","/* Copyright 2021, Milkdown by Mirone. */\n/* eslint-disable vue/one-component-per-file */\nimport type { Ctx } from '@milkdown/core'\nimport type { Mark, Node } from '@milkdown/prose/model'\nimport type { Decoration, EditorView } from '@milkdown/prose/view'\nimport type { InjectionKey, Ref } from 'vue'\nimport { defineComponent, h, inject, provide } from 'vue'\n\nexport interface NodeContext<T extends Node | Mark = Node | Mark> {\n  ctx: Ctx\n  node: Ref<T>\n  view: EditorView\n  getPos: T extends Mark ? boolean : T extends Node ? () => number : boolean | (() => number)\n  decorations: Ref<readonly Decoration[]>\n}\n\nexport const nodeMetadata: InjectionKey<NodeContext> = Symbol('nodeMetadata')\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: 'MilkdownNodeContainer',\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: 'MilkdownContent',\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 type { 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 type { ComponentInternalInstance, DefineComponent, Ref } from 'vue'\nimport { Teleport, defineComponent, h, markRaw, ref } from 'vue'\n\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    = (\n      rootInstance: Ref<null | ComponentInternalInstance>,\n      addPortal: (portal: DefineComponent, key: string) => void,\n      removePortalByKey: (key: string) => void,\n    ) =>\n      (\n        component: DefineComponent,\n        options: RenderOptions = {},\n      ): ((ctx: Ctx) => NodeViewConstructor | MarkViewConstructor) =>\n        ctx =>\n          (node, view, getPos, decorations) =>\n            new VueNodeView(\n              ctx,\n              component,\n              rootInstance,\n              addPortal,\n              removePortalByKey,\n              options,\n              node,\n              view,\n              getPos,\n              decorations,\n            )\n\nexport class VueNodeView implements NodeView {\n  teleportDOM: HTMLElement\n  key: string\n\n  get isInlineOrMark() {\n    return this.node.value instanceof Mark || this.node.value.isInline\n  }\n\n  private node: Ref<Node | Mark>\n  private decorations: Ref<readonly Decoration[]>\n\n  constructor(\n    private ctx: Ctx,\n    private component: DefineComponent,\n    private rootInstance: Ref<null | ComponentInternalInstance>,\n    private addPortal: (portal: DefineComponent, key: string) => void,\n    private removePortalByKey: (key: string) => void,\n    private options: RenderOptions,\n    node: Node | Mark,\n    private view: EditorView,\n    private getPos: boolean | (() => number),\n    decorations: readonly Decoration[],\n  ) {\n    this.key = nanoid()\n    this.node = ref(node)\n    this.decorations = ref(decorations)\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    return this.teleportDOM.querySelector<HTMLElement>('[data-view-content]') || this.dom\n  }\n\n  getPortal = (): DefineComponent => {\n    const CustomComponent = this.component\n    const elementName = this.options.as ? this.options.as : this.isInlineOrMark ? 'span' : 'div'\n    return markRaw(\n      defineComponent({\n        name: 'MilkdownPortal',\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      }) as DefineComponent,\n    )\n  }\n\n  renderPortal() {\n    if (!this.teleportDOM)\n      return\n\n    const Portal = this.getPortal()\n    this.addPortal(Portal, this.key)\n    const instance = this.rootInstance.value\n    if (instance)\n      instance.update()\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    if (this.node instanceof Node) {\n      if (this.node.isLeaf || this.node.isAtom)\n        return true\n    }\n\n    if ((mutation as unknown as { type: string }).type === 'selection')\n      return false\n\n    if (this.contentDOM === this.dom)\n      return false\n\n    if (this.contentDOM.contains(mutation.target))\n      return false\n\n    return true\n  }\n\n  update(node: Node, decorations: readonly Decoration[], innerDecorations: DecorationSource) {\n    const innerUpdate = () => {\n      if (this.options.update) {\n        const result = this.options.update?.(node, decorations, innerDecorations)\n        if (result != null)\n          return result\n      }\n      if (this.node.value.type !== node.type)\n        return false\n\n      if (node === this.node.value && this.decorations.value === decorations)\n        return true\n\n      this.node.value = node\n      this.decorations.value = decorations\n      return true\n    }\n\n    const shouldUpdate = innerUpdate()\n\n    return shouldUpdate\n  }\n\n  selectNode = this.options?.selectNode\n\n  deselectNode = this.options?.deselectNode\n}\n","/* Copyright 2021, Milkdown by Mirone. */\nimport type {\n  ComponentInternalInstance,\n  DefineComponent,\n  InjectionKey,\n} from 'vue'\nimport {\n  defineComponent,\n  effect,\n  getCurrentInstance,\n  h,\n  markRaw,\n  onBeforeMount,\n  onUnmounted,\n  provide,\n  ref,\n  shallowReactive,\n} from 'vue'\n\nimport type { EditorRef } from './EditorComponent'\nimport { EditorComponent } from './EditorComponent'\nimport type { EditorInfo, EditorInfoCtx } from './types'\nimport { rendererKey } from './useGetEditor'\nimport { createVueView } from './VueNodeView'\n\nexport const editorInfoCtxKey: InjectionKey<EditorInfoCtx> = Symbol('editorInfoCtxKey')\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: 'MilkdownVueRoot',\n  setup: (props) => {\n    const portals = shallowReactive<PortalPair[]>([])\n\n    const instance = getCurrentInstance()\n\n    const rootInstance = ref<null | ComponentInternalInstance>(null)\n\n    onBeforeMount(() => {\n      rootInstance.value = (instance as ComponentInternalInstance & { ctx: { _: ComponentInternalInstance } }).ctx\n        ._ as ComponentInternalInstance\n    })\n\n    onUnmounted(() => {\n      rootInstance.value = 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(rootInstance, 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    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 type { Editor } from '@milkdown/core'\nimport { ref } from 'vue'\n\nimport type { 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":["rendererKey","useGetEditor","getEditor","renderVue","inject","vueRendererCallOutOfScope","dom","loading","editorRef","editorInfoCtxKey","lock","ref","onMounted","editor","e","onUnmounted","_a","EditorComponent","defineComponent","name","setup","props","slots","ctx","get","value","_createVNode","default","nodeMetadata","Symbol","useNodeCtx","VueNodeContainer","node","view","getPos","decorations","as","context","provide","h","Content","isInline","nanoid","customAlphabet","createVueView","rootInstance","addPortal","removePortalByKey","component","options","VueNodeView","constructor","getPortal","CustomComponent","elementName","isInlineOrMark","markRaw","Teleport","key","teleportDOM","selectNode","deselectNode","_b","document","createElement","renderPortal","Mark","firstElementChild","contentDOM","Node","isLeaf","querySelector","Portal","instance","update","destroy","remove","ignoreMutation","mutation","isAtom","type","contains","target","innerDecorations","result","refDeprecatedInfo","compositionDeprecatedInfo","VueEditor","portals","shallowReactive","getCurrentInstance","onBeforeMount","_","push","index","findIndex","p","splice","usingDeprecatedCompositionAPI","Object","hasOwnProperty","call","getEditorCallback","effect","console","warn","portalElements","map","id","P","useEditor","args"],"mappings":"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"}
+{"version":3,"file":"index.es.js","sources":["../src/useGetEditor.ts","../src/Editor.tsx","../src/useEditor.ts","../src/useInstance.ts"],"sourcesContent":["/* Copyright 2021, Milkdown by Mirone. */\nimport { inject, onMounted, onUnmounted } from 'vue'\n\nimport type { EditorInfoCtx } from './types'\nimport { editorInfoCtxKey } from '.'\n\nexport const useGetEditor = () => {\n  const { dom, loading, editor: editorRef, editorFactory: getEditor } = inject(editorInfoCtxKey, {} as EditorInfoCtx)\n\n  onMounted(() => {\n    if (!dom.value)\n      return\n\n    const editor = getEditor.value!(dom.value)\n    if (!editor)\n      return\n\n    loading.value = true\n    editor\n      .create()\n      .then((editor) => {\n        editorRef.value = editor\n      })\n      .finally(() => {\n        loading.value = false\n      })\n      .catch(console.error)\n  })\n  onUnmounted(() => {\n    editorRef.value?.destroy()\n  })\n\n  return dom\n}\n","/* Copyright 2021, Milkdown by Mirone. */\n/* eslint-disable vue/one-component-per-file */\nimport type { Editor } from '@milkdown/core'\nimport type { InjectionKey } from 'vue'\nimport {\n  Fragment,\n  defineComponent,\n  h,\n  provide,\n  ref,\n} from 'vue'\n\nimport type { EditorInfoCtx, GetEditor } from './types'\nimport { useGetEditor } from './useGetEditor'\n\nexport const editorInfoCtxKey: InjectionKey<EditorInfoCtx> = Symbol('editorInfoCtxKey')\n\nexport const Milkdown = defineComponent({\n  name: 'Milkdown',\n  setup: () => {\n    const domRef = useGetEditor()\n\n    return () => <div data-milkdown-root ref={domRef} />\n  },\n})\n\nexport const MilkdownProvider = defineComponent({\n  name: 'MilkdownProvider',\n  setup: (_, { slots }) => {\n    const dom = ref<HTMLDivElement | null>(null)\n    const editorFactory = ref<GetEditor | undefined>(undefined)\n    const editor = ref<Editor | undefined>(undefined)\n    const loading = ref(true)\n\n    provide(editorInfoCtxKey, {\n      loading,\n      dom,\n      editor,\n      editorFactory,\n    })\n\n    return () => <>{slots.default?.()}</>\n  },\n})\n","/* Copyright 2021, Milkdown by Mirone. */\n\nimport { inject } from 'vue'\nimport { editorInfoCtxKey } from './Editor'\n\nimport type { GetEditor, UseEditorReturn } from './types'\n\nexport const useEditor = (getEditor: GetEditor): UseEditorReturn => {\n  const { editorFactory, loading, editor } = inject(editorInfoCtxKey)!\n\n  editorFactory.value = getEditor\n\n  return {\n    loading,\n    get: () => editor.value,\n  }\n}\n","/* Copyright 2021, Milkdown by Mirone. */\nimport type { Editor } from '@milkdown/core'\nimport type { Ref } from 'vue'\nimport { inject } from 'vue'\nimport { editorInfoCtxKey } from './Editor'\n\nexport type Instance = [Ref<true>, () => undefined] | [Ref<false>, () => Editor]\n\nexport const useInstance = (): Instance => {\n  const editorInfo = inject(editorInfoCtxKey)!\n\n  return [editorInfo.loading, () => editorInfo.editor.value] as Instance\n}\n"],"names":["useGetEditor","dom","loading","editorRef","getEditor","inject","editorInfoCtxKey","onMounted","editor","onUnmounted","_a","Symbol","Milkdown","defineComponent","name","setup","domRef","_createVNode","MilkdownProvider","_","slots","ref","editorFactory","undefined","provide","default","useEditor","useInstance","editorInfo"],"mappings":";AAMO,MAAMA,IAAe,MAAM;AAC1B,QAAA,EAAE,KAAAC,GAAK,SAAAC,GAAS,QAAQC,GAAW,eAAeC,MAAcC,EAAOC,GAAkB,CAAmB,CAAA;AAElH,SAAAC,EAAU,MAAM;AACd,QAAI,CAACN,EAAI;AACP;AAEF,UAAMO,IAASJ,EAAU,MAAOH,EAAI,KAAK;AACzC,IAAI,CAACO,MAGLN,EAAQ,QAAQ,IAChBM,EACG,OAAO,EACP,KAAK,CAACA,MAAW;AAChB,MAAAL,EAAU,QAAQK;AAAAA,IAAA,CACnB,EACA,QAAQ,MAAM;AACb,MAAAN,EAAQ,QAAQ;AAAA,IACjB,CAAA,EACA,MAAM,QAAQ,KAAK;AAAA,EAAA,CACvB,GACDO,EAAY,MAAM;;AAChB,KAAAC,IAAAP,EAAU,UAAV,QAAAO,EAAiB;AAAA,EAAQ,CAC1B,GAEMT;AACT,GClBaK,IAAgDK,OAAO,kBAAkB,GAEzEC,IAAWC,gBAAAA,EAAgB;AAAA,EACtCC,MAAM;AAAA,EACNC,OAAO,MAAM;AACX,UAAMC,IAAShB;AAEf,WAAO,MAAAiB,EAAA,OAAA;AAAA,MAAA,sBAAA;AAAA,MAAA,KAAmCD;AAAAA,IAAU,GAAA,IAAA;AAAA,EACtD;AACF,CAAC,GAEYE,IAAmBL,gBAAAA,EAAgB;AAAA,EAC9CC,MAAM;AAAA,EACNC,OAAO,CAACI,GAAG;AAAA,IAAEC,OAAAA;AAAAA,EAAM,MAAM;AACvB,UAAMnB,IAAMoB,EAA2B,IAAI,GACrCC,IAAgBD,EAA2BE,MAAS,GACpDf,IAASa,EAAwBE,MAAS,GAC1CrB,IAAUmB,EAAI,EAAI;AAExBG,WAAAA,EAAQlB,GAAkB;AAAA,MACxBJ,SAAAA;AAAAA,MACAD,KAAAA;AAAAA,MACAO,QAAAA;AAAAA,MACAc,eAAAA;AAAAA,IACF,CAAC,GAEM,MAAA;;AAASF,aAAAA,EAAAA,GAAAA,MAAAA,EAAAA,IAAAA,EAAMK,YAANL,gBAAAA,EAAAA,KAAAA,EAAiB,CAAI;AAAA;AAAA,EACvC;AACF,CAAC,GCpCYM,IAAY,CAACtB,MAA0C;AAClE,QAAM,EAAE,eAAAkB,GAAe,SAAApB,GAAS,QAAAM,EAAO,IAAIH,EAAOC,CAAgB;AAElE,SAAAgB,EAAc,QAAQlB,GAEf;AAAA,IACL,SAAAF;AAAA,IACA,KAAK,MAAMM,EAAO;AAAA,EAAA;AAEtB,GCRamB,IAAc,MAAgB;AACnC,QAAAC,IAAavB,EAAOC,CAAgB;AAE1C,SAAO,CAACsB,EAAW,SAAS,MAAMA,EAAW,OAAO,KAAK;AAC3D;"}

package/lib/types.d.ts

@@ -1,26 +1,14 @@
-import type { Ctx, Editor } from '@milkdown/core';
-import type { Mark, Node } from '@milkdown/prose/model';
-import type { Decoration, DecorationSource, MarkViewConstructor, NodeView, NodeViewConstructor } from '@milkdown/prose/view';
+import type { Editor } from '@milkdown/core';
 import type { Ref } from 'vue';
-import type { 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 GetEditor = (container: HTMLDivElement) => Editor;
 export interface EditorInfoCtx {
     dom: Ref<HTMLDivElement | null>;
     editor: Ref<Editor | undefined>;
+    editorFactory: Ref<GetEditor | undefined>;
     loading: Ref<boolean>;
 }
-export type EditorInfo = {
-    getEditorCallback: Ref<GetEditor>;
-} & EditorInfoCtx;
 export interface UseEditorReturn {
     loading: Ref<boolean>;
-    getInstance: () => Editor | undefined;
-    getDom: () => HTMLDivElement | null;
-    editor: EditorInfo;
+    get: () => Editor | undefined;
 }
 //# sourceMappingURL=types.d.ts.map

package/lib/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAA;AACjD,OAAO,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAA;AACvD,OAAO,KAAK,EAAE,UAAU,EAAE,gBAAgB,EAAE,mBAAmB,EAAE,QAAQ,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAA;AAC5H,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAE9B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAE9C,MAAM,MAAM,aAAa,GAAG,OAAO,CAC/B;IACE,EAAE,EAAE,MAAM,CAAA;IACV,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,WAAW,EAAE,SAAS,UAAU,EAAE,EAAE,gBAAgB,EAAE,gBAAgB,KAAK,OAAO,CAAA;CACzG,GAAG,IAAI,CAAC,QAAQ,EAAE,gBAAgB,GAAG,cAAc,GAAG,YAAY,GAAG,SAAS,CAAC,CACnF,CAAA;AAED,MAAM,MAAM,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,CACH,GAAG,EAAE,GAAG,KACL,CAAC,SAAS,KAAK,GAChB,CAAC,SAAS,IAAI,GACZ,mBAAmB,GACnB,CAAC,SAAS,IAAI,GACZ,mBAAmB,GACnB,mBAAmB,GAAG,mBAAmB,GAC7C,CAAC,SAAS,IAAI,GACZ,mBAAmB,GACnB,CAAC,SAAS,IAAI,GACZ,mBAAmB,GACnB,mBAAmB,GAAG,mBAAmB,CAAA;AAEjD,MAAM,MAAM,SAAS,GAAG,CAAC,SAAS,EAAE,cAAc,EAAE,SAAS,EAAE,SAAS,KAAK,MAAM,CAAA;AAEnF,MAAM,WAAW,aAAa;IAC5B,GAAG,EAAE,GAAG,CAAC,cAAc,GAAG,IAAI,CAAC,CAAA;IAC/B,MAAM,EAAE,GAAG,CAAC,MAAM,GAAG,SAAS,CAAC,CAAA;IAC/B,OAAO,EAAE,GAAG,CAAC,OAAO,CAAC,CAAA;CACtB;AAED,MAAM,MAAM,UAAU,GAAG;IACvB,iBAAiB,EAAE,GAAG,CAAC,SAAS,CAAC,CAAA;CAClC,GAAG,aAAa,CAAA;AAEjB,MAAM,WAAW,eAAe;IAC9B,OAAO,EAAE,GAAG,CAAC,OAAO,CAAC,CAAA;IACrB,WAAW,EAAE,MAAM,MAAM,GAAG,SAAS,CAAA;IACrC,MAAM,EAAE,MAAM,cAAc,GAAG,IAAI,CAAA;IACnC,MAAM,EAAE,UAAU,CAAA;CACnB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAA;AAC5C,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAE9B,MAAM,MAAM,SAAS,GAAG,CAAC,SAAS,EAAE,cAAc,KAAK,MAAM,CAAA;AAE7D,MAAM,WAAW,aAAa;IAC5B,GAAG,EAAE,GAAG,CAAC,cAAc,GAAG,IAAI,CAAC,CAAA;IAC/B,MAAM,EAAE,GAAG,CAAC,MAAM,GAAG,SAAS,CAAC,CAAA;IAC/B,aAAa,EAAE,GAAG,CAAC,SAAS,GAAG,SAAS,CAAC,CAAA;IACzC,OAAO,EAAE,GAAG,CAAC,OAAO,CAAC,CAAA;CACtB;AAED,MAAM,WAAW,eAAe;IAC9B,OAAO,EAAE,GAAG,CAAC,OAAO,CAAC,CAAA;IACrB,GAAG,EAAE,MAAM,MAAM,GAAG,SAAS,CAAA;CAC9B"}

package/lib/useEditor.d.ts.map

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

package/lib/useGetEditor.d.ts

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

package/lib/useGetEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useGetEditor.d.ts","sourceRoot":"","sources":["../src/useGetEditor.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,gBAAgB,CAAA;AAEzC,OAAO,KAAK,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAA;AACpF,OAAO,KAAK,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,KAAK,CAAA;AAGxD,OAAO,KAAK,EAAiB,SAAS,EAAE,aAAa,EAAa,MAAM,SAAS,CAAA;AAGjF,eAAO,MAAM,WAAW,EAAE,YAAY,CAClC,CAAC,SAAS,EAAE,eAAe,EAAE,OAAO,CAAC,EAAE,aAAa,KAAK,CAAC,GAAG,EAAE,GAAG,KAAK,mBAAmB,GAAG,mBAAmB,CAC3F,CAAA;AAEzB,eAAO,MAAM,YAAY,cAAe,SAAS,SAmChD,CAAA"}
+{"version":3,"file":"useGetEditor.d.ts","sourceRoot":"","sources":["../src/useGetEditor.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,YAAY,gDA2BxB,CAAA"}

package/lib/useInstance.d.ts

@@ -0,0 +1,5 @@
+import type { Editor } from '@milkdown/core';
+import type { Ref } from 'vue';
+export type Instance = [Ref<true>, () => undefined] | [Ref<false>, () => Editor];
+export declare const useInstance: () => Instance;
+//# sourceMappingURL=useInstance.d.ts.map

package/lib/useInstance.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useInstance.d.ts","sourceRoot":"","sources":["../src/useInstance.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAA;AAC5C,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAI9B,MAAM,MAAM,QAAQ,GAAG,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,MAAM,SAAS,CAAC,GAAG,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,MAAM,MAAM,CAAC,CAAA;AAEhF,eAAO,MAAM,WAAW,QAAO,QAI9B,CAAA"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@milkdown/vue",
   "type": "module",
-  "version": "6.5.4",
+  "version": "7.0.0-next.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -21,20 +21,18 @@
     "src"
   ],
   "peerDependencies": {
-    "@milkdown/core": "^6.0.1",
-    "@milkdown/prose": "^6.0.1",
+    "@milkdown/core": "^7.0.0-next.0",
+    "@milkdown/prose": "^7.0.0-next.0",
     "vue": "^3.0.0"
   },
   "dependencies": {
-    "nanoid": "^4.0.0",
     "tslib": "^2.4.0",
-    "@milkdown/exception": "6.5.4",
-    "@milkdown/utils": "6.5.4"
+    "@milkdown/utils": "7.0.0-next.0"
   },
   "devDependencies": {
     "vue": "^3.2.38",
-    "@milkdown/core": "6.5.4",
-    "@milkdown/prose": "6.5.4"
+    "@milkdown/core": "7.0.0-next.0",
+    "@milkdown/prose": "7.0.0-next.0"
   },
   "nx": {
     "targets": {

package/src/Editor.tsx

@@ -1,114 +1,44 @@
 /* Copyright 2021, Milkdown by Mirone. */
-import type {
-  ComponentInternalInstance,
-  DefineComponent,
-  InjectionKey,
-} from 'vue'
+/* eslint-disable vue/one-component-per-file */
+import type { Editor } from '@milkdown/core'
+import type { InjectionKey } from 'vue'
 import {
+  Fragment,
   defineComponent,
-  effect,
-  getCurrentInstance,
   h,
-  markRaw,
-  onBeforeMount,
-  onUnmounted,
   provide,
   ref,
-  shallowReactive,
 } from 'vue'
 
-import type { EditorRef } from './EditorComponent'
-import { EditorComponent } from './EditorComponent'
-import type { EditorInfo, EditorInfoCtx } from './types'
-import { rendererKey } from './useGetEditor'
-import { createVueView } from './VueNodeView'
+import type { EditorInfoCtx, GetEditor } from './types'
+import { useGetEditor } from './useGetEditor'
 
 export const editorInfoCtxKey: InjectionKey<EditorInfoCtx> = Symbol('editorInfoCtxKey')
 
-const refDeprecatedInfo = `
-@milkdown/vue:
-Passing ref to VueEditor will soon be deprecated, please use:
-
-const { editor, getInstance, getDom, loading } = useEditor(/* creator */);
+export const Milkdown = defineComponent({
+  name: 'Milkdown',
+  setup: () => {
+    const domRef = useGetEditor()
 
-effect(() => {
-    if (!loading) {
-        const editor = getInstance();
-        const rootDOM = getDom();
-    }
+    return () => <div data-milkdown-root ref={domRef} />
+  },
 })
 
-<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: EditorInfo; editorRef?: EditorRef }>({
-  name: 'MilkdownVueRoot',
-  setup: (props) => {
-    const portals = shallowReactive<PortalPair[]>([])
-
-    const instance = getCurrentInstance()
-
-    const rootInstance = ref<null | ComponentInternalInstance>(null)
-
-    onBeforeMount(() => {
-      rootInstance.value = (instance as ComponentInternalInstance & { ctx: { _: ComponentInternalInstance } }).ctx
-        ._ as ComponentInternalInstance
-    })
-
-    onUnmounted(() => {
-      rootInstance.value = null
-    })
-
-    const addPortal = markRaw((component: DefineComponent, key: string) => {
-      portals.push([key, component])
-    })
-    const removePortalByKey = markRaw((key: string) => {
-      const index = portals.findIndex(p => p[0] === key)
-      portals.splice(index, 1)
-    })
-    const renderVue = createVueView(rootInstance, 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)
-    })
+export const MilkdownProvider = defineComponent({
+  name: 'MilkdownProvider',
+  setup: (_, { slots }) => {
+    const dom = ref<HTMLDivElement | null>(null)
+    const editorFactory = ref<GetEditor | undefined>(undefined)
+    const editor = ref<Editor | undefined>(undefined)
+    const loading = ref(true)
 
     provide(editorInfoCtxKey, {
+      loading,
       dom,
       editor,
-      loading,
+      editorFactory,
     })
 
-    return () => {
-      const portalElements = portals.map(([id, P]) => <P key={id} />)
-      return (
-                <EditorComponent editorRef={props.editorRef} editor={getEditorCallback.value}>
-                    {portalElements}
-                </EditorComponent>
-      )
-    }
+    return () => <>{slots.default?.()}</>
   },
 })
-VueEditor.props = ['editor', 'editorRef']

package/src/index.ts

@@ -2,4 +2,4 @@
 export * from './Editor'
 export * from './types'
 export * from './useEditor'
-export * from './VueNode'
+export * from './useInstance'

package/src/types.ts

@@ -1,50 +1,17 @@
 /* Copyright 2021, Milkdown by Mirone. */
-import type { Ctx, Editor } from '@milkdown/core'
-import type { Mark, Node } from '@milkdown/prose/model'
-import type { Decoration, DecorationSource, MarkViewConstructor, NodeView, NodeViewConstructor } from '@milkdown/prose/view'
+import type { Editor } from '@milkdown/core'
 import type { Ref } from 'vue'
 
-import type { 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 GetEditor = (container: HTMLDivElement) => Editor
 
 export interface EditorInfoCtx {
   dom: Ref<HTMLDivElement | null>
   editor: Ref<Editor | undefined>
+  editorFactory: Ref<GetEditor | undefined>
   loading: Ref<boolean>
 }
 
-export type EditorInfo = {
-  getEditorCallback: Ref<GetEditor>
-} & EditorInfoCtx
-
 export interface UseEditorReturn {
   loading: Ref<boolean>
-  getInstance: () => Editor | undefined
-  getDom: () => HTMLDivElement | null
-  editor: EditorInfo
+  get: () => Editor | undefined
 }

package/src/useEditor.ts

@@ -1,25 +1,17 @@
 /* Copyright 2021, Milkdown by Mirone. */
 
-import type { Editor } from '@milkdown/core'
-import { ref } from 'vue'
+import { inject } from 'vue'
+import { editorInfoCtxKey } from './Editor'
 
 import type { 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))
+  const { editorFactory, loading, editor } = inject(editorInfoCtxKey)!
+
+  editorFactory.value = getEditor
 
   return {
     loading,
-    getInstance: () => editor.value,
-    getDom: () => dom.value,
-    editor: {
-      getEditorCallback,
-      dom,
-      editor,
-      loading,
-    },
+    get: () => editor.value,
   }
 }

package/src/useGetEditor.ts

@@ -1,38 +1,21 @@
 /* Copyright 2021, Milkdown by Mirone. */
-import type { Ctx } from '@milkdown/core'
-import { vueRendererCallOutOfScope } from '@milkdown/exception'
-import type { MarkViewConstructor, NodeViewConstructor } from '@milkdown/prose/view'
-import type { DefineComponent, InjectionKey } from 'vue'
-import { inject, onMounted, onUnmounted, ref } from 'vue'
+import { inject, onMounted, onUnmounted } from 'vue'
 
-import type { EditorInfoCtx, GetEditor, RenderOptions, RenderVue } from './types'
+import type { EditorInfoCtx } from './types'
 import { editorInfoCtxKey } from '.'
 
-export const rendererKey: InjectionKey<
-    (component: DefineComponent, options?: RenderOptions) => (ctx: Ctx) => NodeViewConstructor | MarkViewConstructor
-> = Symbol('rendererKey')
-
-export const useGetEditor = (getEditor: GetEditor) => {
-  const renderVue = inject<RenderVue>(rendererKey, () => {
-    throw vueRendererCallOutOfScope()
-  })
-  const { dom, loading, editor: editorRef } = inject(editorInfoCtxKey, {} as EditorInfoCtx)
-  const lock = ref(false)
+export const useGetEditor = () => {
+  const { dom, loading, editor: editorRef, editorFactory: getEditor } = inject(editorInfoCtxKey, {} as EditorInfoCtx)
 
   onMounted(() => {
     if (!dom.value)
       return
 
-    const editor = getEditor(dom.value, renderVue)
+    const editor = getEditor.value!(dom.value)
     if (!editor)
       return
 
-    if (lock.value)
-      return
-
     loading.value = true
-    lock.value = true
-
     editor
       .create()
       .then((editor) => {
@@ -40,11 +23,12 @@ export const useGetEditor = (getEditor: GetEditor) => {
       })
       .finally(() => {
         loading.value = false
-        lock.value = false
       })
-      .catch(e => console.error(e))
+      .catch(console.error)
   })
   onUnmounted(() => {
     editorRef.value?.destroy()
   })
+
+  return dom
 }

package/src/useInstance.ts

@@ -0,0 +1,13 @@
+/* Copyright 2021, Milkdown by Mirone. */
+import type { Editor } from '@milkdown/core'
+import type { Ref } from 'vue'
+import { inject } from 'vue'
+import { editorInfoCtxKey } from './Editor'
+
+export type Instance = [Ref<true>, () => undefined] | [Ref<false>, () => Editor]
+
+export const useInstance = (): Instance => {
+  const editorInfo = inject(editorInfoCtxKey)!
+
+  return [editorInfo.loading, () => editorInfo.editor.value] as Instance
+}

package/lib/EditorComponent.d.ts

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

package/lib/EditorComponent.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"EditorComponent.d.ts","sourceRoot":"","sources":["../src/EditorComponent.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAA;AAI5C,OAAO,KAAK,EAAiB,SAAS,EAAE,MAAM,SAAS,CAAA;AAGvD,eAAO,MAAM,eAAe;YAA6B,SAAS;;;YAAT,SAAS;;OAehE,CAAA;AAGF,MAAM,WAAW,SAAS;IAAG,GAAG,EAAE,MAAM,MAAM,GAAG,SAAS,CAAC;IAAC,GAAG,EAAE,MAAM,cAAc,GAAG,IAAI,CAAA;CAAE"}

package/lib/VueNode.d.ts

@@ -1,25 +0,0 @@
-import type { Ctx } from '@milkdown/core';
-import type { Mark, Node } from '@milkdown/prose/model';
-import type { Decoration, EditorView } from '@milkdown/prose/view';
-import type { InjectionKey, Ref } from 'vue';
-export interface NodeContext<T extends Node | Mark = Node | Mark> {
-    ctx: Ctx;
-    node: Ref<T>;
-    view: EditorView;
-    getPos: T extends Mark ? boolean : T extends Node ? () => number : boolean | (() => number);
-    decorations: Ref<readonly Decoration[]>;
-}
-export declare const nodeMetadata: InjectionKey<NodeContext>;
-export type UseNodeCtx = <T extends Node | Mark = Node | Mark>() => NodeContext<T>;
-export declare const useNodeCtx: UseNodeCtx;
-export declare const VueNodeContainer: import("vue").DefineComponent<NodeContext<Node | Mark> & {
-    as: string;
-}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<NodeContext<Node | Mark> & {
-    as: string;
-}>, {}>;
-export declare const Content: import("vue").DefineComponent<{
-    isInline?: boolean | undefined;
-}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    isInline?: boolean | undefined;
-}>, {}>;
-//# sourceMappingURL=VueNode.d.ts.map

package/lib/VueNode.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"VueNode.d.ts","sourceRoot":"","sources":["../src/VueNode.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,gBAAgB,CAAA;AACzC,OAAO,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAA;AACvD,OAAO,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAA;AAClE,OAAO,KAAK,EAAE,YAAY,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAG5C,MAAM,WAAW,WAAW,CAAC,CAAC,SAAS,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI;IAC9D,GAAG,EAAE,GAAG,CAAA;IACR,IAAI,EAAE,GAAG,CAAC,CAAC,CAAC,CAAA;IACZ,IAAI,EAAE,UAAU,CAAA;IAChB,MAAM,EAAE,CAAC,SAAS,IAAI,GAAG,OAAO,GAAG,CAAC,SAAS,IAAI,GAAG,MAAM,MAAM,GAAG,OAAO,GAAG,CAAC,MAAM,MAAM,CAAC,CAAA;IAC3F,WAAW,EAAE,GAAG,CAAC,SAAS,UAAU,EAAE,CAAC,CAAA;CACxC;AAED,eAAO,MAAM,YAAY,EAAE,YAAY,CAAC,WAAW,CAA0B,CAAA;AAE7E,MAAM,MAAM,UAAU,GAAG,CAAC,CAAC,SAAS,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,OAAO,WAAW,CAAC,CAAC,CAAC,CAAA;AAClF,eAAO,MAAM,UAAU,EAAE,UAA6D,CAAA;AAEtF,eAAO,MAAM,gBAAgB;QAAuC,MAAM;;QAAN,MAAM;OAYxE,CAAA;AAGF,eAAO,MAAM,OAAO;;;;OAKlB,CAAA"}

package/lib/VueNodeView.d.ts

@@ -1,35 +0,0 @@
-import type { Ctx } from '@milkdown/core';
-import { Mark, Node } from '@milkdown/prose/model';
-import type { Decoration, DecorationSource, EditorView, MarkViewConstructor, NodeView, NodeViewConstructor } from '@milkdown/prose/view';
-import type { ComponentInternalInstance, DefineComponent, Ref } from 'vue';
-export type RenderOptions = Partial<{
-    as: string;
-    update?: (node: Node, decorations: readonly Decoration[], innerDecorations: DecorationSource) => boolean;
-} & Pick<NodeView, 'ignoreMutation' | 'deselectNode' | 'selectNode' | 'destroy'>>;
-export declare const createVueView: (rootInstance: Ref<null | ComponentInternalInstance>, 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;
-    private rootInstance;
-    private addPortal;
-    private removePortalByKey;
-    private options;
-    private view;
-    private getPos;
-    teleportDOM: HTMLElement;
-    key: string;
-    get isInlineOrMark(): boolean;
-    private node;
-    private decorations;
-    constructor(ctx: Ctx, component: DefineComponent, rootInstance: Ref<null | ComponentInternalInstance>, 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;
-    getPortal: () => DefineComponent;
-    renderPortal(): void;
-    destroy(): void;
-    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 +0,0 @@
-{"version":3,"file":"VueNodeView.d.ts","sourceRoot":"","sources":["../src/VueNodeView.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,gBAAgB,CAAA;AACzC,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAA;AAClD,OAAO,KAAK,EACV,UAAU,EACV,gBAAgB,EAChB,UAAU,EACV,mBAAmB,EACnB,QAAQ,EACR,mBAAmB,EACpB,MAAM,sBAAsB,CAAA;AAE7B,OAAO,KAAK,EAAE,yBAAyB,EAAE,eAAe,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAO1E,MAAM,MAAM,aAAa,GAAG,OAAO,CAC/B;IACE,EAAE,EAAE,MAAM,CAAA;IACV,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,WAAW,EAAE,SAAS,UAAU,EAAE,EAAE,gBAAgB,EAAE,gBAAgB,KAAK,OAAO,CAAA;CACzG,GAAG,IAAI,CAAC,QAAQ,EAAE,gBAAgB,GAAG,cAAc,GAAG,YAAY,GAAG,SAAS,CAAC,CACnF,CAAA;AAED,eAAO,MAAM,aAAa,iBAEN,IAAI,IAAI,GAAG,yBAAyB,CAAC,sBAC/B,eAAe,OAAO,MAAM,KAAK,IAAI,2BAChC,MAAM,KAAK,IAAI,iBAG3B,eAAe,YACjB,aAAa,WACd,GAAG,KAAK,mBAAmB,GAAG,mBAcjC,CAAA;AAEb,qBAAa,WAAY,YAAW,QAAQ;IAYxC,OAAO,CAAC,GAAG;IACX,OAAO,CAAC,SAAS;IACjB,OAAO,CAAC,YAAY;IACpB,OAAO,CAAC,SAAS;IACjB,OAAO,CAAC,iBAAiB;IACzB,OAAO,CAAC,OAAO;IAEf,OAAO,CAAC,IAAI;IACZ,OAAO,CAAC,MAAM;IAnBhB,WAAW,EAAE,WAAW,CAAA;IACxB,GAAG,EAAE,MAAM,CAAA;IAEX,IAAI,cAAc,YAEjB;IAED,OAAO,CAAC,IAAI,CAAkB;IAC9B,OAAO,CAAC,WAAW,CAA4B;gBAGrC,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,eAAe,EAC1B,YAAY,EAAE,GAAG,CAAC,IAAI,GAAG,yBAAyB,CAAC,EACnD,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,EAC9B,IAAI,EAAE,IAAI,GAAG,IAAI,EACT,IAAI,EAAE,UAAU,EAChB,MAAM,EAAE,OAAO,GAAG,CAAC,MAAM,MAAM,CAAC,EACxC,WAAW,EAAE,SAAS,UAAU,EAAE;IAUpC,IAAI,GAAG,gBAEN;IAED,IAAI,UAAU,4BAKb;IAED,SAAS,QAAO,eAAe,CA0B9B;IAED,YAAY;IAWZ,OAAO;IAMP,cAAc,CAAC,QAAQ,EAAE,cAAc;IAwBvC,MAAM,CAAC,IAAI,EAAE,IAAI,EAAE,WAAW,EAAE,SAAS,UAAU,EAAE,EAAE,gBAAgB,EAAE,gBAAgB;IAuBzF,UAAU,2BAA2B;IAErC,YAAY,2BAA6B;CAC1C"}

package/lib/utils.d.ts

@@ -1,9 +0,0 @@
-import type { DefineComponent } from 'vue';
-type Prepend<T, U extends unknown[]> = [T, ...U];
-type Keys_<T extends Record<string, unknown>, U extends PropertyKey[]> = {
-    [P in keyof T]: Record<string, unknown> extends Omit<T, P> ? [P] : Prepend<P, Keys_<Omit<T, P>, U>>;
-}[keyof T];
-export type Keys<T extends Record<string, unknown>> = Keys_<T, []>;
-export type AnyVueComponent = DefineComponent<any, any, any, any, any, any, any, any, any, any, any, any>;
-export {};
-//# sourceMappingURL=utils.d.ts.map

package/lib/utils.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,KAAK,CAAA;AAE1C,KAAK,OAAO,CAAC,CAAC,EAAE,CAAC,SAAS,OAAO,EAAE,IAAI,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,CAAA;AAChD,KAAK,KAAK,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,CAAC,SAAS,WAAW,EAAE,IAAI;KACtE,CAAC,IAAI,MAAM,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,OAAO,CAAC,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;CACpG,CAAC,MAAM,CAAC,CAAC,CAAA;AACV,MAAM,MAAM,IAAI,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,IAAI,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC,CAAA;AAElE,MAAM,MAAM,eAAe,GAAG,eAAe,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,CAAA"}

package/src/EditorComponent.tsx

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

package/src/VueNode.tsx

@@ -1,43 +0,0 @@
-/* Copyright 2021, Milkdown by Mirone. */
-/* eslint-disable vue/one-component-per-file */
-import type { Ctx } from '@milkdown/core'
-import type { Mark, Node } from '@milkdown/prose/model'
-import type { Decoration, EditorView } from '@milkdown/prose/view'
-import type { InjectionKey, Ref } from 'vue'
-import { defineComponent, h, inject, provide } from 'vue'
-
-export interface NodeContext<T extends Node | Mark = Node | Mark> {
-  ctx: Ctx
-  node: Ref<T>
-  view: EditorView
-  getPos: T extends Mark ? boolean : T extends Node ? () => number : boolean | (() => number)
-  decorations: Ref<readonly Decoration[]>
-}
-
-export const nodeMetadata: InjectionKey<NodeContext> = Symbol('nodeMetadata')
-
-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: 'MilkdownNodeContainer',
-  setup: ({ node, view, getPos, decorations, ctx, as }, context) => {
-    provide(nodeMetadata, {
-      ctx,
-      node,
-      view,
-      getPos,
-      decorations,
-    })
-    return () => h(as, { 'data-view-container': true }, context.slots.default?.())
-  },
-})
-VueNodeContainer.props = ['ctx', 'editor', 'node', 'view', 'getPos', 'decorations', 'as']
-
-export const Content = defineComponent<{ isInline?: boolean }>({
-  name: 'MilkdownContent',
-  setup: ({ isInline }) => {
-    return () => (isInline ? <span data-view-content /> : <div data-view-content />)
-  },
-})
-Content.props = ['isInline']

package/src/VueNodeView.tsx

@@ -1,189 +0,0 @@
-/* Copyright 2021, Milkdown by Mirone. */
-import type { Ctx } from '@milkdown/core'
-import { Mark, Node } from '@milkdown/prose/model'
-import type {
-  Decoration,
-  DecorationSource,
-  EditorView,
-  MarkViewConstructor,
-  NodeView,
-  NodeViewConstructor,
-} from '@milkdown/prose/view'
-import { customAlphabet } from 'nanoid'
-import type { ComponentInternalInstance, DefineComponent, Ref } from 'vue'
-import { Teleport, defineComponent, h, markRaw, ref } from 'vue'
-
-import { Content, VueNodeContainer } from './VueNode'
-
-const nanoid = customAlphabet('abcedfghicklmn', 10)
-
-export type RenderOptions = Partial<
-    {
-      as: string
-      update?: (node: Node, decorations: readonly Decoration[], innerDecorations: DecorationSource) => boolean
-    } & Pick<NodeView, 'ignoreMutation' | 'deselectNode' | 'selectNode' | 'destroy'>
->
-
-export const createVueView
-    = (
-      rootInstance: Ref<null | ComponentInternalInstance>,
-      addPortal: (portal: DefineComponent, key: string) => void,
-      removePortalByKey: (key: string) => void,
-    ) =>
-      (
-        component: DefineComponent,
-        options: RenderOptions = {},
-      ): ((ctx: Ctx) => NodeViewConstructor | MarkViewConstructor) =>
-        ctx =>
-          (node, view, getPos, decorations) =>
-            new VueNodeView(
-              ctx,
-              component,
-              rootInstance,
-              addPortal,
-              removePortalByKey,
-              options,
-              node,
-              view,
-              getPos,
-              decorations,
-            )
-
-export class VueNodeView implements NodeView {
-  teleportDOM: HTMLElement
-  key: string
-
-  get isInlineOrMark() {
-    return this.node.value instanceof Mark || this.node.value.isInline
-  }
-
-  private node: Ref<Node | Mark>
-  private decorations: Ref<readonly Decoration[]>
-
-  constructor(
-    private ctx: Ctx,
-    private component: DefineComponent,
-    private rootInstance: Ref<null | ComponentInternalInstance>,
-    private addPortal: (portal: DefineComponent, key: string) => void,
-    private removePortalByKey: (key: string) => void,
-    private options: RenderOptions,
-    node: Node | Mark,
-    private view: EditorView,
-    private getPos: boolean | (() => number),
-    decorations: readonly Decoration[],
-  ) {
-    this.key = nanoid()
-    this.node = ref(node)
-    this.decorations = ref(decorations)
-    const elementName = options.as ? options.as : this.isInlineOrMark ? 'span' : 'div'
-    this.teleportDOM = document.createElement(elementName)
-    this.renderPortal()
-  }
-
-  get dom() {
-    return (this.teleportDOM.firstElementChild || this.teleportDOM) as HTMLElement
-  }
-
-  get contentDOM() {
-    if (this.node instanceof Node && this.node.isLeaf)
-      return undefined
-
-    return this.teleportDOM.querySelector<HTMLElement>('[data-view-content]') || this.dom
-  }
-
-  getPortal = (): DefineComponent => {
-    const CustomComponent = this.component
-    const elementName = this.options.as ? this.options.as : this.isInlineOrMark ? 'span' : 'div'
-    return markRaw(
-      defineComponent({
-        name: 'MilkdownPortal',
-        setup: () => {
-          return () => (
-                        <Teleport key={this.key} to={this.teleportDOM}>
-                            <VueNodeContainer
-                                as={elementName}
-                                ctx={this.ctx}
-                                node={this.node}
-                                view={this.view}
-                                getPos={this.getPos}
-                                decorations={this.decorations}
-                            >
-                                <CustomComponent>
-                                    <Content isInline={this.isInlineOrMark} />
-                                </CustomComponent>
-                            </VueNodeContainer>
-                        </Teleport>
-          )
-        },
-      }) as DefineComponent,
-    )
-  }
-
-  renderPortal() {
-    if (!this.teleportDOM)
-      return
-
-    const Portal = this.getPortal()
-    this.addPortal(Portal, this.key)
-    const instance = this.rootInstance.value
-    if (instance)
-      instance.update()
-  }
-
-  destroy() {
-    this.options.destroy?.()
-    this.teleportDOM.remove()
-    this.removePortalByKey(this.key)
-  }
-
-  ignoreMutation(mutation: MutationRecord) {
-    if (this.options.ignoreMutation)
-      return this.options.ignoreMutation(mutation)
-
-    if (!this.dom || !this.contentDOM)
-      return true
-
-    if (this.node instanceof Node) {
-      if (this.node.isLeaf || this.node.isAtom)
-        return true
-    }
-
-    if ((mutation as unknown as { type: string }).type === 'selection')
-      return false
-
-    if (this.contentDOM === this.dom)
-      return false
-
-    if (this.contentDOM.contains(mutation.target))
-      return false
-
-    return true
-  }
-
-  update(node: Node, decorations: readonly Decoration[], innerDecorations: DecorationSource) {
-    const innerUpdate = () => {
-      if (this.options.update) {
-        const result = this.options.update?.(node, decorations, innerDecorations)
-        if (result != null)
-          return result
-      }
-      if (this.node.value.type !== node.type)
-        return false
-
-      if (node === this.node.value && this.decorations.value === decorations)
-        return true
-
-      this.node.value = node
-      this.decorations.value = decorations
-      return true
-    }
-
-    const shouldUpdate = innerUpdate()
-
-    return shouldUpdate
-  }
-
-  selectNode = this.options?.selectNode
-
-  deselectNode = this.options?.deselectNode
-}

package/src/utils.ts

@@ -1,11 +0,0 @@
-/* Copyright 2021, Milkdown by Mirone. */
-
-import type { DefineComponent } from 'vue'
-
-type Prepend<T, U extends unknown[]> = [T, ...U]
-type Keys_<T extends Record<string, unknown>, U extends PropertyKey[]> = {
-  [P in keyof T]: Record<string, unknown> extends Omit<T, P> ? [P] : Prepend<P, Keys_<Omit<T, P>, U>>;
-}[keyof T]
-export type Keys<T extends Record<string, unknown>> = Keys_<T, []>
-
-export type AnyVueComponent = DefineComponent<any, any, any, any, any, any, any, any, any, any, any, any>