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

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

@@ -0,0 +1,213 @@
+import type { CommentMentionClickHandler, CommentApiContent, CommentPart, CommentValue } from '../types';
+import { useMentionContext, useMentionEntity, useResolveComment } from './mentions';
+import { mentionLabel, normalizeValue, safeUrl, USER_MENTION_CLASS, INPUT_USER_MENTION_CLASS, COMMENT_THEME_CLASS, userMentionLabelClass, atUserLabel, DOCUMENT_MENTION_CLASS, DOCUMENT_MENTION_UNREADABLE_CLASS, fromApiContent } from './model';
+import { cn } from '@/lib/utils';
+import * as React from 'react';
+import { DocumentIcon } from './icons';
+
+function Mention({
+  part,
+  onMentionClick,
+  mentionVariant,
+  trailing,
+}: {
+  part: Extract<CommentPart, { type: 'mention' }>;
+  onMentionClick?: CommentMentionClickHandler;
+  mentionVariant?: 'text' | 'pill';
+  trailing?: React.ReactNode;
+}) {
+  const { strict, store, currentUserID, highlightUserIDs } =
+    useMentionContext();
+  const result = useMentionEntity(part.ref);
+  const label = mentionLabel(part.ref, part.label, result, strict);
+  if (part.ref.kind === 'document') {
+    const resolved = result?.status === 'resolved' ? result : undefined;
+    const documentHref = safeUrl(
+      resolved?.href || (!strict ? part.href : undefined),
+    );
+    const metadata =
+      resolved?.document || (!strict ? part.document : undefined);
+    const title = resolved
+      ? resolved.label
+      : result?.status === 'forbidden' ||
+          result?.status === 'not-found' ||
+          strict
+        ? label
+        : part.label;
+    const body = (
+      <>
+        {title ? (
+          <DocumentIcon refValue={part.ref} metadata={metadata} />
+        ) : null}
+        <span>{title || documentHref || '文档'}</span>
+      </>
+    );
+    if (documentHref)
+      return (
+        <a
+          className={
+            result?.status === 'forbidden' || resolved?.readable === false
+              ? DOCUMENT_MENTION_UNREADABLE_CLASS
+              : DOCUMENT_MENTION_CLASS
+          }
+          href={documentHref}
+          target="_blank"
+          rel="noopener noreferrer"
+          data-doclink="true"
+          data-doclink-token={part.ref.id}
+          data-doclink-type={part.ref.resourceType}
+          onClick={(event) => event.stopPropagation()}
+          onMouseDown={(event) => event.preventDefault()}
+        >
+          {body}
+        </a>
+      );
+    if (result?.status === 'error')
+      return (
+        <button
+          type="button"
+          className={DOCUMENT_MENTION_CLASS}
+          title="信息加载失败，点击重试"
+          onClick={() => store.ensure([part.ref], true)}
+        >
+          {body}
+        </button>
+      );
+    return <span className={DOCUMENT_MENTION_CLASS}>{body}</span>;
+  }
+  const userLabelClass = userMentionLabelClass(
+    part.ref.id === currentUserID || Boolean(highlightUserIDs?.includes(part.ref.id)),
+    result?.status === 'forbidden',
+  );
+  const body = (
+    <span
+      className={userLabelClass}
+    >
+      {atUserLabel(label)}
+    </span>
+  );
+  const className =
+    mentionVariant === 'pill' ? INPUT_USER_MENTION_CLASS : USER_MENTION_CLASS;
+  if (
+    onMentionClick &&
+    result?.status !== 'forbidden' &&
+    result?.status !== 'not-found'
+  )
+    return (
+      <button
+        type="button"
+        className={className}
+        onClick={(event) => onMentionClick(part.ref, event.currentTarget)}
+      >
+        {body}
+      </button>
+    );
+  if (result?.status === 'error')
+    return (
+      <button
+        type="button"
+        className={className}
+        title="信息加载失败，点击重试"
+        onClick={() => store.ensure([part.ref], true)}
+      >
+        {body}
+      </button>
+    );
+  return <span className={className}>{body}</span>;
+}
+
+export type CommentContentProps = {
+  className?: string;
+  onMentionClick?: CommentMentionClickHandler;
+  mentionVariant?: 'text' | 'pill';
+  trailing?: React.ReactNode;
+} & (
+  | { value: CommentValue; content?: never }
+  | { content: readonly CommentApiContent[]; value?: never }
+);
+
+/** Pass API content with userID only; metadata is fetched internally in batches. */
+export function CommentContent(props: CommentContentProps) {
+  const { className, onMentionClick, mentionVariant = 'text', trailing } = props;
+  let normalized: CommentValue;
+  try {
+    normalized = props.value
+      ? normalizeValue(props.value)
+      : fromApiContent(props.content!);
+  } catch {
+    return (
+      <p role="alert" className="text-sm text-destructive">
+        评论内容格式无效，无法展示
+      </p>
+    );
+  }
+  return React.createElement(ResolvedContent, {
+    value: normalized,
+    className,
+    onMentionClick,
+    mentionVariant,
+    trailing,
+  });
+}
+
+function ResolvedContent({
+  value: normalized,
+  className,
+  onMentionClick,
+  mentionVariant,
+  trailing,
+}: {
+  value: CommentValue;
+  className?: string;
+  onMentionClick?: CommentMentionClickHandler;
+  mentionVariant?: 'text' | 'pill';
+  trailing?: React.ReactNode;
+}) {
+  useResolveComment(normalized);
+  return (
+    <div
+      className={cn(
+        COMMENT_THEME_CLASS,
+        'text-foreground text-sm leading-[22px]',
+        className,
+      )}
+    >
+      <div className="whitespace-pre-wrap break-words">
+        {normalized.content.map((part, index) =>
+          part.type === 'text' ? (
+            part.text
+          ) : part.type === 'break' ? (
+            <br key={index} />
+          ) : part.type === 'link' ? (
+            <a
+              key={index}
+              href={safeUrl(part.url)}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="break-words text-primary no-underline hover:underline"
+              onClick={(event) => event.stopPropagation()}
+            >
+              {part.url}
+            </a>
+          ) : part.type === 'unresolved-mention' ? (
+            <span
+              key={index}
+              className="text-subtle-foreground"
+              title="原评论缺少被提及对象的信息"
+            >
+              引用信息缺失
+            </span>
+          ) : (
+            <Mention
+              key={index}
+              part={part}
+              onMentionClick={onMentionClick}
+              mentionVariant={mentionVariant}
+            />
+          ),
+        )}
+        {trailing}
+      </div>
+    </div>
+  );
+}