@codeauradev/ngx-wind-editor 1.0.0 → 1.0.1

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

@@ -1,184 +0,0 @@
-: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

@@ -1,499 +0,0 @@
-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;
-    },
-  };
-}