@prosekit/web 0.8.0-beta.0 → 0.8.0-beta.2

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

@@ -1,113 +0,0 @@
-import { useAttribute, useEffect, useEventListener, type ConnectableElement, type ReadonlySignal, type SignalState } from '@aria-ui/core'
-import { isHTMLElement } from '@ocavue/utils'
-import type { Editor } from '@prosekit/core'
-import type { ViewDragging } from '@prosekit/extensions/drop-indicator'
-import { Fragment, Slice } from '@prosekit/pm/model'
-import { NodeSelection } from '@prosekit/pm/state'
-import type { EditorView } from '@prosekit/pm/view'
-
-import { DRAGGING_CLASS_NAME } from '../../../constants.ts'
-import { getSafeEditorView } from '../../../utils/get-safe-editor-view.ts'
-import { blockPopoverContext, draggingContext, type BlockPopoverContext, type HoverState } from '../context.ts'
-
-import { setDragPreview } from './set-drag-preview.ts'
-import type { BlockHandleDraggableProps } from './types.ts'
-
-/**
- * @internal
- */
-export function useBlockHandleDraggable(
-  host: ConnectableElement,
-  { state }: { state: SignalState<BlockHandleDraggableProps> },
-): void {
-  const context = blockPopoverContext.consume(host)
-  const dragging = draggingContext.consume(host)
-
-  useEffect(host, () => {
-    host.draggable = true
-  })
-
-  usePointerDownHandler(host, context, state.editor)
-
-  useEventListener(host, 'dragstart', (event) => {
-    dragging.set(true)
-
-    const view = getSafeEditorView(state.editor.get())
-    const hoverState = context.get()
-
-    if (view && hoverState) {
-      view.dom.classList.add(DRAGGING_CLASS_NAME)
-      createDraggingPreview(view, hoverState, event)
-      setViewDragging(view, hoverState)
-    }
-  })
-
-  useEventListener(host, 'dragend', () => {
-    dragging.set(false)
-
-    const view = getSafeEditorView(state.editor.get())
-    if (view) {
-      view.dom.classList.remove(DRAGGING_CLASS_NAME)
-    }
-  })
-
-  useAttribute(host, 'data-dragging', () => (dragging.get() ? '' : undefined))
-}
-
-function usePointerDownHandler(
-  host: ConnectableElement,
-  context: ReadonlySignal<BlockPopoverContext>,
-  editor: ReadonlySignal<Editor | null>,
-) {
-  useEventListener(host, 'pointerdown', () => {
-    const { pos } = context.get() ?? {}
-    const { view } = editor.get() ?? {}
-
-    if (pos == null || view == null) {
-      return
-    }
-
-    view.dispatch(
-      view.state.tr.setSelection(NodeSelection.create(view.state.doc, pos)),
-    )
-
-    // Clicking the handle will blur the editor, so we need to focus it again.
-    // We cannot call `event.preventDefault()` here to prevent the blur
-    // because it will prevent the drag event from firing.
-    requestAnimationFrame(() => {
-      view.focus()
-    })
-  })
-}
-
-function createDraggingPreview(view: EditorView, hoverState: HoverState, event: DragEvent): void {
-  if (!event.dataTransfer) {
-    return
-  }
-
-  const { pos } = hoverState
-
-  const element = view.nodeDOM(pos)
-  if (!element || !isHTMLElement(element)) {
-    return
-  }
-
-  event.dataTransfer.clearData()
-  event.dataTransfer.setData('text/html', element.outerHTML)
-  event.dataTransfer.effectAllowed = 'copyMove'
-  setDragPreview(event, element)
-
-  return
-}
-
-function setViewDragging(view: EditorView, hoverState: HoverState): void {
-  const { node, pos } = hoverState
-
-  const dragging: ViewDragging = {
-    slice: new Slice(Fragment.from(node), 0, 0),
-    move: true,
-    node: NodeSelection.create(view.state.doc, pos),
-  }
-
-  view.dragging = dragging
-}

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

@@ -1,23 +0,0 @@
-import type { EventDeclarations, PropDeclarations } from '@aria-ui/core'
-import type { Editor } from '@prosekit/core'
-
-export interface BlockHandleDraggableProps {
-  /**
-   * The ProseKit editor instance.
-   *
-   * @default null
-   * @hidden
-   */
-  editor: Editor | null
-}
-
-/** @internal */
-export const blockHandleDraggableProps: PropDeclarations<BlockHandleDraggableProps> = {
-  editor: { default: null },
-}
-
-/** @internal */
-export interface BlockHandleDraggableEvents {}
-
-/** @internal */
-export const blockHandleDraggableEvents: EventDeclarations<BlockHandleDraggableEvents> = {}

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

@@ -1,18 +0,0 @@
-import { defineCustomElement, registerCustomElement, type BaseElementConstructor } from "@aria-ui/core"
-
-import { useBlockHandlePopover } from "./setup.ts"
-import { blockHandlePopoverEvents, blockHandlePopoverProps, type BlockHandlePopoverEvents, type BlockHandlePopoverProps } from "./types.ts"
-
-const BlockHandlePopoverElementBase: BaseElementConstructor<BlockHandlePopoverProps> = defineCustomElement<
-  BlockHandlePopoverProps,
-  BlockHandlePopoverEvents
->({
-  props: blockHandlePopoverProps,
-  events: blockHandlePopoverEvents,
-  setup: useBlockHandlePopover,
-})
-class BlockHandlePopoverElement extends BlockHandlePopoverElementBase {}
-
-registerCustomElement('prosekit-block-handle-popover', BlockHandlePopoverElement)
-  
-export { BlockHandlePopoverElement }

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

@@ -1,68 +0,0 @@
-import { createComputed, createSignal, useAttribute, type ConnectableElement, type ReadonlySignal, type SetupOptions } from '@aria-ui/core'
-import { useOverlayPositionerState } from '@aria-ui/overlay/elements'
-import { usePresence } from '@aria-ui/presence'
-import type { VirtualElement } from '@floating-ui/dom'
-import type { Editor } from '@prosekit/core'
-
-import { useEditorExtension } from '../../../hooks/use-editor-extension.ts'
-import { useScrolling } from '../../../hooks/use-scrolling.ts'
-import { blockPopoverContext, draggingContext, type BlockPopoverContext, type HoverState } from '../context.ts'
-
-import { defineElementHoverHandler, type ElementHoverHandler } from './pointer-move.ts'
-import type { BlockHandlePopoverEvents, BlockHandlePopoverProps } from './types.ts'
-
-/**
- * @internal
- */
-export function useBlockHandlePopover(
-  host: ConnectableElement,
-  { state, emit }: SetupOptions<BlockHandlePopoverProps, BlockHandlePopoverEvents>,
-): void {
-  const { editor, ...overlayState } = state
-  const reference = createSignal<VirtualElement | null>(null)
-  useOverlayPositionerState(host, overlayState, { reference })
-
-  const context = createSignal<BlockPopoverContext>(null)
-  blockPopoverContext.provide(host, context)
-
-  const dragging = createSignal(false)
-  draggingContext.provide(host, dragging)
-
-  const scrolling = useScrolling(host)
-  const open = createComputed(() => {
-    return !!context.get() && !scrolling.get()
-  })
-
-  useHoverExtension(host, editor, (referenceValue, hoverState) => {
-    reference.set(referenceValue)
-    context.set(hoverState)
-    const stateChangeDetails = hoverState ? { node: hoverState.node, pos: hoverState.pos } : null
-    emit('stateChange', stateChangeDetails)
-  })
-
-  useAttribute(host, 'data-state', () => (open.get() ? 'open' : 'closed'))
-  usePresence(host, open)
-}
-
-function useHoverExtension(
-  host: ConnectableElement,
-  editor: ReadonlySignal<Editor | null>,
-  handler: ElementHoverHandler,
-) {
-  let prevHoverState: HoverState | null = null
-
-  const extension = defineElementHoverHandler((reference, hoverState) => {
-    if (isHoverStateEqual(prevHoverState, hoverState)) {
-      return
-    }
-
-    prevHoverState = hoverState
-    handler(reference, hoverState)
-  })
-
-  useEditorExtension(host, editor, extension)
-}
-
-function isHoverStateEqual(a: HoverState | null, b: HoverState | null) {
-  return (!a && !b) || (a && b && a.pos === b.pos && a.node.eq(b.node))
-}

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

@@ -1,81 +0,0 @@
-import type { EventDeclarations, PropDeclarations } from '@aria-ui/core'
-import {
-  overlayPositionerEvents,
-  overlayPositionerProps,
-  type OverlayPositionerEvents,
-  type OverlayPositionerProps,
-} from '@aria-ui/overlay/elements'
-import type { Placement } from '@floating-ui/dom'
-import type { Editor } from '@prosekit/core'
-import type { ProseMirrorNode } from '@prosekit/pm/model'
-
-export interface BlockHandlePopoverProps extends Omit<OverlayPositionerProps, 'placement' | 'hoist' | 'flip' | 'shift' | 'hide'> {
-  /**
-   * The ProseKit editor instance.
-   *
-   * @default null
-   * @hidden
-   */
-  editor: Editor | null
-
-  /**
-   * The placement of the popover, relative to the hovered block.
-   *
-   * @default "left"
-   */
-  placement: Placement
-
-  /**
-   * Whether to use the browser [Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)
-   * to place the floating element on top of other page content.
-   *
-   * @default false
-   */
-  hoist: boolean
-
-  /**
-   * @default false
-   * @hidden
-   */
-  flip: boolean
-
-  /**
-   * @default false
-   * @hidden
-   */
-  shift: boolean
-
-  /**
-   * @default true
-   * @hidden
-   */
-  hide: boolean
-}
-
-/** @internal */
-export const blockHandlePopoverProps: PropDeclarations<BlockHandlePopoverProps> = {
-  ...overlayPositionerProps,
-  editor: { default: null },
-  placement: { default: 'left' },
-
-  // Enabling `hoist` will cause the popover to have a small delay when
-  // scrolling the page.
-  hoist: { default: false },
-
-  flip: { default: false },
-  shift: { default: false },
-  hide: { default: true },
-}
-
-export interface BlockHandlePopoverEvents extends OverlayPositionerEvents {
-  /**
-   * Fired when the hovered block changes.
-   */
-  stateChange: CustomEvent<{ node: ProseMirrorNode; pos: number } | null>
-}
-
-/** @internal */
-export const blockHandlePopoverEvents: EventDeclarations<BlockHandlePopoverEvents> = {
-  ...overlayPositionerEvents,
-  stateChange: {},
-}

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

@@ -1,13 +0,0 @@
-// This file is generated by packages/dev/src/gen-components.ts
-
-export { BlockHandleAddElement } from './block-handle-add/element.gen.ts'
-export { blockHandleAddEvents, blockHandleAddProps, type BlockHandleAddEvents, type BlockHandleAddProps } from './block-handle-add/types.ts'
-export { useBlockHandleAdd } from './block-handle-add/setup.ts'
-
-export { BlockHandleDraggableElement } from './block-handle-draggable/element.gen.ts'
-export { blockHandleDraggableEvents, blockHandleDraggableProps, type BlockHandleDraggableEvents, type BlockHandleDraggableProps } from './block-handle-draggable/types.ts'
-export { useBlockHandleDraggable } from './block-handle-draggable/setup.ts'
-
-export { BlockHandlePopoverElement } from './block-handle-popover/element.gen.ts'
-export { blockHandlePopoverEvents, blockHandlePopoverProps, type BlockHandlePopoverEvents, type BlockHandlePopoverProps } from './block-handle-popover/types.ts'
-export { useBlockHandlePopover } from './block-handle-popover/setup.ts'

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

@@ -1,18 +0,0 @@
-import { defineCustomElement, registerCustomElement, type BaseElementConstructor } from "@aria-ui/core"
-
-import { useDropIndicator } from "./setup.ts"
-import { dropIndicatorEvents, dropIndicatorProps, type DropIndicatorEvents, type DropIndicatorProps } from "./types.ts"
-
-const DropIndicatorElementBase: BaseElementConstructor<DropIndicatorProps> = defineCustomElement<
-  DropIndicatorProps,
-  DropIndicatorEvents
->({
-  props: dropIndicatorProps,
-  events: dropIndicatorEvents,
-  setup: useDropIndicator,
-})
-class DropIndicatorElement extends DropIndicatorElementBase {}
-
-registerCustomElement('prosekit-drop-indicator', DropIndicatorElement)
-  
-export { DropIndicatorElement }

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

@@ -1,75 +0,0 @@
-import { createComputed, createSignal, useEffect, type ConnectableElement, type SetupOptions } from '@aria-ui/core'
-import { usePresence } from '@aria-ui/presence'
-import { defineDropIndicator, type ShowHandlerOptions } from '@prosekit/extensions/drop-indicator'
-
-import { useEditorExtension } from '../../../hooks/use-editor-extension.ts'
-import { useScrolling } from '../../../hooks/use-scrolling.ts'
-import { assignStyles } from '../../../utils/assign-styles.ts'
-
-import type { DropIndicatorEvents, DropIndicatorProps } from './types.ts'
-
-/**
- * @internal
- */
-export function useDropIndicator(
-  host: ConnectableElement,
-  { state }: SetupOptions<DropIndicatorProps, DropIndicatorEvents>,
-): void {
-  type DropIndicatorContext = ShowHandlerOptions | null
-  const context = createSignal<DropIndicatorContext>(null)
-
-  const extension = defineDropIndicator({
-    onShow: (options) => context.set(options),
-    onHide: () => context.set(null),
-  })
-
-  useEditorExtension(host, state.editor, extension)
-
-  const line = createComputed(() => context.get()?.line)
-  const scrolling = useScrolling(host)
-  const presence = createComputed(() => {
-    return !!context.get() && !scrolling.get()
-  })
-  usePresence(host, presence)
-
-  useEffect(
-    host,
-    () => {
-      const lineValue = line.get()
-      const lineWidth = state.width.get()
-
-      if (!lineValue) return
-
-      const { p1: { x: x1, y: y1 }, p2: { x: x2, y: y2 } } = lineValue
-      const horizontal = y1 === y2
-
-      let width: number
-      let height: number
-      let top: number = y1
-      let left: number = x1
-
-      if (horizontal) {
-        width = x2 - x1
-        height = lineWidth
-        top -= lineWidth / 2
-      } else {
-        width = lineWidth
-        height = y2 - y1
-        left -= lineWidth / 2
-      }
-
-      top = Math.round(top)
-      left = Math.round(left)
-
-      assignStyles(host, {
-        position: 'fixed',
-        pointerEvents: 'none',
-        width: `${width}px`,
-        height: `${height}px`,
-        transform: `translate(${left}px, ${top}px)`,
-        left: '0px',
-        top: '0px',
-      })
-    },
-  )
-}

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

@@ -1,31 +0,0 @@
-import type { EventDeclarations, PropDeclarations } from '@aria-ui/core'
-import type { Editor } from '@prosekit/core'
-
-export interface DropIndicatorProps {
-  /**
-   * The ProseKit editor instance.
-   *
-   * @default null
-   * @hidden
-   */
-  editor: Editor | null
-
-  /**
-   * The line width in pixels.
-   *
-   * @default 2
-   */
-  width: number
-}
-
-/** @internal */
-export const dropIndicatorProps: PropDeclarations<DropIndicatorProps> = Object.freeze({
-  editor: { default: null },
-  width: { default: 2 },
-})
-
-export interface DropIndicatorEvents {
-}
-
-/** @internal */
-export const dropIndicatorEvents: EventDeclarations<DropIndicatorEvents> = {}

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

@@ -1,5 +0,0 @@
-// This file is generated by packages/dev/src/gen-components.ts
-
-export { DropIndicatorElement } from './drop-indicator/element.gen.ts'
-export { dropIndicatorEvents, dropIndicatorProps, type DropIndicatorEvents, type DropIndicatorProps } from './drop-indicator/types.ts'
-export { useDropIndicator } from './drop-indicator/setup.ts'

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

@@ -1,5 +0,0 @@
-// This file is generated by packages/dev/src/gen-components.ts
-
-export { InlinePopoverElement } from './inline-popover/element.gen.ts'
-export { inlinePopoverEvents, inlinePopoverProps, type InlinePopoverEvents, type InlinePopoverProps } from './inline-popover/types.ts'
-export { useInlinePopover } from './inline-popover/setup.ts'

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

@@ -1,18 +0,0 @@
-import { defineCustomElement, registerCustomElement, type BaseElementConstructor } from "@aria-ui/core"
-
-import { useInlinePopover } from "./setup.ts"
-import { inlinePopoverEvents, inlinePopoverProps, type InlinePopoverEvents, type InlinePopoverProps } from "./types.ts"
-
-const InlinePopoverElementBase: BaseElementConstructor<InlinePopoverProps> = defineCustomElement<
-  InlinePopoverProps,
-  InlinePopoverEvents
->({
-  props: inlinePopoverProps,
-  events: inlinePopoverEvents,
-  setup: useInlinePopover,
-})
-class InlinePopoverElement extends InlinePopoverElementBase {}
-
-registerCustomElement('prosekit-inline-popover', InlinePopoverElement)
-  
-export { InlinePopoverElement }

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

@@ -1,111 +0,0 @@
-import {
-  createComputed,
-  createSignal,
-  useAttribute,
-  useEffect,
-  type ConnectableElement,
-  type ReadonlySignal,
-  type SetupOptions,
-} from '@aria-ui/core'
-import { useOverlayPositionerState } from '@aria-ui/overlay/elements'
-import { usePresence } from '@aria-ui/presence'
-import type { ReferenceElement } from '@floating-ui/dom'
-import type { Editor } from '@prosekit/core'
-import type { Selection } from '@prosekit/pm/state'
-
-import { useEditorFocusChangeEvent } from '../../../hooks/use-editor-focus-event.ts'
-import { useEditorUpdateEvent } from '../../../hooks/use-editor-update-event.ts'
-import { useKeymap } from '../../../hooks/use-keymap.ts'
-
-import type { InlinePopoverEvents, InlinePopoverProps } from './types.ts'
-import { getVirtualSelectionElement } from './virtual-selection-element.ts'
-
-/**
- * @internal
- */
-export function useInlinePopover(
-  host: ConnectableElement,
-  { state, emit }: SetupOptions<InlinePopoverProps, InlinePopoverEvents>,
-): void {
-  const { editor, defaultOpen, open, ...overlayState } = state
-
-  const reference = useInlinePopoverReference(host, editor)
-  const hasReference = createComputed(() => !!reference.get())
-
-  useEffect(host, () => {
-    const hasReferenceValue = hasReference.get()
-    const defaultOpenValue = defaultOpen.peek()
-    const openValue = open.peek()
-
-    if (defaultOpenValue || openValue) {
-      emit('openChange', hasReferenceValue)
-    }
-  })
-
-  useEffect(host, () => {
-    const hasReferenceValue = hasReference.get()
-    const defaultOpenValue = defaultOpen.peek()
-
-    if (hasReferenceValue && defaultOpenValue) {
-      open.set(true)
-    } else if (!hasReferenceValue) {
-      open.set(false)
-    }
-  })
-
-  useKeymap(host, editor, {
-    Escape: () => {
-      if (!state.dismissOnEscape.peek() || !open.peek()) {
-        return false
-      }
-      open.set(false)
-      emit('openChange', false)
-      return true
-    },
-  })
-
-  useOverlayPositionerState(host, overlayState, { reference })
-
-  useAttribute(host, 'data-state', () => (open.get() ? 'open' : 'closed'))
-  usePresence(host, open)
-}
-
-function useInlinePopoverReference(
-  host: ConnectableElement,
-  editor: ReadonlySignal<Editor | null>,
-) {
-  const reference = createSignal<ReferenceElement | null>(null)
-  let editorFocused = false
-
-  useEditorFocusChangeEvent(host, editor, (focus) => {
-    editorFocused = focus
-  })
-
-  let prevSelection: Selection | undefined
-
-  useEditorUpdateEvent(host, editor, (view) => {
-    const isPopoverFocused = !editorFocused && host.contains(host.ownerDocument.activeElement)
-
-    if (isPopoverFocused) {
-      return
-    }
-
-    const { selection } = view.state
-    const selectionUnchanged = prevSelection?.eq(selection)
-    prevSelection = selection
-
-    // Skip reference update if only the document content has changed, not the
-    // selection itself.
-    //
-    // Example: If the user selects text and then applies mark bold using the
-    // popover, the selection may widen, but we don't want to reposition the
-    // popover.
-    if (selectionUnchanged) {
-      return
-    }
-
-    reference.set(getVirtualSelectionElement(view) || null)
-  })
-
-  return reference
-}