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

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

@@ -1,529 +0,0 @@
-import { emptyComment, normalizeValue, readApiContent, COMMENT_THEME_CLASS, commentFailureMessage } from './model';
-import type { CommentInputProps, CommentInputHandle, CommentEditorProps, CommentValue } from '../types';
-import { useMentionContext } from './mentions';
-import { CommentContent } from './content';
-import { cn } from '@/lib/utils';
-import { Button } from '@/components/ui/button';
-import { ErrorBoundary } from 'react-error-boundary';
-import * as React from 'react';
-import { useEffect, useImperativeHandle, useCallback, useRef, useState, type ComponentType } from 'react';
-import type { DiscussionDraft, DiscussionImage } from './view-types';
-import { COMMENT_IMAGE_ACCEPT, prepareCommentImage } from './images';
-import { DiscussionIcon } from './icons';
-import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
-import { LockKeyhole, X } from 'lucide-react';
-
-let modulePromise: Promise<typeof import('./editor')> | undefined;
-function loadEditor() {
-  // Reset rejected imports so explicit retry actually executes import again.
-  return (modulePromise ||= import('./editor').catch((error) => {
-    modulePromise = undefined;
-    throw error;
-  }));
-}
-export function preloadCommentEditor() {
-  void loadEditor().catch(() => {});
-}
-
-/** Public entry contains no static import of Tiptap. A session change resets all work. */
-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>
-      )}
-    >
-      <InputSession {...props} />
-    </ErrorBoundary>
-  );
-}
-
-function InputSession(props: CommentInputProps) {
-  const [Editor, setEditor] =
-    React.useState<ComponentType<CommentEditorProps> | null>(null);
-  const latest = useRef(props);
-  latest.current = props;
-  const editorRef = useRef<CommentInputHandle | null>(null);
-  const editable = useRef(true);
-  const [enabled, setEnabled] = useState(true);
-  const loadingRef = useRef(false);
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState('');
-  const alive = useRef(true);
-  useEffect(() => {
-    alive.current = true;
-    return () => {
-      alive.current = false;
-    };
-  }, []);
-  const activate = useCallback(async () => {
-    if (loadingRef.current || latest.current.disabled || !editable.current)
-      return;
-    loadingRef.current = true;
-    setLoading(true);
-    setError('');
-    try {
-      const module = await loadEditor();
-      if (alive.current) setEditor(() => module.default);
-    } catch {
-      if (alive.current) setError('编辑器加载失败，请重试');
-    } finally {
-      loadingRef.current = false;
-      if (alive.current) setLoading(false);
-    }
-  }, []);
-  useImperativeHandle(
-    props.ref,
-    () => ({
-      getContent: () =>
-        editorRef.current?.getContent() ?? readApiContent(latest.current.value),
-      clear() {
-        if (!alive.current) return;
-        if (editorRef.current) editorRef.current.clear();
-        else {
-          const value = emptyComment();
-          latest.current = { ...latest.current, value };
-          latest.current.onChange(value);
-        }
-      },
-      setEditable(next) {
-        if (!alive.current) return;
-        editable.current = next;
-        editorRef.current?.setEditable(next && !latest.current.disabled);
-        setEnabled(next);
-      },
-      focus() {
-        if (!alive.current) return;
-        if (editorRef.current) editorRef.current.focus();
-        else void activate();
-      },
-    }),
-    [activate],
-  );
-  const { ref: _ref, ...editorProps } = props;
-  if (Editor)
-    return (
-      <Editor
-        {...editorProps}
-        disabled={props.disabled || !enabled}
-        editorRef={editorRef}
-      />
-    );
-  return (
-    <div className={cn(COMMENT_THEME_CLASS, 'replica-input', props.className)}>
-      <div className="relative 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
-          aria-hidden
-          className="pointer-events-none w-full text-sm leading-[22px]"
-        >
-          {loading || error ? (
-            <span className="text-muted-foreground">
-              {loading ? '正在加载编辑器…' : '重试加载编辑器'}
-            </span>
-          ) : props.value.content.length ? (
-            <CommentContent value={props.value} mentionVariant="pill" />
-          ) : (
-            <span className="text-muted-foreground">
-              {props.placeholder || '输入评论'}
-            </span>
-          )}
-        </div>
-        <Button
-          type="button"
-          variant="ghost"
-          className="no-default-hover-elevate no-default-active-elevate absolute inset-0 h-full min-h-0 w-full rounded-[6px] p-0"
-          disabled={props.disabled || !enabled || loading}
-          aria-busy={loading}
-          onPointerEnter={preloadCommentEditor}
-          onFocus={preloadCommentEditor}
-          onClick={() => {
-            void activate();
-          }}
-        >
-          <span className="sr-only">
-            {error ? '重试加载编辑器' : props.placeholder || '输入评论'}
-          </span>
-        </Button>
-      </div>
-      {error ? (
-        <p role="alert" className="mt-2 text-xs text-destructive">
-          {error}
-        </p>
-      ) : null}
-    </div>
-  );
-}
-
-export function DiscussionComposer({
-  sessionKey,
-  initialValue,
-  initialImages = [],
-  placeholder = '添加新的评论...',
-  replyName,
-  replyMention,
-  replyIntentKey,
-  commentID,
-  onCancel,
-  onSubmit,
-  disabled,
-  enableDocuments,
-  editing = false,
-  enableImages = true,
-  enablePrivateComments = true,
-}: {
-  sessionKey: string;
-  initialValue?: CommentValue;
-  initialImages?: DiscussionImage[];
-  placeholder?: string;
-  replyName?: string;
-  replyIntentKey?: string;
-  commentID?: string;
-  replyMention?: Extract<CommentValue['content'][number], { type: 'mention' }>;
-  onCancel?: () => void;
-  onSubmit: (draft: DiscussionDraft) => Promise<void> | void;
-  disabled?: boolean;
-  enableDocuments?: boolean;
-  editing?: boolean;
-  enableImages?: boolean;
-  enablePrivateComments?: boolean;
-}) {
-  const [value, setValue] = useState<CommentValue>(
-    initialValue || emptyComment,
-  );
-  const [images, setImages] = useState(initialImages);
-  const [privateComment, setPrivate] = useState(false);
-  const [sending, setSending] = useState(false);
-  const [validating, setValidating] = useState(0);
-  const [error, setError] = useState('');
-  const input = useRef<CommentInputHandle>(null);
-  const fileInput = useRef<HTMLInputElement>(null);
-  const busy = useRef(false);
-  const pending = useRef(0);
-  const alive = useRef(true);
-  const ownedUrls = useRef(new Set<string>());
-  const ready =
-    images.length > 0 ||
-    value.content.some(
-      (part) =>
-        part.type === 'mention' ||
-        part.type === 'link' ||
-        (part.type === 'text' && part.text.trim()),
-    );
-  useEffect(() => {
-    alive.current = true;
-    return () => {
-      alive.current = false;
-      ownedUrls.current.forEach((url) => URL.revokeObjectURL(url));
-    };
-  }, []);
-  useEffect(() => {
-    if (editing || replyName) input.current?.focus();
-  }, [editing, replyName]);
-  const latestReplyMention = useRef(replyMention);
-  latestReplyMention.current = replyMention;
-  const latestValue = useRef(value);
-  latestValue.current = value;
-  const focusAfterReply = useRef(false);
-  useEffect(() => {
-    if (!replyIntentKey) return;
-    const mention = latestReplyMention.current;
-    const first = latestValue.current.content[0];
-    if (
-      mention &&
-      !(first?.type === 'mention' && first.ref.id === mention.ref.id)
-    ) {
-      focusAfterReply.current = true;
-      setValue((previous) => ({
-        version: 1,
-        content: [mention, { type: 'text', text: ' ' }, ...previous.content],
-      }));
-    } else input.current?.focus();
-  }, [replyIntentKey]);
-  useEffect(() => {
-    if (focusAfterReply.current) {
-      focusAfterReply.current = false;
-      input.current?.focus();
-    }
-  }, [value]);
-  const submit = async () => {
-    if (!ready || busy.current || pending.current || disabled) return;
-    busy.current = true;
-    setSending(true);
-    setError('');
-    input.current?.setEditable(false);
-    // The host owns successful attachments, including when submitting unmounts this editor.
-    const transferred = images.filter((image) =>
-      ownedUrls.current.delete(image.url),
-    );
-    try {
-      await onSubmit({ value, images, private: privateComment, commentID });
-      if (!alive.current) return;
-      setImages([]);
-      setValue(emptyComment());
-      input.current?.clear();
-      setPrivate(false);
-    } catch (cause) {
-      transferred.forEach((image) => {
-        if (alive.current) ownedUrls.current.add(image.url);
-        else URL.revokeObjectURL(image.url);
-      });
-      if (alive.current)
-        setError(commentFailureMessage(cause, '发送失败，请重试'));
-    } finally {
-      busy.current = false;
-      if (alive.current) {
-        setSending(false);
-        input.current?.setEditable(true);
-      }
-    }
-  };
-  const addFiles = async (files: FileList | File[]) => {
-    if (!enableImages || disabled || busy.current) return;
-    pending.current++;
-    setValidating(pending.current);
-    setError('');
-    const result = await Promise.allSettled(
-      Array.from(files).map((file) =>
-        prepareCommentImage(file, ownedUrls.current),
-      ),
-    );
-    const accepted = result.flatMap((item) =>
-      item.status === 'fulfilled' ? [item.value] : [],
-    );
-    const failures = result.flatMap((item) =>
-      item.status === 'rejected'
-        ? [item.reason instanceof Error ? item.reason.message : '图片无法读取']
-        : [],
-    );
-    pending.current--;
-    if (!alive.current) {
-      accepted.forEach((image) => {
-        ownedUrls.current.delete(image.url);
-        URL.revokeObjectURL(image.url);
-      });
-      return;
-    }
-    setImages((previous) => [...previous, ...accepted]);
-    setError(failures.join('；'));
-    setValidating(pending.current);
-    input.current?.focus();
-  };
-  const removeImage = (image: DiscussionImage) => {
-    if (ownedUrls.current.delete(image.url)) URL.revokeObjectURL(image.url);
-    setImages((previous) => previous.filter((item) => item.id !== image.id));
-  };
-  const blocked = disabled || sending;
-  return (
-    <div
-      className={`replica-composer-area ${editing ? 'replica-edit-area' : ''}`}
-      onKeyDown={(event) => {
-        // Escape may dismiss suggestions or a file chooser; it must not detach a reply.
-        if (
-          event.key === 'Escape' &&
-          !event.defaultPrevented &&
-          editing &&
-          !busy.current
-        )
-          onCancel?.();
-      }}
-    >
-      <div
-        className={`replica-composer ${editing ? 'replica-composer-edit' : ''} ${privateComment ? 'replica-composer-private' : ''}`}
-        onPasteCapture={(event) => {
-          if (blocked || !enableImages) return;
-          if (event.clipboardData.files.length) {
-            event.preventDefault();
-            event.stopPropagation();
-            void addFiles(event.clipboardData.files);
-          }
-        }}
-        onDragOver={(event) => {
-          if (enableImages && event.dataTransfer.types.includes('Files'))
-            event.preventDefault();
-        }}
-        onDropCapture={(event) => {
-          if (enableImages && event.dataTransfer.files.length) {
-            event.preventDefault();
-            event.stopPropagation();
-            if (!blocked) void addFiles(event.dataTransfer.files);
-          }
-        }}
-      >
-        <CommentInput
-          ref={input}
-          documentKey={sessionKey}
-          value={value}
-          onChange={setValue}
-          placeholder={placeholder}
-          disabled={blocked}
-          enableDocuments={enableDocuments}
-          submitMode="mod-enter"
-          onSubmitRequest={() => {
-            void submit();
-          }}
-        />
-        {images.length > 0 && (
-          <div className="replica-draft-images">
-            {images.map((image) => (
-              <div key={image.id} className="replica-draft-image">
-                <img src={image.url} alt={image.name} />
-                <button
-                  type="button"
-                  aria-label={`移除图片 ${image.name}`}
-                  disabled={sending}
-                  onClick={() => removeImage(image)}
-                >
-                  <span>
-                    <X size={13} />
-                  </span>
-                </button>
-              </div>
-            ))}
-          </div>
-        )}
-        <div className="replica-composer-toolbar">
-          {privateComment && (
-            <span className="replica-private-hint">
-              <LockKeyhole size={12} />
-              私有评论
-            </span>
-          )}
-          <div className="replica-composer-tools">
-            {enableImages && <><button
-              type="button"
-              className="replica-icon-button"
-              title="添加图片"
-              aria-label="添加图片"
-              disabled={blocked}
-              onClick={() => fileInput.current?.click()}
-            >
-              <DiscussionIcon name="image" width={16} height={16} />
-            </button>
-            <input
-              ref={fileInput}
-              type="file"
-              hidden
-              multiple
-              accept={COMMENT_IMAGE_ACCEPT}
-              onChange={(event) => {
-                if (event.target.files) void addFiles(event.target.files);
-                event.target.value = '';
-              }}
-            />
-            </>}
-            {enablePrivateComments && !replyName && !editing && (
-              <Popover>
-                <PopoverTrigger asChild>
-                  <button
-                    type="button"
-                    className="replica-icon-button"
-                    title="更多"
-                    aria-label="评论设置"
-                    disabled={blocked}
-                  >
-                    <DiscussionIcon name="more" />
-                  </button>
-                </PopoverTrigger>
-                <PopoverContent
-                  data-replica-comment-overlay
-                  side="top"
-                  align="end"
-                  sideOffset={8}
-                  className={`${COMMENT_THEME_CLASS} replica-private-menu`}
-                >
-                  <div className="replica-private-heading">
-                    <LockKeyhole size={20} />
-                    <span>私有评论</span>
-                    <button
-                      type="button"
-                      className="replica-switch"
-                      role="switch"
-                      aria-label="私有评论"
-                      aria-checked={privateComment}
-                      onClick={() => setPrivate((previous) => !previous)}
-                    >
-                      <span />
-                    </button>
-                  </div>
-                  <p>
-                    开启后，仅提及的协作者、多维表格所有者、有多维表格管理权限的用户、记录创建人和最近修改人可见。
-                  </p>
-                </PopoverContent>
-              </Popover>
-            )}
-            {!editing && (
-              <>
-                {(enableImages || (enablePrivateComments && !replyName)) && (
-                  <span className="replica-toolbar-divider" />
-                )}
-                <button
-                  type="button"
-                  className="replica-send-button"
-                  title="发送（⌘/Ctrl+Enter）"
-                  aria-label="发送评论"
-                  disabled={!ready || blocked || validating > 0}
-                  onClick={() => {
-                    void submit();
-                  }}
-                >
-                  <DiscussionIcon name="send" width={16} height={16} />
-                </button>
-              </>
-            )}
-          </div>
-        </div>
-      </div>
-      {editing && (
-        <div className="replica-edit-actions">
-          <button type="button" disabled={sending} onClick={onCancel}>
-            取消
-          </button>
-          <button
-            type="button"
-            aria-label="确认编辑"
-            disabled={!ready || blocked || validating > 0}
-            onClick={() => {
-              void submit();
-            }}
-          >
-            确认
-          </button>
-        </div>
-      )}
-      {validating > 0 && (
-        <span role="status" className="sr-only">
-          正在读取图片
-        </span>
-      )}
-      {error && (
-        <p className="replica-error" role="alert">
-          {error}
-        </p>
-      )}
-    </div>
-  );
-}