@lark-apaas/coding-template-nestjs-react-fullstack 0.1.55-alpha.20261101083729 → 0.1.56

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

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