@prosekit/svelte 0.8.4 → 0.8.6

package/src/components/tooltip/tooltip-content.gen.ts

@@ -2,7 +2,7 @@ import type { TooltipContentElement, TooltipContentProps as Props, TooltipConten
 import type { SvelteComponent } from 'svelte'
 import type { HTMLAttributes } from 'svelte/elements'
 
-import type { CreateProps } from '../create-props'
+import type { CreateProps } from '../create-props.ts'
 
 import Component from './tooltip-content.gen.svelte'
 

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

@@ -2,9 +2,9 @@
 import '@prosekit/web/tooltip'
 
 import { tooltipRootProps, tooltipRootEvents } from '@prosekit/web/tooltip'
-import { ClientUpdate } from '../client-update'
-import { useComponent } from '../use-component'
-import { useEventHandlers } from '../use-event-handlers'
+import { ClientUpdate } from '../client-update/index.ts'
+import { useComponent } from '../use-component.ts'
+import { useEventHandlers } from '../use-event-handlers.ts'
 
 let attributes: Record<string, unknown> = {}
 let eventHandlers: Record<string, (...args: any[]) => any> = {}

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

@@ -2,7 +2,7 @@ import type { TooltipRootElement, TooltipRootProps as Props, TooltipRootEvents a
 import type { SvelteComponent } from 'svelte'
 import type { HTMLAttributes } from 'svelte/elements'
 
-import type { CreateProps } from '../create-props'
+import type { CreateProps } from '../create-props.ts'
 
 import Component from './tooltip-root.gen.svelte'
 

package/src/components/tooltip/tooltip-trigger.gen.svelte

@@ -2,9 +2,9 @@
 import '@prosekit/web/tooltip'
 
 import { tooltipTriggerProps, tooltipTriggerEvents } from '@prosekit/web/tooltip'
-import { ClientUpdate } from '../client-update'
-import { useComponent } from '../use-component'
-import { useEventHandlers } from '../use-event-handlers'
+import { ClientUpdate } from '../client-update/index.ts'
+import { useComponent } from '../use-component.ts'
+import { useEventHandlers } from '../use-event-handlers.ts'
 
 let attributes: Record<string, unknown> = {}
 let eventHandlers: Record<string, (...args: any[]) => any> = {}

package/src/components/tooltip/tooltip-trigger.gen.ts

@@ -2,7 +2,7 @@ import type { TooltipTriggerElement, TooltipTriggerProps as Props, TooltipTrigge
 import type { SvelteComponent } from 'svelte'
 import type { HTMLAttributes } from 'svelte/elements'
 
-import type { CreateProps } from '../create-props'
+import type { CreateProps } from '../create-props.ts'
 
 import Component from './tooltip-trigger.gen.svelte'
 

package/src/components/use-component.ts

@@ -1,7 +1,7 @@
 import type { AnyFunction } from '@prosekit/core'
 import type { EventHandler } from 'svelte/elements'
 
-import { useEditorContext } from '../contexts/editor-context'
+import { useEditorContext } from '../contexts/editor-context.ts'
 
 // For unknown reason, Svelte v4 cannot set properties on a web component
 // when I directly use `{...$$props}`. It seems that Svelte v4 recognizes

package/src/contexts/editor-context.ts

@@ -1,13 +1,5 @@
-import {
-  ProseKitError,
-  type Editor,
-  type Extension,
-} from '@prosekit/core'
-import {
-  getContext,
-  hasContext,
-  setContext,
-} from 'svelte'
+import { ProseKitError, type Editor, type Extension } from '@prosekit/core'
+import { getContext, hasContext, setContext } from 'svelte'
 
 const key = 'prosekit-svelte-editor-context'
 

package/src/extensions/svelte-mark-view.ts

@@ -1,18 +1,10 @@
-import {
-  defineMarkViewComponent,
-  defineMarkViewFactory,
-  definePlugin,
-  type Extension,
-} from '@prosekit/core'
+import { defineMarkViewComponent, defineMarkViewFactory, definePlugin, type Extension } from '@prosekit/core'
 import type { MarkViewConstructor } from '@prosekit/pm/view'
 import type { CoreMarkViewUserOptions } from '@prosemirror-adapter/core'
-import type {
-  MarkViewContext,
-  SvelteMarkViewUserOptions,
-} from '@prosemirror-adapter/svelte'
+import type { MarkViewContext, SvelteMarkViewUserOptions } from '@prosemirror-adapter/svelte'
 import type { Component } from 'svelte'
 
-import { MarkViewWrapper } from '../components/mark-view-wrapper'
+import { MarkViewWrapper } from '../components/mark-view-wrapper/index.ts'
 
 /**
  * @public

package/src/extensions/svelte-node-view.ts

@@ -1,18 +1,10 @@
-import {
-  defineNodeViewComponent,
-  defineNodeViewFactory,
-  definePlugin,
-  type Extension,
-} from '@prosekit/core'
+import { defineNodeViewComponent, defineNodeViewFactory, definePlugin, type Extension } from '@prosekit/core'
 import type { NodeViewConstructor } from '@prosekit/pm/view'
 import type { CoreNodeViewUserOptions } from '@prosemirror-adapter/core'
-import type {
-  NodeViewContext,
-  SvelteNodeViewUserOptions,
-} from '@prosemirror-adapter/svelte'
+import type { NodeViewContext, SvelteNodeViewUserOptions } from '@prosemirror-adapter/svelte'
 import type { Component } from 'svelte'
 
-import { NodeViewWrapper } from '../components/node-view-wrapper'
+import { NodeViewWrapper } from '../components/node-view-wrapper/index.ts'
 
 /**
  * @public

package/src/hooks/use-doc-change.ts

@@ -2,10 +2,7 @@ import { defineDocChangeHandler } from '@prosekit/core'
 import type { ProseMirrorNode } from '@prosekit/pm/model'
 import { readable } from 'svelte/store'
 
-import {
-  useExtension,
-  type UseExtensionOptions,
-} from './use-extension'
+import { useExtension, type UseExtensionOptions } from './use-extension.ts'
 
 /**
  * Calls the given handler whenever the editor document changes.

package/src/hooks/use-editor-derived-value.ts

@@ -1,14 +1,7 @@
-import type {
-  Editor,
-  Extension,
-} from '@prosekit/core'
-import {
-  derived,
-  readable,
-  type Readable,
-} from 'svelte/store'
+import type { Editor, Extension } from '@prosekit/core'
+import { derived, readable, type Readable } from 'svelte/store'
 
-import { useEditor } from './use-editor'
+import { useEditor } from './use-editor.ts'
 
 export interface UseEditorDerivedOptions<E extends Extension = any> {
   /**

package/src/hooks/use-editor-extension.ts

@@ -1,12 +1,9 @@
-import {
-  EditorNotFoundError,
-  type Editor,
-  type Extension,
-} from '@prosekit/core'
+import { EditorNotFoundError, type Editor, type Extension } from '@prosekit/core'
+import { queueExtension } from '@prosekit/web'
 import { onMount } from 'svelte'
 import type { Readable } from 'svelte/store'
 
-import { useEditorContext } from '../contexts/editor-context'
+import { useEditorContext } from '../contexts/editor-context.ts'
 
 /**
  * @internal
@@ -31,7 +28,7 @@ export function useEditorExtension(
         throw new EditorNotFoundError()
       }
       if (extension) {
-        cleanup = editor.use(extension)
+        cleanup = queueExtension(editor, extension)
       }
     })
 

package/src/hooks/use-editor.ts

@@ -1,19 +1,8 @@
-import {
-  defineMountHandler,
-  defineUpdateHandler,
-  ProseKitError,
-  union,
-  type Editor,
-  type Extension,
-} from '@prosekit/core'
+import { defineMountHandler, defineUpdateHandler, ProseKitError, union, type Editor, type Extension } from '@prosekit/core'
 import { onMount } from 'svelte'
-import {
-  readonly,
-  writable,
-  type Readable,
-} from 'svelte/store'
+import { readonly, writable, type Readable } from 'svelte/store'
 
-import { useEditorContext } from '../contexts/editor-context'
+import { useEditorContext } from '../contexts/editor-context.ts'
 
 /**
  * Retrieves the editor instance from the nearest ProseKit component.
@@ -42,8 +31,12 @@ export function useEditor<E extends Extension = any>(options?: {
 
   if (update) {
     onMount(() => {
+      // We need `queueMicrotask` here to avoid `state_unsafe_mutation` errors.
+      // See https://github.com/prosekit/prosekit/issues/1439
       const forceUpdate = () => {
-        editorStore.set(editor)
+        queueMicrotask(() => {
+          editorStore.set(editor)
+        })
       }
       const extension = union(
         defineMountHandler(forceUpdate),

package/src/hooks/use-extension.ts

@@ -1,12 +1,8 @@
-import type {
-  Editor,
-  Extension,
-  Priority,
-} from '@prosekit/core'
+import type { Editor, Extension, Priority } from '@prosekit/core'
 import type { Readable } from 'svelte/store'
 
-import { useEditorExtension } from './use-editor-extension'
-import { usePriorityExtension } from './use-priority-extension'
+import { useEditorExtension } from './use-editor-extension.ts'
+import { usePriorityExtension } from './use-priority-extension.ts'
 
 export interface UseExtensionOptions {
   /**

package/src/hooks/use-keymap.ts

@@ -1,16 +1,7 @@
-import {
-  defineKeymap,
-  type Keymap,
-} from '@prosekit/core'
-import {
-  derived,
-  type Readable,
-} from 'svelte/store'
+import { defineKeymap, type Keymap } from '@prosekit/core'
+import { derived, type Readable } from 'svelte/store'
 
-import {
-  useExtension,
-  type UseExtensionOptions,
-} from './use-extension'
+import { useExtension, type UseExtensionOptions } from './use-extension.ts'
 
 export function useKeymap(
   keymapStore: Readable<Keymap>,

package/src/hooks/use-priority-extension.ts

@@ -1,12 +1,5 @@
-import {
-  withPriority,
-  type Extension,
-  type Priority,
-} from '@prosekit/core'
-import {
-  derived,
-  type Readable,
-} from 'svelte/store'
+import { withPriority, type Extension, type Priority } from '@prosekit/core'
+import { derived, type Readable } from 'svelte/store'
 
 /**
  * @internal

package/src/hooks/use-state-update.ts

@@ -2,10 +2,7 @@ import { defineUpdateHandler } from '@prosekit/core'
 import type { EditorState } from '@prosekit/pm/state'
 import { readable } from 'svelte/store'
 
-import {
-  useExtension,
-  type UseExtensionOptions,
-} from './use-extension'
+import { useExtension, type UseExtensionOptions } from './use-extension.ts'
 
 /**
  * Calls the given handler whenever the editor state changes.

package/src/index.ts

@@ -1,29 +1,20 @@
-export {
-  ProseKit,
-  type ProseKitProps,
-} from './components/prosekit'
+export { ProseKit, type ProseKitProps } from './components/prosekit/index.ts'
 export {
   defineSvelteMarkView,
   type SvelteMarkViewComponent,
   type SvelteMarkViewOptions,
   type SvelteMarkViewProps,
-} from './extensions/svelte-mark-view'
+} from './extensions/svelte-mark-view.ts'
 export {
   defineSvelteNodeView,
   type SvelteNodeViewComponent,
   type SvelteNodeViewOptions,
   type SvelteNodeViewProps,
-} from './extensions/svelte-node-view'
-export { useDocChange } from './hooks/use-doc-change'
-export { useEditor } from './hooks/use-editor'
-export {
-  useEditorDerivedValue,
-  type UseEditorDerivedOptions,
-} from './hooks/use-editor-derived-value'
-export {
-  useExtension,
-  type UseExtensionOptions,
-} from './hooks/use-extension'
-export { useKeymap } from './hooks/use-keymap'
-export { useStateUpdate } from './hooks/use-state-update'
-export type { PropsWithClass } from './types'
+} from './extensions/svelte-node-view.ts'
+export { useDocChange } from './hooks/use-doc-change.ts'
+export { useEditorDerivedValue, type UseEditorDerivedOptions } from './hooks/use-editor-derived-value.ts'
+export { useEditor } from './hooks/use-editor.ts'
+export { useExtension, type UseExtensionOptions } from './hooks/use-extension.ts'
+export { useKeymap } from './hooks/use-keymap.ts'
+export { useStateUpdate } from './hooks/use-state-update.ts'
+export type { PropsWithClass } from './types.ts'