@threadlabs/looma 0.24.0 → 0.25.0

package/vue/editor/index.js

@@ -5,7 +5,7 @@ import { Extension, Node as Node$1, getText, getTextSerializersFromSchema, merge
 import { BubbleMenu, EditorContent, useEditor } from "@tiptap/vue-3";
 import { closeHistory } from "@tiptap/pm/history";
 import { createLowlight } from "lowlight";
-import { NodeSelection, Plugin, PluginKey, TextSelection } from "@tiptap/pm/state";
+import { AllSelection, NodeSelection, Plugin, PluginKey, TextSelection } from "@tiptap/pm/state";
 import { Decoration, DecorationSet } from "@tiptap/pm/view";
 import { DOMParser, DOMSerializer, Fragment as Fragment$1 } from "@tiptap/pm/model";
 export * from "@threadlabs/looma/editor";
@@ -1801,6 +1801,7 @@ var LoomaEditor = defineComponent({
 		let heldPressTimer;
 		let heldPress = null;
 		const floatingFormattingMode = () => props.toolbarMode !== "sticky" && !(props.toolbarMode === "popover" && props.toolbarOpen) && !mobile.value;
+		const formattingPickerOpen = () => linkOpen.value || tablePickerOpen.value;
 		const cancelHeldPress = () => {
 			clearTimeout(heldPressTimer);
 			heldPressTimer = void 0;
@@ -1808,7 +1809,7 @@ var LoomaEditor = defineComponent({
 		};
 		const formattingSelectionActive = (instance) => {
 			const selection = instance.state.selection;
-			return selection instanceof TextSelection && !dismissedFormattingSelection?.eq(selection) && (!selection.empty || Boolean(heldFormattingSelection?.eq(selection)));
+			return (selection instanceof TextSelection || selection instanceof AllSelection && Boolean(instance.state.doc.textContent)) && !dismissedFormattingSelection?.eq(selection) && (!selection.empty || Boolean(heldFormattingSelection?.eq(selection)));
 		};
 		const editorStateVersion = ref(0);
 		const mobileToolbarMode = ref("formatting");
@@ -2473,6 +2474,11 @@ var LoomaEditor = defineComponent({
 			});
 			if (!editable) chipOpen.value = false;
 		});
+		watch([linkOpen, tablePickerOpen], ([link, table]) => {
+			if (link || table || !floatingFormattingMode() || editor.value?.isFocused || formattingPopup?.popper.contains(document.activeElement)) return;
+			heldFormattingSelection = null;
+			formattingPopup?.hide();
+		});
 		watch(() => props.label, (label) => {
 			editor.value?.setOptions({ editorProps: { attributes: {
 				role: "textbox",
@@ -2667,7 +2673,7 @@ var LoomaEditor = defineComponent({
 			updateCodeUi();
 			setTimeout(() => {
 				if (!tableInteractionActive && !editor.value?.isFocused) editorFocused.value = false;
-				if (!editor.value?.isFocused && !formattingPopup?.popper.contains(document.activeElement)) heldFormattingSelection = null;
+				if (!editor.value?.isFocused && !formattingPickerOpen() && !formattingPopup?.popper.contains(document.activeElement)) heldFormattingSelection = null;
 			}, 0);
 		};
 		const bindEditorUi = (instance) => {
@@ -2741,7 +2747,7 @@ var LoomaEditor = defineComponent({
 			cancelHeldPress();
 			if (event.key !== "Escape" || !floatingFormattingMode() || !(event.target instanceof Node) || !(root.value?.contains(event.target) || formattingPopup?.popper.contains(event.target))) return;
 			const selection = editor.value?.state.selection;
-			dismissedFormattingSelection = selection instanceof TextSelection ? selection : null;
+			dismissedFormattingSelection = selection instanceof TextSelection || selection instanceof AllSelection ? selection : null;
 			heldFormattingSelection = null;
 			formattingPopup?.hide();
 			hideTool();
@@ -3208,7 +3214,7 @@ var LoomaEditor = defineComponent({
 					editor: instance,
 					pluginKey: "looma-text-formatting-menu",
 					updateDelay: 0,
-					shouldShow: ({ editor: menuEditor }) => (props.toolbarMode !== "popover" || !props.toolbarOpen) && !slash.active && !mention.active && (menuEditor.isFocused || linkContextEditing.value) && formattingSelectionActive(menuEditor),
+					shouldShow: ({ editor: menuEditor }) => (props.toolbarMode !== "popover" || !props.toolbarOpen) && !slash.active && !mention.active && (menuEditor.isFocused || linkContextEditing.value || formattingPickerOpen()) && formattingSelectionActive(menuEditor),
 					tippyOptions: {
 						onCreate: (popup) => {
 							formattingPopup = popup;
@@ -3218,6 +3224,7 @@ var LoomaEditor = defineComponent({
 						},
 						appendTo: () => root.value?.closest("dialog[open], [popover]") ?? document.body,
 						onShow: () => announceOverlayOpen(root.value?.ownerDocument ?? document, root.value),
+						onHide: () => instance.isEditable && floatingFormattingMode() && formattingPickerOpen() && formattingSelectionActive(instance) ? false : void 0,
 						duration: 100,
 						maxWidth: "none",
 						placement: "top",

package/vue/host.ts

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.26 for Vue 3.5. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.29 for Vue 3.5. Do not edit.
 import {
   computed,
   Fragment,
@@ -13,6 +13,182 @@ import {
   watchEffect,
 } from 'vue'
 
+interface ControllerStateAccess {
+  readonly get: () => unknown
+  readonly set: (value: unknown) => void
+}
+interface ControllerNamespaces {
+  readonly state: Readonly<Record<string, ControllerStateAccess>>
+  readonly computed: Readonly<Record<string, () => unknown>>
+  readonly data?: Readonly<Record<string, () => unknown>>
+  readonly acceptsState?: (name: string, keys: readonly string[], value: unknown) => boolean
+  readonly changed?: (name: string) => void
+}
+
+function controllerNamespaces(options: ControllerNamespaces, source: string): {
+  state: Record<string, unknown>
+  data: Readonly<Record<string, unknown>>
+} {
+  const reported = new Set<string>()
+  const nested = new WeakMap<object, Map<string, object>>()
+  const eventType = typeof Event === 'undefined'
+    ? undefined
+    : Object.getOwnPropertyDescriptor(Event.prototype, 'type')!.get!
+  const eventBrands = new WeakMap<object, boolean>()
+  const nativeEvent = (value: object): boolean => {
+    if (!('type' in value) || eventType === undefined) return false
+    const known = eventBrands.get(value)
+    if (known !== undefined) return known
+    let accepted = false
+    try {
+      eventType.call(value)
+      accepted = true
+    } catch {}
+    eventBrands.set(value, accepted)
+    return accepted
+  }
+  const warn = (path: string, readonly: boolean): void => {
+    if (reported.has(path)) return
+    reported.add(path)
+    console.warn(
+      source + ': HR007: Destination ' + path
+        + (readonly ? ' is read-only.' : ' does not satisfy its declared type.'),
+    )
+  }
+  const write = (
+    name: string,
+    keys: readonly string[],
+    value: unknown,
+    readonly: boolean,
+    apply: () => void,
+  ): boolean => {
+    if (readonly || options.acceptsState?.(name, keys, value) === false) {
+      warn([name, ...keys].join('.'), readonly)
+    } else apply()
+    return true
+  }
+  const wrap = (
+    value: unknown,
+    name: string,
+    keys: readonly string[],
+    readonly: boolean,
+  ): unknown => {
+    if (value === null || typeof value !== 'object' || nativeEvent(value)) return value
+    const path = [name, ...keys].join('.')
+    let paths = nested.get(value)
+    if (paths === undefined) nested.set(value, paths = new Map())
+    const known = paths.get(path)
+    if (known !== undefined) return known
+    // A readonly facade avoids Proxy invariants on frozen source properties.
+    const surface = readonly
+      ? (Array.isArray(value) ? [] : Object.create(Object.getPrototypeOf(value)))
+      : value
+    if (readonly && Array.isArray(value)) surface.length = value.length
+    const proxy = new Proxy(surface, {
+      get: (_target, key) => wrap(Reflect.get(value, key), name, [...keys, String(key)], readonly),
+      set: (_target, key, next) =>
+        write(name, [...keys, String(key)], next, readonly, () => {
+          const previous = Reflect.get(value, key)
+          if (Reflect.set(value, key, next) && !Object.is(previous, next)) options.changed?.(name)
+        }),
+      has: (_target, key) => Reflect.has(value, key),
+      ownKeys: () => Reflect.ownKeys(value),
+      getOwnPropertyDescriptor: (_target, key) => {
+        if (readonly && Array.isArray(value) && key === 'length') {
+          surface.length = value.length
+          return Reflect.getOwnPropertyDescriptor(surface, key)
+        }
+        const descriptor = Reflect.getOwnPropertyDescriptor(value, key)
+        return descriptor === undefined
+          ? undefined
+          : readonly
+          ? { ...descriptor, configurable: true }
+          : descriptor
+      },
+      deleteProperty: (_target, key) =>
+        write(name, [...keys, String(key)], undefined, readonly, () => {
+          if (Reflect.has(value, key) && Reflect.deleteProperty(value, key)) options.changed?.(name)
+        }),
+      defineProperty: (_target, key, descriptor) => {
+        if (
+          readonly || !('value' in descriptor)
+          || options.acceptsState?.(name, [...keys, String(key)], descriptor.value) === false
+        ) {
+          warn([name, ...keys, String(key)].join('.'), readonly)
+          return false
+        }
+        const changed = Reflect.defineProperty(value, key, descriptor)
+        if (changed) options.changed?.(name)
+        return changed
+      },
+    })
+    paths.set(path, proxy)
+    return proxy
+  }
+  const state = new Proxy({} as Record<string, unknown>, {
+    get: (_target, name) => {
+      if (typeof name !== 'string') return undefined
+      if (Object.hasOwn(options.state, name)) {
+        return wrap(options.state[name]!.get(), name, [], false)
+      }
+      if (Object.hasOwn(options.computed, name)) {
+        return wrap(options.computed[name]!(), name, [], true)
+      }
+      return undefined
+    },
+    set: (_target, name, value) =>
+      write(
+        String(name),
+        [],
+        value,
+        typeof name !== 'string' || !Object.hasOwn(options.state, name),
+        () => options.state[String(name)]!.set(value),
+      ),
+    deleteProperty: (_target, name) => {
+      warn(String(name), true)
+      return true
+    },
+    defineProperty: (_target, name) => {
+      warn(String(name), true)
+      return false
+    },
+    has: (_target, name) =>
+      typeof name === 'string'
+      && (Object.hasOwn(options.state, name) || Object.hasOwn(options.computed, name)),
+  })
+  const data = new Proxy({} as Record<string, unknown>, {
+    get: (_target, name) =>
+      typeof name === 'string' && Object.hasOwn(options.data ?? {}, name)
+        ? wrap(options.data![name]!(), 'data.' + name, [], true)
+        : undefined,
+    set: (_target, name, value) => write('data.' + String(name), [], value, true, () => {}),
+    deleteProperty: (_target, name) => {
+      warn('data.' + String(name), true)
+      return true
+    },
+    defineProperty: (_target, name) => {
+      warn('data.' + String(name), true)
+      return false
+    },
+    has: (_target, name) => typeof name === 'string' && Object.hasOwn(options.data ?? {}, name),
+  })
+  return { state, data }
+}
+
+export function dispatchToTargets(recorded: unknown, send: (target: Element) => void): void {
+  const refs = recorded instanceof Set
+    ? [...recorded]
+    : Array.isArray(recorded)
+    ? [...recorded]
+    : [recorded]
+  const targets = refs.map((ref: any) => ref?.nodeType === 1 ? ref : ref?.$el)
+    .filter((element): element is Element => element?.nodeType === 1 && element.isConnected)
+    .sort((a, b) => a === b ? 0 : a.compareDocumentPosition(b) & 4 ? -1 : 1)
+  for (const target of targets) {
+    if (target.isConnected) send(target)
+  }
+}
+
 interface DataReadOptions {
   readonly source: string
   readonly definition: string
@@ -218,6 +394,7 @@ export interface ComponentHostOptions {
   readonly data?: Readonly<Record<string, Readable<unknown>>>
   /** Values inherited through declared context, which a controller reads. */
   readonly context?: Readonly<Record<string, Readable<unknown>>>
+  readonly acceptsState?: (name: string, keys: readonly string[], value: unknown) => boolean
 }
 
 /** Vue does not promise a `v-for` ref array in source order, and the host does. */
@@ -300,16 +477,32 @@ export function useComponentHost(
         throw controllerDiagnostic('HJ001', error)
       })
   const stops: Array<() => void> = []
-  const readState = (name: string): unknown =>
-    Object.hasOwn(state, name)
-      ? state[name]!.value
-      : Object.hasOwn(computedValues, name)
-      ? computedValues[name]!.value
-      : Object.hasOwn(data, name)
-      ? data[name]!.value
-      : Object.hasOwn(context, name)
-      ? context[name]!.value
-      : undefined
+  const connected = shallowRef(false)
+  const pauses = new Map<() => void, () => void>()
+  const subscriptions = new Set<
+    {
+      type: string
+      callback: (event: Event) => void | (() => void)
+      target?: Element
+      cleanup?: void | (() => void)
+    }
+  >()
+  type Subscription = typeof subscriptions extends Set<infer S> ? S : never
+  const activate = (entry: Subscription): void => {
+    if (entry.type === 'connect') entry.cleanup = entry.callback(new Event('connect'))
+    else if (entry.type !== 'disconnect') {
+      entry.target = root.value ?? undefined
+      entry.target?.addEventListener(entry.type, entry.callback as EventListener)
+    }
+  }
+  const deactivate = (entry: Subscription, disconnecting: boolean): void => {
+    entry.target?.removeEventListener(entry.type, entry.callback as EventListener)
+    entry.target = undefined
+    const cleanup = entry.cleanup
+    entry.cleanup = undefined
+    cleanup?.()
+    if (disconnecting && entry.type === 'disconnect') entry.callback(new Event('disconnect'))
+  }
   const propHandles = Object.create(null) as Record<string, unknown>
   for (const name of propNames) {
     const validity = () => options.propValidity?.(name)
@@ -333,20 +526,33 @@ export function useComponentHost(
     get root(): Element {
       return root.value as Element
     },
-    state: new Proxy({} as Record<string, unknown>, {
-      get: (_target, name) => typeof name === 'string' ? readState(name) : undefined,
-      set: (_target, name, value) => {
-        if (typeof name !== 'string' || !Object.hasOwn(state, name)) {
-          throw new TypeError(`Only declared state is writable; \`${String(name)}\` is not.`)
-        }
-        state[name]!.value = value
-        return true
-      },
-      has: (_target, name) =>
-        typeof name === 'string'
-        && (Object.hasOwn(state, name) || Object.hasOwn(computedValues, name)
-          || Object.hasOwn(data, name) || Object.hasOwn(context, name)),
-    }),
+    ...controllerNamespaces({
+      state: Object.fromEntries(
+        Object.entries(state).map(([name, value]) => [name, {
+          get: () => value.value,
+          set: (next: unknown) => {
+            value.value = next
+          },
+        }]),
+      ),
+      computed: Object.fromEntries(
+        [...Object.entries(computedValues), ...Object.entries(context)].map((
+          [name, value],
+        ) => [name, () => value.value]),
+      ),
+      data: Object.fromEntries(
+        Object.entries(data).map(([name, value]) => [name, () => value.value]),
+      ),
+      acceptsState: options.acceptsState,
+    }, options.controllerSource?.definition ?? '<component>'),
+    on(type: string, callback: (event: Event) => void | (() => void)): () => void {
+      const entry: Subscription = { type, callback }
+      subscriptions.add(entry)
+      if (connected.value) activate(entry)
+      return () => {
+        if (subscriptions.delete(entry)) deactivate(entry, false)
+      }
+    },
     props: Object.freeze(propHandles),
     refs: Object.defineProperties(
       {},
@@ -383,12 +589,24 @@ export function useComponentHost(
       return { get: (): T => value.value }
     },
     effect(run: () => void | (() => void)): () => void {
-      const stop = watchEffect((onCleanup) => {
-        const cleanup = run()
-        if (typeof cleanup === 'function') onCleanup(cleanup)
+      let cleanup: void | (() => void)
+      const pause = (): void => {
+        const previous = cleanup
+        cleanup = undefined
+        previous?.()
+      }
+      const stop = watchEffect(() => {
+        pause()
+        if (connected.value) cleanup = run()
       }, { flush: 'post' })
-      stops.push(stop)
-      return stop
+      const dispose = (): void => {
+        stop()
+        pause()
+        pauses.delete(dispose)
+      }
+      pauses.set(dispose, pause)
+      stops.push(dispose)
+      return dispose
     },
     dispatch,
   }
@@ -397,13 +615,14 @@ export function useComponentHost(
   let started: Promise<ControllerModule> | undefined
   let stopObserving: (() => void) | undefined
   let connection = 0
-  let connected = false
+  let initialized = false
   let unmounted = false
   const disconnect = (): void => {
-    if (!connected) return
-    connected = false
+    if (!connected.value) return
+    connected.value = false
     connection += 1
-    for (const stop of stops.splice(0)) stop()
+    for (const pause of pauses.values()) pause()
+    for (const entry of subscriptions) deactivate(entry, true)
     cleanup?.()
     cleanup = undefined
   }
@@ -413,14 +632,27 @@ export function useComponentHost(
       disconnect()
       return
     }
-    if (connected) return
-    connected = true
+    if (connected.value) {
+      for (const entry of subscriptions) {
+        if (
+          entry.type !== 'connect' && entry.type !== 'disconnect' && entry.target !== root.value
+        ) {
+          deactivate(entry, false)
+          activate(entry)
+        }
+      }
+      return
+    }
+    connected.value = true
+    for (const entry of subscriptions) activate(entry)
+    if (initialized) return
     const current = ++connection
     started = loadControllerModule().then(async (loaded) => {
-      if (!connected || current !== connection) return loaded
+      if (!connected.value || current !== connection || initialized) return loaded
+      initialized = true
       const result = await loaded.default(host as never)
       if (typeof result === 'function') {
-        if (!connected || current !== connection) result()
+        if (!connected.value || current !== connection) result()
         else cleanup = result as () => void
       }
       return loaded
@@ -443,9 +675,10 @@ export function useComponentHost(
     unmounted = true
     stopObserving?.()
     disconnect()
+    for (const stop of stops.splice(0)) stop()
+    subscriptions.clear()
   })
-  /** `ready` settles once the controller has started; a method exposed by the component awaits it. */
-  return { host, ready: (): Promise<ControllerModule> | undefined => started }
+  return host
 }
 
 export interface DispatchOptions {
@@ -514,13 +747,13 @@ export function createDispatch(
   root: Readable<HTMLElement | null>,
   emit?: (name: string, detail: unknown) => void,
   options: DispatchOptions = {},
-): (name: string, detail?: unknown) => boolean {
+): (name: string, detail?: unknown, targets?: unknown) => boolean {
   const { declared = {}, checks = {}, modeled = [] } = options
   // One change can be reported by more than one event — a choice is both a select and a change —
   // and each carries the new value. The prop updates once per change: a value already reported in
   // this turn of the event loop is not reported again.
   const reported = new Map<string, unknown>()
-  return (name, detail) => {
+  return (name, detail, targets) => {
     const check = checks[name]
     if (detail !== undefined && check !== undefined && !check(detail)) {
       throw new HtmlDiagnosticError(
@@ -528,6 +761,17 @@ export function createDispatch(
         `Event \`${name}\` detail does not satisfy its declared type.`,
       )
     }
+    if (targets !== undefined) {
+      let accepted = true
+      dispatchToTargets(targets, target => {
+        if (
+          !target.dispatchEvent(
+            new CustomEvent(name, { bubbles: true, composed: true, ...declared[name], detail }),
+          )
+        ) accepted = false
+      })
+      return accepted
+    }
     if (detail !== null && typeof detail === 'object') {
       for (const prop of modeled) {
         if (!(prop in detail)) continue