@prosekit/solid 0.5.0 → 0.5.2

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

@@ -0,0 +1,29 @@
+import { 
+  type TooltipRootElement,
+  type TooltipRootProps as Props,
+  type TooltipRootEvents as Events,
+  tooltipRootProps,
+  tooltipRootEvents,
+} from '@prosekit/web/tooltip'
+import type { Component } from 'solid-js'
+
+import type { PropsWithElement } from '../../types'
+import { createComponent } from '../create-component'
+import type { CreateProps } from '../create-props'
+
+/**
+ * Props for the {@link TooltipRoot} component.
+ */
+export interface TooltipRootProps extends Partial<CreateProps<Props, Events>> {}
+
+export const TooltipRoot: Component<PropsWithElement<
+  TooltipRootProps,
+  TooltipRootElement
+>> = createComponent<
+  TooltipRootProps,
+  TooltipRootElement
+>(
+  'prosekit-tooltip-root', 
+  Object.keys(tooltipRootProps),
+  Object.keys(tooltipRootEvents),
+)

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

@@ -0,0 +1,29 @@
+import { 
+  type TooltipTriggerElement,
+  type TooltipTriggerProps as Props,
+  type TooltipTriggerEvents as Events,
+  tooltipTriggerProps,
+  tooltipTriggerEvents,
+} from '@prosekit/web/tooltip'
+import type { Component } from 'solid-js'
+
+import type { PropsWithElement } from '../../types'
+import { createComponent } from '../create-component'
+import type { CreateProps } from '../create-props'
+
+/**
+ * Props for the {@link TooltipTrigger} component.
+ */
+export interface TooltipTriggerProps extends Partial<CreateProps<Props, Events>> {}
+
+export const TooltipTrigger: Component<PropsWithElement<
+  TooltipTriggerProps,
+  TooltipTriggerElement
+>> = createComponent<
+  TooltipTriggerProps,
+  TooltipTriggerElement
+>(
+  'prosekit-tooltip-trigger', 
+  Object.keys(tooltipTriggerProps),
+  Object.keys(tooltipTriggerEvents),
+)

package/src/contexts/editor-context.ts

@@ -0,0 +1,23 @@
+import type {
+  Editor,
+  Extension,
+} from '@prosekit/core'
+import {
+  createContext,
+  useContext,
+  type ContextProviderComponent,
+} from 'solid-js'
+
+const editorContext = createContext<Editor | null>(null)
+
+/**
+ * @internal
+ */
+export function useEditorContext<E extends Extension>(): Editor<E> | null {
+  return useContext(editorContext)
+}
+
+/**
+ * @internal
+ */
+export const EditorContextProvider: ContextProviderComponent<Editor | null> = editorContext.Provider

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

@@ -0,0 +1,105 @@
+import {
+  defineMarkViewComponent,
+  defineMarkViewFactory,
+  type Extension,
+} from '@prosekit/core'
+import type { MarkViewConstructor } from '@prosekit/pm/view'
+import type { CoreMarkViewUserOptions } from '@prosemirror-adapter/core'
+import {
+  useMarkViewContext,
+  useMarkViewFactory,
+  type MarkViewContextProps,
+  type SolidMarkViewUserOptions,
+} from '@prosemirror-adapter/solid'
+import {
+  createComponent,
+  createMemo,
+  type Accessor,
+  type Component,
+} from 'solid-js'
+
+import { useExtension } from '../hooks/use-extension'
+
+/**
+ * @public
+ */
+export interface SolidMarkViewProps extends MarkViewContextProps {}
+
+/**
+ * @public
+ */
+export type SolidMarkViewComponent = Component<SolidMarkViewProps>
+
+/**
+ * Options for {@link defineSolidMarkView}.
+ *
+ * @public
+ */
+export interface SolidMarkViewOptions extends CoreMarkViewUserOptions<SolidMarkViewComponent> {
+  /**
+   * The name of the mark type.
+   */
+  name: string
+}
+
+function withMarkViewProps(
+  component: SolidMarkViewComponent,
+): Component<SolidMarkViewProps> {
+  return function MarkViewPropsWrapper() {
+    const context: Accessor<SolidMarkViewProps> = useMarkViewContext()
+    const props: SolidMarkViewProps = {
+      get contentRef() {
+        return context().contentRef
+      },
+      get view() {
+        return context().view
+      },
+      get mark() {
+        return context().mark
+      },
+    }
+    return createComponent(component, props)
+  }
+}
+
+/**
+ * @internal
+ */
+export function consumeSolidMarkViews(): void {
+  const markViewFactory = useMarkViewFactory()
+  const extension = createMemo(
+    () => defineSolidMarkViewFactory(markViewFactory),
+    [markViewFactory],
+  )
+
+  useExtension(extension)
+}
+
+/**
+ * Defines a mark view using a Solid component.
+ *
+ * @public
+ */
+export function defineSolidMarkView(options: SolidMarkViewOptions): Extension {
+  const { name, component, ...userOptions } = options
+
+  const args: SolidMarkViewUserOptions = {
+    ...userOptions,
+    component: withMarkViewProps(component),
+  }
+
+  return defineMarkViewComponent<SolidMarkViewUserOptions>({
+    group: 'solid',
+    name,
+    args,
+  })
+}
+
+function defineSolidMarkViewFactory(
+  factory: (options: SolidMarkViewOptions) => MarkViewConstructor,
+) {
+  return defineMarkViewFactory<SolidMarkViewOptions>({
+    group: 'solid',
+    factory,
+  })
+}

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

@@ -0,0 +1,120 @@
+import {
+  defineNodeViewComponent,
+  defineNodeViewFactory,
+  type Extension,
+} from '@prosekit/core'
+import type { NodeViewConstructor } from '@prosekit/pm/view'
+import type { CoreNodeViewUserOptions } from '@prosemirror-adapter/core'
+import {
+  useNodeViewContext,
+  useNodeViewFactory,
+  type NodeViewContextProps,
+  type SolidNodeViewUserOptions,
+} from '@prosemirror-adapter/solid'
+import {
+  createComponent,
+  createMemo,
+  type Accessor,
+  type Component,
+} from 'solid-js'
+
+import { useExtension } from '../hooks/use-extension'
+
+/**
+ * @public
+ */
+export interface SolidNodeViewProps extends NodeViewContextProps {}
+
+/**
+ * @public
+ */
+export type SolidNodeViewComponent = Component<SolidNodeViewProps>
+
+/**
+ * Options for {@link defineSolidNodeView}.
+ *
+ * @public
+ */
+export interface SolidNodeViewOptions extends CoreNodeViewUserOptions<SolidNodeViewComponent> {
+  /**
+   * The name of the node type.
+   */
+  name: string
+}
+
+function withNodeViewProps(
+  component: SolidNodeViewComponent,
+): Component<SolidNodeViewProps> {
+  return function NodeViewPropsWrapper() {
+    const context: Accessor<SolidNodeViewProps> = useNodeViewContext()
+    const props: SolidNodeViewProps = {
+      get contentRef() {
+        return context().contentRef
+      },
+      get view() {
+        return context().view
+      },
+      get getPos() {
+        return context().getPos
+      },
+      get setAttrs() {
+        return context().setAttrs
+      },
+      get node() {
+        return context().node
+      },
+      get selected() {
+        return context().selected
+      },
+      get decorations() {
+        return context().decorations
+      },
+      get innerDecorations() {
+        return context().innerDecorations
+      },
+    }
+    return createComponent(component, props)
+  }
+}
+
+/**
+ * @internal
+ */
+export function consumeSolidNodeViews(): void {
+  const nodeViewFactory = useNodeViewFactory()
+  const extension = createMemo(
+    () => defineSolidNodeViewFactory(nodeViewFactory),
+    [nodeViewFactory],
+  )
+
+  useExtension(extension)
+}
+
+/**
+ * Defines a node view using a Solid component.
+ *
+ * @public
+ */
+export function defineSolidNodeView(options: SolidNodeViewOptions): Extension {
+  const { name, component, ...userOptions } = options
+
+  const args: SolidNodeViewUserOptions = {
+    ...userOptions,
+    component: withNodeViewProps(component),
+  }
+
+  return defineNodeViewComponent<SolidNodeViewUserOptions>({
+    group: 'solid',
+    name,
+    args,
+  })
+}
+
+function defineSolidNodeViewFactory(
+  factory: (options: SolidNodeViewOptions) => NodeViewConstructor,
+) {
+  return defineNodeViewFactory<SolidNodeViewOptions>({
+    group: 'solid',
+    factory,
+  })
+}

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

@@ -0,0 +1,20 @@
+import { defineDocChangeHandler } from '@prosekit/core'
+import type { ProseMirrorNode } from '@prosekit/pm/model'
+
+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(() => extension, options)
+}

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

@@ -0,0 +1,36 @@
+import {
+  EditorNotFoundError,
+  type Editor,
+  type Extension,
+} from '@prosekit/core'
+import {
+  createEffect,
+  onCleanup,
+  type Accessor,
+} from 'solid-js'
+
+import { useEditorContext } from '../contexts/editor-context'
+import type { MaybeAccessor } from '../types'
+import { toValue } from '../utils/to-value'
+
+/**
+ * @internal
+ */
+export function useEditorExtension(
+  editorAccessor: MaybeAccessor<Editor> | undefined | null,
+  extensionAccessor: Accessor<Extension | null>,
+): void {
+  const editorContext = useEditorContext()
+
+  createEffect(() => {
+    const editor = toValue(editorAccessor) || toValue(editorContext)
+    const extension = extensionAccessor()
+
+    if (!editor) {
+      throw new EditorNotFoundError()
+    }
+    if (extension) {
+      onCleanup(editor.use(extension))
+    }
+  })
+}

package/src/hooks/use-editor.ts

@@ -0,0 +1,59 @@
+import {
+  defineMountHandler,
+  defineUpdateHandler,
+  ProseKitError,
+  union,
+  type Editor,
+  type Extension,
+} from '@prosekit/core'
+import {
+  createEffect,
+  createSignal,
+} from 'solid-js'
+
+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
+}): () => 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 [depend, forceUpdate] = useForceUpdate()
+
+  createEffect(() => {
+    if (update) {
+      const extension = union(
+        defineMountHandler(forceUpdate),
+        defineUpdateHandler(forceUpdate),
+      )
+      return editor.use(extension)
+    }
+  }, [editor, update, forceUpdate])
+
+  return () => {
+    depend()
+    return editor
+  }
+}
+
+function useForceUpdate() {
+  return createSignal(undefined, { equals: false })
+}

package/src/hooks/use-extension.ts

@@ -0,0 +1,41 @@
+import type {
+  Editor,
+  Extension,
+  Priority,
+} from '@prosekit/core'
+import type { Accessor } from 'solid-js'
+
+import type { MaybeAccessor } from '../types'
+
+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?: MaybeAccessor<Editor>
+
+  /**
+   * Optional priority to add the extension with.
+   */
+  priority?: Priority
+}
+
+/**
+ * Add an extension to the editor.
+ */
+export function useExtension(
+  /**
+   * The accessor 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: Accessor<Extension | null>,
+  options?: UseExtensionOptions,
+): void {
+  useEditorExtension(
+    options?.editor,
+    usePriorityExtension(extension, options?.priority),
+  )
+}

package/src/hooks/use-keymap.ts

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

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

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

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

@@ -0,0 +1,20 @@
+import { defineUpdateHandler } from '@prosekit/core'
+import type { EditorState } from '@prosekit/pm/state'
+
+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(() => extension, options)
+}

package/src/index.ts

@@ -0,0 +1,30 @@
+export {
+  ProseKit,
+  type ProseKitProps,
+} from './components/prosekit'
+export {
+  defineSolidMarkView,
+  type SolidMarkViewComponent,
+  type SolidMarkViewOptions,
+  type SolidMarkViewProps,
+} from './extensions/solid-mark-view'
+export {
+  defineSolidNodeView,
+  type SolidNodeViewComponent,
+  type SolidNodeViewOptions,
+  type SolidNodeViewProps,
+} from './extensions/solid-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 {
+  MaybeAccessor,
+  PropsWithChildren,
+  PropsWithClass,
+  PropsWithElement,
+} from './types'

package/src/types.ts

@@ -0,0 +1,29 @@
+import type {
+  Accessor,
+  JSX,
+  JSXElement,
+} from 'solid-js'
+
+/**
+ * @internal
+ */
+export type PropsWithClass<P = unknown> = P & {
+  class?: string | undefined
+}
+
+/**
+ * @internal
+ */
+export type PropsWithChildren<P = unknown> = P & {
+  children?: JSXElement | undefined
+}
+
+/**
+ * @internal
+ */
+export type PropsWithElement<Props extends object, CustomElement extends HTMLElement> = Props & JSX.HTMLAttributes<CustomElement>
+
+/**
+ * T or a reactive/non-reactive function returning T
+ */
+export type MaybeAccessor<T> = T | Accessor<T>

package/src/utils/to-value.ts

@@ -0,0 +1,14 @@
+/**
+ * Accesses the value of a MaybeAccessor
+ *
+ * @example
+ * ```ts
+ * access("foo") // => "foo"
+ * access(() => "foo") // => "foo"
+ * ```
+ */
+export function toValue<T>(
+  v: (() => T) | T,
+): T {
+  return (typeof v === 'function') ? (v as () => T)() : v
+}