@lark-apaas/coding-template-nestjs-react-fullstack 0.1.59 → 0.1.60-alpha.20261105123111

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

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