@prosekit/vue 0.3.9 → 0.3.11
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/dist/_tsup-dts-rollup.d.ts +29 -111
- package/dist/{chunk-RHKBWCKH.js → chunk-DJHAZPRE.js} +4 -1
- package/dist/prosekit-vue-autocomplete.js +1 -1
- package/dist/prosekit-vue-block-handle.js +1 -1
- package/dist/prosekit-vue-inline-popover.js +1 -1
- package/dist/prosekit-vue-popover.js +1 -1
- package/dist/prosekit-vue-resizable.js +1 -1
- package/dist/prosekit-vue-tooltip.js +1 -1
- package/dist/prosekit-vue.d.ts +3 -3
- package/dist/prosekit-vue.js +56 -181
- package/package.json +4 -4
@@ -8,9 +8,6 @@ import { BlockDragHandleProps } from '@prosekit/web/block-handle';
|
|
8
8
|
import { BlockPopoverProps } from '@prosekit/web/block-handle';
|
9
9
|
import { ComponentOptionsMixin } from 'vue';
|
10
10
|
import { ComputedRef } from 'vue';
|
11
|
-
import { CoreNodeView } from '@prosemirror-adapter/core';
|
12
|
-
import type { CoreNodeViewSpec } from '@prosemirror-adapter/core';
|
13
|
-
import type { CoreNodeViewUserOptions } from '@prosemirror-adapter/core';
|
14
11
|
import type { Decoration } from '@prosekit/pm/view';
|
15
12
|
import type { DecorationSource } from '@prosekit/pm/view';
|
16
13
|
import { config as default_alias_1 } from '@prosekit/dev/config-vitest';
|
@@ -20,14 +17,11 @@ import { Editor } from '@prosekit/core';
|
|
20
17
|
import type { EditorState } from '@prosekit/pm/state';
|
21
18
|
import type { EditorView } from '@prosekit/pm/view';
|
22
19
|
import { Extension } from '@prosekit/core';
|
23
|
-
import { ExtensionTyping } from '@prosekit/core';
|
24
20
|
import { ExtractPropTypes } from 'vue';
|
25
|
-
import
|
21
|
+
import { HTMLAttributes } from 'vue';
|
26
22
|
import { InlinePopoverProps } from '@prosekit/web/inline-popover';
|
27
23
|
import { Keymap } from '@prosekit/core';
|
28
24
|
import { MaybeRefOrGetter } from 'vue';
|
29
|
-
import type { Node as Node_2 } from '@prosekit/pm/model';
|
30
|
-
import type { NodeViewConstructor } from '@prosekit/pm/view';
|
31
25
|
import { Options } from 'tsup';
|
32
26
|
import { PopoverContentProps } from '@prosekit/web/popover';
|
33
27
|
import { PopoverRootProps } from '@prosekit/web/popover';
|
@@ -35,59 +29,39 @@ import { PopoverTriggerProps } from '@prosekit/web/popover';
|
|
35
29
|
import { Priority } from '@prosekit/core';
|
36
30
|
import type { ProseMirrorNode } from '@prosekit/pm/model';
|
37
31
|
import { PublicProps } from 'vue';
|
38
|
-
import type { Ref } from 'vue';
|
39
|
-
import { RendererElement } from 'vue';
|
40
|
-
import { RendererNode } from 'vue';
|
41
32
|
import { ResizableHandleProps } from '@prosekit/web/resizable';
|
42
33
|
import { ResizableRootProps } from '@prosekit/web/resizable';
|
43
34
|
import { ShallowRef } from 'vue';
|
44
35
|
import { TooltipContentProps } from '@prosekit/web/tooltip';
|
45
36
|
import { TooltipRootProps } from '@prosekit/web/tooltip';
|
46
37
|
import { TooltipTriggerProps } from '@prosekit/web/tooltip';
|
47
|
-
import {
|
48
|
-
import type { VNodeRef } from 'vue';
|
38
|
+
import { VNodeRef } from 'vue';
|
49
39
|
|
50
|
-
declare const AutocompleteEmpty: DefineSetupFnComponent<Partial<AutocompleteEmptyProps> &
|
51
|
-
class?: string;
|
52
|
-
}>;
|
40
|
+
declare const AutocompleteEmpty: DefineSetupFnComponent<Partial<AutocompleteEmptyProps> & HTMLAttributes>;
|
53
41
|
export { AutocompleteEmpty }
|
54
42
|
export { AutocompleteEmpty as AutocompleteEmpty_alias_1 }
|
55
43
|
|
56
|
-
declare const AutocompleteItem: DefineSetupFnComponent<Partial<AutocompleteItemProps> &
|
57
|
-
class?: string;
|
58
|
-
}>;
|
44
|
+
declare const AutocompleteItem: DefineSetupFnComponent<Partial<AutocompleteItemProps> & HTMLAttributes>;
|
59
45
|
export { AutocompleteItem }
|
60
46
|
export { AutocompleteItem as AutocompleteItem_alias_1 }
|
61
47
|
|
62
|
-
declare const AutocompleteList: DefineSetupFnComponent<Partial<AutocompleteListProps> &
|
63
|
-
class?: string;
|
64
|
-
}>;
|
48
|
+
declare const AutocompleteList: DefineSetupFnComponent<Partial<AutocompleteListProps> & HTMLAttributes>;
|
65
49
|
export { AutocompleteList }
|
66
50
|
export { AutocompleteList as AutocompleteList_alias_1 }
|
67
51
|
|
68
|
-
declare const AutocompletePopover: DefineSetupFnComponent<Partial<AutocompletePopoverProps> &
|
69
|
-
class?: string;
|
70
|
-
}>;
|
52
|
+
declare const AutocompletePopover: DefineSetupFnComponent<Partial<AutocompletePopoverProps> & HTMLAttributes>;
|
71
53
|
export { AutocompletePopover }
|
72
54
|
export { AutocompletePopover as AutocompletePopover_alias_1 }
|
73
55
|
|
74
|
-
declare const BlockDragHandle: DefineSetupFnComponent<Partial<BlockDragHandleProps> &
|
75
|
-
class?: string;
|
76
|
-
}>;
|
56
|
+
declare const BlockDragHandle: DefineSetupFnComponent<Partial<BlockDragHandleProps> & HTMLAttributes>;
|
77
57
|
export { BlockDragHandle }
|
78
58
|
export { BlockDragHandle as BlockDragHandle_alias_1 }
|
79
59
|
|
80
|
-
declare const BlockPopover: DefineSetupFnComponent<Partial<BlockPopoverProps> &
|
81
|
-
class?: string;
|
82
|
-
}>;
|
60
|
+
declare const BlockPopover: DefineSetupFnComponent<Partial<BlockPopoverProps> & HTMLAttributes>;
|
83
61
|
export { BlockPopover }
|
84
62
|
export { BlockPopover as BlockPopover_alias_1 }
|
85
63
|
|
86
|
-
export declare function createComponent<Props extends object>(tagName: string, displayName: string, defaultProps: Props): DefineSetupFnComponent<Partial<Props> &
|
87
|
-
class?: string;
|
88
|
-
}>;
|
89
|
-
|
90
|
-
export declare type CreateVueNodeView = ReturnType<typeof useVueNodeViewCreator>;
|
64
|
+
export declare function createComponent<Props extends object>(tagName: string, displayName: string, defaultProps: Props): DefineSetupFnComponent<Partial<Props> & HTMLAttributes>;
|
91
65
|
|
92
66
|
export declare const default_alias: Options | Options[] | ((overrideOptions: Options) => Options | Options[] | Promise<Options | Options[]>);
|
93
67
|
|
@@ -102,36 +76,19 @@ declare function defineVueNodeView(options: VueNodeViewOptions): Extension;
|
|
102
76
|
export { defineVueNodeView }
|
103
77
|
export { defineVueNodeView as defineVueNodeView_alias_1 }
|
104
78
|
|
105
|
-
|
106
|
-
* @internal
|
107
|
-
*/
|
108
|
-
export declare function defineVueNodeViewFactory(nodeViewFactory: NodeViewFactory): Extension<ExtensionTyping<any, any, any>>;
|
109
|
-
|
110
|
-
declare const InlinePopover: DefineSetupFnComponent<Partial<InlinePopoverProps> & {
|
111
|
-
class?: string;
|
112
|
-
}>;
|
79
|
+
declare const InlinePopover: DefineSetupFnComponent<Partial<InlinePopoverProps> & HTMLAttributes>;
|
113
80
|
export { InlinePopover }
|
114
81
|
export { InlinePopover as InlinePopover_alias_1 }
|
115
82
|
|
116
|
-
|
117
|
-
|
118
|
-
export declare const nodeViewFactoryKey: InjectionKey<NodeViewFactory>;
|
119
|
-
|
120
|
-
declare const PopoverContent: DefineSetupFnComponent<Partial<PopoverContentProps> & {
|
121
|
-
class?: string;
|
122
|
-
}>;
|
83
|
+
declare const PopoverContent: DefineSetupFnComponent<Partial<PopoverContentProps> & HTMLAttributes>;
|
123
84
|
export { PopoverContent }
|
124
85
|
export { PopoverContent as PopoverContent_alias_1 }
|
125
86
|
|
126
|
-
declare const PopoverRoot: DefineSetupFnComponent<Partial<PopoverRootProps> &
|
127
|
-
class?: string;
|
128
|
-
}>;
|
87
|
+
declare const PopoverRoot: DefineSetupFnComponent<Partial<PopoverRootProps> & HTMLAttributes>;
|
129
88
|
export { PopoverRoot }
|
130
89
|
export { PopoverRoot as PopoverRoot_alias_1 }
|
131
90
|
|
132
|
-
declare const PopoverTrigger: DefineSetupFnComponent<Partial<PopoverTriggerProps> &
|
133
|
-
class?: string;
|
134
|
-
}>;
|
91
|
+
declare const PopoverTrigger: DefineSetupFnComponent<Partial<PopoverTriggerProps> & HTMLAttributes>;
|
135
92
|
export { PopoverTrigger }
|
136
93
|
export { PopoverTrigger as PopoverTrigger_alias_1 }
|
137
94
|
|
@@ -162,33 +119,23 @@ export { ProseKitProps as ProseKitProps_alias_1 }
|
|
162
119
|
*/
|
163
120
|
export declare function provideEditor(editor: Editor): void;
|
164
121
|
|
165
|
-
declare const ResizableHandle: DefineSetupFnComponent<Partial<ResizableHandleProps> &
|
166
|
-
class?: string;
|
167
|
-
}>;
|
122
|
+
declare const ResizableHandle: DefineSetupFnComponent<Partial<ResizableHandleProps> & HTMLAttributes>;
|
168
123
|
export { ResizableHandle }
|
169
124
|
export { ResizableHandle as ResizableHandle_alias_1 }
|
170
125
|
|
171
|
-
declare const ResizableRoot: DefineSetupFnComponent<Partial<ResizableRootProps> &
|
172
|
-
class?: string;
|
173
|
-
}>;
|
126
|
+
declare const ResizableRoot: DefineSetupFnComponent<Partial<ResizableRootProps> & HTMLAttributes>;
|
174
127
|
export { ResizableRoot }
|
175
128
|
export { ResizableRoot as ResizableRoot_alias_1 }
|
176
129
|
|
177
|
-
declare const TooltipContent: DefineSetupFnComponent<Partial<TooltipContentProps> &
|
178
|
-
class?: string;
|
179
|
-
}>;
|
130
|
+
declare const TooltipContent: DefineSetupFnComponent<Partial<TooltipContentProps> & HTMLAttributes>;
|
180
131
|
export { TooltipContent }
|
181
132
|
export { TooltipContent as TooltipContent_alias_1 }
|
182
133
|
|
183
|
-
declare const TooltipRoot: DefineSetupFnComponent<Partial<TooltipRootProps> &
|
184
|
-
class?: string;
|
185
|
-
}>;
|
134
|
+
declare const TooltipRoot: DefineSetupFnComponent<Partial<TooltipRootProps> & HTMLAttributes>;
|
186
135
|
export { TooltipRoot }
|
187
136
|
export { TooltipRoot as TooltipRoot_alias_1 }
|
188
137
|
|
189
|
-
declare const TooltipTrigger: DefineSetupFnComponent<Partial<TooltipTriggerProps> &
|
190
|
-
class?: string;
|
191
|
-
}>;
|
138
|
+
declare const TooltipTrigger: DefineSetupFnComponent<Partial<TooltipTriggerProps> & HTMLAttributes>;
|
192
139
|
export { TooltipTrigger }
|
193
140
|
export { TooltipTrigger as TooltipTrigger_alias_1 }
|
194
141
|
|
@@ -260,8 +207,6 @@ declare function useKeymap(keymap: MaybeRefOrGetter<Keymap>, options?: UseExtens
|
|
260
207
|
export { useKeymap }
|
261
208
|
export { useKeymap as useKeymap_alias_1 }
|
262
209
|
|
263
|
-
export declare function useNodeViewFactory(): NodeViewFactory;
|
264
|
-
|
265
210
|
/**
|
266
211
|
* @internal
|
267
212
|
*/
|
@@ -276,17 +221,9 @@ declare function useStateUpdate(handler: (state: EditorState) => void, options?:
|
|
276
221
|
export { useStateUpdate }
|
277
222
|
export { useStateUpdate as useStateUpdate_alias_1 }
|
278
223
|
|
279
|
-
|
280
|
-
|
281
|
-
|
282
|
-
|
283
|
-
export declare class VueNodeView extends CoreNodeView<VueNodeViewComponent> implements VueRenderer<VueNodeViewProps> {
|
284
|
-
key: string;
|
285
|
-
context: VueNodeViewProps;
|
286
|
-
updateContext: () => void;
|
287
|
-
render: () => VueRendererComponent;
|
288
|
-
}
|
289
|
-
|
224
|
+
/**
|
225
|
+
* @public
|
226
|
+
*/
|
290
227
|
declare type VueNodeViewComponent = DefineComponent<VueNodeViewProps, any, any>;
|
291
228
|
export { VueNodeViewComponent }
|
292
229
|
export { VueNodeViewComponent as VueNodeViewComponent_alias_1 }
|
@@ -309,12 +246,15 @@ declare interface VueNodeViewOptions extends BaseNodeViewOptions {
|
|
309
246
|
export { VueNodeViewOptions }
|
310
247
|
export { VueNodeViewOptions as VueNodeViewOptions_alias_1 }
|
311
248
|
|
249
|
+
/**
|
250
|
+
* @public
|
251
|
+
*/
|
312
252
|
declare interface VueNodeViewProps {
|
313
253
|
contentRef: VNodeRef;
|
314
254
|
view: EditorView;
|
315
255
|
getPos: () => number | undefined;
|
316
256
|
setAttrs: (attrs: Attrs) => void;
|
317
|
-
node: ShallowRef<
|
257
|
+
node: ShallowRef<ProseMirrorNode>;
|
318
258
|
selected: ShallowRef<boolean>;
|
319
259
|
decorations: ShallowRef<readonly Decoration[]>;
|
320
260
|
innerDecorations: ShallowRef<DecorationSource>;
|
@@ -322,31 +262,9 @@ declare interface VueNodeViewProps {
|
|
322
262
|
export { VueNodeViewProps }
|
323
263
|
export { VueNodeViewProps as VueNodeViewProps_alias_1 }
|
324
264
|
|
325
|
-
|
326
|
-
|
327
|
-
|
328
|
-
|
329
|
-
export declare interface VueRenderer<Context> {
|
330
|
-
key: string;
|
331
|
-
context: Context;
|
332
|
-
render: () => VueRendererComponent;
|
333
|
-
updateContext: () => void;
|
334
|
-
}
|
335
|
-
|
336
|
-
export declare type VueRendererComponent = DefineComponent<any, any, any>;
|
337
|
-
|
338
|
-
export declare interface VueRendererResult {
|
339
|
-
readonly portals: Ref<Record<string, VueRendererComponent>>;
|
340
|
-
readonly renderVueRenderer: (renderer: VueRenderer<unknown>) => void;
|
341
|
-
readonly removeVueRenderer: (renderer: VueRenderer<unknown>) => void;
|
342
|
-
}
|
343
|
-
|
344
|
-
export declare const VueViewsConsumer: DefineComponent< {}, () => null, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes< {}>>, {}, {}>;
|
345
|
-
|
346
|
-
declare const VueViewsProvider: DefineComponent< {}, () => VNode<RendererNode, RendererElement, {
|
347
|
-
[key: string]: any;
|
348
|
-
}>, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes< {}>>, {}, {}>;
|
349
|
-
export { VueViewsProvider }
|
350
|
-
export { VueViewsProvider as VueViewsProvider_alias_1 }
|
265
|
+
/**
|
266
|
+
* @internal
|
267
|
+
*/
|
268
|
+
export declare const VueViewsConsumer: DefineComponent<{}, () => null, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes< {}>>, {}, {}>;
|
351
269
|
|
352
270
|
export { }
|
@@ -3,7 +3,10 @@ import {
|
|
3
3
|
} from "./chunk-KCTUNTM2.js";
|
4
4
|
|
5
5
|
// src/components/create-component.ts
|
6
|
-
import {
|
6
|
+
import {
|
7
|
+
defineComponent,
|
8
|
+
h
|
9
|
+
} from "vue";
|
7
10
|
function createComponent(tagName, displayName, defaultProps) {
|
8
11
|
let propertyNames = Object.keys(defaultProps), hasEditor = Object.hasOwn(defaultProps, "editor");
|
9
12
|
return defineComponent(
|
package/dist/prosekit-vue.d.ts
CHANGED
@@ -1,12 +1,12 @@
|
|
1
1
|
export { ProseKit } from './_tsup-dts-rollup';
|
2
2
|
export { ProseKitProps } from './_tsup-dts-rollup';
|
3
3
|
export { defineVueNodeView } from './_tsup-dts-rollup';
|
4
|
+
export { VueNodeViewComponent } from './_tsup-dts-rollup';
|
4
5
|
export { VueNodeViewOptions } from './_tsup-dts-rollup';
|
6
|
+
export { VueNodeViewProps } from './_tsup-dts-rollup';
|
7
|
+
export { useDocChange } from './_tsup-dts-rollup';
|
5
8
|
export { useEditor } from './_tsup-dts-rollup';
|
6
9
|
export { useExtension } from './_tsup-dts-rollup';
|
7
10
|
export { UseExtensionOptions } from './_tsup-dts-rollup';
|
8
11
|
export { useKeymap } from './_tsup-dts-rollup';
|
9
12
|
export { useStateUpdate } from './_tsup-dts-rollup';
|
10
|
-
export { useDocChange } from './_tsup-dts-rollup';
|
11
|
-
export { VueNodeViewComponent } from './_tsup-dts-rollup';
|
12
|
-
export { VueNodeViewProps } from './_tsup-dts-rollup';
|
package/dist/prosekit-vue.js
CHANGED
@@ -5,174 +5,23 @@ import {
|
|
5
5
|
|
6
6
|
// src/components/prosekit.ts
|
7
7
|
import "@prosekit/core";
|
8
|
-
import {
|
9
|
-
|
10
|
-
// src/views/vue-views-provider.ts
|
11
|
-
import { Fragment, defineComponent as defineComponent2, h as h2, provide } from "vue";
|
12
|
-
|
13
|
-
// src/views/node-view/node-view-context.ts
|
14
|
-
import { ProseKitError } from "@prosekit/core";
|
15
|
-
import { inject } from "vue";
|
16
|
-
var nodeViewFactoryKey = Symbol(
|
17
|
-
"[ProseKit]useNodeViewFactory"
|
18
|
-
);
|
19
|
-
function useNodeViewFactory() {
|
20
|
-
let nodeViewFactory = inject(nodeViewFactoryKey);
|
21
|
-
if (!nodeViewFactory)
|
22
|
-
throw new ProseKitError("Cannot find node view factory context.");
|
23
|
-
return nodeViewFactory;
|
24
|
-
}
|
25
|
-
|
26
|
-
// src/views/node-view/vue-node-view.ts
|
27
|
-
import { _getId } from "@prosekit/core";
|
28
|
-
import { CoreNodeView } from "@prosemirror-adapter/core";
|
29
|
-
import { Teleport, defineComponent, h, markRaw, shallowRef } from "vue";
|
30
|
-
var VueNodeView = class extends CoreNodeView {
|
31
|
-
constructor() {
|
32
|
-
super(...arguments);
|
33
|
-
this.key = _getId();
|
34
|
-
this.context = {
|
35
|
-
contentRef: (element) => {
|
36
|
-
element && element instanceof HTMLElement && this.contentDOM && element.firstChild !== this.contentDOM && element.appendChild(this.contentDOM);
|
37
|
-
},
|
38
|
-
view: this.view,
|
39
|
-
getPos: this.getPos,
|
40
|
-
setAttrs: this.setAttrs,
|
41
|
-
node: shallowRef(this.node),
|
42
|
-
selected: shallowRef(this.selected),
|
43
|
-
decorations: shallowRef(this.decorations),
|
44
|
-
innerDecorations: shallowRef(this.innerDecorations)
|
45
|
-
};
|
46
|
-
this.updateContext = () => {
|
47
|
-
Object.entries({
|
48
|
-
node: this.node,
|
49
|
-
selected: this.selected,
|
50
|
-
decorations: this.decorations,
|
51
|
-
innerDecorations: this.innerDecorations
|
52
|
-
}).forEach(([key, value]) => {
|
53
|
-
let prev = this.context[key];
|
54
|
-
prev.value !== value && (prev.value = value);
|
55
|
-
});
|
56
|
-
};
|
57
|
-
this.render = () => {
|
58
|
-
let UserComponent = this.component;
|
59
|
-
return markRaw(
|
60
|
-
defineComponent({
|
61
|
-
name: "ProsemirrorNodeView",
|
62
|
-
setup: () => () => h(
|
63
|
-
Teleport,
|
64
|
-
{
|
65
|
-
key: this.key,
|
66
|
-
to: this.dom
|
67
|
-
},
|
68
|
-
h(UserComponent, this.context)
|
69
|
-
)
|
70
|
-
})
|
71
|
-
);
|
72
|
-
};
|
73
|
-
}
|
74
|
-
};
|
75
|
-
|
76
|
-
// src/views/node-view/use-vue-node-view-creator.ts
|
77
|
-
function useVueNodeViewCreator(renderVueRenderer, removeVueRenderer) {
|
78
|
-
return (options) => (node, view, getPos, decorations, innerDecorations) => {
|
79
|
-
let nodeView = new VueNodeView({
|
80
|
-
node,
|
81
|
-
view,
|
82
|
-
getPos,
|
83
|
-
decorations,
|
84
|
-
innerDecorations,
|
85
|
-
options: {
|
86
|
-
...options,
|
87
|
-
onUpdate() {
|
88
|
-
var _a;
|
89
|
-
(_a = options.onUpdate) == null || _a.call(options), nodeView.updateContext();
|
90
|
-
},
|
91
|
-
selectNode() {
|
92
|
-
var _a;
|
93
|
-
(_a = options.selectNode) == null || _a.call(options), nodeView.updateContext();
|
94
|
-
},
|
95
|
-
deselectNode() {
|
96
|
-
var _a;
|
97
|
-
(_a = options.deselectNode) == null || _a.call(options), nodeView.updateContext();
|
98
|
-
},
|
99
|
-
destroy() {
|
100
|
-
var _a;
|
101
|
-
(_a = options.destroy) == null || _a.call(options), removeVueRenderer(nodeView);
|
102
|
-
}
|
103
|
-
}
|
104
|
-
});
|
105
|
-
return renderVueRenderer(nodeView), nodeView;
|
106
|
-
};
|
107
|
-
}
|
108
|
-
|
109
|
-
// src/views/vue-renderer.ts
|
110
|
-
import {
|
111
|
-
getCurrentInstance,
|
112
|
-
markRaw as markRaw2,
|
113
|
-
onBeforeMount,
|
114
|
-
onUnmounted,
|
115
|
-
ref
|
116
|
-
} from "vue";
|
117
|
-
function useVueRenderer() {
|
118
|
-
let portals = ref({}), instance = getCurrentInstance(), update = markRaw2({});
|
119
|
-
return onBeforeMount(() => {
|
120
|
-
update.updater = () => {
|
121
|
-
instance == null || instance.update();
|
122
|
-
};
|
123
|
-
}), onUnmounted(() => {
|
124
|
-
update.updater = void 0;
|
125
|
-
}), {
|
126
|
-
portals,
|
127
|
-
renderVueRenderer: (renderer) => {
|
128
|
-
var _a;
|
129
|
-
portals.value[renderer.key] = renderer.render(), (_a = update.updater) == null || _a.call(update);
|
130
|
-
},
|
131
|
-
removeVueRenderer: (renderer) => {
|
132
|
-
delete portals.value[renderer.key];
|
133
|
-
}
|
134
|
-
};
|
135
|
-
}
|
136
|
-
|
137
|
-
// src/views/vue-views-provider.ts
|
138
|
-
var VueViewsProvider = defineComponent2({
|
139
|
-
name: "VueViewsProvider",
|
140
|
-
setup: (_, { slots }) => {
|
141
|
-
let { portals, renderVueRenderer, removeVueRenderer } = useVueRenderer(), createVueNodeView = useVueNodeViewCreator(
|
142
|
-
renderVueRenderer,
|
143
|
-
removeVueRenderer
|
144
|
-
);
|
145
|
-
return provide(nodeViewFactoryKey, createVueNodeView), () => {
|
146
|
-
var _a;
|
147
|
-
return h2(Fragment, null, [
|
148
|
-
(_a = slots.default) == null ? void 0 : _a.call(slots),
|
149
|
-
Object.values(portals.value).map((x) => h2(x))
|
150
|
-
]);
|
151
|
-
};
|
152
|
-
}
|
153
|
-
});
|
154
|
-
|
155
|
-
// src/views/vue-views-comsumer.ts
|
156
|
-
import { computed as computed2, defineComponent as defineComponent3 } from "vue";
|
8
|
+
import { ProsemirrorAdapterProvider } from "@prosemirror-adapter/vue";
|
9
|
+
import { defineComponent as defineComponent2, h as h2 } from "vue";
|
157
10
|
|
158
11
|
// src/extensions/vue-node-view.ts
|
159
12
|
import {
|
13
|
+
defineNodeViewComponent,
|
160
14
|
defineNodeViewFactory
|
161
15
|
} from "@prosekit/core";
|
162
|
-
|
163
|
-
|
164
|
-
|
165
|
-
|
166
|
-
|
167
|
-
|
168
|
-
|
169
|
-
|
170
|
-
|
171
|
-
return defineNodeViewFactory({
|
172
|
-
group: "vue",
|
173
|
-
factory: nodeViewFactory
|
174
|
-
});
|
175
|
-
}
|
16
|
+
import {
|
17
|
+
useNodeViewContext,
|
18
|
+
useNodeViewFactory
|
19
|
+
} from "@prosemirror-adapter/vue";
|
20
|
+
import {
|
21
|
+
computed as computed2,
|
22
|
+
defineComponent,
|
23
|
+
h
|
24
|
+
} from "vue";
|
176
25
|
|
177
26
|
// src/hooks/use-extension.ts
|
178
27
|
import "@prosekit/core";
|
@@ -209,54 +58,87 @@ function useExtension(extension, options) {
|
|
209
58
|
);
|
210
59
|
}
|
211
60
|
|
212
|
-
// src/
|
213
|
-
|
61
|
+
// src/extensions/vue-node-view.ts
|
62
|
+
function withNodeViewProps(component) {
|
63
|
+
return defineComponent({
|
64
|
+
name: "NodeViewPropsWrapper",
|
65
|
+
setup: () => {
|
66
|
+
let props = useNodeViewContext();
|
67
|
+
return () => h(component, props);
|
68
|
+
}
|
69
|
+
});
|
70
|
+
}
|
71
|
+
var VueViewsConsumer = /* @__PURE__ */ defineComponent({
|
214
72
|
name: "VueViewsConsumer",
|
215
73
|
setup: () => {
|
216
74
|
let nodeViewFactory = useNodeViewFactory(), extension = computed2(() => defineVueNodeViewFactory(nodeViewFactory));
|
217
75
|
return useExtension(extension), () => null;
|
218
76
|
}
|
219
77
|
});
|
78
|
+
function defineVueNodeView(options) {
|
79
|
+
let { name, component, ...userOptions } = options, args = {
|
80
|
+
...userOptions,
|
81
|
+
component: withNodeViewProps(component)
|
82
|
+
};
|
83
|
+
return defineNodeViewComponent({
|
84
|
+
group: "vue",
|
85
|
+
name,
|
86
|
+
args
|
87
|
+
});
|
88
|
+
}
|
89
|
+
function defineVueNodeViewFactory(factory) {
|
90
|
+
return defineNodeViewFactory({
|
91
|
+
group: "vue",
|
92
|
+
factory
|
93
|
+
});
|
94
|
+
}
|
220
95
|
|
221
96
|
// src/components/prosekit.ts
|
222
|
-
var ProseKit =
|
223
|
-
(props, { slots }) => (provideEditor(props.editor), () =>
|
97
|
+
var ProseKit = defineComponent2(
|
98
|
+
(props, { slots }) => (provideEditor(props.editor), () => h2(ProsemirrorAdapterProvider, null, () => {
|
224
99
|
var _a;
|
225
100
|
return [
|
226
|
-
|
101
|
+
h2(VueViewsConsumer),
|
227
102
|
(_a = slots.default) == null ? void 0 : _a.call(slots)
|
228
103
|
];
|
229
104
|
})),
|
230
105
|
{ props: ["editor"] }
|
231
106
|
);
|
232
107
|
|
108
|
+
// src/hooks/use-doc-change.ts
|
109
|
+
import { defineDocChangeHandler } from "@prosekit/core";
|
110
|
+
function useDocChange(handler, options) {
|
111
|
+
let extension = defineDocChangeHandler((view) => handler(view.state.doc));
|
112
|
+
return useExtension(extension, options);
|
113
|
+
}
|
114
|
+
|
233
115
|
// src/hooks/use-editor.ts
|
234
116
|
import {
|
235
|
-
ProseKitError
|
117
|
+
ProseKitError,
|
236
118
|
defineMountHandler,
|
237
119
|
defineUpdateHandler,
|
238
120
|
union
|
239
121
|
} from "@prosekit/core";
|
240
122
|
import {
|
241
123
|
onMounted,
|
242
|
-
onUnmounted
|
243
|
-
shallowRef
|
124
|
+
onUnmounted,
|
125
|
+
shallowRef,
|
244
126
|
triggerRef
|
245
127
|
} from "vue";
|
246
128
|
function useEditor(options) {
|
247
129
|
var _a;
|
248
130
|
let update = (_a = options == null ? void 0 : options.update) != null ? _a : !1, editor = useEditorContext();
|
249
131
|
if (!editor)
|
250
|
-
throw new
|
132
|
+
throw new ProseKitError(
|
251
133
|
"useEditor must be used within the ProseKit component"
|
252
134
|
);
|
253
|
-
let editorRef =
|
135
|
+
let editorRef = shallowRef(editor);
|
254
136
|
return update && onMounted(() => {
|
255
137
|
let forceUpdate = () => triggerRef(editorRef), extension = union([
|
256
138
|
defineMountHandler(forceUpdate),
|
257
139
|
defineUpdateHandler(forceUpdate)
|
258
140
|
]), dispose = editor.use(extension);
|
259
|
-
|
141
|
+
onUnmounted(dispose);
|
260
142
|
}), editorRef;
|
261
143
|
}
|
262
144
|
|
@@ -274,13 +156,6 @@ function useStateUpdate(handler, options) {
|
|
274
156
|
let extension = defineUpdateHandler2((view) => handler(view.state));
|
275
157
|
return useExtension(extension, options);
|
276
158
|
}
|
277
|
-
|
278
|
-
// src/hooks/use-doc-change.ts
|
279
|
-
import { defineDocChangeHandler } from "@prosekit/core";
|
280
|
-
function useDocChange(handler, options) {
|
281
|
-
let extension = defineDocChangeHandler((view) => handler(view.state.doc));
|
282
|
-
return useExtension(extension, options);
|
283
|
-
}
|
284
159
|
export {
|
285
160
|
ProseKit,
|
286
161
|
defineVueNodeView,
|
package/package.json
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
{
|
2
2
|
"name": "@prosekit/vue",
|
3
3
|
"type": "module",
|
4
|
-
"version": "0.3.
|
4
|
+
"version": "0.3.11",
|
5
5
|
"private": false,
|
6
6
|
"author": {
|
7
7
|
"name": "ocavue",
|
@@ -65,10 +65,10 @@
|
|
65
65
|
"dist"
|
66
66
|
],
|
67
67
|
"dependencies": {
|
68
|
-
"@prosemirror-adapter/
|
69
|
-
"@prosekit/core": "^0.7.
|
68
|
+
"@prosemirror-adapter/vue": "^0.2.6",
|
69
|
+
"@prosekit/core": "^0.7.1",
|
70
70
|
"@prosekit/pm": "^0.1.5",
|
71
|
-
"@prosekit/web": "^0.
|
71
|
+
"@prosekit/web": "^0.3.0"
|
72
72
|
},
|
73
73
|
"peerDependencies": {
|
74
74
|
"vue": ">= 3.0.0"
|