@prosekit/solid 0.6.7 → 0.6.8

package/dist/prosekit-solid.js

@@ -1,82 +1,39 @@
-import { n as useEditorContext, t as EditorContextProvider } from "./editor-context-CAdqwRwB.js";
-import { ProsemirrorAdapterProvider, useMarkViewContext, useMarkViewFactory, useNodeViewContext, useNodeViewFactory } from "@prosemirror-adapter/solid";
+import { n as useEditorContext, t as EditorContextProvider } from "./editor-context.js";
 import { createComponent, createEffect, createMemo, createSignal, onCleanup } from "solid-js";
 import { EditorNotFoundError, ProseKitError, defineDocChangeHandler, defineKeymap, defineMarkViewComponent, defineMarkViewFactory, defineMountHandler, defineNodeViewComponent, defineNodeViewFactory, defineUpdateHandler, union, withPriority } from "@prosekit/core";
-
-//#region src/utils/to-value.ts
-/**
-* Accesses the value of a MaybeAccessor
-*
-* @example
-* ```ts
-* access("foo") // => "foo"
-* access(() => "foo") // => "foo"
-* ```
-*/
-function toValue(v) {
-	return typeof v === "function" ? v() : v;
-}
-
-//#endregion
-//#region src/hooks/use-editor-extension.ts
-/**
-* @internal
-*/
-function useEditorExtension(editorAccessor, extensionAccessor) {
-	const editorContext = useEditorContext();
-	createEffect(() => {
-		const editor = toValue(editorAccessor) || toValue(editorContext);
-		const extension = extensionAccessor();
-		if (!editor) throw new EditorNotFoundError();
-		if (extension) onCleanup(editor.use(extension));
-	});
+import { AbstractSolidMarkView, AbstractSolidNodeView, buildSolidMarkViewCreator, buildSolidNodeViewCreator, useSolidRenderer } from "@prosemirror-adapter/solid";
+import { Portal } from "solid-js/web";
+//#region src/extensions/helpers.ts
+function hidePortalDiv(el) {
+	el.style.display = "contents";
+	el.dataset.solidPortal = "true";
 }
-
-//#endregion
-//#region src/hooks/use-priority-extension.ts
-/**
-* @internal
-*/
-function usePriorityExtension(extension, priority) {
-	return () => {
-		const ext = extension();
-		return ext && priority ? withPriority(ext, priority) : ext;
-	};
-}
-
-//#endregion
-//#region src/hooks/use-extension.ts
-/**
-* Add an extension to the editor.
-*/
-function useExtension(extension, options) {
-	useEditorExtension(options?.editor, usePriorityExtension(extension, options?.priority));
-}
-
 //#endregion
 //#region src/extensions/solid-mark-view.ts
-function withMarkViewProps(component) {
-	return function MarkViewPropsWrapper() {
-		const context = useMarkViewContext();
-		return createComponent(component, {
-			get contentRef() {
-				return context().contentRef;
-			},
-			get view() {
-				return context().view;
-			},
-			get mark() {
-				return context().mark;
-			}
-		});
-	};
-}
+var ProseKitSolidMarkView = class extends AbstractSolidMarkView {
+	constructor(..._args) {
+		super(..._args);
+		this.render = () => {
+			const UserComponent = this.component;
+			const getProps = this.context;
+			return createComponent(Portal, {
+				mount: this.dom,
+				get children() {
+					return createComponent(UserComponent, getProps());
+				},
+				ref: hidePortalDiv
+			});
+		};
+	}
+};
 /**
 * @internal
 */
-function consumeSolidMarkViews() {
-	const markViewFactory = useMarkViewFactory();
-	useExtension(createMemo(() => defineSolidMarkViewFactory(markViewFactory), [markViewFactory]));
+function defineSolidMarkViewFactory(renderSolidRenderer, removeSolidRenderer) {
+	return defineMarkViewFactory({
+		group: "solid",
+		factory: buildSolidMarkViewCreator(renderSolidRenderer, removeSolidRenderer, ProseKitSolidMarkView)
+	});
 }
 /**
 * Defines a mark view using a Solid component.
@@ -84,62 +41,38 @@ function consumeSolidMarkViews() {
 * @public
 */
 function defineSolidMarkView(options) {
-	const { name, component, ...userOptions } = options;
 	return defineMarkViewComponent({
 		group: "solid",
-		name,
-		args: {
-			...userOptions,
-			component: withMarkViewProps(component)
-		}
+		name: options.name,
+		args: options
 	});
 }
-function defineSolidMarkViewFactory(factory) {
-	return defineMarkViewFactory({
-		group: "solid",
-		factory
-	});
-}
-
 //#endregion
 //#region src/extensions/solid-node-view.ts
-function withNodeViewProps(component) {
-	return function NodeViewPropsWrapper() {
-		const context = useNodeViewContext();
-		return createComponent(component, {
-			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;
-			}
-		});
-	};
-}
+var ProseKitSolidNodeView = class extends AbstractSolidNodeView {
+	constructor(..._args) {
+		super(..._args);
+		this.render = () => {
+			const UserComponent = this.component;
+			const getProps = this.context;
+			return createComponent(Portal, {
+				mount: this.dom,
+				get children() {
+					return createComponent(UserComponent, getProps());
+				},
+				ref: hidePortalDiv
+			});
+		};
+	}
+};
 /**
 * @internal
 */
-function consumeSolidNodeViews() {
-	const nodeViewFactory = useNodeViewFactory();
-	useExtension(createMemo(() => defineSolidNodeViewFactory(nodeViewFactory), [nodeViewFactory]));
+function defineSolidNodeViewFactory(renderSolidRenderer, removeSolidRenderer) {
+	return defineNodeViewFactory({
+		group: "solid",
+		factory: buildSolidNodeViewCreator(renderSolidRenderer, removeSolidRenderer, ProseKitSolidNodeView)
+	});
 }
 /**
 * Defines a node view using a Solid component.
@@ -147,23 +80,48 @@ function consumeSolidNodeViews() {
 * @public
 */
 function defineSolidNodeView(options) {
-	const { name, component, ...userOptions } = options;
 	return defineNodeViewComponent({
 		group: "solid",
-		name,
-		args: {
-			...userOptions,
-			component: withNodeViewProps(component)
-		}
+		name: options.name,
+		args: options
 	});
 }
-function defineSolidNodeViewFactory(factory) {
-	return defineNodeViewFactory({
-		group: "solid",
-		factory
+//#endregion
+//#region src/utils/to-value.ts
+/**
+* Accesses the value of a MaybeAccessor
+*
+* @example
+* ```ts
+* access("foo") // => "foo"
+* access(() => "foo") // => "foo"
+* ```
+*/
+function toValue(v) {
+	return typeof v === "function" ? v() : v;
+}
+//#endregion
+//#region src/hooks/use-editor-extension.ts
+/**
+* @internal
+*/
+function useEditorExtension(editorAccessor, extensionAccessor) {
+	const editorContext = useEditorContext();
+	createEffect(() => {
+		const editor = toValue(editorAccessor) || toValue(editorContext);
+		const extension = extensionAccessor();
+		if (!editor) throw new EditorNotFoundError();
+		if (extension) onCleanup(editor.use(extension));
 	});
 }
-
+//#endregion
+//#region src/components/view-renderer.ts
+const ViewRenderer = (props) => {
+	const { renderSolidRenderer, removeSolidRenderer, render } = useSolidRenderer();
+	const extension = union([defineSolidMarkViewFactory(renderSolidRenderer, removeSolidRenderer), defineSolidNodeViewFactory(renderSolidRenderer, removeSolidRenderer)]);
+	useEditorExtension(() => props.editor, () => extension);
+	return [props.children, render];
+};
 //#endregion
 //#region src/components/prosekit.ts
 /**
@@ -177,15 +135,36 @@ const ProseKit = (props) => {
 			return props.editor;
 		},
 		get children() {
-			return createComponent(ProsemirrorAdapterProvider, { get children() {
-				consumeSolidNodeViews();
-				consumeSolidMarkViews();
-				return props.children;
-			} });
+			return createComponent(ViewRenderer, {
+				get editor() {
+					return props.editor;
+				},
+				get children() {
+					return props.children;
+				}
+			});
 		}
 	});
 };
-
+//#endregion
+//#region src/hooks/use-priority-extension.ts
+/**
+* @internal
+*/
+function usePriorityExtension(extension, priority) {
+	return () => {
+		const ext = extension();
+		return ext && priority ? withPriority(ext, priority) : ext;
+	};
+}
+//#endregion
+//#region src/hooks/use-extension.ts
+/**
+* Add an extension to the editor.
+*/
+function useExtension(extension, options) {
+	useEditorExtension(options?.editor, usePriorityExtension(extension, options?.priority));
+}
 //#endregion
 //#region src/hooks/use-doc-change.ts
 /**
@@ -197,7 +176,6 @@ function useDocChange(handler, options) {
 	const extension = defineDocChangeHandler((view) => handler(view.state.doc));
 	useExtension(() => extension, options);
 }
-
 //#endregion
 //#region src/hooks/use-editor.ts
 /**
@@ -228,7 +206,6 @@ function useEditor(options) {
 function useForceUpdate() {
 	return createSignal(void 0, { equals: false });
 }
-
 //#endregion
 //#region src/hooks/use-editor-derived-value.ts
 /**
@@ -248,14 +225,12 @@ function useEditorDerivedValue(derive, options) {
 	const editorAccessor = initialEditor ? () => toValue(initialEditor) : useEditor({ update: true });
 	return createMemo(() => derive(editorAccessor()));
 }
-
 //#endregion
 //#region src/hooks/use-keymap.ts
 function useKeymap(keymap, options) {
 	const extension = () => defineKeymap(keymap());
 	useExtension(extension, options);
 }
-
 //#endregion
 //#region src/hooks/use-state-update.ts
 /**
@@ -267,7 +242,7 @@ function useStateUpdate(handler, options) {
 	const extension = defineUpdateHandler((view) => handler(view.state));
 	useExtension(() => extension, options);
 }
-
 //#endregion
 export { ProseKit, defineSolidMarkView, defineSolidNodeView, useDocChange, useEditor, useEditorDerivedValue, useExtension, useKeymap, useStateUpdate };
+
 //# sourceMappingURL=prosekit-solid.js.map

package/dist/prosekit-solid.js.map

@@ -1 +1 @@
-{"version":3,"file":"prosekit-solid.js","names":[],"sources":["../src/utils/to-value.ts","../src/hooks/use-editor-extension.ts","../src/hooks/use-priority-extension.ts","../src/hooks/use-extension.ts","../src/extensions/solid-mark-view.ts","../src/extensions/solid-node-view.ts","../src/components/prosekit.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":["/**\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 { 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 { defineMarkViewComponent, defineMarkViewFactory, type Extension } from '@prosekit/core'\nimport type { MarkViewConstructor } from '@prosekit/pm/view'\nimport type { CoreMarkViewUserOptions } from '@prosemirror-adapter/core'\nimport {\n  useMarkViewContext,\n  useMarkViewFactory,\n  type MarkViewContextProps,\n  type SolidMarkViewUserOptions,\n} from '@prosemirror-adapter/solid'\nimport { createComponent, createMemo, type Accessor, type Component } from 'solid-js'\n\nimport { useExtension } from '../hooks/use-extension.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\nfunction withMarkViewProps(\n  component: SolidMarkViewComponent,\n): Component<SolidMarkViewProps> {\n  return function MarkViewPropsWrapper() {\n    const context: Accessor<SolidMarkViewProps> = useMarkViewContext()\n    const props: SolidMarkViewProps = {\n      get contentRef() {\n        return context().contentRef\n      },\n      get view() {\n        return context().view\n      },\n      get mark() {\n        return context().mark\n      },\n    }\n    return createComponent(component, props)\n  }\n}\n\n/**\n * @internal\n */\nexport function consumeSolidMarkViews(): void {\n  const markViewFactory = useMarkViewFactory()\n  const extension = createMemo(\n    () => defineSolidMarkViewFactory(markViewFactory),\n    [markViewFactory],\n  )\n\n  useExtension(extension)\n}\n\n/**\n * Defines a mark view using a Solid component.\n *\n * @public\n */\nexport function defineSolidMarkView(options: SolidMarkViewOptions): Extension {\n  const { name, component, ...userOptions } = options\n\n  const args: SolidMarkViewUserOptions = {\n    ...userOptions,\n    component: withMarkViewProps(component),\n  }\n\n  return defineMarkViewComponent<SolidMarkViewUserOptions>({\n    group: 'solid',\n    name,\n    args,\n  })\n}\n\nfunction defineSolidMarkViewFactory(\n  factory: (options: SolidMarkViewOptions) => MarkViewConstructor,\n) {\n  return defineMarkViewFactory<SolidMarkViewOptions>({\n    group: 'solid',\n    factory,\n  })\n}\n","import { defineNodeViewComponent, defineNodeViewFactory, type Extension } from '@prosekit/core'\nimport type { NodeViewConstructor } from '@prosekit/pm/view'\nimport type { CoreNodeViewUserOptions } from '@prosemirror-adapter/core'\nimport {\n  useNodeViewContext,\n  useNodeViewFactory,\n  type NodeViewContextProps,\n  type SolidNodeViewUserOptions,\n} from '@prosemirror-adapter/solid'\nimport { createComponent, createMemo, type Accessor, type Component } from 'solid-js'\n\nimport { useExtension } from '../hooks/use-extension.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\nfunction withNodeViewProps(\n  component: SolidNodeViewComponent,\n): Component<SolidNodeViewProps> {\n  return function NodeViewPropsWrapper() {\n    const context: Accessor<SolidNodeViewProps> = useNodeViewContext()\n    const props: SolidNodeViewProps = {\n      get contentRef() {\n        return context().contentRef\n      },\n      get view() {\n        return context().view\n      },\n      get getPos() {\n        return context().getPos\n      },\n      get setAttrs() {\n        return context().setAttrs\n      },\n      get node() {\n        return context().node\n      },\n      get selected() {\n        return context().selected\n      },\n      get decorations() {\n        return context().decorations\n      },\n      get innerDecorations() {\n        return context().innerDecorations\n      },\n    }\n    return createComponent(component, props)\n  }\n}\n\n/**\n * @internal\n */\nexport function consumeSolidNodeViews(): void {\n  const nodeViewFactory = useNodeViewFactory()\n  const extension = createMemo(\n    () => defineSolidNodeViewFactory(nodeViewFactory),\n    [nodeViewFactory],\n  )\n\n  useExtension(extension)\n}\n\n/**\n * Defines a node view using a Solid component.\n *\n * @public\n */\nexport function defineSolidNodeView(options: SolidNodeViewOptions): Extension {\n  const { name, component, ...userOptions } = options\n\n  const args: SolidNodeViewUserOptions = {\n    ...userOptions,\n    component: withNodeViewProps(component),\n  }\n\n  return defineNodeViewComponent<SolidNodeViewUserOptions>({\n    group: 'solid',\n    name,\n    args,\n  })\n}\n\nfunction defineSolidNodeViewFactory(\n  factory: (options: SolidNodeViewOptions) => NodeViewConstructor,\n) {\n  return defineNodeViewFactory<SolidNodeViewOptions>({\n    group: 'solid',\n    factory,\n  })\n}\n","import type { Editor } from '@prosekit/core'\nimport { ProsemirrorAdapterProvider } from '@prosemirror-adapter/solid'\nimport { createComponent, type Component, type ParentProps } from 'solid-js'\n\nimport { EditorContextProvider } from '../contexts/editor-context.ts'\nimport { consumeSolidMarkViews } from '../extensions/solid-mark-view.ts'\nimport { consumeSolidNodeViews } from '../extensions/solid-node-view.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(ProsemirrorAdapterProvider, {\n        get children() {\n          consumeSolidNodeViews()\n          consumeSolidMarkViews()\n          return props.children\n        },\n      })\n    },\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 = 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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"}

package/dist/{types-Bx9mKDTJ.d.ts → types.d.ts}

@@ -23,4 +23,4 @@ type PropsWithElement<Props extends object, CustomElement extends HTMLElement> =
 type MaybeAccessor<T> = T | Accessor<T>;
 //#endregion
 export { PropsWithElement as i, PropsWithChildren as n, PropsWithClass as r, MaybeAccessor as t };
-//# sourceMappingURL=types-Bx9mKDTJ.d.ts.map
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","names":[],"sources":["../src/types.ts"],"mappings":";;;;;AAKA;KAAY,cAAA,gBAA8B,CAAA;EACxC,KAAA;AAAA;;;;KAMU,iBAAA,gBAAiC,CAAA;EAC3C,QAAA,GAAW,UAAA;AAAA;;;;KAMD,gBAAA,6CAA6D,WAAA,IAAe,KAAA,GAAQ,GAAA,CAAI,cAAA,CAAe,aAAA;;;;KAKvG,aAAA,MAAmB,CAAA,GAAI,QAAA,CAAS,CAAA"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@prosekit/solid",
   "type": "module",
-  "version": "0.6.7",
+  "version": "0.6.8",
   "private": false,
   "description": "Solid components and utilities for ProseKit",
   "author": {
@@ -68,11 +68,11 @@
     "src"
   ],
   "dependencies": {
-    "@prosemirror-adapter/core": "^0.4.6",
-    "@prosemirror-adapter/solid": "^0.4.6",
-    "@prosekit/core": "^0.10.0",
-    "@prosekit/web": "^0.7.12",
-    "@prosekit/pm": "^0.1.15"
+    "@prosemirror-adapter/core": "^0.5.2",
+    "@prosemirror-adapter/solid": "^0.5.2",
+    "@prosekit/core": "^0.11.0",
+    "@prosekit/pm": "^0.1.15",
+    "@prosekit/web": "^0.7.13"
   },
   "peerDependencies": {
     "solid-js": ">= 1.7.0"
@@ -84,10 +84,10 @@
   },
   "devDependencies": {
     "solid-js": "^1.9.11",
-    "tsdown": "^0.20.3",
+    "tsdown": "^0.21.4",
     "typescript": "~5.9.3",
-    "@prosekit/config-vitest": "0.0.0",
     "@prosekit/config-ts": "0.0.0",
+    "@prosekit/config-vitest": "0.0.0",
     "@prosekit/config-tsdown": "0.0.0"
   },
   "publishConfig": {

package/src/components/prosekit.ts

@@ -1,10 +1,9 @@
 import type { Editor } from '@prosekit/core'
-import { ProsemirrorAdapterProvider } from '@prosemirror-adapter/solid'
 import { createComponent, type Component, type ParentProps } from 'solid-js'
 
 import { EditorContextProvider } from '../contexts/editor-context.ts'
-import { consumeSolidMarkViews } from '../extensions/solid-mark-view.ts'
-import { consumeSolidNodeViews } from '../extensions/solid-node-view.ts'
+
+import { ViewRenderer } from './view-renderer.ts'
 
 export type ProseKitProps = ParentProps<{
   editor: Editor
@@ -21,10 +20,11 @@ export const ProseKit: Component<ProseKitProps> = (props) => {
       return props.editor
     },
     get children() {
-      return createComponent(ProsemirrorAdapterProvider, {
+      return createComponent(ViewRenderer, {
+        get editor() {
+          return props.editor
+        },
         get children() {
-          consumeSolidNodeViews()
-          consumeSolidMarkViews()
           return props.children
         },
       })

package/src/components/view-renderer.ts

@@ -0,0 +1,24 @@
+import { union, type Editor } from '@prosekit/core'
+import { useSolidRenderer } from '@prosemirror-adapter/solid'
+import type { Component, JSX, ParentProps } from 'solid-js'
+
+import { defineSolidMarkViewFactory } from '../extensions/solid-mark-view.ts'
+import { defineSolidNodeViewFactory } from '../extensions/solid-node-view.ts'
+import { useEditorExtension } from '../hooks/use-editor-extension.ts'
+
+type ViewRendererProps = ParentProps<{
+  editor: Editor
+}>
+
+export const ViewRenderer: Component<ViewRendererProps> = (props): JSX.Element => {
+  const { renderSolidRenderer, removeSolidRenderer, render } = useSolidRenderer()
+
+  const extension = union([
+    defineSolidMarkViewFactory(renderSolidRenderer, removeSolidRenderer),
+    defineSolidNodeViewFactory(renderSolidRenderer, removeSolidRenderer),
+  ])
+
+  useEditorExtension(() => props.editor, () => extension)
+
+  return [props.children, render] as unknown as JSX.Element
+}

package/src/extensions/helpers.ts

@@ -0,0 +1,4 @@
+export function hidePortalDiv(el: HTMLElement): void {
+  el.style.display = 'contents'
+  el.dataset.solidPortal = 'true'
+}

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

@@ -1,15 +1,15 @@
 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,
+  AbstractSolidMarkView,
+  buildSolidMarkViewCreator,
   type MarkViewContextProps,
-  type SolidMarkViewUserOptions,
+  type SolidRendererResult,
 } from '@prosemirror-adapter/solid'
-import { createComponent, createMemo, type Accessor, type Component } from 'solid-js'
+import { createComponent, type Component, type JSX } from 'solid-js'
+import { Portal } from 'solid-js/web'
 
-import { useExtension } from '../hooks/use-extension.ts'
+import { hidePortalDiv } from './helpers.ts'
 
 /**
  * @public
@@ -33,37 +33,33 @@ export interface SolidMarkViewOptions extends CoreMarkViewUserOptions<SolidMarkV
   name: string
 }
 
-function withMarkViewProps(
-  component: SolidMarkViewComponent,
-): Component<SolidMarkViewProps> {
-  return function MarkViewPropsWrapper() {
-    const context: Accessor<SolidMarkViewProps> = useMarkViewContext()
-    const props: SolidMarkViewProps = {
-      get contentRef() {
-        return context().contentRef
+class ProseKitSolidMarkView extends AbstractSolidMarkView<SolidMarkViewComponent> {
+  render = (): JSX.Element => {
+    const UserComponent = this.component
+    const getProps = this.context
+    return createComponent(Portal, {
+      mount: this.dom,
+      get children() {
+        const props: MarkViewContextProps = getProps()
+        return createComponent(UserComponent, props)
       },
-      get view() {
-        return context().view
-      },
-      get mark() {
-        return context().mark
-      },
-    }
-    return createComponent(component, props)
+      ref: hidePortalDiv,
+    })
   }
 }
 
 /**
  * @internal
  */
-export function consumeSolidMarkViews(): void {
-  const markViewFactory = useMarkViewFactory()
-  const extension = createMemo(
-    () => defineSolidMarkViewFactory(markViewFactory),
-    [markViewFactory],
-  )
-
-  useExtension(extension)
+export function defineSolidMarkViewFactory(
+  renderSolidRenderer: SolidRendererResult['renderSolidRenderer'],
+  removeSolidRenderer: SolidRendererResult['removeSolidRenderer'],
+): Extension {
+  const factory = buildSolidMarkViewCreator(renderSolidRenderer, removeSolidRenderer, ProseKitSolidMarkView)
+  return defineMarkViewFactory<SolidMarkViewOptions>({
+    group: 'solid',
+    factory,
+  })
 }
 
 /**
@@ -72,25 +68,9 @@ export function consumeSolidMarkViews(): void {
  * @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>({
+  return defineMarkViewComponent<SolidMarkViewOptions>({
     group: 'solid',
-    factory,
+    name: options.name,
+    args: options,
   })
 }