@lark-apaas/coding-template-nestjs-react-fullstack 0.1.57-alpha.20261102143457 → 0.1.57-alpha.20261103143319

package/template/client/src/components/business-ui/record-comments/internal/editor.tsx

@@ -0,0 +1,675 @@
+import type { MentionOption, MentionRef, DocumentMentionMetadata, CommentEditorProps, CommentValue } from '../types';
+import type { EntityStore } from './mentions';
+import { INPUT_USER_MENTION_CLASS, userMentionLabelClass, atUserLabel, DOCUMENT_MENTION_CLASS, DOCUMENT_MENTION_UNREADABLE_CLASS, documentSnapshot, isMentionRef, mentionLabel, safeUrl, fromApiContent, readApiContent, fromEditorDocument, emptyComment, normalizeValue, toEditorDocument, toPlainText, COMMENT_THEME_CLASS } from './model';
+import { documentEmoji, documentIconSvg } from './icons';
+import { Suggestion, type SuggestionProps, exitSuggestion } from '@tiptap/suggestion';
+import { Node, Extension } from '@tiptap/core';
+import { useMentionSearch, MentionSuggestions } from './suggestions';
+import { useMentionContext } from './mentions';
+import { cn } from '@/lib/utils';
+import type { EditorView } from '@tiptap/pm/view';
+import { closeHistory, history, redo, undo } from '@tiptap/pm/history';
+import HardBreak from '@tiptap/extension-hard-break';
+import Text from '@tiptap/extension-text';
+import Paragraph from '@tiptap/extension-paragraph';
+import Document from '@tiptap/extension-document';
+import { EditorContent, useEditor } from '@tiptap/react';
+import * as React from 'react';
+import { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+
+export type EntitySuggestion = SuggestionProps<MentionOption, MentionOption>;
+
+function documentBody(
+  ref: MentionRef,
+  title: string,
+  href?: string,
+  metadata?: DocumentMentionMetadata,
+  unreadable = false,
+) {
+  const url = safeUrl(href);
+  const dom = document.createElement(url ? 'a' : 'span');
+  dom.className = unreadable
+    ? DOCUMENT_MENTION_UNREADABLE_CLASS
+    : DOCUMENT_MENTION_CLASS;
+  dom.setAttribute('data-doclink', 'true');
+  dom.setAttribute('data-doclink-token', ref.id);
+  dom.setAttribute(
+    'data-doclink-type',
+    ref.kind === 'document' ? ref.resourceType : '',
+  );
+  if (url) {
+    dom.setAttribute('href', url);
+    dom.setAttribute('target', '_blank');
+    dom.setAttribute('rel', 'noopener noreferrer');
+    dom.addEventListener('click', (event) => event.stopPropagation());
+    dom.addEventListener('mousedown', (event) => event.preventDefault());
+  }
+  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(ref, metadata); // Bundled static SVG only.
+    dom.append(icon);
+  }
+  const name = document.createElement('span');
+  name.textContent = title || url || '文档';
+  dom.append(name);
+  return dom;
+}
+
+export function entityMention(
+  store: EntityStore,
+  strict: boolean,
+  onSession: (props: EntitySuggestion | null) => void,
+  selfUserIDs: readonly string[] = [],
+) {
+  return Node.create({
+    name: 'entityMention',
+    group: 'inline',
+    inline: true,
+    atom: true,
+    selectable: true,
+    addAttributes() {
+      return {
+        ref: { default: null },
+        label: { default: null },
+        href: { default: null },
+        document: { default: null },
+      };
+    },
+    // Clipboard references are restored only from our validated custom MIME, not arbitrary HTML.
+    parseHTML() {
+      return [];
+    },
+    renderHTML({ node }) {
+      const ref = node.attrs.ref;
+      const label = isMentionRef(ref)
+        ? mentionLabel(ref, node.attrs.label, store.peek(ref), strict)
+        : '引用';
+      if (isMentionRef(ref) && ref.kind === 'document') {
+        const result = store.peek(ref);
+        const resolved = result?.status === 'resolved' ? result : undefined;
+        const snapshot = strict ? {} : documentSnapshot(node.attrs);
+        const title =
+          resolved ||
+          node.attrs.label ||
+          strict ||
+          result?.status === 'forbidden' ||
+          result?.status === 'not-found'
+            ? label
+            : '';
+        return documentBody(
+          ref,
+          title,
+          resolved?.href || snapshot.href,
+          resolved?.document || snapshot.document,
+          result?.status === 'forbidden' || resolved?.readable === false,
+        );
+      }
+      return [
+        'span',
+        {
+          'data-replica-comment-mention': '',
+          class:
+            ref?.kind === 'user'
+              ? INPUT_USER_MENTION_CLASS
+              : DOCUMENT_MENTION_CLASS,
+        },
+        [
+          'span',
+          {
+            class: userMentionLabelClass(
+              selfUserIDs.includes(ref?.id),
+              isMentionRef(ref) && store.peek(ref)?.status === 'forbidden',
+            ),
+          },
+          ref?.kind === 'user' ? atUserLabel(label) : label,
+        ],
+      ];
+    },
+    renderText({ node }) {
+      return node.attrs.ref?.kind === 'user'
+        ? atUserLabel(node.attrs.label || '引用')
+        : node.attrs.label || '引用';
+    },
+    addKeyboardShortcuts() {
+      return {
+        Backspace: () =>
+          this.editor.commands.command(({ state, tr }) => {
+            const { empty, $from } = state.selection;
+            const previous = $from.nodeBefore;
+            if (!empty || previous?.type.name !== 'entityMention') return false;
+            tr.delete($from.pos - previous.nodeSize, $from.pos);
+            return true;
+          }),
+      };
+    },
+    addNodeView() {
+      return ({ node }) => {
+        const dom = document.createElement('span');
+        dom.contentEditable = 'false';
+        dom.dataset.replicaCommentMention = '';
+        const ref = node.attrs.ref;
+        const isUser = isMentionRef(ref) && ref.kind === 'user';
+        dom.className = isUser ? INPUT_USER_MENTION_CLASS : '';
+        const name = document.createElement('span');
+        if (isUser) {
+          dom.append(name);
+        }
+        const update = () => {
+          const result = isMentionRef(ref) ? store.peek(ref) : undefined;
+          const label = isMentionRef(ref)
+            ? mentionLabel(ref, node.attrs.label, result, strict)
+            : '引用';
+          if (isUser) {
+            name.className = userMentionLabelClass(selfUserIDs.includes(ref.id), result?.status === 'forbidden');
+            name.textContent = atUserLabel(label);
+          }
+          else if (isMentionRef(ref)) {
+            const resolved = result?.status === 'resolved' ? result : undefined;
+            const snapshot = strict ? {} : documentSnapshot(node.attrs);
+            const title =
+              resolved ||
+              node.attrs.label ||
+              strict ||
+              result?.status === 'forbidden' ||
+              result?.status === 'not-found'
+                ? label
+                : '';
+            dom.replaceChildren(
+              documentBody(
+                ref,
+                title,
+                resolved?.href || snapshot.href,
+                resolved?.document || snapshot.document,
+                result?.status === 'forbidden' || resolved?.readable === false,
+              ),
+            );
+          }
+          dom.setAttribute('aria-label', isUser ? atUserLabel(label) : label);
+          dom.title = label;
+        };
+        update();
+        if (isMentionRef(node.attrs.ref)) store.ensure([node.attrs.ref]);
+        const unsubscribe = store.subscribe(update);
+        return { dom, destroy: unsubscribe };
+      };
+    },
+    addProseMirrorPlugins() {
+      return [
+        Suggestion<MentionOption, MentionOption>({
+          editor: this.editor,
+          char: '@',
+          allowedPrefixes: null,
+          allow: ({ state, range }) =>
+            !/[a-zA-Z0-9_]/.test(
+              state.doc.textBetween(Math.max(0, range.from - 1), range.from),
+            ),
+          items: () => [],
+          command: ({ editor, range, props }) =>
+            editor
+              .chain()
+              .focus()
+              .insertContentAt(range, [
+                {
+                  type: 'entityMention',
+                  attrs: {
+                    ref: props.ref,
+                    label: props.label,
+                    ...documentSnapshot(props),
+                  },
+                },
+                { type: 'text', text: ' ' },
+              ])
+              .run(),
+          render: () => ({
+            onStart: onSession,
+            onUpdate: onSession,
+            onExit: () => onSession(null),
+          }),
+        }),
+      ];
+    },
+  });
+}
+
+export const CommentLink = Node.create({
+  name: 'commentLink',
+  group: 'inline',
+  inline: true,
+  atom: true,
+  addAttributes: () => ({ url: { default: '' } }),
+  parseHTML: () => [],
+  renderHTML({ node }) {
+    const url = String(node.attrs.url || '');
+    return [
+      'a',
+      {
+        href: safeUrl(url),
+        target: '_blank',
+        rel: 'noopener noreferrer',
+        class: 'break-words text-primary no-underline hover:underline',
+      },
+      url,
+    ];
+  },
+  renderText: ({ node }) => String(node.attrs.url || ''),
+});
+
+export const UnresolvedMention = Node.create({
+  name: 'unresolvedMention',
+  group: 'inline',
+  inline: true,
+  atom: true,
+  parseHTML: () => [],
+  renderHTML: () => [
+    'span',
+    {
+      class: 'text-subtle-foreground',
+      title: '原评论缺少被提及对象的信息',
+    },
+    '引用信息缺失',
+  ],
+  renderText: () => '引用信息缺失',
+});
+
+interface Session {
+  id: number;
+  props: EntitySuggestion;
+  query: string;
+}
+const MIME = 'application/x-miaoda-comment+json';
+const History = Extension.create({
+  name: 'commentHistory',
+  addProseMirrorPlugins: () => [history()],
+  addKeyboardShortcuts() {
+    return {
+      'Mod-z': () => undo(this.editor.state, this.editor.view.dispatch),
+      'Mod-Shift-z': () => redo(this.editor.state, this.editor.view.dispatch),
+      'Mod-y': () => redo(this.editor.state, this.editor.view.dispatch),
+    };
+  },
+});
+
+export default function CommentEditor(props: CommentEditorProps) {
+  const { store, strict, currentUserID, highlightUserIDs } =
+    useMentionContext();
+  const selfUserIDsKey = JSON.stringify(
+    [currentUserID, ...(highlightUserIDs || [])].filter(Boolean),
+  );
+  const latest = useRef(props);
+  latest.current = props;
+  const publish = useCallback((next: CommentValue) => {
+    const value = normalizeValue(next);
+    latest.current = { ...latest.current, value };
+    latest.current.onChange(value);
+  }, []);
+  const listId = React.useId();
+  const [session, setSession] = useState<Session | null>(null);
+  const sessionRef = useRef<Session | null>(null);
+  const sequence = useRef(0);
+  const [selected, setSelected] = useState(0);
+  const search = useMentionSearch(
+    store.source,
+    session,
+    props.enableDocuments ? 'all' : 'user',
+  );
+  const mentionItems = useMemo(
+    () =>
+      search.items.filter(
+        (item) => props.enableDocuments || item.ref.kind === 'user',
+      ),
+    [search.items, props.enableDocuments],
+  );
+  const handlers = useRef<{
+    key: (event: KeyboardEvent) => boolean;
+    paste: (event: ClipboardEvent) => boolean;
+  }>({ key: () => false, paste: () => false });
+  const onSession = useCallback((suggestion: EntitySuggestion | null) => {
+    const previous = sessionRef.current;
+    if (!suggestion || !previous || suggestion.query !== previous.query) {
+      setSelected(0);
+    }
+    const next = suggestion
+      ? {
+          id: previous?.id ?? ++sequence.current,
+          props: suggestion,
+          query: suggestion.query,
+        }
+      : null;
+    sessionRef.current = next;
+    setSession(next);
+  }, []);
+  const extensions = useMemo(
+    () => [
+      Document.extend({ content: 'paragraph' }),
+      Paragraph,
+      Text,
+      HardBreak,
+      History,
+      CommentLink,
+      UnresolvedMention,
+      entityMention(store, strict, onSession, JSON.parse(selfUserIDsKey)),
+    ],
+    [store, strict, onSession, selfUserIDsKey],
+  );
+  const editor = useEditor(
+    {
+      extensions,
+      content: toEditorDocument(props.value),
+      immediatelyRender: false,
+      shouldRerenderOnTransaction: false,
+      editorProps: {
+        attributes: {
+          class:
+            'relative z-[1] min-h-[22px] max-h-60 overflow-y-auto whitespace-pre-wrap break-words text-sm leading-[22px] outline-none [&_p]:m-0',
+          role: 'textbox',
+          'aria-label': props.placeholder || '输入评论',
+          'aria-multiline': 'true',
+          'aria-autocomplete': 'list',
+          'aria-haspopup': 'listbox',
+        },
+        handleKeyDown: (_view, event) => handlers.current.key(event),
+        handlePaste: (_view, event) => handlers.current.paste(event),
+        handleDOMEvents: {
+          copy: (view, event) => copySelection(view, event),
+          cut: (view, event) => copySelection(view, event, true),
+        },
+      },
+      onUpdate: ({ editor: instance }) => {
+        publish(fromEditorDocument(instance.getJSON()));
+      },
+    },
+    [extensions],
+  );
+
+  const value = normalizeValue(props.value);
+  const blocked = Boolean(props.disabled);
+  useImperativeHandle(
+    props.editorRef,
+    () => ({
+      getContent: () =>
+        readApiContent(
+          editor ? fromEditorDocument(editor.getJSON()) : latest.current.value,
+        ),
+      clear() {
+        if (!editor) {
+          publish(emptyComment());
+          return;
+        }
+        exitSuggestion(editor.view);
+        editor
+          .chain()
+          .command(({ tr }) => {
+            closeHistory(tr);
+            return true;
+          })
+          .clearContent()
+          .run();
+      },
+      setEditable: (editable) => editor?.setEditable(editable),
+      focus: () => {
+        editor?.commands.focus('end');
+      },
+    }),
+    [editor, publish],
+  );
+  const choose = (item: MentionOption) => {
+    const active = sessionRef.current;
+    if (!active || blocked || !editor || !editor.isEditable || search.loading)
+      return;
+    store.seed([item]);
+    if (item.ref.kind === 'document') store.ensure([item.ref], true);
+    active.props.command(item);
+  };
+
+  handlers.current = {
+    key(event) {
+      if (blocked) return false;
+      if (event.isComposing || event.keyCode === 229 || editor?.view.composing)
+        return false;
+      if (sessionRef.current && !event.shiftKey) {
+        if (
+          search.loading &&
+          ['ArrowDown', 'ArrowUp', 'Enter'].includes(event.key)
+        )
+          return true;
+        if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+          setSelected((index) =>
+            mentionItems.length
+              ? (index +
+                  (event.key === 'ArrowDown' ? 1 : -1) +
+                  mentionItems.length) %
+                mentionItems.length
+              : 0,
+          );
+          return true;
+        }
+        if (event.key === 'Enter') {
+          const item = mentionItems[selected];
+          if (item) choose(item);
+          return true;
+        }
+        if (event.key === 'Escape') {
+          if (editor) exitSuggestion(editor.view);
+          return true;
+        }
+      }
+      if (event.key === 'Enter') {
+        if (
+          !event.shiftKey &&
+          (props.submitMode === 'mod-enter') ===
+            Boolean(event.metaKey || event.ctrlKey) &&
+          props.onSubmitRequest
+        )
+          props.onSubmitRequest();
+        else editor?.commands.setHardBreak();
+        return true;
+      }
+      return false;
+    },
+    paste(event) {
+      if (!editor || blocked || !event.clipboardData) return false;
+      const data = event.clipboardData;
+      const encoded = data.getData(MIME);
+      if (encoded && encoded.length < 200_000) {
+        try {
+          const pasted = normalizeValue(JSON.parse(encoded));
+          if (
+            !props.enableDocuments &&
+            pasted.content.some(
+              (part) => part.type === 'mention' && part.ref.kind === 'document',
+            )
+          )
+            throw new Error('文档提及暂未启用');
+          editor.commands.insertContent(
+            toEditorDocument(pasted).content?.[0]?.content || [],
+          );
+          event.preventDefault();
+          return true;
+        } catch {
+          /* Invalid rich clipboard falls back to plain text. */
+        }
+      }
+      const text = clipboardPlainText(data);
+      if (text) {
+        const pasted: CommentValue =
+          /^https?:\/\/\S+$/.test(text) && safeUrl(text)
+            ? props.enableDocuments
+              ? fromApiContent([{ type: 'link', url: text }])
+              : { version: 1, content: [{ type: 'link', url: text }] }
+            : { version: 1, content: [{ type: 'text', text }] };
+        editor.commands.insertContent(
+          toEditorDocument(pasted).content?.[0]?.content || [],
+        );
+      }
+      // Foreign HTML is flattened to text; only our validated MIME restores references.
+      event.preventDefault();
+      return true;
+    },
+  };
+
+  const incoming = JSON.stringify(toEditorDocument(value));
+  const incomingRef = useRef(incoming);
+  incomingRef.current = incoming;
+  useEffect(() => {
+    if (!editor?.isInitialized || editor.isDestroyed) return;
+    const dom = editor.view.dom;
+    const sync = () => {
+      if (
+        editor.isDestroyed || !editor.isInitialized || editor.view.composing ||
+        JSON.stringify(editor.getJSON()) === incomingRef.current
+      )
+        return;
+      const position = editor.state.selection.from;
+      editor.commands.setContent(JSON.parse(incomingRef.current), {
+        emitUpdate: false,
+      });
+      editor.commands.setTextSelection(
+        Math.min(position, Math.max(1, editor.state.doc.content.size - 1)),
+      );
+    };
+    sync();
+    const deferred = () => queueMicrotask(sync);
+    dom.addEventListener('compositionend', deferred);
+    // Tiptap may destroy its view before React runs this cleanup.
+    return () => dom.removeEventListener('compositionend', deferred);
+  }, [editor, incoming]);
+  useEffect(() => {
+    if (editor?.isInitialized && !editor.isDestroyed)
+      editor.view.dom.setAttribute(
+        'aria-label',
+        props.placeholder || '输入评论',
+      );
+  }, [editor, props.placeholder]);
+  useEffect(() => {
+    editor?.setEditable(!blocked);
+  }, [editor, blocked]);
+  useEffect(() => {
+    if (!editor) return;
+    editor.commands.focus('end');
+  }, [editor]);
+  useEffect(() => {
+    if (!editor) return;
+    const dom = editor.view.dom;
+    dom.setAttribute('aria-expanded', String(Boolean(session)));
+    if (session) {
+      dom.setAttribute('aria-controls', listId);
+      dom.setAttribute('aria-activedescendant', `${listId}-${selected}`);
+    } else {
+      dom.removeAttribute('aria-controls');
+      dom.removeAttribute('aria-activedescendant');
+    }
+    const dismiss = (event: PointerEvent) => {
+      const target = event.target as globalThis.Node;
+      const ownPanel = document
+        .getElementById(listId)
+        ?.closest('[data-replica-comment-suggestions]');
+      if (!dom.contains(target) && !ownPanel?.contains(target))
+        exitSuggestion(editor.view);
+    };
+    document.addEventListener('pointerdown', dismiss);
+    return () => document.removeEventListener('pointerdown', dismiss);
+  }, [editor, session, listId, selected]);
+
+  return (
+    <div
+      className={cn(
+        COMMENT_THEME_CLASS,
+        'replica-input text-foreground',
+        props.className,
+      )}
+    >
+      <div className="flex min-h-[34px] flex-col justify-center rounded-[6px] border-[0.5px] border-border bg-card px-3 py-[5px] transition-colors hover:border-primary focus-within:border-primary">
+        <div className="relative w-full cursor-text text-sm">
+          <EditorContent editor={editor} />
+          {!value.content.length ? (
+            <p
+              aria-hidden
+              className="pointer-events-none absolute inset-x-0 top-0 truncate text-sm leading-[22px] text-muted-foreground"
+            >
+              {props.placeholder || '输入评论'}
+            </p>
+          ) : null}
+        </div>
+      </div>
+      {session && editor ? (
+        <MentionSuggestions
+          container={props.portalContainer}
+          anchor={session.props.clientRect || (() => null)}
+          editorElement={editor.view.dom}
+          id={listId}
+          items={mentionItems}
+          selected={selected}
+          query={session.query}
+          onSelect={choose}
+          onHover={setSelected}
+          loading={search.loading}
+          initialLoading={search.initialLoading}
+          error={search.error}
+          retry={search.retry}
+          loadMore={search.loadMore}
+          hasMore={Boolean(search.nextCursor)}
+        />
+      ) : null}
+    </div>
+  );
+}
+
+function clipboardPlainText(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: globalThis.Node) => {
+    if (node.nodeType === 3) {
+      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$/, '');
+}
+
+function copySelection(
+  view: EditorView,
+  event: ClipboardEvent,
+  cut = false,
+): boolean {
+  if (
+    view.state.selection.empty ||
+    !event.clipboardData ||
+    (cut && !view.editable)
+  )
+    return false;
+  const { from, to } = view.state.selection;
+  const value = fromEditorDocument(view.state.doc.cut(from, to).toJSON());
+  event.clipboardData.setData(MIME, JSON.stringify(value));
+  event.clipboardData.setData('text/plain', toPlainText(value));
+  event.preventDefault();
+  if (cut) view.dispatch(view.state.tr.deleteSelection());
+  return true;
+}