@prosekit/vue 0.6.6 → 0.6.8

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.
Files changed (86) hide show
  1. package/dist/{create-component-BREKWlWW.js → create-component.js} +3 -4
  2. package/dist/create-component.js.map +1 -0
  3. package/dist/{create-emits-B8725q2G.d.ts → create-emits.d.ts} +1 -1
  4. package/dist/create-emits.d.ts.map +1 -0
  5. package/dist/{editor-context-BfHHplRP.js → editor-context.js} +2 -3
  6. package/dist/editor-context.js.map +1 -0
  7. package/dist/prosekit-vue-autocomplete.d.ts +1 -1
  8. package/dist/prosekit-vue-autocomplete.js +2 -6
  9. package/dist/prosekit-vue-autocomplete.js.map +1 -1
  10. package/dist/prosekit-vue-block-handle.d.ts +1 -1
  11. package/dist/prosekit-vue-block-handle.js +2 -5
  12. package/dist/prosekit-vue-block-handle.js.map +1 -1
  13. package/dist/prosekit-vue-drop-indicator.d.ts +1 -1
  14. package/dist/prosekit-vue-drop-indicator.js +2 -3
  15. package/dist/prosekit-vue-drop-indicator.js.map +1 -1
  16. package/dist/prosekit-vue-inline-popover.d.ts +1 -1
  17. package/dist/prosekit-vue-inline-popover.js +2 -3
  18. package/dist/prosekit-vue-inline-popover.js.map +1 -1
  19. package/dist/prosekit-vue-popover.d.ts +1 -1
  20. package/dist/prosekit-vue-popover.js +2 -5
  21. package/dist/prosekit-vue-popover.js.map +1 -1
  22. package/dist/prosekit-vue-resizable.d.ts +1 -1
  23. package/dist/prosekit-vue-resizable.js +2 -4
  24. package/dist/prosekit-vue-resizable.js.map +1 -1
  25. package/dist/prosekit-vue-table-handle.d.ts +1 -1
  26. package/dist/prosekit-vue-table-handle.js +2 -11
  27. package/dist/prosekit-vue-table-handle.js.map +1 -1
  28. package/dist/prosekit-vue-tooltip.d.ts +1 -1
  29. package/dist/prosekit-vue-tooltip.js +2 -5
  30. package/dist/prosekit-vue-tooltip.js.map +1 -1
  31. package/dist/prosekit-vue.d.ts +17 -17
  32. package/dist/prosekit-vue.d.ts.map +1 -1
  33. package/dist/prosekit-vue.js +118 -120
  34. package/dist/prosekit-vue.js.map +1 -1
  35. package/package.json +10 -9
  36. package/src/components/autocomplete/autocomplete-empty.gen.ts +2 -2
  37. package/src/components/autocomplete/autocomplete-item.gen.ts +2 -2
  38. package/src/components/autocomplete/autocomplete-list.gen.ts +2 -2
  39. package/src/components/autocomplete/autocomplete-popover.gen.ts +2 -2
  40. package/src/components/autocomplete/index.gen.ts +4 -4
  41. package/src/components/block-handle/block-handle-add.gen.ts +2 -2
  42. package/src/components/block-handle/block-handle-draggable.gen.ts +2 -2
  43. package/src/components/block-handle/block-handle-popover.gen.ts +2 -2
  44. package/src/components/block-handle/index.gen.ts +3 -3
  45. package/src/components/create-component.ts +1 -1
  46. package/src/components/drop-indicator/drop-indicator.gen.ts +2 -2
  47. package/src/components/drop-indicator/index.gen.ts +1 -1
  48. package/src/components/inline-popover/index.gen.ts +1 -1
  49. package/src/components/inline-popover/inline-popover.gen.ts +2 -2
  50. package/src/components/popover/index.gen.ts +3 -3
  51. package/src/components/popover/popover-content.gen.ts +2 -2
  52. package/src/components/popover/popover-root.gen.ts +2 -2
  53. package/src/components/popover/popover-trigger.gen.ts +2 -2
  54. package/src/components/prosekit.ts +9 -11
  55. package/src/components/resizable/index.gen.ts +2 -2
  56. package/src/components/resizable/resizable-handle.gen.ts +2 -2
  57. package/src/components/resizable/resizable-root.gen.ts +2 -2
  58. package/src/components/table-handle/index.gen.ts +9 -9
  59. package/src/components/table-handle/table-handle-column-root.gen.ts +2 -2
  60. package/src/components/table-handle/table-handle-column-trigger.gen.ts +2 -2
  61. package/src/components/table-handle/table-handle-drag-preview.gen.ts +2 -2
  62. package/src/components/table-handle/table-handle-drop-indicator.gen.ts +2 -2
  63. package/src/components/table-handle/table-handle-popover-content.gen.ts +2 -2
  64. package/src/components/table-handle/table-handle-popover-item.gen.ts +2 -2
  65. package/src/components/table-handle/table-handle-root.gen.ts +2 -2
  66. package/src/components/table-handle/table-handle-row-root.gen.ts +2 -2
  67. package/src/components/table-handle/table-handle-row-trigger.gen.ts +2 -2
  68. package/src/components/tooltip/index.gen.ts +3 -3
  69. package/src/components/tooltip/tooltip-content.gen.ts +2 -2
  70. package/src/components/tooltip/tooltip-root.gen.ts +2 -2
  71. package/src/components/tooltip/tooltip-trigger.gen.ts +2 -2
  72. package/src/components/view-renderer.ts +34 -0
  73. package/src/extensions/vue-mark-view.ts +33 -46
  74. package/src/extensions/vue-node-view.ts +33 -46
  75. package/src/hooks/use-doc-change.ts +1 -1
  76. package/src/hooks/use-editor-derived-value.ts +1 -1
  77. package/src/hooks/use-editor-extension.ts +1 -1
  78. package/src/hooks/use-editor.ts +2 -2
  79. package/src/hooks/use-extension.spec.ts +1 -1
  80. package/src/hooks/use-extension.ts +2 -2
  81. package/src/hooks/use-keymap.ts +1 -1
  82. package/src/hooks/use-state-update.ts +1 -1
  83. package/src/index.ts +9 -9
  84. package/dist/create-component-BREKWlWW.js.map +0 -1
  85. package/dist/create-emits-B8725q2G.d.ts.map +0 -1
  86. package/dist/editor-context-BfHHplRP.js.map +0 -1
@@ -1,139 +1,125 @@
1
- import { n as useEditorContext, t as provideEditor } from "./editor-context-BfHHplRP.js";
2
- import { ProsemirrorAdapterProvider, useMarkViewContext, useMarkViewFactory, useNodeViewContext, useNodeViewFactory } from "@prosemirror-adapter/vue";
3
- import { computed, defineComponent, h, onMounted, onUnmounted, shallowRef, toValue, triggerRef, watchPostEffect } from "vue";
1
+ import { n as useEditorContext, t as provideEditor } from "./editor-context.js";
2
+ import { Teleport, computed, defineComponent, h, markRaw, onMounted, onUnmounted, shallowRef, toValue, triggerRef, watchPostEffect } from "vue";
4
3
  import { EditorNotFoundError, ProseKitError, defineDocChangeHandler, defineKeymap, defineMarkViewComponent, defineMarkViewFactory, defineMountHandler, defineNodeViewComponent, defineNodeViewFactory, defineUpdateHandler, union, withPriority } from "@prosekit/core";
5
-
6
- //#region src/hooks/use-editor-extension.ts
7
- /**
8
- * @internal
9
- */
10
- function useEditorExtension(editorRef, extensionRef) {
11
- const editorContext = useEditorContext();
12
- watchPostEffect((onCleanup) => {
13
- const editor = toValue(editorRef) || toValue(editorContext);
14
- const extension = toValue(extensionRef);
15
- if (!editor) throw new EditorNotFoundError();
16
- if (extension) onCleanup(editor.use(extension));
17
- });
18
- }
19
-
20
- //#endregion
21
- //#region src/hooks/use-priority-extension.ts
4
+ import { AbstractVueMarkView, AbstractVueNodeView, buildVueMarkViewCreator, buildVueNodeViewCreator, useVueRenderer } from "@prosemirror-adapter/vue";
5
+ //#region src/extensions/vue-mark-view.ts
6
+ var ProseKitVueMarkView = class extends AbstractVueMarkView {
7
+ constructor(..._args) {
8
+ super(..._args);
9
+ this.render = () => {
10
+ const UserComponent = this.component;
11
+ const render = () => {
12
+ const props = this.context;
13
+ return h(Teleport, {
14
+ key: this.key,
15
+ to: this.dom
16
+ }, [h(UserComponent, props)]);
17
+ };
18
+ return markRaw(defineComponent({
19
+ name: "ProsemirrorMarkView",
20
+ setup: () => {
21
+ return render;
22
+ }
23
+ }));
24
+ };
25
+ }
26
+ };
22
27
  /**
23
28
  * @internal
24
29
  */
25
- function usePriorityExtension(extension, priority) {
26
- return computed(() => {
27
- const ext = toValue(extension);
28
- return ext && priority ? withPriority(ext, priority) : ext;
29
- });
30
- }
31
-
32
- //#endregion
33
- //#region src/hooks/use-extension.ts
34
- /**
35
- * Add an extension to the editor.
36
- *
37
- * @public
38
- */
39
- function useExtension(extension, options) {
40
- useEditorExtension(options?.editor, usePriorityExtension(extension, options?.priority));
41
- }
42
-
43
- //#endregion
44
- //#region src/extensions/vue-mark-view.ts
45
- function withMarkViewProps(component) {
46
- return defineComponent({
47
- name: "MarkViewPropsWrapper",
48
- setup: () => {
49
- const props = useMarkViewContext();
50
- return () => h(component, props);
51
- }
30
+ function defineVueMarkViewFactory(renderVueRenderer, removeVueRenderer) {
31
+ return defineMarkViewFactory({
32
+ group: "vue",
33
+ factory: buildVueMarkViewCreator(renderVueRenderer, removeVueRenderer, ProseKitVueMarkView)
52
34
  });
53
35
  }
54
36
  /**
55
- * @internal
56
- */
57
- const VueMarkViewsConsumer = /* @__PURE__ */ defineComponent({
58
- name: "VueMarkViewsConsumer",
59
- setup: () => {
60
- const markViewFactory = useMarkViewFactory();
61
- useExtension(computed(() => {
62
- return defineVueMarkViewFactory(markViewFactory);
63
- }));
64
- return () => null;
65
- }
66
- });
67
- /**
68
37
  * Defines a mark view using a Vue component.
69
38
  *
70
39
  * @public
71
40
  */
72
41
  function defineVueMarkView(options) {
73
- const { name, component, ...userOptions } = options;
74
42
  return defineMarkViewComponent({
75
43
  group: "vue",
76
- name,
77
- args: {
78
- ...userOptions,
79
- component: withMarkViewProps(component)
80
- }
81
- });
82
- }
83
- function defineVueMarkViewFactory(factory) {
84
- return defineMarkViewFactory({
85
- group: "vue",
86
- factory
44
+ name: options.name,
45
+ args: options
87
46
  });
88
47
  }
89
-
90
48
  //#endregion
91
49
  //#region src/extensions/vue-node-view.ts
92
- function withNodeViewProps(component) {
93
- return defineComponent({
94
- name: "NodeViewPropsWrapper",
95
- setup: () => {
96
- const props = useNodeViewContext();
97
- return () => h(component, props);
98
- }
99
- });
100
- }
50
+ var ProseKitVueNodeView = class extends AbstractVueNodeView {
51
+ constructor(..._args) {
52
+ super(..._args);
53
+ this.render = () => {
54
+ const UserComponent = this.component;
55
+ const render = () => {
56
+ const props = this.context;
57
+ return h(Teleport, {
58
+ key: this.key,
59
+ to: this.dom
60
+ }, [h(UserComponent, props)]);
61
+ };
62
+ return markRaw(defineComponent({
63
+ name: "ProsemirrorNodeView",
64
+ setup: () => {
65
+ return render;
66
+ }
67
+ }));
68
+ };
69
+ }
70
+ };
101
71
  /**
102
72
  * @internal
103
73
  */
104
- const VueNodeViewsConsumer = /* @__PURE__ */ defineComponent({
105
- name: "VueNodeViewsConsumer",
106
- setup: () => {
107
- const nodeViewFactory = useNodeViewFactory();
108
- useExtension(computed(() => {
109
- return defineVueNodeViewFactory(nodeViewFactory);
110
- }));
111
- return () => null;
112
- }
113
- });
74
+ function defineVueNodeViewFactory(renderVueRenderer, removeVueRenderer) {
75
+ return defineNodeViewFactory({
76
+ group: "vue",
77
+ factory: buildVueNodeViewCreator(renderVueRenderer, removeVueRenderer, ProseKitVueNodeView)
78
+ });
79
+ }
114
80
  /**
115
81
  * Defines a node view using a Vue component.
116
82
  *
117
83
  * @public
118
84
  */
119
85
  function defineVueNodeView(options) {
120
- const { name, component, ...userOptions } = options;
121
86
  return defineNodeViewComponent({
122
87
  group: "vue",
123
- name,
124
- args: {
125
- ...userOptions,
126
- component: withNodeViewProps(component)
127
- }
88
+ name: options.name,
89
+ args: options
128
90
  });
129
91
  }
130
- function defineVueNodeViewFactory(factory) {
131
- return defineNodeViewFactory({
132
- group: "vue",
133
- factory
92
+ //#endregion
93
+ //#region src/hooks/use-editor-extension.ts
94
+ /**
95
+ * @internal
96
+ */
97
+ function useEditorExtension(editorRef, extensionRef) {
98
+ const editorContext = useEditorContext();
99
+ watchPostEffect((onCleanup) => {
100
+ const editor = toValue(editorRef) || toValue(editorContext);
101
+ const extension = toValue(extensionRef);
102
+ if (!editor) throw new EditorNotFoundError();
103
+ if (extension) onCleanup(editor.use(extension));
134
104
  });
135
105
  }
136
-
106
+ //#endregion
107
+ //#region src/components/view-renderer.ts
108
+ /**
109
+ * @internal
110
+ */
111
+ const ViewRenderer = defineComponent({
112
+ name: "ViewRenderer",
113
+ props: { editor: {
114
+ type: Object,
115
+ required: true
116
+ } },
117
+ setup: (props, { slots }) => {
118
+ const { renderVueRenderer, removeVueRenderer, render } = useVueRenderer();
119
+ useEditorExtension(() => props.editor, union([defineVueMarkViewFactory(renderVueRenderer, removeVueRenderer), defineVueNodeViewFactory(renderVueRenderer, removeVueRenderer)]));
120
+ return () => [slots.default?.(), render()];
121
+ }
122
+ });
137
123
  //#endregion
138
124
  //#region src/components/prosekit.ts
139
125
  /**
@@ -149,16 +135,30 @@ const ProseKit = defineComponent({
149
135
  } },
150
136
  setup: (props, { slots }) => {
151
137
  provideEditor(props.editor);
152
- return () => {
153
- return h(ProsemirrorAdapterProvider, null, () => [
154
- h(VueNodeViewsConsumer),
155
- h(VueMarkViewsConsumer),
156
- slots.default?.()
157
- ]);
158
- };
138
+ return () => h(ViewRenderer, { editor: props.editor }, () => slots.default?.());
159
139
  }
160
140
  });
161
-
141
+ //#endregion
142
+ //#region src/hooks/use-priority-extension.ts
143
+ /**
144
+ * @internal
145
+ */
146
+ function usePriorityExtension(extension, priority) {
147
+ return computed(() => {
148
+ const ext = toValue(extension);
149
+ return ext && priority ? withPriority(ext, priority) : ext;
150
+ });
151
+ }
152
+ //#endregion
153
+ //#region src/hooks/use-extension.ts
154
+ /**
155
+ * Add an extension to the editor.
156
+ *
157
+ * @public
158
+ */
159
+ function useExtension(extension, options) {
160
+ useEditorExtension(options?.editor, usePriorityExtension(extension, options?.priority));
161
+ }
162
162
  //#endregion
163
163
  //#region src/hooks/use-doc-change.ts
164
164
  /**
@@ -169,7 +169,6 @@ const ProseKit = defineComponent({
169
169
  function useDocChange(handler, options) {
170
170
  useExtension(defineDocChangeHandler((view) => handler(view.state.doc)), options);
171
171
  }
172
-
173
172
  //#endregion
174
173
  //#region src/hooks/use-editor.ts
175
174
  /**
@@ -182,14 +181,15 @@ function useEditor(options) {
182
181
  const editor = useEditorContext();
183
182
  if (!editor) throw new ProseKitError("useEditor must be used within the ProseKit component");
184
183
  const editorRef = shallowRef(editor);
185
- if (update) onMounted(() => {
184
+ if (update) {
186
185
  const forceUpdate = () => triggerRef(editorRef);
187
- const extension = union(defineMountHandler(forceUpdate), defineUpdateHandler(forceUpdate));
188
- onUnmounted(editor.use(extension));
189
- });
186
+ onMounted(() => {
187
+ const extension = union(defineMountHandler(forceUpdate), defineUpdateHandler(forceUpdate));
188
+ onUnmounted(editor.use(extension));
189
+ });
190
+ }
190
191
  return editorRef;
191
192
  }
192
-
193
193
  //#endregion
194
194
  //#region src/hooks/use-editor-derived-value.ts
195
195
  /**
@@ -209,13 +209,11 @@ function useEditorDerivedValue(derive, options) {
209
209
  const editorAccessor = initialEditor ? computed(() => toValue(initialEditor)) : useEditor({ update: true });
210
210
  return computed(() => derive(toValue(editorAccessor)));
211
211
  }
212
-
213
212
  //#endregion
214
213
  //#region src/hooks/use-keymap.ts
215
214
  function useKeymap(keymap, options) {
216
215
  useExtension(computed(() => defineKeymap(toValue(keymap))), options);
217
216
  }
218
-
219
217
  //#endregion
220
218
  //#region src/hooks/use-state-update.ts
221
219
  /**
@@ -226,7 +224,7 @@ function useKeymap(keymap, options) {
226
224
  function useStateUpdate(handler, options) {
227
225
  useExtension(defineUpdateHandler((view) => handler(view.state)), options);
228
226
  }
229
-
230
227
  //#endregion
231
228
  export { ProseKit, defineVueMarkView, defineVueNodeView, useDocChange, useEditor, useEditorDerivedValue, useExtension, useKeymap, useStateUpdate };
229
+
232
230
  //# sourceMappingURL=prosekit-vue.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"prosekit-vue.js","names":[],"sources":["../src/hooks/use-editor-extension.ts","../src/hooks/use-priority-extension.ts","../src/hooks/use-extension.ts","../src/extensions/vue-mark-view.ts","../src/extensions/vue-node-view.ts","../src/components/prosekit.ts","../src/hooks/use-doc-change.ts","../src/hooks/use-editor.ts","../src/hooks/use-editor-derived-value.ts","../src/hooks/use-keymap.ts","../src/hooks/use-state-update.ts"],"sourcesContent":["import { EditorNotFoundError, type Editor, type Extension } from '@prosekit/core'\nimport { toValue, watchPostEffect, type MaybeRefOrGetter } from 'vue'\n\nimport { useEditorContext } from '../injection/editor-context'\n\n/**\n * @internal\n */\nexport function useEditorExtension(\n editorRef: MaybeRefOrGetter<Editor> | null | undefined,\n extensionRef: MaybeRefOrGetter<Extension | null> | null,\n): void {\n const editorContext = useEditorContext()\n\n watchPostEffect((onCleanup) => {\n const editor = toValue(editorRef) || toValue(editorContext)\n const extension = toValue(extensionRef)\n\n if (!editor) {\n throw new EditorNotFoundError()\n }\n if (extension) {\n onCleanup(editor.use(extension))\n }\n })\n}\n","import { withPriority, type Extension, type Priority } from '@prosekit/core'\nimport { computed, toValue, type ComputedRef, type MaybeRefOrGetter } from 'vue'\n\n/**\n * @internal\n */\nexport function usePriorityExtension<T extends Extension = Extension>(\n extension: MaybeRefOrGetter<T | null>,\n priority: Priority | null | undefined,\n): ComputedRef<T | null> {\n return computed(() => {\n const ext = toValue(extension)\n return ext && priority ? withPriority(ext, priority) : ext\n })\n}\n","import type { Editor, Extension, Priority } from '@prosekit/core'\nimport type { MaybeRefOrGetter } from 'vue'\n\nimport { useEditorExtension } from './use-editor-extension'\nimport { usePriorityExtension } from './use-priority-extension'\n\nexport interface UseExtensionOptions {\n /**\n * The editor to add the extension to. If not provided, it will use the\n * editor from the nearest `<ProseKit>` component.\n */\n editor?: MaybeRefOrGetter<Editor>\n\n /**\n * Optional priority to add the extension with.\n */\n priority?: Priority\n}\n\n/**\n * Add an extension to the editor.\n *\n * @public\n */\nexport function useExtension(\n /**\n * The ref to an extension to add to the editor. If it changes, the previous\n * extension will be removed and the new one (if not null) will be added.\n */\n extension: MaybeRefOrGetter<Extension | null>,\n options?: UseExtensionOptions,\n): void {\n useEditorExtension(\n options?.editor,\n usePriorityExtension(extension, options?.priority),\n )\n}\n","import { defineMarkViewComponent, defineMarkViewFactory, type Extension } from '@prosekit/core'\nimport type { MarkViewConstructor } from '@prosekit/pm/view'\nimport type { CoreMarkViewUserOptions } from '@prosemirror-adapter/core'\nimport {\n useMarkViewContext,\n useMarkViewFactory,\n type MarkViewContext,\n type MarkViewFactory,\n type VueMarkViewUserOptions,\n} from '@prosemirror-adapter/vue'\nimport { computed, defineComponent, h, type DefineComponent } from 'vue'\n\nimport { useExtension } from '../hooks/use-extension'\n\n/**\n * @public\n */\nexport interface VueMarkViewProps extends MarkViewContext {}\n\n/**\n * @public\n */\nexport type VueMarkViewComponent = DefineComponent<VueMarkViewProps, any, any>\n\n/**\n * Options for {@link defineVueMarkView}.\n *\n * @public\n */\nexport interface VueMarkViewOptions extends CoreMarkViewUserOptions<VueMarkViewComponent> {\n /**\n * The name of the mark type.\n */\n name: string\n}\n\nfunction withMarkViewProps(component: VueMarkViewComponent) {\n return defineComponent({\n name: 'MarkViewPropsWrapper',\n setup: () => {\n const props: Readonly<VueMarkViewProps> = useMarkViewContext()\n return () => h(component, props)\n },\n })\n}\n\n/**\n * @internal\n */\nexport const VueMarkViewsConsumer: DefineComponent = /* @__PURE__ */ defineComponent({\n name: 'VueMarkViewsConsumer',\n setup: () => {\n const markViewFactory: MarkViewFactory = useMarkViewFactory()\n const extension = computed(() => {\n return defineVueMarkViewFactory(markViewFactory)\n })\n useExtension(extension)\n return (): null => null\n },\n})\n\n/**\n * Defines a mark view using a Vue component.\n *\n * @public\n */\nexport function defineVueMarkView(options: VueMarkViewOptions): Extension {\n const { name, component, ...userOptions } = options\n\n const args: VueMarkViewUserOptions = {\n ...userOptions,\n component: withMarkViewProps(component),\n }\n\n return defineMarkViewComponent<VueMarkViewUserOptions>({\n group: 'vue',\n name,\n args,\n })\n}\n\nfunction defineVueMarkViewFactory(\n factory: (options: VueMarkViewUserOptions) => MarkViewConstructor,\n) {\n return defineMarkViewFactory<VueMarkViewUserOptions>({\n group: 'vue',\n factory,\n })\n}\n","import { defineNodeViewComponent, defineNodeViewFactory, type Extension } from '@prosekit/core'\nimport type { NodeViewConstructor } from '@prosekit/pm/view'\nimport type { CoreNodeViewUserOptions } from '@prosemirror-adapter/core'\nimport {\n useNodeViewContext,\n useNodeViewFactory,\n type NodeViewContext,\n type NodeViewFactory,\n type VueNodeViewUserOptions,\n} from '@prosemirror-adapter/vue'\nimport { computed, defineComponent, h, type DefineComponent } from 'vue'\n\nimport { useExtension } from '../hooks/use-extension'\n\n/**\n * @public\n */\nexport interface VueNodeViewProps extends NodeViewContext {}\n\n/**\n * @public\n */\nexport type VueNodeViewComponent = DefineComponent<VueNodeViewProps, any, any>\n\n/**\n * Options for {@link defineVueNodeView}.\n *\n * @public\n */\nexport interface VueNodeViewOptions extends CoreNodeViewUserOptions<VueNodeViewComponent> {\n /**\n * The name of the node type.\n */\n name: string\n}\n\nfunction withNodeViewProps(component: VueNodeViewComponent) {\n return defineComponent({\n name: 'NodeViewPropsWrapper',\n setup: () => {\n const props: Readonly<VueNodeViewProps> = useNodeViewContext()\n return () => h(component, props)\n },\n })\n}\n\n/**\n * @internal\n */\nexport const VueNodeViewsConsumer: DefineComponent = /* @__PURE__ */ defineComponent({\n name: 'VueNodeViewsConsumer',\n setup: () => {\n const nodeViewFactory: NodeViewFactory = useNodeViewFactory()\n const extension = computed(() => {\n return defineVueNodeViewFactory(nodeViewFactory)\n })\n useExtension(extension)\n return (): null => null\n },\n})\n\n/**\n * Defines a node view using a Vue component.\n *\n * @public\n */\nexport function defineVueNodeView(options: VueNodeViewOptions): Extension {\n const { name, component, ...userOptions } = options\n\n const args: VueNodeViewUserOptions = {\n ...userOptions,\n component: withNodeViewProps(component),\n }\n\n return defineNodeViewComponent<VueNodeViewUserOptions>({\n group: 'vue',\n name,\n args,\n })\n}\n\nfunction defineVueNodeViewFactory(\n factory: (options: VueNodeViewUserOptions) => NodeViewConstructor,\n) {\n return defineNodeViewFactory<VueNodeViewUserOptions>({\n group: 'vue',\n factory,\n })\n}\n","import type { Editor } from '@prosekit/core'\nimport { ProsemirrorAdapterProvider } from '@prosemirror-adapter/vue'\nimport { defineComponent, h, type DefineSetupFnComponent, type PropType } from 'vue'\n\nimport { VueMarkViewsConsumer } from '../extensions/vue-mark-view'\nimport { VueNodeViewsConsumer } from '../extensions/vue-node-view'\nimport { provideEditor } from '../injection/editor-context'\n\nexport interface ProseKitProps {\n editor: Editor\n}\n\n/**\n * The root component for a ProseKit editor.\n *\n * @public\n */\nexport const ProseKit: DefineSetupFnComponent<ProseKitProps> = defineComponent<ProseKitProps>({\n name: 'ProseKit',\n props: { editor: { type: Object as PropType<Editor>, required: true } },\n setup: (props, { slots }) => {\n provideEditor(props.editor)\n return () => {\n return h(ProsemirrorAdapterProvider, null, () => [\n h(VueNodeViewsConsumer),\n h(VueMarkViewsConsumer),\n slots.default?.(),\n ])\n }\n },\n})\n","import { defineDocChangeHandler } from '@prosekit/core'\nimport type { ProseMirrorNode } from '@prosekit/pm/model'\n\nimport { useExtension, type UseExtensionOptions } from './use-extension'\n\n/**\n * Calls the given handler whenever the editor document changes.\n *\n * @public\n */\nexport function useDocChange(\n handler: (doc: ProseMirrorNode) => void,\n options?: UseExtensionOptions,\n): void {\n const extension = defineDocChangeHandler((view) => handler(view.state.doc))\n useExtension(extension, options)\n}\n","import { defineMountHandler, defineUpdateHandler, ProseKitError, union, type Editor, type Extension } from '@prosekit/core'\nimport { onMounted, onUnmounted, shallowRef, triggerRef, type ShallowRef } from 'vue'\n\nimport { useEditorContext } from '../injection/editor-context'\n\n/**\n * Retrieves the editor instance from the nearest ProseKit component.\n *\n * @public\n */\nexport function useEditor<E extends Extension = any>(options?: {\n /**\n * Whether to update the component when the editor is mounted or editor state\n * is updated.\n *\n * @default false\n */\n update?: boolean\n}): ShallowRef<Editor<E>> {\n const update = options?.update ?? false\n\n const editor = useEditorContext<E>()\n if (!editor) {\n throw new ProseKitError(\n 'useEditor must be used within the ProseKit component',\n )\n }\n\n const editorRef = shallowRef<Editor<E>>(editor)\n\n if (update) {\n onMounted(() => {\n const forceUpdate = () => triggerRef(editorRef)\n const extension = union(\n defineMountHandler(forceUpdate),\n defineUpdateHandler(forceUpdate),\n )\n const dispose = editor.use(extension)\n onUnmounted(dispose)\n })\n }\n\n return editorRef\n}\n","import type { Editor, Extension } from '@prosekit/core'\nimport { computed, toValue, type MaybeRefOrGetter, type Ref, type ShallowRef } from 'vue'\n\nimport { useEditor } from './use-editor'\n\nexport interface UseEditorDerivedOptions<E extends Extension = any> {\n /**\n * The editor to add the extension to. If not provided, it will use the\n * editor from the nearest `<ProseKit>` component.\n */\n editor?: MaybeRefOrGetter<Editor<E>>\n}\n\n/**\n * Runs a function to derive a value from the editor instance after editor state\n * changes.\n *\n * This is useful when you need to render something based on the editor state,\n * for example, whether the selected text is wrapped in an italic mark.\n *\n * It returns a shallow ref of the derived value that updates whenever the editor\n * state changes.\n *\n * @public\n */\nexport function useEditorDerivedValue<E extends Extension, Derived>(\n /**\n * A function that receives the editor instance and returns a derived value.\n *\n * It will be called whenever the editor's document state changes, or when it\n * mounts.\n */\n derive: (editor: Editor<E>) => Derived,\n options?: UseEditorDerivedOptions<E>,\n): ShallowRef<Derived> {\n const initialEditor = options?.editor\n const editorAccessor: Ref<Editor<E>> = initialEditor\n ? computed(() => toValue(initialEditor))\n : useEditor<E>({ update: true })\n\n return computed(() => derive(toValue(editorAccessor)))\n}\n","import { defineKeymap, type Keymap } from '@prosekit/core'\nimport { computed, toValue, type MaybeRefOrGetter } from 'vue'\n\nimport { useExtension, type UseExtensionOptions } from './use-extension'\n\nexport function useKeymap(\n keymap: MaybeRefOrGetter<Keymap>,\n options?: UseExtensionOptions,\n): void {\n const extension = computed(() => defineKeymap(toValue(keymap)))\n useExtension(extension, options)\n}\n","import { defineUpdateHandler } from '@prosekit/core'\nimport type { EditorState } from '@prosekit/pm/state'\n\nimport { useExtension, type UseExtensionOptions } from './use-extension'\n\n/**\n * Calls the given handler whenever the editor state changes.\n *\n * @public\n */\nexport function useStateUpdate(\n handler: (state: EditorState) => void,\n options?: UseExtensionOptions,\n): void {\n const extension = defineUpdateHandler((view) => handler(view.state))\n useExtension(extension, options)\n}\n"],"mappings":"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"}
1
+ {"version":3,"file":"prosekit-vue.js","names":[],"sources":["../src/extensions/vue-mark-view.ts","../src/extensions/vue-node-view.ts","../src/hooks/use-editor-extension.ts","../src/components/view-renderer.ts","../src/components/prosekit.ts","../src/hooks/use-priority-extension.ts","../src/hooks/use-extension.ts","../src/hooks/use-doc-change.ts","../src/hooks/use-editor.ts","../src/hooks/use-editor-derived-value.ts","../src/hooks/use-keymap.ts","../src/hooks/use-state-update.ts"],"sourcesContent":["import { defineMarkViewComponent, defineMarkViewFactory, type Extension } from '@prosekit/core'\nimport type { CoreMarkViewUserOptions } from '@prosemirror-adapter/core'\nimport {\n AbstractVueMarkView,\n buildVueMarkViewCreator,\n type MarkViewContext,\n type VueRendererComponent,\n type VueRendererResult,\n} from '@prosemirror-adapter/vue'\nimport { defineComponent, h, markRaw, Teleport, type DefineComponent } from 'vue'\n\n/**\n * @public\n */\nexport interface VueMarkViewProps extends MarkViewContext {}\n\n/**\n * @public\n */\nexport type VueMarkViewComponent = DefineComponent<VueMarkViewProps, any, any>\n\n/**\n * Options for {@link defineVueMarkView}.\n *\n * @public\n */\nexport interface VueMarkViewOptions extends CoreMarkViewUserOptions<VueMarkViewComponent> {\n /**\n * The name of the mark type.\n */\n name: string\n}\n\nclass ProseKitVueMarkView extends AbstractVueMarkView<VueMarkViewComponent> {\n render = (): VueRendererComponent => {\n const UserComponent = this.component\n const render = () => {\n const props = this.context\n return h(Teleport, { key: this.key, to: this.dom }, [h(UserComponent, props)])\n }\n const RendererComponent: VueRendererComponent = defineComponent({\n name: 'ProsemirrorMarkView',\n setup: () => {\n return render\n },\n })\n return markRaw(RendererComponent)\n }\n}\n\n/**\n * @internal\n */\nexport function defineVueMarkViewFactory(\n renderVueRenderer: VueRendererResult['renderVueRenderer'],\n removeVueRenderer: VueRendererResult['removeVueRenderer'],\n): Extension {\n const factory = buildVueMarkViewCreator(renderVueRenderer, removeVueRenderer, ProseKitVueMarkView)\n return defineMarkViewFactory<VueMarkViewOptions>({\n group: 'vue',\n factory,\n })\n}\n\n/**\n * Defines a mark view using a Vue component.\n *\n * @public\n */\nexport function defineVueMarkView(options: VueMarkViewOptions): Extension {\n return defineMarkViewComponent<VueMarkViewOptions>({\n group: 'vue',\n name: options.name,\n args: options,\n })\n}\n","import { defineNodeViewComponent, defineNodeViewFactory, type Extension } from '@prosekit/core'\nimport type { CoreNodeViewUserOptions } from '@prosemirror-adapter/core'\nimport {\n AbstractVueNodeView,\n buildVueNodeViewCreator,\n type NodeViewContext,\n type VueRendererComponent,\n type VueRendererResult,\n} from '@prosemirror-adapter/vue'\nimport { defineComponent, h, markRaw, Teleport, type DefineComponent } from 'vue'\n\n/**\n * @public\n */\nexport interface VueNodeViewProps extends NodeViewContext {}\n\n/**\n * @public\n */\nexport type VueNodeViewComponent = DefineComponent<VueNodeViewProps, any, any>\n\n/**\n * Options for {@link defineVueNodeView}.\n *\n * @public\n */\nexport interface VueNodeViewOptions extends CoreNodeViewUserOptions<VueNodeViewComponent> {\n /**\n * The name of the node type.\n */\n name: string\n}\n\nclass ProseKitVueNodeView extends AbstractVueNodeView<VueNodeViewComponent> {\n render = (): VueRendererComponent => {\n const UserComponent = this.component\n const render = () => {\n const props = this.context\n return h(Teleport, { key: this.key, to: this.dom }, [h(UserComponent, props)])\n }\n const RendererComponent: VueRendererComponent = defineComponent({\n name: 'ProsemirrorNodeView',\n setup: () => {\n return render\n },\n })\n return markRaw(RendererComponent)\n }\n}\n\n/**\n * @internal\n */\nexport function defineVueNodeViewFactory(\n renderVueRenderer: VueRendererResult['renderVueRenderer'],\n removeVueRenderer: VueRendererResult['removeVueRenderer'],\n): Extension {\n const factory = buildVueNodeViewCreator(renderVueRenderer, removeVueRenderer, ProseKitVueNodeView)\n return defineNodeViewFactory<VueNodeViewOptions>({\n group: 'vue',\n factory,\n })\n}\n\n/**\n * Defines a node view using a Vue component.\n *\n * @public\n */\nexport function defineVueNodeView(options: VueNodeViewOptions): Extension {\n return defineNodeViewComponent<VueNodeViewOptions>({\n group: 'vue',\n name: options.name,\n args: options,\n })\n}\n","import { EditorNotFoundError, type Editor, type Extension } from '@prosekit/core'\nimport { toValue, watchPostEffect, type MaybeRefOrGetter } from 'vue'\n\nimport { useEditorContext } from '../injection/editor-context.ts'\n\n/**\n * @internal\n */\nexport function useEditorExtension(\n editorRef: MaybeRefOrGetter<Editor> | null | undefined,\n extensionRef: MaybeRefOrGetter<Extension | null> | null,\n): void {\n const editorContext = useEditorContext()\n\n watchPostEffect((onCleanup) => {\n const editor = toValue(editorRef) || toValue(editorContext)\n const extension = toValue(extensionRef)\n\n if (!editor) {\n throw new EditorNotFoundError()\n }\n if (extension) {\n onCleanup(editor.use(extension))\n }\n })\n}\n","import { union, type Editor } from '@prosekit/core'\nimport { useVueRenderer } from '@prosemirror-adapter/vue'\nimport { defineComponent, type DefineSetupFnComponent, type PropType } from 'vue'\n\nimport { defineVueMarkViewFactory } from '../extensions/vue-mark-view.ts'\nimport { defineVueNodeViewFactory } from '../extensions/vue-node-view.ts'\nimport { useEditorExtension } from '../hooks/use-editor-extension.ts'\n\n/**\n * @internal\n */\ninterface ViewRendererProps {\n editor: Editor\n}\n\n/**\n * @internal\n */\nexport const ViewRenderer: DefineSetupFnComponent<ViewRendererProps> = defineComponent<ViewRendererProps>({\n name: 'ViewRenderer',\n props: { editor: { type: Object as PropType<Editor>, required: true } },\n setup: (props, { slots }) => {\n const { renderVueRenderer, removeVueRenderer, render } = useVueRenderer()\n\n const extension = union([\n defineVueMarkViewFactory(renderVueRenderer, removeVueRenderer),\n defineVueNodeViewFactory(renderVueRenderer, removeVueRenderer),\n ])\n\n useEditorExtension(() => props.editor, extension)\n\n return () => [slots.default?.(), render()]\n },\n})\n","import type { Editor } from '@prosekit/core'\nimport { defineComponent, h, type DefineSetupFnComponent, type PropType } from 'vue'\n\nimport { provideEditor } from '../injection/editor-context.ts'\n\nimport { ViewRenderer } from './view-renderer.ts'\n\nexport interface ProseKitProps {\n editor: Editor\n}\n\n/**\n * The root component for a ProseKit editor.\n *\n * @public\n */\nexport const ProseKit: DefineSetupFnComponent<ProseKitProps> = defineComponent<ProseKitProps>({\n name: 'ProseKit',\n props: { editor: { type: Object as PropType<Editor>, required: true } },\n setup: (props, { slots }) => {\n provideEditor(props.editor)\n return () =>\n h(\n ViewRenderer,\n { editor: props.editor },\n () => slots.default?.(),\n )\n },\n})\n","import { withPriority, type Extension, type Priority } from '@prosekit/core'\nimport { computed, toValue, type ComputedRef, type MaybeRefOrGetter } from 'vue'\n\n/**\n * @internal\n */\nexport function usePriorityExtension<T extends Extension = Extension>(\n extension: MaybeRefOrGetter<T | null>,\n priority: Priority | null | undefined,\n): ComputedRef<T | null> {\n return computed(() => {\n const ext = toValue(extension)\n return ext && priority ? withPriority(ext, priority) : ext\n })\n}\n","import type { Editor, Extension, Priority } from '@prosekit/core'\nimport type { MaybeRefOrGetter } from 'vue'\n\nimport { useEditorExtension } from './use-editor-extension.ts'\nimport { usePriorityExtension } from './use-priority-extension.ts'\n\nexport interface UseExtensionOptions {\n /**\n * The editor to add the extension to. If not provided, it will use the\n * editor from the nearest `<ProseKit>` component.\n */\n editor?: MaybeRefOrGetter<Editor>\n\n /**\n * Optional priority to add the extension with.\n */\n priority?: Priority\n}\n\n/**\n * Add an extension to the editor.\n *\n * @public\n */\nexport function useExtension(\n /**\n * The ref to an extension to add to the editor. If it changes, the previous\n * extension will be removed and the new one (if not null) will be added.\n */\n extension: MaybeRefOrGetter<Extension | null>,\n options?: UseExtensionOptions,\n): void {\n useEditorExtension(\n options?.editor,\n usePriorityExtension(extension, options?.priority),\n )\n}\n","import { defineDocChangeHandler } from '@prosekit/core'\nimport type { ProseMirrorNode } from '@prosekit/pm/model'\n\nimport { useExtension, type UseExtensionOptions } from './use-extension.ts'\n\n/**\n * Calls the given handler whenever the editor document changes.\n *\n * @public\n */\nexport function useDocChange(\n handler: (doc: ProseMirrorNode) => void,\n options?: UseExtensionOptions,\n): void {\n const extension = defineDocChangeHandler((view) => handler(view.state.doc))\n useExtension(extension, options)\n}\n","import { defineMountHandler, defineUpdateHandler, ProseKitError, union, type Editor, type Extension } from '@prosekit/core'\nimport { onMounted, onUnmounted, shallowRef, triggerRef, type ShallowRef } from 'vue'\n\nimport { useEditorContext } from '../injection/editor-context.ts'\n\n/**\n * Retrieves the editor instance from the nearest ProseKit component.\n *\n * @public\n */\nexport function useEditor<E extends Extension = any>(options?: {\n /**\n * Whether to update the component when the editor is mounted or editor state\n * is updated.\n *\n * @default false\n */\n update?: boolean\n}): ShallowRef<Editor<E>> {\n const update = options?.update ?? false\n\n const editor = useEditorContext<E>()\n if (!editor) {\n throw new ProseKitError(\n 'useEditor must be used within the ProseKit component',\n )\n }\n\n const editorRef = shallowRef<Editor<E>>(editor)\n\n if (update) {\n const forceUpdate = () => triggerRef(editorRef)\n onMounted(() => {\n const extension = union(\n defineMountHandler(forceUpdate),\n defineUpdateHandler(forceUpdate),\n )\n const dispose = editor.use(extension)\n onUnmounted(dispose)\n })\n }\n\n return editorRef\n}\n","import type { Editor, Extension } from '@prosekit/core'\nimport { computed, toValue, type MaybeRefOrGetter, type Ref, type ShallowRef } from 'vue'\n\nimport { useEditor } from './use-editor.ts'\n\nexport interface UseEditorDerivedOptions<E extends Extension = any> {\n /**\n * The editor to add the extension to. If not provided, it will use the\n * editor from the nearest `<ProseKit>` component.\n */\n editor?: MaybeRefOrGetter<Editor<E>>\n}\n\n/**\n * Runs a function to derive a value from the editor instance after editor state\n * changes.\n *\n * This is useful when you need to render something based on the editor state,\n * for example, whether the selected text is wrapped in an italic mark.\n *\n * It returns a shallow ref of the derived value that updates whenever the editor\n * state changes.\n *\n * @public\n */\nexport function useEditorDerivedValue<E extends Extension, Derived>(\n /**\n * A function that receives the editor instance and returns a derived value.\n *\n * It will be called whenever the editor's document state changes, or when it\n * mounts.\n */\n derive: (editor: Editor<E>) => Derived,\n options?: UseEditorDerivedOptions<E>,\n): ShallowRef<Derived> {\n const initialEditor = options?.editor\n const editorAccessor: Ref<Editor<E>> = initialEditor\n ? computed(() => toValue(initialEditor))\n : useEditor<E>({ update: true })\n\n return computed(() => derive(toValue(editorAccessor)))\n}\n","import { defineKeymap, type Keymap } from '@prosekit/core'\nimport { computed, toValue, type MaybeRefOrGetter } from 'vue'\n\nimport { useExtension, type UseExtensionOptions } from './use-extension.ts'\n\nexport function useKeymap(\n keymap: MaybeRefOrGetter<Keymap>,\n options?: UseExtensionOptions,\n): void {\n const extension = computed(() => defineKeymap(toValue(keymap)))\n useExtension(extension, options)\n}\n","import { defineUpdateHandler } from '@prosekit/core'\nimport type { EditorState } from '@prosekit/pm/state'\n\nimport { useExtension, type UseExtensionOptions } from './use-extension.ts'\n\n/**\n * Calls the given handler whenever the editor state changes.\n *\n * @public\n */\nexport function useStateUpdate(\n handler: (state: EditorState) => void,\n options?: UseExtensionOptions,\n): void {\n const extension = defineUpdateHandler((view) => handler(view.state))\n useExtension(extension, options)\n}\n"],"mappings":";;;;;AAiCA,IAAM,sBAAN,cAAkC,oBAA0C;;;sBACrC;GACnC,MAAM,gBAAgB,KAAK;GAC3B,MAAM,eAAe;IACnB,MAAM,QAAQ,KAAK;AACnB,WAAO,EAAE,UAAU;KAAE,KAAK,KAAK;KAAK,IAAI,KAAK;KAAK,EAAE,CAAC,EAAE,eAAe,MAAM,CAAC,CAAC;;AAQhF,UAAO,QANyC,gBAAgB;IAC9D,MAAM;IACN,aAAa;AACX,YAAO;;IAEV,CAAC,CAC+B;;;;;;;AAOrC,SAAgB,yBACd,mBACA,mBACW;AAEX,QAAO,sBAA0C;EAC/C,OAAO;EACP,SAHc,wBAAwB,mBAAmB,mBAAmB,oBAAoB;EAIjG,CAAC;;;;;;;AAQJ,SAAgB,kBAAkB,SAAwC;AACxE,QAAO,wBAA4C;EACjD,OAAO;EACP,MAAM,QAAQ;EACd,MAAM;EACP,CAAC;;;;ACzCJ,IAAM,sBAAN,cAAkC,oBAA0C;;;sBACrC;GACnC,MAAM,gBAAgB,KAAK;GAC3B,MAAM,eAAe;IACnB,MAAM,QAAQ,KAAK;AACnB,WAAO,EAAE,UAAU;KAAE,KAAK,KAAK;KAAK,IAAI,KAAK;KAAK,EAAE,CAAC,EAAE,eAAe,MAAM,CAAC,CAAC;;AAQhF,UAAO,QANyC,gBAAgB;IAC9D,MAAM;IACN,aAAa;AACX,YAAO;;IAEV,CAAC,CAC+B;;;;;;;AAOrC,SAAgB,yBACd,mBACA,mBACW;AAEX,QAAO,sBAA0C;EAC/C,OAAO;EACP,SAHc,wBAAwB,mBAAmB,mBAAmB,oBAAoB;EAIjG,CAAC;;;;;;;AAQJ,SAAgB,kBAAkB,SAAwC;AACxE,QAAO,wBAA4C;EACjD,OAAO;EACP,MAAM,QAAQ;EACd,MAAM;EACP,CAAC;;;;;;;AClEJ,SAAgB,mBACd,WACA,cACM;CACN,MAAM,gBAAgB,kBAAkB;AAExC,kBAAiB,cAAc;EAC7B,MAAM,SAAS,QAAQ,UAAU,IAAI,QAAQ,cAAc;EAC3D,MAAM,YAAY,QAAQ,aAAa;AAEvC,MAAI,CAAC,OACH,OAAM,IAAI,qBAAqB;AAEjC,MAAI,UACF,WAAU,OAAO,IAAI,UAAU,CAAC;GAElC;;;;;;;ACNJ,MAAa,eAA0D,gBAAmC;CACxG,MAAM;CACN,OAAO,EAAE,QAAQ;EAAE,MAAM;EAA4B,UAAU;EAAM,EAAE;CACvE,QAAQ,OAAO,EAAE,YAAY;EAC3B,MAAM,EAAE,mBAAmB,mBAAmB,WAAW,gBAAgB;AAOzE,2BAAyB,MAAM,QALb,MAAM,CACtB,yBAAyB,mBAAmB,kBAAkB,EAC9D,yBAAyB,mBAAmB,kBAAkB,CAC/D,CAAC,CAE+C;AAEjD,eAAa,CAAC,MAAM,WAAW,EAAE,QAAQ,CAAC;;CAE7C,CAAC;;;;;;;;ACjBF,MAAa,WAAkD,gBAA+B;CAC5F,MAAM;CACN,OAAO,EAAE,QAAQ;EAAE,MAAM;EAA4B,UAAU;EAAM,EAAE;CACvE,QAAQ,OAAO,EAAE,YAAY;AAC3B,gBAAc,MAAM,OAAO;AAC3B,eACE,EACE,cACA,EAAE,QAAQ,MAAM,QAAQ,QAClB,MAAM,WAAW,CACxB;;CAEN,CAAC;;;;;;ACtBF,SAAgB,qBACd,WACA,UACuB;AACvB,QAAO,eAAe;EACpB,MAAM,MAAM,QAAQ,UAAU;AAC9B,SAAO,OAAO,WAAW,aAAa,KAAK,SAAS,GAAG;GACvD;;;;;;;;;ACWJ,SAAgB,aAKd,WACA,SACM;AACN,oBACE,SAAS,QACT,qBAAqB,WAAW,SAAS,SAAS,CACnD;;;;;;;;;ACzBH,SAAgB,aACd,SACA,SACM;AAEN,cADkB,wBAAwB,SAAS,QAAQ,KAAK,MAAM,IAAI,CAAC,EACnD,QAAQ;;;;;;;;;ACLlC,SAAgB,UAAqC,SAQ3B;CACxB,MAAM,SAAS,SAAS,UAAU;CAElC,MAAM,SAAS,kBAAqB;AACpC,KAAI,CAAC,OACH,OAAM,IAAI,cACR,uDACD;CAGH,MAAM,YAAY,WAAsB,OAAO;AAE/C,KAAI,QAAQ;EACV,MAAM,oBAAoB,WAAW,UAAU;AAC/C,kBAAgB;GACd,MAAM,YAAY,MAChB,mBAAmB,YAAY,EAC/B,oBAAoB,YAAY,CACjC;AAED,eADgB,OAAO,IAAI,UAAU,CACjB;IACpB;;AAGJ,QAAO;;;;;;;;;;;;;;;;ACjBT,SAAgB,sBAOd,QACA,SACqB;CACrB,MAAM,gBAAgB,SAAS;CAC/B,MAAM,iBAAiC,gBACnC,eAAe,QAAQ,cAAc,CAAC,GACtC,UAAa,EAAE,QAAQ,MAAM,CAAC;AAElC,QAAO,eAAe,OAAO,QAAQ,eAAe,CAAC,CAAC;;;;ACnCxD,SAAgB,UACd,QACA,SACM;AAEN,cADkB,eAAe,aAAa,QAAQ,OAAO,CAAC,CAAC,EACvC,QAAQ;;;;;;;;;ACAlC,SAAgB,eACd,SACA,SACM;AAEN,cADkB,qBAAqB,SAAS,QAAQ,KAAK,MAAM,CAAC,EAC5C,QAAQ"}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@prosekit/vue",
3
3
  "type": "module",
4
- "version": "0.6.6",
4
+ "version": "0.6.8",
5
5
  "private": false,
6
6
  "description": "Vue components and utilities for ProseKit",
7
7
  "author": {
@@ -68,11 +68,11 @@
68
68
  "src"
69
69
  ],
70
70
  "dependencies": {
71
- "@prosemirror-adapter/core": "^0.4.6",
72
- "@prosemirror-adapter/vue": "^0.4.6",
73
- "@prosekit/core": "^0.10.0",
71
+ "@prosemirror-adapter/core": "^0.5.2",
72
+ "@prosemirror-adapter/vue": "^0.5.2",
73
+ "@prosekit/web": "^0.7.13",
74
74
  "@prosekit/pm": "^0.1.15",
75
- "@prosekit/web": "^0.7.11"
75
+ "@prosekit/core": "^0.11.0"
76
76
  },
77
77
  "peerDependencies": {
78
78
  "vue": ">= 3.0.0"
@@ -83,12 +83,13 @@
83
83
  }
84
84
  },
85
85
  "devDependencies": {
86
- "@vitejs/plugin-vue": "^6.0.4",
86
+ "@vitejs/plugin-vue": "^6.0.5",
87
87
  "@vue/test-utils": "^2.4.6",
88
- "tsdown": "^0.20.3",
88
+ "tsdown": "^0.21.4",
89
89
  "typescript": "~5.9.3",
90
- "vitest": "^4.0.18",
91
- "vue": "^3.5.28",
90
+ "vitest": "^4.1.1",
91
+ "vue": "^3.5.30",
92
+ "@prosekit/config-ts": "0.0.0",
92
93
  "@prosekit/config-vitest": "0.0.0",
93
94
  "@prosekit/config-tsdown": "0.0.0"
94
95
  },
@@ -6,8 +6,8 @@ import {
6
6
  } from '@prosekit/web/autocomplete'
7
7
  import type { DefineSetupFnComponent, HTMLAttributes } from 'vue'
8
8
 
9
- import { createComponent } from '../create-component'
10
- import type { CreateEmits } from '../create-emits'
9
+ import { createComponent } from '../create-component.ts'
10
+ import type { CreateEmits } from '../create-emits.ts'
11
11
 
12
12
  /**
13
13
  * Props for the {@link AutocompleteEmpty} component.
@@ -6,8 +6,8 @@ import {
6
6
  } from '@prosekit/web/autocomplete'
7
7
  import type { DefineSetupFnComponent, HTMLAttributes } from 'vue'
8
8
 
9
- import { createComponent } from '../create-component'
10
- import type { CreateEmits } from '../create-emits'
9
+ import { createComponent } from '../create-component.ts'
10
+ import type { CreateEmits } from '../create-emits.ts'
11
11
 
12
12
  /**
13
13
  * Props for the {@link AutocompleteItem} component.
@@ -6,8 +6,8 @@ import {
6
6
  } from '@prosekit/web/autocomplete'
7
7
  import type { DefineSetupFnComponent, HTMLAttributes } from 'vue'
8
8
 
9
- import { createComponent } from '../create-component'
10
- import type { CreateEmits } from '../create-emits'
9
+ import { createComponent } from '../create-component.ts'
10
+ import type { CreateEmits } from '../create-emits.ts'
11
11
 
12
12
  /**
13
13
  * Props for the {@link AutocompleteList} component.
@@ -6,8 +6,8 @@ import {
6
6
  } from '@prosekit/web/autocomplete'
7
7
  import type { DefineSetupFnComponent, HTMLAttributes } from 'vue'
8
8
 
9
- import { createComponent } from '../create-component'
10
- import type { CreateEmits } from '../create-emits'
9
+ import { createComponent } from '../create-component.ts'
10
+ import type { CreateEmits } from '../create-emits.ts'
11
11
 
12
12
  /**
13
13
  * Props for the {@link AutocompletePopover} component.
@@ -1,7 +1,7 @@
1
- export { AutocompleteEmpty, type AutocompleteEmptyProps, type AutocompleteEmptyEmits } from './autocomplete-empty.gen'
1
+ export { AutocompleteEmpty, type AutocompleteEmptyProps, type AutocompleteEmptyEmits } from './autocomplete-empty.gen.ts'
2
2
 
3
- export { AutocompleteItem, type AutocompleteItemProps, type AutocompleteItemEmits } from './autocomplete-item.gen'
3
+ export { AutocompleteItem, type AutocompleteItemProps, type AutocompleteItemEmits } from './autocomplete-item.gen.ts'
4
4
 
5
- export { AutocompleteList, type AutocompleteListProps, type AutocompleteListEmits } from './autocomplete-list.gen'
5
+ export { AutocompleteList, type AutocompleteListProps, type AutocompleteListEmits } from './autocomplete-list.gen.ts'
6
6
 
7
- export { AutocompletePopover, type AutocompletePopoverProps, type AutocompletePopoverEmits } from './autocomplete-popover.gen'
7
+ export { AutocompletePopover, type AutocompletePopoverProps, type AutocompletePopoverEmits } from './autocomplete-popover.gen.ts'
@@ -6,8 +6,8 @@ import {
6
6
  } from '@prosekit/web/block-handle'
7
7
  import type { DefineSetupFnComponent, HTMLAttributes } from 'vue'
8
8
 
9
- import { createComponent } from '../create-component'
10
- import type { CreateEmits } from '../create-emits'
9
+ import { createComponent } from '../create-component.ts'
10
+ import type { CreateEmits } from '../create-emits.ts'
11
11
 
12
12
  /**
13
13
  * Props for the {@link BlockHandleAdd} component.
@@ -6,8 +6,8 @@ import {
6
6
  } from '@prosekit/web/block-handle'
7
7
  import type { DefineSetupFnComponent, HTMLAttributes } from 'vue'
8
8
 
9
- import { createComponent } from '../create-component'
10
- import type { CreateEmits } from '../create-emits'
9
+ import { createComponent } from '../create-component.ts'
10
+ import type { CreateEmits } from '../create-emits.ts'
11
11
 
12
12
  /**
13
13
  * Props for the {@link BlockHandleDraggable} component.
@@ -6,8 +6,8 @@ import {
6
6
  } from '@prosekit/web/block-handle'
7
7
  import type { DefineSetupFnComponent, HTMLAttributes } from 'vue'
8
8
 
9
- import { createComponent } from '../create-component'
10
- import type { CreateEmits } from '../create-emits'
9
+ import { createComponent } from '../create-component.ts'
10
+ import type { CreateEmits } from '../create-emits.ts'
11
11
 
12
12
  /**
13
13
  * Props for the {@link BlockHandlePopover} component.
@@ -1,5 +1,5 @@
1
- export { BlockHandleAdd, type BlockHandleAddProps, type BlockHandleAddEmits } from './block-handle-add.gen'
1
+ export { BlockHandleAdd, type BlockHandleAddProps, type BlockHandleAddEmits } from './block-handle-add.gen.ts'
2
2
 
3
- export { BlockHandleDraggable, type BlockHandleDraggableProps, type BlockHandleDraggableEmits } from './block-handle-draggable.gen'
3
+ export { BlockHandleDraggable, type BlockHandleDraggableProps, type BlockHandleDraggableEmits } from './block-handle-draggable.gen.ts'
4
4
 
5
- export { BlockHandlePopover, type BlockHandlePopoverProps, type BlockHandlePopoverEmits } from './block-handle-popover.gen'
5
+ export { BlockHandlePopover, type BlockHandlePopoverProps, type BlockHandlePopoverEmits } from './block-handle-popover.gen.ts'
@@ -1,6 +1,6 @@
1
1
  import { defineComponent, h, onMounted, ref, watchEffect, type DefineSetupFnComponent, type EmitsOptions, type HTMLAttributes } from 'vue'
2
2
 
3
- import { useEditorContext } from '../injection/editor-context'
3
+ import { useEditorContext } from '../injection/editor-context.ts'
4
4
 
5
5
  export function createComponent<
6
6
  Props extends { [PropName in keyof Props]: unknown },
@@ -6,8 +6,8 @@ import {
6
6
  } from '@prosekit/web/drop-indicator'
7
7
  import type { DefineSetupFnComponent, HTMLAttributes } from 'vue'
8
8
 
9
- import { createComponent } from '../create-component'
10
- import type { CreateEmits } from '../create-emits'
9
+ import { createComponent } from '../create-component.ts'
10
+ import type { CreateEmits } from '../create-emits.ts'
11
11
 
12
12
  /**
13
13
  * Props for the {@link DropIndicator} component.
@@ -1 +1 @@
1
- export { DropIndicator, type DropIndicatorProps, type DropIndicatorEmits } from './drop-indicator.gen'
1
+ export { DropIndicator, type DropIndicatorProps, type DropIndicatorEmits } from './drop-indicator.gen.ts'
@@ -1 +1 @@
1
- export { InlinePopover, type InlinePopoverProps, type InlinePopoverEmits } from './inline-popover.gen'
1
+ export { InlinePopover, type InlinePopoverProps, type InlinePopoverEmits } from './inline-popover.gen.ts'
@@ -6,8 +6,8 @@ import {
6
6
  } from '@prosekit/web/inline-popover'
7
7
  import type { DefineSetupFnComponent, HTMLAttributes } from 'vue'
8
8
 
9
- import { createComponent } from '../create-component'
10
- import type { CreateEmits } from '../create-emits'
9
+ import { createComponent } from '../create-component.ts'
10
+ import type { CreateEmits } from '../create-emits.ts'
11
11
 
12
12
  /**
13
13
  * Props for the {@link InlinePopover} component.
@@ -1,5 +1,5 @@
1
- export { PopoverContent, type PopoverContentProps, type PopoverContentEmits } from './popover-content.gen'
1
+ export { PopoverContent, type PopoverContentProps, type PopoverContentEmits } from './popover-content.gen.ts'
2
2
 
3
- export { PopoverRoot, type PopoverRootProps, type PopoverRootEmits } from './popover-root.gen'
3
+ export { PopoverRoot, type PopoverRootProps, type PopoverRootEmits } from './popover-root.gen.ts'
4
4
 
5
- export { PopoverTrigger, type PopoverTriggerProps, type PopoverTriggerEmits } from './popover-trigger.gen'
5
+ export { PopoverTrigger, type PopoverTriggerProps, type PopoverTriggerEmits } from './popover-trigger.gen.ts'
@@ -6,8 +6,8 @@ import {
6
6
  } from '@prosekit/web/popover'
7
7
  import type { DefineSetupFnComponent, HTMLAttributes } from 'vue'
8
8
 
9
- import { createComponent } from '../create-component'
10
- import type { CreateEmits } from '../create-emits'
9
+ import { createComponent } from '../create-component.ts'
10
+ import type { CreateEmits } from '../create-emits.ts'
11
11
 
12
12
  /**
13
13
  * Props for the {@link PopoverContent} component.
@@ -6,8 +6,8 @@ import {
6
6
  } from '@prosekit/web/popover'
7
7
  import type { DefineSetupFnComponent, HTMLAttributes } from 'vue'
8
8
 
9
- import { createComponent } from '../create-component'
10
- import type { CreateEmits } from '../create-emits'
9
+ import { createComponent } from '../create-component.ts'
10
+ import type { CreateEmits } from '../create-emits.ts'
11
11
 
12
12
  /**
13
13
  * Props for the {@link PopoverRoot} component.
@@ -6,8 +6,8 @@ import {
6
6
  } from '@prosekit/web/popover'
7
7
  import type { DefineSetupFnComponent, HTMLAttributes } from 'vue'
8
8
 
9
- import { createComponent } from '../create-component'
10
- import type { CreateEmits } from '../create-emits'
9
+ import { createComponent } from '../create-component.ts'
10
+ import type { CreateEmits } from '../create-emits.ts'
11
11
 
12
12
  /**
13
13
  * Props for the {@link PopoverTrigger} component.