@prosekit/solid 0.6.8 → 0.7.0-beta.1

package/dist/prosekit-solid.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"prosekit-solid.d.ts","names":[],"sources":["../src/components/prosekit.ts","../src/extensions/solid-mark-view.ts","../src/extensions/solid-node-view.ts","../src/hooks/use-extension.ts","../src/hooks/use-doc-change.ts","../src/hooks/use-editor-derived-value.ts","../src/hooks/use-editor.ts","../src/hooks/use-keymap.ts","../src/hooks/use-state-update.ts"],"mappings":";;;;;;;;;KAOY,aAAA,GAAgB,WAAA;EAC1B,MAAA,EAAQ,MAAA;AAAA;;;;;AADV;cASa,QAAA,EAAU,SAAA,CAAU,aAAA;;;;;;UCAhB,kBAAA,SAA2B,oBAAA;ADT5C;;;AAAA,KCcY,sBAAA,GAAyB,SAAA,CAAU,kBAAA;;;;;;UAO9B,oBAAA,SAA6B,uBAAA,CAAwB,sBAAA;EDIrE;;;ECAC,IAAA;AAAA;;;;AAXF;;iBAgDgB,mBAAA,CAAoB,OAAA,EAAS,oBAAA,GAAuB,SAAA;;;;;;UCrDnD,kBAAA,SAA2B,oBAAA;AFT5C;;;AAAA,KEcY,sBAAA,GAAyB,SAAA,CAAU,kBAAA;;;;;;UAO9B,oBAAA,SAA6B,uBAAA,CAAwB,sBAAA;EFIrE;;;EEAC,IAAA;AAAA;;;;ADXF;;iBCgDgB,mBAAA,CAAoB,OAAA,EAAS,oBAAA,GAAuB,SAAA;;;UC7DnD,mBAAA;;;;;EAKf,MAAA,GAAS,aAAA,CAAc,MAAA;EHNb;;;EGWV,QAAA,GAAW,QAAA;AAAA;;;;iBAMG,YAAA;AHRhB;;;;;AGaE,SAAA,EAAW,QAAA,CAAS,SAAA,UACpB,OAAA,GAAU,mBAAA;;;;;;;;iBCpBI,YAAA,CACd,OAAA,GAAU,GAAA,EAAK,eAAA,WACf,OAAA,GAAU,mBAAA;;;UCJK,uBAAA,WAAkC,SAAA;;;;;EAKjD,MAAA,GAAS,aAAA,CAAc,MAAA,CAAO,CAAA;AAAA;;;;;;;;;ALGhC;;;;iBKYgB,qBAAA,WAAgC,SAAA,UAAA;;;;AJZhD;;;;AImBE,MAAA,GAAS,MAAA,EAAQ,MAAA,CAAO,CAAA,MAAO,OAAA,EAC/B,OAAA,GAAU,uBAAA,CAAwB,CAAA,IACjC,QAAA,CAAS,OAAA;;;;;;;;iBC3BI,SAAA,WAAoB,SAAA,OAAA,CAAiB,OAAA;;;ANHrD;;;;EMUE,MAAA;AAAA,UACQ,MAAA,CAAO,CAAA;;;iBCdD,SAAA,CAAU,MAAA,QAAc,MAAA,EAAQ,OAAA,GAAU,mBAAA;;;;;;;;iBCM1C,cAAA,CACd,OAAA,GAAU,KAAA,EAAO,WAAA,WACjB,OAAA,GAAU,mBAAA"}
+{"version":3,"file":"prosekit-solid.d.ts","names":[],"sources":["../src/components/prosekit.ts","../src/extensions/solid-mark-view.ts","../src/extensions/solid-node-view.ts","../src/hooks/use-extension.ts","../src/hooks/use-doc-change.ts","../src/hooks/use-editor-derived-value.ts","../src/hooks/use-editor.ts","../src/hooks/use-keymap.ts","../src/hooks/use-state-update.ts"],"mappings":";;;;;;;;;KAOY,aAAA,GAAgB,WAAA;EAC1B,MAAA,EAAQ,MAAA;AAAA;;;;;AADV;cASa,QAAA,EAAU,SAAA,CAAU,aAAA;;;;;;UCAhB,kBAAA,SAA2B,oBAAA;ADT5C;;;AAAA,KCcY,sBAAA,GAAyB,SAAA,CAAU,kBAAA;;;;;;UAO9B,oBAAA,SAA6B,uBAAA,CAAwB,sBAAA;EDIrE;;;ECAC,IAAA;AAAA;;;;AAXF;;iBAwDgB,mBAAA,CAAoB,OAAA,EAAS,oBAAA,GAAuB,SAAA;;;;;;UC7DnD,kBAAA,SAA2B,oBAAA;AFT5C;;;AAAA,KEcY,sBAAA,GAAyB,SAAA,CAAU,kBAAA;;;;;;UAO9B,oBAAA,SAA6B,uBAAA,CAAwB,sBAAA;EFIrE;;;EEAC,IAAA;AAAA;;;;ADXF;;iBCuEgB,mBAAA,CAAoB,OAAA,EAAS,oBAAA,GAAuB,SAAA;;;UCpFnD,mBAAA;;;;;EAKf,MAAA,GAAS,aAAA,CAAc,MAAA;EHNb;;;EGWV,QAAA,GAAW,QAAA;AAAA;;;;iBAMG,YAAA;AHRhB;;;;;AGaE,SAAA,EAAW,QAAA,CAAS,SAAA,UACpB,OAAA,GAAU,mBAAA;;;;;;;;iBCpBI,YAAA,CACd,OAAA,GAAU,GAAA,EAAK,eAAA,WACf,OAAA,GAAU,mBAAA;;;UCJK,uBAAA,WAAkC,SAAA;;;;;EAKjD,MAAA,GAAS,aAAA,CAAc,MAAA,CAAO,CAAA;AAAA;;;;;;;;;ALGhC;;;;iBKYgB,qBAAA,WAAgC,SAAA,UAAA;;;;AJZhD;;;;AImBE,MAAA,GAAS,MAAA,EAAQ,MAAA,CAAO,CAAA,MAAO,OAAA,EAC/B,OAAA,GAAU,uBAAA,CAAwB,CAAA,IACjC,QAAA,CAAS,OAAA;;;;;;;;iBC3BI,SAAA,WAAoB,SAAA,OAAA,CAAiB,OAAA;;;ANHrD;;;;EMUE,MAAA;AAAA,UACQ,MAAA,CAAO,CAAA;;;iBCdD,SAAA,CAAU,MAAA,QAAc,MAAA,EAAQ,OAAA,GAAU,mBAAA;;;;;;;;iBCM1C,cAAA,CACd,OAAA,GAAU,KAAA,EAAO,WAAA,WACjB,OAAA,GAAU,mBAAA"}

package/dist/prosekit-solid.js

@@ -18,9 +18,17 @@ var ProseKitSolidMarkView = class extends AbstractSolidMarkView {
 			const getProps = this.context;
 			return createComponent(Portal, {
 				mount: this.dom,
-				get children() {
-					return createComponent(UserComponent, getProps());
-				},
+				children: createComponent(UserComponent, {
+					get contentRef() {
+						return getProps().contentRef;
+					},
+					get view() {
+						return getProps().view;
+					},
+					get mark() {
+						return getProps().mark;
+					}
+				}),
 				ref: hidePortalDiv
 			});
 		};
@@ -57,9 +65,32 @@ var ProseKitSolidNodeView = class extends AbstractSolidNodeView {
 			const getProps = this.context;
 			return createComponent(Portal, {
 				mount: this.dom,
-				get children() {
-					return createComponent(UserComponent, getProps());
-				},
+				children: createComponent(UserComponent, {
+					get contentRef() {
+						return getProps().contentRef;
+					},
+					get view() {
+						return getProps().view;
+					},
+					get getPos() {
+						return getProps().getPos;
+					},
+					get setAttrs() {
+						return getProps().setAttrs;
+					},
+					get node() {
+						return getProps().node;
+					},
+					get selected() {
+						return getProps().selected;
+					},
+					get decorations() {
+						return getProps().decorations;
+					},
+					get innerDecorations() {
+						return getProps().innerDecorations;
+					}
+				}),
 				ref: hidePortalDiv
 			});
 		};

package/dist/prosekit-solid.js.map

@@ -1 +1 @@
-{"version":3,"file":"prosekit-solid.js","names":[],"sources":["../src/extensions/helpers.ts","../src/extensions/solid-mark-view.ts","../src/extensions/solid-node-view.ts","../src/utils/to-value.ts","../src/hooks/use-editor-extension.ts","../src/components/view-renderer.ts","../src/components/prosekit.ts","../src/hooks/use-priority-extension.ts","../src/hooks/use-extension.ts","../src/hooks/use-doc-change.ts","../src/hooks/use-editor.ts","../src/hooks/use-editor-derived-value.ts","../src/hooks/use-keymap.ts","../src/hooks/use-state-update.ts"],"sourcesContent":["export function hidePortalDiv(el: HTMLElement): void {\n  el.style.display = 'contents'\n  el.dataset.solidPortal = 'true'\n}\n","import { defineMarkViewComponent, defineMarkViewFactory, type Extension } from '@prosekit/core'\nimport type { CoreMarkViewUserOptions } from '@prosemirror-adapter/core'\nimport {\n  AbstractSolidMarkView,\n  buildSolidMarkViewCreator,\n  type MarkViewContextProps,\n  type SolidRendererResult,\n} from '@prosemirror-adapter/solid'\nimport { createComponent, type Component, type JSX } from 'solid-js'\nimport { Portal } from 'solid-js/web'\n\nimport { hidePortalDiv } from './helpers.ts'\n\n/**\n * @public\n */\nexport interface SolidMarkViewProps extends MarkViewContextProps {}\n\n/**\n * @public\n */\nexport type SolidMarkViewComponent = Component<SolidMarkViewProps>\n\n/**\n * Options for {@link defineSolidMarkView}.\n *\n * @public\n */\nexport interface SolidMarkViewOptions extends CoreMarkViewUserOptions<SolidMarkViewComponent> {\n  /**\n   * The name of the mark type.\n   */\n  name: string\n}\n\nclass ProseKitSolidMarkView extends AbstractSolidMarkView<SolidMarkViewComponent> {\n  render = (): JSX.Element => {\n    const UserComponent = this.component\n    const getProps = this.context\n    return createComponent(Portal, {\n      mount: this.dom,\n      get children() {\n        const props: MarkViewContextProps = getProps()\n        return createComponent(UserComponent, props)\n      },\n      ref: hidePortalDiv,\n    })\n  }\n}\n\n/**\n * @internal\n */\nexport function defineSolidMarkViewFactory(\n  renderSolidRenderer: SolidRendererResult['renderSolidRenderer'],\n  removeSolidRenderer: SolidRendererResult['removeSolidRenderer'],\n): Extension {\n  const factory = buildSolidMarkViewCreator(renderSolidRenderer, removeSolidRenderer, ProseKitSolidMarkView)\n  return defineMarkViewFactory<SolidMarkViewOptions>({\n    group: 'solid',\n    factory,\n  })\n}\n\n/**\n * Defines a mark view using a Solid component.\n *\n * @public\n */\nexport function defineSolidMarkView(options: SolidMarkViewOptions): Extension {\n  return defineMarkViewComponent<SolidMarkViewOptions>({\n    group: 'solid',\n    name: options.name,\n    args: options,\n  })\n}\n","import { defineNodeViewComponent, defineNodeViewFactory, type Extension } from '@prosekit/core'\nimport type { CoreNodeViewUserOptions } from '@prosemirror-adapter/core'\nimport {\n  AbstractSolidNodeView,\n  buildSolidNodeViewCreator,\n  type NodeViewContextProps,\n  type SolidRendererResult,\n} from '@prosemirror-adapter/solid'\nimport { createComponent, type Component, type JSX } from 'solid-js'\nimport { Portal } from 'solid-js/web'\n\nimport { hidePortalDiv } from './helpers.ts'\n\n/**\n * @public\n */\nexport interface SolidNodeViewProps extends NodeViewContextProps {}\n\n/**\n * @public\n */\nexport type SolidNodeViewComponent = Component<SolidNodeViewProps>\n\n/**\n * Options for {@link defineSolidNodeView}.\n *\n * @public\n */\nexport interface SolidNodeViewOptions extends CoreNodeViewUserOptions<SolidNodeViewComponent> {\n  /**\n   * The name of the node type.\n   */\n  name: string\n}\n\nclass ProseKitSolidNodeView extends AbstractSolidNodeView<SolidNodeViewComponent> {\n  render = (): JSX.Element => {\n    const UserComponent = this.component\n    const getProps = this.context\n    return createComponent(Portal, {\n      mount: this.dom,\n      get children() {\n        const props: SolidNodeViewProps = getProps()\n        return createComponent(UserComponent, props)\n      },\n      ref: hidePortalDiv,\n    })\n  }\n}\n\n/**\n * @internal\n */\nexport function defineSolidNodeViewFactory(\n  renderSolidRenderer: SolidRendererResult['renderSolidRenderer'],\n  removeSolidRenderer: SolidRendererResult['removeSolidRenderer'],\n): Extension {\n  const factory = buildSolidNodeViewCreator(renderSolidRenderer, removeSolidRenderer, ProseKitSolidNodeView)\n  return defineNodeViewFactory<SolidNodeViewOptions>({\n    group: 'solid',\n    factory,\n  })\n}\n\n/**\n * Defines a node view using a Solid component.\n *\n * @public\n */\nexport function defineSolidNodeView(options: SolidNodeViewOptions): Extension {\n  return defineNodeViewComponent<SolidNodeViewOptions>({\n    group: 'solid',\n    name: options.name,\n    args: options,\n  })\n}\n","/**\n * Accesses the value of a MaybeAccessor\n *\n * @example\n * ```ts\n * access(\"foo\") // => \"foo\"\n * access(() => \"foo\") // => \"foo\"\n * ```\n */\nexport function toValue<T>(\n  v: (() => T) | T,\n): T {\n  return (typeof v === 'function') ? (v as () => T)() : v\n}\n","import { EditorNotFoundError, type Editor, type Extension } from '@prosekit/core'\nimport { createEffect, onCleanup, type Accessor } from 'solid-js'\n\nimport { useEditorContext } from '../contexts/editor-context.ts'\nimport type { MaybeAccessor } from '../types.ts'\nimport { toValue } from '../utils/to-value.ts'\n\n/**\n * @internal\n */\nexport function useEditorExtension(\n  editorAccessor: MaybeAccessor<Editor> | undefined | null,\n  extensionAccessor: Accessor<Extension | null>,\n): void {\n  const editorContext = useEditorContext()\n\n  createEffect(() => {\n    const editor = toValue(editorAccessor) || toValue(editorContext)\n    const extension = extensionAccessor()\n\n    if (!editor) {\n      throw new EditorNotFoundError()\n    }\n    if (extension) {\n      onCleanup(editor.use(extension))\n    }\n  })\n}\n","import { union, type Editor } from '@prosekit/core'\nimport { useSolidRenderer } from '@prosemirror-adapter/solid'\nimport type { Component, JSX, ParentProps } from 'solid-js'\n\nimport { defineSolidMarkViewFactory } from '../extensions/solid-mark-view.ts'\nimport { defineSolidNodeViewFactory } from '../extensions/solid-node-view.ts'\nimport { useEditorExtension } from '../hooks/use-editor-extension.ts'\n\ntype ViewRendererProps = ParentProps<{\n  editor: Editor\n}>\n\nexport const ViewRenderer: Component<ViewRendererProps> = (props): JSX.Element => {\n  const { renderSolidRenderer, removeSolidRenderer, render } = useSolidRenderer()\n\n  const extension = union([\n    defineSolidMarkViewFactory(renderSolidRenderer, removeSolidRenderer),\n    defineSolidNodeViewFactory(renderSolidRenderer, removeSolidRenderer),\n  ])\n\n  useEditorExtension(() => props.editor, () => extension)\n\n  return [props.children, render] as unknown as JSX.Element\n}\n","import type { Editor } from '@prosekit/core'\nimport { createComponent, type Component, type ParentProps } from 'solid-js'\n\nimport { EditorContextProvider } from '../contexts/editor-context.ts'\n\nimport { ViewRenderer } from './view-renderer.ts'\n\nexport type ProseKitProps = ParentProps<{\n  editor: Editor\n}>\n\n/**\n * The root component for a ProseKit editor.\n *\n * @public\n */\nexport const ProseKit: Component<ProseKitProps> = (props) => {\n  return createComponent(EditorContextProvider, {\n    get value() {\n      return props.editor\n    },\n    get children() {\n      return createComponent(ViewRenderer, {\n        get editor() {\n          return props.editor\n        },\n        get children() {\n          return props.children\n        },\n      })\n    },\n  })\n}\n","import { withPriority, type Extension, type Priority } from '@prosekit/core'\n\n/**\n * @internal\n */\nexport function usePriorityExtension<T extends Extension = Extension>(\n  extension: () => T | null,\n  priority?: Priority | null,\n): () => T | null {\n  return () => {\n    const ext = extension()\n    return ext && priority ? withPriority(ext, priority) : ext\n  }\n}\n","import type { Editor, Extension, Priority } from '@prosekit/core'\nimport type { Accessor } from 'solid-js'\n\nimport type { MaybeAccessor } from '../types.ts'\n\nimport { useEditorExtension } from './use-editor-extension.ts'\nimport { usePriorityExtension } from './use-priority-extension.ts'\n\nexport interface UseExtensionOptions {\n  /**\n   * The editor to add the extension to. If not provided, it will use the\n   * editor from the nearest `<ProseKit>` component.\n   */\n  editor?: MaybeAccessor<Editor>\n\n  /**\n   * Optional priority to add the extension with.\n   */\n  priority?: Priority\n}\n\n/**\n * Add an extension to the editor.\n */\nexport function useExtension(\n  /**\n   * The accessor to an extension to add to the editor. If it changes, the previous\n   * extension will be removed and the new one (if not null) will be added.\n   */\n  extension: Accessor<Extension | null>,\n  options?: UseExtensionOptions,\n): void {\n  useEditorExtension(\n    options?.editor,\n    usePriorityExtension(extension, options?.priority),\n  )\n}\n","import { defineDocChangeHandler } from '@prosekit/core'\nimport type { ProseMirrorNode } from '@prosekit/pm/model'\n\nimport { useExtension, type UseExtensionOptions } from './use-extension.ts'\n\n/**\n * Calls the given handler whenever the editor document changes.\n *\n * @public\n */\nexport function useDocChange(\n  handler: (doc: ProseMirrorNode) => void,\n  options?: UseExtensionOptions,\n): void {\n  const extension = defineDocChangeHandler((view) => handler(view.state.doc))\n  useExtension(() => extension, options)\n}\n","import { defineMountHandler, defineUpdateHandler, ProseKitError, union, type Editor, type Extension } from '@prosekit/core'\nimport { createEffect, createSignal } from 'solid-js'\n\nimport { useEditorContext } from '../contexts/editor-context.ts'\n\n/**\n * Retrieves the editor instance from the nearest ProseKit component.\n *\n * @public\n */\nexport function useEditor<E extends Extension = any>(options?: {\n  /**\n   * Whether to update the component when the editor is mounted or editor state\n   * is updated.\n   *\n   * @default false\n   */\n  update?: boolean\n}): () => Editor<E> {\n  const update = options?.update ?? false\n\n  const editor = useEditorContext<E>()\n  if (!editor) {\n    throw new ProseKitError(\n      'useEditor must be used within the ProseKit component',\n    )\n  }\n\n  const [depend, forceUpdate] = useForceUpdate()\n\n  createEffect(() => {\n    if (update) {\n      const extension = union(\n        defineMountHandler(forceUpdate),\n        defineUpdateHandler(forceUpdate),\n      )\n      return editor.use(extension)\n    }\n  }, [editor, update, forceUpdate])\n\n  return () => {\n    depend()\n    return editor\n  }\n}\n\nfunction useForceUpdate() {\n  return createSignal(undefined, { equals: false })\n}\n","import type { Editor, Extension } from '@prosekit/core'\nimport { createMemo, type Accessor } from 'solid-js'\n\nimport type { MaybeAccessor } from '../types.ts'\nimport { toValue } from '../utils/to-value.ts'\n\nimport { useEditor } from './use-editor.ts'\n\nexport interface UseEditorDerivedOptions<E extends Extension = any> {\n  /**\n   * The editor to add the extension to. If not provided, it will use the\n   * editor from the nearest `<ProseKit>` component.\n   */\n  editor?: MaybeAccessor<Editor<E>>\n}\n\n/**\n * Runs a function to derive a value from the editor instance after editor state\n * changes.\n *\n * This is useful when you need to render something based on the editor state,\n * for example, whether the selected text is wrapped in an italic mark.\n *\n * It returns an accessor of the derived value that updates whenever the editor\n * state changes.\n *\n * @public\n */\nexport function useEditorDerivedValue<E extends Extension, Derived>(\n  /**\n   * A function that receives the editor instance and returns a derived value.\n   *\n   * It will be called whenever the editor's document state changes, or when it\n   * mounts.\n   */\n  derive: (editor: Editor<E>) => Derived,\n  options?: UseEditorDerivedOptions<E>,\n): Accessor<Derived> {\n  const initialEditor = options?.editor\n  const editorAccessor: Accessor<Editor<E>> = initialEditor\n    ? () => toValue(initialEditor)\n    : useEditor<E>({ update: true })\n\n  return createMemo(() => derive(editorAccessor()))\n}\n","import { defineKeymap, type Keymap } from '@prosekit/core'\n\nimport { useExtension, type UseExtensionOptions } from './use-extension.ts'\n\nexport function useKeymap(keymap: () => Keymap, options?: UseExtensionOptions): void {\n  const extension = () => defineKeymap(keymap())\n  useExtension(extension, options)\n}\n","import { defineUpdateHandler } from '@prosekit/core'\nimport type { EditorState } from '@prosekit/pm/state'\n\nimport { useExtension, type UseExtensionOptions } from './use-extension.ts'\n\n/**\n * Calls the given handler whenever the editor state changes.\n *\n * @public\n */\nexport function useStateUpdate(\n  handler: (state: EditorState) => void,\n  options?: UseExtensionOptions,\n): void {\n  const extension = defineUpdateHandler((view) => handler(view.state))\n  useExtension(() => extension, options)\n}\n"],"mappings":"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"}
+{"version":3,"file":"prosekit-solid.js","names":[],"sources":["../src/extensions/helpers.ts","../src/extensions/solid-mark-view.ts","../src/extensions/solid-node-view.ts","../src/utils/to-value.ts","../src/hooks/use-editor-extension.ts","../src/components/view-renderer.ts","../src/components/prosekit.ts","../src/hooks/use-priority-extension.ts","../src/hooks/use-extension.ts","../src/hooks/use-doc-change.ts","../src/hooks/use-editor.ts","../src/hooks/use-editor-derived-value.ts","../src/hooks/use-keymap.ts","../src/hooks/use-state-update.ts"],"sourcesContent":["export function hidePortalDiv(el: HTMLElement): void {\n  el.style.display = 'contents'\n  el.dataset.solidPortal = 'true'\n}\n","import { defineMarkViewComponent, defineMarkViewFactory, type Extension } from '@prosekit/core'\nimport type { CoreMarkViewUserOptions } from '@prosemirror-adapter/core'\nimport {\n  AbstractSolidMarkView,\n  buildSolidMarkViewCreator,\n  type MarkViewContextProps,\n  type SolidRendererResult,\n} from '@prosemirror-adapter/solid'\nimport { createComponent, type Component, type JSX } from 'solid-js'\nimport { Portal } from 'solid-js/web'\n\nimport { hidePortalDiv } from './helpers.ts'\n\n/**\n * @public\n */\nexport interface SolidMarkViewProps extends MarkViewContextProps {}\n\n/**\n * @public\n */\nexport type SolidMarkViewComponent = Component<SolidMarkViewProps>\n\n/**\n * Options for {@link defineSolidMarkView}.\n *\n * @public\n */\nexport interface SolidMarkViewOptions extends CoreMarkViewUserOptions<SolidMarkViewComponent> {\n  /**\n   * The name of the mark type.\n   */\n  name: string\n}\n\nclass ProseKitSolidMarkView extends AbstractSolidMarkView<SolidMarkViewComponent> {\n  render = (): JSX.Element => {\n    const UserComponent = this.component\n    const getProps: () => SolidMarkViewProps = this.context\n    const props: SolidMarkViewProps = {\n      get contentRef() {\n        return getProps().contentRef\n      },\n      get view() {\n        return getProps().view\n      },\n      get mark() {\n        return getProps().mark\n      },\n    }\n    return createComponent(Portal, {\n      mount: this.dom,\n      children: createComponent(UserComponent, props),\n      ref: hidePortalDiv,\n    })\n  }\n}\n\n/**\n * @internal\n */\nexport function defineSolidMarkViewFactory(\n  renderSolidRenderer: SolidRendererResult['renderSolidRenderer'],\n  removeSolidRenderer: SolidRendererResult['removeSolidRenderer'],\n): Extension {\n  const factory = buildSolidMarkViewCreator(renderSolidRenderer, removeSolidRenderer, ProseKitSolidMarkView)\n  return defineMarkViewFactory<SolidMarkViewOptions>({\n    group: 'solid',\n    factory,\n  })\n}\n\n/**\n * Defines a mark view using a Solid component.\n *\n * @public\n */\nexport function defineSolidMarkView(options: SolidMarkViewOptions): Extension {\n  return defineMarkViewComponent<SolidMarkViewOptions>({\n    group: 'solid',\n    name: options.name,\n    args: options,\n  })\n}\n","import { defineNodeViewComponent, defineNodeViewFactory, type Extension } from '@prosekit/core'\nimport type { CoreNodeViewUserOptions } from '@prosemirror-adapter/core'\nimport {\n  AbstractSolidNodeView,\n  buildSolidNodeViewCreator,\n  type NodeViewContextProps,\n  type SolidRendererResult,\n} from '@prosemirror-adapter/solid'\nimport { createComponent, type Component, type JSX } from 'solid-js'\nimport { Portal } from 'solid-js/web'\n\nimport { hidePortalDiv } from './helpers.ts'\n\n/**\n * @public\n */\nexport interface SolidNodeViewProps extends NodeViewContextProps {}\n\n/**\n * @public\n */\nexport type SolidNodeViewComponent = Component<SolidNodeViewProps>\n\n/**\n * Options for {@link defineSolidNodeView}.\n *\n * @public\n */\nexport interface SolidNodeViewOptions extends CoreNodeViewUserOptions<SolidNodeViewComponent> {\n  /**\n   * The name of the node type.\n   */\n  name: string\n}\n\nclass ProseKitSolidNodeView extends AbstractSolidNodeView<SolidNodeViewComponent> {\n  render = (): JSX.Element => {\n    const UserComponent = this.component\n    const getProps: () => SolidNodeViewProps = this.context\n    const props: SolidNodeViewProps = {\n      get contentRef() {\n        return getProps().contentRef\n      },\n      get view() {\n        return getProps().view\n      },\n      get getPos() {\n        return getProps().getPos\n      },\n      get setAttrs() {\n        return getProps().setAttrs\n      },\n      get node() {\n        return getProps().node\n      },\n      get selected() {\n        return getProps().selected\n      },\n      get decorations() {\n        return getProps().decorations\n      },\n      get innerDecorations() {\n        return getProps().innerDecorations\n      },\n    }\n    return createComponent(Portal, {\n      mount: this.dom,\n      children: createComponent(UserComponent, props),\n      ref: hidePortalDiv,\n    })\n  }\n}\n\n/**\n * @internal\n */\nexport function defineSolidNodeViewFactory(\n  renderSolidRenderer: SolidRendererResult['renderSolidRenderer'],\n  removeSolidRenderer: SolidRendererResult['removeSolidRenderer'],\n): Extension {\n  const factory = buildSolidNodeViewCreator(renderSolidRenderer, removeSolidRenderer, ProseKitSolidNodeView)\n  return defineNodeViewFactory<SolidNodeViewOptions>({\n    group: 'solid',\n    factory,\n  })\n}\n\n/**\n * Defines a node view using a Solid component.\n *\n * @public\n */\nexport function defineSolidNodeView(options: SolidNodeViewOptions): Extension {\n  return defineNodeViewComponent<SolidNodeViewOptions>({\n    group: 'solid',\n    name: options.name,\n    args: options,\n  })\n}\n","/**\n * Accesses the value of a MaybeAccessor\n *\n * @example\n * ```ts\n * access(\"foo\") // => \"foo\"\n * access(() => \"foo\") // => \"foo\"\n * ```\n */\nexport function toValue<T>(\n  v: (() => T) | T,\n): T {\n  return (typeof v === 'function') ? (v as () => T)() : v\n}\n","import { EditorNotFoundError, type Editor, type Extension } from '@prosekit/core'\nimport { createEffect, onCleanup, type Accessor } from 'solid-js'\n\nimport { useEditorContext } from '../contexts/editor-context.ts'\nimport type { MaybeAccessor } from '../types.ts'\nimport { toValue } from '../utils/to-value.ts'\n\n/**\n * @internal\n */\nexport function useEditorExtension(\n  editorAccessor: MaybeAccessor<Editor> | undefined | null,\n  extensionAccessor: Accessor<Extension | null>,\n): void {\n  const editorContext = useEditorContext()\n\n  createEffect(() => {\n    const editor = toValue(editorAccessor) || toValue(editorContext)\n    const extension = extensionAccessor()\n\n    if (!editor) {\n      throw new EditorNotFoundError()\n    }\n    if (extension) {\n      onCleanup(editor.use(extension))\n    }\n  })\n}\n","import { union, type Editor } from '@prosekit/core'\nimport { useSolidRenderer } from '@prosemirror-adapter/solid'\nimport type { Component, JSX, ParentProps } from 'solid-js'\n\nimport { defineSolidMarkViewFactory } from '../extensions/solid-mark-view.ts'\nimport { defineSolidNodeViewFactory } from '../extensions/solid-node-view.ts'\nimport { useEditorExtension } from '../hooks/use-editor-extension.ts'\n\ntype ViewRendererProps = ParentProps<{\n  editor: Editor\n}>\n\nexport const ViewRenderer: Component<ViewRendererProps> = (props): JSX.Element => {\n  const { renderSolidRenderer, removeSolidRenderer, render } = useSolidRenderer()\n\n  const extension = union([\n    defineSolidMarkViewFactory(renderSolidRenderer, removeSolidRenderer),\n    defineSolidNodeViewFactory(renderSolidRenderer, removeSolidRenderer),\n  ])\n\n  useEditorExtension(() => props.editor, () => extension)\n\n  return [props.children, render] as unknown as JSX.Element\n}\n","import type { Editor } from '@prosekit/core'\nimport { createComponent, type Component, type ParentProps } from 'solid-js'\n\nimport { EditorContextProvider } from '../contexts/editor-context.ts'\n\nimport { ViewRenderer } from './view-renderer.ts'\n\nexport type ProseKitProps = ParentProps<{\n  editor: Editor\n}>\n\n/**\n * The root component for a ProseKit editor.\n *\n * @public\n */\nexport const ProseKit: Component<ProseKitProps> = (props) => {\n  return createComponent(EditorContextProvider, {\n    get value() {\n      return props.editor\n    },\n    get children() {\n      return createComponent(ViewRenderer, {\n        get editor() {\n          return props.editor\n        },\n        get children() {\n          return props.children\n        },\n      })\n    },\n  })\n}\n","import { withPriority, type Extension, type Priority } from '@prosekit/core'\n\n/**\n * @internal\n */\nexport function usePriorityExtension<T extends Extension = Extension>(\n  extension: () => T | null,\n  priority?: Priority | null,\n): () => T | null {\n  return () => {\n    const ext = extension()\n    return ext && priority ? withPriority(ext, priority) : ext\n  }\n}\n","import type { Editor, Extension, Priority } from '@prosekit/core'\nimport type { Accessor } from 'solid-js'\n\nimport type { MaybeAccessor } from '../types.ts'\n\nimport { useEditorExtension } from './use-editor-extension.ts'\nimport { usePriorityExtension } from './use-priority-extension.ts'\n\nexport interface UseExtensionOptions {\n  /**\n   * The editor to add the extension to. If not provided, it will use the\n   * editor from the nearest `<ProseKit>` component.\n   */\n  editor?: MaybeAccessor<Editor>\n\n  /**\n   * Optional priority to add the extension with.\n   */\n  priority?: Priority\n}\n\n/**\n * Add an extension to the editor.\n */\nexport function useExtension(\n  /**\n   * The accessor to an extension to add to the editor. If it changes, the previous\n   * extension will be removed and the new one (if not null) will be added.\n   */\n  extension: Accessor<Extension | null>,\n  options?: UseExtensionOptions,\n): void {\n  useEditorExtension(\n    options?.editor,\n    usePriorityExtension(extension, options?.priority),\n  )\n}\n","import { defineDocChangeHandler } from '@prosekit/core'\nimport type { ProseMirrorNode } from '@prosekit/pm/model'\n\nimport { useExtension, type UseExtensionOptions } from './use-extension.ts'\n\n/**\n * Calls the given handler whenever the editor document changes.\n *\n * @public\n */\nexport function useDocChange(\n  handler: (doc: ProseMirrorNode) => void,\n  options?: UseExtensionOptions,\n): void {\n  const extension = defineDocChangeHandler((view) => handler(view.state.doc))\n  useExtension(() => extension, options)\n}\n","import { defineMountHandler, defineUpdateHandler, ProseKitError, union, type Editor, type Extension } from '@prosekit/core'\nimport { createEffect, createSignal } from 'solid-js'\n\nimport { useEditorContext } from '../contexts/editor-context.ts'\n\n/**\n * Retrieves the editor instance from the nearest ProseKit component.\n *\n * @public\n */\nexport function useEditor<E extends Extension = any>(options?: {\n  /**\n   * Whether to update the component when the editor is mounted or editor state\n   * is updated.\n   *\n   * @default false\n   */\n  update?: boolean\n}): () => Editor<E> {\n  const update = options?.update ?? false\n\n  const editor = useEditorContext<E>()\n  if (!editor) {\n    throw new ProseKitError(\n      'useEditor must be used within the ProseKit component',\n    )\n  }\n\n  const [depend, forceUpdate] = useForceUpdate()\n\n  createEffect(() => {\n    if (update) {\n      const extension = union(\n        defineMountHandler(forceUpdate),\n        defineUpdateHandler(forceUpdate),\n      )\n      return editor.use(extension)\n    }\n  }, [editor, update, forceUpdate])\n\n  return () => {\n    depend()\n    return editor\n  }\n}\n\nfunction useForceUpdate() {\n  return createSignal(undefined, { equals: false })\n}\n","import type { Editor, Extension } from '@prosekit/core'\nimport { createMemo, type Accessor } from 'solid-js'\n\nimport type { MaybeAccessor } from '../types.ts'\nimport { toValue } from '../utils/to-value.ts'\n\nimport { useEditor } from './use-editor.ts'\n\nexport interface UseEditorDerivedOptions<E extends Extension = any> {\n  /**\n   * The editor to add the extension to. If not provided, it will use the\n   * editor from the nearest `<ProseKit>` component.\n   */\n  editor?: MaybeAccessor<Editor<E>>\n}\n\n/**\n * Runs a function to derive a value from the editor instance after editor state\n * changes.\n *\n * This is useful when you need to render something based on the editor state,\n * for example, whether the selected text is wrapped in an italic mark.\n *\n * It returns an accessor of the derived value that updates whenever the editor\n * state changes.\n *\n * @public\n */\nexport function useEditorDerivedValue<E extends Extension, Derived>(\n  /**\n   * A function that receives the editor instance and returns a derived value.\n   *\n   * It will be called whenever the editor's document state changes, or when it\n   * mounts.\n   */\n  derive: (editor: Editor<E>) => Derived,\n  options?: UseEditorDerivedOptions<E>,\n): Accessor<Derived> {\n  const initialEditor = options?.editor\n  const editorAccessor: Accessor<Editor<E>> = initialEditor\n    ? () => toValue(initialEditor)\n    : useEditor<E>({ update: true })\n\n  return createMemo(() => derive(editorAccessor()))\n}\n","import { defineKeymap, type Keymap } from '@prosekit/core'\n\nimport { useExtension, type UseExtensionOptions } from './use-extension.ts'\n\nexport function useKeymap(keymap: () => Keymap, options?: UseExtensionOptions): void {\n  const extension = () => defineKeymap(keymap())\n  useExtension(extension, options)\n}\n","import { defineUpdateHandler } from '@prosekit/core'\nimport type { EditorState } from '@prosekit/pm/state'\n\nimport { useExtension, type UseExtensionOptions } from './use-extension.ts'\n\n/**\n * Calls the given handler whenever the editor state changes.\n *\n * @public\n */\nexport function useStateUpdate(\n  handler: (state: EditorState) => void,\n  options?: UseExtensionOptions,\n): void {\n  const extension = defineUpdateHandler((view) => handler(view.state))\n  useExtension(() => extension, options)\n}\n"],"mappings":"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"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@prosekit/solid",
   "type": "module",
-  "version": "0.6.8",
+  "version": "0.7.0-beta.1",
   "private": false,
   "description": "Solid components and utilities for ProseKit",
   "author": {
@@ -68,11 +68,11 @@
     "src"
   ],
   "dependencies": {
-    "@prosemirror-adapter/core": "^0.5.2",
-    "@prosemirror-adapter/solid": "^0.5.2",
-    "@prosekit/core": "^0.11.0",
+    "@prosemirror-adapter/core": "^0.5.3",
+    "@prosemirror-adapter/solid": "^0.5.3",
     "@prosekit/pm": "^0.1.15",
-    "@prosekit/web": "^0.7.13"
+    "@prosekit/web": "^0.8.0-beta.0",
+    "@prosekit/core": "^0.12.0-beta.0"
   },
   "peerDependencies": {
     "solid-js": ">= 1.7.0"
@@ -86,9 +86,13 @@
     "solid-js": "^1.9.11",
     "tsdown": "^0.21.4",
     "typescript": "~5.9.3",
+    "vite-plugin-solid": "^2.11.11",
+    "vitest": "^4.1.1",
+    "vitest-browser-solid": "^1.0.1",
+    "@prosekit/config-tsdown": "0.0.0",
     "@prosekit/config-ts": "0.0.0",
     "@prosekit/config-vitest": "0.0.0",
-    "@prosekit/config-tsdown": "0.0.0"
+    "@prosekit/testing": "0.0.0"
   },
   "publishConfig": {
     "dev": {}

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

@@ -36,13 +36,21 @@ export interface SolidMarkViewOptions extends CoreMarkViewUserOptions<SolidMarkV
 class ProseKitSolidMarkView extends AbstractSolidMarkView<SolidMarkViewComponent> {
   render = (): JSX.Element => {
     const UserComponent = this.component
-    const getProps = this.context
+    const getProps: () => SolidMarkViewProps = this.context
+    const props: SolidMarkViewProps = {
+      get contentRef() {
+        return getProps().contentRef
+      },
+      get view() {
+        return getProps().view
+      },
+      get mark() {
+        return getProps().mark
+      },
+    }
     return createComponent(Portal, {
       mount: this.dom,
-      get children() {
-        const props: MarkViewContextProps = getProps()
-        return createComponent(UserComponent, props)
-      },
+      children: createComponent(UserComponent, props),
       ref: hidePortalDiv,
     })
   }

package/src/extensions/solid-node-view.spec.tsx

@@ -0,0 +1,141 @@
+import { createEditor, union, type NodeJSON } from '@prosekit/core'
+import { defineTestExtension, type ImageAttrs } from '@prosekit/testing'
+import { onCleanup, onMount, type Component } from 'solid-js'
+import { beforeEach, describe, expect, it } from 'vitest'
+import { render } from 'vitest-browser-solid'
+import { page } from 'vitest/browser'
+
+import { ProseKit } from '../components/prosekit.ts'
+
+import { defineSolidNodeView, type SolidNodeViewComponent, type SolidNodeViewProps } from './solid-node-view.ts'
+
+describe('SolidNodeView', () => {
+  const initialState = {
+    imageRefresh: {
+      mounted: 0,
+      unmounted: 0,
+      setAttrs: 0,
+    },
+  }
+
+  let state = structuredClone(initialState)
+
+  beforeEach(() => {
+    state = structuredClone(initialState)
+  })
+
+  function defineExtension() {
+    return union(
+      defineTestExtension(),
+      defineSolidNodeView({
+        name: 'image',
+        component: ImageRefreshView satisfies SolidNodeViewComponent,
+      }),
+    )
+  }
+
+  const ImageRefreshView: Component<SolidNodeViewProps> = (props) => {
+    const url = () => (props.node.attrs as ImageAttrs).src
+
+    onMount(() => {
+      state.imageRefresh.mounted++
+      const id = setInterval(() => {
+        state.imageRefresh.setAttrs++
+        props.setAttrs({ src: String(Math.random()) })
+      }, 50)
+      onCleanup(() => {
+        state.imageRefresh.unmounted++
+        clearInterval(id)
+      })
+    })
+
+    return <div data-testid="image-refresh-view" data-url={url()}></div>
+  }
+
+  const TestEditor: Component<{ initialContent?: NodeJSON }> = (props) => {
+    const editor = createEditor({
+      extension: defineExtension(),
+      defaultContent: props.initialContent,
+    })
+
+    onCleanup(() => editor.mount(null))
+
+    return (
+      <ProseKit editor={editor}>
+        <div data-testid="editor" ref={editor.mount}></div>
+      </ProseKit>
+    )
+  }
+
+  const paragraphJSON: NodeJSON = {
+    type: 'paragraph',
+    content: [{ type: 'text', text: 'Hello' }],
+  }
+  const imageRefreshJSON: NodeJSON = {
+    type: 'image',
+  }
+
+  const editor = page.getByTestId('editor')
+  const imageRefresh = page.getByTestId('image-refresh-view')
+
+  it('can render a single self-update image node', async () => {
+    const initialContent: NodeJSON = {
+      type: 'doc',
+      content: [imageRefreshJSON, paragraphJSON],
+    }
+    const screen = render(() => <TestEditor initialContent={initialContent} />)
+    await expect.element(editor).toBeVisible()
+    await expect.element(imageRefresh).toBeInTheDocument()
+
+    const urls = new Set<string>()
+    const check = () => {
+      imageRefresh.elements().forEach((element) => {
+        const url = element.getAttribute('data-url')
+        if (url) {
+          urls.add(url)
+        }
+      })
+      return urls.size >= 5
+    }
+
+    await expect.poll(check, { interval: 50, timeout: 30_000 }).toBe(true)
+
+    screen.unmount()
+
+    expect(state.imageRefresh.setAttrs).toBeGreaterThanOrEqual(5)
+    expect(state.imageRefresh.mounted).toBe(1)
+    expect(state.imageRefresh.unmounted).toBe(1)
+  })
+
+  it('can render multiple self-update image nodes', async () => {
+    const initialContent: NodeJSON = {
+      type: 'doc',
+      content: [imageRefreshJSON, paragraphJSON, imageRefreshJSON, imageRefreshJSON],
+    }
+    const screen = render(() => <TestEditor initialContent={initialContent} />)
+    await expect.element(editor).toBeVisible()
+    await expect.element(imageRefresh.nth(0)).toBeInTheDocument()
+    await expect.element(imageRefresh.nth(1)).toBeInTheDocument()
+    await expect.element(imageRefresh.nth(2)).toBeInTheDocument()
+    await expect.element(imageRefresh.nth(3)).not.toBeInTheDocument()
+
+    const urls = new Set<string>()
+    const check = () => {
+      imageRefresh.elements().forEach((element) => {
+        const url = element.getAttribute('data-url')
+        if (url) {
+          urls.add(url)
+        }
+      })
+      return urls.size >= 15
+    }
+
+    await expect.poll(check, { interval: 50, timeout: 30_000 }).toBe(true)
+
+    screen.unmount()
+
+    expect(state.imageRefresh.setAttrs).toBeGreaterThanOrEqual(15)
+    expect(state.imageRefresh.mounted).toBe(3)
+    expect(state.imageRefresh.unmounted).toBe(3)
+  })
+})

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

@@ -36,13 +36,36 @@ export interface SolidNodeViewOptions extends CoreNodeViewUserOptions<SolidNodeV
 class ProseKitSolidNodeView extends AbstractSolidNodeView<SolidNodeViewComponent> {
   render = (): JSX.Element => {
     const UserComponent = this.component
-    const getProps = this.context
+    const getProps: () => SolidNodeViewProps = this.context
+    const props: SolidNodeViewProps = {
+      get contentRef() {
+        return getProps().contentRef
+      },
+      get view() {
+        return getProps().view
+      },
+      get getPos() {
+        return getProps().getPos
+      },
+      get setAttrs() {
+        return getProps().setAttrs
+      },
+      get node() {
+        return getProps().node
+      },
+      get selected() {
+        return getProps().selected
+      },
+      get decorations() {
+        return getProps().decorations
+      },
+      get innerDecorations() {
+        return getProps().innerDecorations
+      },
+    }
     return createComponent(Portal, {
       mount: this.dom,
-      get children() {
-        const props: SolidNodeViewProps = getProps()
-        return createComponent(UserComponent, props)
-      },
+      children: createComponent(UserComponent, props),
       ref: hidePortalDiv,
     })
   }