@prosekit/solid 0.3.26 → 0.3.28

package/dist/_tsup-dts-rollup.d.ts

@@ -1,4 +1,5 @@
 import { Accessor } from 'solid-js';
+import type { Attrs } from '@prosekit/pm/model';
 import { AutocompleteEmptyElement } from '@prosekit/web/autocomplete';
 import { AutocompleteEmptyProps } from '@prosekit/web/autocomplete';
 import { AutocompleteItemElement } from '@prosekit/web/autocomplete';
@@ -7,6 +8,7 @@ import { AutocompleteListElement } from '@prosekit/web/autocomplete';
 import { AutocompleteListProps } from '@prosekit/web/autocomplete';
 import { AutocompletePopoverElement } from '@prosekit/web/autocomplete';
 import { AutocompletePopoverProps } from '@prosekit/web/autocomplete';
+import { BaseNodeViewOptions } from '@prosekit/core';
 import { BlockDragHandleElement } from '@prosekit/web/block-handle';
 import { BlockDragHandleProps } from '@prosekit/web/block-handle';
 import { BlockHandleAddElement } from '@prosekit/web/block-handle';
@@ -19,9 +21,12 @@ import { BlockPopoverElement } from '@prosekit/web/block-handle';
 import { BlockPopoverProps } from '@prosekit/web/block-handle';
 import { Component } from 'solid-js';
 import { ContextProviderComponent } from 'solid-js';
+import type { Decoration } from '@prosekit/pm/view';
+import type { DecorationSource } from '@prosekit/pm/view';
 import { config as default_alias_1 } from '@prosekit/dev/config-vitest';
 import { Editor } from '@prosekit/core';
 import type { EditorState } from '@prosekit/pm/state';
+import type { EditorView } from '@prosekit/pm/view';
 import { Extension } from '@prosekit/core';
 import { InlinePopoverElement } from '@prosekit/web/inline-popover';
 import { InlinePopoverProps } from '@prosekit/web/inline-popover';
@@ -99,12 +104,26 @@ declare const BlockPopover: Component<Partial<BlockPopoverProps> & JSX<BlockPopo
 export { BlockPopover }
 export { BlockPopover as BlockPopover_alias_1 }
 
+/**
+ * @internal
+ */
+export declare function consumeSolidViews(): void;
+
 export declare function createComponent<Props extends object, CustomElement extends HTMLElement>(tagName: string, defaultProps: Props): Component<Partial<Props> & JSX.HTMLAttributes<CustomElement>>;
 
 export declare const default_alias: Options | Options[] | ((overrideOptions: Options) => Options | Options[] | Promise<Options | Options[]>);
 
 export { default_alias_1 }
 
+/**
+ * Defines a node view using a Solid component.
+ *
+ * @public
+ */
+declare function defineSolidNodeView(options: SolidNodeViewOptions): Extension;
+export { defineSolidNodeView }
+export { defineSolidNodeView as defineSolidNodeView_alias_1 }
+
 /**
  * @internal
  */
@@ -190,6 +209,47 @@ declare const ResizableRoot: Component<Partial<ResizableRootProps> & JSX<Resizab
 export { ResizableRoot }
 export { ResizableRoot as ResizableRoot_alias_1 }
 
+/**
+ * @public
+ */
+declare type SolidNodeViewComponent = Component<SolidNodeViewProps>;
+export { SolidNodeViewComponent }
+export { SolidNodeViewComponent as SolidNodeViewComponent_alias_1 }
+
+/**
+ * Options for {@link defineSolidNodeView}.
+ *
+ * @public
+ */
+declare interface SolidNodeViewOptions extends BaseNodeViewOptions {
+    /**
+     * The name of the node type.
+     */
+    name: string;
+    /**
+     * The Solid component to render the node.
+     */
+    component: SolidNodeViewComponent;
+}
+export { SolidNodeViewOptions }
+export { SolidNodeViewOptions as SolidNodeViewOptions_alias_1 }
+
+/**
+ * @public
+ */
+declare interface SolidNodeViewProps {
+    contentRef: (node: HTMLElement | null) => void;
+    view: EditorView;
+    getPos: () => number | undefined;
+    setAttrs: (attrs: Attrs) => void;
+    node: ProseMirrorNode;
+    selected: boolean;
+    decorations: readonly Decoration[];
+    innerDecorations: DecorationSource;
+}
+export { SolidNodeViewProps }
+export { SolidNodeViewProps as SolidNodeViewProps_alias_1 }
+
 declare const TableHandleColumnRoot: Component<Partial<TableHandleColumnRootProps> & JSX<TableHandleColumnRootElement>>;
 export { TableHandleColumnRoot }
 export { TableHandleColumnRoot as TableHandleColumnRoot_alias_1 }

package/dist/prosekit-solid.d.ts

@@ -9,3 +9,7 @@ export { useDocChange } from './_tsup-dts-rollup';
 export { MaybeAccessor } from './_tsup-dts-rollup';
 export { PropsWithChildren } from './_tsup-dts-rollup';
 export { PropsWithClass } from './_tsup-dts-rollup';
+export { defineSolidNodeView } from './_tsup-dts-rollup';
+export { SolidNodeViewComponent } from './_tsup-dts-rollup';
+export { SolidNodeViewOptions } from './_tsup-dts-rollup';
+export { SolidNodeViewProps } from './_tsup-dts-rollup';

package/dist/prosekit-solid.js

@@ -4,59 +4,28 @@ import {
 } from "./chunk-XXXIBXNC.js";
 
 // src/components/prosekit.ts
-import { createComponent } from "solid-js";
-var ProseKit = (props) => {
-  return createComponent(EditorContextProvider, {
-    get value() {
-      return props.editor;
-    },
-    get children() {
-      return props.children;
-    }
-  });
-};
+import { ProsemirrorAdapterProvider } from "@prosemirror-adapter/solid";
+import { createComponent as createComponent2 } from "solid-js";
 
-// src/hooks/use-editor.ts
+// src/extensions/solid-node-view.ts
 import {
-  ProseKitError,
-  defineMountHandler,
-  defineUpdateHandler,
-  union
+  defineNodeViewComponent,
+  defineNodeViewFactory
 } from "@prosekit/core";
-import { createEffect, createSignal } from "solid-js";
-function useEditor(options) {
-  var _a;
-  const update = (_a = options == null ? void 0 : options.update) != null ? _a : false;
-  const editor = useEditorContext();
-  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(void 0, { equals: false });
-}
+import {
+  useNodeViewContext,
+  useNodeViewFactory
+} from "@prosemirror-adapter/solid";
+import {
+  createComponent,
+  createMemo
+} from "solid-js";
 
 // src/hooks/use-editor-extension.ts
 import {
   EditorNotFoundError
 } from "@prosekit/core";
-import { createEffect as createEffect2, onCleanup } from "solid-js";
+import { createEffect, onCleanup } from "solid-js";
 
 // src/utils/to-value.ts
 function toValue(v) {
@@ -66,7 +35,7 @@ function toValue(v) {
 // src/hooks/use-editor-extension.ts
 function useEditorExtension(editorAccessor, extensionAccessor) {
   const editorContext = useEditorContext();
-  createEffect2(() => {
+  createEffect(() => {
     const editor = toValue(editorAccessor) || toValue(editorContext);
     const extension = extensionAccessor();
     if (!editor) {
@@ -95,6 +64,93 @@ function useExtension(extension, options) {
   );
 }
 
+// src/extensions/solid-node-view.ts
+function withNodeViewProps(component) {
+  return function NodeViewPropsWrapper() {
+    const props = useNodeViewContext();
+    return createComponent(component, props());
+  };
+}
+function consumeSolidViews() {
+  const nodeViewFactory = useNodeViewFactory();
+  const extension = createMemo(
+    () => defineSolidNodeViewFactory(nodeViewFactory),
+    [nodeViewFactory]
+  );
+  useExtension(extension);
+}
+function defineSolidNodeView(options) {
+  const { name, component, ...userOptions } = options;
+  const args = {
+    ...userOptions,
+    component: withNodeViewProps(component)
+  };
+  return defineNodeViewComponent({
+    group: "solid",
+    name,
+    args
+  });
+}
+function defineSolidNodeViewFactory(factory) {
+  return defineNodeViewFactory({
+    group: "solid",
+    factory
+  });
+}
+
+// src/components/prosekit.ts
+var ProseKit = (props) => {
+  return createComponent2(ProsemirrorAdapterProvider, {
+    get children() {
+      return createComponent2(EditorContextProvider, {
+        get value() {
+          return props.editor;
+        },
+        get children() {
+          consumeSolidViews();
+          return props.children;
+        }
+      });
+    }
+  });
+};
+
+// src/hooks/use-editor.ts
+import {
+  ProseKitError,
+  defineMountHandler,
+  defineUpdateHandler,
+  union
+} from "@prosekit/core";
+import { createEffect as createEffect2, createSignal } from "solid-js";
+function useEditor(options) {
+  var _a;
+  const update = (_a = options == null ? void 0 : options.update) != null ? _a : false;
+  const editor = useEditorContext();
+  if (!editor) {
+    throw new ProseKitError(
+      "useEditor must be used within the ProseKit component"
+    );
+  }
+  const [depend, forceUpdate] = useForceUpdate();
+  createEffect2(() => {
+    if (update) {
+      const extension = union(
+        defineMountHandler(forceUpdate),
+        defineUpdateHandler(forceUpdate)
+      );
+      return editor.use(extension);
+    }
+  }, [editor, update, forceUpdate]);
+  return () => {
+    depend();
+    return editor;
+  };
+}
+function useForceUpdate() {
+  return createSignal(void 0, { equals: false });
+}
+
 // src/hooks/use-keymap.ts
 import { defineKeymap } from "@prosekit/core";
 function useKeymap(keymap, options) {
@@ -117,6 +173,7 @@ function useDocChange(handler, options) {
 }
 export {
   ProseKit,
+  defineSolidNodeView,
   useDocChange,
   useEditor,
   useExtension,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@prosekit/solid",
   "type": "module",
-  "version": "0.3.26",
+  "version": "0.3.28",
   "private": false,
   "author": {
     "name": "ocavue",
@@ -70,9 +70,10 @@
     "dist"
   ],
   "dependencies": {
+    "@prosemirror-adapter/solid": "^0.2.6",
     "@prosekit/core": "^0.7.11",
     "@prosekit/pm": "^0.1.8",
-    "@prosekit/web": "^0.3.16"
+    "@prosekit/web": "^0.3.18"
   },
   "peerDependencies": {
     "solid-js": ">= 1.7.0"
@@ -84,9 +85,9 @@
   },
   "devDependencies": {
     "solid-js": "^1.8.22",
-    "tsup": "^8.2.4",
-    "typescript": "^5.5.4",
-    "vitest": "^2.0.5",
+    "tsup": "^8.3.0",
+    "typescript": "^5.6.2",
+    "vitest": "^2.1.1",
     "@prosekit/dev": "0.0.0"
   },
   "scripts": {