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

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

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

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

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

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

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

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

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

package/src/hooks/use-keymap.ts

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

package/src/hooks/use-scrolling.ts

@@ -1,7 +1,7 @@
-import { createSignal, useEffect, type ConnectableElement, type ReadonlySignal } from '@aria-ui/core'
-import { getNearestOverflowAncestor } from '@zag-js/dom-query'
+import { createSignal, useEffect, type HostElement } from '@aria-ui/core'
+import { getNearestOverflowAncestor } from '@aria-ui/utils'
 
-export function useScrolling(host: ConnectableElement): ReadonlySignal<boolean> {
+export function useScrolling(host: HostElement): () => boolean {
   const scrolling = createSignal(false)
 
   useEffect(host, () => {
@@ -15,16 +15,17 @@ export function useScrolling(host: ConnectableElement): ReadonlySignal<boolean>
       scrolling.set(false)
     }
 
-    scrollableParent.addEventListener('scroll', handleScroll, { passive: true })
-    window.addEventListener('mousemove', handleMouseMove, { passive: true })
-    window.addEventListener('pointermove', handleMouseMove, { passive: true })
+    const abortController = new AbortController()
+    const abortSignal = abortController.signal
+
+    scrollableParent.addEventListener('scroll', handleScroll, { passive: true, signal: abortSignal })
+    window.addEventListener('mousemove', handleMouseMove, { passive: true, signal: abortSignal })
+    window.addEventListener('pointermove', handleMouseMove, { passive: true, signal: abortSignal })
 
     return () => {
-      scrollableParent.removeEventListener('scroll', handleScroll)
-      window.removeEventListener('mousemove', handleMouseMove)
-      window.removeEventListener('pointermove', handleMouseMove)
+      abortController.abort()
     }
   })
 
-  return scrolling
+  return scrolling.get
 }

package/src/hooks/use-selecting.ts

@@ -1,5 +1,4 @@
-import type { ReadonlySignal } from '@aria-ui/core'
-import { createSignal, useEffect, type ConnectableElement } from '@aria-ui/core'
+import { createSignal, useEffect, type HostElement } from '@aria-ui/core'
 import type { Editor } from '@prosekit/core'
 
 import { getSafeEditorView } from '../utils/get-safe-editor-view.ts'
@@ -9,25 +8,22 @@ import { getSafeEditorView } from '../utils/get-safe-editor-view.ts'
  * components should be disabled or hidden.
  */
 export function useSelecting(
-  host: ConnectableElement,
-  editor: ReadonlySignal<Editor | null>,
-  enabled: ReadonlySignal<boolean>,
-): ReadonlySignal<boolean> {
+  host: HostElement,
+  getEditor: () => Editor | null,
+  getEnabled: () => boolean,
+): () => boolean {
   const selecting = createSignal(false)
   const isPointerDown = createSignal(false)
 
   useEffect(host, () => {
-    if (!enabled.get()) {
-      return
-    }
+    if (!getEnabled()) return
 
-    const view = getSafeEditorView(editor.peek())
+    const view = getSafeEditorView(getEditor())
     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)
@@ -35,15 +31,12 @@ export function useSelecting(
     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)
@@ -55,5 +48,5 @@ export function useSelecting(
     }
   })
 
-  return selecting
+  return selecting.get
 }

package/src/utils/event.ts

@@ -0,0 +1,28 @@
+function cloneKeyboardEvent(source: KeyboardEvent): KeyboardEvent {
+  return new KeyboardEvent(source.type, {
+    code: source.code,
+    key: source.key,
+    location: source.location,
+    repeat: source.repeat,
+    altKey: source.altKey,
+    ctrlKey: source.ctrlKey,
+    metaKey: source.metaKey,
+    shiftKey: source.shiftKey,
+
+    view: source.view,
+    // internal bridge target; events don't need to bubble"
+    bubbles: false,
+    cancelable: true,
+  })
+}
+
+export class KeyboardEventTarget extends EventTarget {
+  override dispatchEvent(event: KeyboardEvent): boolean {
+    const newEvent = cloneKeyboardEvent(event)
+    const result: boolean = super.dispatchEvent(newEvent)
+    if (newEvent.defaultPrevented) {
+      event.preventDefault()
+    }
+    return result
+  }
+}

package/src/utils/lazy-signal.spec.ts

@@ -0,0 +1,68 @@
+import { computed, createSignal, type Signal } from '@aria-ui/core'
+import { describe, expect, it } from 'vitest'
+
+import { createLazySignal } from './lazy-signal.ts'
+
+describe('createLazySignal', () => {
+  it('returns fallback when remote is undefined', () => {
+    const lazy = createLazySignal<number>(() => undefined, 42)
+    expect(lazy.get()).toBe(42)
+  })
+
+  it('delegates get to remote when resolved', () => {
+    const real = createSignal(10)
+    const lazy = createLazySignal<number>(() => real, 0)
+    expect(lazy.get()).toBe(10)
+  })
+
+  it('delegates set to remote when resolved', () => {
+    const real = createSignal(10)
+    const lazy = createLazySignal<number>(() => real, 0)
+    lazy.set(20)
+    expect(real.get()).toBe(20)
+  })
+
+  it('set is a no-op when remote is undefined', () => {
+    const lazy = createLazySignal<number>(() => undefined, 42)
+    expect(() => lazy.set(99)).not.toThrow()
+    expect(lazy.get()).toBe(42)
+  })
+
+  it('propagates reactivity when remote is bound late', () => {
+    const source = createSignal<Signal<number> | undefined>(undefined)
+    const lazy = createLazySignal<number>(() => source.get(), 0)
+    const derived = computed(() => lazy.get())
+
+    expect(derived()).toBe(0)
+
+    const real = createSignal(42)
+    source.set(real)
+    expect(derived()).toBe(42)
+
+    real.set(100)
+    expect(derived()).toBe(100)
+
+    real.set(200)
+    expect(derived()).toBe(200)
+  })
+
+  it('releases old dependency when remote is reparented', () => {
+    const source = createSignal<Signal<number> | undefined>(undefined)
+    const lazy = createLazySignal<number>(() => source.get(), 0)
+    const derived = computed(() => lazy.get())
+
+    const a = createSignal(1)
+    source.set(a)
+    expect(derived()).toBe(1)
+
+    const b = createSignal(100)
+    source.set(b)
+    expect(derived()).toBe(100)
+
+    a.set(999)
+    expect(derived()).toBe(100)
+
+    b.set(200)
+    expect(derived()).toBe(200)
+  })
+})

package/src/utils/lazy-signal.ts

@@ -0,0 +1,17 @@
+import type { Signal } from '@aria-ui/core'
+
+export function createLazySignal<T>(
+  getRemote: () => Signal<T> | undefined,
+  fallback: T,
+): Signal<T> {
+  return {
+    get: (): T => {
+      const remote = getRemote()
+      return remote ? remote.get() : fallback
+    },
+    set: (value: T): void => {
+      const remote = getRemote()
+      if (remote) remote.set(value)
+    },
+  }
+}

package/src/utils/prefers-reduced-motion.ts

@@ -0,0 +1,6 @@
+export function prefersReducedMotion(): boolean {
+  if (typeof window === 'undefined') {
+    return false
+  }
+  return window.matchMedia('(prefers-reduced-motion: reduce)').matches
+}

package/src/utils/prevent-default.ts

@@ -0,0 +1,3 @@
+export function preventDefault(event: Event): void {
+  event.preventDefault()
+}

package/src/utils/use-html-element-at.ts

@@ -0,0 +1,17 @@
+import { computed } from '@aria-ui/core'
+import { isHTMLElement } from '@ocavue/utils'
+import type { Editor } from '@prosekit/core'
+
+export function useHTMLElementAt(
+  getEditor: () => Editor | null | undefined,
+  getPos: () => number | null | undefined,
+): () => HTMLElement | undefined {
+  return computed(() => {
+    const editor = getEditor()
+    const pos = getPos()
+    if (!editor || !pos) return
+    const view = editor.view
+    const element = view.nodeDOM(pos)
+    if (element && isHTMLElement(element)) return element
+  })
+}

package/src/utils/use-no-focus.ts

@@ -0,0 +1,7 @@
+import { onMount, type HostElement } from '@aria-ui/core'
+
+export function useNoFocus(host: HostElement): void {
+  onMount(host, () => {
+    host.tabIndex = -1
+  })
+}

package/dist/get-default-state.js

@@ -1,11 +0,0 @@
-import { createSignal } from "@aria-ui/core";
-//#region src/utils/get-default-state.ts
-function getStateWithDefaults(state, props) {
-	const merged = { ...state };
-	for (const key of Object.keys(props)) if (!merged[key]) merged[key] = createSignal(props[key].default);
-	return merged;
-}
-//#endregion
-export { getStateWithDefaults as t };
-
-//# sourceMappingURL=get-default-state.js.map

package/dist/get-default-state.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"get-default-state.js","names":[],"sources":["../src/utils/get-default-state.ts"],"sourcesContent":["import { createSignal, type PropDeclarations, type SignalState } from '@aria-ui/core'\n\nexport function getStateWithDefaults<\n  Props extends Record<string, any> = Record<string, any>,\n>(\n  state: Partial<SignalState<Props>>,\n  props: PropDeclarations<Props>,\n): SignalState<Props> {\n  const merged = { ...state } as SignalState<Props>\n\n  for (const key of Object.keys(props) as (keyof Props)[]) {\n    if (!merged[key]) {\n      merged[key] = createSignal(props[key].default)\n    }\n  }\n\n  return merged\n}\n"],"mappings":";;AAEA,SAAgB,qBAGd,OACA,OACoB;CACpB,MAAM,SAAS,EAAE,GAAG,OAAO;AAE3B,MAAK,MAAM,OAAO,OAAO,KAAK,MAAM,CAClC,KAAI,CAAC,OAAO,KACV,QAAO,OAAO,aAAa,MAAM,KAAK,QAAQ;AAIlD,QAAO"}

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

@@ -1,18 +0,0 @@
-import { defineCustomElement, registerCustomElement, type BaseElementConstructor } from "@aria-ui/core"
-
-import { useAutocompleteEmpty } from "./setup.ts"
-import { autocompleteEmptyEvents, autocompleteEmptyProps, type AutocompleteEmptyEvents, type AutocompleteEmptyProps } from "./types.ts"
-
-const AutocompleteEmptyElementBase: BaseElementConstructor<AutocompleteEmptyProps> = defineCustomElement<
-  AutocompleteEmptyProps,
-  AutocompleteEmptyEvents
->({
-  props: autocompleteEmptyProps,
-  events: autocompleteEmptyEvents,
-  setup: useAutocompleteEmpty,
-})
-class AutocompleteEmptyElement extends AutocompleteEmptyElementBase {}
-
-registerCustomElement('prosekit-autocomplete-empty', AutocompleteEmptyElement)
-  
-export { AutocompleteEmptyElement }

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

@@ -1,6 +0,0 @@
-import { useListboxEmpty } from '@aria-ui/listbox/elements'
-
-/**
- * @internal
- */
-export const useAutocompleteEmpty: typeof useListboxEmpty = useListboxEmpty

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

@@ -1,13 +0,0 @@
-import type { EventDeclarations, PropDeclarations } from '@aria-ui/core'
-
-/** @internal */
-export interface AutocompleteEmptyProps {}
-
-/** @internal */
-export const autocompleteEmptyProps: PropDeclarations<AutocompleteEmptyProps> = {}
-
-/** @internal */
-export interface AutocompleteEmptyEvents {}
-
-/** @internal */
-export const autocompleteEmptyEvents: EventDeclarations<AutocompleteEmptyEvents> = {}

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

@@ -1,18 +0,0 @@
-import { defineCustomElement, registerCustomElement, type BaseElementConstructor } from "@aria-ui/core"
-
-import { useAutocompleteItem } from "./setup.ts"
-import { autocompleteItemEvents, autocompleteItemProps, type AutocompleteItemEvents, type AutocompleteItemProps } from "./types.ts"
-
-const AutocompleteItemElementBase: BaseElementConstructor<AutocompleteItemProps> = defineCustomElement<
-  AutocompleteItemProps,
-  AutocompleteItemEvents
->({
-  props: autocompleteItemProps,
-  events: autocompleteItemEvents,
-  setup: useAutocompleteItem,
-})
-class AutocompleteItemElement extends AutocompleteItemElementBase {}
-
-registerCustomElement('prosekit-autocomplete-item', AutocompleteItemElement)
-  
-export { AutocompleteItemElement }

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

@@ -1,30 +0,0 @@
-import { useEffect, useEventListener, type ConnectableElement, type SetupOptions } from '@aria-ui/core'
-import { useListboxItem } from '@aria-ui/listbox/elements'
-
-import { openContext } from '../context.ts'
-
-import type { AutocompleteItemEvents, AutocompleteItemProps } from './types.ts'
-
-/**
- * @internal
- */
-export function useAutocompleteItem(
-  element: ConnectableElement,
-  { state, emit }: SetupOptions<AutocompleteItemProps, AutocompleteItemEvents>,
-): void {
-  useListboxItem(element, { state, emit })
-
-  const open = openContext.consume(element)
-
-  useEffect(element, () => {
-    // Check the text content again when the open state changes
-    if (!state.value.peek() && open.get()) {
-      state.value.set(element.textContent ?? '')
-    }
-  })
-
-  useEventListener(element, 'pointerdown', (event) => {
-    // Prevent the editor from losing focus
-    event.preventDefault()
-  })
-}

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

@@ -1,25 +0,0 @@
-import type { EventDeclarations, PropDeclarations } from '@aria-ui/core'
-import { listboxItemEvents, type ListboxItemEvents } from '@aria-ui/listbox'
-
-export interface AutocompleteItemProps {
-  /**
-   * The value of the item, which will be matched against the query.
-   *
-   * If not provided, the value is the item's text content.
-   *
-   * @default ""
-   */
-  value: string
-}
-
-/** @internal */
-export const autocompleteItemProps: PropDeclarations<AutocompleteItemProps> = {
-  value: {
-    default: '',
-  },
-}
-
-export interface AutocompleteItemEvents extends ListboxItemEvents {}
-
-/** @internal */
-export const autocompleteItemEvents: EventDeclarations<AutocompleteItemEvents> = listboxItemEvents

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

@@ -1,18 +0,0 @@
-import { defineCustomElement, registerCustomElement, type BaseElementConstructor } from "@aria-ui/core"
-
-import { useAutocompleteList } from "./setup.ts"
-import { autocompleteListEvents, autocompleteListProps, type AutocompleteListEvents, type AutocompleteListProps } from "./types.ts"
-
-const AutocompleteListElementBase: BaseElementConstructor<AutocompleteListProps> = defineCustomElement<
-  AutocompleteListProps,
-  AutocompleteListEvents
->({
-  props: autocompleteListProps,
-  events: autocompleteListEvents,
-  setup: useAutocompleteList,
-})
-class AutocompleteListElement extends AutocompleteListElementBase {}
-
-registerCustomElement('prosekit-autocomplete-list', AutocompleteListElement)
-  
-export { AutocompleteListElement }

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

@@ -1,125 +0,0 @@
-import {
-  createSignal,
-  useEffect,
-  type ConnectableElement,
-  type ReadonlySignal,
-  type SetupOptions,
-  type TypedEventTarget,
-} from '@aria-ui/core'
-import { listboxProps, useListbox, type ListboxProps } from '@aria-ui/listbox/elements'
-import type { Priority } from '@prosekit/core'
-import { defineDOMEventHandler, withPriority, type Editor } from '@prosekit/core'
-
-import { getStateWithDefaults } from '../../../utils/get-default-state.ts'
-import { onSubmitContext, openContext, queryContext } from '../context.ts'
-
-import type { AutocompleteListEvents, AutocompleteListProps } from './types.ts'
-
-/**
- * @internal
- */
-export function useAutocompleteList(
-  element: ConnectableElement,
-  { state, emit }: SetupOptions<AutocompleteListProps, AutocompleteListEvents>,
-): void {
-  const open = openContext.consume(element)
-  const query = queryContext.consume(element)
-  const onSubmit = onSubmitContext.consume(element)
-
-  const keydownTarget = useKeyDownTarget(element, open, state.editor)
-
-  const listboxState = getStateWithDefaults<ListboxProps>(
-    { filter: state.filter, eventTarget: createSignal(keydownTarget) },
-    listboxProps,
-  )
-
-  useEffect(element, () => {
-    element.addEventListener('valueChange', () => {
-      if (onSubmit) {
-        onSubmit.get()?.()
-      }
-    })
-  })
-
-  useListbox(element, { state: listboxState, emit })
-
-  useEffect(element, () => {
-    listboxState.query.set(query.get())
-  })
-
-  useEffect(element, () => {
-    if (!open.get()) {
-      listboxState.value.set('')
-      query.set('')
-    }
-  })
-
-  // Reset the focused item when the popover is open
-  useEffect(element, () => {
-    if (!open.get()) {
-      listboxState.autoFocus.set(false)
-    } else {
-      let canceled = false
-
-      requestAnimationFrame(() => {
-        if (canceled) return
-        listboxState.autoFocus.set(true)
-      })
-
-      return () => {
-        canceled = true
-      }
-    }
-  })
-
-  // The autocomplete list should not be focusable because the editor will get
-  // the focus during typing.
-  useEffect(element, () => {
-    element.tabIndex = -1
-  })
-}
-
-function useKeyDownTarget(
-  element: ConnectableElement,
-  open: ReadonlySignal<boolean>,
-  editor: ReadonlySignal<Editor | null>,
-): TypedEventTarget<'keydown'> {
-  const keydownHandlers: ((event: KeyboardEvent) => void)[] = []
-
-  useEffect(element, () => {
-    const editorValue = editor.get()
-
-    if (!editorValue) {
-      return
-    }
-
-    const extension = defineDOMEventHandler(
-      'keydown',
-      (view, event): boolean => {
-        if (view.composing || event.defaultPrevented || !open.get()) {
-          return false
-        }
-        keydownHandlers.forEach((handler) => handler(event))
-        return event.defaultPrevented
-      },
-    )
-
-    return editorValue.use(withPriority(extension, 4 satisfies typeof Priority.highest))
-  })
-
-  return {
-    addEventListener: (type, listener) => {
-      if (type === 'keydown') {
-        keydownHandlers.push(listener)
-      }
-    },
-    removeEventListener: (type, listener) => {
-      if (type === 'keydown') {
-        const index = keydownHandlers.indexOf(listener)
-        if (index !== -1) {
-          keydownHandlers.splice(index, 1)
-        }
-      }
-    },
-  }
-}