@prosekit/vue 0.4.17 → 0.5.1

package/src/components/autocomplete/autocomplete-empty.gen.ts

@@ -0,0 +1,33 @@
+import {
+  autocompleteEmptyProps,
+  autocompleteEmptyEvents,
+  type AutocompleteEmptyProps as Props,
+  type AutocompleteEmptyEvents as Events,
+} from '@prosekit/web/autocomplete'
+import type { DefineSetupFnComponent, HTMLAttributes } from 'vue'
+
+import { createComponent } from '../create-component'
+import type { CreateEmits } from '../create-emits'
+
+/**
+ * Props for the {@link AutocompleteEmpty} component.
+ */
+export interface AutocompleteEmptyProps extends Partial<Props> {}
+
+/**
+ * Emits for the {@link AutocompleteEmpty} component.
+ */
+export interface AutocompleteEmptyEmits extends CreateEmits<Events> {}
+
+export const AutocompleteEmpty: DefineSetupFnComponent<
+  AutocompleteEmptyProps & HTMLAttributes,
+  AutocompleteEmptyEmits
+> = createComponent<
+  AutocompleteEmptyProps,
+  AutocompleteEmptyEmits
+>(
+  'prosekit-autocomplete-empty',
+  'AutocompleteEmpty',
+  Object.keys(autocompleteEmptyProps),
+  Object.keys(autocompleteEmptyEvents),
+)

package/src/components/autocomplete/autocomplete-item.gen.ts

@@ -0,0 +1,33 @@
+import {
+  autocompleteItemProps,
+  autocompleteItemEvents,
+  type AutocompleteItemProps as Props,
+  type AutocompleteItemEvents as Events,
+} from '@prosekit/web/autocomplete'
+import type { DefineSetupFnComponent, HTMLAttributes } from 'vue'
+
+import { createComponent } from '../create-component'
+import type { CreateEmits } from '../create-emits'
+
+/**
+ * Props for the {@link AutocompleteItem} component.
+ */
+export interface AutocompleteItemProps extends Partial<Props> {}
+
+/**
+ * Emits for the {@link AutocompleteItem} component.
+ */
+export interface AutocompleteItemEmits extends CreateEmits<Events> {}
+
+export const AutocompleteItem: DefineSetupFnComponent<
+  AutocompleteItemProps & HTMLAttributes,
+  AutocompleteItemEmits
+> = createComponent<
+  AutocompleteItemProps,
+  AutocompleteItemEmits
+>(
+  'prosekit-autocomplete-item',
+  'AutocompleteItem',
+  Object.keys(autocompleteItemProps),
+  Object.keys(autocompleteItemEvents),
+)

package/src/components/autocomplete/autocomplete-list.gen.ts

@@ -0,0 +1,33 @@
+import {
+  autocompleteListProps,
+  autocompleteListEvents,
+  type AutocompleteListProps as Props,
+  type AutocompleteListEvents as Events,
+} from '@prosekit/web/autocomplete'
+import type { DefineSetupFnComponent, HTMLAttributes } from 'vue'
+
+import { createComponent } from '../create-component'
+import type { CreateEmits } from '../create-emits'
+
+/**
+ * Props for the {@link AutocompleteList} component.
+ */
+export interface AutocompleteListProps extends Partial<Props> {}
+
+/**
+ * Emits for the {@link AutocompleteList} component.
+ */
+export interface AutocompleteListEmits extends CreateEmits<Events> {}
+
+export const AutocompleteList: DefineSetupFnComponent<
+  AutocompleteListProps & HTMLAttributes,
+  AutocompleteListEmits
+> = createComponent<
+  AutocompleteListProps,
+  AutocompleteListEmits
+>(
+  'prosekit-autocomplete-list',
+  'AutocompleteList',
+  Object.keys(autocompleteListProps),
+  Object.keys(autocompleteListEvents),
+)

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

@@ -0,0 +1,33 @@
+import {
+  autocompletePopoverProps,
+  autocompletePopoverEvents,
+  type AutocompletePopoverProps as Props,
+  type AutocompletePopoverEvents as Events,
+} from '@prosekit/web/autocomplete'
+import type { DefineSetupFnComponent, HTMLAttributes } from 'vue'
+
+import { createComponent } from '../create-component'
+import type { CreateEmits } from '../create-emits'
+
+/**
+ * Props for the {@link AutocompletePopover} component.
+ */
+export interface AutocompletePopoverProps extends Partial<Props> {}
+
+/**
+ * Emits for the {@link AutocompletePopover} component.
+ */
+export interface AutocompletePopoverEmits extends CreateEmits<Events> {}
+
+export const AutocompletePopover: DefineSetupFnComponent<
+  AutocompletePopoverProps & HTMLAttributes,
+  AutocompletePopoverEmits
+> = createComponent<
+  AutocompletePopoverProps,
+  AutocompletePopoverEmits
+>(
+  'prosekit-autocomplete-popover',
+  'AutocompletePopover',
+  Object.keys(autocompletePopoverProps),
+  Object.keys(autocompletePopoverEvents),
+)

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

@@ -0,0 +1,7 @@
+export { AutocompleteEmpty, type AutocompleteEmptyProps, type AutocompleteEmptyEmits } from './autocomplete-empty.gen'
+
+export { AutocompleteItem, type AutocompleteItemProps, type AutocompleteItemEmits } from './autocomplete-item.gen'
+
+export { AutocompleteList, type AutocompleteListProps, type AutocompleteListEmits } from './autocomplete-list.gen'
+
+export { AutocompletePopover, type AutocompletePopoverProps, type AutocompletePopoverEmits } from './autocomplete-popover.gen'

package/src/components/block-handle/block-handle-add.gen.ts

@@ -0,0 +1,33 @@
+import {
+  blockHandleAddProps,
+  blockHandleAddEvents,
+  type BlockHandleAddProps as Props,
+  type BlockHandleAddEvents as Events,
+} from '@prosekit/web/block-handle'
+import type { DefineSetupFnComponent, HTMLAttributes } from 'vue'
+
+import { createComponent } from '../create-component'
+import type { CreateEmits } from '../create-emits'
+
+/**
+ * Props for the {@link BlockHandleAdd} component.
+ */
+export interface BlockHandleAddProps extends Partial<Props> {}
+
+/**
+ * Emits for the {@link BlockHandleAdd} component.
+ */
+export interface BlockHandleAddEmits extends CreateEmits<Events> {}
+
+export const BlockHandleAdd: DefineSetupFnComponent<
+  BlockHandleAddProps & HTMLAttributes,
+  BlockHandleAddEmits
+> = createComponent<
+  BlockHandleAddProps,
+  BlockHandleAddEmits
+>(
+  'prosekit-block-handle-add',
+  'BlockHandleAdd',
+  Object.keys(blockHandleAddProps),
+  Object.keys(blockHandleAddEvents),
+)

package/src/components/block-handle/block-handle-draggable.gen.ts

@@ -0,0 +1,33 @@
+import {
+  blockHandleDraggableProps,
+  blockHandleDraggableEvents,
+  type BlockHandleDraggableProps as Props,
+  type BlockHandleDraggableEvents as Events,
+} from '@prosekit/web/block-handle'
+import type { DefineSetupFnComponent, HTMLAttributes } from 'vue'
+
+import { createComponent } from '../create-component'
+import type { CreateEmits } from '../create-emits'
+
+/**
+ * Props for the {@link BlockHandleDraggable} component.
+ */
+export interface BlockHandleDraggableProps extends Partial<Props> {}
+
+/**
+ * Emits for the {@link BlockHandleDraggable} component.
+ */
+export interface BlockHandleDraggableEmits extends CreateEmits<Events> {}
+
+export const BlockHandleDraggable: DefineSetupFnComponent<
+  BlockHandleDraggableProps & HTMLAttributes,
+  BlockHandleDraggableEmits
+> = createComponent<
+  BlockHandleDraggableProps,
+  BlockHandleDraggableEmits
+>(
+  'prosekit-block-handle-draggable',
+  'BlockHandleDraggable',
+  Object.keys(blockHandleDraggableProps),
+  Object.keys(blockHandleDraggableEvents),
+)

package/src/components/block-handle/block-handle-popover.gen.ts

@@ -0,0 +1,33 @@
+import {
+  blockHandlePopoverProps,
+  blockHandlePopoverEvents,
+  type BlockHandlePopoverProps as Props,
+  type BlockHandlePopoverEvents as Events,
+} from '@prosekit/web/block-handle'
+import type { DefineSetupFnComponent, HTMLAttributes } from 'vue'
+
+import { createComponent } from '../create-component'
+import type { CreateEmits } from '../create-emits'
+
+/**
+ * Props for the {@link BlockHandlePopover} component.
+ */
+export interface BlockHandlePopoverProps extends Partial<Props> {}
+
+/**
+ * Emits for the {@link BlockHandlePopover} component.
+ */
+export interface BlockHandlePopoverEmits extends CreateEmits<Events> {}
+
+export const BlockHandlePopover: DefineSetupFnComponent<
+  BlockHandlePopoverProps & HTMLAttributes,
+  BlockHandlePopoverEmits
+> = createComponent<
+  BlockHandlePopoverProps,
+  BlockHandlePopoverEmits
+>(
+  'prosekit-block-handle-popover',
+  'BlockHandlePopover',
+  Object.keys(blockHandlePopoverProps),
+  Object.keys(blockHandlePopoverEvents),
+)

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

@@ -0,0 +1,5 @@
+export { BlockHandleAdd, type BlockHandleAddProps, type BlockHandleAddEmits } from './block-handle-add.gen'
+
+export { BlockHandleDraggable, type BlockHandleDraggableProps, type BlockHandleDraggableEmits } from './block-handle-draggable.gen'
+
+export { BlockHandlePopover, type BlockHandlePopoverProps, type BlockHandlePopoverEmits } from './block-handle-popover.gen'

package/src/components/create-component.ts

@@ -0,0 +1,93 @@
+import {
+  defineComponent,
+  h,
+  onMounted,
+  ref,
+  watchEffect,
+  type DefineSetupFnComponent,
+  type EmitsOptions,
+  type HTMLAttributes,
+} from 'vue'
+
+import { useEditorContext } from '../injection/editor-context'
+
+export function createComponent<
+  Props extends { [PropName in keyof Props]: unknown },
+  Emits extends EmitsOptions,
+>(
+  tagName: string,
+  displayName: string,
+  propNames: string[],
+  eventNames: string[],
+): DefineSetupFnComponent<Partial<Props> & HTMLAttributes, Emits> {
+  const hasEditor = propNames.includes('editor')
+
+  const Component = defineComponent<any, any>(
+    (props: Record<string, unknown>, { slots, emit }) => {
+      const editor = useEditorContext()
+
+      const mounted = ref(false)
+
+      onMounted(() => {
+        mounted.value = true
+      })
+
+      const elementRef = ref<HTMLElement | null>(null)
+
+      watchEffect((onCleanup) => {
+        const element = elementRef.value
+        if (!element) return
+
+        const eventHandlers: Record<string, (event: Event) => void> = {}
+        for (const eventName of eventNames) {
+          const extractDetail = eventName.endsWith('Change')
+          eventHandlers[eventName] = (event: Event) => {
+            emit(
+              eventName,
+              extractDetail ? (event as CustomEvent).detail : event,
+            )
+          }
+        }
+
+        for (const [eventName, handler] of Object.entries(eventHandlers)) {
+          element.addEventListener(eventName, handler)
+        }
+
+        onCleanup(() => {
+          for (const [eventName, handler] of Object.entries(eventHandlers)) {
+            element.removeEventListener(eventName, handler)
+          }
+        })
+      })
+
+      return () => {
+        const properties: Record<string, unknown> = {}
+
+        for (const [key, value] of Object.entries(props)) {
+          if (value !== undefined && !key.startsWith('.')) {
+            properties[propNames.includes(key) ? '.' + key : key] = value
+          }
+        }
+
+        // Try to add the editor prop if it's missing.
+        if (hasEditor && editor && !properties['editor']) {
+          properties.editor = editor
+        }
+
+        // Ensure web components work after SSR hydration.
+        properties.key = mounted.value ? 1 : 0
+
+        properties.ref = elementRef
+
+        return h(tagName, properties, slots.default?.())
+      }
+    },
+    {
+      name: displayName,
+      props: propNames,
+      emits: eventNames,
+    },
+  )
+
+  return Component
+}

package/src/components/create-emits.ts

@@ -0,0 +1,8 @@
+export type CreateEmits<
+  Events extends { [EventName in keyof Events]: CustomEvent },
+> = {
+  [EventName in keyof Events]: (
+    event: EventName extends `${string}Change` ? Events[EventName]['detail']
+      : Events[EventName],
+  ) => void
+}

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

@@ -0,0 +1,33 @@
+import {
+  dropIndicatorProps,
+  dropIndicatorEvents,
+  type DropIndicatorProps as Props,
+  type DropIndicatorEvents as Events,
+} from '@prosekit/web/drop-indicator'
+import type { DefineSetupFnComponent, HTMLAttributes } from 'vue'
+
+import { createComponent } from '../create-component'
+import type { CreateEmits } from '../create-emits'
+
+/**
+ * Props for the {@link DropIndicator} component.
+ */
+export interface DropIndicatorProps extends Partial<Props> {}
+
+/**
+ * Emits for the {@link DropIndicator} component.
+ */
+export interface DropIndicatorEmits extends CreateEmits<Events> {}
+
+export const DropIndicator: DefineSetupFnComponent<
+  DropIndicatorProps & HTMLAttributes,
+  DropIndicatorEmits
+> = createComponent<
+  DropIndicatorProps,
+  DropIndicatorEmits
+>(
+  'prosekit-drop-indicator',
+  'DropIndicator',
+  Object.keys(dropIndicatorProps),
+  Object.keys(dropIndicatorEvents),
+)

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

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

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

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

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

@@ -0,0 +1,33 @@
+import {
+  inlinePopoverProps,
+  inlinePopoverEvents,
+  type InlinePopoverProps as Props,
+  type InlinePopoverEvents as Events,
+} from '@prosekit/web/inline-popover'
+import type { DefineSetupFnComponent, HTMLAttributes } from 'vue'
+
+import { createComponent } from '../create-component'
+import type { CreateEmits } from '../create-emits'
+
+/**
+ * Props for the {@link InlinePopover} component.
+ */
+export interface InlinePopoverProps extends Partial<Props> {}
+
+/**
+ * Emits for the {@link InlinePopover} component.
+ */
+export interface InlinePopoverEmits extends CreateEmits<Events> {}
+
+export const InlinePopover: DefineSetupFnComponent<
+  InlinePopoverProps & HTMLAttributes,
+  InlinePopoverEmits
+> = createComponent<
+  InlinePopoverProps,
+  InlinePopoverEmits
+>(
+  'prosekit-inline-popover',
+  'InlinePopover',
+  Object.keys(inlinePopoverProps),
+  Object.keys(inlinePopoverEvents),
+)

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

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

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

@@ -0,0 +1,33 @@
+import {
+  popoverContentProps,
+  popoverContentEvents,
+  type PopoverContentProps as Props,
+  type PopoverContentEvents as Events,
+} from '@prosekit/web/popover'
+import type { DefineSetupFnComponent, HTMLAttributes } from 'vue'
+
+import { createComponent } from '../create-component'
+import type { CreateEmits } from '../create-emits'
+
+/**
+ * Props for the {@link PopoverContent} component.
+ */
+export interface PopoverContentProps extends Partial<Props> {}
+
+/**
+ * Emits for the {@link PopoverContent} component.
+ */
+export interface PopoverContentEmits extends CreateEmits<Events> {}
+
+export const PopoverContent: DefineSetupFnComponent<
+  PopoverContentProps & HTMLAttributes,
+  PopoverContentEmits
+> = createComponent<
+  PopoverContentProps,
+  PopoverContentEmits
+>(
+  'prosekit-popover-content',
+  'PopoverContent',
+  Object.keys(popoverContentProps),
+  Object.keys(popoverContentEvents),
+)

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

@@ -0,0 +1,33 @@
+import {
+  popoverRootProps,
+  popoverRootEvents,
+  type PopoverRootProps as Props,
+  type PopoverRootEvents as Events,
+} from '@prosekit/web/popover'
+import type { DefineSetupFnComponent, HTMLAttributes } from 'vue'
+
+import { createComponent } from '../create-component'
+import type { CreateEmits } from '../create-emits'
+
+/**
+ * Props for the {@link PopoverRoot} component.
+ */
+export interface PopoverRootProps extends Partial<Props> {}
+
+/**
+ * Emits for the {@link PopoverRoot} component.
+ */
+export interface PopoverRootEmits extends CreateEmits<Events> {}
+
+export const PopoverRoot: DefineSetupFnComponent<
+  PopoverRootProps & HTMLAttributes,
+  PopoverRootEmits
+> = createComponent<
+  PopoverRootProps,
+  PopoverRootEmits
+>(
+  'prosekit-popover-root',
+  'PopoverRoot',
+  Object.keys(popoverRootProps),
+  Object.keys(popoverRootEvents),
+)

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

@@ -0,0 +1,33 @@
+import {
+  popoverTriggerProps,
+  popoverTriggerEvents,
+  type PopoverTriggerProps as Props,
+  type PopoverTriggerEvents as Events,
+} from '@prosekit/web/popover'
+import type { DefineSetupFnComponent, HTMLAttributes } from 'vue'
+
+import { createComponent } from '../create-component'
+import type { CreateEmits } from '../create-emits'
+
+/**
+ * Props for the {@link PopoverTrigger} component.
+ */
+export interface PopoverTriggerProps extends Partial<Props> {}
+
+/**
+ * Emits for the {@link PopoverTrigger} component.
+ */
+export interface PopoverTriggerEmits extends CreateEmits<Events> {}
+
+export const PopoverTrigger: DefineSetupFnComponent<
+  PopoverTriggerProps & HTMLAttributes,
+  PopoverTriggerEmits
+> = createComponent<
+  PopoverTriggerProps,
+  PopoverTriggerEmits
+>(
+  'prosekit-popover-trigger',
+  'PopoverTrigger',
+  Object.keys(popoverTriggerProps),
+  Object.keys(popoverTriggerEvents),
+)

package/src/components/prosekit.ts

@@ -0,0 +1,36 @@
+import type { Editor } from '@prosekit/core'
+import { ProsemirrorAdapterProvider } from '@prosemirror-adapter/vue'
+import {
+  defineComponent,
+  h,
+  type DefineSetupFnComponent,
+  type PropType,
+} from 'vue'
+
+import { VueMarkViewsConsumer } from '../extensions/vue-mark-view'
+import { VueNodeViewsConsumer } from '../extensions/vue-node-view'
+import { provideEditor } from '../injection/editor-context'
+
+export interface ProseKitProps {
+  editor: Editor
+}
+
+/**
+ * The root component for a ProseKit editor.
+ *
+ * @public
+ */
+export const ProseKit: DefineSetupFnComponent<ProseKitProps> = defineComponent<ProseKitProps>({
+  name: 'ProseKit',
+  props: { editor: { type: Object as PropType<Editor>, required: true } },
+  setup: (props, { slots }) => {
+    provideEditor(props.editor)
+    return () => {
+      return h(ProsemirrorAdapterProvider, null, () => [
+        h(VueNodeViewsConsumer),
+        h(VueMarkViewsConsumer),
+        slots.default?.(),
+      ])
+    }
+  },
+})

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

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

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

@@ -0,0 +1,33 @@
+import {
+  resizableHandleProps,
+  resizableHandleEvents,
+  type ResizableHandleProps as Props,
+  type ResizableHandleEvents as Events,
+} from '@prosekit/web/resizable'
+import type { DefineSetupFnComponent, HTMLAttributes } from 'vue'
+
+import { createComponent } from '../create-component'
+import type { CreateEmits } from '../create-emits'
+
+/**
+ * Props for the {@link ResizableHandle} component.
+ */
+export interface ResizableHandleProps extends Partial<Props> {}
+
+/**
+ * Emits for the {@link ResizableHandle} component.
+ */
+export interface ResizableHandleEmits extends CreateEmits<Events> {}
+
+export const ResizableHandle: DefineSetupFnComponent<
+  ResizableHandleProps & HTMLAttributes,
+  ResizableHandleEmits
+> = createComponent<
+  ResizableHandleProps,
+  ResizableHandleEmits
+>(
+  'prosekit-resizable-handle',
+  'ResizableHandle',
+  Object.keys(resizableHandleProps),
+  Object.keys(resizableHandleEvents),
+)

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

@@ -0,0 +1,33 @@
+import {
+  resizableRootProps,
+  resizableRootEvents,
+  type ResizableRootProps as Props,
+  type ResizableRootEvents as Events,
+} from '@prosekit/web/resizable'
+import type { DefineSetupFnComponent, HTMLAttributes } from 'vue'
+
+import { createComponent } from '../create-component'
+import type { CreateEmits } from '../create-emits'
+
+/**
+ * Props for the {@link ResizableRoot} component.
+ */
+export interface ResizableRootProps extends Partial<Props> {}
+
+/**
+ * Emits for the {@link ResizableRoot} component.
+ */
+export interface ResizableRootEmits extends CreateEmits<Events> {}
+
+export const ResizableRoot: DefineSetupFnComponent<
+  ResizableRootProps & HTMLAttributes,
+  ResizableRootEmits
+> = createComponent<
+  ResizableRootProps,
+  ResizableRootEmits
+>(
+  'prosekit-resizable-root',
+  'ResizableRoot',
+  Object.keys(resizableRootProps),
+  Object.keys(resizableRootEvents),
+)

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

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