@milkdown/vue 4.11.2 → 4.13.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/Editor.d.ts +3 -3
- package/lib/Editor.d.ts.map +1 -1
- package/lib/Editor.js.map +1 -1
- package/lib/VueNode.d.ts +4 -4
- package/lib/VueNode.d.ts.map +1 -1
- package/lib/VueNodeView.d.ts +4 -4
- package/lib/VueNodeView.d.ts.map +1 -1
- package/lib/VueNodeView.js +7 -2
- package/lib/VueNodeView.js.map +1 -1
- package/package.json +4 -3
- package/src/Editor.tsx +92 -0
- package/src/Portals.tsx +31 -0
- package/src/VueNode.tsx +37 -0
- package/src/VueNodeView.tsx +85 -0
- package/src/index.ts +3 -0
- package/src/utils.ts +6 -0
package/lib/Editor.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { Editor,
|
|
1
|
+
import { Editor, ViewFactory } from '@milkdown/core';
|
|
2
2
|
import { DefineComponent, Ref } from 'vue';
|
|
3
|
-
declare type GetEditor = (container: HTMLDivElement, renderVue: (Component: DefineComponent) =>
|
|
3
|
+
declare type GetEditor = (container: HTMLDivElement, renderVue: (Component: DefineComponent) => ViewFactory) => Editor;
|
|
4
4
|
export declare const EditorComponent: DefineComponent<{
|
|
5
5
|
editor: GetEditor;
|
|
6
6
|
editorRef?: Ref<EditorRef> | undefined;
|
|
@@ -25,6 +25,6 @@ export declare const VueEditor: DefineComponent<{
|
|
|
25
25
|
editor?: GetEditor | undefined;
|
|
26
26
|
editorRef?: Ref<EditorRef> | undefined;
|
|
27
27
|
}>, {}>;
|
|
28
|
-
export declare const useEditor: (getEditor: GetEditor) => (container: HTMLDivElement, renderVue: (Component: DefineComponent) =>
|
|
28
|
+
export declare const useEditor: (getEditor: GetEditor) => (container: HTMLDivElement, renderVue: (Component: DefineComponent) => ViewFactory) => Editor;
|
|
29
29
|
export {};
|
|
30
30
|
//# sourceMappingURL=Editor.d.ts.map
|
package/lib/Editor.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Editor.d.ts","sourceRoot":"","sources":["../src/Editor.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAiB,
|
|
1
|
+
{"version":3,"file":"Editor.d.ts","sourceRoot":"","sources":["../src/Editor.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAiB,WAAW,EAAE,MAAM,gBAAgB,CAAC;AACpE,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;;;;;;;;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;;;;;;;;OAkBlE,CAAC;AAGH,eAAO,MAAM,SAAS,cAAe,SAAS,wDAlEsB,eAAe,KAAK,WAAW,WAoElG,CAAC"}
|
package/lib/Editor.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Editor.js","sourceRoot":"","sources":["../src/Editor.tsx"],"names":[],"mappings":"AAAA,yCAAyC;AACzC,OAAO,EAAU,aAAa,
|
|
1
|
+
{"version":3,"file":"Editor.js","sourceRoot":"","sources":["../src/Editor.tsx"],"names":[],"mappings":"AAAA,yCAAyC;AACzC,OAAO,EAAU,aAAa,EAAe,MAAM,gBAAgB,CAAC;AACpE,OAAO,EAEH,eAAe,EACf,QAAQ,EACR,CAAC,EACD,MAAM,EAEN,OAAO,EACP,SAAS,EACT,WAAW,EACX,OAAO,EAEP,GAAG,EACH,eAAe,GAClB,MAAM,KAAK,CAAC;AAEb,OAAO,EAAc,OAAO,EAAE,MAAM,WAAW,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAE9C,MAAM,WAAW,GAA8D,MAAM,EAAE,CAAC;AAIxF,MAAM,YAAY,GAAG,CAAC,SAAoB,EAAE,EAAE;IAC1C,MAAM,MAAM,GAAG,GAAG,CAAwB,IAAI,CAAC,CAAC;IAChD,MAAM,SAAS,GAAG,MAAM,CAA8C,WAAW,EAAE,GAAG,EAAE;QACpF,MAAM,IAAI,KAAK,EAAE,CAAC;IACtB,CAAC,CAAC,CAAC;IACH,MAAM,SAAS,GAAG,OAAO,CAAsB,EAAE,CAAC,CAAC;IACnD,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,CAAC,MAAM,CAAC,KAAK;YAAE,OAAO;QAE1B,SAAS,CAAC,MAAM,CAAC,KAAK,EAAE,SAAS,CAAC;aAC7B,MAAM,EAAE;aACR,IAAI,CAAC,CAAC,MAAM,EAAE,EAAE;YACb,SAAS,CAAC,MAAM,GAAG,MAAM,CAAC;YAC1B,OAAO;QACX,CAAC,CAAC;aACD,KAAK,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;IACxC,CAAC,CAAC,CAAC;IACH,WAAW,CAAC,GAAG,EAAE;;QACb,MAAM,IAAI,GAAG,MAAA,SAAS,CAAC,MAAM,0CAAE,MAAM,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC,CAAC;QACvE,IAAI,CAAC,IAAI;YAAE,OAAO;QAElB,MAAA,IAAI,CAAC,GAAG,CAAC,aAAa,0CAAE,MAAM,EAAE,CAAC;QACjC,IAAI,CAAC,OAAO,EAAE,CAAC;IACnB,CAAC,CAAC,CAAC;IAEH,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC;AACjC,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,eAAe,CAAC,CAAC,KAAwD,EAAE,EAAE;IACxG,MAAM,IAAI,GAAG,YAAY,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IACxC,IAAI,KAAK,CAAC,SAAS,EAAE;QACjB,KAAK,CAAC,SAAS,CAAC,KAAK,GAAG;YACpB,GAAG,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM;YAChC,GAAG,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;SAC/B,CAAC;KACL;IAED,OAAO,GAAG,EAAE,CAAC,WAAK,GAAG,EAAE,IAAI,CAAC,MAAM,GAAI,CAAC;AAC3C,CAAC,CAAC,CAAC;AACH,eAAe,CAAC,KAAK,GAAG,CAAC,QAAQ,EAAE,WAAW,CAAC,CAAC;AAIhD,MAAM,CAAC,MAAM,SAAS,GAAG,eAAe,CAAC,CAAC,KAAwD,EAAE,EAAE;IAClG,MAAM,OAAO,GAAG,eAAe,CAAe,EAAE,CAAC,CAAC;IAClD,MAAM,SAAS,GAAG,OAAO,CAAC,CAAC,SAA0B,EAAE,GAAW,EAAE,EAAE;QAClE,OAAO,CAAC,IAAI,CAAC,CAAC,GAAG,EAAE,SAAS,CAAC,CAAC,CAAC;IACnC,CAAC,CAAC,CAAC;IACH,MAAM,iBAAiB,GAAG,OAAO,CAAC,CAAC,GAAW,EAAE,EAAE;QAC9C,MAAM,KAAK,GAAG,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC;QACrD,OAAO,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;IAC7B,CAAC,CAAC,CAAC;IACH,MAAM,SAAS,GAAG,aAAa,CAAC,SAAS,EAAE,iBAAiB,CAAC,CAAC;IAC9D,OAAO,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC;IAEhC,OAAO,GAAG,EAAE,CAAC,CACT;QACI,EAAC,OAAO,IAAC,OAAO,EAAE,OAAO,GAAI;QAC7B,EAAC,eAAe,IAAC,SAAS,EAAE,KAAK,CAAC,SAAS,EAAE,MAAM,EAAE,KAAK,CAAC,MAAM,GAAI,CACtE,CACN,CAAC;AACN,CAAC,CAAC,CAAC;AACH,SAAS,CAAC,KAAK,GAAG,CAAC,QAAQ,EAAE,WAAW,CAAC,CAAC;AAE1C,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,SAAoB,EAAE,EAAE;IAC9C,OAAO,CAAC,GAAG,IAA2B,EAAE,EAAE,CAAC,SAAS,CAAC,GAAG,IAAI,CAAC,CAAC;AAClE,CAAC,CAAC"}
|
package/lib/VueNode.d.ts
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { Editor } from '@milkdown/core';
|
|
2
|
-
import { Node } from 'prosemirror-model';
|
|
2
|
+
import { Mark, Node } from 'prosemirror-model';
|
|
3
3
|
import { Decoration, EditorView } from 'prosemirror-view';
|
|
4
4
|
import { InjectionKey } from 'vue';
|
|
5
5
|
export declare type NodeContext = {
|
|
6
6
|
editor: Editor;
|
|
7
|
-
node: Node;
|
|
7
|
+
node: Node | Mark;
|
|
8
8
|
view: EditorView;
|
|
9
9
|
getPos: boolean | (() => number);
|
|
10
10
|
decorations: Decoration[];
|
|
@@ -12,7 +12,7 @@ export declare type NodeContext = {
|
|
|
12
12
|
export declare const nodeMetadata: InjectionKey<NodeContext>;
|
|
13
13
|
export declare const VueNodeContainer: import("vue").DefineComponent<{
|
|
14
14
|
editor: Editor;
|
|
15
|
-
node: Node;
|
|
15
|
+
node: Node | Mark;
|
|
16
16
|
view: EditorView;
|
|
17
17
|
getPos: boolean | (() => number);
|
|
18
18
|
decorations: Decoration[];
|
|
@@ -26,7 +26,7 @@ export declare const VueNodeContainer: import("vue").DefineComponent<{
|
|
|
26
26
|
decorations?: Decoration<{
|
|
27
27
|
[key: string]: any;
|
|
28
28
|
}>[] | undefined;
|
|
29
|
-
node?: Node<any> | undefined;
|
|
29
|
+
node?: Mark<any> | Node<any> | undefined;
|
|
30
30
|
view?: EditorView<any> | undefined;
|
|
31
31
|
editor?: Editor | undefined;
|
|
32
32
|
getPos?: boolean | (() => number) | undefined;
|
package/lib/VueNode.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"VueNode.d.ts","sourceRoot":"","sources":["../src/VueNode.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AACxC,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;
|
|
1
|
+
{"version":3,"file":"VueNode.d.ts","sourceRoot":"","sources":["../src/VueNode.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AACxC,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAC/C,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC1D,OAAO,EAAgC,YAAY,EAA6B,MAAM,KAAK,CAAC;AAE5F,oBAAY,WAAW,GAAG;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,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;YATjB,MAAM;UACR,IAAI,GAAG,IAAI;UACX,UAAU;YACR,OAAO,GAAG,CAAC,MAAM,MAAM,CAAC;iBACnB,UAAU,EAAE;;;;;;;;;;;;;;8BADA,MAAM;OAejC,CAAC;AAGH,eAAO,MAAM,OAAO;SAAkC,WAAW;;;;;OAO/D,CAAC"}
|
package/lib/VueNodeView.d.ts
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import type { Editor,
|
|
2
|
-
import
|
|
1
|
+
import type { Editor, ViewFactory } from '@milkdown/core';
|
|
2
|
+
import { Mark, Node } from 'prosemirror-model';
|
|
3
3
|
import type { Decoration, EditorView, NodeView } from 'prosemirror-view';
|
|
4
4
|
import { DefineComponent } from 'vue';
|
|
5
|
-
export declare const createVueView: (addPortal: (portal: DefineComponent, key: string) => void, removePortalByKey: (key: string) => void) => (component: DefineComponent) =>
|
|
5
|
+
export declare const createVueView: (addPortal: (portal: DefineComponent, key: string) => void, removePortalByKey: (key: string) => void) => (component: DefineComponent) => ViewFactory;
|
|
6
6
|
export declare class VueNodeView implements NodeView {
|
|
7
7
|
private component;
|
|
8
8
|
private addPortal;
|
|
@@ -15,7 +15,7 @@ export declare class VueNodeView implements NodeView {
|
|
|
15
15
|
dom: HTMLElement | undefined;
|
|
16
16
|
contentDOM: HTMLElement | undefined;
|
|
17
17
|
key: string;
|
|
18
|
-
constructor(component: DefineComponent, addPortal: (portal: DefineComponent, key: string) => void, removePortalByKey: (key: string) => void, editor: Editor, node: Node, view: EditorView, getPos: boolean | (() => number), decorations: Decoration[]);
|
|
18
|
+
constructor(component: DefineComponent, addPortal: (portal: DefineComponent, key: string) => void, removePortalByKey: (key: string) => void, editor: Editor, node: Node | Mark, view: EditorView, getPos: boolean | (() => number), decorations: Decoration[]);
|
|
19
19
|
renderPortal(): void;
|
|
20
20
|
destroy(): void;
|
|
21
21
|
ignoreMutation(mutation: MutationRecord | {
|
package/lib/VueNodeView.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"VueNodeView.d.ts","sourceRoot":"","sources":["../src/VueNodeView.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,MAAM,EAAE,
|
|
1
|
+
{"version":3,"file":"VueNodeView.d.ts","sourceRoot":"","sources":["../src/VueNodeView.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE1D,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAC/C,OAAO,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACzE,OAAO,EAAE,eAAe,EAAgC,MAAM,KAAK,CAAC;AAIpE,eAAO,MAAM,aAAa,uBACD,eAAe,OAAO,MAAM,KAAK,IAAI,2BAA2B,MAAM,KAAK,IAAI,iBACxF,eAAe,KAAG,WAEuE,CAAC;AAE1G,qBAAa,WAAY,YAAW,QAAQ;IAMpC,OAAO,CAAC,SAAS;IACjB,OAAO,CAAC,SAAS;IACjB,OAAO,CAAC,iBAAiB;IACzB,OAAO,CAAC,MAAM;IACd,OAAO,CAAC,IAAI;IACZ,OAAO,CAAC,IAAI;IACZ,OAAO,CAAC,MAAM;IACd,OAAO,CAAC,WAAW;IAZvB,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,MAAM,EAAE,MAAM,EACd,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;IAyBZ,OAAO;IAMP,cAAc,CAAC,QAAQ,EAAE,cAAc,GAAG;QAAE,IAAI,EAAE,WAAW,CAAC;QAAC,MAAM,EAAE,OAAO,CAAA;KAAE;CAMnF"}
|
package/lib/VueNodeView.js
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { getId } from '@milkdown/utils';
|
|
2
|
+
import { Mark, Node } from 'prosemirror-model';
|
|
2
3
|
import { defineComponent, h, Teleport } from 'vue';
|
|
3
4
|
import { Content, VueNodeContainer } from './VueNode';
|
|
4
5
|
export const createVueView = (addPortal, removePortalByKey) => (component) => (editor, _type, node, view, getPos, decorations) => new VueNodeView(component, addPortal, removePortalByKey, editor, node, view, getPos, decorations);
|
|
@@ -13,9 +14,13 @@ export class VueNodeView {
|
|
|
13
14
|
this.getPos = getPos;
|
|
14
15
|
this.decorations = decorations;
|
|
15
16
|
this.key = getId();
|
|
16
|
-
const dom = document.createElement('div');
|
|
17
|
-
|
|
17
|
+
const dom = document.createElement(node instanceof Mark ? 'span' : 'div');
|
|
18
|
+
dom.classList.add('dom-wrapper');
|
|
19
|
+
const contentDOM = node instanceof Node && node.isLeaf
|
|
20
|
+
? undefined
|
|
21
|
+
: document.createElement(node instanceof Mark ? 'span' : 'div');
|
|
18
22
|
if (contentDOM) {
|
|
23
|
+
contentDOM.classList.add('content-dom');
|
|
19
24
|
dom.appendChild(contentDOM);
|
|
20
25
|
}
|
|
21
26
|
this.dom = dom;
|
package/lib/VueNodeView.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"VueNodeView.js","sourceRoot":"","sources":["../src/VueNodeView.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;
|
|
1
|
+
{"version":3,"file":"VueNodeView.js","sourceRoot":"","sources":["../src/VueNodeView.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,13 +1,14 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@milkdown/vue",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.13.2",
|
|
4
4
|
"main": "lib/index.js",
|
|
5
5
|
"module": "lib/index.js",
|
|
6
6
|
"types": "lib/index.d.ts",
|
|
7
7
|
"sideEffects": false,
|
|
8
8
|
"license": "MIT",
|
|
9
9
|
"files": [
|
|
10
|
-
"lib"
|
|
10
|
+
"lib",
|
|
11
|
+
"src"
|
|
11
12
|
],
|
|
12
13
|
"keywords": [
|
|
13
14
|
"milkdown",
|
|
@@ -15,7 +16,7 @@
|
|
|
15
16
|
"vue"
|
|
16
17
|
],
|
|
17
18
|
"dependencies": {
|
|
18
|
-
"@milkdown/utils": "4.
|
|
19
|
+
"@milkdown/utils": "4.13.2",
|
|
19
20
|
"tslib": "^2.2.0"
|
|
20
21
|
},
|
|
21
22
|
"peerDependencies": {
|
package/src/Editor.tsx
ADDED
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
/* Copyright 2021, Milkdown by Mirone. */
|
|
2
|
+
import { Editor, editorViewCtx, ViewFactory } from '@milkdown/core';
|
|
3
|
+
import {
|
|
4
|
+
DefineComponent,
|
|
5
|
+
defineComponent,
|
|
6
|
+
Fragment,
|
|
7
|
+
h,
|
|
8
|
+
inject,
|
|
9
|
+
InjectionKey,
|
|
10
|
+
markRaw,
|
|
11
|
+
onMounted,
|
|
12
|
+
onUnmounted,
|
|
13
|
+
provide,
|
|
14
|
+
Ref,
|
|
15
|
+
ref,
|
|
16
|
+
shallowReactive,
|
|
17
|
+
} from 'vue';
|
|
18
|
+
|
|
19
|
+
import { PortalPair, Portals } from './Portals';
|
|
20
|
+
import { createVueView } from './VueNodeView';
|
|
21
|
+
|
|
22
|
+
const rendererKey: InjectionKey<(component: DefineComponent) => ViewFactory> = Symbol();
|
|
23
|
+
|
|
24
|
+
type GetEditor = (container: HTMLDivElement, renderVue: (Component: DefineComponent) => ViewFactory) => Editor;
|
|
25
|
+
|
|
26
|
+
const useGetEditor = (getEditor: GetEditor) => {
|
|
27
|
+
const divRef = ref<HTMLDivElement | null>(null);
|
|
28
|
+
const renderVue = inject<(Component: DefineComponent) => ViewFactory>(rendererKey, () => {
|
|
29
|
+
throw new Error();
|
|
30
|
+
});
|
|
31
|
+
const editorRef = markRaw<{ editor?: Editor }>({});
|
|
32
|
+
onMounted(() => {
|
|
33
|
+
if (!divRef.value) return;
|
|
34
|
+
|
|
35
|
+
getEditor(divRef.value, renderVue)
|
|
36
|
+
.create()
|
|
37
|
+
.then((editor) => {
|
|
38
|
+
editorRef.editor = editor;
|
|
39
|
+
return;
|
|
40
|
+
})
|
|
41
|
+
.catch((e) => console.error(e));
|
|
42
|
+
});
|
|
43
|
+
onUnmounted(() => {
|
|
44
|
+
const view = editorRef.editor?.action((ctx) => ctx.get(editorViewCtx));
|
|
45
|
+
if (!view) return;
|
|
46
|
+
|
|
47
|
+
view.dom.parentElement?.remove();
|
|
48
|
+
view.destroy();
|
|
49
|
+
});
|
|
50
|
+
|
|
51
|
+
return { divRef, editorRef };
|
|
52
|
+
};
|
|
53
|
+
|
|
54
|
+
export const EditorComponent = defineComponent((props: { editor: GetEditor; editorRef?: Ref<EditorRef> }) => {
|
|
55
|
+
const refs = useGetEditor(props.editor);
|
|
56
|
+
if (props.editorRef) {
|
|
57
|
+
props.editorRef.value = {
|
|
58
|
+
get: () => refs.editorRef.editor,
|
|
59
|
+
dom: () => refs.divRef.value,
|
|
60
|
+
};
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
return () => <div ref={refs.divRef} />;
|
|
64
|
+
});
|
|
65
|
+
EditorComponent.props = ['editor', 'editorRef'];
|
|
66
|
+
|
|
67
|
+
export type EditorRef = { get: () => Editor | undefined; dom: () => HTMLDivElement | null };
|
|
68
|
+
|
|
69
|
+
export const VueEditor = defineComponent((props: { editor: GetEditor; editorRef?: Ref<EditorRef> }) => {
|
|
70
|
+
const portals = shallowReactive<PortalPair[]>([]);
|
|
71
|
+
const addPortal = markRaw((component: DefineComponent, key: string) => {
|
|
72
|
+
portals.push([key, component]);
|
|
73
|
+
});
|
|
74
|
+
const removePortalByKey = markRaw((key: string) => {
|
|
75
|
+
const index = portals.findIndex((p) => p[0] === key);
|
|
76
|
+
portals.splice(index, 1);
|
|
77
|
+
});
|
|
78
|
+
const renderVue = createVueView(addPortal, removePortalByKey);
|
|
79
|
+
provide(rendererKey, renderVue);
|
|
80
|
+
|
|
81
|
+
return () => (
|
|
82
|
+
<>
|
|
83
|
+
<Portals portals={portals} />
|
|
84
|
+
<EditorComponent editorRef={props.editorRef} editor={props.editor} />
|
|
85
|
+
</>
|
|
86
|
+
);
|
|
87
|
+
});
|
|
88
|
+
VueEditor.props = ['editor', 'editorRef'];
|
|
89
|
+
|
|
90
|
+
export const useEditor = (getEditor: GetEditor) => {
|
|
91
|
+
return (...args: Parameters<GetEditor>) => getEditor(...args);
|
|
92
|
+
};
|
package/src/Portals.tsx
ADDED
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
/* Copyright 2021, Milkdown by Mirone. */
|
|
2
|
+
import { DefineComponent, defineComponent, Fragment, h, nextTick, ref, shallowRef, watch } from 'vue';
|
|
3
|
+
export type PortalPair = [key: string, component: DefineComponent];
|
|
4
|
+
|
|
5
|
+
const getId = (pairs: PortalPair[]) => pairs.map((p) => p[0]).join('\n');
|
|
6
|
+
|
|
7
|
+
export const Portals = defineComponent((props: { portals: PortalPair[] }) => {
|
|
8
|
+
const portalComponents = shallowRef<Array<DefineComponent>>([]);
|
|
9
|
+
const prev = ref<string>('');
|
|
10
|
+
const renderList = shallowRef<() => JSX.Element[]>(() => []);
|
|
11
|
+
|
|
12
|
+
watch(
|
|
13
|
+
() => getId(props.portals),
|
|
14
|
+
(ids) => {
|
|
15
|
+
if (ids !== prev.value) {
|
|
16
|
+
prev.value = ids;
|
|
17
|
+
const next = props.portals.map((p) => p[1]);
|
|
18
|
+
portalComponents.value = next;
|
|
19
|
+
}
|
|
20
|
+
},
|
|
21
|
+
);
|
|
22
|
+
|
|
23
|
+
nextTick(() => {
|
|
24
|
+
renderList.value = () => portalComponents.value.map((P) => <P />);
|
|
25
|
+
});
|
|
26
|
+
|
|
27
|
+
return () => {
|
|
28
|
+
return <>{renderList.value()}</>;
|
|
29
|
+
};
|
|
30
|
+
});
|
|
31
|
+
Portals.props = ['portals'];
|
package/src/VueNode.tsx
ADDED
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
/* Copyright 2021, Milkdown by Mirone. */
|
|
2
|
+
import { Editor } from '@milkdown/core';
|
|
3
|
+
import { Mark, Node } from 'prosemirror-model';
|
|
4
|
+
import { Decoration, EditorView } from 'prosemirror-view';
|
|
5
|
+
import { defineComponent, Fragment, h, InjectionKey, provide, ref, watchEffect } from 'vue';
|
|
6
|
+
|
|
7
|
+
export type NodeContext = {
|
|
8
|
+
editor: Editor;
|
|
9
|
+
node: Node | Mark;
|
|
10
|
+
view: EditorView;
|
|
11
|
+
getPos: boolean | (() => number);
|
|
12
|
+
decorations: Decoration[];
|
|
13
|
+
};
|
|
14
|
+
|
|
15
|
+
export const nodeMetadata: InjectionKey<NodeContext> = Symbol();
|
|
16
|
+
|
|
17
|
+
export const VueNodeContainer = defineComponent(({ editor, node, view, getPos, decorations }: NodeContext, context) => {
|
|
18
|
+
provide(nodeMetadata, {
|
|
19
|
+
editor,
|
|
20
|
+
node,
|
|
21
|
+
view,
|
|
22
|
+
getPos,
|
|
23
|
+
decorations,
|
|
24
|
+
});
|
|
25
|
+
return () => <>{context.slots.default?.() ?? []}</>;
|
|
26
|
+
});
|
|
27
|
+
VueNodeContainer.props = ['editor', 'node', 'view', 'getPos', 'decorations'];
|
|
28
|
+
|
|
29
|
+
export const Content = defineComponent((props: { dom: HTMLElement }) => {
|
|
30
|
+
const containerRef = ref<HTMLDivElement | null>(null);
|
|
31
|
+
watchEffect(() => {
|
|
32
|
+
if (!props.dom || !containerRef.value) return;
|
|
33
|
+
containerRef.value.appendChild(props.dom);
|
|
34
|
+
});
|
|
35
|
+
return () => <div ref={containerRef} />;
|
|
36
|
+
});
|
|
37
|
+
Content.props = ['dom'];
|
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
/* Copyright 2021, Milkdown by Mirone. */
|
|
2
|
+
import type { Editor, ViewFactory } from '@milkdown/core';
|
|
3
|
+
import { getId } from '@milkdown/utils';
|
|
4
|
+
import { Mark, Node } from 'prosemirror-model';
|
|
5
|
+
import type { Decoration, EditorView, NodeView } from 'prosemirror-view';
|
|
6
|
+
import { DefineComponent, defineComponent, h, Teleport } from 'vue';
|
|
7
|
+
|
|
8
|
+
import { Content, VueNodeContainer } from './VueNode';
|
|
9
|
+
|
|
10
|
+
export const createVueView =
|
|
11
|
+
(addPortal: (portal: DefineComponent, key: string) => void, removePortalByKey: (key: string) => void) =>
|
|
12
|
+
(component: DefineComponent): ViewFactory =>
|
|
13
|
+
(editor, _type, node, view, getPos, decorations) =>
|
|
14
|
+
new VueNodeView(component, addPortal, removePortalByKey, editor, node, view, getPos, decorations);
|
|
15
|
+
|
|
16
|
+
export class VueNodeView implements NodeView {
|
|
17
|
+
dom: HTMLElement | undefined;
|
|
18
|
+
contentDOM: HTMLElement | undefined;
|
|
19
|
+
key: string;
|
|
20
|
+
|
|
21
|
+
constructor(
|
|
22
|
+
private component: DefineComponent,
|
|
23
|
+
private addPortal: (portal: DefineComponent, key: string) => void,
|
|
24
|
+
private removePortalByKey: (key: string) => void,
|
|
25
|
+
private editor: Editor,
|
|
26
|
+
private node: Node | Mark,
|
|
27
|
+
private view: EditorView,
|
|
28
|
+
private getPos: boolean | (() => number),
|
|
29
|
+
private decorations: Decoration[],
|
|
30
|
+
) {
|
|
31
|
+
this.key = getId();
|
|
32
|
+
const dom = document.createElement(node instanceof Mark ? 'span' : 'div');
|
|
33
|
+
dom.classList.add('dom-wrapper');
|
|
34
|
+
|
|
35
|
+
const contentDOM =
|
|
36
|
+
node instanceof Node && node.isLeaf
|
|
37
|
+
? undefined
|
|
38
|
+
: document.createElement(node instanceof Mark ? 'span' : 'div');
|
|
39
|
+
if (contentDOM) {
|
|
40
|
+
contentDOM.classList.add('content-dom');
|
|
41
|
+
dom.appendChild(contentDOM);
|
|
42
|
+
}
|
|
43
|
+
this.dom = dom;
|
|
44
|
+
this.contentDOM = contentDOM;
|
|
45
|
+
this.renderPortal();
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
renderPortal() {
|
|
49
|
+
if (!this.dom) return;
|
|
50
|
+
|
|
51
|
+
const CustomComponent = this.component;
|
|
52
|
+
const Portal = defineComponent(() => {
|
|
53
|
+
return () => (
|
|
54
|
+
<Teleport to={this.dom}>
|
|
55
|
+
<VueNodeContainer
|
|
56
|
+
key={this.key}
|
|
57
|
+
editor={this.editor}
|
|
58
|
+
node={this.node}
|
|
59
|
+
view={this.view}
|
|
60
|
+
getPos={this.getPos}
|
|
61
|
+
decorations={this.decorations}
|
|
62
|
+
>
|
|
63
|
+
<CustomComponent>
|
|
64
|
+
<Content dom={this.contentDOM} />
|
|
65
|
+
</CustomComponent>
|
|
66
|
+
</VueNodeContainer>
|
|
67
|
+
</Teleport>
|
|
68
|
+
);
|
|
69
|
+
});
|
|
70
|
+
this.addPortal(Portal, this.key);
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
destroy() {
|
|
74
|
+
this.dom = undefined;
|
|
75
|
+
this.contentDOM = undefined;
|
|
76
|
+
this.removePortalByKey(this.key);
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
ignoreMutation(mutation: MutationRecord | { type: 'selection'; target: Element }) {
|
|
80
|
+
if (!this.contentDOM) {
|
|
81
|
+
return true;
|
|
82
|
+
}
|
|
83
|
+
return !this.contentDOM.contains(mutation.target);
|
|
84
|
+
}
|
|
85
|
+
}
|
package/src/index.ts
ADDED
package/src/utils.ts
ADDED
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
/* Copyright 2021, Milkdown by Mirone. */
|
|
2
|
+
type Prepend<T, U extends unknown[]> = [T, ...U];
|
|
3
|
+
type Keys_<T extends Record<string, unknown>, U extends PropertyKey[]> = {
|
|
4
|
+
[P in keyof T]: Record<string, unknown> extends Omit<T, P> ? [P] : Prepend<P, Keys_<Omit<T, P>, U>>;
|
|
5
|
+
}[keyof T];
|
|
6
|
+
export type Keys<T extends Record<string, unknown>> = Keys_<T, []>;
|