@prosekit/svelte 0.7.0 → 0.7.1

package/src/components/use-component.ts

@@ -0,0 +1,71 @@
+import type { AnyFunction } from '@prosekit/core'
+import type { EventHandler } from 'svelte/elements'
+
+import { useEditorContext } from '../contexts/editor-context'
+
+// For unknown reason, Svelte v4 cannot set properties on a web component
+// when I directly use `{...$$props}`. It seems that Svelte v4 recognizes
+// the properties as attributes. Here is a workaround to set the properties
+// on the element manually and only let Svelte set the attributes.
+export function useComponent(
+  propNames: string[],
+  eventNames: string[],
+): (element: HTMLElement | undefined, $$props: Record<string, unknown>) => [Record<string, unknown>, Record<string, EventHandler>] {
+  const hasEditor = propNames.includes('editor')
+  const lowerCaseEventNameMap = new Map(
+    eventNames.map((name) => [name.toLowerCase(), name]),
+  )
+
+  const editorContext = useEditorContext()
+
+  function handleChange(
+    element: HTMLElement | undefined,
+    $$props: Record<string, unknown>,
+  ): [Record<string, unknown>, Record<string, EventHandler>] {
+    const properties: Record<string, unknown> = {}
+    const attributes: Record<string, unknown> = {}
+    const eventHandlers: Record<string, EventHandler> = {}
+
+    for (const [name, value] of Object.entries($$props)) {
+      if (value === undefined || name.startsWith('$')) {
+        continue
+      }
+
+      if (propNames.includes(name)) {
+        properties[name] = value
+        continue
+      }
+
+      if (name.startsWith('on')) {
+        const lowerCaseEventName = name.slice(2).toLowerCase()
+        const eventName = lowerCaseEventNameMap.get(lowerCaseEventName)
+        if (eventName) {
+          const extractDetail = eventName.endsWith('Change')
+          eventHandlers[eventName] = (event: Event) => {
+            const handler = value as AnyFunction | null
+            if (typeof handler === 'function') {
+              handler(extractDetail ? (event as CustomEvent).detail : event)
+            }
+          }
+          continue
+        }
+      }
+
+      attributes[name] = value
+    }
+
+    if (hasEditor && !properties.editor && editorContext) {
+      properties.editor = editorContext
+    }
+
+    if (element) {
+      for (const [key, value] of Object.entries(properties)) {
+        ;(element as Record<string, any>)[key] = value
+      }
+    }
+
+    return [attributes, eventHandlers]
+  }
+
+  return handleChange
+}

package/src/components/use-event-handlers.ts

@@ -0,0 +1,26 @@
+export function useEventHandlers(
+  element: HTMLElement,
+  eventHandlers: Record<string, (...args: any[]) => any>,
+) {
+  const disposes: VoidFunction[] = []
+
+  const update = (eventHandlers: Record<string, (...args: any[]) => any>) => {
+    disposes.forEach((dispose) => dispose())
+    disposes.length = 0
+    for (const [name, handler] of Object.entries(eventHandlers)) {
+      element.addEventListener(name, handler)
+      disposes.push(() => element.removeEventListener(name, handler))
+    }
+  }
+
+  update(eventHandlers)
+
+  return {
+    update(eventHandlers: Record<string, (...args: any[]) => any>): void {
+      update(eventHandlers)
+    },
+    destroy(): void {
+      update({})
+    },
+  }
+}

package/src/contexts/editor-context.ts

@@ -0,0 +1,31 @@
+import {
+  ProseKitError,
+  type Editor,
+  type Extension,
+} from '@prosekit/core'
+import {
+  getContext,
+  hasContext,
+  setContext,
+} from 'svelte'
+
+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)
+}
+
+/**
+ * @internal
+ */
+export function useEditorContext<E extends Extension>(): Editor<E> | undefined {
+  if (hasContext(key)) {
+    return getContext(key)
+  }
+}

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

@@ -0,0 +1,90 @@
+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 { Component } from 'svelte'
+
+import { MarkViewWrapper } from '../components/mark-view-wrapper'
+
+/**
+ * @public
+ */
+export interface SvelteMarkViewProps extends MarkViewContext {}
+
+/**
+ * @public
+ */
+export type SvelteMarkViewComponent = Component<SvelteMarkViewProps>
+
+/**
+ * Options for {@link defineSvelteMarkView}.
+ *
+ * @public
+ */
+export interface SvelteMarkViewOptions extends CoreMarkViewUserOptions<SvelteMarkViewComponent> {
+  /**
+   * The name of the mark type.
+   */
+  name: string
+}
+
+const isServer = typeof window === 'undefined'
+
+/**
+ * Defines a mark view using a Svelte component.
+ *
+ * @public
+ */
+export function defineSvelteMarkView(
+  options: SvelteMarkViewOptions,
+): Extension {
+  // Don't register mark views on the server
+  if (isServer) {
+    return definePlugin([])
+  }
+
+  const { name, component, ...userOptions } = options
+
+  const args: SvelteMarkViewUserOptions = {
+    ...userOptions,
+    component: wrapComponent(component),
+  }
+
+  return defineMarkViewComponent<SvelteMarkViewUserOptions>({
+    group: 'svelte',
+    name,
+    args,
+  })
+}
+
+function wrapComponent(
+  component: SvelteMarkViewComponent,
+): Component<any, any> {
+  // `MarkViewWrapper` is an object during SSR
+  if (!MarkViewWrapper || typeof MarkViewWrapper !== 'function') {
+    return component
+  }
+
+  const MarkViewPropsWrapper: Component = (internals, props) => {
+    return MarkViewWrapper(internals, { ...props, component })
+  }
+
+  return MarkViewPropsWrapper
+}
+
+export function defineSvelteMarkViewFactory(
+  factory: (options: SvelteMarkViewUserOptions) => MarkViewConstructor,
+): Extension {
+  return defineMarkViewFactory<SvelteMarkViewUserOptions>({
+    group: 'svelte',
+    factory,
+  })
+}

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

@@ -0,0 +1,90 @@
+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 { Component } from 'svelte'
+
+import { NodeViewWrapper } from '../components/node-view-wrapper'
+
+/**
+ * @public
+ */
+export interface SvelteNodeViewProps extends NodeViewContext {}
+
+/**
+ * @public
+ */
+export type SvelteNodeViewComponent = Component<SvelteNodeViewProps>
+
+/**
+ * Options for {@link defineSvelteNodeView}.
+ *
+ * @public
+ */
+export interface SvelteNodeViewOptions extends CoreNodeViewUserOptions<SvelteNodeViewComponent> {
+  /**
+   * The name of the node type.
+   */
+  name: string
+}
+
+const isServer = typeof window === 'undefined'
+
+/**
+ * Defines a node view using a Svelte component.
+ *
+ * @public
+ */
+export function defineSvelteNodeView(
+  options: SvelteNodeViewOptions,
+): Extension {
+  // Don't register node views on the server
+  if (isServer) {
+    return definePlugin([])
+  }
+
+  const { name, component, ...userOptions } = options
+
+  const args: SvelteNodeViewUserOptions = {
+    ...userOptions,
+    component: wrapComponent(component),
+  }
+
+  return defineNodeViewComponent<SvelteNodeViewUserOptions>({
+    group: 'svelte',
+    name,
+    args,
+  })
+}
+
+function wrapComponent(
+  component: SvelteNodeViewComponent,
+): Component<any, any> {
+  // `NodeViewWrapper` is an object during SSR
+  if (!NodeViewWrapper || typeof NodeViewWrapper !== 'function') {
+    return component
+  }
+
+  const NodeViewPropsWrapper: Component = (internals, props) => {
+    return NodeViewWrapper(internals, { ...props, component })
+  }
+
+  return NodeViewPropsWrapper
+}
+
+export function defineSvelteNodeViewFactory(
+  factory: (options: SvelteNodeViewUserOptions) => NodeViewConstructor,
+): Extension {
+  return defineNodeViewFactory<SvelteNodeViewUserOptions>({
+    group: 'svelte',
+    factory,
+  })
+}

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

@@ -0,0 +1,21 @@
+import { defineDocChangeHandler } from '@prosekit/core'
+import type { ProseMirrorNode } from '@prosekit/pm/model'
+import { readable } from 'svelte/store'
+
+import {
+  useExtension,
+  type UseExtensionOptions,
+} from './use-extension'
+
+/**
+ * Calls the given handler whenever the editor document changes.
+ *
+ * @public
+ */
+export function useDocChange(
+  handler: (doc: ProseMirrorNode) => void,
+  options?: UseExtensionOptions,
+): void {
+  const extension = defineDocChangeHandler((view) => handler(view.state.doc))
+  useExtension(readable(extension), options)
+}

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

@@ -0,0 +1,45 @@
+import {
+  EditorNotFoundError,
+  type Editor,
+  type Extension,
+} from '@prosekit/core'
+import { onMount } from 'svelte'
+import type { Readable } from 'svelte/store'
+
+import { useEditorContext } from '../contexts/editor-context'
+
+/**
+ * @internal
+ */
+export function useEditorExtension(
+  maybeEditor: Editor | null | undefined,
+  extensionStore: Readable<Extension | null>,
+): void {
+  const editorContext = useEditorContext()
+
+  onMount(() => {
+    let cleanup: VoidFunction | undefined
+    let unsubscribe: VoidFunction | undefined
+
+    unsubscribe = extensionStore.subscribe((extension) => {
+      cleanup?.()
+      cleanup = undefined
+
+      const editor = maybeEditor || editorContext
+
+      if (!editor) {
+        throw new EditorNotFoundError()
+      }
+      if (extension) {
+        cleanup = editor.use(extension)
+      }
+    })
+
+    return () => {
+      cleanup?.()
+      cleanup = undefined
+      unsubscribe?.()
+      unsubscribe = undefined
+    }
+  })
+}

package/src/hooks/use-editor.ts

@@ -0,0 +1,57 @@
+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 { useEditorContext } from '../contexts/editor-context'
+
+/**
+ * Retrieves the editor instance from the nearest ProseKit component.
+ *
+ * @public
+ */
+export function useEditor<E extends Extension = any>(options?: {
+  /**
+   * Whether to update the component when the editor is mounted or editor state
+   * is updated.
+   *
+   * @default false
+   */
+  update?: boolean
+}): Readable<Editor<E>> {
+  const update = options?.update ?? false
+  const editor = useEditorContext<E>()
+
+  if (!editor) {
+    throw new ProseKitError(
+      'useEditor must be used within the ProseKit component',
+    )
+  }
+
+  const editorStore = writable(editor)
+
+  if (update) {
+    onMount(() => {
+      const forceUpdate = () => {
+        editorStore.set(editor)
+      }
+      const extension = union(
+        defineMountHandler(forceUpdate),
+        defineUpdateHandler(forceUpdate),
+      )
+      return editor.use(extension)
+    })
+  }
+
+  return readonly(editorStore)
+}

package/src/hooks/use-extension.ts

@@ -0,0 +1,39 @@
+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'
+
+export interface UseExtensionOptions {
+  /**
+   * The editor to add the extension to. If not provided, it will use the
+   * editor from the nearest `ProseKit` component.
+   */
+  editor?: Editor
+
+  /**
+   * Optional priority to add the extension with.
+   */
+  priority?: Priority
+}
+
+/**
+ * Add an extension to the editor.
+ */
+export function useExtension<T extends Extension = Extension>(
+  /**
+   * The store 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: Readable<T | null>,
+  options?: UseExtensionOptions,
+): void {
+  useEditorExtension(
+    options?.editor,
+    usePriorityExtension(extension, options?.priority),
+  )
+}

package/src/hooks/use-keymap.ts

@@ -0,0 +1,21 @@
+import {
+  defineKeymap,
+  type Keymap,
+} from '@prosekit/core'
+import {
+  derived,
+  type Readable,
+} from 'svelte/store'
+
+import {
+  useExtension,
+  type UseExtensionOptions,
+} from './use-extension'
+
+export function useKeymap(
+  keymapStore: Readable<Keymap>,
+  options?: UseExtensionOptions,
+): void {
+  const extension = derived(keymapStore, (keymap) => defineKeymap(keymap))
+  useExtension(extension, options)
+}

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

@@ -0,0 +1,21 @@
+import {
+  withPriority,
+  type Extension,
+  type Priority,
+} from '@prosekit/core'
+import {
+  derived,
+  type Readable,
+} from 'svelte/store'
+
+/**
+ * @internal
+ */
+export function usePriorityExtension<T extends Extension = Extension>(
+  extensionStore: Readable<T | null>,
+  priority?: Priority | null,
+): Readable<T | null> {
+  return derived(extensionStore, (extension) => {
+    return extension && priority ? withPriority(extension, priority) : extension
+  })
+}

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

@@ -0,0 +1,21 @@
+import { defineUpdateHandler } from '@prosekit/core'
+import type { EditorState } from '@prosekit/pm/state'
+import { readable } from 'svelte/store'
+
+import {
+  useExtension,
+  type UseExtensionOptions,
+} from './use-extension'
+
+/**
+ * Calls the given handler whenever the editor state changes.
+ *
+ * @public
+ */
+export function useStateUpdate(
+  handler: (state: EditorState) => void,
+  options?: UseExtensionOptions,
+): void {
+  const extension = defineUpdateHandler((view) => handler(view.state))
+  useExtension(readable(extension), options)
+}

package/src/index.ts

@@ -0,0 +1,25 @@
+export {
+  ProseKit,
+  type ProseKitProps,
+} from './components/prosekit'
+export {
+  defineSvelteMarkView,
+  type SvelteMarkViewComponent,
+  type SvelteMarkViewOptions,
+  type SvelteMarkViewProps,
+} from './extensions/svelte-mark-view'
+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 {
+  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'

package/src/types.ts

@@ -0,0 +1,6 @@
+/**
+ * @internal
+ */
+export type PropsWithClass<P = unknown> = P & {
+  class?: string | undefined
+}