@codeauradev/ngx-wind-editor 0.0.0-stage → 1.0.0

package/src/styles/ngx-wind-editor.css

@@ -0,0 +1,184 @@
+:host {
+  display: block;
+  min-width: 0;
+}
+
+.wind-frame {
+  position: relative;
+  min-width: 0;
+}
+
+.wind-doc {
+  min-height: 12rem;
+  padding: 1rem 1.15rem 1.5rem;
+  outline: none;
+  color: var(--color-stone-900, #1c1917);
+  font-family: var(--font-serif, Georgia, "Iowan Old Style", "Palatino Linotype", serif);
+  font-size: 1.0625rem;
+  line-height: 1.65;
+  caret-color: var(--color-teal-700, #0f766e);
+  overflow-wrap: anywhere;
+}
+
+.wind-doc > * + * {
+  margin-top: 0.75rem;
+}
+
+.wind-doc p,
+.wind-doc h1,
+.wind-doc h2,
+.wind-doc h3,
+.wind-doc blockquote,
+.wind-doc pre,
+.wind-doc li {
+  margin: 0;
+}
+
+.wind-doc h1,
+.wind-doc h2,
+.wind-doc h3 {
+  font-family: var(--font-sans, ui-sans-serif, system-ui, sans-serif);
+  line-height: 1.2;
+  letter-spacing: -0.03em;
+  color: var(--color-stone-950, #0c0a09);
+}
+
+.wind-doc h1 { font-size: 1.875rem; font-weight: 600; }
+.wind-doc h2 { font-size: 1.5rem; font-weight: 600; }
+.wind-doc h3 { font-size: 1.25rem; font-weight: 600; }
+
+.wind-doc blockquote {
+  border-left: 2px solid var(--color-teal-700, #0f766e);
+  padding-left: 0.9rem;
+  color: var(--color-stone-600, #57534e);
+}
+
+.wind-doc ul,
+.wind-doc ol {
+  margin: 0;
+  padding-left: 1.25rem;
+}
+
+.wind-doc li + li {
+  margin-top: 0.25rem;
+}
+
+.wind-doc pre {
+  overflow-x: auto;
+  border-radius: 0.6rem;
+  background: color-mix(in oklab, var(--color-stone-900, #1c1917) 6%, transparent);
+  padding: 0.8rem 0.9rem;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 0.875rem;
+  line-height: 1.55;
+  white-space: pre-wrap;
+}
+
+.wind-doc pre code {
+  font: inherit;
+  background: none;
+  padding: 0;
+}
+
+.wind-doc a {
+  color: var(--color-teal-800, #115e59);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.wind-doc code {
+  border-radius: 0.3rem;
+  background: color-mix(in oklab, var(--color-stone-900, #1c1917) 8%, transparent);
+  padding: 0.05em 0.3em;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 0.88em;
+}
+
+.wind-doc img {
+  display: block;
+  max-width: 100%;
+  border-radius: 0.6rem;
+}
+
+.wind-doc figure {
+  margin: 0;
+}
+
+.wind-doc hr {
+  border: 0;
+  border-top: 1px solid var(--color-stone-300, #d6d3d1);
+  margin: 0.25rem 0;
+}
+
+.wind-doc [data-atomic].is-selected {
+  outline: 2px solid var(--color-teal-700, #0f766e);
+  outline-offset: 3px;
+  border-radius: 0.4rem;
+}
+
+.wind-doc[data-empty='true'] > p[data-placeholder]:before {
+  content: attr(data-placeholder);
+  float: left;
+  height: 0;
+  pointer-events: none;
+  color: var(--color-stone-400, #a8a29e);
+}
+
+.wind-carets {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  overflow: hidden;
+}
+
+.wind-caret,
+.wind-remote {
+  position: absolute;
+  pointer-events: none;
+}
+
+.wind-caret {
+  width: 2px;
+  background: var(--peer);
+  border-radius: 1px;
+}
+
+.wind-caret i {
+  position: absolute;
+  top: -1.15rem;
+  left: -1px;
+  border-radius: 0.3rem;
+  background: var(--peer);
+  color: white;
+  padding: 0.05rem 0.3rem;
+  font-family: var(--font-sans, ui-sans-serif, system-ui, sans-serif);
+  font-size: 0.65rem;
+  font-style: normal;
+  line-height: 1.3;
+  letter-spacing: 0.01em;
+  white-space: nowrap;
+}
+
+.wind-remote {
+  background: color-mix(in oklab, var(--peer) 32%, transparent);
+  border-radius: 0.1rem;
+}
+
+.wind-frame.is-readonly .wind-doc {
+  caret-color: transparent;
+}
+
+.dark .wind-doc {
+  color: var(--color-stone-100, #f5f5f4);
+  caret-color: var(--color-teal-300, #5eead4);
+}
+.dark .wind-doc h1,
+.dark .wind-doc h2,
+.dark .wind-doc h3 { color: var(--color-stone-50, #fafaf9); }
+.dark .wind-doc blockquote { color: var(--color-stone-400, #a8a29e); }
+.dark .wind-doc a { color: var(--color-teal-300, #5eead4); }
+.dark .wind-doc hr { border-top-color: var(--color-stone-700, #44403c); }
+.dark .wind-doc pre,
+.dark .wind-doc code {
+  background: color-mix(in oklab, white 8%, transparent);
+}

package/src/surface.ts

@@ -0,0 +1,499 @@
+import * as Y from 'yjs';
+import { deltaToText } from './delta';
+import { safeUrl } from './html';
+import { loadHtml, readBlocks, WindSession } from './session';
+import type { SlashChoice } from './session';
+import type { BlockData, BlockType, Delta, EditorSnapshot, MarkName, Point, Selection } from './types';
+
+export interface SlashPoint {
+  top: number;
+  left: number;
+}
+
+export interface SurfaceChange extends EditorSnapshot {
+  slashRect: SlashPoint | null;
+}
+
+export type WindCommand =
+  | { type: 'mark'; mark: MarkName }
+  | { type: 'link'; href: string | null }
+  | { type: 'clear' }
+  | { type: 'block'; block: BlockType; level?: number }
+  | { type: 'divider' }
+  | { type: 'image'; src: string; alt?: string }
+  | { type: 'undo' }
+  | { type: 'redo' }
+  | { type: 'slash'; choice: SlashChoice };
+
+export interface WindMount {
+  destroy(): void;
+  focus(): void;
+  exec(command: WindCommand): void;
+  setReadonly(readonly: boolean): void;
+  setPlaceholder(value: string): void;
+  setHtml(html: string): void;
+  getHtml(): string;
+  session: WindSession;
+}
+
+export interface SurfaceOptions {
+  html?: string;
+  placeholder?: string;
+  readonly?: boolean;
+  onChange?: (change: SurfaceChange) => void;
+  /** Return true to swallow the key (slash menu, for example). */
+  interceptKey?: (event: KeyboardEvent) => boolean;
+  onLink?: () => void;
+}
+
+interface DomPoint {
+  node: Node;
+  offset: number;
+}
+
+export function mountWindSurface(host: HTMLElement, options: SurfaceOptions): WindMount {
+  const doc = new Y.Doc();
+  if (options.html) loadHtml(doc, options.html);
+  const session = new WindSession(doc);
+  const frame = host;
+  frame.classList.add('wind-frame');
+  const docEl = document.createElement('div');
+  docEl.className = 'wind-doc';
+  docEl.setAttribute('role', 'textbox');
+  docEl.setAttribute('aria-multiline', 'true');
+  docEl.setAttribute('aria-label', 'Document');
+  docEl.spellcheck = true;
+  frame.replaceChildren(docEl);
+
+  let placeholder = options.placeholder ?? 'Write something…';
+  let readonly = options.readonly ?? false;
+  let silent = 0;
+  let composing = false;
+  let pending = false;
+  let destroyed = false;
+
+  const applyEditable = () => {
+    docEl.contentEditable = readonly ? 'false' : 'true';
+    frame.classList.toggle('is-readonly', readonly);
+  };
+  applyEditable();
+
+  const focused = () => docEl === document.activeElement || docEl.contains(document.activeElement);
+
+  const blockEl = (id: string) => docEl.querySelector<HTMLElement>(`[data-id="${CSS.escape(id)}"]`);
+
+  const pointToDom = (point: Point): DomPoint | null => {
+    const el = blockEl(point.blockId);
+    if (!el) return null;
+    if (el.dataset['atomic'] === 'true') return { node: el, offset: 0 };
+    const walker = document.createTreeWalker(el, NodeFilter.SHOW_TEXT);
+    let left = point.offset;
+    let last: Text | null = null;
+    while (walker.nextNode()) {
+      const text = walker.currentNode as Text;
+      last = text;
+      if (left <= text.length) return { node: text, offset: left };
+      left -= text.length;
+    }
+    if (last) return { node: last, offset: last.length };
+    return { node: el, offset: 0 };
+  };
+
+  const pointFromNode = (node: Node, offset: number): Point | null => {
+    const element = node.nodeType === Node.ELEMENT_NODE ? (node as HTMLElement) : node.parentElement;
+    const block = element?.closest<HTMLElement>('[data-id]');
+    if (!block || !docEl.contains(block)) return null;
+    const blockId = block.dataset['id'] ?? '';
+    if (block.dataset['atomic'] === 'true') return { blockId, offset: 0 };
+    const range = document.createRange();
+    range.selectNodeContents(block);
+    try {
+      range.setEnd(node, offset);
+    } catch {
+      return { blockId, offset: 0 };
+    }
+    return { blockId, offset: range.toString().length };
+  };
+
+  const readSelection = (): Selection | null => {
+    const sel = document.getSelection();
+    if (!sel || sel.rangeCount === 0) return null;
+    if (!sel.anchorNode || !docEl.contains(sel.anchorNode)) return null;
+    const anchor = pointFromNode(sel.anchorNode, sel.anchorOffset);
+    const headNode = sel.focusNode ?? sel.anchorNode;
+    const head = pointFromNode(headNode, sel.focusOffset);
+    if (!anchor || !head) return null;
+    return { anchor, head };
+  };
+
+  const samePoint = (a: Point, b: Point) => a.blockId === b.blockId && a.offset === b.offset;
+  const sameSelection = (a: Selection, b: Selection) => samePoint(a.anchor, b.anchor) && samePoint(a.head, b.head);
+
+  const applySelection = (selection: Selection) => {
+    const anchor = pointToDom(selection.anchor);
+    const head = pointToDom(selection.head);
+    if (!anchor || !head) return;
+    const sel = document.getSelection();
+    if (!sel) return;
+    silent += 1;
+    try {
+      sel.setBaseAndExtent(anchor.node, anchor.offset, head.node, head.offset);
+    } catch {
+      /* The node may have been removed mid-update. */
+    }
+    queueMicrotask(() => {
+      silent = Math.max(0, silent - 1);
+    });
+  };
+
+  const fillInline = (el: HTMLElement, delta: Delta) => {
+    el.replaceChildren();
+    if (deltaToText(delta).length === 0) {
+      el.append(document.createElement('br'));
+      return;
+    }
+    for (const op of delta) {
+      let node: Node = document.createTextNode(op.insert);
+      const attrs = op.attributes ?? {};
+      const wrap = (tag: string, child: Node) => {
+        const wrapped = document.createElement(tag);
+        wrapped.append(child);
+        return wrapped;
+      };
+      if (attrs.code) node = wrap('code', node);
+      if (attrs.strike) node = wrap('s', node);
+      if (attrs.underline) node = wrap('u', node);
+      if (attrs.italic) node = wrap('em', node);
+      if (attrs.bold) node = wrap('strong', node);
+      if (attrs.href) {
+        const href = safeUrl(attrs.href);
+        if (href) {
+          const link = document.createElement('a');
+          link.href = href;
+          link.rel = 'noopener noreferrer';
+          link.append(node);
+          node = link;
+        }
+      }
+      el.append(node);
+    }
+  };
+
+  const bind = (el: HTMLElement, block: BlockData) => {
+    el.dataset['id'] = block.id;
+    el.dataset['type'] = block.type;
+  };
+
+  const draw = () => {
+    const blocks = readBlocks(session.doc);
+    const fragment = document.createDocumentFragment();
+    let index = 0;
+    while (index < blocks.length) {
+      const block = blocks[index];
+      if (!block) break;
+      if (block.type === 'bullet' || block.type === 'ordered') {
+        const list = document.createElement(block.type === 'bullet' ? 'ul' : 'ol');
+        while (index < blocks.length && blocks[index]?.type === block.type) {
+          const item = blocks[index] as BlockData;
+          const li = document.createElement('li');
+          bind(li, item);
+          fillInline(li, item.delta);
+          list.append(li);
+          index += 1;
+        }
+        fragment.append(list);
+        continue;
+      }
+      if (block.type === 'image') {
+        const figure = document.createElement('figure');
+        bind(figure, block);
+        figure.dataset['atomic'] = 'true';
+        figure.contentEditable = 'false';
+        const image = document.createElement('img');
+        const src = safeUrl(block.src);
+        if (src) image.src = src;
+        image.alt = block.alt;
+        image.draggable = false;
+        figure.append(image);
+        fragment.append(figure);
+        index += 1;
+        continue;
+      }
+      if (block.type === 'rule') {
+        const rule = document.createElement('hr');
+        bind(rule, block);
+        rule.dataset['atomic'] = 'true';
+        fragment.append(rule);
+        index += 1;
+        continue;
+      }
+      const tag = block.type === 'heading' ? `h${Math.min(3, Math.max(1, block.level || 1))}` : block.type === 'blockquote' ? 'blockquote' : block.type === 'code' ? 'pre' : 'p';
+      const el = document.createElement(tag);
+      bind(el, block);
+      if (block.type === 'code') {
+        const code = document.createElement('code');
+        fillInline(code, block.delta);
+        el.append(code);
+      } else {
+        fillInline(el, block.delta);
+      }
+      if (block.type === 'paragraph' && deltaToText(block.delta).length === 0) el.dataset['placeholder'] = placeholder;
+      fragment.append(el);
+      index += 1;
+    }
+    const empty = blocks.length === 1 && blocks[0]?.type === 'paragraph' && deltaToText(blocks[0].delta).length === 0;
+    docEl.dataset['empty'] = empty ? 'true' : 'false';
+    docEl.replaceChildren(fragment);
+    const head = blockEl(session.selection.head.blockId);
+    if (head?.dataset['atomic'] === 'true') head.classList.add('is-selected');
+    if (focused()) applySelection(session.selection);
+  };
+
+  const slashRect = (): SlashPoint | null => {
+    if (session.snapshot().slash === null) return null;
+    const sel = document.getSelection();
+    if (!sel || sel.rangeCount === 0 || !sel.anchorNode || !docEl.contains(sel.anchorNode)) return null;
+    const rect = sel.getRangeAt(0).getBoundingClientRect();
+    return { top: rect.bottom + 6, left: Math.max(8, rect.left) };
+  };
+
+  const publish = () => {
+    const snap = session.snapshot();
+    const blocks = readBlocks(session.doc);
+    const text = blocks
+      .map((block) => (block.type === 'image' ? block.alt || block.src : block.type === 'rule' ? '' : deltaToText(block.delta)))
+      .join('\n');
+    const words = text.trim() ? text.trim().split(/\s+/).length : 0;
+    options.onChange?.({
+      html: session.html,
+      text,
+      words,
+      characters: text.replace(/\s/g, '').length,
+      slashRect: slashRect(),
+      ...snap,
+    });
+  };
+
+  const redraw = (structural: boolean) => {
+    if (destroyed) return;
+    if (composing && structural) {
+      pending = true;
+      publish();
+      return;
+    }
+    if (structural) draw();
+    publish();
+  };
+
+  const unsession = session.onChange(redraw);
+
+  const reconcileDom = () => {
+    const elements = [...docEl.querySelectorAll<HTMLElement>('[data-id]')];
+    const model = readBlocks(session.doc);
+    if (elements.length !== model.length || model.some((block) => !elements.some((el) => el.dataset['id'] === block.id))) {
+      session.replaceHtml(docEl.innerHTML);
+      return;
+    }
+    for (const el of elements) {
+      const id = el.dataset['id'];
+      if (!id || el.dataset['atomic'] === 'true') continue;
+      session.reconcileText(id, el.textContent ?? '');
+    }
+  };
+
+  docEl.addEventListener('beforeinput', (event) => {
+    if (readonly) {
+      event.preventDefault();
+      return;
+    }
+    if (composing) return;
+    const input = event as InputEvent;
+    const type = input.inputType;
+    if (type === 'insertText') {
+      event.preventDefault();
+      session.insertText(input.data ?? '');
+    } else if (type === 'insertParagraph') {
+      event.preventDefault();
+      session.split('enter');
+    } else if (type === 'insertLineBreak') {
+      event.preventDefault();
+      session.split('hard');
+    } else if (type === 'deleteContentBackward') {
+      event.preventDefault();
+      session.deleteBackward();
+    } else if (type === 'deleteContentForward') {
+      event.preventDefault();
+      session.deleteForward();
+    } else if (type === 'insertFromPaste' || type === 'insertFromDrop') {
+      event.preventDefault();
+      const html = input.dataTransfer?.getData('text/html') || null;
+      const text = input.dataTransfer?.getData('text/plain') || input.data || null;
+      session.paste(html, text);
+    } else if (type === 'historyUndo') {
+      event.preventDefault();
+      session.undo();
+    } else if (type === 'historyRedo') {
+      event.preventDefault();
+      session.redo();
+    } else if (type === 'formatBold') {
+      event.preventDefault();
+      session.toggleMark('bold');
+    } else if (type === 'formatItalic') {
+      event.preventDefault();
+      session.toggleMark('italic');
+    } else if (type === 'formatUnderline') {
+      event.preventDefault();
+      session.toggleMark('underline');
+    } else if (type === 'formatStrikeThrough') {
+      event.preventDefault();
+      session.toggleMark('strike');
+    } else if (type.startsWith('delete')) {
+      event.preventDefault();
+      session.deleteBackward();
+    }
+  });
+
+  docEl.addEventListener('input', () => {
+    if (composing || silent > 0) return;
+    reconcileDom();
+  });
+
+  docEl.addEventListener('compositionstart', () => {
+    composing = true;
+  });
+  docEl.addEventListener('compositionend', () => {
+    composing = false;
+    const sel = readSelection();
+    if (sel) {
+      const el = blockEl(sel.head.blockId);
+      if (el && el.dataset['atomic'] !== 'true') session.reconcileText(sel.head.blockId, el.textContent ?? '');
+    }
+    if (pending) {
+      pending = false;
+      draw();
+    }
+    publish();
+  });
+
+  const onSelectionChange = () => {
+    if (silent > 0 || composing || !focused()) return;
+    const next = readSelection();
+    if (!next || sameSelection(next, session.selection)) return;
+    session.select(next);
+  };
+  document.addEventListener('selectionchange', onSelectionChange);
+
+  docEl.addEventListener('keydown', (event) => {
+    if (options.interceptKey?.(event)) return;
+    if (readonly) return;
+    const meta = event.metaKey || event.ctrlKey;
+    const key = event.key.toLowerCase();
+    if (meta && key === 'b') {
+      event.preventDefault();
+      session.toggleMark('bold');
+    } else if (meta && key === 'i') {
+      event.preventDefault();
+      session.toggleMark('italic');
+    } else if (meta && key === 'u') {
+      event.preventDefault();
+      session.toggleMark('underline');
+    } else if (meta && key === 'e') {
+      event.preventDefault();
+      session.toggleMark('code');
+    } else if (meta && event.shiftKey && (key === 's' || key === 'x')) {
+      event.preventDefault();
+      session.toggleMark('strike');
+    } else if (meta && key === 'k') {
+      event.preventDefault();
+      options.onLink?.();
+    } else if (meta && key === 'z') {
+      event.preventDefault();
+      if (event.shiftKey) session.redo();
+      else session.undo();
+    } else if (meta && key === 'y') {
+      event.preventDefault();
+      session.redo();
+    } else if (event.key === 'Enter' && meta) {
+      event.preventDefault();
+      session.split('exit');
+    } else if (event.key === 'Tab') {
+      event.preventDefault();
+      session.insertText('  ');
+    }
+  });
+
+  docEl.addEventListener('mousedown', (event) => {
+    const target = event.target instanceof Element ? event.target : null;
+    const atomic = target?.closest<HTMLElement>('[data-atomic]');
+    if (!atomic || !docEl.contains(atomic)) return;
+    event.preventDefault();
+    const id = atomic.dataset['id'];
+    if (!id) return;
+    docEl.focus();
+    session.focusPoint(id, 0);
+    draw();
+  });
+
+  docEl.addEventListener('click', (event) => {
+    const target = event.target instanceof Element ? event.target : null;
+    const link = target?.closest('a');
+    if (!link || !docEl.contains(link)) return;
+    if (!event.metaKey && !event.ctrlKey) event.preventDefault();
+  });
+
+  docEl.addEventListener('cut', (event) => {
+    const sel = document.getSelection();
+    if (!sel || sel.isCollapsed || !sel.anchorNode || !docEl.contains(sel.anchorNode)) return;
+    event.preventDefault();
+    const range = sel.getRangeAt(0);
+    const holder = document.createElement('div');
+    holder.append(range.cloneContents());
+    event.clipboardData?.setData('text/plain', range.toString());
+    event.clipboardData?.setData('text/html', holder.innerHTML);
+    session.deleteBackward();
+  });
+
+  draw();
+  publish();
+
+  return {
+    session,
+    destroy() {
+      destroyed = true;
+      document.removeEventListener('selectionchange', onSelectionChange);
+      unsession();
+      frame.replaceChildren();
+    },
+    focus() {
+      docEl.focus();
+    },
+    exec(command) {
+      if (readonly && command.type !== 'undo' && command.type !== 'redo') return;
+      if (command.type === 'mark') session.toggleMark(command.mark);
+      else if (command.type === 'link') session.setLink(command.href);
+      else if (command.type === 'clear') session.clearMarks();
+      else if (command.type === 'block') session.setBlockType(command.block, command.level ?? 1);
+      else if (command.type === 'divider') session.insertDivider();
+      else if (command.type === 'image') session.insertImage(command.src, command.alt ?? '');
+      else if (command.type === 'undo') session.undo();
+      else if (command.type === 'redo') session.redo();
+      else if (command.type === 'slash') session.applySlash(command.choice);
+      if (!readonly) docEl.focus();
+    },
+    setReadonly(value) {
+      readonly = value;
+      applyEditable();
+    },
+    setPlaceholder(value) {
+      placeholder = value;
+      draw();
+    },
+    setHtml(html) {
+      if (html === session.html) return;
+      session.replaceHtml(html);
+    },
+    getHtml() {
+      return session.html;
+    },
+  };
+}