@milkdown/vue 5.2.1 → 5.3.0

package/lib/Editor.d.ts

@@ -1,11 +1,12 @@
-import { Editor } from '@milkdown/core';
+import { Ctx, Editor } from '@milkdown/core';
 import { ViewFactory } from '@milkdown/prose';
-import { DefineComponent, Ref } from 'vue';
-declare type GetEditor = (container: HTMLDivElement, renderVue: (Component: DefineComponent) => ViewFactory) => Editor;
+import { ComponentInternalInstance, DefineComponent, Ref } from 'vue';
+import { AnyVueComponent } from './utils';
+declare type GetEditor = (container: HTMLDivElement, renderVue: (Component: AnyVueComponent) => (ctx: Ctx) => ViewFactory) => Editor;
 export declare const EditorComponent: DefineComponent<{
     editor: GetEditor;
     editorRef?: Ref<EditorRef> | undefined;
-}, () => JSX.Element, {}, import("vue").ComputedOptions, import("vue").MethodOptions, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+}, {}, {}, {}, {}, 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;
 }>, {}>;
@@ -13,13 +14,14 @@ export declare type EditorRef = {
     get: () => Editor | undefined;
     dom: () => HTMLDivElement | null;
 };
+export declare const getRootInstance: () => ComponentInternalInstance | null;
 export declare const VueEditor: DefineComponent<{
     editor: GetEditor;
     editorRef?: Ref<EditorRef> | undefined;
-}, () => JSX.Element, {}, import("vue").ComputedOptions, import("vue").MethodOptions, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+}, {}, {}, {}, {}, 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 const useEditor: (getEditor: GetEditor) => (container: HTMLDivElement, renderVue: (Component: DefineComponent) => ViewFactory) => Editor;
+export declare const useEditor: (getEditor: GetEditor) => (container: HTMLDivElement, renderVue: (Component: AnyVueComponent) => (ctx: Ctx) => ViewFactory) => Editor;
 export {};
 //# 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,MAAM,EAA0B,MAAM,gBAAgB,CAAC;AAChE,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,EACH,eAAe,EAUf,GAAG,EAGN,MAAM,KAAK,CAAC;AAOb,aAAK,SAAS,GAAG,CAAC,SAAS,EAAE,cAAc,EAAE,SAAS,EAAE,CAAC,SAAS,EAAE,eAAe,KAAK,WAAW,KAAK,MAAM,CAAC;AA8B/G,eAAO,MAAM,eAAe;YAAqC,SAAS;;;YAAT,SAAS;;OAUxE,CAAC;AAGH,oBAAY,SAAS,GAAG;IAAE,GAAG,EAAE,MAAM,MAAM,GAAG,SAAS,CAAC;IAAC,GAAG,EAAE,MAAM,cAAc,GAAG,IAAI,CAAA;CAAE,CAAC;AAE5F,eAAO,MAAM,SAAS;YAAqC,SAAS;;;YAAT,SAAS;;OAkBlE,CAAC;AAGH,eAAO,MAAM,SAAS,cAAe,SAAS,wDAlEsB,eAAe,KAAK,WAAW,WAoElG,CAAC"}
+{"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;AAK1C,aAAK,SAAS,GAAG,CACb,SAAS,EAAE,cAAc,EACzB,SAAS,EAAE,CAAC,SAAS,EAAE,eAAe,KAAK,CAAC,GAAG,EAAE,GAAG,KAAK,WAAW,KACnE,MAAM,CAAC;AA8BZ,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,wDAjGnB,eAAe,WAAW,GAAG,KAAK,WAAW,WAmGvE,CAAC"}

package/lib/VueNode.d.ts

@@ -1,27 +1,19 @@
 /// <reference types="prosemirror-model" />
+import { Ctx } from '@milkdown/core';
 import { Decoration, EditorView, Mark, Node } from '@milkdown/prose';
 import { InjectionKey } from 'vue';
 export declare type NodeContext = {
+    ctx: Ctx;
     node: Node | Mark;
     view: EditorView;
     getPos: boolean | (() => number);
     decorations: Decoration[];
 };
 export declare const nodeMetadata: InjectionKey<NodeContext>;
-export declare const VueNodeContainer: import("vue").DefineComponent<{
-    node: Node | Mark;
-    view: EditorView;
-    getPos: boolean | (() => number);
-    decorations: Decoration[];
-}, () => JSX.Element, {}, import("vue").ComputedOptions, import("vue").MethodOptions, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    node: Node | Mark;
-    view: EditorView;
-    getPos: boolean | (() => number);
-    decorations: Decoration[];
-}>, {}>;
+export declare const VueNodeContainer: import("vue").DefineComponent<NodeContext, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<NodeContext>, {}>;
 export declare const Content: import("vue").DefineComponent<{
-    dom?: HTMLElement | undefined;
-}, () => JSX.Element, {}, import("vue").ComputedOptions, import("vue").MethodOptions, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    dom?: HTMLElement | undefined;
+    isMark?: boolean | undefined;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+    isMark?: boolean | undefined;
 }>, {}>;
 //# sourceMappingURL=VueNode.d.ts.map

package/lib/VueNode.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VueNode.d.ts","sourceRoot":"","sources":["../src/VueNode.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AACrE,OAAO,EAAgC,YAAY,EAA6B,MAAM,KAAK,CAAC;AAE5F,oBAAY,WAAW,GAAG;IACtB,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;UARnB,IAAI,GAAG,IAAI;UACX,UAAU;YACR,OAAO,GAAG,CAAC,MAAM,MAAM,CAAC;iBACnB,UAAU,EAAE;;UAHnB,IAAI,GAAG,IAAI;UACX,UAAU;YACR,OAAO,GAAG,CAAC,MAAM,MAAM,CAAC;iBACnB,UAAU,EAAE;OAa3B,CAAC;AAGH,eAAO,MAAM,OAAO;;;;OAOlB,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,UAAU,EAAE,UAAU,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AACrE,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,0SAY3B,CAAC;AAGH,eAAO,MAAM,OAAO;;;;OAKlB,CAAC"}

package/lib/VueNodeView.d.ts

@@ -1,9 +1,11 @@
 /// <reference types="prosemirror-model" />
+import { Ctx } from '@milkdown/core';
 import type { Decoration, EditorView, NodeView, ViewFactory } from '@milkdown/prose';
 import { Mark, Node } from '@milkdown/prose';
 import { DefineComponent } from 'vue';
-export declare const createVueView: (addPortal: (portal: DefineComponent, key: string) => void, removePortalByKey: (key: string) => void) => (component: DefineComponent) => ViewFactory;
+export declare const createVueView: (addPortal: (portal: DefineComponent, key: string) => void, removePortalByKey: (key: string) => void) => (component: DefineComponent) => (ctx: Ctx) => ViewFactory;
 export declare class VueNodeView implements NodeView {
+    private ctx;
     private component;
     private addPortal;
     private removePortalByKey;
@@ -11,15 +13,17 @@ export declare class VueNodeView implements NodeView {
     private view;
     private getPos;
     private decorations;
-    dom: HTMLElement | undefined;
-    contentDOM: HTMLElement | undefined;
+    teleportDOM: HTMLElement;
     key: string;
-    constructor(component: DefineComponent, addPortal: (portal: DefineComponent, key: string) => void, removePortalByKey: (key: string) => void, node: Node | Mark, view: EditorView, getPos: boolean | (() => number), decorations: Decoration[]);
+    constructor(ctx: Ctx, component: DefineComponent, addPortal: (portal: DefineComponent, key: string) => void, removePortalByKey: (key: string) => void, node: Node | Mark, view: EditorView, getPos: boolean | (() => number), decorations: Decoration[]);
+    get dom(): Element;
+    get contentDOM(): Element | null;
     renderPortal(): void;
     destroy(): void;
     ignoreMutation(mutation: MutationRecord | {
         type: 'selection';
         target: Element;
     }): boolean;
+    update(node: Node | Mark, decorations: Decoration[]): boolean;
 }
 //# 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,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACrF,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAE7C,OAAO,EAAE,eAAe,EAAgC,MAAM,KAAK,CAAC;AAMpE,eAAO,MAAM,aAAa,uBACD,eAAe,OAAO,MAAM,KAAK,IAAI,2BAA2B,MAAM,KAAK,IAAI,iBACxF,eAAe,KAAG,WAE+D,CAAC;AAElG,qBAAa,WAAY,YAAW,QAAQ;IAMpC,OAAO,CAAC,SAAS;IACjB,OAAO,CAAC,SAAS;IACjB,OAAO,CAAC,iBAAiB;IACzB,OAAO,CAAC,IAAI;IACZ,OAAO,CAAC,IAAI;IACZ,OAAO,CAAC,MAAM;IACd,OAAO,CAAC,WAAW;IAXvB,GAAG,EAAE,WAAW,GAAG,SAAS,CAAC;IAC7B,UAAU,EAAE,WAAW,GAAG,SAAS,CAAC;IACpC,GAAG,EAAE,MAAM,CAAC;gBAGA,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,IAAI,EAAE,IAAI,GAAG,IAAI,EACjB,IAAI,EAAE,UAAU,EAChB,MAAM,EAAE,OAAO,GAAG,CAAC,MAAM,MAAM,CAAC,EAChC,WAAW,EAAE,UAAU,EAAE;IAmBrC,YAAY;IAwBZ,OAAO;IAMP,cAAc,CAAC,QAAQ,EAAE,cAAc,GAAG;QAAE,IAAI,EAAE,WAAW,CAAC;QAAC,MAAM,EAAE,OAAO,CAAA;KAAE;CAMnF"}
+{"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,UAAU,EAAE,UAAU,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACrF,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAE7C,OAAO,EAAE,eAAe,EAAyC,MAAM,KAAK,CAAC;AAO7E,eAAO,MAAM,aAAa,uBACD,eAAe,OAAO,MAAM,KAAK,IAAI,2BAA2B,MAAM,KAAK,IAAI,iBACxF,eAAe,WAAU,GAAG,KAAK,WAGqD,CAAC;AAEvG,qBAAa,WAAY,YAAW,QAAQ;IAKpC,OAAO,CAAC,GAAG;IACX,OAAO,CAAC,SAAS;IACjB,OAAO,CAAC,SAAS;IACjB,OAAO,CAAC,iBAAiB;IACzB,OAAO,CAAC,IAAI;IACZ,OAAO,CAAC,IAAI;IACZ,OAAO,CAAC,MAAM;IACd,OAAO,CAAC,WAAW;IAXvB,WAAW,EAAE,WAAW,CAAC;IACzB,GAAG,EAAE,MAAM,CAAC;gBAGA,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,IAAI,EAAE,IAAI,GAAG,IAAI,EACjB,IAAI,EAAE,UAAU,EAChB,MAAM,EAAE,OAAO,GAAG,CAAC,MAAM,MAAM,CAAC,EAChC,WAAW,EAAE,UAAU,EAAE;IAOrC,IAAI,GAAG,YAEN;IAED,IAAI,UAAU,mBAMb;IAED,YAAY;IA+BZ,OAAO;IAIP,cAAc,CAAC,QAAQ,EAAE,cAAc,GAAG;QAAE,IAAI,EAAE,WAAW,CAAC;QAAC,MAAM,EAAE,OAAO,CAAA;KAAE;IA0BhF,MAAM,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,EAAE,WAAW,EAAE,UAAU,EAAE;CAatD"}

package/lib/index.cjs.js

@@ -1,3 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});exports[Symbol.toStringTag]="Module";var e=require("vue"),m=require("@milkdown/core"),u=require("@milkdown/prose"),C=require("nanoid");const R=n=>n.map(t=>t[0]).join(`
-`),h=e.defineComponent(n=>{const t=e.shallowRef([]),a=e.ref(""),i=e.shallowRef(()=>[]);return e.watch(()=>R(n.portals),o=>{if(o!==a.value){a.value=o;const r=n.portals.map(d=>d[1]);t.value=r}}),e.nextTick(()=>{i.value=()=>t.value.map(o=>e.createVNode(o,null,null))}),()=>e.createVNode(e.Fragment,null,[i.value()])});h.props=["portals"];const p=Symbol(),v=e.defineComponent(({node:n,view:t,getPos:a,decorations:i},o)=>(e.provide(p,{node:n,view:t,getPos:a,decorations:i}),()=>{var r,d,s;return e.createVNode(e.Fragment,null,[(s=(d=(r=o.slots).default)==null?void 0:d.call(r))!=null?s:[]])}));v.props=["editor","node","view","getPos","decorations"];const V=e.defineComponent(n=>{const t=e.ref(null);return e.watchEffect(()=>{!n.dom||!t.value||t.value.appendChild(n.dom)}),()=>e.createVNode("div",{ref:t},null)});V.props=["dom"];const g=C.customAlphabet("abcedfghicklmn",10),N=(n,t)=>a=>(i,o,r,d)=>new P(a,n,t,i,o,r,d);class P{constructor(t,a,i,o,r,d,s){this.component=t,this.addPortal=a,this.removePortalByKey=i,this.node=o,this.view=r,this.getPos=d,this.decorations=s,this.key=g();const l=document.createElement(o instanceof u.Mark?"span":"div");l.classList.add("dom-wrapper");const c=o instanceof u.Node&&o.isLeaf?void 0:document.createElement(o instanceof u.Mark?"span":"div");c&&(c.classList.add("content-dom"),l.appendChild(c)),this.dom=l,this.contentDOM=c,this.renderPortal()}renderPortal(){if(!this.dom)return;const t=this.component,a=e.defineComponent(()=>()=>e.createVNode(e.Teleport,{to:this.dom},{default:()=>[e.createVNode(v,{key:this.key,node:this.node,view:this.view,getPos:this.getPos,decorations:this.decorations},{default:()=>[e.createVNode(t,null,{default:()=>[e.createVNode(V,{dom:this.contentDOM},null)]})]})]}));this.addPortal(a,this.key)}destroy(){this.dom=void 0,this.contentDOM=void 0,this.removePortalByKey(this.key)}ignoreMutation(t){return this.contentDOM?!this.contentDOM.contains(t.target):!0}}const w=Symbol(),k=n=>{const t=e.ref(null),a=e.inject(w,()=>{throw new Error}),i=e.markRaw({});return e.onMounted(()=>{!t.value||n(t.value,a).create().then(o=>{i.editor=o}).catch(o=>console.error(o))}),e.onUnmounted(()=>{var d,s,l;const o=(d=i.editor)==null?void 0:d.action(c=>c.get(m.editorViewCtx)),r=(s=i.editor)==null?void 0:s.action(c=>c.get(m.rootCtx));(l=r==null?void 0:r.firstChild)==null||l.remove(),o==null||o.destroy()}),{divRef:t,editorRef:i}},f=e.defineComponent(n=>{const t=k(n.editor);return n.editorRef&&(n.editorRef.value={get:()=>t.editorRef.editor,dom:()=>t.divRef.value}),()=>e.createVNode("div",{ref:t.divRef},null)});f.props=["editor","editorRef"];const y=e.defineComponent(n=>{const t=e.shallowReactive([]),a=e.markRaw((r,d)=>{t.push([d,r])}),i=e.markRaw(r=>{const d=t.findIndex(s=>s[0]===r);t.splice(d,1)}),o=N(a,i);return e.provide(w,o),()=>e.createVNode(e.Fragment,null,[e.createVNode(h,{portals:t},null),e.createVNode(f,{editorRef:n.editorRef,editor:n.editor},null)])});y.props=["editor","editorRef"];const M=n=>(...t)=>n(...t);exports.EditorComponent=f;exports.VueEditor=y;exports.nodeMetadata=p;exports.useEditor=M;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});exports[Symbol.toStringTag]="Module";var e=require("vue"),m=require("@milkdown/core"),u=require("@milkdown/prose"),V=require("nanoid");const p=Symbol(),v=e.defineComponent({name:"milkdown-node-container",setup:({node:o,view:t,getPos:n,decorations:r,ctx:s},a)=>(e.provide(p,{ctx:s,node:o,view:t,getPos:n,decorations:r}),()=>{var i,d;return e.createVNode("div",{"data-view-container":!0},[(d=(i=a.slots).default)==null?void 0:d.call(i)])})});v.props=["ctx","editor","node","view","getPos","decorations"];const w=e.defineComponent({name:"milkdown-content",setup:({isMark:o})=>()=>o?e.createVNode("span",{"data-view-content":!0},null):e.createVNode("div",{"data-view-content":!0},null)});w.props=["isMark"];const g=V.customAlphabet("abcedfghicklmn",10),R=(o,t)=>n=>r=>(s,a,i,d)=>new C(r,n,o,t,s,a,i,d);class C{constructor(t,n,r,s,a,i,d,c){this.ctx=t,this.component=n,this.addPortal=r,this.removePortalByKey=s,this.node=a,this.view=i,this.getPos=d,this.decorations=c,this.key=g(),this.teleportDOM=document.createElement(a instanceof u.Mark?"span":"div"),this.renderPortal()}get dom(){return this.teleportDOM.firstElementChild||this.teleportDOM}get contentDOM(){return this.node instanceof u.Node&&this.node.isLeaf?null:this.teleportDOM.querySelector("[data-view-content]")||this.dom}renderPortal(){if(!this.teleportDOM)return;const t=this.component,n=e.defineComponent({name:"milkdown-portal",setup:()=>()=>e.createVNode(e.Teleport,{key:this.key,to:this.teleportDOM},{default:()=>[e.createVNode(v,{ctx:this.ctx,node:this.node,view:this.view,getPos:this.getPos,decorations:this.decorations},{default:()=>[e.createVNode(t,null,{default:()=>[e.createVNode(w,{isMark:this.node instanceof u.Mark},null)]})]})]})});this.addPortal(e.markRaw(n),this.key);const r=k();r&&r.update()}destroy(){this.removePortalByKey(this.key)}ignoreMutation(t){return!this.dom||!this.contentDOM||this.node instanceof u.Node&&(this.node.isLeaf||this.node.isAtom)?!0:!(t.type==="selection"||this.contentDOM===this.dom||this.contentDOM.contains(t.target))}update(t,n){return this.node.type!==t.type?!1:(t===this.node&&this.decorations===n||(this.node=t,this.decorations=n),!0)}}function N(o){return typeof o=="function"||Object.prototype.toString.call(o)==="[object Object]"&&!e.isVNode(o)}const y=Symbol(),P=o=>{const t=e.ref(null),n=e.inject(y,()=>{throw new Error}),r=e.markRaw({});return e.onMounted(()=>{!t.value||o(t.value,n).create().then(s=>{r.editor=s}).catch(s=>console.error(s))}),e.onUnmounted(()=>{var i,d,c;const s=(i=r.editor)==null?void 0:i.action(l=>l.get(m.editorViewCtx)),a=(d=r.editor)==null?void 0:d.action(l=>l.get(m.rootCtx));(c=a==null?void 0:a.firstChild)==null||c.remove(),s==null||s.destroy()}),{divRef:t,editorRef:r}},f=e.defineComponent({name:"milkdown-dom-root",setup:(o,{slots:t})=>{const n=P(o.editor);return o.editorRef&&(o.editorRef.value={get:()=>n.editorRef.editor,dom:()=>n.divRef.value}),()=>{var r;return e.createVNode("div",{ref:n.divRef},[(r=t.default)==null?void 0:r.call(t)])}}});f.props=["editor","editorRef"];const h={instance:null},k=()=>h.instance,M=e.defineComponent({name:"milkdown-vue-root",setup:o=>{const t=e.shallowReactive([]),n=e.getCurrentInstance();e.onBeforeMount(()=>{h.instance=n.ctx._}),e.onUnmounted(()=>{h.instance=null});const r=e.markRaw((i,d)=>{t.push([d,i])}),s=e.markRaw(i=>{const d=t.findIndex(c=>c[0]===i);t.splice(d,1)}),a=R(r,s);return e.provide(y,a),()=>{const i=t.map(([d,c])=>e.createVNode(c,{key:d},null));return e.createVNode(f,{editorRef:o.editorRef,editor:o.editor},N(i)?i:{default:()=>[i]})}}});M.props=["editor","editorRef"];const O=o=>(...t)=>o(...t);exports.EditorComponent=f;exports.VueEditor=M;exports.getRootInstance=k;exports.nodeMetadata=p;exports.useEditor=O;
 //# sourceMappingURL=index.cjs.js.map

package/lib/index.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":["../src/Portals.tsx","../src/VueNode.tsx","../src/VueNodeView.tsx","../src/Editor.tsx"],"sourcesContent":["/* Copyright 2021, Milkdown by Mirone. */\nimport { DefineComponent, defineComponent, Fragment, h, nextTick, ref, shallowRef, watch } from 'vue';\nexport type PortalPair = [key: string, component: DefineComponent];\n\nconst getId = (pairs: PortalPair[]) => pairs.map((p) => p[0]).join('\\n');\n\nexport const Portals = defineComponent((props: { portals: PortalPair[] }) => {\n    const portalComponents = shallowRef<Array<DefineComponent>>([]);\n    const prev = ref<string>('');\n    const renderList = shallowRef<() => JSX.Element[]>(() => []);\n\n    watch(\n        () => getId(props.portals),\n        (ids) => {\n            if (ids !== prev.value) {\n                prev.value = ids;\n                const next = props.portals.map((p) => p[1]);\n                portalComponents.value = next;\n            }\n        },\n    );\n\n    nextTick(() => {\n        renderList.value = () => portalComponents.value.map((P) => <P />);\n    });\n\n    return () => {\n        return <>{renderList.value()}</>;\n    };\n});\nPortals.props = ['portals'];\n","/* Copyright 2021, Milkdown by Mirone. */\nimport { Decoration, EditorView, Mark, Node } from '@milkdown/prose';\nimport { defineComponent, Fragment, h, InjectionKey, provide, ref, watchEffect } from 'vue';\n\nexport type NodeContext = {\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(({ node, view, getPos, decorations }: NodeContext, context) => {\n    provide(nodeMetadata, {\n        node,\n        view,\n        getPos,\n        decorations,\n    });\n    return () => <>{context.slots.default?.() ?? []}</>;\n});\nVueNodeContainer.props = ['editor', 'node', 'view', 'getPos', 'decorations'];\n\nexport const Content = defineComponent((props: { dom?: HTMLElement }) => {\n    const containerRef = ref<HTMLDivElement | null>(null);\n    watchEffect(() => {\n        if (!props.dom || !containerRef.value) return;\n        containerRef.value.appendChild(props.dom);\n    });\n    return () => <div ref={containerRef} />;\n});\nContent.props = ['dom'];\n","/* Copyright 2021, Milkdown by Mirone. */\nimport type { Decoration, EditorView, NodeView, ViewFactory } from '@milkdown/prose';\nimport { Mark, Node } from '@milkdown/prose';\nimport { customAlphabet } from 'nanoid';\nimport { DefineComponent, defineComponent, h, Teleport } from 'vue';\n\nimport { Content, VueNodeContainer } from './VueNode';\n\nconst nanoid = customAlphabet('abcedfghicklmn', 10);\n\nexport const createVueView =\n    (addPortal: (portal: DefineComponent, key: string) => void, removePortalByKey: (key: string) => void) =>\n    (component: DefineComponent): ViewFactory =>\n    (node, view, getPos, decorations) =>\n        new VueNodeView(component, addPortal, removePortalByKey, node, view, getPos, decorations);\n\nexport class VueNodeView implements NodeView {\n    dom: HTMLElement | undefined;\n    contentDOM: HTMLElement | undefined;\n    key: string;\n\n    constructor(\n        private component: DefineComponent,\n        private addPortal: (portal: DefineComponent, key: string) => void,\n        private removePortalByKey: (key: string) => void,\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 dom = document.createElement(node instanceof Mark ? 'span' : 'div');\n        dom.classList.add('dom-wrapper');\n\n        const contentDOM =\n            node instanceof Node && node.isLeaf\n                ? undefined\n                : document.createElement(node instanceof Mark ? 'span' : 'div');\n        if (contentDOM) {\n            contentDOM.classList.add('content-dom');\n            dom.appendChild(contentDOM);\n        }\n        this.dom = dom;\n        this.contentDOM = contentDOM;\n        this.renderPortal();\n    }\n\n    renderPortal() {\n        if (!this.dom) return;\n\n        const CustomComponent = this.component;\n        const Portal = defineComponent(() => {\n            return () => (\n                <Teleport to={this.dom}>\n                    <VueNodeContainer\n                        key={this.key}\n                        node={this.node}\n                        view={this.view}\n                        getPos={this.getPos}\n                        decorations={this.decorations}\n                    >\n                        <CustomComponent>\n                            <Content dom={this.contentDOM} />\n                        </CustomComponent>\n                    </VueNodeContainer>\n                </Teleport>\n            );\n        });\n        this.addPortal(Portal, this.key);\n    }\n\n    destroy() {\n        this.dom = undefined;\n        this.contentDOM = undefined;\n        this.removePortalByKey(this.key);\n    }\n\n    ignoreMutation(mutation: MutationRecord | { type: 'selection'; target: Element }) {\n        if (!this.contentDOM) {\n            return true;\n        }\n        return !this.contentDOM.contains(mutation.target);\n    }\n}\n","/* Copyright 2021, Milkdown by Mirone. */\nimport { Editor, editorViewCtx, rootCtx } from '@milkdown/core';\nimport { ViewFactory } from '@milkdown/prose';\nimport {\n    DefineComponent,\n    defineComponent,\n    Fragment,\n    h,\n    inject,\n    InjectionKey,\n    markRaw,\n    onMounted,\n    onUnmounted,\n    provide,\n    Ref,\n    ref,\n    shallowReactive,\n} from 'vue';\n\nimport { PortalPair, Portals } from './Portals';\nimport { createVueView } from './VueNodeView';\n\nconst rendererKey: InjectionKey<(component: DefineComponent) => ViewFactory> = Symbol();\n\ntype GetEditor = (container: HTMLDivElement, renderVue: (Component: DefineComponent) => ViewFactory) => Editor;\n\nconst useGetEditor = (getEditor: GetEditor) => {\n    const divRef = ref<HTMLDivElement | null>(null);\n    const renderVue = inject<(Component: DefineComponent) => ViewFactory>(rendererKey, () => {\n        throw new Error();\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((props: { editor: GetEditor; editorRef?: Ref<EditorRef> }) => {\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} />;\n});\nEditorComponent.props = ['editor', 'editorRef'];\n\nexport type EditorRef = { get: () => Editor | undefined; dom: () => HTMLDivElement | null };\n\nexport const VueEditor = defineComponent((props: { editor: GetEditor; editorRef?: Ref<EditorRef> }) => {\n    const portals = shallowReactive<PortalPair[]>([]);\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        <>\n            <Portals portals={portals} />\n            <EditorComponent editorRef={props.editorRef} editor={props.editor} />\n        </>\n    );\n});\nVueEditor.props = ['editor', 'editorRef'];\n\nexport const useEditor = (getEditor: GetEditor) => {\n    return (...args: Parameters<GetEditor>) => getEditor(...args);\n};\n"],"names":["getId","pairs","map","p","join","Portals","defineComponent","props","portalComponents","shallowRef","prev","ref","renderList","watch","portals","ids","value","next","nextTick","P","nodeMetadata","Symbol","VueNodeContainer","node","view","getPos","decorations","context","provide","slots","default","Content","containerRef","watchEffect","dom","appendChild","nanoid","customAlphabet","createVueView","addPortal","removePortalByKey","component","VueNodeView","constructor","key","document","createElement","Mark","classList","add","contentDOM","Node","isLeaf","undefined","renderPortal","CustomComponent","Portal","destroy","ignoreMutation","mutation","contains","target","rendererKey","useGetEditor","getEditor","divRef","renderVue","inject","Error","editorRef","markRaw","onMounted","create","then","editor","catch","e","console","error","onUnmounted","action","ctx","get","editorViewCtx","root","rootCtx","firstChild","remove","EditorComponent","refs","VueEditor","shallowReactive","push","index","findIndex","splice","useEditor","args"],"mappings":"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"}
+{"version":3,"file":"index.cjs.js","sources":["../src/VueNode.tsx","../src/VueNodeView.tsx","../src/Editor.tsx"],"sourcesContent":["/* Copyright 2021, Milkdown by Mirone. */\nimport { Ctx } from '@milkdown/core';\nimport { Decoration, EditorView, Mark, Node } from '@milkdown/prose';\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>({\n    name: 'milkdown-node-container',\n    setup: ({ node, view, getPos, decorations, ctx }, context) => {\n        provide(nodeMetadata, {\n            ctx,\n            node,\n            view,\n            getPos,\n            decorations,\n        });\n        return () => <div data-view-container>{context.slots.default?.()}</div>;\n    },\n});\nVueNodeContainer.props = ['ctx', 'editor', 'node', 'view', 'getPos', 'decorations'];\n\nexport const Content = defineComponent<{ isMark?: boolean }>({\n    name: 'milkdown-content',\n    setup: ({ isMark }) => {\n        return () => (isMark ? <span data-view-content /> : <div data-view-content />);\n    },\n});\nContent.props = ['isMark'];\n","/* Copyright 2021, Milkdown by Mirone. */\nimport { Ctx } from '@milkdown/core';\nimport type { Decoration, EditorView, NodeView, ViewFactory } from '@milkdown/prose';\nimport { Mark, Node } from '@milkdown/prose';\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 const createVueView =\n    (addPortal: (portal: DefineComponent, key: string) => void, removePortalByKey: (key: string) => void) =>\n    (component: DefineComponent): ((ctx: Ctx) => ViewFactory) =>\n    (ctx) =>\n    (node, view, getPos, decorations) =>\n        new VueNodeView(ctx, component, addPortal, removePortalByKey, node, view, getPos, decorations);\n\nexport class VueNodeView implements NodeView {\n    teleportDOM: HTMLElement;\n    key: string;\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 node: Node | Mark,\n        private view: EditorView,\n        private getPos: boolean | (() => number),\n        private decorations: Decoration[],\n    ) {\n        this.key = nanoid();\n        this.teleportDOM = document.createElement(node instanceof Mark ? 'span' : 'div');\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 Portal = defineComponent({\n            name: 'milkdown-portal',\n            setup: () => {\n                return () => (\n                    <Teleport key={this.key} to={this.teleportDOM}>\n                        <VueNodeContainer\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 isMark={this.node instanceof Mark} />\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.removePortalByKey(this.key);\n    }\n\n    ignoreMutation(mutation: MutationRecord | { type: 'selection'; target: Element }) {\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 | Mark, decorations: Decoration[]) {\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","/* 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 } from './VueNodeView';\n\nconst rendererKey: InjectionKey<(component: DefineComponent) => (ctx: Ctx) => ViewFactory> = Symbol();\n\ntype GetEditor = (\n    container: HTMLDivElement,\n    renderVue: (Component: AnyVueComponent) => (ctx: Ctx) => ViewFactory,\n) => Editor;\n\nconst useGetEditor = (getEditor: GetEditor) => {\n    const divRef = ref<HTMLDivElement | null>(null);\n    const renderVue = inject<(Component: DefineComponent) => (ctx: Ctx) => ViewFactory>(rendererKey, () => {\n        throw new Error();\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","context","provide","slots","default","props","Content","isMark","nanoid","customAlphabet","createVueView","addPortal","removePortalByKey","component","VueNodeView","constructor","key","teleportDOM","document","createElement","Mark","renderPortal","dom","firstElementChild","contentDOM","Node","isLeaf","querySelector","CustomComponent","Portal","markRaw","instance","getRootInstance","update","destroy","ignoreMutation","mutation","isAtom","type","contains","target","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","refs","rootInstance","VueEditor","portals","shallowReactive","getCurrentInstance","onBeforeMount","_","push","index","findIndex","p","splice","portalElements","map","id","P","useEditor","args"],"mappings":"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"}

package/lib/index.es.js

@@ -1,62 +1,51 @@
-import { defineComponent, shallowRef, ref, watch, nextTick, createVNode, Fragment, provide, watchEffect, Teleport, shallowReactive, markRaw, inject, onMounted, onUnmounted } from "vue";
+import { defineComponent, provide, createVNode, Teleport, markRaw, shallowReactive, getCurrentInstance, onBeforeMount, onUnmounted, isVNode, ref, inject, onMounted } from "vue";
 import { editorViewCtx, rootCtx } from "@milkdown/core";
 import { Mark, Node } from "@milkdown/prose";
 import { customAlphabet } from "nanoid";
-const getId = (pairs) => pairs.map((p) => p[0]).join("\n");
-const Portals = defineComponent((props) => {
-  const portalComponents = shallowRef([]);
-  const prev = ref("");
-  const renderList = shallowRef(() => []);
-  watch(() => getId(props.portals), (ids) => {
-    if (ids !== prev.value) {
-      prev.value = ids;
-      const next = props.portals.map((p) => p[1]);
-      portalComponents.value = next;
-    }
-  });
-  nextTick(() => {
-    renderList.value = () => portalComponents.value.map((P) => createVNode(P, null, null));
-  });
-  return () => {
-    return createVNode(Fragment, null, [renderList.value()]);
-  };
-});
-Portals.props = ["portals"];
 const nodeMetadata = Symbol();
-const VueNodeContainer = defineComponent(({
-  node,
-  view,
-  getPos,
-  decorations
-}, context) => {
-  provide(nodeMetadata, {
+const VueNodeContainer = defineComponent({
+  name: "milkdown-node-container",
+  setup: ({
     node,
     view,
     getPos,
-    decorations
-  });
-  return () => {
-    var _a, _b, _c;
-    return createVNode(Fragment, null, [(_c = (_b = (_a = context.slots).default) == null ? void 0 : _b.call(_a)) != null ? _c : []]);
-  };
+    decorations,
+    ctx
+  }, context) => {
+    provide(nodeMetadata, {
+      ctx,
+      node,
+      view,
+      getPos,
+      decorations
+    });
+    return () => {
+      var _a, _b;
+      return createVNode("div", {
+        "data-view-container": true
+      }, [(_b = (_a = context.slots).default) == null ? void 0 : _b.call(_a)]);
+    };
+  }
 });
-VueNodeContainer.props = ["editor", "node", "view", "getPos", "decorations"];
-const Content = defineComponent((props) => {
-  const containerRef = ref(null);
-  watchEffect(() => {
-    if (!props.dom || !containerRef.value)
-      return;
-    containerRef.value.appendChild(props.dom);
-  });
-  return () => createVNode("div", {
-    "ref": containerRef
-  }, null);
+VueNodeContainer.props = ["ctx", "editor", "node", "view", "getPos", "decorations"];
+const Content = defineComponent({
+  name: "milkdown-content",
+  setup: ({
+    isMark
+  }) => {
+    return () => isMark ? createVNode("span", {
+      "data-view-content": true
+    }, null) : createVNode("div", {
+      "data-view-content": true
+    }, null);
+  }
 });
-Content.props = ["dom"];
+Content.props = ["isMark"];
 const nanoid = customAlphabet("abcedfghicklmn", 10);
-const createVueView = (addPortal, removePortalByKey) => (component) => (node, view, getPos, decorations) => new VueNodeView(component, addPortal, removePortalByKey, node, view, getPos, decorations);
+const createVueView = (addPortal, removePortalByKey) => (component) => (ctx) => (node, view, getPos, decorations) => new VueNodeView(ctx, component, addPortal, removePortalByKey, node, view, getPos, decorations);
 class VueNodeView {
-  constructor(component, addPortal, removePortalByKey, node, view, getPos, decorations) {
+  constructor(ctx, component, addPortal, removePortalByKey, node, view, getPos, decorations) {
+    this.ctx = ctx;
     this.component = component;
     this.addPortal = addPortal;
     this.removePortalByKey = removePortalByKey;
@@ -65,53 +54,88 @@ class VueNodeView {
     this.getPos = getPos;
     this.decorations = decorations;
     this.key = nanoid();
-    const dom = document.createElement(node instanceof Mark ? "span" : "div");
-    dom.classList.add("dom-wrapper");
-    const contentDOM = node instanceof Node && node.isLeaf ? void 0 : document.createElement(node instanceof Mark ? "span" : "div");
-    if (contentDOM) {
-      contentDOM.classList.add("content-dom");
-      dom.appendChild(contentDOM);
-    }
-    this.dom = dom;
-    this.contentDOM = contentDOM;
+    this.teleportDOM = document.createElement(node instanceof Mark ? "span" : "div");
     this.renderPortal();
   }
+  get dom() {
+    return this.teleportDOM.firstElementChild || this.teleportDOM;
+  }
+  get contentDOM() {
+    if (this.node instanceof Node && this.node.isLeaf) {
+      return null;
+    }
+    return this.teleportDOM.querySelector("[data-view-content]") || this.dom;
+  }
   renderPortal() {
-    if (!this.dom)
+    if (!this.teleportDOM)
       return;
     const CustomComponent = this.component;
-    const Portal = defineComponent(() => {
-      return () => createVNode(Teleport, {
-        "to": this.dom
-      }, {
-        default: () => [createVNode(VueNodeContainer, {
+    const Portal = defineComponent({
+      name: "milkdown-portal",
+      setup: () => {
+        return () => createVNode(Teleport, {
           "key": this.key,
-          "node": this.node,
-          "view": this.view,
-          "getPos": this.getPos,
-          "decorations": this.decorations
+          "to": this.teleportDOM
         }, {
-          default: () => [createVNode(CustomComponent, null, {
-            default: () => [createVNode(Content, {
-              "dom": this.contentDOM
-            }, null)]
+          default: () => [createVNode(VueNodeContainer, {
+            "ctx": this.ctx,
+            "node": this.node,
+            "view": this.view,
+            "getPos": this.getPos,
+            "decorations": this.decorations
+          }, {
+            default: () => [createVNode(CustomComponent, null, {
+              default: () => [createVNode(Content, {
+                "isMark": this.node instanceof Mark
+              }, null)]
+            })]
           })]
-        })]
-      });
+        });
+      }
     });
-    this.addPortal(Portal, this.key);
+    this.addPortal(markRaw(Portal), this.key);
+    const instance = getRootInstance();
+    if (instance) {
+      instance.update();
+    }
   }
   destroy() {
-    this.dom = void 0;
-    this.contentDOM = void 0;
     this.removePortalByKey(this.key);
   }
   ignoreMutation(mutation) {
-    if (!this.contentDOM) {
+    if (!this.dom || !this.contentDOM) {
       return true;
     }
-    return !this.contentDOM.contains(mutation.target);
+    if (this.node instanceof Node) {
+      if (this.node.isLeaf || this.node.isAtom) {
+        return true;
+      }
+    }
+    if (mutation.type === "selection") {
+      return false;
+    }
+    if (this.contentDOM === this.dom) {
+      return false;
+    }
+    if (this.contentDOM.contains(mutation.target)) {
+      return false;
+    }
+    return true;
   }
+  update(node, decorations) {
+    if (this.node.type !== node.type) {
+      return false;
+    }
+    if (node === this.node && this.decorations === decorations) {
+      return true;
+    }
+    this.node = node;
+    this.decorations = decorations;
+    return true;
+  }
+}
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
 }
 const rendererKey = Symbol();
 const useGetEditor = (getEditor) => {
@@ -140,40 +164,69 @@ const useGetEditor = (getEditor) => {
     editorRef
   };
 };
-const EditorComponent = defineComponent((props) => {
-  const refs = useGetEditor(props.editor);
-  if (props.editorRef) {
-    props.editorRef.value = {
-      get: () => refs.editorRef.editor,
-      dom: () => refs.divRef.value
+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 _a;
+      return createVNode("div", {
+        "ref": refs.divRef
+      }, [(_a = slots.default) == null ? void 0 : _a.call(slots)]);
     };
   }
-  return () => createVNode("div", {
-    "ref": refs.divRef
-  }, null);
 });
 EditorComponent.props = ["editor", "editorRef"];
-const VueEditor = defineComponent((props) => {
-  const portals = shallowReactive([]);
-  const addPortal = markRaw((component, key) => {
-    portals.push([key, component]);
-  });
-  const removePortalByKey = markRaw((key) => {
-    const index = portals.findIndex((p) => p[0] === key);
-    portals.splice(index, 1);
-  });
-  const renderVue = createVueView(addPortal, removePortalByKey);
-  provide(rendererKey, renderVue);
-  return () => createVNode(Fragment, null, [createVNode(Portals, {
-    "portals": portals
-  }, null), createVNode(EditorComponent, {
-    "editorRef": props.editorRef,
-    "editor": props.editor
-  }, null)]);
+const rootInstance = {
+  instance: null
+};
+const getRootInstance = () => {
+  return rootInstance.instance;
+};
+const VueEditor = defineComponent({
+  name: "milkdown-vue-root",
+  setup: (props) => {
+    const portals = shallowReactive([]);
+    const instance = getCurrentInstance();
+    onBeforeMount(() => {
+      rootInstance.instance = instance.ctx._;
+    });
+    onUnmounted(() => {
+      rootInstance.instance = null;
+    });
+    const addPortal = markRaw((component, key) => {
+      portals.push([key, component]);
+    });
+    const removePortalByKey = markRaw((key) => {
+      const index = portals.findIndex((p) => p[0] === key);
+      portals.splice(index, 1);
+    });
+    const renderVue = createVueView(addPortal, removePortalByKey);
+    provide(rendererKey, renderVue);
+    return () => {
+      const portalElements = portals.map(([id, P]) => createVNode(P, {
+        "key": id
+      }, null));
+      return createVNode(EditorComponent, {
+        "editorRef": props.editorRef,
+        "editor": props.editor
+      }, _isSlot(portalElements) ? portalElements : {
+        default: () => [portalElements]
+      });
+    };
+  }
 });
 VueEditor.props = ["editor", "editorRef"];
 const useEditor = (getEditor) => {
   return (...args) => getEditor(...args);
 };
-export { EditorComponent, VueEditor, nodeMetadata, useEditor };
+export { EditorComponent, VueEditor, getRootInstance, nodeMetadata, useEditor };
 //# sourceMappingURL=index.es.js.map

package/lib/index.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es.js","sources":["../src/Portals.tsx","../src/VueNode.tsx","../src/VueNodeView.tsx","../src/Editor.tsx"],"sourcesContent":["/* Copyright 2021, Milkdown by Mirone. */\nimport { DefineComponent, defineComponent, Fragment, h, nextTick, ref, shallowRef, watch } from 'vue';\nexport type PortalPair = [key: string, component: DefineComponent];\n\nconst getId = (pairs: PortalPair[]) => pairs.map((p) => p[0]).join('\\n');\n\nexport const Portals = defineComponent((props: { portals: PortalPair[] }) => {\n    const portalComponents = shallowRef<Array<DefineComponent>>([]);\n    const prev = ref<string>('');\n    const renderList = shallowRef<() => JSX.Element[]>(() => []);\n\n    watch(\n        () => getId(props.portals),\n        (ids) => {\n            if (ids !== prev.value) {\n                prev.value = ids;\n                const next = props.portals.map((p) => p[1]);\n                portalComponents.value = next;\n            }\n        },\n    );\n\n    nextTick(() => {\n        renderList.value = () => portalComponents.value.map((P) => <P />);\n    });\n\n    return () => {\n        return <>{renderList.value()}</>;\n    };\n});\nPortals.props = ['portals'];\n","/* Copyright 2021, Milkdown by Mirone. */\nimport { Decoration, EditorView, Mark, Node } from '@milkdown/prose';\nimport { defineComponent, Fragment, h, InjectionKey, provide, ref, watchEffect } from 'vue';\n\nexport type NodeContext = {\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(({ node, view, getPos, decorations }: NodeContext, context) => {\n    provide(nodeMetadata, {\n        node,\n        view,\n        getPos,\n        decorations,\n    });\n    return () => <>{context.slots.default?.() ?? []}</>;\n});\nVueNodeContainer.props = ['editor', 'node', 'view', 'getPos', 'decorations'];\n\nexport const Content = defineComponent((props: { dom?: HTMLElement }) => {\n    const containerRef = ref<HTMLDivElement | null>(null);\n    watchEffect(() => {\n        if (!props.dom || !containerRef.value) return;\n        containerRef.value.appendChild(props.dom);\n    });\n    return () => <div ref={containerRef} />;\n});\nContent.props = ['dom'];\n","/* Copyright 2021, Milkdown by Mirone. */\nimport type { Decoration, EditorView, NodeView, ViewFactory } from '@milkdown/prose';\nimport { Mark, Node } from '@milkdown/prose';\nimport { customAlphabet } from 'nanoid';\nimport { DefineComponent, defineComponent, h, Teleport } from 'vue';\n\nimport { Content, VueNodeContainer } from './VueNode';\n\nconst nanoid = customAlphabet('abcedfghicklmn', 10);\n\nexport const createVueView =\n    (addPortal: (portal: DefineComponent, key: string) => void, removePortalByKey: (key: string) => void) =>\n    (component: DefineComponent): ViewFactory =>\n    (node, view, getPos, decorations) =>\n        new VueNodeView(component, addPortal, removePortalByKey, node, view, getPos, decorations);\n\nexport class VueNodeView implements NodeView {\n    dom: HTMLElement | undefined;\n    contentDOM: HTMLElement | undefined;\n    key: string;\n\n    constructor(\n        private component: DefineComponent,\n        private addPortal: (portal: DefineComponent, key: string) => void,\n        private removePortalByKey: (key: string) => void,\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 dom = document.createElement(node instanceof Mark ? 'span' : 'div');\n        dom.classList.add('dom-wrapper');\n\n        const contentDOM =\n            node instanceof Node && node.isLeaf\n                ? undefined\n                : document.createElement(node instanceof Mark ? 'span' : 'div');\n        if (contentDOM) {\n            contentDOM.classList.add('content-dom');\n            dom.appendChild(contentDOM);\n        }\n        this.dom = dom;\n        this.contentDOM = contentDOM;\n        this.renderPortal();\n    }\n\n    renderPortal() {\n        if (!this.dom) return;\n\n        const CustomComponent = this.component;\n        const Portal = defineComponent(() => {\n            return () => (\n                <Teleport to={this.dom}>\n                    <VueNodeContainer\n                        key={this.key}\n                        node={this.node}\n                        view={this.view}\n                        getPos={this.getPos}\n                        decorations={this.decorations}\n                    >\n                        <CustomComponent>\n                            <Content dom={this.contentDOM} />\n                        </CustomComponent>\n                    </VueNodeContainer>\n                </Teleport>\n            );\n        });\n        this.addPortal(Portal, this.key);\n    }\n\n    destroy() {\n        this.dom = undefined;\n        this.contentDOM = undefined;\n        this.removePortalByKey(this.key);\n    }\n\n    ignoreMutation(mutation: MutationRecord | { type: 'selection'; target: Element }) {\n        if (!this.contentDOM) {\n            return true;\n        }\n        return !this.contentDOM.contains(mutation.target);\n    }\n}\n","/* Copyright 2021, Milkdown by Mirone. */\nimport { Editor, editorViewCtx, rootCtx } from '@milkdown/core';\nimport { ViewFactory } from '@milkdown/prose';\nimport {\n    DefineComponent,\n    defineComponent,\n    Fragment,\n    h,\n    inject,\n    InjectionKey,\n    markRaw,\n    onMounted,\n    onUnmounted,\n    provide,\n    Ref,\n    ref,\n    shallowReactive,\n} from 'vue';\n\nimport { PortalPair, Portals } from './Portals';\nimport { createVueView } from './VueNodeView';\n\nconst rendererKey: InjectionKey<(component: DefineComponent) => ViewFactory> = Symbol();\n\ntype GetEditor = (container: HTMLDivElement, renderVue: (Component: DefineComponent) => ViewFactory) => Editor;\n\nconst useGetEditor = (getEditor: GetEditor) => {\n    const divRef = ref<HTMLDivElement | null>(null);\n    const renderVue = inject<(Component: DefineComponent) => ViewFactory>(rendererKey, () => {\n        throw new Error();\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((props: { editor: GetEditor; editorRef?: Ref<EditorRef> }) => {\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} />;\n});\nEditorComponent.props = ['editor', 'editorRef'];\n\nexport type EditorRef = { get: () => Editor | undefined; dom: () => HTMLDivElement | null };\n\nexport const VueEditor = defineComponent((props: { editor: GetEditor; editorRef?: Ref<EditorRef> }) => {\n    const portals = shallowReactive<PortalPair[]>([]);\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        <>\n            <Portals portals={portals} />\n            <EditorComponent editorRef={props.editorRef} editor={props.editor} />\n        </>\n    );\n});\nVueEditor.props = ['editor', 'editorRef'];\n\nexport const useEditor = (getEditor: GetEditor) => {\n    return (...args: Parameters<GetEditor>) => getEditor(...args);\n};\n"],"names":["getId","pairs","map","p","join","Portals","defineComponent","props","portalComponents","shallowRef","prev","ref","renderList","watch","portals","ids","value","next","nextTick","P","nodeMetadata","Symbol","VueNodeContainer","node","view","getPos","decorations","context","provide","slots","default","Content","containerRef","watchEffect","dom","appendChild","nanoid","customAlphabet","createVueView","addPortal","removePortalByKey","component","VueNodeView","constructor","key","document","createElement","Mark","classList","add","contentDOM","Node","isLeaf","undefined","renderPortal","CustomComponent","Portal","destroy","ignoreMutation","mutation","contains","target","rendererKey","useGetEditor","getEditor","divRef","renderVue","inject","Error","editorRef","markRaw","onMounted","create","then","editor","catch","e","console","error","onUnmounted","action","ctx","get","editorViewCtx","root","rootCtx","firstChild","remove","EditorComponent","refs","VueEditor","shallowReactive","push","index","findIndex","splice","useEditor","args"],"mappings":"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"}
+{"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 { Decoration, EditorView, Mark, Node } from '@milkdown/prose';\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>({\n    name: 'milkdown-node-container',\n    setup: ({ node, view, getPos, decorations, ctx }, context) => {\n        provide(nodeMetadata, {\n            ctx,\n            node,\n            view,\n            getPos,\n            decorations,\n        });\n        return () => <div data-view-container>{context.slots.default?.()}</div>;\n    },\n});\nVueNodeContainer.props = ['ctx', 'editor', 'node', 'view', 'getPos', 'decorations'];\n\nexport const Content = defineComponent<{ isMark?: boolean }>({\n    name: 'milkdown-content',\n    setup: ({ isMark }) => {\n        return () => (isMark ? <span data-view-content /> : <div data-view-content />);\n    },\n});\nContent.props = ['isMark'];\n","/* Copyright 2021, Milkdown by Mirone. */\nimport { Ctx } from '@milkdown/core';\nimport type { Decoration, EditorView, NodeView, ViewFactory } from '@milkdown/prose';\nimport { Mark, Node } from '@milkdown/prose';\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 const createVueView =\n    (addPortal: (portal: DefineComponent, key: string) => void, removePortalByKey: (key: string) => void) =>\n    (component: DefineComponent): ((ctx: Ctx) => ViewFactory) =>\n    (ctx) =>\n    (node, view, getPos, decorations) =>\n        new VueNodeView(ctx, component, addPortal, removePortalByKey, node, view, getPos, decorations);\n\nexport class VueNodeView implements NodeView {\n    teleportDOM: HTMLElement;\n    key: string;\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 node: Node | Mark,\n        private view: EditorView,\n        private getPos: boolean | (() => number),\n        private decorations: Decoration[],\n    ) {\n        this.key = nanoid();\n        this.teleportDOM = document.createElement(node instanceof Mark ? 'span' : 'div');\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 Portal = defineComponent({\n            name: 'milkdown-portal',\n            setup: () => {\n                return () => (\n                    <Teleport key={this.key} to={this.teleportDOM}>\n                        <VueNodeContainer\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 isMark={this.node instanceof Mark} />\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.removePortalByKey(this.key);\n    }\n\n    ignoreMutation(mutation: MutationRecord | { type: 'selection'; target: Element }) {\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 | Mark, decorations: Decoration[]) {\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","/* 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 } from './VueNodeView';\n\nconst rendererKey: InjectionKey<(component: DefineComponent) => (ctx: Ctx) => ViewFactory> = Symbol();\n\ntype GetEditor = (\n    container: HTMLDivElement,\n    renderVue: (Component: AnyVueComponent) => (ctx: Ctx) => ViewFactory,\n) => Editor;\n\nconst useGetEditor = (getEditor: GetEditor) => {\n    const divRef = ref<HTMLDivElement | null>(null);\n    const renderVue = inject<(Component: DefineComponent) => (ctx: Ctx) => ViewFactory>(rendererKey, () => {\n        throw new Error();\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","context","provide","slots","default","props","Content","isMark","nanoid","customAlphabet","createVueView","addPortal","removePortalByKey","component","VueNodeView","constructor","key","teleportDOM","document","createElement","Mark","renderPortal","dom","firstElementChild","contentDOM","Node","isLeaf","querySelector","CustomComponent","Portal","markRaw","instance","getRootInstance","update","destroy","ignoreMutation","mutation","isAtom","type","contains","target","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","refs","rootInstance","VueEditor","portals","shallowReactive","getCurrentInstance","onBeforeMount","_","push","index","findIndex","p","splice","portalElements","map","id","P","useEditor","args"],"mappings":"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"}

package/lib/utils.d.ts

@@ -1,7 +1,9 @@
+import { DefineComponent } from 'vue';
 declare type Prepend<T, U extends unknown[]> = [T, ...U];
 declare 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 declare type Keys<T extends Record<string, unknown>> = Keys_<T, []>;
+export declare 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 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAEA,aAAK,OAAO,CAAC,CAAC,EAAE,CAAC,SAAS,OAAO,EAAE,IAAI,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC;AACjD,aAAK,KAAK,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,CAAC,SAAS,WAAW,EAAE,IAAI;KACpE,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;CACtG,CAAC,MAAM,CAAC,CAAC,CAAC;AACX,oBAAY,IAAI,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,IAAI,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,eAAe,EAAE,MAAM,KAAK,CAAC;AAEtC,aAAK,OAAO,CAAC,CAAC,EAAE,CAAC,SAAS,OAAO,EAAE,IAAI,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC;AACjD,aAAK,KAAK,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,CAAC,SAAS,WAAW,EAAE,IAAI;KACpE,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;CACtG,CAAC,MAAM,CAAC,CAAC,CAAC;AACX,oBAAY,IAAI,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,IAAI,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;AAGnE,oBAAY,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,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@milkdown/vue",
-  "version": "5.2.1",
+  "version": "5.3.0",
   "main": "./lib/index.cjs.js",
   "module": "./lib/index.es.js",
   "types": "./lib/index.d.ts",
@@ -22,7 +22,7 @@
     "vue"
   ],
   "dependencies": {
-    "@milkdown/utils": "5.2.1",
+    "@milkdown/utils": "5.3.0",
     "nanoid": "^3.1.25",
     "tslib": "^2.3.1"
   },
@@ -31,10 +31,11 @@
     "vue": "^3.0.0"
   },
   "devDependencies": {
-    "@milkdown/core": "5.2.1",
-    "@milkdown/prose": "5.2.1",
-    "@milkdown/preset-commonmark": "5.2.1",
-    "@milkdown/theme-nord": "5.2.1",
+    "@milkdown/core": "5.3.0",
+    "@milkdown/prose": "5.3.0",
+    "@milkdown/preset-commonmark": "5.3.0",
+    "@milkdown/plugin-slash": "5.3.0",
+    "@milkdown/theme-nord": "5.3.0",
     "vue": "^3.0.0"
   },
   "scripts": {
@@ -43,5 +44,6 @@
     "test": "jest",
     "tsc": "tsc --noEmit",
     "build": "vite build && tsc --emitDeclarationOnly"
-  }
+  },
+  "readme": "# @milkdown/vue\n\nVue integration for [milkdown](https://saul-mirone.github.io/milkdown/).\n\n# Example Usage\n\n```typescript\nimport { defineComponent } from 'vue';\nimport { Editor, rootCtx } from '@milkdown/core';\nimport { VueEditor, useEditor } from '@milkdown/vue';\nimport { commonmark } from '@milkdown/preset-commonmark';\nimport { nord } from '@milkdown/theme-nord';\n\nexport const MilkdownEditor = defineComponent(() => {\n    const editor = useEditor((root) =>\n        Editor.make()\n            .config((ctx) => {\n                ctx.set(rootCtx, root);\n            })\n            .use(nord)\n            .use(commonmark),\n    );\n\n    return () => <VueEditor editor={editor} />;\n});\n```\n\n# License\n\nMilkdown is open sourced software licensed under [MIT license](https://github.com/Saul-Mirone/milkdown/blob/main/LICENSE).\n"
 }

package/src/Editor.tsx

@@ -1,14 +1,16 @@
 /* Copyright 2021, Milkdown by Mirone. */
-import { Editor, editorViewCtx, rootCtx } from '@milkdown/core';
+import { Ctx, Editor, editorViewCtx, rootCtx } from '@milkdown/core';
 import { ViewFactory } from '@milkdown/prose';
 import {
+    ComponentInternalInstance,
     DefineComponent,
     defineComponent,
-    Fragment,
+    getCurrentInstance,
     h,
     inject,
     InjectionKey,
     markRaw,
+    onBeforeMount,
     onMounted,
     onUnmounted,
     provide,
@@ -17,16 +19,19 @@ import {
     shallowReactive,
 } from 'vue';
 
-import { PortalPair, Portals } from './Portals';
+import { AnyVueComponent } from './utils';
 import { createVueView } from './VueNodeView';
 
-const rendererKey: InjectionKey<(component: DefineComponent) => ViewFactory> = Symbol();
+const rendererKey: InjectionKey<(component: DefineComponent) => (ctx: Ctx) => ViewFactory> = Symbol();
 
-type GetEditor = (container: HTMLDivElement, renderVue: (Component: DefineComponent) => ViewFactory) => Editor;
+type GetEditor = (
+    container: HTMLDivElement,
+    renderVue: (Component: AnyVueComponent) => (ctx: Ctx) => ViewFactory,
+) => Editor;
 
 const useGetEditor = (getEditor: GetEditor) => {
     const divRef = ref<HTMLDivElement | null>(null);
-    const renderVue = inject<(Component: DefineComponent) => ViewFactory>(rendererKey, () => {
+    const renderVue = inject<(Component: DefineComponent) => (ctx: Ctx) => ViewFactory>(rendererKey, () => {
         throw new Error();
     });
     const editorRef = markRaw<{ editor?: Editor }>({});
@@ -52,39 +57,69 @@ const useGetEditor = (getEditor: GetEditor) => {
     return { divRef, editorRef };
 };
 
-export const EditorComponent = defineComponent((props: { editor: GetEditor; editorRef?: Ref<EditorRef> }) => {
-    const refs = useGetEditor(props.editor);
-    if (props.editorRef) {
-        props.editorRef.value = {
-            get: () => refs.editorRef.editor,
-            dom: () => refs.divRef.value,
-        };
-    }
+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} />;
+        return () => <div ref={refs.divRef}>{slots.default?.()}</div>;
+    },
 });
 EditorComponent.props = ['editor', 'editorRef'];
 
 export type EditorRef = { get: () => Editor | undefined; dom: () => HTMLDivElement | null };
 
-export const VueEditor = defineComponent((props: { editor: GetEditor; editorRef?: Ref<EditorRef> }) => {
-    const portals = shallowReactive<PortalPair[]>([]);
-    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(addPortal, removePortalByKey);
-    provide(rendererKey, renderVue);
-
-    return () => (
-        <>
-            <Portals portals={portals} />
-            <EditorComponent editorRef={props.editorRef} editor={props.editor} />
-        </>
-    );
+const rootInstance: {
+    instance: null | ComponentInternalInstance;
+} = {
+    instance: null,
+};
+export const getRootInstance = () => {
+    return rootInstance.instance;
+};
+
+type PortalPair = [key: string, component: DefineComponent];
+export const VueEditor = defineComponent<{ editor: GetEditor; editorRef?: Ref<EditorRef> }>({
+    name: 'milkdown-vue-root',
+    setup: (props) => {
+        const portals = shallowReactive<PortalPair[]>([]);
+
+        const instance = getCurrentInstance();
+
+        onBeforeMount(() => {
+            rootInstance.instance = (instance as ComponentInternalInstance & { ctx: { _: ComponentInternalInstance } })
+                .ctx._ as ComponentInternalInstance;
+        });
+
+        onUnmounted(() => {
+            rootInstance.instance = 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(addPortal, removePortalByKey);
+        provide(rendererKey, renderVue);
+
+        return () => {
+            const portalElements = portals.map(([id, P]) => <P key={id} />);
+            return (
+                <EditorComponent editorRef={props.editorRef} editor={props.editor}>
+                    {portalElements}
+                </EditorComponent>
+            );
+        };
+    },
 });
 VueEditor.props = ['editor', 'editorRef'];
 

package/src/VueNode.tsx

@@ -1,8 +1,10 @@
 /* Copyright 2021, Milkdown by Mirone. */
+import { Ctx } from '@milkdown/core';
 import { Decoration, EditorView, Mark, Node } from '@milkdown/prose';
-import { defineComponent, Fragment, h, InjectionKey, provide, ref, watchEffect } from 'vue';
+import { defineComponent, h, InjectionKey, provide } from 'vue';
 
 export type NodeContext = {
+    ctx: Ctx;
     node: Node | Mark;
     view: EditorView;
     getPos: boolean | (() => number);
@@ -11,23 +13,25 @@ export type NodeContext = {
 
 export const nodeMetadata: InjectionKey<NodeContext> = Symbol();
 
-export const VueNodeContainer = defineComponent(({ node, view, getPos, decorations }: NodeContext, context) => {
-    provide(nodeMetadata, {
-        node,
-        view,
-        getPos,
-        decorations,
-    });
-    return () => <>{context.slots.default?.() ?? []}</>;
+export const VueNodeContainer = defineComponent<NodeContext>({
+    name: 'milkdown-node-container',
+    setup: ({ node, view, getPos, decorations, ctx }, context) => {
+        provide(nodeMetadata, {
+            ctx,
+            node,
+            view,
+            getPos,
+            decorations,
+        });
+        return () => <div data-view-container>{context.slots.default?.()}</div>;
+    },
 });
-VueNodeContainer.props = ['editor', 'node', 'view', 'getPos', 'decorations'];
+VueNodeContainer.props = ['ctx', 'editor', 'node', 'view', 'getPos', 'decorations'];
 
-export const Content = defineComponent((props: { dom?: HTMLElement }) => {
-    const containerRef = ref<HTMLDivElement | null>(null);
-    watchEffect(() => {
-        if (!props.dom || !containerRef.value) return;
-        containerRef.value.appendChild(props.dom);
-    });
-    return () => <div ref={containerRef} />;
+export const Content = defineComponent<{ isMark?: boolean }>({
+    name: 'milkdown-content',
+    setup: ({ isMark }) => {
+        return () => (isMark ? <span data-view-content /> : <div data-view-content />);
+    },
 });
-Content.props = ['dom'];
+Content.props = ['isMark'];

package/src/VueNodeView.tsx

@@ -1,25 +1,28 @@
 /* Copyright 2021, Milkdown by Mirone. */
+import { Ctx } from '@milkdown/core';
 import type { Decoration, EditorView, NodeView, ViewFactory } from '@milkdown/prose';
 import { Mark, Node } from '@milkdown/prose';
 import { customAlphabet } from 'nanoid';
-import { DefineComponent, defineComponent, h, Teleport } from 'vue';
+import { DefineComponent, defineComponent, h, markRaw, Teleport } from 'vue';
 
+import { getRootInstance } from '.';
 import { Content, VueNodeContainer } from './VueNode';
 
 const nanoid = customAlphabet('abcedfghicklmn', 10);
 
 export const createVueView =
     (addPortal: (portal: DefineComponent, key: string) => void, removePortalByKey: (key: string) => void) =>
-    (component: DefineComponent): ViewFactory =>
+    (component: DefineComponent): ((ctx: Ctx) => ViewFactory) =>
+    (ctx) =>
     (node, view, getPos, decorations) =>
-        new VueNodeView(component, addPortal, removePortalByKey, node, view, getPos, decorations);
+        new VueNodeView(ctx, component, addPortal, removePortalByKey, node, view, getPos, decorations);
 
 export class VueNodeView implements NodeView {
-    dom: HTMLElement | undefined;
-    contentDOM: HTMLElement | undefined;
+    teleportDOM: HTMLElement;
     key: string;
 
     constructor(
+        private ctx: Ctx,
         private component: DefineComponent,
         private addPortal: (portal: DefineComponent, key: string) => void,
         private removePortalByKey: (key: string) => void,
@@ -29,56 +32,94 @@ export class VueNodeView implements NodeView {
         private decorations: Decoration[],
     ) {
         this.key = nanoid();
-        const dom = document.createElement(node instanceof Mark ? 'span' : 'div');
-        dom.classList.add('dom-wrapper');
-
-        const contentDOM =
-            node instanceof Node && node.isLeaf
-                ? undefined
-                : document.createElement(node instanceof Mark ? 'span' : 'div');
-        if (contentDOM) {
-            contentDOM.classList.add('content-dom');
-            dom.appendChild(contentDOM);
-        }
-        this.dom = dom;
-        this.contentDOM = contentDOM;
+        this.teleportDOM = document.createElement(node instanceof Mark ? 'span' : 'div');
         this.renderPortal();
     }
 
+    get dom() {
+        return this.teleportDOM.firstElementChild || this.teleportDOM;
+    }
+
+    get contentDOM() {
+        if (this.node instanceof Node && this.node.isLeaf) {
+            return null;
+        }
+
+        return this.teleportDOM.querySelector('[data-view-content]') || this.dom;
+    }
+
     renderPortal() {
-        if (!this.dom) return;
+        if (!this.teleportDOM) return;
 
         const CustomComponent = this.component;
-        const Portal = defineComponent(() => {
-            return () => (
-                <Teleport to={this.dom}>
-                    <VueNodeContainer
-                        key={this.key}
-                        node={this.node}
-                        view={this.view}
-                        getPos={this.getPos}
-                        decorations={this.decorations}
-                    >
-                        <CustomComponent>
-                            <Content dom={this.contentDOM} />
-                        </CustomComponent>
-                    </VueNodeContainer>
-                </Teleport>
-            );
+        const Portal = defineComponent({
+            name: 'milkdown-portal',
+            setup: () => {
+                return () => (
+                    <Teleport key={this.key} to={this.teleportDOM}>
+                        <VueNodeContainer
+                            ctx={this.ctx}
+                            node={this.node}
+                            view={this.view}
+                            getPos={this.getPos}
+                            decorations={this.decorations}
+                        >
+                            <CustomComponent>
+                                <Content isMark={this.node instanceof Mark} />
+                            </CustomComponent>
+                        </VueNodeContainer>
+                    </Teleport>
+                );
+            },
         });
-        this.addPortal(Portal, this.key);
+        this.addPortal(markRaw(Portal) as DefineComponent, this.key);
+        const instance = getRootInstance();
+        if (instance) {
+            instance.update();
+        }
     }
 
     destroy() {
-        this.dom = undefined;
-        this.contentDOM = undefined;
         this.removePortalByKey(this.key);
     }
 
     ignoreMutation(mutation: MutationRecord | { type: 'selection'; target: Element }) {
-        if (!this.contentDOM) {
+        if (!this.dom || !this.contentDOM) {
+            return true;
+        }
+
+        if (this.node instanceof Node) {
+            if (this.node.isLeaf || this.node.isAtom) {
+                return true;
+            }
+        }
+
+        if (mutation.type === 'selection') {
+            return false;
+        }
+
+        if (this.contentDOM === this.dom) {
+            return false;
+        }
+
+        if (this.contentDOM.contains(mutation.target)) {
+            return false;
+        }
+
+        return true;
+    }
+
+    update(node: Node | Mark, decorations: Decoration[]) {
+        if (this.node.type !== node.type) {
+            return false;
+        }
+
+        if (node === this.node && this.decorations === decorations) {
             return true;
         }
-        return !this.contentDOM.contains(mutation.target);
+
+        this.node = node;
+        this.decorations = decorations;
+        return true;
     }
 }

package/src/utils.ts

@@ -1,7 +1,12 @@
 /* Copyright 2021, Milkdown by Mirone. */
 
+import { 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, []>;
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type AnyVueComponent = DefineComponent<any, any, any, any, any, any, any, any, any, any, any, any>;

package/lib/Portals.d.ts

@@ -1,8 +0,0 @@
-import { DefineComponent } from 'vue';
-export declare type PortalPair = [key: string, component: DefineComponent];
-export declare const Portals: DefineComponent<{
-    portals: PortalPair[];
-}, () => JSX.Element, {}, import("vue").ComputedOptions, import("vue").MethodOptions, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    portals: PortalPair[];
-}>, {}>;
-//# sourceMappingURL=Portals.d.ts.map

package/lib/Portals.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Portals.d.ts","sourceRoot":"","sources":["../src/Portals.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAkE,MAAM,KAAK,CAAC;AACtG,oBAAY,UAAU,GAAG,CAAC,GAAG,EAAE,MAAM,EAAE,SAAS,EAAE,eAAe,CAAC,CAAC;AAInE,eAAO,MAAM,OAAO;aAAsC,UAAU,EAAE;;aAAZ,UAAU,EAAE;OAuBpE,CAAC"}

package/src/Portals.tsx

@@ -1,31 +0,0 @@
-/* Copyright 2021, Milkdown by Mirone. */
-import { DefineComponent, defineComponent, Fragment, h, nextTick, ref, shallowRef, watch } from 'vue';
-export type PortalPair = [key: string, component: DefineComponent];
-
-const getId = (pairs: PortalPair[]) => pairs.map((p) => p[0]).join('\n');
-
-export const Portals = defineComponent((props: { portals: PortalPair[] }) => {
-    const portalComponents = shallowRef<Array<DefineComponent>>([]);
-    const prev = ref<string>('');
-    const renderList = shallowRef<() => JSX.Element[]>(() => []);
-
-    watch(
-        () => getId(props.portals),
-        (ids) => {
-            if (ids !== prev.value) {
-                prev.value = ids;
-                const next = props.portals.map((p) => p[1]);
-                portalComponents.value = next;
-            }
-        },
-    );
-
-    nextTick(() => {
-        renderList.value = () => portalComponents.value.map((P) => <P />);
-    });
-
-    return () => {
-        return <>{renderList.value()}</>;
-    };
-});
-Portals.props = ['portals'];