@lark-apaas/coding-template-nestjs-react-fullstack 0.1.54 → 0.1.55-alpha.20261030081308

package/template/client/src/components/business-ui/comment/dom-editor.ts

@@ -0,0 +1,582 @@
+import {
+  normalizeValue,
+  collectMentionRefs,
+  mentionLabel,
+  safeUrl,
+} from './content';
+import {
+  documentEmoji,
+  documentIconSvg,
+  INPUT_USER_MENTION_CLASS,
+  INPUT_USER_MENTION_LABEL_CLASS,
+  atUserLabel,
+  DOCUMENT_MENTION_CLASS,
+  DOCUMENT_MENTION_UNREADABLE_CLASS,
+} from './mention-view';
+import type { EntityStore } from './mention-provider';
+import type { CommentPart, CommentValue } from './types';
+
+type Selection = { anchor: number; focus: number };
+type Snapshot = { value: CommentValue; selection: Selection };
+type Bounds = { start: number; end: number; children?: number[] };
+const length = (part: CommentPart) =>
+  part.type === 'text' ? part.text.length : 1;
+export const contentLength = (value: CommentValue) =>
+  value.content.reduce((sum, part) => sum + length(part), 0);
+const equal = (a: CommentValue, b: CommentValue) =>
+  JSON.stringify(a) === JSON.stringify(b);
+
+function graphemes(text: string): { index: number; segment: string }[] {
+  const Segmenter = (
+    Intl as typeof Intl & {
+      Segmenter?: new (
+        locale?: string,
+        options?: { granularity: string },
+      ) => {
+        segment: (text: string) => Iterable<{ index: number; segment: string }>;
+      };
+    }
+  ).Segmenter;
+  if (Segmenter)
+    return [
+      ...new Segmenter(undefined, { granularity: 'grapheme' }).segment(text),
+    ];
+  let offset = 0;
+  return Array.from(text, (segment) => {
+    const index = offset;
+    offset += segment.length;
+    return { index, segment };
+  });
+}
+
+/** Offsets count a whole reference as one unit, independently of its display label. */
+export function sliceContent(
+  value: CommentValue,
+  from: number,
+  to: number,
+): CommentValue {
+  const content: CommentPart[] = [];
+  let offset = 0;
+  for (const part of value.content) {
+    const end = offset + length(part);
+    if (end > from && offset < to)
+      content.push(
+        part.type === 'text'
+          ? {
+              type: 'text',
+              text: part.text.slice(Math.max(0, from - offset), to - offset),
+            }
+          : part,
+      );
+    offset = end;
+  }
+  return normalizeValue({ version: 1, content });
+}
+
+/** DOM ownership stays here; React never reconciles editable children. */
+export class DivEditor {
+  value: CommentValue;
+  composing = false;
+  private atoms = new WeakMap<Node, CommentPart>();
+  private bounds = new Map<Node, Bounds>();
+  private undoStack: Snapshot[] = [];
+  private redoStack: Snapshot[] = [];
+  private selection: Selection = { anchor: 0, focus: 0 };
+  private captured?: Snapshot;
+  private group = '';
+  private changedAt = 0;
+  private unsubscribe: () => void;
+  private destroyed = false;
+
+  constructor(
+    readonly root: HTMLDivElement,
+    value: CommentValue,
+    private store: EntityStore,
+    private strict: boolean,
+    private onChange: (value: CommentValue) => void,
+  ) {
+    this.value = normalizeValue(value);
+    this.render();
+    this.unsubscribe = store.subscribe(() => {
+      if (!this.composing) this.refreshEntities();
+    });
+  }
+
+  destroy() {
+    this.destroyed = true;
+    this.unsubscribe();
+  }
+  private render(selection?: Selection) {
+    const nodes = this.value.content.map((part) => {
+      if (part.type === 'text') return document.createTextNode(part.text);
+      if (part.type === 'break') return document.createElement('br');
+      const span = document.createElement('span');
+      span.contentEditable = 'false';
+      span.dataset.commentAtom = '';
+      this.atoms.set(span, part);
+      this.paint(span, part);
+      return span;
+    });
+    // An ignored caret landing point also makes an empty or newline-ending body editable.
+    const tail = document.createElement('br');
+    tail.dataset.commentTail = '';
+    this.root.replaceChildren(...nodes, tail);
+    this.read();
+    if (selection) this.restore(selection);
+    this.store.ensure(collectMentionRefs(this.value));
+  }
+
+  private paint(dom: HTMLElement, part: CommentPart) {
+    if (part.type === 'unresolved-mention') {
+      dom.className = 'text-subtle-foreground';
+      dom.textContent = '引用信息缺失';
+      dom.title = '原评论缺少被提及对象的信息';
+      return;
+    }
+    if (part.type === 'link') {
+      dom.className = 'break-words text-primary no-underline hover:underline';
+      const link = document.createElement('a');
+      link.textContent = part.url;
+      const url = safeUrl(part.url);
+      if (url) {
+        link.href = url;
+        link.target = '_blank';
+        link.rel = 'noopener noreferrer';
+      }
+      dom.replaceChildren(link);
+      return;
+    }
+    if (part.type !== 'mention') return;
+    const result = this.store.peek(part.ref);
+    const label = mentionLabel(part.ref, part.label, result, this.strict);
+    dom.setAttribute(
+      'aria-label',
+      part.ref.kind === 'user' ? atUserLabel(label) : label,
+    );
+    dom.title = label;
+    if (part.ref.kind === 'user') {
+      dom.className = INPUT_USER_MENTION_CLASS;
+      const name = document.createElement('span');
+      name.className = INPUT_USER_MENTION_LABEL_CLASS;
+      name.textContent = atUserLabel(label);
+      dom.replaceChildren(name);
+      return;
+    }
+    const resolved = result?.status === 'resolved' ? result : undefined;
+    const href = safeUrl(
+      resolved?.href || (!this.strict ? part.href : undefined),
+    );
+    const metadata =
+      resolved?.document || (!this.strict ? part.document : undefined);
+    const title =
+      resolved ||
+      part.label ||
+      this.strict ||
+      result?.status === 'forbidden' ||
+      result?.status === 'not-found'
+        ? label
+        : '';
+    dom.className = '';
+    const link = document.createElement(href ? 'a' : 'span');
+    link.className =
+      result?.status === 'forbidden' || resolved?.readable === false
+        ? DOCUMENT_MENTION_UNREADABLE_CLASS
+        : DOCUMENT_MENTION_CLASS;
+    link.dataset.doclink = 'true';
+    if (href) {
+      link.setAttribute('href', href);
+      link.setAttribute('target', '_blank');
+      link.setAttribute('rel', 'noopener noreferrer');
+    }
+    if (title) {
+      const icon = document.createElement('span');
+      icon.className = '-mb-0.5 mr-0.5 inline-block text-center leading-none';
+      icon.style.width = icon.style.height = icon.style.fontSize = '14px';
+      icon.setAttribute('aria-hidden', 'true');
+      const emoji = documentEmoji(metadata?.iconInfo);
+      if (emoji) icon.textContent = emoji;
+      else icon.innerHTML = documentIconSvg(part.ref, metadata); // Bundled SVG only.
+      link.append(icon);
+    }
+    link.append(document.createTextNode(title || href || '文档'));
+    dom.replaceChildren(link);
+  }
+
+  private refreshEntities() {
+    for (const element of this.root.querySelectorAll<HTMLElement>(
+      '[data-comment-atom]',
+    )) {
+      const part = this.atoms.get(element);
+      if (part?.type === 'mention') this.paint(element, part);
+    }
+  }
+
+  /** Normalize native text/BR/block edits; arbitrary HTML cannot manufacture reference IDs. */
+  read(): CommentValue {
+    const content: CommentPart[] = [];
+    let offset = 0;
+    this.bounds.clear();
+    const append = (part: CommentPart) => {
+      content.push(part);
+      offset += length(part);
+    };
+    const walk = (node: Node) => {
+      const start = offset;
+      const atom = this.atoms.get(node);
+      const element = node instanceof HTMLElement ? node : undefined;
+      if (atom) append(atom);
+      else if (node.nodeType === Node.TEXT_NODE) {
+        if (node.textContent)
+          append({
+            type: 'text',
+            text: node.textContent.replace(/\u00a0/g, ' '),
+          });
+      } else if (element?.hasAttribute('data-comment-tail')) {
+        // Not a user newline.
+      } else if (element?.tagName === 'BR') append({ type: 'break' });
+      else if (
+        !element ||
+        !['SCRIPT', 'STYLE', 'NOSCRIPT'].includes(element.tagName)
+      ) {
+        const children: number[] = [];
+        const block =
+          element !== this.root &&
+          element &&
+          ['DIV', 'P', 'LI'].includes(element.tagName);
+        const filler =
+          block &&
+          node.childNodes.length === 1 &&
+          node.firstChild instanceof HTMLBRElement;
+        let previous: Node | undefined;
+        const isBlock = (item?: Node) =>
+          item instanceof HTMLElement &&
+          ['DIV', 'P', 'LI'].includes(item.tagName);
+        for (const child of node.childNodes) {
+          children.push(offset);
+          if (
+            child instanceof HTMLElement &&
+            child.hasAttribute('data-comment-tail')
+          )
+            continue;
+          const emptyPrevious =
+            isBlock(previous) &&
+            (!previous!.childNodes.length ||
+              (previous!.childNodes.length === 1 &&
+                previous!.firstChild instanceof HTMLBRElement));
+          if (
+            previous &&
+            (isBlock(previous) || isBlock(child)) &&
+            (emptyPrevious || content.at(-1)?.type !== 'break')
+          )
+            append({ type: 'break' });
+          if (!filler) walk(child);
+          previous = child;
+        }
+        children.push(offset);
+        this.bounds.set(node, { start, end: offset, children });
+        return;
+      }
+      this.bounds.set(node, { start, end: offset });
+    };
+    walk(this.root);
+    return normalizeValue({ version: 1, content });
+  }
+
+  private offset(node: Node, index: number): number {
+    const bounds = this.bounds.get(node);
+    if (bounds)
+      return node.nodeType === Node.TEXT_NODE
+        ? Math.min(bounds.end, bounds.start + index)
+        : (bounds.children?.[index] ?? (index ? bounds.end : bounds.start));
+    const parent = node.parentNode;
+    if (parent && this.atoms.has(parent)) {
+      const atom = this.bounds.get(parent)!;
+      return index ? atom.end : atom.start;
+    }
+    return parent && this.root.contains(parent) ? this.offset(parent, 0) : 0;
+  }
+
+  readSelection(): Selection | undefined {
+    const selection = window.getSelection();
+    if (
+      !selection?.anchorNode ||
+      !selection.focusNode ||
+      !this.root.contains(selection.anchorNode) ||
+      !this.root.contains(selection.focusNode)
+    )
+      return;
+    this.read();
+    return {
+      anchor: this.offset(selection.anchorNode, selection.anchorOffset),
+      focus: this.offset(selection.focusNode, selection.focusOffset),
+    };
+  }
+
+  private point(position: number): { node: Node; offset: number } {
+    for (const [node, bounds] of this.bounds) {
+      if (
+        node.nodeType === Node.TEXT_NODE &&
+        position >= bounds.start &&
+        position <= bounds.end
+      )
+        return { node, offset: position - bounds.start };
+      if (
+        node !== this.root &&
+        position === bounds.start &&
+        (this.atoms.has(node) || node instanceof HTMLBRElement)
+      ) {
+        const parent = node.parentNode!;
+        return {
+          node: parent,
+          offset: Array.prototype.indexOf.call(parent.childNodes, node),
+        };
+      }
+    }
+    return {
+      node: this.root,
+      offset: Math.max(0, this.root.childNodes.length - 1),
+    };
+  }
+
+  restore(selection: Selection) {
+    const max = contentLength(this.value);
+    const anchor = this.point(Math.min(max, Math.max(0, selection.anchor)));
+    const focus = this.point(Math.min(max, Math.max(0, selection.focus)));
+    window
+      .getSelection()
+      ?.setBaseAndExtent(anchor.node, anchor.offset, focus.node, focus.offset);
+    this.selection = selection;
+  }
+
+  focus() {
+    this.root.focus();
+    this.read();
+    const end = contentLength(this.value);
+    this.restore({ anchor: end, focus: end });
+  }
+  repair() {
+    this.render(this.selection);
+  }
+  private snapshot(): Snapshot {
+    return {
+      value: this.value,
+      selection: this.readSelection() || this.selection,
+    };
+  }
+  capture() {
+    this.captured = this.snapshot();
+  }
+
+  /** One shared history for native input and programmatic edits; never mixes native undo. */
+  private commit(
+    value: CommentValue,
+    selection: Selection,
+    kind: string,
+    render: boolean,
+  ) {
+    value = normalizeValue(value);
+    const before = this.captured || this.snapshot();
+    this.captured = undefined;
+    if (!equal(this.value, value)) {
+      const merge =
+        kind === 'insertText' &&
+        this.group === kind &&
+        Date.now() - this.changedAt < 700 &&
+        before.selection.anchor === before.selection.focus &&
+        before.selection.focus === this.selection.focus;
+      if (!merge) {
+        this.undoStack.push(before);
+        if (this.undoStack.length > 100) this.undoStack.shift();
+      }
+      this.redoStack = [];
+      this.group = kind;
+      this.changedAt = Date.now();
+      this.value = value;
+      this.selection = selection;
+      if (render) this.render(selection);
+      this.onChange(value);
+    }
+    this.selection = selection;
+  }
+
+  input(kind = 'input') {
+    if (this.composing || this.destroyed) return;
+    const value = this.read();
+    const selection = this.readSelection() || this.selection;
+    this.commit(value, selection, kind, false);
+    this.store.ensure(collectMentionRefs(value));
+  }
+
+  startComposition() {
+    this.capture();
+    this.composing = true;
+    this.group = '';
+  }
+  endComposition() {
+    this.composing = false;
+    this.input('composition');
+    this.refreshEntities();
+  }
+  external(value: CommentValue) {
+    value = normalizeValue(value);
+    if (equal(this.value, value)) return;
+    const selection = this.readSelection();
+    this.value = value;
+    this.undoStack = [];
+    this.redoStack = [];
+    this.group = '';
+    this.captured = undefined;
+    this.render(selection);
+  }
+
+  replace(from: number, to: number, inserted: CommentValue, kind = 'replace') {
+    if (this.composing) return;
+    this.capture();
+    const value = {
+      version: 1 as const,
+      content: [
+        ...sliceContent(this.value, 0, from).content,
+        ...inserted.content,
+        ...sliceContent(this.value, to, contentLength(this.value)).content,
+      ],
+    };
+    const end = from + contentLength(normalizeValue(inserted));
+    this.commit(value, { anchor: end, focus: end }, kind, true);
+  }
+
+  insert(value: CommentValue) {
+    const selection = this.readSelection() || this.selection;
+    this.replace(
+      Math.min(selection.anchor, selection.focus),
+      Math.max(selection.anchor, selection.focus),
+      value,
+    );
+  }
+
+  clear() {
+    this.replace(
+      0,
+      contentLength(this.value),
+      { version: 1, content: [] },
+      'clear',
+    );
+  }
+  selected() {
+    const selection = this.readSelection();
+    return selection && selection.anchor !== selection.focus
+      ? sliceContent(
+          this.value,
+          Math.min(selection.anchor, selection.focus),
+          Math.max(selection.anchor, selection.focus),
+        )
+      : undefined;
+  }
+
+  erase(backward: boolean) {
+    const selection = this.readSelection();
+    if (!selection) return;
+    let from = Math.min(selection.anchor, selection.focus);
+    let to = Math.max(selection.anchor, selection.focus);
+    if (from === to) {
+      const text = this.value.content
+        .map((part) =>
+          part.type === 'text'
+            ? part.text
+            : part.type === 'break'
+              ? '\n'
+              : '\ufffc',
+        )
+        .join('');
+      const segments = graphemes(text);
+      if (backward)
+        from =
+          segments.filter((segment) => segment.index < from).at(-1)?.index ??
+          from;
+      else {
+        const next = segments.find((segment) => segment.index >= to);
+        to = next ? next.index + next.segment.length : to;
+      }
+    }
+    this.replace(from, to, { version: 1, content: [] }, 'delete');
+  }
+
+  undo(redo = false) {
+    const source = redo ? this.redoStack : this.undoStack;
+    const next = source.pop();
+    if (!next || this.composing) return;
+    (redo ? this.undoStack : this.redoStack).push(this.snapshot());
+    this.value = next.value;
+    this.group = '';
+    this.captured = undefined;
+    this.render(next.selection);
+    this.onChange(this.value);
+  }
+
+  query(): { from: number; to: number; query: string } | undefined {
+    const selection = this.readSelection();
+    if (!selection || selection.anchor !== selection.focus || this.composing)
+      return;
+    const before = sliceContent(this.value, 0, selection.focus)
+      .content.map((part) =>
+        part.type === 'text'
+          ? part.text
+          : part.type === 'break'
+            ? '\n'
+            : '\ufffc',
+      )
+      .join('');
+    const match = /@([^\s@\ufffc]*)$/.exec(before);
+    if (!match || (match.index && /[a-zA-Z0-9_]/.test(before[match.index - 1])))
+      return;
+    return { from: match.index, to: selection.focus, query: match[1] };
+  }
+
+  caretRect(): DOMRect | null {
+    const selection = window.getSelection();
+    if (
+      !selection?.rangeCount ||
+      !selection.focusNode ||
+      !this.root.contains(selection.focusNode)
+    )
+      return null;
+    const range = selection.getRangeAt(0).cloneRange();
+    range.collapse(false);
+    const rect = range.getClientRects()[0];
+    return rect?.height ? rect : this.root.getBoundingClientRect();
+  }
+}
+
+export function clipboardText(data: Pick<DataTransfer, 'getData'>): string {
+  const plain = data.getData('text/plain');
+  if (plain) return plain;
+  const doc = new DOMParser().parseFromString(
+    data.getData('text/html'),
+    'text/html',
+  );
+  let text = '';
+  const visit = (node: Node) => {
+    if (node.nodeType === Node.TEXT_NODE) {
+      text += node.textContent || '';
+      return;
+    }
+    if (
+      !(node instanceof Element) ||
+      ['SCRIPT', 'STYLE', 'NOSCRIPT'].includes(node.tagName)
+    )
+      return;
+    if (node.tagName === 'BR') {
+      text += '\n';
+      return;
+    }
+    node.childNodes.forEach(visit);
+    if (
+      ['P', 'DIV', 'LI', 'TR', 'H1', 'H2', 'H3', 'BLOCKQUOTE'].includes(
+        node.tagName,
+      ) &&
+      !text.endsWith('\n')
+    )
+      text += '\n';
+  };
+  doc.body.childNodes.forEach(visit);
+  return text.replace(/\n$/, '');
+}