@prosekit/vue 0.5.0 → 0.6.0

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'

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

@@ -0,0 +1,33 @@
+import {
+  tableHandleColumnRootProps,
+  tableHandleColumnRootEvents,
+  type TableHandleColumnRootProps as Props,
+  type TableHandleColumnRootEvents as Events,
+} from '@prosekit/web/table-handle'
+import type { DefineSetupFnComponent, HTMLAttributes } from 'vue'
+
+import { createComponent } from '../create-component'
+import type { CreateEmits } from '../create-emits'
+
+/**
+ * Props for the {@link TableHandleColumnRoot} component.
+ */
+export interface TableHandleColumnRootProps extends Partial<Props> {}
+
+/**
+ * Emits for the {@link TableHandleColumnRoot} component.
+ */
+export interface TableHandleColumnRootEmits extends CreateEmits<Events> {}
+
+export const TableHandleColumnRoot: DefineSetupFnComponent<
+  TableHandleColumnRootProps & HTMLAttributes,
+  TableHandleColumnRootEmits
+> = createComponent<
+  TableHandleColumnRootProps,
+  TableHandleColumnRootEmits
+>(
+  'prosekit-table-handle-column-root',
+  'TableHandleColumnRoot',
+  Object.keys(tableHandleColumnRootProps),
+  Object.keys(tableHandleColumnRootEvents),
+)

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

@@ -0,0 +1,33 @@
+import {
+  tableHandleColumnTriggerProps,
+  tableHandleColumnTriggerEvents,
+  type TableHandleColumnTriggerProps as Props,
+  type TableHandleColumnTriggerEvents as Events,
+} from '@prosekit/web/table-handle'
+import type { DefineSetupFnComponent, HTMLAttributes } from 'vue'
+
+import { createComponent } from '../create-component'
+import type { CreateEmits } from '../create-emits'
+
+/**
+ * Props for the {@link TableHandleColumnTrigger} component.
+ */
+export interface TableHandleColumnTriggerProps extends Partial<Props> {}
+
+/**
+ * Emits for the {@link TableHandleColumnTrigger} component.
+ */
+export interface TableHandleColumnTriggerEmits extends CreateEmits<Events> {}
+
+export const TableHandleColumnTrigger: DefineSetupFnComponent<
+  TableHandleColumnTriggerProps & HTMLAttributes,
+  TableHandleColumnTriggerEmits
+> = createComponent<
+  TableHandleColumnTriggerProps,
+  TableHandleColumnTriggerEmits
+>(
+  'prosekit-table-handle-column-trigger',
+  'TableHandleColumnTrigger',
+  Object.keys(tableHandleColumnTriggerProps),
+  Object.keys(tableHandleColumnTriggerEvents),
+)

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

@@ -0,0 +1,33 @@
+import {
+  tableHandleDragPreviewProps,
+  tableHandleDragPreviewEvents,
+  type TableHandleDragPreviewProps as Props,
+  type TableHandleDragPreviewEvents as Events,
+} from '@prosekit/web/table-handle'
+import type { DefineSetupFnComponent, HTMLAttributes } from 'vue'
+
+import { createComponent } from '../create-component'
+import type { CreateEmits } from '../create-emits'
+
+/**
+ * Props for the {@link TableHandleDragPreview} component.
+ */
+export interface TableHandleDragPreviewProps extends Partial<Props> {}
+
+/**
+ * Emits for the {@link TableHandleDragPreview} component.
+ */
+export interface TableHandleDragPreviewEmits extends CreateEmits<Events> {}
+
+export const TableHandleDragPreview: DefineSetupFnComponent<
+  TableHandleDragPreviewProps & HTMLAttributes,
+  TableHandleDragPreviewEmits
+> = createComponent<
+  TableHandleDragPreviewProps,
+  TableHandleDragPreviewEmits
+>(
+  'prosekit-table-handle-drag-preview',
+  'TableHandleDragPreview',
+  Object.keys(tableHandleDragPreviewProps),
+  Object.keys(tableHandleDragPreviewEvents),
+)

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

@@ -0,0 +1,33 @@
+import {
+  tableHandleDropIndicatorProps,
+  tableHandleDropIndicatorEvents,
+  type TableHandleDropIndicatorProps as Props,
+  type TableHandleDropIndicatorEvents as Events,
+} from '@prosekit/web/table-handle'
+import type { DefineSetupFnComponent, HTMLAttributes } from 'vue'
+
+import { createComponent } from '../create-component'
+import type { CreateEmits } from '../create-emits'
+
+/**
+ * Props for the {@link TableHandleDropIndicator} component.
+ */
+export interface TableHandleDropIndicatorProps extends Partial<Props> {}
+
+/**
+ * Emits for the {@link TableHandleDropIndicator} component.
+ */
+export interface TableHandleDropIndicatorEmits extends CreateEmits<Events> {}
+
+export const TableHandleDropIndicator: DefineSetupFnComponent<
+  TableHandleDropIndicatorProps & HTMLAttributes,
+  TableHandleDropIndicatorEmits
+> = createComponent<
+  TableHandleDropIndicatorProps,
+  TableHandleDropIndicatorEmits
+>(
+  'prosekit-table-handle-drop-indicator',
+  'TableHandleDropIndicator',
+  Object.keys(tableHandleDropIndicatorProps),
+  Object.keys(tableHandleDropIndicatorEvents),
+)

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

@@ -0,0 +1,33 @@
+import {
+  tableHandlePopoverContentProps,
+  tableHandlePopoverContentEvents,
+  type TableHandlePopoverContentProps as Props,
+  type TableHandlePopoverContentEvents as Events,
+} from '@prosekit/web/table-handle'
+import type { DefineSetupFnComponent, HTMLAttributes } from 'vue'
+
+import { createComponent } from '../create-component'
+import type { CreateEmits } from '../create-emits'
+
+/**
+ * Props for the {@link TableHandlePopoverContent} component.
+ */
+export interface TableHandlePopoverContentProps extends Partial<Props> {}
+
+/**
+ * Emits for the {@link TableHandlePopoverContent} component.
+ */
+export interface TableHandlePopoverContentEmits extends CreateEmits<Events> {}
+
+export const TableHandlePopoverContent: DefineSetupFnComponent<
+  TableHandlePopoverContentProps & HTMLAttributes,
+  TableHandlePopoverContentEmits
+> = createComponent<
+  TableHandlePopoverContentProps,
+  TableHandlePopoverContentEmits
+>(
+  'prosekit-table-handle-popover-content',
+  'TableHandlePopoverContent',
+  Object.keys(tableHandlePopoverContentProps),
+  Object.keys(tableHandlePopoverContentEvents),
+)

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

@@ -0,0 +1,33 @@
+import {
+  tableHandlePopoverItemProps,
+  tableHandlePopoverItemEvents,
+  type TableHandlePopoverItemProps as Props,
+  type TableHandlePopoverItemEvents as Events,
+} from '@prosekit/web/table-handle'
+import type { DefineSetupFnComponent, HTMLAttributes } from 'vue'
+
+import { createComponent } from '../create-component'
+import type { CreateEmits } from '../create-emits'
+
+/**
+ * Props for the {@link TableHandlePopoverItem} component.
+ */
+export interface TableHandlePopoverItemProps extends Partial<Props> {}
+
+/**
+ * Emits for the {@link TableHandlePopoverItem} component.
+ */
+export interface TableHandlePopoverItemEmits extends CreateEmits<Events> {}
+
+export const TableHandlePopoverItem: DefineSetupFnComponent<
+  TableHandlePopoverItemProps & HTMLAttributes,
+  TableHandlePopoverItemEmits
+> = createComponent<
+  TableHandlePopoverItemProps,
+  TableHandlePopoverItemEmits
+>(
+  'prosekit-table-handle-popover-item',
+  'TableHandlePopoverItem',
+  Object.keys(tableHandlePopoverItemProps),
+  Object.keys(tableHandlePopoverItemEvents),
+)

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

@@ -0,0 +1,33 @@
+import {
+  tableHandleRootProps,
+  tableHandleRootEvents,
+  type TableHandleRootProps as Props,
+  type TableHandleRootEvents as Events,
+} from '@prosekit/web/table-handle'
+import type { DefineSetupFnComponent, HTMLAttributes } from 'vue'
+
+import { createComponent } from '../create-component'
+import type { CreateEmits } from '../create-emits'
+
+/**
+ * Props for the {@link TableHandleRoot} component.
+ */
+export interface TableHandleRootProps extends Partial<Props> {}
+
+/**
+ * Emits for the {@link TableHandleRoot} component.
+ */
+export interface TableHandleRootEmits extends CreateEmits<Events> {}
+
+export const TableHandleRoot: DefineSetupFnComponent<
+  TableHandleRootProps & HTMLAttributes,
+  TableHandleRootEmits
+> = createComponent<
+  TableHandleRootProps,
+  TableHandleRootEmits
+>(
+  'prosekit-table-handle-root',
+  'TableHandleRoot',
+  Object.keys(tableHandleRootProps),
+  Object.keys(tableHandleRootEvents),
+)

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

@@ -0,0 +1,33 @@
+import {
+  tableHandleRowRootProps,
+  tableHandleRowRootEvents,
+  type TableHandleRowRootProps as Props,
+  type TableHandleRowRootEvents as Events,
+} from '@prosekit/web/table-handle'
+import type { DefineSetupFnComponent, HTMLAttributes } from 'vue'
+
+import { createComponent } from '../create-component'
+import type { CreateEmits } from '../create-emits'
+
+/**
+ * Props for the {@link TableHandleRowRoot} component.
+ */
+export interface TableHandleRowRootProps extends Partial<Props> {}
+
+/**
+ * Emits for the {@link TableHandleRowRoot} component.
+ */
+export interface TableHandleRowRootEmits extends CreateEmits<Events> {}
+
+export const TableHandleRowRoot: DefineSetupFnComponent<
+  TableHandleRowRootProps & HTMLAttributes,
+  TableHandleRowRootEmits
+> = createComponent<
+  TableHandleRowRootProps,
+  TableHandleRowRootEmits
+>(
+  'prosekit-table-handle-row-root',
+  'TableHandleRowRoot',
+  Object.keys(tableHandleRowRootProps),
+  Object.keys(tableHandleRowRootEvents),
+)

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

@@ -0,0 +1,33 @@
+import {
+  tableHandleRowTriggerProps,
+  tableHandleRowTriggerEvents,
+  type TableHandleRowTriggerProps as Props,
+  type TableHandleRowTriggerEvents as Events,
+} from '@prosekit/web/table-handle'
+import type { DefineSetupFnComponent, HTMLAttributes } from 'vue'
+
+import { createComponent } from '../create-component'
+import type { CreateEmits } from '../create-emits'
+
+/**
+ * Props for the {@link TableHandleRowTrigger} component.
+ */
+export interface TableHandleRowTriggerProps extends Partial<Props> {}
+
+/**
+ * Emits for the {@link TableHandleRowTrigger} component.
+ */
+export interface TableHandleRowTriggerEmits extends CreateEmits<Events> {}
+
+export const TableHandleRowTrigger: DefineSetupFnComponent<
+  TableHandleRowTriggerProps & HTMLAttributes,
+  TableHandleRowTriggerEmits
+> = createComponent<
+  TableHandleRowTriggerProps,
+  TableHandleRowTriggerEmits
+>(
+  'prosekit-table-handle-row-trigger',
+  'TableHandleRowTrigger',
+  Object.keys(tableHandleRowTriggerProps),
+  Object.keys(tableHandleRowTriggerEvents),
+)

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

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

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

@@ -0,0 +1,33 @@
+import {
+  tooltipContentProps,
+  tooltipContentEvents,
+  type TooltipContentProps as Props,
+  type TooltipContentEvents as Events,
+} from '@prosekit/web/tooltip'
+import type { DefineSetupFnComponent, HTMLAttributes } from 'vue'
+
+import { createComponent } from '../create-component'
+import type { CreateEmits } from '../create-emits'
+
+/**
+ * Props for the {@link TooltipContent} component.
+ */
+export interface TooltipContentProps extends Partial<Props> {}
+
+/**
+ * Emits for the {@link TooltipContent} component.
+ */
+export interface TooltipContentEmits extends CreateEmits<Events> {}
+
+export const TooltipContent: DefineSetupFnComponent<
+  TooltipContentProps & HTMLAttributes,
+  TooltipContentEmits
+> = createComponent<
+  TooltipContentProps,
+  TooltipContentEmits
+>(
+  'prosekit-tooltip-content',
+  'TooltipContent',
+  Object.keys(tooltipContentProps),
+  Object.keys(tooltipContentEvents),
+)

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

@@ -0,0 +1,33 @@
+import {
+  tooltipRootProps,
+  tooltipRootEvents,
+  type TooltipRootProps as Props,
+  type TooltipRootEvents as Events,
+} from '@prosekit/web/tooltip'
+import type { DefineSetupFnComponent, HTMLAttributes } from 'vue'
+
+import { createComponent } from '../create-component'
+import type { CreateEmits } from '../create-emits'
+
+/**
+ * Props for the {@link TooltipRoot} component.
+ */
+export interface TooltipRootProps extends Partial<Props> {}
+
+/**
+ * Emits for the {@link TooltipRoot} component.
+ */
+export interface TooltipRootEmits extends CreateEmits<Events> {}
+
+export const TooltipRoot: DefineSetupFnComponent<
+  TooltipRootProps & HTMLAttributes,
+  TooltipRootEmits
+> = createComponent<
+  TooltipRootProps,
+  TooltipRootEmits
+>(
+  'prosekit-tooltip-root',
+  'TooltipRoot',
+  Object.keys(tooltipRootProps),
+  Object.keys(tooltipRootEvents),
+)

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

@@ -0,0 +1,33 @@
+import {
+  tooltipTriggerProps,
+  tooltipTriggerEvents,
+  type TooltipTriggerProps as Props,
+  type TooltipTriggerEvents as Events,
+} from '@prosekit/web/tooltip'
+import type { DefineSetupFnComponent, HTMLAttributes } from 'vue'
+
+import { createComponent } from '../create-component'
+import type { CreateEmits } from '../create-emits'
+
+/**
+ * Props for the {@link TooltipTrigger} component.
+ */
+export interface TooltipTriggerProps extends Partial<Props> {}
+
+/**
+ * Emits for the {@link TooltipTrigger} component.
+ */
+export interface TooltipTriggerEmits extends CreateEmits<Events> {}
+
+export const TooltipTrigger: DefineSetupFnComponent<
+  TooltipTriggerProps & HTMLAttributes,
+  TooltipTriggerEmits
+> = createComponent<
+  TooltipTriggerProps,
+  TooltipTriggerEmits
+>(
+  'prosekit-tooltip-trigger',
+  'TooltipTrigger',
+  Object.keys(tooltipTriggerProps),
+  Object.keys(tooltipTriggerEvents),
+)

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

@@ -0,0 +1,98 @@
+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,
+  type MarkViewContext,
+  type MarkViewFactory,
+  type VueMarkViewUserOptions,
+} from '@prosemirror-adapter/vue'
+import {
+  computed,
+  defineComponent,
+  h,
+  type DefineComponent,
+} from 'vue'
+
+import { useExtension } from '../hooks/use-extension'
+
+/**
+ * @public
+ */
+export interface VueMarkViewProps extends MarkViewContext {}
+
+/**
+ * @public
+ */
+export type VueMarkViewComponent = DefineComponent<VueMarkViewProps, any, any>
+
+/**
+ * Options for {@link defineVueMarkView}.
+ *
+ * @public
+ */
+export interface VueMarkViewOptions extends CoreMarkViewUserOptions<VueMarkViewComponent> {
+  /**
+   * The name of the mark type.
+   */
+  name: string
+}
+
+function withMarkViewProps(component: VueMarkViewComponent) {
+  return defineComponent({
+    name: 'MarkViewPropsWrapper',
+    setup: () => {
+      const props: Readonly<VueMarkViewProps> = useMarkViewContext()
+      return () => h(component, props)
+    },
+  })
+}
+
+/**
+ * @internal
+ */
+export const VueMarkViewsConsumer: DefineComponent = /* @__PURE__ */ defineComponent({
+  name: 'VueMarkViewsConsumer',
+  setup: () => {
+    const markViewFactory: MarkViewFactory = useMarkViewFactory()
+    const extension = computed(() => {
+      return defineVueMarkViewFactory(markViewFactory)
+    })
+    useExtension(extension)
+    return (): null => null
+  },
+})
+
+/**
+ * Defines a mark view using a Vue component.
+ *
+ * @public
+ */
+export function defineVueMarkView(options: VueMarkViewOptions): Extension {
+  const { name, component, ...userOptions } = options
+
+  const args: VueMarkViewUserOptions = {
+    ...userOptions,
+    component: withMarkViewProps(component),
+  }
+
+  return defineMarkViewComponent<VueMarkViewUserOptions>({
+    group: 'vue',
+    name,
+    args,
+  })
+}
+
+function defineVueMarkViewFactory(
+  factory: (options: VueMarkViewUserOptions) => MarkViewConstructor,
+) {
+  return defineMarkViewFactory<VueMarkViewUserOptions>({
+    group: 'vue',
+    factory,
+  })
+}