@prosekit/vue 0.2.0 → 0.2.2

package/dist/_tsup-dts-rollup.d.ts

@@ -10,6 +10,7 @@ import { ComboBoxListProps as ComboBoxListProps_2 } from '@prosekit/lit/combo-bo
 import { ComboBoxProps as ComboBoxProps_2 } from '@prosekit/lit/combo-box';
 import { CommandArgs } from '@prosekit/core';
 import { ComponentOptionsMixin } from 'vue';
+import { ComputedRef } from 'vue';
 import { CoreNodeView } from '@prosemirror-adapter/core';
 import type { CoreNodeViewSpec } from '@prosemirror-adapter/core';
 import type { CoreNodeViewUserOptions } from '@prosemirror-adapter/core';
@@ -17,6 +18,7 @@ import type { Decoration } from '@prosekit/pm/view';
 import type { DecorationSource } from '@prosekit/pm/view';
 import { DefineComponent } from 'vue';
 import { Editor } from '@prosekit/core';
+import type { EditorState } from '@prosekit/pm/state';
 import type { EditorView } from '@prosekit/pm/view';
 import { Extension } from '@prosekit/core';
 import { ExtensionTyping } from '@prosekit/core';
@@ -24,6 +26,7 @@ import { ExtractPropTypes } from 'vue';
 import type { InjectionKey } from 'vue';
 import { InlinePopoverProps as InlinePopoverProps_2 } from '@prosekit/lit/inline-popover';
 import { Keymap } from '@prosekit/core';
+import { MaybeRefOrGetter } from 'vue';
 import type { Node as Node_2 } from '@prosekit/pm/model';
 import type { NodeViewConstructor } from '@prosekit/pm/view';
 import { Options } from 'tsup';
@@ -32,7 +35,7 @@ import { PositioningOptions } from '@prosekit/lit/autocomplete-popover';
 import { PositioningOptions as PositioningOptions_alias_1 } from '@prosekit/lit/inline-popover';
 import { Priority } from '@prosekit/core';
 import { PublicProps } from 'vue';
-import { Ref } from 'vue';
+import type { Ref } from 'vue';
 import { RendererElement } from 'vue';
 import { RendererNode } from 'vue';
 import { ResizableHandleProps as ResizableHandleProps_2 } from '@prosekit/lit/resizable-handle';
@@ -129,8 +132,6 @@ export { defineVueNodeView as defineVueNodeView_alias_1 }
  */
 export declare function defineVueNodeViewFactory(nodeViewFactory: NodeViewFactory): Extension<ExtensionTyping<string, string, CommandArgs>>;
 
-export declare function injectEditor(): Editor;
-
 declare const InlinePopover: (props: {
     editor: Editor<any>;
 } & PopoverProps_2 & {
@@ -164,6 +165,11 @@ export declare type PropsWithClass<P = unknown> = P & {
     class?: string | undefined;
 };
 
+/**
+ * The root component for a ProseKit editor.
+ *
+ * @public
+ */
 declare const ProseKit: (props: ProseKitProps & {}) => any;
 export { ProseKit }
 export { ProseKit as ProseKit_alias_1 }
@@ -174,6 +180,9 @@ declare interface ProseKitProps {
 export { ProseKitProps }
 export { ProseKitProps as ProseKitProps_alias_1 }
 
+/**
+ * @internal
+ */
 export declare function provideEditor(editor: Editor): void;
 
 export declare const Resizable: (props: ResizableProps_2 & {
@@ -205,26 +214,63 @@ declare function useEditor<E extends Extension = any>(options?: {
 export { useEditor }
 export { useEditor as useEditor_alias_1 }
 
+/**
+ * @internal
+ */
+export declare function useEditorContext<E extends Extension>(): Editor<E> | undefined;
+
+/**
+ * @internal
+ */
+export declare function useEditorExtension(editorRef: MaybeRefOrGetter<Editor> | null | undefined, extensionRef: MaybeRefOrGetter<Extension | null> | null): void;
+
 /**
  * Add an extension to the editor.
  *
- * It accepts a ref to an optional extension. If the extension is changed, the
- * previous extension will be removed and the new one (if not null) will be
- * added.
+ * @public
  */
-declare function useExtension<T extends Extension = Extension>(extension: Ref<T | null>): void;
+declare function useExtension(
+/**
+ * The ref to an extension to add to the editor. If it changes, the previous
+ * extension will be removed and the new one (if not null) will be added.
+ */
+extension: MaybeRefOrGetter<Extension | null>, options?: UseExtensionOptions): void;
 export { useExtension }
 export { useExtension as useExtension_alias_1 }
 
-declare function useKeymap(keymap: Ref<Keymap>, options?: {
+declare interface UseExtensionOptions {
+    /**
+     * The editor to add the extension to. If not provided, it will use the
+     * editor from the nearest `ProseKit` component.
+     */
+    editor?: MaybeRefOrGetter<Editor>;
+    /**
+     * Optional priority to add the extension with.
+     */
     priority?: Priority;
-}): void;
+}
+export { UseExtensionOptions }
+export { UseExtensionOptions as UseExtensionOptions_alias_1 }
+
+declare function useKeymap(keymap: MaybeRefOrGetter<Keymap>, options?: UseExtensionOptions): void;
 export { useKeymap }
 export { useKeymap as useKeymap_alias_1 }
 
 export declare function useNodeViewFactory(): NodeViewFactory;
 
-export declare function usePriorityExtension<T extends Extension = Extension>(extension: Ref<T | null>, priority?: Priority | null): void;
+/**
+ * @internal
+ */
+export declare function usePriorityExtension<T extends Extension = Extension>(extension: MaybeRefOrGetter<T | null>, priority: Priority | null | undefined): ComputedRef<T | null>;
+
+/**
+ * Calls the given handler whenever the editor state changes.
+ *
+ * @public
+ */
+declare function useStateUpdate(handler: (state: EditorState) => void, options?: UseExtensionOptions): void;
+export { useStateUpdate }
+export { useStateUpdate as useStateUpdate_alias_1 }
 
 export declare function useVueNodeViewCreator(renderVueRenderer: VueRendererResult['renderVueRenderer'], removeVueRenderer: VueRendererResult['removeVueRenderer']): NodeViewFactory;
 

package/dist/prosekit-vue.d.ts

@@ -4,6 +4,8 @@ export { defineVueNodeView } from './_tsup-dts-rollup';
 export { VueNodeViewOptions } from './_tsup-dts-rollup';
 export { useEditor } from './_tsup-dts-rollup';
 export { useExtension } from './_tsup-dts-rollup';
+export { UseExtensionOptions } from './_tsup-dts-rollup';
 export { useKeymap } from './_tsup-dts-rollup';
+export { useStateUpdate } from './_tsup-dts-rollup';
 export { VueNodeViewComponent } from './_tsup-dts-rollup';
 export { VueNodeViewProps } from './_tsup-dts-rollup';

package/dist/prosekit-vue.js

@@ -2,26 +2,22 @@
 import "@prosekit/core";
 import { defineComponent as defineComponent4, h as h3 } from "vue";
 
-// src/injection/editor-injection.ts
-import { ProseKitError } from "@prosekit/core";
-import { inject, provide } from "vue";
-var symbol = Symbol("ProseKitContext");
+// src/injection/editor-context.ts
+import "@prosekit/core";
+import { inject, provide, toRef } from "vue";
+var symbol = Symbol("prosekit-vue-editor-context");
 function provideEditor(editor) {
-  provide(symbol, editor);
+  provide(symbol, toRef(editor));
 }
-function injectEditor() {
-  const editor = inject(symbol);
-  if (!editor) {
-    throw new ProseKitError("Can't inject editor");
-  }
-  return editor;
+function useEditorContext() {
+  return inject(symbol);
 }
 
 // src/views/vue-views-provider.ts
 import { Fragment, defineComponent as defineComponent2, h as h2, provide as provide2 } from "vue";
 
 // src/views/node-view/node-view-context.ts
-import { ProseKitError as ProseKitError2 } from "@prosekit/core";
+import { ProseKitError } from "@prosekit/core";
 import { inject as inject2 } from "vue";
 var nodeViewFactoryKey = Symbol(
   "[ProseKit]useNodeViewFactory"
@@ -29,7 +25,7 @@ var nodeViewFactoryKey = Symbol(
 function useNodeViewFactory() {
   const nodeViewFactory = inject2(nodeViewFactoryKey);
   if (!nodeViewFactory) {
-    throw new ProseKitError2("Cannot find node view factory context.");
+    throw new ProseKitError("Cannot find node view factory context.");
   }
   return nodeViewFactory;
 }
@@ -183,7 +179,7 @@ var VueViewsProvider = defineComponent2({
 });
 
 // src/views/vue-views-comsumer.ts
-import { computed, defineComponent as defineComponent3 } from "vue";
+import { computed as computed2, defineComponent as defineComponent3 } from "vue";
 
 // src/extensions/vue-node-view.ts
 import {
@@ -206,56 +202,49 @@ function defineVueNodeViewFactory(nodeViewFactory) {
 
 // src/hooks/use-extension.ts
 import "@prosekit/core";
-import { unref, watchPostEffect } from "vue";
+import "vue";
 
-// src/hooks/use-editor.ts
-import {
-  defineMountHandler,
-  defineUpdateHandler,
-  union
-} from "@prosekit/core";
-import {
-  onMounted,
-  onUnmounted as onUnmounted2,
-  shallowRef as shallowRef2,
-  triggerRef
-} from "vue";
-function useEditor(options) {
-  var _a;
-  const update = (_a = options == null ? void 0 : options.update) != null ? _a : false;
-  const editor = injectEditor();
-  const editorRef = shallowRef2(editor);
-  if (update) {
-    onMounted(() => {
-      const forceUpdate = () => triggerRef(editorRef);
-      const extension = union([
-        defineMountHandler(forceUpdate),
-        defineUpdateHandler(forceUpdate)
-      ]);
-      const dispose = editor.use(extension);
-      onUnmounted2(dispose);
-    });
-  }
-  return editorRef;
-}
-
-// src/hooks/use-extension.ts
-function useExtension(extension) {
-  const editor = useEditor();
+// src/hooks/use-editor-extension.ts
+import { EditorNotFoundError } from "@prosekit/core";
+import { toValue, watchPostEffect } from "vue";
+function useEditorExtension(editorRef, extensionRef) {
+  const editorContext = useEditorContext();
   watchPostEffect((onCleanup) => {
-    const ext = unref(extension);
-    if (ext) {
-      onCleanup(editor.value.use(ext));
+    const editor = toValue(editorRef) || toValue(editorContext);
+    const extension = toValue(extensionRef);
+    if (!editor) {
+      throw new EditorNotFoundError();
+    }
+    if (extension) {
+      onCleanup(editor.use(extension));
     }
   });
 }
 
+// src/hooks/use-priority-extension.ts
+import { withPriority } from "@prosekit/core";
+import { computed, toValue as toValue2 } from "vue";
+function usePriorityExtension(extension, priority) {
+  return computed(() => {
+    const ext = toValue2(extension);
+    return ext && priority ? withPriority(ext, priority) : ext;
+  });
+}
+
+// src/hooks/use-extension.ts
+function useExtension(extension, options) {
+  useEditorExtension(
+    options == null ? void 0 : options.editor,
+    usePriorityExtension(extension, options == null ? void 0 : options.priority)
+  );
+}
+
 // src/views/vue-views-comsumer.ts
 var VueViewsConsumer = defineComponent3({
   name: "VueViewsConsumer",
   setup: () => {
     const nodeViewFactory = useNodeViewFactory();
-    const extension = computed(() => {
+    const extension = computed2(() => {
       return defineVueNodeViewFactory(nodeViewFactory);
     });
     useExtension(extension);
@@ -280,30 +269,62 @@ var ProseKit = defineComponent4(
   { props: ["editor"] }
 );
 
-// src/hooks/use-keymap.ts
-import { defineKeymap } from "@prosekit/core";
-import { computed as computed3, unref as unref3 } from "vue";
-
-// src/hooks/use-priority-extension.ts
-import { withPriority } from "@prosekit/core";
-import { computed as computed2, unref as unref2 } from "vue";
-function usePriorityExtension(extension, priority) {
-  const extensionWithPriority = computed2(() => {
-    const ext = unref2(extension);
-    return ext && priority ? withPriority(ext, priority) : ext;
-  });
-  return useExtension(extensionWithPriority);
+// src/hooks/use-editor.ts
+import {
+  ProseKitError as ProseKitError2,
+  defineMountHandler,
+  defineUpdateHandler,
+  union
+} from "@prosekit/core";
+import {
+  onMounted,
+  onUnmounted as onUnmounted2,
+  shallowRef as shallowRef2,
+  triggerRef
+} from "vue";
+function useEditor(options) {
+  var _a;
+  const update = (_a = options == null ? void 0 : options.update) != null ? _a : false;
+  const editor = useEditorContext();
+  if (!editor) {
+    throw new ProseKitError2(
+      "useEditor must be used within the ProseKit component"
+    );
+  }
+  const editorRef = shallowRef2(editor);
+  if (update) {
+    onMounted(() => {
+      const forceUpdate = () => triggerRef(editorRef);
+      const extension = union([
+        defineMountHandler(forceUpdate),
+        defineUpdateHandler(forceUpdate)
+      ]);
+      const dispose = editor.use(extension);
+      onUnmounted2(dispose);
+    });
+  }
+  return editorRef;
 }
 
 // src/hooks/use-keymap.ts
+import { defineKeymap } from "@prosekit/core";
+import { computed as computed3, toValue as toValue3 } from "vue";
 function useKeymap(keymap, options) {
-  const extension = computed3(() => defineKeymap(unref3(keymap)));
-  usePriorityExtension(extension, options == null ? void 0 : options.priority);
+  const extension = computed3(() => defineKeymap(toValue3(keymap)));
+  return useExtension(extension, options);
+}
+
+// src/hooks/use-state-update.ts
+import { defineUpdateHandler as defineUpdateHandler2 } from "@prosekit/core";
+function useStateUpdate(handler, options) {
+  const extension = defineUpdateHandler2((view) => handler(view.state));
+  return useExtension(extension, options);
 }
 export {
   ProseKit,
   defineVueNodeView,
   useEditor,
   useExtension,
-  useKeymap
+  useKeymap,
+  useStateUpdate
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@prosekit/vue",
   "type": "module",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "private": false,
   "author": {
     "name": "ocavue",
@@ -95,8 +95,8 @@
     "dist"
   ],
   "dependencies": {
-    "@prosekit/core": "^0.2.5",
-    "@prosekit/lit": "^0.2.0",
+    "@prosekit/core": "^0.2.7",
+    "@prosekit/lit": "^0.2.1",
     "@prosekit/pm": "^0.1.1",
     "@prosemirror-adapter/core": "^0.2.6"
   },
@@ -112,8 +112,8 @@
     "@prosekit/dev": "*",
     "tsup": "^8.0.1",
     "typescript": "^5.3.3",
-    "vitest": "^1.2.0",
-    "vue": "^3.4.13"
+    "vitest": "^1.2.1",
+    "vue": "^3.4.15"
   },
   "scripts": {
     "build:tsup": "tsup",

package/src/index.ts

@@ -1,10 +0,0 @@
-export { ProseKit, type ProseKitProps } from './components/prosekit'
-export {
-  defineVueNodeView,
-  type VueNodeViewOptions,
-} from './extensions/vue-node-view'
-export { useEditor } from './hooks/use-editor'
-export { useExtension } from './hooks/use-extension'
-export { useKeymap } from './hooks/use-keymap'
-export type { VueNodeViewComponent } from './views/node-view/vue-node-view-options'
-export type { VueNodeViewProps } from './views/node-view/vue-node-view-props'