@ai-composer/dom 0.0.0-stage → 0.1.0

package/src/selection.ts

@@ -0,0 +1,141 @@
+/**
+ * DOM selection ↔ model selection mapping. All coordinates are computed as
+ * document-wide offsets over the same segment order the renderer produces:
+ * text characters, `<br>` = 1, chip = 1.
+ */
+
+import {
+  clampSelection,
+  createSelection,
+  fromGlobalOffset,
+  globalRange,
+  type AIComposerDocument,
+  type SelectionState,
+} from '@ai-composer/core';
+
+interface DomPoint {
+  node: Node;
+  offset: number;
+}
+
+function isChip(node: Node): boolean {
+  return node instanceof HTMLElement && node.hasAttribute('data-aic-node');
+}
+
+/** Global offset of a DOM point inside the host, or null when outside. */
+function globalOffsetOfPoint(host: HTMLElement, target: Node, targetOffset: number): number | null {
+  let offset = 0;
+  let found = false;
+
+  const visit = (current: Node): boolean => {
+    if (found) return true;
+    if (current === target) {
+      offset += targetOffset;
+      found = true;
+      return true;
+    }
+    if (current.nodeType === Node.TEXT_NODE) {
+      offset += current.textContent?.length ?? 0;
+      return false;
+    }
+    if (current.nodeName === 'BR' || isChip(current)) {
+      offset += 1;
+      return false;
+    }
+    for (const child of Array.from(current.childNodes)) {
+      if (visit(child)) return true;
+    }
+    return false;
+  };
+
+  visit(host);
+  return found ? offset : null;
+}
+
+/** DOM point at a global offset, or the host end as fallback. */
+function domPointAtGlobal(host: HTMLElement, globalOffset: number): DomPoint {
+  let remaining = globalOffset;
+
+  const pointBefore = (node: Node): DomPoint => ({ node: node.parentNode ?? host, offset: indexOfChild(node) });
+  const indexOfChild = (node: Node): number =>
+    node.parentNode ? Array.prototype.indexOf.call(node.parentNode.childNodes, node) : 0;
+
+  const visit = (parent: Node): DomPoint | null => {
+    for (const child of Array.from(parent.childNodes)) {
+      if (child.nodeType === Node.TEXT_NODE) {
+        const length = child.textContent?.length ?? 0;
+        if (remaining <= length) return { node: child, offset: remaining };
+        remaining -= length;
+        continue;
+      }
+      if (child.nodeName === 'BR' || isChip(child)) {
+        if (remaining <= 0) return pointBefore(child);
+        remaining -= 1;
+        if (remaining <= 0) return { node: child.parentNode ?? host, offset: indexOfChild(child) + 1 };
+        continue;
+      }
+      const nested = visit(child);
+      if (nested) return nested;
+    }
+    return null;
+  };
+
+  return visit(host) ?? { node: host, offset: host.childNodes.length };
+}
+
+/** Read the DOM selection inside `host` as a model selection. */
+export function domSelectionToModel(
+  host: HTMLElement,
+  document_: AIComposerDocument,
+): SelectionState | null {
+  const selection = host.ownerDocument.getSelection();
+  if (!selection || selection.rangeCount === 0) return null;
+  const anchorNode = selection.anchorNode;
+  const focusNode = selection.focusNode;
+  if (!anchorNode || !focusNode || !host.contains(anchorNode) || !host.contains(focusNode)) {
+    return null;
+  }
+
+  const anchorOffset = globalOffsetOfPoint(host, anchorNode, selection.anchorOffset);
+  const focusOffset = globalOffsetOfPoint(host, focusNode, selection.focusOffset);
+  if (anchorOffset === null || focusOffset === null) return null;
+
+  return clampSelection(
+    document_,
+    createSelection(fromGlobalOffset(document_, anchorOffset), fromGlobalOffset(document_, focusOffset)),
+  );
+}
+
+/** Apply a model selection to the DOM (caret restore after renders). */
+export function applyModelSelection(
+  host: HTMLElement,
+  document_: AIComposerDocument,
+  selection: SelectionState,
+): void {
+  const ownerDocument = host.ownerDocument;
+  const domSelection = ownerDocument.getSelection();
+  if (!domSelection) return;
+
+  const { start, end } = globalRange(document_, selection);
+  const startPoint = domPointAtGlobal(host, start);
+  const endPoint = start === end ? startPoint : domPointAtGlobal(host, end);
+
+  try {
+    const range = ownerDocument.createRange();
+    range.setStart(startPoint.node, startPoint.offset);
+    range.setEnd(endPoint.node, endPoint.offset);
+    domSelection.removeAllRanges();
+    domSelection.addRange(range);
+  } catch {
+    // Browsers can reject boundary points mid-render; the next render retries.
+  }
+}
+
+/** Caret to the end of the host content. */
+export function caretToEnd(host: HTMLElement, document_: AIComposerDocument): SelectionState {
+  const length = document_.nodes.reduce(
+    (sum, node) => sum + (node.type === 'text' ? node.text.length : 1),
+    0,
+  );
+  return createSelection(fromGlobalOffset(document_, length));
+}

package/src/suggestions.ts

@@ -0,0 +1,146 @@
+/**
+ * Suggestion menu — a true popup (ADR-0001 style projection): it opens at the
+ * caret where the trigger key was hit, never reserving DOM space, and flips /
+ * clamps itself to the viewport (see ./popup). Keyboard navigation lives in
+ * the editable surface; this module renders and handles clicks.
+ */
+
+import type { AIComposer, SuggestionItem, Unsubscribe } from '@ai-composer/core';
+import { attachCaretAnchoredPopup, type CaretAnchor } from './popup';
+
+export interface SuggestionListOptions {
+  /** Custom item renderer; default is a simple label/description row. */
+  renderItem?: (item: SuggestionItem, active: boolean) => HTMLElement;
+  /** The editable host to wire aria-controls / aria-activedescendant onto. */
+  inputHost?: HTMLElement;
+  /** Preferred popup placement relative to the caret; flips to fit the viewport. */
+  placement?: 'above' | 'below';
+  /** Decorative keyboard-hints footer (default true). */
+  showKbdHints?: boolean;
+}
+
+export interface SuggestionList {
+  readonly element: HTMLElement;
+  destroy(): void;
+}
+
+let listCounter = 0;
+
+/** Decorative footer: ↑↓ navigate · ↵ select · esc close (aria-hidden). */
+function kbdHintsFooter(): HTMLElement {
+  const li = document.createElement('li');
+  li.className = 'aic-suggestion-footer';
+  li.setAttribute('role', 'presentation');
+  li.setAttribute('aria-hidden', 'true');
+  const hints: Array<[string, string]> = [
+    ['↑↓', 'navigate'],
+    ['↵', 'select'],
+    ['esc', 'close'],
+  ];
+  hints.forEach(([key, action], index) => {
+    const kbd = document.createElement('kbd');
+    kbd.textContent = key;
+    li.append(kbd, document.createTextNode(action));
+    if (index < hints.length - 1) li.append(document.createElement('span'));
+  });
+  return li;
+}
+
+export function createSuggestionList(
+  editor: AIComposer,
+  element?: HTMLElement,
+  options: SuggestionListOptions = {},
+): SuggestionList {
+  const list = element ?? document.createElement('ul');
+  if (!list.id) list.id = `aic-suggestions-${(listCounter += 1)}`;
+  list.className = 'aic-suggestions';
+  list.setAttribute('role', 'listbox');
+  list.setAttribute('aria-hidden', 'true');
+  list.hidden = true;
+
+  let anchor: CaretAnchor | null = null;
+
+  const defaultItem = (item: SuggestionItem, active: boolean): HTMLElement => {
+    const li = document.createElement('li');
+    li.className = 'aic-suggestion' + (active ? ' aic-active' : '');
+    li.setAttribute('role', 'option');
+    if (item.description) {
+      const label = document.createElement('span');
+      label.className = 'aic-suggestion-label';
+      label.textContent = item.label;
+      const description = document.createElement('span');
+      description.className = 'aic-suggestion-description';
+      description.textContent = item.description;
+      li.append(label, description);
+    } else {
+      li.textContent = item.label;
+    }
+    return li;
+  };
+
+  const renderItem = options.renderItem ?? defaultItem;
+
+  const sync = (state: ReturnType<AIComposer['getState']>): void => {
+    const open = state.activeTrigger !== null && state.suggestions.length > 0;
+    list.hidden = !open;
+    list.setAttribute('aria-hidden', String(!open));
+
+    const input = options.inputHost;
+    if (input) {
+      input.setAttribute('aria-controls', list.id);
+      input.setAttribute('aria-expanded', String(open));
+      if (open && state.activeSuggestionIndex >= 0) {
+        input.setAttribute('aria-activedescendant', `${list.id}-option-${state.activeSuggestionIndex}`);
+      } else {
+        input.removeAttribute('aria-activedescendant');
+      }
+    }
+
+    list.textContent = '';
+    if (!open) return;
+
+    if (input && !anchor) {
+      // Anchors to the caret inside the input host; the popup itself must be
+      // attached to a positioned ancestor (`.aic-input-wrap`) — by the time it
+      // opens it has been appended there.
+      anchor = attachCaretAnchoredPopup(list, input, { placement: options.placement });
+    }
+
+    state.suggestions.forEach((item, index) => {
+      const active = index === state.activeSuggestionIndex;
+      const li = renderItem(item, active);
+      li.id = `${list.id}-option-${index}`;
+      li.setAttribute('role', 'option');
+      li.setAttribute('aria-selected', String(active));
+      li.addEventListener('mousedown', (event) => event.preventDefault()); // keep caret in place
+      li.addEventListener('click', () => {
+        void editor.acceptSuggestion(item);
+      });
+      list.appendChild(li);
+    });
+
+    if (options.showKbdHints !== false) {
+      list.appendChild(kbdHintsFooter());
+    }
+
+    // Position after items exist so the measured height is real.
+    anchor?.update();
+  };
+
+  const unsubscribe: Unsubscribe = editor.subscribe(sync);
+  const offDestroy = editor.on('destroy', () => destroy());
+
+  function destroy(): void {
+    unsubscribe();
+    offDestroy();
+    anchor?.destroy();
+    anchor = null;
+    list.textContent = '';
+    list.hidden = true;
+    list.remove();
+  }
+
+  sync(editor.getState());
+
+  return { element: list, destroy };
+}

package/src/surface.test.ts

@@ -0,0 +1,266 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import {
+  createAttachmentNode,
+  createAIComposer,
+  createDefaultNodeRegistry,
+  createMentionNode,
+  createTextNode,
+} from '@ai-composer/core';
+import { createEditableSurface } from './surface';
+import { parseEditableHost, htmlToPlainText } from './parse';
+import { mountAIComposer } from './mount';
+
+const registry = createDefaultNodeRegistry();
+
+let container: HTMLElement;
+
+beforeEach(() => {
+  container = document.createElement('div');
+  document.body.appendChild(container);
+});
+
+describe('parse + render round-trip', () => {
+  it('parses text and chips back into the model', () => {
+    const editor = createAIComposer({
+      value: [createTextNode('hi '), createMentionNode({ id: 'u1', label: 'Ada' }), createTextNode('!')],
+    });
+    const host = document.createElement('div');
+    const surface = createEditableSurface(editor, host);
+    container.appendChild(host);
+
+    const parsed = parseEditableHost(host, editor.nodes);
+    expect(parsed.nodes.map((n) => (n.type === 'text' ? n.text : n.type))).toEqual([
+      'hi ',
+      'mention',
+      '!',
+    ]);
+    surface.destroy();
+  });
+
+  it('flattens unknown markup to plain text (sanitization)', () => {
+    const host = document.createElement('div');
+    host.innerHTML = 'a<div onclick="evil()"><b>b</b></div><script>alert(1)</script>c';
+    const parsed = parseEditableHost(host, registry);
+    expect(parsed.nodes).toHaveLength(1);
+    expect((parsed.nodes[0] as { text: string }).text).toBe('abc');
+  });
+
+  it('converts <br> to newlines', () => {
+    const host = document.createElement('div');
+    host.innerHTML = 'one<br>two';
+    const parsed = parseEditableHost(host, registry);
+    expect((parsed.nodes[0] as { text: string }).text).toBe('one\ntwo');
+  });
+
+  it('extracts plain text from HTML on the paste path', () => {
+    expect(htmlToPlainText('<p>Hello</p><p><b>World</b></p>')).toContain('Hello');
+    expect(htmlToPlainText('a<br>b')).toBe('a\nb');
+  });
+});
+
+describe('editable surface', () => {
+  it('shows attachments in the attachments slot, not inline with input text', () => {
+    const editor = createAIComposer({
+      value: [createTextNode('Review this'), createAttachmentNode({
+        id: 'f1',
+        name: 'spec.pdf',
+        mimeType: 'application/pdf',
+      })],
+    });
+    const mounted = mountAIComposer(container, editor, { mode: 'chat' });
+    const inlineAttachment = mounted.input.querySelector('[data-aic-node="attachment"]');
+
+    expect(inlineAttachment?.hasAttribute('hidden')).toBe(true);
+    expect(mounted.slots.attachments.querySelectorAll('.aic-attachment-name')).toHaveLength(1);
+    expect(mounted.slots.attachments.textContent).toContain('spec.pdf');
+    expect(parseEditableHost(mounted.input, editor.nodes).nodes.map((node) => node.type)).toEqual([
+      'text',
+      'attachment',
+    ]);
+
+    mounted.destroy();
+  });
+
+  it('renders the document into the host', () => {
+    const editor = createAIComposer({ value: 'hello' });
+    const host = document.createElement('div');
+    const surface = createEditableSurface(editor, host);
+    expect(host.textContent).toBe('hello');
+    surface.destroy();
+  });
+
+  it('syncs user DOM edits back into the model', () => {
+    const editor = createAIComposer();
+    const host = document.createElement('div');
+    const surface = createEditableSurface(editor, host);
+    container.appendChild(host);
+
+    host.textContent = 'typed by user';
+    host.dispatchEvent(new Event('input', { bubbles: true }));
+
+    expect(editor.serialize('text')).toBe('typed by user');
+    surface.destroy();
+  });
+
+  it('re-renders on programmatic model changes', () => {
+    const editor = createAIComposer();
+    const host = document.createElement('div');
+    const surface = createEditableSurface(editor, host);
+    editor.insertNode(createMentionNode({ id: 'u1', label: 'Ada' }));
+    expect(host.textContent).toBe('@Ada ');
+    expect(host.querySelector('[data-aic-node="mention"]')).not.toBeNull();
+    surface.destroy();
+  });
+
+  it('Enter submits when suggestions are closed (submitKey=enter)', () => {
+    const onSubmit = vi.fn();
+    const editor = createAIComposer({ value: 'hello', submit: { onSubmit } });
+    const host = document.createElement('div');
+    const surface = createEditableSurface(editor, host);
+    container.appendChild(host);
+
+    const enter = new KeyboardEvent('keydown', { key: 'Enter', bubbles: true, cancelable: true });
+    host.dispatchEvent(enter);
+
+    expect(enter.defaultPrevented).toBe(true);
+    expect(onSubmit).toHaveBeenCalledTimes(1);
+    surface.destroy();
+  });
+
+  it('Shift+Enter inserts a newline instead of submitting', () => {
+    const onSubmit = vi.fn();
+    const editor = createAIComposer({ value: 'hello', submit: { onSubmit } });
+    const host = document.createElement('div');
+    const surface = createEditableSurface(editor, host);
+    container.appendChild(host);
+
+    host.dispatchEvent(
+      new KeyboardEvent('keydown', { key: 'Enter', shiftKey: true, bubbles: true, cancelable: true }),
+    );
+
+    expect(onSubmit).not.toHaveBeenCalled();
+    expect(editor.serialize('text')).toBe('hello\n');
+    surface.destroy();
+  });
+
+  it('undo/redo keyboard shortcuts route through history', () => {
+    const editor = createAIComposer();
+    const host = document.createElement('div');
+    const surface = createEditableSurface(editor, host);
+    container.appendChild(host);
+
+    host.textContent = 'step';
+    host.dispatchEvent(new Event('input', { bubbles: true }));
+    expect(editor.serialize('text')).toBe('step');
+
+    host.dispatchEvent(
+      new KeyboardEvent('keydown', { key: 'z', metaKey: true, bubbles: true, cancelable: true }),
+    );
+    expect(editor.getState().empty).toBe(true);
+
+    host.dispatchEvent(
+      new KeyboardEvent('keydown', { key: 'z', metaKey: true, shiftKey: true, bubbles: true, cancelable: true }),
+    );
+    expect(editor.serialize('text')).toBe('step');
+    surface.destroy();
+  });
+
+  it('reflects disabled/readonly state on the host', () => {
+    const editor = createAIComposer();
+    const host = document.createElement('div');
+    const surface = createEditableSurface(editor, host);
+    expect(host.getAttribute('contenteditable')).toBe('true');
+
+    editor.setReadonly(true);
+    expect(host.getAttribute('contenteditable')).toBe('false');
+    expect(host.hasAttribute('data-aic-readonly')).toBe(true);
+
+    editor.setReadonly(false);
+    editor.setDisabled(true);
+    expect(host.getAttribute('contenteditable')).toBe('false');
+    surface.destroy();
+  });
+
+  it('placeholder attributes are managed for CSS', () => {
+    const editor = createAIComposer({ placeholder: 'Ask anything…' });
+    const host = document.createElement('div');
+    const surface = createEditableSurface(editor, host);
+    expect(host.getAttribute('data-placeholder')).toBe('Ask anything…');
+    expect(host.hasAttribute('data-aic-empty')).toBe(true);
+    surface.destroy();
+  });
+});
+
+describe('mountAIComposer (vanilla)', () => {
+  it('builds the chat layout and submits from the toolbar', async () => {
+    const onSubmit = vi.fn();
+    const editor = createAIComposer({ value: 'ping', mode: 'chat', submit: { onSubmit } });
+    const mounted = mountAIComposer(container, editor);
+
+    expect(mounted.root.getAttribute('data-aic-mode')).toBe('chat');
+    expect(mounted.slots.toolbar).toBeDefined();
+    expect(mounted.input.getAttribute('role')).toBe('textbox');
+
+    const submitButton = mounted.slots.toolbar.querySelector<HTMLButtonElement>('[data-aic-action="submit"]');
+    expect(submitButton).not.toBeNull();
+    submitButton!.click();
+    await vi.waitFor(() => expect(onSubmit).toHaveBeenCalledTimes(1));
+
+    mounted.destroy();
+    expect(container.textContent).toBe('');
+  });
+
+  it('compact renders inline send; modes switch live without remount', () => {
+    const editor = createAIComposer({ mode: 'compact', value: 'draft' });
+    const mounted = mountAIComposer(container, editor);
+
+    expect(mounted.root.getAttribute('data-aic-mode')).toBe('compact');
+    // Compact keeps one line: chips + input + send laid out by CSS.
+    expect(mounted.slots.toolbar.hidden).toBe(false);
+    expect(mounted.slots.toolbar.querySelector('[data-aic-action="submit"]')).not.toBeNull();
+    expect(mounted.slots.header.hidden).toBe(true);
+    expect(mounted.slots.footer.hidden).toBe(true);
+    // Compact is multiline-capable (wraps + grows); single line stays flagged.
+    expect(mounted.input.getAttribute('aria-multiline')).toBe('true');
+    expect(mounted.input.hasAttribute('data-aic-multiline')).toBe(false);
+
+    editor.setMode('chat');
+    expect(mounted.root.getAttribute('data-aic-mode')).toBe('chat');
+    expect(mounted.slots.toolbar.hidden).toBe(false);
+    expect(mounted.slots.toolbar.querySelector('[data-aic-action="submit"]')).not.toBeNull();
+    // Same surface instance — the draft and undo history survive the switch.
+    expect(editor.serialize('text')).toBe('draft');
+    expect(mounted.input.textContent).toBe('draft');
+    mounted.destroy();
+  });
+
+  it('multiline detection flags wrapped/newline content (data-aic-multiline)', () => {
+    const editor = createAIComposer({ mode: 'compact' });
+    const mounted = mountAIComposer(container, editor);
+
+    mounted.input.textContent = 'line one\nline two';
+    mounted.input.dispatchEvent(new Event('input', { bubbles: true }));
+    expect(mounted.input.hasAttribute('data-aic-multiline')).toBe(true);
+    // Mirrored onto the root — theme CSS uses plain attribute selectors.
+    expect(mounted.root.hasAttribute('data-aic-multiline')).toBe(true);
+
+    editor.setValue('single line');
+    expect(mounted.input.hasAttribute('data-aic-multiline')).toBe(false);
+    expect(mounted.root.hasAttribute('data-aic-multiline')).toBe(false);
+    mounted.destroy();
+  });
+
+  it('typing through the mount updates state and events', () => {
+    const editor = createAIComposer({ mode: 'chat' });
+    const changes: string[] = [];
+    editor.on('change', (event) => changes.push(event.source));
+    const mounted = mountAIComposer(container, editor);
+
+    mounted.input.textContent = 'hello';
+    mounted.input.dispatchEvent(new Event('input', { bubbles: true }));
+
+    expect(editor.serialize('text')).toBe('hello');
+    expect(changes).toContain('user');
+    mounted.destroy();
+  });
+});