@prosekit/vue 0.3.3 → 0.3.5
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 +1 -3
- package/dist/chunk-2Y66HAUD.js +29 -0
- 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.js +63 -103
- package/package.json +8 -8
- package/dist/chunk-64DHEPDA.js +0 -37
@@ -6,7 +6,6 @@ import { AutocompletePopoverProps } from '@prosekit/web/autocomplete';
|
|
6
6
|
import { BaseNodeViewOptions } from '@prosekit/core';
|
7
7
|
import { BlockDragHandleProps } from '@prosekit/web/block-handle';
|
8
8
|
import { BlockPopoverProps } from '@prosekit/web/block-handle';
|
9
|
-
import { CommandArgs } from '@prosekit/core';
|
10
9
|
import { ComponentOptionsMixin } from 'vue';
|
11
10
|
import { ComputedRef } from 'vue';
|
12
11
|
import { CoreNodeView } from '@prosemirror-adapter/core';
|
@@ -20,7 +19,6 @@ import { Editor } from '@prosekit/core';
|
|
20
19
|
import type { EditorState } from '@prosekit/pm/state';
|
21
20
|
import type { EditorView } from '@prosekit/pm/view';
|
22
21
|
import { Extension } from '@prosekit/core';
|
23
|
-
import { ExtensionTyping } from '@prosekit/core';
|
24
22
|
import { ExtractPropTypes } from 'vue';
|
25
23
|
import type { InjectionKey } from 'vue';
|
26
24
|
import { InlinePopoverProps } from '@prosekit/web/inline-popover';
|
@@ -109,7 +107,7 @@ export { defineVueNodeView as defineVueNodeView_alias_1 }
|
|
109
107
|
/**
|
110
108
|
* @internal
|
111
109
|
*/
|
112
|
-
export declare function defineVueNodeViewFactory(nodeViewFactory: NodeViewFactory): Extension<
|
110
|
+
export declare function defineVueNodeViewFactory(nodeViewFactory: NodeViewFactory): Extension<any>;
|
113
111
|
|
114
112
|
declare const InlinePopover: DefineSetupFnComponent<Partial<InlinePopoverProps> & {
|
115
113
|
class?: string | undefined;
|
@@ -0,0 +1,29 @@
|
|
1
|
+
import {
|
2
|
+
useEditorContext
|
3
|
+
} from "./chunk-X5DTEZPX.js";
|
4
|
+
|
5
|
+
// src/components/create-component.ts
|
6
|
+
import { defineComponent, h } from "vue";
|
7
|
+
function createComponent(tagName, displayName, defaultProps) {
|
8
|
+
let propertyNames = Object.keys(defaultProps), hasEditor = Object.hasOwn(defaultProps, "editor");
|
9
|
+
return defineComponent(
|
10
|
+
(props, { slots }) => {
|
11
|
+
let editor = useEditorContext();
|
12
|
+
return () => {
|
13
|
+
var _a;
|
14
|
+
let p = {};
|
15
|
+
for (let [key, value] of Object.entries(props))
|
16
|
+
value !== void 0 && (p[propertyNames.includes(key) ? "." + key : key] = value);
|
17
|
+
return hasEditor && editor && !p.editor && (p.editor = editor), h(tagName, p, (_a = slots.default) == null ? void 0 : _a.call(slots));
|
18
|
+
};
|
19
|
+
},
|
20
|
+
{
|
21
|
+
props: propertyNames,
|
22
|
+
name: displayName
|
23
|
+
}
|
24
|
+
);
|
25
|
+
}
|
26
|
+
|
27
|
+
export {
|
28
|
+
createComponent
|
29
|
+
};
|
package/dist/prosekit-vue.js
CHANGED
@@ -17,10 +17,9 @@ var nodeViewFactoryKey = Symbol(
|
|
17
17
|
"[ProseKit]useNodeViewFactory"
|
18
18
|
);
|
19
19
|
function useNodeViewFactory() {
|
20
|
-
|
21
|
-
if (!nodeViewFactory)
|
20
|
+
let nodeViewFactory = inject(nodeViewFactoryKey);
|
21
|
+
if (!nodeViewFactory)
|
22
22
|
throw new ProseKitError("Cannot find node view factory context.");
|
23
|
-
}
|
24
23
|
return nodeViewFactory;
|
25
24
|
}
|
26
25
|
|
@@ -34,8 +33,7 @@ var VueNodeView = class extends CoreNodeView {
|
|
34
33
|
this.key = _getId();
|
35
34
|
this.context = {
|
36
35
|
contentRef: (element) => {
|
37
|
-
|
38
|
-
element.appendChild(this.contentDOM);
|
36
|
+
element && element instanceof HTMLElement && this.contentDOM && element.firstChild !== this.contentDOM && element.appendChild(this.contentDOM);
|
39
37
|
},
|
40
38
|
view: this.view,
|
41
39
|
getPos: this.getPos,
|
@@ -52,26 +50,23 @@ var VueNodeView = class extends CoreNodeView {
|
|
52
50
|
decorations: this.decorations,
|
53
51
|
innerDecorations: this.innerDecorations
|
54
52
|
}).forEach(([key, value]) => {
|
55
|
-
|
56
|
-
|
57
|
-
prev.value = value;
|
53
|
+
let prev = this.context[key];
|
54
|
+
prev.value !== value && (prev.value = value);
|
58
55
|
});
|
59
56
|
};
|
60
57
|
this.render = () => {
|
61
|
-
|
58
|
+
let UserComponent = this.component;
|
62
59
|
return markRaw(
|
63
60
|
defineComponent({
|
64
61
|
name: "ProsemirrorNodeView",
|
65
|
-
setup: () =>
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
);
|
74
|
-
}
|
62
|
+
setup: () => () => h(
|
63
|
+
Teleport,
|
64
|
+
{
|
65
|
+
key: this.key,
|
66
|
+
to: this.dom
|
67
|
+
},
|
68
|
+
h(UserComponent, this.context)
|
69
|
+
)
|
75
70
|
})
|
76
71
|
);
|
77
72
|
};
|
@@ -80,8 +75,8 @@ var VueNodeView = class extends CoreNodeView {
|
|
80
75
|
|
81
76
|
// src/views/node-view/use-vue-node-view-creator.ts
|
82
77
|
function useVueNodeViewCreator(renderVueRenderer, removeVueRenderer) {
|
83
|
-
|
84
|
-
|
78
|
+
return (options) => (node, view, getPos, decorations, innerDecorations) => {
|
79
|
+
let nodeView = new VueNodeView({
|
85
80
|
node,
|
86
81
|
view,
|
87
82
|
getPos,
|
@@ -91,30 +86,24 @@ function useVueNodeViewCreator(renderVueRenderer, removeVueRenderer) {
|
|
91
86
|
...options,
|
92
87
|
onUpdate() {
|
93
88
|
var _a;
|
94
|
-
(_a = options.onUpdate) == null
|
95
|
-
nodeView.updateContext();
|
89
|
+
(_a = options.onUpdate) == null || _a.call(options), nodeView.updateContext();
|
96
90
|
},
|
97
91
|
selectNode() {
|
98
92
|
var _a;
|
99
|
-
(_a = options.selectNode) == null
|
100
|
-
nodeView.updateContext();
|
93
|
+
(_a = options.selectNode) == null || _a.call(options), nodeView.updateContext();
|
101
94
|
},
|
102
95
|
deselectNode() {
|
103
96
|
var _a;
|
104
|
-
(_a = options.deselectNode) == null
|
105
|
-
nodeView.updateContext();
|
97
|
+
(_a = options.deselectNode) == null || _a.call(options), nodeView.updateContext();
|
106
98
|
},
|
107
99
|
destroy() {
|
108
100
|
var _a;
|
109
|
-
(_a = options.destroy) == null
|
110
|
-
removeVueRenderer(nodeView);
|
101
|
+
(_a = options.destroy) == null || _a.call(options), removeVueRenderer(nodeView);
|
111
102
|
}
|
112
103
|
}
|
113
104
|
});
|
114
|
-
renderVueRenderer(nodeView);
|
115
|
-
return nodeView;
|
105
|
+
return renderVueRenderer(nodeView), nodeView;
|
116
106
|
};
|
117
|
-
return createVueNodeView;
|
118
107
|
}
|
119
108
|
|
120
109
|
// src/views/vue-renderer.ts
|
@@ -126,29 +115,22 @@ import {
|
|
126
115
|
ref
|
127
116
|
} from "vue";
|
128
117
|
function useVueRenderer() {
|
129
|
-
|
130
|
-
|
131
|
-
const update = markRaw2({});
|
132
|
-
onBeforeMount(() => {
|
118
|
+
let portals = ref({}), instance = getCurrentInstance(), update = markRaw2({});
|
119
|
+
return onBeforeMount(() => {
|
133
120
|
update.updater = () => {
|
134
|
-
instance == null
|
121
|
+
instance == null || instance.update();
|
135
122
|
};
|
136
|
-
})
|
137
|
-
onUnmounted(() => {
|
123
|
+
}), onUnmounted(() => {
|
138
124
|
update.updater = void 0;
|
139
|
-
})
|
140
|
-
const renderVueRenderer = (renderer) => {
|
141
|
-
var _a;
|
142
|
-
portals.value[renderer.key] = renderer.render();
|
143
|
-
(_a = update.updater) == null ? void 0 : _a.call(update);
|
144
|
-
};
|
145
|
-
const removeVueRenderer = (renderer) => {
|
146
|
-
delete portals.value[renderer.key];
|
147
|
-
};
|
148
|
-
return {
|
125
|
+
}), {
|
149
126
|
portals,
|
150
|
-
renderVueRenderer
|
151
|
-
|
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
|
+
}
|
152
134
|
};
|
153
135
|
}
|
154
136
|
|
@@ -156,13 +138,11 @@ function useVueRenderer() {
|
|
156
138
|
var VueViewsProvider = defineComponent2({
|
157
139
|
name: "VueViewsProvider",
|
158
140
|
setup: (_, { slots }) => {
|
159
|
-
|
160
|
-
const createVueNodeView = useVueNodeViewCreator(
|
141
|
+
let { portals, renderVueRenderer, removeVueRenderer } = useVueRenderer(), createVueNodeView = useVueNodeViewCreator(
|
161
142
|
renderVueRenderer,
|
162
143
|
removeVueRenderer
|
163
144
|
);
|
164
|
-
provide(nodeViewFactoryKey, createVueNodeView)
|
165
|
-
return () => {
|
145
|
+
return provide(nodeViewFactoryKey, createVueNodeView), () => {
|
166
146
|
var _a;
|
167
147
|
return h2(Fragment, null, [
|
168
148
|
(_a = slots.default) == null ? void 0 : _a.call(slots),
|
@@ -180,7 +160,7 @@ import {
|
|
180
160
|
defineNodeViewFactory
|
181
161
|
} from "@prosekit/core";
|
182
162
|
function defineVueNodeView(options) {
|
183
|
-
|
163
|
+
let { name, ...userOptions } = options;
|
184
164
|
return defineNodeViewFactory({
|
185
165
|
group: "vue",
|
186
166
|
name,
|
@@ -202,16 +182,12 @@ import "vue";
|
|
202
182
|
import { EditorNotFoundError } from "@prosekit/core";
|
203
183
|
import { toValue, watchPostEffect } from "vue";
|
204
184
|
function useEditorExtension(editorRef, extensionRef) {
|
205
|
-
|
185
|
+
let editorContext = useEditorContext();
|
206
186
|
watchPostEffect((onCleanup) => {
|
207
|
-
|
208
|
-
|
209
|
-
if (!editor) {
|
187
|
+
let editor = toValue(editorRef) || toValue(editorContext), extension = toValue(extensionRef);
|
188
|
+
if (!editor)
|
210
189
|
throw new EditorNotFoundError();
|
211
|
-
|
212
|
-
if (extension) {
|
213
|
-
onCleanup(editor.use(extension));
|
214
|
-
}
|
190
|
+
extension && onCleanup(editor.use(extension));
|
215
191
|
});
|
216
192
|
}
|
217
193
|
|
@@ -220,7 +196,7 @@ import { withPriority } from "@prosekit/core";
|
|
220
196
|
import { computed, toValue as toValue2 } from "vue";
|
221
197
|
function usePriorityExtension(extension, priority) {
|
222
198
|
return computed(() => {
|
223
|
-
|
199
|
+
let ext = toValue2(extension);
|
224
200
|
return ext && priority ? withPriority(ext, priority) : ext;
|
225
201
|
});
|
226
202
|
}
|
@@ -237,29 +213,20 @@ function useExtension(extension, options) {
|
|
237
213
|
var VueViewsConsumer = defineComponent3({
|
238
214
|
name: "VueViewsConsumer",
|
239
215
|
setup: () => {
|
240
|
-
|
241
|
-
|
242
|
-
return defineVueNodeViewFactory(nodeViewFactory);
|
243
|
-
});
|
244
|
-
useExtension(extension);
|
245
|
-
return () => null;
|
216
|
+
let nodeViewFactory = useNodeViewFactory(), extension = computed2(() => defineVueNodeViewFactory(nodeViewFactory));
|
217
|
+
return useExtension(extension), () => null;
|
246
218
|
}
|
247
219
|
});
|
248
220
|
|
249
221
|
// src/components/prosekit.ts
|
250
222
|
var ProseKit = defineComponent4(
|
251
|
-
(props, { slots }) => {
|
252
|
-
|
253
|
-
return
|
254
|
-
|
255
|
-
|
256
|
-
|
257
|
-
|
258
|
-
(_a = slots.default) == null ? void 0 : _a.call(slots)
|
259
|
-
];
|
260
|
-
});
|
261
|
-
};
|
262
|
-
},
|
223
|
+
(props, { slots }) => (provideEditor(props.editor), () => h3(VueViewsProvider, null, () => {
|
224
|
+
var _a;
|
225
|
+
return [
|
226
|
+
h3(VueViewsConsumer),
|
227
|
+
(_a = slots.default) == null ? void 0 : _a.call(slots)
|
228
|
+
];
|
229
|
+
})),
|
263
230
|
{ props: ["editor"] }
|
264
231
|
);
|
265
232
|
|
@@ -278,47 +245,40 @@ import {
|
|
278
245
|
} from "vue";
|
279
246
|
function useEditor(options) {
|
280
247
|
var _a;
|
281
|
-
|
282
|
-
|
283
|
-
if (!editor) {
|
248
|
+
let update = (_a = options == null ? void 0 : options.update) != null ? _a : !1, editor = useEditorContext();
|
249
|
+
if (!editor)
|
284
250
|
throw new ProseKitError2(
|
285
251
|
"useEditor must be used within the ProseKit component"
|
286
252
|
);
|
287
|
-
|
288
|
-
|
289
|
-
|
290
|
-
|
291
|
-
|
292
|
-
|
293
|
-
|
294
|
-
|
295
|
-
]);
|
296
|
-
const dispose = editor.use(extension);
|
297
|
-
onUnmounted2(dispose);
|
298
|
-
});
|
299
|
-
}
|
300
|
-
return editorRef;
|
253
|
+
let editorRef = shallowRef2(editor);
|
254
|
+
return update && onMounted(() => {
|
255
|
+
let forceUpdate = () => triggerRef(editorRef), extension = union([
|
256
|
+
defineMountHandler(forceUpdate),
|
257
|
+
defineUpdateHandler(forceUpdate)
|
258
|
+
]), dispose = editor.use(extension);
|
259
|
+
onUnmounted2(dispose);
|
260
|
+
}), editorRef;
|
301
261
|
}
|
302
262
|
|
303
263
|
// src/hooks/use-keymap.ts
|
304
264
|
import { defineKeymap } from "@prosekit/core";
|
305
265
|
import { computed as computed3, toValue as toValue3 } from "vue";
|
306
266
|
function useKeymap(keymap, options) {
|
307
|
-
|
267
|
+
let extension = computed3(() => defineKeymap(toValue3(keymap)));
|
308
268
|
return useExtension(extension, options);
|
309
269
|
}
|
310
270
|
|
311
271
|
// src/hooks/use-state-update.ts
|
312
272
|
import { defineUpdateHandler as defineUpdateHandler2 } from "@prosekit/core";
|
313
273
|
function useStateUpdate(handler, options) {
|
314
|
-
|
274
|
+
let extension = defineUpdateHandler2((view) => handler(view.state));
|
315
275
|
return useExtension(extension, options);
|
316
276
|
}
|
317
277
|
|
318
278
|
// src/hooks/use-doc-change.ts
|
319
279
|
import { defineDocChangeHandler } from "@prosekit/core";
|
320
280
|
function useDocChange(handler, options) {
|
321
|
-
|
281
|
+
let extension = defineDocChangeHandler((view) => handler(view.state.doc));
|
322
282
|
return useExtension(extension, options);
|
323
283
|
}
|
324
284
|
export {
|
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.5",
|
5
5
|
"private": false,
|
6
6
|
"author": {
|
7
7
|
"name": "ocavue",
|
@@ -65,10 +65,10 @@
|
|
65
65
|
"dist"
|
66
66
|
],
|
67
67
|
"dependencies": {
|
68
|
-
"@
|
69
|
-
"@prosekit/
|
70
|
-
"@prosekit/
|
71
|
-
"@
|
68
|
+
"@prosemirror-adapter/core": "^0.2.6",
|
69
|
+
"@prosekit/core": "^0.5.5",
|
70
|
+
"@prosekit/pm": "^0.1.5",
|
71
|
+
"@prosekit/web": "^0.1.10"
|
72
72
|
},
|
73
73
|
"peerDependencies": {
|
74
74
|
"vue": ">= 3.0.0"
|
@@ -79,11 +79,11 @@
|
|
79
79
|
}
|
80
80
|
},
|
81
81
|
"devDependencies": {
|
82
|
-
"
|
83
|
-
"tsup": "^8.0.2",
|
82
|
+
"tsup": "^8.1.0",
|
84
83
|
"typescript": "^5.4.5",
|
85
84
|
"vitest": "^1.6.0",
|
86
|
-
"vue": "^3.4.
|
85
|
+
"vue": "^3.4.27",
|
86
|
+
"@prosekit/dev": "0.0.0"
|
87
87
|
},
|
88
88
|
"scripts": {
|
89
89
|
"build:tsup": "tsup",
|
package/dist/chunk-64DHEPDA.js
DELETED
@@ -1,37 +0,0 @@
|
|
1
|
-
import {
|
2
|
-
useEditorContext
|
3
|
-
} from "./chunk-X5DTEZPX.js";
|
4
|
-
|
5
|
-
// src/components/create-component.ts
|
6
|
-
import { defineComponent, h } from "vue";
|
7
|
-
function createComponent(tagName, displayName, defaultProps) {
|
8
|
-
const propertyNames = Object.keys(defaultProps);
|
9
|
-
const hasEditor = Object.hasOwn(defaultProps, "editor");
|
10
|
-
const Component = defineComponent(
|
11
|
-
(props, { slots }) => {
|
12
|
-
const editor = useEditorContext();
|
13
|
-
return () => {
|
14
|
-
var _a;
|
15
|
-
const p = {};
|
16
|
-
for (const [key, value] of Object.entries(props)) {
|
17
|
-
if (value !== void 0) {
|
18
|
-
p[propertyNames.includes(key) ? "." + key : key] = value;
|
19
|
-
}
|
20
|
-
}
|
21
|
-
if (hasEditor && editor && !p["editor"]) {
|
22
|
-
p.editor = editor;
|
23
|
-
}
|
24
|
-
return h(tagName, p, (_a = slots.default) == null ? void 0 : _a.call(slots));
|
25
|
-
};
|
26
|
-
},
|
27
|
-
{
|
28
|
-
props: propertyNames,
|
29
|
-
name: displayName
|
30
|
-
}
|
31
|
-
);
|
32
|
-
return Component;
|
33
|
-
}
|
34
|
-
|
35
|
-
export {
|
36
|
-
createComponent
|
37
|
-
};
|