@prosekit/svelte 0.9.0 → 0.9.1

package/dist/build/components/autocomplete/autocomplete-root.gen.d.ts

@@ -23,6 +23,15 @@ export interface AutocompleteRootProps {
      * @default defaultItemFilter
      */
     filter?: AutocompleteRootElementProps['filter'];
+    /**
+     * The reference to position the popup against. This can be a DOM element, a
+     * Floating UI virtual element, or a function that returns either of them.
+     * By default, the popup will be positioned against the text content that
+     * triggers the autocomplete.
+     *
+     * @default null
+     */
+    anchor?: AutocompleteRootElementProps['anchor'];
     /** Fired when the open state changes. */
     onOpenChange?: (event: AutocompleteRootEvents['openChange']) => void;
     /** Fired when the query changes. */

package/dist/build/components/autocomplete/autocomplete-root.gen.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"autocomplete-root.gen.d.ts","sourceRoot":"","sources":["../../../../src/components/autocomplete/autocomplete-root.gen.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,uBAAuB,EAAE,sBAAsB,EAAE,qBAAqB,IAAI,4BAA4B,EAAE,MAAM,4BAA4B,CAAC;AACzJ,OAAO,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACjD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAItD,+DAA+D;AAC/D,MAAM,WAAW,qBAAqB;IACpC;;;;;OAKG;IACH,MAAM,CAAC,EAAE,4BAA4B,CAAC,QAAQ,CAAC,CAAC;IAChD;;;;OAIG;IACH,KAAK,CAAC,EAAE,4BAA4B,CAAC,OAAO,CAAC,CAAC;IAC9C;;;;;OAKG;IACH,MAAM,CAAC,EAAE,4BAA4B,CAAC,QAAQ,CAAC,CAAC;IAChD,yCAAyC;IACzC,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,sBAAsB,CAAC,YAAY,CAAC,KAAK,IAAI,CAAC;IACrE,oCAAoC;IACpC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,sBAAsB,CAAC,aAAa,CAAC,KAAK,IAAI,CAAC;IACvE;;;OAGG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,sBAAsB,CAAC,aAAa,CAAC,KAAK,IAAI,CAAC;IACvE;;;OAGG;IACH,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,sBAAsB,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IACzE,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,sFAAsF;AACtF,eAAO,MAAM,gBAAgB,EAAE,SAAS,CAAC,qBAAqB,GAAG,cAAc,CAAC,uBAAuB,CAAC,CAA2G,CAAC"}
+{"version":3,"file":"autocomplete-root.gen.d.ts","sourceRoot":"","sources":["../../../../src/components/autocomplete/autocomplete-root.gen.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,uBAAuB,EAAE,sBAAsB,EAAE,qBAAqB,IAAI,4BAA4B,EAAE,MAAM,4BAA4B,CAAC;AACzJ,OAAO,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACjD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAItD,+DAA+D;AAC/D,MAAM,WAAW,qBAAqB;IACpC;;;;;OAKG;IACH,MAAM,CAAC,EAAE,4BAA4B,CAAC,QAAQ,CAAC,CAAC;IAChD;;;;OAIG;IACH,KAAK,CAAC,EAAE,4BAA4B,CAAC,OAAO,CAAC,CAAC;IAC9C;;;;;OAKG;IACH,MAAM,CAAC,EAAE,4BAA4B,CAAC,QAAQ,CAAC,CAAC;IAChD;;;;;;;OAOG;IACH,MAAM,CAAC,EAAE,4BAA4B,CAAC,QAAQ,CAAC,CAAC;IAChD,yCAAyC;IACzC,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,sBAAsB,CAAC,YAAY,CAAC,KAAK,IAAI,CAAC;IACrE,oCAAoC;IACpC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,sBAAsB,CAAC,aAAa,CAAC,KAAK,IAAI,CAAC;IACvE;;;OAGG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,sBAAsB,CAAC,aAAa,CAAC,KAAK,IAAI,CAAC;IACvE;;;OAGG;IACH,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,sBAAsB,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IACzE,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,sFAAsF;AACtF,eAAO,MAAM,gBAAgB,EAAE,SAAS,CAAC,qBAAqB,GAAG,cAAc,CAAC,uBAAuB,CAAC,CAA2G,CAAC"}

package/dist/build/components/autocomplete/autocomplete-root.gen.svelte

@@ -5,16 +5,16 @@
   import { useEditorContext } from '../../contexts/editor-context.js'
   registerAutocompleteRootElement()
 
-  let { editor: p0, filter: p1, regex: p2, onOpenChange: e0, onQueryChange: e1, onValueChange: e2, onValuesChange: e3, children = undefined, ...restProps } = $props()
+  let { anchor: p0, editor: p1, filter: p2, regex: p3, onOpenChange: e0, onQueryChange: e1, onValueChange: e2, onValuesChange: e3, children = undefined, ...restProps } = $props()
   let element: AutocompleteRootElement | undefined
   const handlers: EventListener[] = []
 
-  const p0Fallback = useEditorContext()
+  const p1Fallback = useEditorContext()
 
   $effect(() => {
     if (!element) return
 
-    Object.assign(element, { editor: p0 ?? p0Fallback, filter: p1, regex: p2 })
+    Object.assign(element, { anchor: p0, editor: p1 ?? p1Fallback, filter: p2, regex: p3 })
 
     handlers.length = 0
     handlers.push(e0)

package/dist/build/components/autocomplete/autocomplete-root.gen.svelte.d.ts

@@ -1,4 +1,5 @@
 declare const AutocompleteRoot: import("svelte").Component<{
+    anchor: any;
     editor: any;
     filter: any;
     regex: any;

package/dist/build/components/autocomplete/autocomplete-root.gen.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"autocomplete-root.gen.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/autocomplete/autocomplete-root.gen.svelte.ts"],"names":[],"mappings":"AAgDA,QAAA,MAAM,gBAAgB;YAnCkE,GAAG;YAAU,GAAG;WAAS,GAAG;kBAAgB,GAAG;mBAAiB,GAAG;mBAAiB,GAAG;oBAAkB,GAAG;eAAa,GAAG;gCAmCtJ,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"autocomplete-root.gen.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/autocomplete/autocomplete-root.gen.svelte.ts"],"names":[],"mappings":"AAgDA,QAAA,MAAM,gBAAgB;YAnCkE,GAAG;YAAU,GAAG;YAAU,GAAG;WAAS,GAAG;kBAAgB,GAAG;mBAAiB,GAAG;mBAAiB,GAAG;oBAAkB,GAAG;eAAa,GAAG;gCAmCnK,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/build/components/prosekit/index.d.ts

@@ -1,12 +1,13 @@
 import type { Editor } from '@prosekit/core';
-import type { SvelteComponent } from 'svelte';
+import type { Component, Snippet } from 'svelte';
 export interface ProseKitProps {
     editor: Editor;
+    children?: Snippet;
 }
 /**
  * The root component for a ProseKit editor.
  *
  * @public
  */
-export declare const ProseKit: typeof SvelteComponent<ProseKitProps>;
+export declare const ProseKit: Component<ProseKitProps>;
 //# sourceMappingURL=index.d.ts.map

package/dist/build/components/prosekit/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/prosekit/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAA;AAC5C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,QAAQ,CAAA;AAI7C,MAAM,WAAW,aAAa;IAC5B,MAAM,EAAE,MAAM,CAAA;CACf;AAED;;;;GAIG;AACH,eAAO,MAAM,QAAQ,EAA0C,OAAO,eAAe,CAAC,aAAa,CAAC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/prosekit/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAA;AAC5C,OAAO,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AAIhD,MAAM,WAAW,aAAa;IAC5B,MAAM,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED;;;;GAIG;AACH,eAAO,MAAM,QAAQ,EAAW,SAAS,CAAC,aAAa,CAAC,CAAA"}

package/dist/build/components/prosekit/prosekit.svelte

@@ -1,13 +1,14 @@
 <script lang="ts">
 import type { Editor } from '@prosekit/core'
+import type { Snippet } from 'svelte'
 import { setEditorContext } from '../../contexts/editor-context.js'
 import { ViewRenderer } from '../view-renderer/index.js'
 
-export let editor: Editor
+let props: { editor: Editor; children?: Snippet } = $props()
 
-setEditorContext(editor)
+setEditorContext(() => props.editor)
 </script>
 
-<ViewRenderer {editor}>
-  <slot />
+<ViewRenderer editor={props.editor}>
+  {@render props.children?.()}
 </ViewRenderer>

package/dist/build/components/prosekit/prosekit.svelte.d.ts

@@ -1,31 +1,10 @@
 import type { Editor } from '@prosekit/core';
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-declare const Prosekit: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
     editor: Editor;
-}, {
-    default: {};
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, string>;
-type Prosekit = InstanceType<typeof Prosekit>;
+    children?: Snippet;
+};
+declare const Prosekit: import("svelte").Component<$$ComponentProps, {}, "">;
+type Prosekit = ReturnType<typeof Prosekit>;
 export default Prosekit;
 //# sourceMappingURL=prosekit.svelte.d.ts.map

package/dist/build/components/prosekit/prosekit.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"prosekit.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/prosekit/prosekit.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAA;AAoB5C,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AACD,KAAK,gCAAgC,CAAC,KAAK,EAAE,KAAK,IAAI,KAAK,GACvD,CAAC,KAAK,SAAS;IAAE,OAAO,EAAE,GAAG,CAAA;CAAE,GACzB,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,GACnC,GAAG,GACH;IAAE,QAAQ,CAAC,EAAE,GAAG,CAAA;CAAE,GAClB,EAAE,CAAC,CAAC;AAId,QAAA,MAAM,QAAQ;YAf+B,MAAM;;;;;;;cAegD,CAAC;AAClF,KAAK,QAAQ,GAAG,YAAY,CAAC,OAAO,QAAQ,CAAC,CAAC;AAChD,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"prosekit.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/prosekit/prosekit.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAA;AAC5C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AAIpC,KAAK,gBAAgB,GAAI;IAAE,MAAM,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAkBjE,QAAA,MAAM,QAAQ,sDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/build/contexts/editor-context.d.ts

@@ -2,7 +2,7 @@ import { type Editor, type Extension } from '@prosekit/core';
 /**
  * @internal
  */
-export declare function setEditorContext(editor: Editor): void;
+export declare function setEditorContext(getEditor: () => Editor): void;
 /**
  * @internal
  */

package/dist/build/contexts/editor-context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"editor-context.d.ts","sourceRoot":"","sources":["../../../src/contexts/editor-context.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,MAAM,EAAE,KAAK,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAK3E;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAKrD;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,SAAS,KAAK,MAAM,CAAC,CAAC,CAAC,GAAG,SAAS,CAI7E"}
+{"version":3,"file":"editor-context.d.ts","sourceRoot":"","sources":["../../../src/contexts/editor-context.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,MAAM,EAAE,KAAK,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAK3E;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,SAAS,EAAE,MAAM,MAAM,GAAG,IAAI,CAE9D;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,SAAS,KAAK,MAAM,CAAC,CAAC,CAAC,GAAG,SAAS,CAS7E"}

package/dist/build/contexts/editor-context.js

@@ -4,17 +4,19 @@ const key = 'prosekit-svelte-editor-context';
 /**
  * @internal
  */
-export function setEditorContext(editor) {
-    if (!editor) {
-        throw new ProseKitError('editor should not be empty');
-    }
-    setContext(key, editor);
+export function setEditorContext(getEditor) {
+    setContext(key, getEditor);
 }
 /**
  * @internal
  */
 export function useEditorContext() {
     if (hasContext(key)) {
-        return getContext(key);
+        const context = getContext(key);
+        const editor = context();
+        if (!editor) {
+            throw new ProseKitError('editor should not be empty');
+        }
+        return editor;
     }
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@prosekit/svelte",
   "type": "module",
-  "version": "0.9.0",
+  "version": "0.9.1",
   "private": false,
   "description": "Svelte components and utilities for ProseKit",
   "author": {
@@ -84,8 +84,8 @@
     "@prosemirror-adapter/core": "^0.5.3",
     "@prosemirror-adapter/svelte": "^0.5.3",
     "@prosekit/core": "^0.12.0",
-    "@prosekit/web": "^0.8.0",
-    "@prosekit/pm": "^0.1.16"
+    "@prosekit/pm": "^0.1.16",
+    "@prosekit/web": "^0.8.1"
   },
   "peerDependencies": {
     "svelte": ">= 5.0.0"
@@ -97,12 +97,12 @@
   },
   "devDependencies": {
     "@sveltejs/package": "^2.5.7",
-    "@sveltejs/vite-plugin-svelte": "^7.0.0",
-    "@types/node": "^24.10.13",
+    "@sveltejs/vite-plugin-svelte": "^7.1.2",
+    "@types/node": "^24.12.2",
     "svelte": "^5.55.5",
-    "svelte-check": "^4.4.6",
+    "svelte-check": "^4.4.8",
     "tsx": "^4.21.0",
-    "typescript": "~5.9.3",
+    "typescript": "~6.0.3",
     "vitest": "^4.1.5",
     "vitest-browser-svelte": "^2.1.1",
     "@prosekit/config-ts": "0.0.0",

package/src/components/autocomplete/autocomplete-root.gen.svelte

@@ -5,16 +5,16 @@
   import { useEditorContext } from '../../contexts/editor-context.ts'
   registerAutocompleteRootElement()
 
-  let { editor: p0, filter: p1, regex: p2, onOpenChange: e0, onQueryChange: e1, onValueChange: e2, onValuesChange: e3, children = undefined, ...restProps } = $props()
+  let { anchor: p0, editor: p1, filter: p2, regex: p3, onOpenChange: e0, onQueryChange: e1, onValueChange: e2, onValuesChange: e3, children = undefined, ...restProps } = $props()
   let element: AutocompleteRootElement | undefined
   const handlers: EventListener[] = []
 
-  const p0Fallback = useEditorContext()
+  const p1Fallback = useEditorContext()
 
   $effect(() => {
     if (!element) return
 
-    Object.assign(element, { editor: p0 ?? p0Fallback, filter: p1, regex: p2 })
+    Object.assign(element, { anchor: p0, editor: p1 ?? p1Fallback, filter: p2, regex: p3 })
 
     handlers.length = 0
     handlers.push(e0)

package/src/components/autocomplete/autocomplete-root.gen.ts

@@ -28,6 +28,15 @@ export interface AutocompleteRootProps {
    * @default defaultItemFilter
    */
   filter?: AutocompleteRootElementProps['filter'];
+  /**
+   * The reference to position the popup against. This can be a DOM element, a
+   * Floating UI virtual element, or a function that returns either of them.
+   * By default, the popup will be positioned against the text content that
+   * triggers the autocomplete.
+   *
+   * @default null
+   */
+  anchor?: AutocompleteRootElementProps['anchor'];
   /** Fired when the open state changes. */
   onOpenChange?: (event: AutocompleteRootEvents['openChange']) => void;
   /** Fired when the query changes. */

package/src/components/prosekit/index.ts

@@ -1,10 +1,11 @@
 import type { Editor } from '@prosekit/core'
-import type { SvelteComponent } from 'svelte'
+import type { Component, Snippet } from 'svelte'
 
 import Comp from './prosekit.svelte'
 
 export interface ProseKitProps {
   editor: Editor
+  children?: Snippet
 }
 
 /**
@@ -12,4 +13,4 @@ export interface ProseKitProps {
  *
  * @public
  */
-export const ProseKit = Comp as typeof SvelteComponent<any> as typeof SvelteComponent<ProseKitProps>
+export const ProseKit = Comp as Component<ProseKitProps>

package/src/components/prosekit/prosekit.svelte

@@ -1,13 +1,14 @@
 <script lang="ts">
 import type { Editor } from '@prosekit/core'
+import type { Snippet } from 'svelte'
 import { setEditorContext } from '../../contexts/editor-context.ts'
 import { ViewRenderer } from '../view-renderer/index.ts'
 
-export let editor: Editor
+let props: { editor: Editor; children?: Snippet } = $props()
 
-setEditorContext(editor)
+setEditorContext(() => props.editor)
 </script>
 
-<ViewRenderer {editor}>
-  <slot />
+<ViewRenderer editor={props.editor}>
+  {@render props.children?.()}
 </ViewRenderer>

package/src/contexts/editor-context.ts

@@ -6,11 +6,8 @@ const key = 'prosekit-svelte-editor-context'
 /**
  * @internal
  */
-export function setEditorContext(editor: Editor): void {
-  if (!editor) {
-    throw new ProseKitError('editor should not be empty')
-  }
-  setContext(key, editor)
+export function setEditorContext(getEditor: () => Editor): void {
+  setContext(key, getEditor)
 }
 
 /**
@@ -18,6 +15,11 @@ export function setEditorContext(editor: Editor): void {
  */
 export function useEditorContext<E extends Extension>(): Editor<E> | undefined {
   if (hasContext(key)) {
-    return getContext(key)
+    const context: () => Editor = getContext(key)
+    const editor = context()
+    if (!editor) {
+      throw new ProseKitError('editor should not be empty')
+    }
+    return editor
   }
 }