@prosekit/web 0.7.3 → 0.7.5

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

@@ -0,0 +1,18 @@
+import { defineCustomElement, registerCustomElement, type BaseElementConstructor } from "@aria-ui/core"
+
+import { useTooltipTrigger } from "./setup"
+import { tooltipTriggerEvents, tooltipTriggerProps, type TooltipTriggerEvents, type TooltipTriggerProps } from "./types"
+
+const TooltipTriggerElementBase: BaseElementConstructor<TooltipTriggerProps> = defineCustomElement<
+  TooltipTriggerProps,
+  TooltipTriggerEvents
+>({
+  props: tooltipTriggerProps,
+  events: tooltipTriggerEvents,
+  setup: useTooltipTrigger,
+})
+class TooltipTriggerElement extends TooltipTriggerElementBase {}
+
+registerCustomElement('prosekit-tooltip-trigger', TooltipTriggerElement)
+  
+export { TooltipTriggerElement }

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

@@ -0,0 +1 @@
+export { useTooltipTrigger } from '@aria-ui/tooltip/elements'

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

@@ -0,0 +1,12 @@
+import type {
+  TooltipTriggerEvents as Events,
+  TooltipTriggerProps as Props,
+} from '@aria-ui/tooltip/elements'
+
+export {
+  tooltipTriggerEvents,
+  tooltipTriggerProps,
+} from '@aria-ui/tooltip/elements'
+
+export interface TooltipTriggerProps extends Props {}
+export interface TooltipTriggerEvents extends Events {}

package/src/hooks/use-editor-extension.ts

@@ -0,0 +1,19 @@
+import {
+  useEffect,
+  type ConnectableElement,
+  type ReadonlySignal,
+} from '@aria-ui/core'
+import type {
+  Editor,
+  Extension,
+} from '@prosekit/core'
+
+export function useEditorExtension(
+  host: ConnectableElement,
+  editor: ReadonlySignal<Editor | null>,
+  extension: Extension,
+): void {
+  useEffect(host, () => {
+    return editor.get()?.use(extension)
+  })
+}

package/src/hooks/use-editor-focus-event.ts

@@ -0,0 +1,23 @@
+import type {
+  ConnectableElement,
+  ReadonlySignal,
+} from '@aria-ui/core'
+import {
+  defineFocusChangeHandler,
+  type Editor,
+  type FocusChangeHandler,
+} from '@prosekit/core'
+
+import { useEditorExtension } from './use-editor-extension'
+
+/**
+ * @internal
+ */
+export function useEditorFocusChangeEvent(
+  host: ConnectableElement,
+  editor: ReadonlySignal<Editor | null>,
+  handler: FocusChangeHandler,
+): void {
+  const extension = defineFocusChangeHandler(handler)
+  useEditorExtension(host, editor, extension)
+}

package/src/hooks/use-editor-typing.ts

@@ -0,0 +1,36 @@
+import {
+  createSignal,
+  type ConnectableElement,
+  type ReadonlySignal,
+} from '@aria-ui/core'
+import {
+  defineDOMEventHandler,
+  union,
+  type Editor,
+} from '@prosekit/core'
+
+import { useEditorExtension } from './use-editor-extension'
+
+export function useEditorTyping(
+  host: ConnectableElement,
+  editor: ReadonlySignal<Editor | null>,
+): ReadonlySignal<boolean> {
+  const typing = createSignal(false)
+
+  const handleKeypress = () => {
+    typing.set(true)
+  }
+
+  const handlePointerMove = () => {
+    typing.set(false)
+  }
+
+  const extension = union(
+    defineDOMEventHandler('keypress', handleKeypress),
+    defineDOMEventHandler('pointermove', handlePointerMove),
+  )
+
+  useEditorExtension(host, editor, extension)
+
+  return typing
+}

package/src/hooks/use-editor-update-event.ts

@@ -0,0 +1,23 @@
+import type {
+  ConnectableElement,
+  ReadonlySignal,
+} from '@aria-ui/core'
+import {
+  defineUpdateHandler,
+  type Editor,
+  type UpdateHandler,
+} from '@prosekit/core'
+
+import { useEditorExtension } from './use-editor-extension'
+
+/**
+ * @internal
+ */
+export function useEditorUpdateEvent(
+  host: ConnectableElement,
+  editor: ReadonlySignal<Editor | null>,
+  handler: UpdateHandler,
+): void {
+  const extension = defineUpdateHandler(handler)
+  useEditorExtension(host, editor, extension)
+}

package/src/hooks/use-first-rendering.ts

@@ -0,0 +1,20 @@
+import {
+  createSignal,
+  useEffect,
+  type ConnectableElement,
+  type ReadonlySignal,
+} from '@aria-ui/core'
+
+export function useFirstRendering(
+  host: ConnectableElement,
+): ReadonlySignal<boolean> {
+  const firstRendering = createSignal(true)
+
+  useEffect(host, () => {
+    requestAnimationFrame(() => {
+      firstRendering.set(false)
+    })
+  })
+
+  return firstRendering
+}

package/src/hooks/use-keymap.ts

@@ -0,0 +1,20 @@
+import type {
+  ConnectableElement,
+  ReadonlySignal,
+} from '@aria-ui/core'
+import {
+  defineKeymap,
+  type Editor,
+  type Keymap,
+} from '@prosekit/core'
+
+import { useEditorExtension } from './use-editor-extension'
+
+export function useKeymap(
+  host: ConnectableElement,
+  editor: ReadonlySignal<Editor | null>,
+  keymap: Keymap,
+): void {
+  const extension = defineKeymap(keymap)
+  useEditorExtension(host, editor, extension)
+}

package/src/hooks/use-scrolling.ts

@@ -0,0 +1,33 @@
+import {
+  createSignal,
+  useEffect,
+  type ConnectableElement,
+  type ReadonlySignal,
+} from '@aria-ui/core'
+import { getNearestOverflowAncestor } from '@zag-js/dom-query'
+
+export function useScrolling(host: ConnectableElement): ReadonlySignal<boolean> {
+  const scrolling = createSignal(false)
+
+  useEffect(host, () => {
+    const scrollableParent = getNearestOverflowAncestor(host)
+
+    const handleScroll = () => {
+      scrolling.set(true)
+    }
+
+    const handleMouseMove = () => {
+      scrolling.set(false)
+    }
+
+    scrollableParent.addEventListener('scroll', handleScroll, { passive: true })
+    window.addEventListener('mousemove', handleMouseMove, { passive: true })
+
+    return () => {
+      scrollableParent.removeEventListener('scroll', handleScroll)
+      window.removeEventListener('mousemove', handleMouseMove)
+    }
+  })
+
+  return scrolling
+}

package/src/hooks/use-selecting.ts

@@ -0,0 +1,63 @@
+import type { ReadonlySignal } from '@aria-ui/core'
+import {
+  createSignal,
+  useEffect,
+  type ConnectableElement,
+} from '@aria-ui/core'
+import type { Editor } from '@prosekit/core'
+
+import { getSafeEditorView } from '../utils/get-safe-editor-view'
+
+/**
+ * Detect if the user is selecting text inside the editor, in which case some
+ * components should be disabled or hidden.
+ */
+export function useSelecting(
+  host: ConnectableElement,
+  editor: ReadonlySignal<Editor | null>,
+  enabled: ReadonlySignal<boolean>,
+): ReadonlySignal<boolean> {
+  const selecting = createSignal(false)
+  const isPointerDown = createSignal(false)
+
+  useEffect(host, () => {
+    if (!enabled.get()) {
+      return
+    }
+
+    const view = getSafeEditorView(editor.peek())
+    if (!view) return
+
+    const { dom, root } = view
+    if (!root) return
+
+    // When the user starts selecting text, we set the selecting signal to true.
+    const handlePointerDown = () => {
+      selecting.set(true)
+      isPointerDown.set(true)
+    }
+    const handlePointerUp = () => {
+      isPointerDown.set(false)
+    }
+    // When the user moves the pointer and the pointer is not down, we set the
+    // selecting signal to false again.
+    const handleMouseMove = () => {
+      if (!isPointerDown.get()) {
+        selecting.set(false)
+      }
+    }
+
+    // Only listen to pointer down events on the editor
+    dom.addEventListener('pointerdown', handlePointerDown)
+    root.addEventListener('pointerup', handlePointerUp)
+    root.addEventListener('pointermove', handleMouseMove)
+
+    return () => {
+      dom.removeEventListener('pointerdown', handlePointerDown)
+      root.removeEventListener('pointerup', handlePointerUp)
+      root.removeEventListener('pointermove', handleMouseMove)
+    }
+  })
+
+  return selecting
+}

package/src/index.ts

@@ -0,0 +1 @@
+export {}

package/src/utils/assign-styles.ts

@@ -0,0 +1,14 @@
+import type { ConditionalPick } from 'type-fest'
+
+// Only include CSS properties whose value type is `string`
+type StringStyleDeclaration = Partial<ConditionalPick<CSSStyleDeclaration, string>>
+
+/**
+ * A type-safe version of `Object.assign` for `element.style`.
+ */
+export function assignStyles(
+  element: HTMLElement | SVGElement | MathMLElement,
+  styles: StringStyleDeclaration,
+): void {
+  Object.assign(element.style, styles)
+}

package/src/utils/clone-element.ts

@@ -0,0 +1,110 @@
+import { getId } from '@ocavue/utils'
+
+/**
+ * Creates a deep clone of an Element, including all computed styles so that
+ * it looks almost exactly the same as the original element.
+ */
+export function deepCloneElement<T extends Element>(element: T, important = false): [T, string] {
+  const clonedElement = element.cloneNode(true) as T
+  const style = deepCopyStyles(element, clonedElement, important)
+  return [clonedElement, style]
+}
+
+/**
+ * Creates a clone of an Element, including all computed styles so that
+ * it looks similar enough to the original element.
+ */
+export function cloneElement<T extends Element>(element: T, important = false): [T, string] {
+  const clonedElement = element.cloneNode() as T
+  const style = copyStyles(element, clonedElement, important)
+  return [clonedElement, style]
+}
+
+function deepCopyStyles(source: Element, target: Element, important: boolean): string {
+  const sources = [source]
+  const targets = [target]
+  const styles: string[] = []
+
+  while (sources.length > 0 && sources.length === targets.length) {
+    const source = sources.pop()
+    const target = targets.pop()
+
+    if (!source || !target) {
+      break
+    }
+
+    const style = copyStyles(source, target, important)
+    if (style) {
+      styles.push(style)
+    }
+
+    sources.push(...source.children)
+    targets.push(...target.children)
+  }
+
+  return styles.join('\n')
+}
+
+function copyStyles(source: Element, target: Element, important: boolean): string {
+  if (!source || !target) {
+    return ''
+  }
+
+  const view = source.ownerDocument?.defaultView
+  if (!view) {
+    return ''
+  }
+
+  // Known issue: pseudo styles are not copied.
+  const sourceStyle = view.getComputedStyle(source)
+  const targetStyle = (target as HTMLElement | SVGElement | MathMLElement).style
+
+  if (!sourceStyle || !targetStyle) {
+    return ''
+  }
+
+  for (const key of sourceStyle) {
+    targetStyle.setProperty(
+      key,
+      sourceStyle.getPropertyValue(key),
+      // Enforce important to avoid the style being overridden when the element
+      // is connected to the page.
+      // See https://github.com/prosekit/prosekit/issues/1185 for more details.
+      important ? 'important' : (sourceStyle.getPropertyPriority(key) || ''),
+    )
+  }
+
+  const styles: string[] = []
+  for (const pseudoSelector of [':before', ':after']) {
+    const sourcePseudoStyle = view.getComputedStyle(source, pseudoSelector)
+    const targetPseudoStyle = view.getComputedStyle(target, pseudoSelector)
+
+    if (!sourcePseudoStyle) {
+      continue
+    }
+
+    const content = sourcePseudoStyle.getPropertyValue('content')
+    const hasPseudoElement = content && content !== 'none' && content !== 'normal'
+
+    if (!hasPseudoElement) {
+      continue
+    }
+
+    const cssProps: string[] = []
+    for (const property of sourcePseudoStyle) {
+      const sourceValue = sourcePseudoStyle.getPropertyValue(property)
+      const sourcePriority = sourcePseudoStyle.getPropertyPriority(property)
+      const targetValue = targetPseudoStyle.getPropertyValue(property)
+      const targetPriority = targetPseudoStyle.getPropertyPriority(property)
+      if (sourceValue !== targetValue || sourcePriority !== targetPriority) {
+        cssProps.push(`${property}: ${sourceValue}${sourcePriority ? ' !important' : ''};`)
+      }
+    }
+
+    const uniqueClassName = `clone-pseudo-element-${getId()}`
+    target.classList.add(uniqueClassName)
+    styles.push(`.${uniqueClassName}${pseudoSelector} { ${cssProps.join(' ')} }`)
+  }
+
+  return styles.join('\n')
+}

package/src/utils/css-feature-detection.ts

@@ -0,0 +1,9 @@
+import { once } from '@ocavue/utils'
+
+export const isColorMixSupported: () => boolean = once(() => {
+  try {
+    return CSS.supports('background-color', 'color-mix(in srgb, red, blue)')
+  } catch {
+    return false
+  }
+})

package/src/utils/fade-color.ts

@@ -0,0 +1,15 @@
+import { isColorMixSupported } from './css-feature-detection'
+
+/**
+ * Convert a color to a color with opacity
+ * @param color - The color to convert
+ * @param opacity - The opacity to apply
+ * @returns The converted color if color-mix is supported, otherwise undefined
+ */
+export function fadeColor(color: CSSStyleValue, opacity: number): string | undefined {
+  if (isColorMixSupported()) {
+    const transparentWeight = (1 - opacity) * 100
+    const colorWeight = opacity * 100
+    return `color-mix(in srgb, ${color} ${colorWeight}%, transparent ${transparentWeight}%)`
+  }
+}

package/src/utils/get-box-element.ts

@@ -0,0 +1,20 @@
+/**
+ * Returns the element that has a box.
+ */
+export function getBoxElement(element: Element): Element | null | undefined {
+  const window = element.ownerDocument.defaultView
+  if (!window) {
+    return
+  }
+
+  const style = window.getComputedStyle(element)
+  const display = style.display
+
+  if (display === 'contents' && element.childElementCount === 1) {
+    return element.firstElementChild
+  } else if (display === 'none') {
+    return
+  }
+
+  return element
+}

package/src/utils/get-client-rect.ts

@@ -0,0 +1,35 @@
+/**
+ * Similar to `element.getBoundingClientRect`, but handles `display: contents` elements.
+ */
+export function getClientRect(element: Element): {
+  top: number
+  right: number
+  bottom: number
+  left: number
+} {
+  const rect = element.getBoundingClientRect()
+  if (rect.width === 0 && rect.height === 0 && rect.x === 0 && rect.y === 0) {
+    // Suspiciously rect, probably an element with `display: contents`, in
+    // which case `element.getClientRects()` will return an empty array.
+    if (element.getClientRects().length === 0) {
+      const children = Array.from(element.children)
+      const rects = children.map(child => getClientRect(child))
+      if (rects.length === 0) {
+        return rect
+      }
+      if (rects.length === 1) {
+        return rects[0]
+      }
+      let { top, bottom, left, right } = rects[0]
+      for (let i = 1; i < rects.length; i++) {
+        const r = rects[i]
+        if (r.top < top) top = r.top
+        if (r.bottom > bottom) bottom = r.bottom
+        if (r.left < left) left = r.left
+        if (r.right > right) right = r.right
+      }
+      return { top, bottom, left, right }
+    }
+  }
+  return rect
+}

package/src/utils/get-default-state.spec.ts

@@ -0,0 +1,50 @@
+import {
+  createSignal,
+  type PropDeclarations,
+  type SignalState,
+} from '@aria-ui/core'
+import {
+  describe,
+  expect,
+  it,
+} from 'vitest'
+
+import { getStateWithDefaults } from './get-default-state'
+
+type TestProps = {
+  bool: boolean
+  num: number
+}
+
+describe('getStateWithDefaults', () => {
+  it('keeps falsy signal values from state', () => {
+    const props: PropDeclarations<TestProps> = {
+      bool: { default: true },
+      num: { default: 1 },
+    }
+
+    const state: Partial<SignalState<TestProps>> = {
+      bool: createSignal(false),
+      num: createSignal(0),
+    }
+
+    const merged = getStateWithDefaults(state, props)
+    expect(merged.bool.get()).toBe(false)
+    expect(merged.num.get()).toBe(0)
+  })
+
+  it('uses default value when state property is undefined', () => {
+    const props: PropDeclarations<TestProps> = {
+      bool: { default: true },
+      num: { default: 1 },
+    }
+
+    const state: Partial<SignalState<TestProps>> = {
+      bool: undefined,
+    }
+
+    const merged = getStateWithDefaults(state, props)
+    expect(merged.bool.get()).toBe(true)
+    expect(merged.num.get()).toBe(1)
+  })
+})

package/src/utils/get-default-state.ts

@@ -0,0 +1,22 @@
+import {
+  createSignal,
+  type PropDeclarations,
+  type SignalState,
+} from '@aria-ui/core'
+
+export function getStateWithDefaults<
+  Props extends Record<string, any> = Record<string, any>,
+>(
+  state: Partial<SignalState<Props>>,
+  props: PropDeclarations<Props>,
+): SignalState<Props> {
+  const merged = { ...state } as SignalState<Props>
+
+  for (const key of Object.keys(props) as (keyof Props)[]) {
+    if (!merged[key]) {
+      merged[key] = createSignal(props[key].default)
+    }
+  }
+
+  return merged
+}

package/src/utils/get-effective-background-color.ts

@@ -0,0 +1,21 @@
+export function getEffectiveBackgroundColor(element: HTMLElement): string | undefined {
+  let current: HTMLElement | null = element
+
+  while (current) {
+    const style = current.ownerDocument.defaultView?.getComputedStyle(current)
+    const backgroundColor = style?.backgroundColor
+
+    if (
+      backgroundColor
+      && backgroundColor !== 'transparent'
+      // Chrome returns `rgba(0, 0, 0, 0)` for transparent colors.
+      && backgroundColor !== 'rgba(0, 0, 0, 0)'
+    ) {
+      return backgroundColor
+    }
+
+    current = current.parentElement
+  }
+
+  return undefined
+}

package/src/utils/get-safe-editor-view.ts

@@ -0,0 +1,10 @@
+import type { Editor } from '@prosekit/core'
+import type { EditorView } from '@prosekit/pm/view'
+
+/**
+ * @internal
+ */
+export function getSafeEditorView(editor?: Editor | null): EditorView | undefined {
+  if (!editor || !editor.mounted) return
+  return editor.view
+}

package/src/utils/inject-style.ts

@@ -0,0 +1,11 @@
+import { getDocument } from '@ocavue/utils'
+
+export function injectStyle(container: HTMLElement, styleText: string): void {
+  if (!styleText) {
+    return
+  }
+  const document = getDocument(container)
+  const style = document.createElement('style')
+  style.textContent = styleText
+  container.appendChild(style)
+}

package/src/utils/is-finite-positive-number.ts

@@ -0,0 +1,3 @@
+export function isFinitePositiveNumber(value: unknown): value is number {
+  return typeof value === 'number' && Number.isFinite(value) && value > 0
+}

package/src/utils/max-z-index.ts

@@ -0,0 +1,3 @@
+// Maximum possible z-index
+// https://stackoverflow.com/questions/491052/minimum-and-maximum-value-of-z-index
+export const maxZIndex = '2147483647'

package/src/utils/throttle.ts

@@ -0,0 +1,17 @@
+/**
+ * @internal
+ */
+export function throttle<Args extends any[]>(
+  callback: (...args: Args) => void,
+  wait: number,
+): (...args: Args) => void {
+  let lastTime = 0
+
+  return (...args: Args) => {
+    const now = Date.now()
+    if (now - lastTime >= wait) {
+      callback(...args)
+      lastTime = now
+    }
+  }
+}