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

package/template/client/src/components/business-ui/comment/comment-input.tsx

@@ -0,0 +1,536 @@
+import {
+  useEffect,
+  useId,
+  useImperativeHandle,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from 'react';
+import * as React from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
+import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
+import { DivEditor, clipboardText } from './dom-editor';
+import {
+  fromApiContent,
+  documentSnapshot,
+  normalizeValue,
+  readApiContent,
+  safeUrl,
+  toPlainText,
+} from './content';
+import { COMMENT_THEME_CLASS } from './mention-view';
+import { useMentionContext } from './mention-provider';
+import { MentionSuggestions, useMentionSearch } from './mention-suggestions';
+import {
+  AttachmentToolbar,
+  ImageAttachments,
+  useCommentImages,
+} from './image-attachments';
+import type { CommentInputProps, CommentValue, MentionOption } from './types';
+
+type Session = { id: number; from: number; to: number; query: string };
+const MIME = 'application/x-miaoda-comment+json';
+
+/** @deprecated The small native editor is now mounted directly; this call remains harmless. */
+export function preloadCommentEditor() {
+  // Retained for callers that used to prefetch the Tiptap/editor chunk.
+}
+
+export function CommentInput(props: CommentInputProps) {
+  const { store } = useMentionContext();
+  try {
+    normalizeValue(props.value);
+  } catch {
+    return (
+      <p role="alert" className="text-sm text-destructive">
+        评论内容格式无效，无法编辑
+      </p>
+    );
+  }
+  return (
+    <ErrorBoundary
+      key={JSON.stringify([store.source.scopeKey, props.documentKey])}
+      fallbackRender={({ resetErrorBoundary }) => (
+        <div
+          role="alert"
+          className="rounded-lg border p-3 text-sm text-destructive"
+        >
+          编辑器发生错误，输入内容已保留。
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            onClick={resetErrorBoundary}
+          >
+            重新加载
+          </Button>
+        </div>
+      )}
+    >
+      <CommentEditor {...props} />
+    </ErrorBoundary>
+  );
+}
+
+function CommentEditor(props: CommentInputProps) {
+  const { store, strict } = useMentionContext();
+  const latest = useRef(props);
+  latest.current = props;
+  const root = useRef<HTMLDivElement>(null);
+  const controller = useRef<DivEditor | null>(null);
+  const pendingExternal = useRef<CommentValue | null>(null);
+  const handlers = useRef({
+    beforeInput: (_event: InputEvent) => {},
+    input: (_event: InputEvent) => {},
+    refresh: () => {},
+  });
+  const [empty, setEmpty] = useState(!props.value.content.length);
+  const [session, setSession] = useState<Session | null>(null);
+  const active = useRef<Session | null>(null);
+  const sequence = useRef(0);
+  const dismissed = useRef('');
+  const [selected, setSelected] = useState(0);
+  const listId = useId();
+  const images = useCommentImages(props);
+  const [editable, setEditable] = useState(true);
+  const blocked = Boolean(props.disabled || !editable);
+  const search = useMentionSearch(
+    store.source,
+    session,
+    props.enableDocuments ? 'all' : 'user',
+  );
+  const items = search.items.filter(
+    (item) => props.enableDocuments || item.ref.kind === 'user',
+  );
+  const close = () => {
+    active.current = null;
+    setSession(null);
+  };
+  const refresh = () => {
+    const editor = controller.current;
+    if (!editor || blocked || document.activeElement !== root.current) {
+      close();
+      return;
+    }
+    const query = editor.query();
+    if (!query || JSON.stringify(query) === dismissed.current) {
+      close();
+      return;
+    }
+    const old = active.current;
+    if (
+      old?.from === query.from &&
+      old.to === query.to &&
+      old.query === query.query
+    )
+      return;
+    if (!old || old.query !== query.query || old.from !== query.from)
+      setSelected(0);
+    const next = {
+      ...query,
+      id: old?.from === query.from ? old.id : ++sequence.current,
+    };
+    active.current = next;
+    setSession(next);
+  };
+  const publish = (value: CommentValue) => {
+    setEmpty(!value.content.length);
+    latest.current.onChange(value);
+  };
+  useLayoutEffect(() => {
+    const element = root.current!;
+    const editor = new DivEditor(
+      element,
+      latest.current.value,
+      store,
+      strict,
+      publish,
+    );
+    controller.current = editor;
+    const beforeInput = (event: Event) =>
+      handlers.current.beforeInput(event as InputEvent);
+    const input = (event: Event) => handlers.current.input(event as InputEvent);
+    const selection = () => handlers.current.refresh();
+    element.addEventListener('beforeinput', beforeInput);
+    element.addEventListener('input', input);
+    document.addEventListener('selectionchange', selection);
+    return () => {
+      editor.destroy();
+      controller.current = null;
+      element.removeEventListener('beforeinput', beforeInput);
+      element.removeEventListener('input', input);
+      document.removeEventListener('selectionchange', selection);
+    };
+  }, [store, strict]);
+  const incoming = JSON.stringify(normalizeValue(props.value));
+  useLayoutEffect(() => {
+    const editor = controller.current;
+    if (!editor) return;
+    if (editor.composing) {
+      pendingExternal.current = props.value;
+      return;
+    }
+    editor.external(props.value);
+    setEmpty(!editor.value.content.length);
+    refresh();
+  }, [incoming]);
+  useEffect(() => {
+    if (blocked) close();
+  }, [blocked]);
+  useEffect(() => {
+    const dismiss = (event: PointerEvent) => {
+      const target = event.target as Node;
+      const panel = document
+        .getElementById(listId)
+        ?.closest('[data-comment-suggestions]');
+      if (!root.current?.contains(target) && !panel?.contains(target)) close();
+    };
+    document.addEventListener('pointerdown', dismiss);
+    return () => document.removeEventListener('pointerdown', dismiss);
+  }, [listId]);
+  useImperativeHandle(props.ref, () => ({
+    getContent: () =>
+      readApiContent(controller.current?.read() || latest.current.value),
+    getImages: images.getImages,
+    clear() {
+      controller.current?.clear();
+      close();
+    },
+    clearImages: images.clear,
+    setEditable,
+    focus() {
+      controller.current?.focus();
+    },
+  }));
+
+  handlers.current = {
+    refresh,
+    beforeInput(event) {
+      const editor = controller.current;
+      if (!editor) return;
+      if (blocked) {
+        event.preventDefault();
+        return;
+      }
+      if (editor.composing || event.isComposing) return;
+      editor.capture();
+      if (
+        event.inputType === 'historyUndo' ||
+        event.inputType === 'historyRedo'
+      ) {
+        if (event.cancelable) {
+          event.preventDefault();
+          editor.undo(event.inputType === 'historyRedo');
+          refresh();
+        }
+      } else if (
+        ['insertParagraph', 'insertLineBreak'].includes(event.inputType) &&
+        event.cancelable
+      ) {
+        event.preventDefault();
+        if (
+          event.inputType === 'insertParagraph' &&
+          props.submitMode !== 'mod-enter' &&
+          props.onSubmitRequest
+        )
+          props.onSubmitRequest();
+        else editor.insert({ version: 1, content: [{ type: 'break' }] });
+        refresh();
+      } else if (
+        [
+          'formatBold',
+          'formatItalic',
+          'formatUnderline',
+          'insertOrderedList',
+          'insertUnorderedList',
+        ].includes(event.inputType)
+      ) {
+        event.preventDefault();
+      }
+    },
+    input(event) {
+      const editor = controller.current;
+      if (!editor || editor.composing) return;
+      if (blocked) {
+        editor.repair();
+        return;
+      }
+      if (['historyUndo', 'historyRedo'].includes(event.inputType)) {
+        // Some browsers report noncancelable native undo; restore our authoritative model.
+        editor.repair();
+        editor.undo(event.inputType === 'historyRedo');
+        refresh();
+        return;
+      }
+      dismissed.current = '';
+      editor.input(event.inputType);
+      refresh();
+    },
+  };
+  const choose = (item: MentionOption) => {
+    const editor = controller.current;
+    const current = editor?.query();
+    const expected = active.current;
+    if (
+      !editor ||
+      blocked ||
+      !current ||
+      !expected ||
+      current.from !== expected.from ||
+      current.to !== expected.to ||
+      current.query !== expected.query
+    )
+      return;
+    store.seed([item]);
+    if (item.ref.kind === 'document') store.ensure([item.ref], true);
+    editor.replace(
+      current.from,
+      current.to,
+      {
+        version: 1,
+        content: [
+          {
+            type: 'mention',
+            ref: item.ref,
+            label: item.label,
+            ...documentSnapshot(item),
+          },
+          { type: 'text', text: ' ' },
+        ],
+      },
+      'mention',
+    );
+    close();
+  };
+  const copy = (event: React.ClipboardEvent, cut = false) => {
+    const editor = controller.current;
+    const value = editor?.selected();
+    if (!value || (cut && blocked) || editor?.composing) return;
+    event.clipboardData.setData(MIME, JSON.stringify(value));
+    event.clipboardData.setData('text/plain', toPlainText(value));
+    event.preventDefault();
+    if (cut) {
+      editor?.insert({ version: 1, content: [] });
+      refresh();
+    }
+  };
+  const addImages = (files: File[]) => {
+    if (!blocked) images.add(files);
+  };
+  return (
+    <div
+      className={cn(COMMENT_THEME_CLASS, '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">
+          <div
+            ref={root}
+            contentEditable={!blocked}
+            suppressContentEditableWarning
+            role="textbox"
+            aria-label={props.placeholder || '输入评论'}
+            aria-multiline="true"
+            aria-autocomplete="list"
+            aria-haspopup="listbox"
+            aria-disabled={blocked}
+            aria-expanded={Boolean(session)}
+            aria-controls={session ? listId : undefined}
+            aria-activedescendant={
+              session && items.length ? `${listId}-${selected}` : undefined
+            }
+            className="relative z-[1] min-h-[22px] max-h-60 overflow-y-auto whitespace-pre-wrap break-words text-sm leading-[22px] outline-none"
+            onFocus={refresh}
+            onKeyUp={refresh}
+            onMouseUp={refresh}
+            onCompositionStart={() => {
+              controller.current?.startComposition();
+              close();
+            }}
+            onCompositionEnd={() => {
+              queueMicrotask(() => {
+                const editor = controller.current;
+                if (!editor) return;
+                if (pendingExternal.current) {
+                  editor.composing = false;
+                  editor.external(pendingExternal.current);
+                  pendingExternal.current = null;
+                  setEmpty(!editor.value.content.length);
+                } else editor.endComposition();
+                dismissed.current = '';
+                refresh();
+              });
+            }}
+            onMouseDown={(event) => {
+              if ((event.target as Element).closest('a'))
+                event.preventDefault();
+            }}
+            onCopy={(event) => copy(event)}
+            onCut={(event) => copy(event, true)}
+            onDragOver={(event) => event.preventDefault()}
+            onDrop={(event) => {
+              event.preventDefault();
+              if (event.dataTransfer.files.length)
+                addImages(Array.from(event.dataTransfer.files));
+            }}
+            onPaste={(event) => {
+              event.preventDefault();
+              const editor = controller.current;
+              if (!editor || blocked || editor.composing) return;
+              const data = event.clipboardData;
+              const files = Array.from(data.files);
+              if (files.length) addImages(files);
+              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.insert(pasted);
+                  refresh();
+                  return;
+                } catch {
+                  /* Invalid rich clipboard falls back to plain text. */
+                }
+              }
+              const text = clipboardText(data);
+              if (text) {
+                editor.insert(
+                  /^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 }] },
+                );
+                refresh();
+              }
+            }}
+            onKeyDown={(event) => {
+              const editor = controller.current;
+              if (
+                !editor ||
+                blocked ||
+                editor.composing ||
+                event.nativeEvent.isComposing ||
+                event.keyCode === 229
+              )
+                return;
+              const modified = event.metaKey || event.ctrlKey;
+              if (
+                modified &&
+                ['z', 'y'].includes(event.key.toLowerCase()) &&
+                !event.altKey
+              ) {
+                event.preventDefault();
+                editor.undo(event.key.toLowerCase() === 'y' || event.shiftKey);
+                refresh();
+                return;
+              }
+              if (
+                modified &&
+                ['b', 'i', 'u'].includes(event.key.toLowerCase())
+              ) {
+                event.preventDefault();
+                return;
+              }
+              if (active.current && !event.shiftKey) {
+                if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+                  event.preventDefault();
+                  setSelected((index) =>
+                    items.length
+                      ? (index +
+                          (event.key === 'ArrowDown' ? 1 : -1) +
+                          items.length) %
+                        items.length
+                      : 0,
+                  );
+                  return;
+                }
+                if (event.key === 'Enter') {
+                  event.preventDefault();
+                  if (items[selected]) choose(items[selected]);
+                  return;
+                }
+                if (event.key === 'Escape') {
+                  event.preventDefault();
+                  dismissed.current = JSON.stringify(editor.query());
+                  close();
+                  return;
+                }
+              }
+              if (event.key === 'Enter') {
+                event.preventDefault();
+                if (
+                  !event.shiftKey &&
+                  (props.submitMode === 'mod-enter') === modified &&
+                  props.onSubmitRequest
+                )
+                  props.onSubmitRequest();
+                else {
+                  editor.insert({ version: 1, content: [{ type: 'break' }] });
+                  refresh();
+                }
+              } else if (
+                ['Backspace', 'Delete'].includes(event.key) &&
+                !modified &&
+                !event.altKey &&
+                !event.shiftKey
+              ) {
+                event.preventDefault();
+                editor.erase(event.key === 'Backspace');
+                dismissed.current = '';
+                refresh();
+              }
+            }}
+          />
+          {empty ? (
+            <p
+              aria-hidden
+              className="pointer-events-none absolute inset-x-0 top-1/2 -translate-y-1/2 truncate text-sm leading-[22px] text-muted-foreground"
+            >
+              {props.placeholder || '输入评论'}
+            </p>
+          ) : null}
+        </div>
+        <ImageAttachments
+          images={images.images}
+          disabled={blocked}
+          remove={images.remove}
+          retry={images.retry}
+        />
+        {props.enableImages || props.onGrantMentionAccessChange ? (
+          <AttachmentToolbar props={props} disabled={blocked} add={addImages} />
+        ) : null}
+      </div>
+      {images.error ? (
+        <p role="alert" className="mt-1 text-xs text-destructive">
+          {images.error}
+        </p>
+      ) : null}
+      {session && root.current ? (
+        <MentionSuggestions
+          container={props.portalContainer}
+          anchor={() => controller.current?.caretRect() || null}
+          editorElement={root.current}
+          id={listId}
+          items={items}
+          selected={selected}
+          query={session.query}
+          onSelect={choose}
+          onHover={setSelected}
+          loading={search.loading}
+          error={search.error}
+          retry={search.retry}
+          loadMore={search.loadMore}
+          hasMore={Boolean(search.nextCursor)}
+        />
+      ) : null}
+    </div>
+  );
+}