@prosekit/solid 0.6.7 → 0.7.0-beta.0

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

@@ -1,15 +1,15 @@
 import { defineNodeViewComponent, defineNodeViewFactory, type Extension } from '@prosekit/core'
-import type { NodeViewConstructor } from '@prosekit/pm/view'
 import type { CoreNodeViewUserOptions } from '@prosemirror-adapter/core'
 import {
-  useNodeViewContext,
-  useNodeViewFactory,
+  AbstractSolidNodeView,
+  buildSolidNodeViewCreator,
   type NodeViewContextProps,
-  type SolidNodeViewUserOptions,
+  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,52 +33,33 @@ export interface SolidNodeViewOptions extends CoreNodeViewUserOptions<SolidNodeV
   name: string
 }
 
-function withNodeViewProps(
-  component: SolidNodeViewComponent,
-): Component<SolidNodeViewProps> {
-  return function NodeViewPropsWrapper() {
-    const context: Accessor<SolidNodeViewProps> = useNodeViewContext()
-    const props: SolidNodeViewProps = {
-      get contentRef() {
-        return context().contentRef
+class ProseKitSolidNodeView extends AbstractSolidNodeView<SolidNodeViewComponent> {
+  render = (): JSX.Element => {
+    const UserComponent = this.component
+    const getProps = this.context
+    return createComponent(Portal, {
+      mount: this.dom,
+      get children() {
+        const props: SolidNodeViewProps = getProps()
+        return createComponent(UserComponent, props)
       },
-      get view() {
-        return context().view
-      },
-      get getPos() {
-        return context().getPos
-      },
-      get setAttrs() {
-        return context().setAttrs
-      },
-      get node() {
-        return context().node
-      },
-      get selected() {
-        return context().selected
-      },
-      get decorations() {
-        return context().decorations
-      },
-      get innerDecorations() {
-        return context().innerDecorations
-      },
-    }
-    return createComponent(component, props)
+      ref: hidePortalDiv,
+    })
   }
 }
 
 /**
  * @internal
  */
-export function consumeSolidNodeViews(): void {
-  const nodeViewFactory = useNodeViewFactory()
-  const extension = createMemo(
-    () => defineSolidNodeViewFactory(nodeViewFactory),
-    [nodeViewFactory],
-  )
-
-  useExtension(extension)
+export function defineSolidNodeViewFactory(
+  renderSolidRenderer: SolidRendererResult['renderSolidRenderer'],
+  removeSolidRenderer: SolidRendererResult['removeSolidRenderer'],
+): Extension {
+  const factory = buildSolidNodeViewCreator(renderSolidRenderer, removeSolidRenderer, ProseKitSolidNodeView)
+  return defineNodeViewFactory<SolidNodeViewOptions>({
+    group: 'solid',
+    factory,
+  })
 }
 
 /**
@@ -87,25 +68,9 @@ export function consumeSolidNodeViews(): void {
  * @public
  */
 export function defineSolidNodeView(options: SolidNodeViewOptions): Extension {
-  const { name, component, ...userOptions } = options
-
-  const args: SolidNodeViewUserOptions = {
-    ...userOptions,
-    component: withNodeViewProps(component),
-  }
-
-  return defineNodeViewComponent<SolidNodeViewUserOptions>({
-    group: 'solid',
-    name,
-    args,
-  })
-}
-
-function defineSolidNodeViewFactory(
-  factory: (options: SolidNodeViewOptions) => NodeViewConstructor,
-) {
-  return defineNodeViewFactory<SolidNodeViewOptions>({
+  return defineNodeViewComponent<SolidNodeViewOptions>({
     group: 'solid',
-    factory,
+    name: options.name,
+    args: options,
   })
 }

package/dist/create-component-B7NzEJxP.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"create-component-B7NzEJxP.js","names":[],"sources":["../src/components/create-component.ts"],"sourcesContent":["import type { AnyFunction } from '@prosekit/core'\nimport type { Component } from 'solid-js'\nimport h from 'solid-js/h'\n\nimport { useEditorContext } from '../contexts/editor-context.ts'\nimport type { PropsWithElement } from '../types.ts'\n\nexport function createComponent<\n  Props extends object,\n  CustomElement extends HTMLElement,\n>(\n  tagName: string,\n  propNames: string[],\n  eventNames: string[],\n): Component<PropsWithElement<Props, CustomElement>> {\n  const hasEditor = propNames.includes('editor')\n  const lowerCaseEventNameMap = new Map(\n    eventNames.map((name) => [name.toLowerCase(), name]),\n  )\n\n  const Component = (props: Record<string, unknown>) => {\n    const properties: Record<string, () => unknown> = {}\n    const eventHandlers: Record<string, AnyFunction> = {}\n\n    for (const name of Object.keys(props)) {\n      if (propNames.includes(name)) {\n        properties['prop:' + name] = () => props[name]\n        continue\n      }\n\n      if (name.startsWith('on')) {\n        const lowerCaseEventName = name.slice(2).toLowerCase()\n        const eventName = lowerCaseEventNameMap.get(lowerCaseEventName)\n        if (eventName) {\n          const extractDetail = eventName.endsWith('Change')\n          eventHandlers['on:' + eventName] = (event: Event) => {\n            const handler = props[name] as AnyFunction | null\n            if (typeof handler === 'function') {\n              handler(extractDetail ? (event as CustomEvent).detail : event)\n            }\n          }\n          continue\n        }\n      }\n\n      properties[name] = () => props[name]\n    }\n\n    const editor = useEditorContext()\n\n    if (hasEditor && editor) {\n      properties['prop:editor'] = () => props['editor'] || editor\n    }\n\n    return () => h(tagName, { ...properties, ...eventHandlers })\n  }\n\n  // eslint-disable-next-line @typescript-eslint/no-unsafe-return\n  return Component as any\n}\n"],"mappings":";;;;AAOA,SAAgB,gBAId,SACA,WACA,YACmD;CACnD,MAAM,YAAY,UAAU,SAAS,SAAS;CAC9C,MAAM,wBAAwB,IAAI,IAChC,WAAW,KAAK,SAAS,CAAC,KAAK,aAAa,EAAE,KAAK,CAAC,CACrD;CAED,MAAM,aAAa,UAAmC;EACpD,MAAM,aAA4C,EAAE;EACpD,MAAM,gBAA6C,EAAE;AAErD,OAAK,MAAM,QAAQ,OAAO,KAAK,MAAM,EAAE;AACrC,OAAI,UAAU,SAAS,KAAK,EAAE;AAC5B,eAAW,UAAU,cAAc,MAAM;AACzC;;AAGF,OAAI,KAAK,WAAW,KAAK,EAAE;IACzB,MAAM,qBAAqB,KAAK,MAAM,EAAE,CAAC,aAAa;IACtD,MAAM,YAAY,sBAAsB,IAAI,mBAAmB;AAC/D,QAAI,WAAW;KACb,MAAM,gBAAgB,UAAU,SAAS,SAAS;AAClD,mBAAc,QAAQ,cAAc,UAAiB;MACnD,MAAM,UAAU,MAAM;AACtB,UAAI,OAAO,YAAY,WACrB,SAAQ,gBAAiB,MAAsB,SAAS,MAAM;;AAGlE;;;AAIJ,cAAW,cAAc,MAAM;;EAGjC,MAAM,SAAS,kBAAkB;AAEjC,MAAI,aAAa,OACf,YAAW,uBAAuB,MAAM,aAAa;AAGvD,eAAa,EAAE,SAAS;GAAE,GAAG;GAAY,GAAG;GAAe,CAAC;;AAI9D,QAAO"}

package/dist/create-props-CFK4CtjG.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"create-props-CFK4CtjG.d.ts","names":[],"sources":["../src/components/create-props.ts"],"mappings":";KAAY,WAAA,oCACyB,KAAA,mDACE,MAAA,GAAS,WAAA,MAC5C,KAAA,GAAQ,gBAAA,CAAiB,MAAA;AAAA,KAExB,gBAAA,sCACkC,MAAA,GAAS,WAAA,4BAE1B,MAAA,SAAe,UAAA,UAAoB,SAAA,OACrD,KAAA,EAAO,SAAA,6BAAsC,MAAA,CAAO,SAAA,cAChD,MAAA,CAAO,SAAA"}

package/dist/editor-context-CAdqwRwB.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"editor-context-CAdqwRwB.js","names":[],"sources":["../src/contexts/editor-context.ts"],"sourcesContent":["import type { Editor, Extension } from '@prosekit/core'\nimport { createContext, useContext, type ContextProviderComponent } from 'solid-js'\n\nconst editorContext = createContext<Editor | null>(null)\n\n/**\n * @internal\n */\nexport function useEditorContext<E extends Extension>(): Editor<E> | null {\n  return useContext(editorContext)\n}\n\n/**\n * @internal\n */\nexport const EditorContextProvider: ContextProviderComponent<Editor | null> = editorContext.Provider\n"],"mappings":";;;AAGA,MAAM,gBAAgB,cAA6B,KAAK;;;;AAKxD,SAAgB,mBAA0D;AACxE,QAAO,WAAW,cAAc;;;;;AAMlC,MAAa,wBAAiE,cAAc"}

package/dist/types-Bx9mKDTJ.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"types-Bx9mKDTJ.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"}