@milkdown/vue 5.3.0 → 5.3.1

package/package.json

@@ -1,15 +1,9 @@
 {
   "name": "@milkdown/vue",
-  "version": "5.3.0",
-  "main": "./lib/index.cjs.js",
-  "module": "./lib/index.es.js",
+  "version": "5.3.1",
+  "type": "module",
+  "main": "./lib/index.es.js",
   "types": "./lib/index.d.ts",
-  "exports": {
-    ".": {
-      "import": "./lib/index.es.js",
-      "require": "./lib/index.cjs.js"
-    }
-  },
   "sideEffects": false,
   "license": "MIT",
   "files": [
@@ -22,7 +16,7 @@
     "vue"
   ],
   "dependencies": {
-    "@milkdown/utils": "5.3.0",
+    "@milkdown/utils": "5.3.1",
     "nanoid": "^3.1.25",
     "tslib": "^2.3.1"
   },
@@ -31,17 +25,17 @@
     "vue": "^3.0.0"
   },
   "devDependencies": {
-    "@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",
+    "@milkdown/core": "5.3.1",
+    "@milkdown/prose": "5.3.1",
+    "@milkdown/preset-commonmark": "5.3.1",
+    "@milkdown/plugin-slash": "5.3.1",
+    "@milkdown/theme-nord": "5.3.1",
     "vue": "^3.0.0"
   },
   "scripts": {
     "start": "vite",
     "watch": "vite build --watch",
-    "test": "jest",
+    "test": "vitest",
     "tsc": "tsc --noEmit",
     "build": "vite build && tsc --emitDeclarationOnly"
   },

package/lib/index.cjs.js

@@ -1,2 +0,0 @@
-"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 +0,0 @@
-{"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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"}