@prosekit/solid 0.5.0 → 0.5.1

package/src/components/create-component.ts

@@ -0,0 +1,60 @@
+import type { AnyFunction } from '@prosekit/core'
+import type { Component } from 'solid-js'
+import h from 'solid-js/h'
+
+import { useEditorContext } from '../contexts/editor-context'
+import type { PropsWithElement } from '../types'
+
+export function createComponent<
+  Props extends object,
+  CustomElement extends HTMLElement,
+>(
+  tagName: string,
+  propNames: string[],
+  eventNames: string[],
+): Component<PropsWithElement<Props, CustomElement>> {
+  const hasEditor = propNames.includes('editor')
+  const lowerCaseEventNameMap = new Map(
+    eventNames.map((name) => [name.toLowerCase(), name]),
+  )
+
+  const Component = (props: Record<string, unknown>) => {
+    const properties: Record<string, () => unknown> = {}
+    const eventHandlers: Record<string, AnyFunction> = {}
+
+    for (const name of Object.keys(props)) {
+      if (propNames.includes(name)) {
+        properties['prop:' + name] = () => props[name]
+        continue
+      }
+
+      if (name.startsWith('on')) {
+        const lowerCaseEventName = name.slice(2).toLowerCase()
+        const eventName = lowerCaseEventNameMap.get(lowerCaseEventName)
+        if (eventName) {
+          const extractDetail = eventName.endsWith('Change')
+          eventHandlers['on:' + eventName] = (event: Event) => {
+            const handler = props[name] as AnyFunction | null
+            if (typeof handler === 'function') {
+              handler(extractDetail ? (event as CustomEvent).detail : event)
+            }
+          }
+          continue
+        }
+      }
+
+      properties[name] = () => props[name]
+    }
+
+    const editor = useEditorContext()
+
+    if (hasEditor && editor) {
+      properties['prop:editor'] = () => props['editor'] || editor
+    }
+
+    return h(tagName, { ...properties, ...eventHandlers })
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-return
+  return Component as any
+}

package/src/components/create-props.ts

@@ -0,0 +1,13 @@
+export type CreateProps<
+  Props extends { [PropName in keyof Props]: unknown },
+  Events extends { [EventName in keyof Events]: CustomEvent },
+> = Props & CreateEventProps<Events>
+
+type CreateEventProps<
+  Events extends { [EventName in keyof Events]: CustomEvent },
+> = {
+  [EventName in keyof Events as `on${Capitalize<string & EventName>}`]: (
+    event: EventName extends `${string}Change` ? Events[EventName]['detail']
+      : Events[EventName],
+  ) => void
+}

package/src/components/drop-indicator/drop-indicator.gen.ts

@@ -0,0 +1,29 @@
+import { 
+  type DropIndicatorElement,
+  type DropIndicatorProps as Props,
+  type DropIndicatorEvents as Events,
+  dropIndicatorProps,
+  dropIndicatorEvents,
+} from '@prosekit/web/drop-indicator'
+import type { Component } from 'solid-js'
+
+import type { PropsWithElement } from '../../types'
+import { createComponent } from '../create-component'
+import type { CreateProps } from '../create-props'
+
+/**
+ * Props for the {@link DropIndicator} component.
+ */
+export interface DropIndicatorProps extends Partial<CreateProps<Props, Events>> {}
+
+export const DropIndicator: Component<PropsWithElement<
+  DropIndicatorProps,
+  DropIndicatorElement
+>> = createComponent<
+  DropIndicatorProps,
+  DropIndicatorElement
+>(
+  'prosekit-drop-indicator', 
+  Object.keys(dropIndicatorProps),
+  Object.keys(dropIndicatorEvents),
+)

package/src/components/drop-indicator/index.gen.ts

@@ -0,0 +1 @@
+export { DropIndicator, type DropIndicatorProps } from './drop-indicator.gen'

package/src/components/inline-popover/index.gen.ts

@@ -0,0 +1 @@
+export { InlinePopover, type InlinePopoverProps } from './inline-popover.gen'

package/src/components/inline-popover/inline-popover.gen.ts

@@ -0,0 +1,29 @@
+import { 
+  type InlinePopoverElement,
+  type InlinePopoverProps as Props,
+  type InlinePopoverEvents as Events,
+  inlinePopoverProps,
+  inlinePopoverEvents,
+} from '@prosekit/web/inline-popover'
+import type { Component } from 'solid-js'
+
+import type { PropsWithElement } from '../../types'
+import { createComponent } from '../create-component'
+import type { CreateProps } from '../create-props'
+
+/**
+ * Props for the {@link InlinePopover} component.
+ */
+export interface InlinePopoverProps extends Partial<CreateProps<Props, Events>> {}
+
+export const InlinePopover: Component<PropsWithElement<
+  InlinePopoverProps,
+  InlinePopoverElement
+>> = createComponent<
+  InlinePopoverProps,
+  InlinePopoverElement
+>(
+  'prosekit-inline-popover', 
+  Object.keys(inlinePopoverProps),
+  Object.keys(inlinePopoverEvents),
+)

package/src/components/popover/index.gen.ts

@@ -0,0 +1,5 @@
+export { PopoverContent, type PopoverContentProps } from './popover-content.gen'
+
+export { PopoverRoot, type PopoverRootProps } from './popover-root.gen'
+
+export { PopoverTrigger, type PopoverTriggerProps } from './popover-trigger.gen'

package/src/components/popover/popover-content.gen.ts

@@ -0,0 +1,29 @@
+import { 
+  type PopoverContentElement,
+  type PopoverContentProps as Props,
+  type PopoverContentEvents as Events,
+  popoverContentProps,
+  popoverContentEvents,
+} from '@prosekit/web/popover'
+import type { Component } from 'solid-js'
+
+import type { PropsWithElement } from '../../types'
+import { createComponent } from '../create-component'
+import type { CreateProps } from '../create-props'
+
+/**
+ * Props for the {@link PopoverContent} component.
+ */
+export interface PopoverContentProps extends Partial<CreateProps<Props, Events>> {}
+
+export const PopoverContent: Component<PropsWithElement<
+  PopoverContentProps,
+  PopoverContentElement
+>> = createComponent<
+  PopoverContentProps,
+  PopoverContentElement
+>(
+  'prosekit-popover-content', 
+  Object.keys(popoverContentProps),
+  Object.keys(popoverContentEvents),
+)

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

@@ -0,0 +1,29 @@
+import { 
+  type PopoverRootElement,
+  type PopoverRootProps as Props,
+  type PopoverRootEvents as Events,
+  popoverRootProps,
+  popoverRootEvents,
+} from '@prosekit/web/popover'
+import type { Component } from 'solid-js'
+
+import type { PropsWithElement } from '../../types'
+import { createComponent } from '../create-component'
+import type { CreateProps } from '../create-props'
+
+/**
+ * Props for the {@link PopoverRoot} component.
+ */
+export interface PopoverRootProps extends Partial<CreateProps<Props, Events>> {}
+
+export const PopoverRoot: Component<PropsWithElement<
+  PopoverRootProps,
+  PopoverRootElement
+>> = createComponent<
+  PopoverRootProps,
+  PopoverRootElement
+>(
+  'prosekit-popover-root', 
+  Object.keys(popoverRootProps),
+  Object.keys(popoverRootEvents),
+)

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

@@ -0,0 +1,29 @@
+import { 
+  type PopoverTriggerElement,
+  type PopoverTriggerProps as Props,
+  type PopoverTriggerEvents as Events,
+  popoverTriggerProps,
+  popoverTriggerEvents,
+} from '@prosekit/web/popover'
+import type { Component } from 'solid-js'
+
+import type { PropsWithElement } from '../../types'
+import { createComponent } from '../create-component'
+import type { CreateProps } from '../create-props'
+
+/**
+ * Props for the {@link PopoverTrigger} component.
+ */
+export interface PopoverTriggerProps extends Partial<CreateProps<Props, Events>> {}
+
+export const PopoverTrigger: Component<PropsWithElement<
+  PopoverTriggerProps,
+  PopoverTriggerElement
+>> = createComponent<
+  PopoverTriggerProps,
+  PopoverTriggerElement
+>(
+  'prosekit-popover-trigger', 
+  Object.keys(popoverTriggerProps),
+  Object.keys(popoverTriggerEvents),
+)

package/src/components/prosekit.ts

@@ -0,0 +1,37 @@
+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'
+import { consumeSolidMarkViews } from '../extensions/solid-mark-view'
+import { consumeSolidNodeViews } from '../extensions/solid-node-view'
+
+export type ProseKitProps = ParentProps<{
+  editor: Editor
+}>
+
+/**
+ * The root component for a ProseKit editor.
+ *
+ * @public
+ */
+export const ProseKit: Component<ProseKitProps> = (props) => {
+  return createComponent(ProsemirrorAdapterProvider, {
+    get children() {
+      return createComponent(EditorContextProvider, {
+        get value() {
+          return props.editor
+        },
+        get children() {
+          consumeSolidNodeViews()
+          consumeSolidMarkViews()
+          return props.children
+        },
+      })
+    },
+  })
+}

package/src/components/resizable/index.gen.ts

@@ -0,0 +1,3 @@
+export { ResizableHandle, type ResizableHandleProps } from './resizable-handle.gen'
+
+export { ResizableRoot, type ResizableRootProps } from './resizable-root.gen'

package/src/components/resizable/resizable-handle.gen.ts

@@ -0,0 +1,29 @@
+import { 
+  type ResizableHandleElement,
+  type ResizableHandleProps as Props,
+  type ResizableHandleEvents as Events,
+  resizableHandleProps,
+  resizableHandleEvents,
+} from '@prosekit/web/resizable'
+import type { Component } from 'solid-js'
+
+import type { PropsWithElement } from '../../types'
+import { createComponent } from '../create-component'
+import type { CreateProps } from '../create-props'
+
+/**
+ * Props for the {@link ResizableHandle} component.
+ */
+export interface ResizableHandleProps extends Partial<CreateProps<Props, Events>> {}
+
+export const ResizableHandle: Component<PropsWithElement<
+  ResizableHandleProps,
+  ResizableHandleElement
+>> = createComponent<
+  ResizableHandleProps,
+  ResizableHandleElement
+>(
+  'prosekit-resizable-handle', 
+  Object.keys(resizableHandleProps),
+  Object.keys(resizableHandleEvents),
+)

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

@@ -0,0 +1,29 @@
+import { 
+  type ResizableRootElement,
+  type ResizableRootProps as Props,
+  type ResizableRootEvents as Events,
+  resizableRootProps,
+  resizableRootEvents,
+} from '@prosekit/web/resizable'
+import type { Component } from 'solid-js'
+
+import type { PropsWithElement } from '../../types'
+import { createComponent } from '../create-component'
+import type { CreateProps } from '../create-props'
+
+/**
+ * Props for the {@link ResizableRoot} component.
+ */
+export interface ResizableRootProps extends Partial<CreateProps<Props, Events>> {}
+
+export const ResizableRoot: Component<PropsWithElement<
+  ResizableRootProps,
+  ResizableRootElement
+>> = createComponent<
+  ResizableRootProps,
+  ResizableRootElement
+>(
+  'prosekit-resizable-root', 
+  Object.keys(resizableRootProps),
+  Object.keys(resizableRootEvents),
+)

package/src/components/table-handle/index.gen.ts

@@ -0,0 +1,17 @@
+export { TableHandleColumnRoot, type TableHandleColumnRootProps } from './table-handle-column-root.gen'
+
+export { TableHandleColumnTrigger, type TableHandleColumnTriggerProps } from './table-handle-column-trigger.gen'
+
+export { TableHandleDragPreview, type TableHandleDragPreviewProps } from './table-handle-drag-preview.gen'
+
+export { TableHandleDropIndicator, type TableHandleDropIndicatorProps } from './table-handle-drop-indicator.gen'
+
+export { TableHandlePopoverContent, type TableHandlePopoverContentProps } from './table-handle-popover-content.gen'
+
+export { TableHandlePopoverItem, type TableHandlePopoverItemProps } from './table-handle-popover-item.gen'
+
+export { TableHandleRoot, type TableHandleRootProps } from './table-handle-root.gen'
+
+export { TableHandleRowRoot, type TableHandleRowRootProps } from './table-handle-row-root.gen'
+
+export { TableHandleRowTrigger, type TableHandleRowTriggerProps } from './table-handle-row-trigger.gen'

package/src/components/table-handle/table-handle-column-root.gen.ts

@@ -0,0 +1,29 @@
+import { 
+  type TableHandleColumnRootElement,
+  type TableHandleColumnRootProps as Props,
+  type TableHandleColumnRootEvents as Events,
+  tableHandleColumnRootProps,
+  tableHandleColumnRootEvents,
+} from '@prosekit/web/table-handle'
+import type { Component } from 'solid-js'
+
+import type { PropsWithElement } from '../../types'
+import { createComponent } from '../create-component'
+import type { CreateProps } from '../create-props'
+
+/**
+ * Props for the {@link TableHandleColumnRoot} component.
+ */
+export interface TableHandleColumnRootProps extends Partial<CreateProps<Props, Events>> {}
+
+export const TableHandleColumnRoot: Component<PropsWithElement<
+  TableHandleColumnRootProps,
+  TableHandleColumnRootElement
+>> = createComponent<
+  TableHandleColumnRootProps,
+  TableHandleColumnRootElement
+>(
+  'prosekit-table-handle-column-root', 
+  Object.keys(tableHandleColumnRootProps),
+  Object.keys(tableHandleColumnRootEvents),
+)

package/src/components/table-handle/table-handle-column-trigger.gen.ts

@@ -0,0 +1,29 @@
+import { 
+  type TableHandleColumnTriggerElement,
+  type TableHandleColumnTriggerProps as Props,
+  type TableHandleColumnTriggerEvents as Events,
+  tableHandleColumnTriggerProps,
+  tableHandleColumnTriggerEvents,
+} from '@prosekit/web/table-handle'
+import type { Component } from 'solid-js'
+
+import type { PropsWithElement } from '../../types'
+import { createComponent } from '../create-component'
+import type { CreateProps } from '../create-props'
+
+/**
+ * Props for the {@link TableHandleColumnTrigger} component.
+ */
+export interface TableHandleColumnTriggerProps extends Partial<CreateProps<Props, Events>> {}
+
+export const TableHandleColumnTrigger: Component<PropsWithElement<
+  TableHandleColumnTriggerProps,
+  TableHandleColumnTriggerElement
+>> = createComponent<
+  TableHandleColumnTriggerProps,
+  TableHandleColumnTriggerElement
+>(
+  'prosekit-table-handle-column-trigger', 
+  Object.keys(tableHandleColumnTriggerProps),
+  Object.keys(tableHandleColumnTriggerEvents),
+)

package/src/components/table-handle/table-handle-drag-preview.gen.ts

@@ -0,0 +1,29 @@
+import { 
+  type TableHandleDragPreviewElement,
+  type TableHandleDragPreviewProps as Props,
+  type TableHandleDragPreviewEvents as Events,
+  tableHandleDragPreviewProps,
+  tableHandleDragPreviewEvents,
+} from '@prosekit/web/table-handle'
+import type { Component } from 'solid-js'
+
+import type { PropsWithElement } from '../../types'
+import { createComponent } from '../create-component'
+import type { CreateProps } from '../create-props'
+
+/**
+ * Props for the {@link TableHandleDragPreview} component.
+ */
+export interface TableHandleDragPreviewProps extends Partial<CreateProps<Props, Events>> {}
+
+export const TableHandleDragPreview: Component<PropsWithElement<
+  TableHandleDragPreviewProps,
+  TableHandleDragPreviewElement
+>> = createComponent<
+  TableHandleDragPreviewProps,
+  TableHandleDragPreviewElement
+>(
+  'prosekit-table-handle-drag-preview', 
+  Object.keys(tableHandleDragPreviewProps),
+  Object.keys(tableHandleDragPreviewEvents),
+)

package/src/components/table-handle/table-handle-drop-indicator.gen.ts

@@ -0,0 +1,29 @@
+import { 
+  type TableHandleDropIndicatorElement,
+  type TableHandleDropIndicatorProps as Props,
+  type TableHandleDropIndicatorEvents as Events,
+  tableHandleDropIndicatorProps,
+  tableHandleDropIndicatorEvents,
+} from '@prosekit/web/table-handle'
+import type { Component } from 'solid-js'
+
+import type { PropsWithElement } from '../../types'
+import { createComponent } from '../create-component'
+import type { CreateProps } from '../create-props'
+
+/**
+ * Props for the {@link TableHandleDropIndicator} component.
+ */
+export interface TableHandleDropIndicatorProps extends Partial<CreateProps<Props, Events>> {}
+
+export const TableHandleDropIndicator: Component<PropsWithElement<
+  TableHandleDropIndicatorProps,
+  TableHandleDropIndicatorElement
+>> = createComponent<
+  TableHandleDropIndicatorProps,
+  TableHandleDropIndicatorElement
+>(
+  'prosekit-table-handle-drop-indicator', 
+  Object.keys(tableHandleDropIndicatorProps),
+  Object.keys(tableHandleDropIndicatorEvents),
+)

package/src/components/table-handle/table-handle-popover-content.gen.ts

@@ -0,0 +1,29 @@
+import { 
+  type TableHandlePopoverContentElement,
+  type TableHandlePopoverContentProps as Props,
+  type TableHandlePopoverContentEvents as Events,
+  tableHandlePopoverContentProps,
+  tableHandlePopoverContentEvents,
+} from '@prosekit/web/table-handle'
+import type { Component } from 'solid-js'
+
+import type { PropsWithElement } from '../../types'
+import { createComponent } from '../create-component'
+import type { CreateProps } from '../create-props'
+
+/**
+ * Props for the {@link TableHandlePopoverContent} component.
+ */
+export interface TableHandlePopoverContentProps extends Partial<CreateProps<Props, Events>> {}
+
+export const TableHandlePopoverContent: Component<PropsWithElement<
+  TableHandlePopoverContentProps,
+  TableHandlePopoverContentElement
+>> = createComponent<
+  TableHandlePopoverContentProps,
+  TableHandlePopoverContentElement
+>(
+  'prosekit-table-handle-popover-content', 
+  Object.keys(tableHandlePopoverContentProps),
+  Object.keys(tableHandlePopoverContentEvents),
+)

package/src/components/table-handle/table-handle-popover-item.gen.ts

@@ -0,0 +1,29 @@
+import { 
+  type TableHandlePopoverItemElement,
+  type TableHandlePopoverItemProps as Props,
+  type TableHandlePopoverItemEvents as Events,
+  tableHandlePopoverItemProps,
+  tableHandlePopoverItemEvents,
+} from '@prosekit/web/table-handle'
+import type { Component } from 'solid-js'
+
+import type { PropsWithElement } from '../../types'
+import { createComponent } from '../create-component'
+import type { CreateProps } from '../create-props'
+
+/**
+ * Props for the {@link TableHandlePopoverItem} component.
+ */
+export interface TableHandlePopoverItemProps extends Partial<CreateProps<Props, Events>> {}
+
+export const TableHandlePopoverItem: Component<PropsWithElement<
+  TableHandlePopoverItemProps,
+  TableHandlePopoverItemElement
+>> = createComponent<
+  TableHandlePopoverItemProps,
+  TableHandlePopoverItemElement
+>(
+  'prosekit-table-handle-popover-item', 
+  Object.keys(tableHandlePopoverItemProps),
+  Object.keys(tableHandlePopoverItemEvents),
+)

package/src/components/table-handle/table-handle-root.gen.ts

@@ -0,0 +1,29 @@
+import { 
+  type TableHandleRootElement,
+  type TableHandleRootProps as Props,
+  type TableHandleRootEvents as Events,
+  tableHandleRootProps,
+  tableHandleRootEvents,
+} from '@prosekit/web/table-handle'
+import type { Component } from 'solid-js'
+
+import type { PropsWithElement } from '../../types'
+import { createComponent } from '../create-component'
+import type { CreateProps } from '../create-props'
+
+/**
+ * Props for the {@link TableHandleRoot} component.
+ */
+export interface TableHandleRootProps extends Partial<CreateProps<Props, Events>> {}
+
+export const TableHandleRoot: Component<PropsWithElement<
+  TableHandleRootProps,
+  TableHandleRootElement
+>> = createComponent<
+  TableHandleRootProps,
+  TableHandleRootElement
+>(
+  'prosekit-table-handle-root', 
+  Object.keys(tableHandleRootProps),
+  Object.keys(tableHandleRootEvents),
+)

package/src/components/table-handle/table-handle-row-root.gen.ts

@@ -0,0 +1,29 @@
+import { 
+  type TableHandleRowRootElement,
+  type TableHandleRowRootProps as Props,
+  type TableHandleRowRootEvents as Events,
+  tableHandleRowRootProps,
+  tableHandleRowRootEvents,
+} from '@prosekit/web/table-handle'
+import type { Component } from 'solid-js'
+
+import type { PropsWithElement } from '../../types'
+import { createComponent } from '../create-component'
+import type { CreateProps } from '../create-props'
+
+/**
+ * Props for the {@link TableHandleRowRoot} component.
+ */
+export interface TableHandleRowRootProps extends Partial<CreateProps<Props, Events>> {}
+
+export const TableHandleRowRoot: Component<PropsWithElement<
+  TableHandleRowRootProps,
+  TableHandleRowRootElement
+>> = createComponent<
+  TableHandleRowRootProps,
+  TableHandleRowRootElement
+>(
+  'prosekit-table-handle-row-root', 
+  Object.keys(tableHandleRowRootProps),
+  Object.keys(tableHandleRowRootEvents),
+)

package/src/components/table-handle/table-handle-row-trigger.gen.ts

@@ -0,0 +1,29 @@
+import { 
+  type TableHandleRowTriggerElement,
+  type TableHandleRowTriggerProps as Props,
+  type TableHandleRowTriggerEvents as Events,
+  tableHandleRowTriggerProps,
+  tableHandleRowTriggerEvents,
+} from '@prosekit/web/table-handle'
+import type { Component } from 'solid-js'
+
+import type { PropsWithElement } from '../../types'
+import { createComponent } from '../create-component'
+import type { CreateProps } from '../create-props'
+
+/**
+ * Props for the {@link TableHandleRowTrigger} component.
+ */
+export interface TableHandleRowTriggerProps extends Partial<CreateProps<Props, Events>> {}
+
+export const TableHandleRowTrigger: Component<PropsWithElement<
+  TableHandleRowTriggerProps,
+  TableHandleRowTriggerElement
+>> = createComponent<
+  TableHandleRowTriggerProps,
+  TableHandleRowTriggerElement
+>(
+  'prosekit-table-handle-row-trigger', 
+  Object.keys(tableHandleRowTriggerProps),
+  Object.keys(tableHandleRowTriggerEvents),
+)

package/src/components/tooltip/index.gen.ts

@@ -0,0 +1,5 @@
+export { TooltipContent, type TooltipContentProps } from './tooltip-content.gen'
+
+export { TooltipRoot, type TooltipRootProps } from './tooltip-root.gen'
+
+export { TooltipTrigger, type TooltipTriggerProps } from './tooltip-trigger.gen'

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

@@ -0,0 +1,29 @@
+import { 
+  type TooltipContentElement,
+  type TooltipContentProps as Props,
+  type TooltipContentEvents as Events,
+  tooltipContentProps,
+  tooltipContentEvents,
+} from '@prosekit/web/tooltip'
+import type { Component } from 'solid-js'
+
+import type { PropsWithElement } from '../../types'
+import { createComponent } from '../create-component'
+import type { CreateProps } from '../create-props'
+
+/**
+ * Props for the {@link TooltipContent} component.
+ */
+export interface TooltipContentProps extends Partial<CreateProps<Props, Events>> {}
+
+export const TooltipContent: Component<PropsWithElement<
+  TooltipContentProps,
+  TooltipContentElement
+>> = createComponent<
+  TooltipContentProps,
+  TooltipContentElement
+>(
+  'prosekit-tooltip-content', 
+  Object.keys(tooltipContentProps),
+  Object.keys(tooltipContentEvents),
+)