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

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

@@ -0,0 +1,231 @@
+import { fromApiContent } from './content';
+import {
+  DocumentIcon,
+  USER_MENTION_CLASS,
+  INPUT_USER_MENTION_CLASS,
+  INPUT_USER_MENTION_LABEL_CLASS,
+  COMMENT_THEME_CLASS,
+  USER_MENTION_SELF_CLASS,
+  atUserLabel,
+  USER_MENTION_LABEL_CLASS,
+  DOCUMENT_MENTION_CLASS,
+  DOCUMENT_MENTION_UNREADABLE_CLASS,
+} from './mention-view';
+import * as React from 'react';
+import { cn } from '@/lib/utils';
+import { mentionLabel, normalizeValue, safeUrl } from './content';
+import {
+  useMentionContext,
+  useMentionEntity,
+  useResolveComment,
+} from './mention-provider';
+import type {
+  CommentMentionClickHandler,
+  CommentApiContent,
+  CommentPart,
+  CommentValue,
+} from './types';
+
+function Mention({
+  part,
+  onMentionClick,
+  mentionVariant,
+}: {
+  part: Extract<CommentPart, { type: 'mention' }>;
+  onMentionClick?: CommentMentionClickHandler;
+  mentionVariant?: 'text' | 'pill';
+}) {
+  const { strict, store, currentUserID } = 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 =
+    mentionVariant === 'pill'
+      ? INPUT_USER_MENTION_LABEL_CLASS
+      : part.ref.id === currentUserID
+        ? USER_MENTION_SELF_CLASS
+        : USER_MENTION_LABEL_CLASS;
+  const body = (
+    <span
+      className={cn(
+        userLabelClass,
+        result?.status === 'forbidden' && 'text-muted-foreground',
+      )}
+    >
+      {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';
+} & (
+  | { 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' } = 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,
+  });
+}
+
+function ResolvedContent({
+  value: normalized,
+  className,
+  onMentionClick,
+  mentionVariant,
+}: {
+  value: CommentValue;
+  className?: string;
+  onMentionClick?: CommentMentionClickHandler;
+  mentionVariant?: 'text' | 'pill';
+}) {
+  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}
+            />
+          ),
+        )}
+      </div>
+    </div>
+  );
+}