feat(agora): handle long rich text (#1090)

Add conversation-specific description limits, reusable rich text empty paragraph normalization, and expandable rich text rendering for long conversation descriptions and statements.

Add a dedicated /dev/long-rich-text-disclosure route linked from the component testing page so the behavior can be manually tested using normal conversation components.

Change conversation content body storage from varchar to text in the shared schema. Migration files are intentionally not included.

Deploy: agora, api, import-worker, math-updater

Author: nicobao

services/agora/src/components/editor/Editor.vue

@@ -118,8 +118,8 @@ import { EditorContent, useEditor } from "@tiptap/vue-3";
 import { BubbleMenu } from "@tiptap/vue-3/menus";
 import Divider from "primevue/divider";
 import { useQuasar } from "quasar";
-import sanitizeHtml from "sanitize-html";
 import { htmlToCountedText } from "src/shared/shared";
+import { processUserGeneratedHtml } from "src/shared-app-api/html";
 import { computed, onUnmounted, ref, watch } from "vue";
 
 import EditorToolbarButton from "./EditorToolbarButton.vue";
@@ -267,25 +267,7 @@ const editor = useEditor({
     },
     // Handle paste to preserve only TipTap-enabled formatting
     transformPastedHTML(html) {
-      // Only allow tags that TipTap supports: b, strong, i, em, strike, s, u, p, br, ul, ol, li
-      const options: sanitizeHtml.IOptions = {
-        allowedTags: [
-          "b",
-          "strong",
-          "i",
-          "em",
-          "strike",
-          "s",
-          "u",
-          "p",
-          "br",
-          "ul",
-          "ol",
-          "li",
-        ],
-        allowedAttributes: {},
-      };
-      return sanitizeHtml(html, options);
+      return processUserGeneratedHtml(html, false, "input");
     },
     handleKeyDown(_view, event) {
       if (props.submitOnEnter && event.key === "Enter" && !event.shiftKey) {

services/agora/src/components/post/list/OpinionListItem.vue

@@ -46,6 +46,7 @@
             :html-body="opinionItem.opinion"
             :compact-mode="false"
             :enable-links="false"
+            :collapsible="false"
           />
         </div>
 

services/agora/src/components/post/maxdiff/MaxDiffItemListSection.vue

@@ -44,6 +44,7 @@
                   :html-body="item.title"
                   :compact-mode="true"
                   :enable-links="false"
+                  content-role="title"
                 />
                 <div v-if="item.score !== null" class="item-meta">
                   <div class="score-bar-container">

services/agora/src/components/post/maxdiff/MaxDiffStatementDialog.vue

@@ -15,6 +15,7 @@
           :html-body="title"
           :compact-mode="false"
           :enable-links="false"
+          content-role="title"
         />
         <ZKHtmlContent
           v-if="htmlBody"

services/agora/src/components/post/maxdiff/MaxDiffVotingTab.vue

@@ -134,6 +134,7 @@
                 :html-body="itemContentMap.get(slugId) ?? slugId"
                 :compact-mode="false"
                 :enable-links="false"
+                content-role="title"
               />
               <span v-if="itemBySlugId.get(slugId)?.body" class="candidate-body-inline">
                 — {{ stripHtml(itemBySlugId.get(slugId)?.body ?? "") }}

services/agora/src/components/ui-library/ZKHtmlContent.i18n.ts

@@ -3,6 +3,8 @@ import type { SupportedDisplayLanguageCodes } from "src/shared/languages";
 export interface ZKHtmlContentTranslations {
   postContentPreview: string;
   postContent: string;
+  readMore: string;
+  showLess: string;
 }
 
 export const zkHtmlContentTranslations: Record<
@@ -12,39 +14,67 @@ export const zkHtmlContentTranslations: Record<
   en: {
     postContentPreview: "Post content preview",
     postContent: "Post content",
+    readMore: "Read more",
+    showLess: "Show less",
   },
   ar: {
     postContentPreview: "معاينة محتوى المنشور",
     postContent: "محتوى المنشور",
+    readMore: "اقرأ المزيد",
+    showLess: "عرض أقل",
   },
   es: {
     postContentPreview: "Vista previa del contenido",
     postContent: "Contenido de la publicación",
+    readMore: "Leer más",
+    showLess: "Mostrar menos",
+  },
+  fa: {
+    postContentPreview: "پیش‌نمایش محتوای پست",
+    postContent: "محتوای پست",
+    readMore: "بیشتر بخوانید",
+    showLess: "نمایش کمتر",
   },
-  fa: { postContentPreview: "پیش‌نمایش محتوای پست", postContent: "محتوای پست" },
   fr: {
     postContentPreview: "Aperçu du contenu",
     postContent: "Contenu du post",
+    readMore: "Lire la suite",
+    showLess: "Afficher moins",
   },
   "zh-Hans": {
     postContentPreview: "帖子内容预览",
     postContent: "帖子内容",
+    readMore: "阅读更多",
+    showLess: "收起",
   },
   "zh-Hant": {
     postContentPreview: "帖子內容預覽",
     postContent: "帖子內容",
+    readMore: "閱讀更多",
+    showLess: "收起",
+  },
+  he: {
+    postContentPreview: "תצוגה מקדימה של תוכן הפוסט",
+    postContent: "תוכן הפוסט",
+    readMore: "קראו עוד",
+    showLess: "הציגו פחות",
   },
-  he: { postContentPreview: "תצוגה מקדימה של תוכן הפוסט", postContent: "תוכן הפוסט" },
   ja: {
     postContentPreview: "投稿内容プレビュー",
     postContent: "投稿内容",
+    readMore: "続きを読む",
+    showLess: "表示を減らす",
   },
   ky: {
     postContentPreview: "Жазуу мазмунун алдын ала көрүү",
     postContent: "Жазуу мазмуну",
+    readMore: "Кененирээк окуу",
+    showLess: "Азыраак көрсөтүү",
   },
   ru: {
     postContentPreview: "Предпросмотр содержимого публикации",
     postContent: "Содержимое публикации",
+    readMore: "Читать дальше",
+    showLess: "Скрыть",
   },
 };

services/agora/src/components/ui-library/ZKHtmlContent.vue

@@ -1,6 +1,37 @@
 <!-- eslint-disable vue/no-v-html -->
 <template>
+  <div v-if="isDisclosureEnabled" class="html-content-wrapper">
+    <div
+      :id="contentId"
+      ref="contentRef"
+      class="textBreak"
+      :class="{
+        truncate: compactMode,
+        'collapsible-content': isDisclosureEnabled,
+        'collapsible-content--collapsed': isDisclosureEnabled && isCollapsed,
+        coloredHrefs: !compactMode,
+      }"
+      :style="contentStyle"
+      role="user-content"
+      :aria-label="compactMode ? t('postContentPreview') : t('postContent')"
+      @click="handleClick"
+      v-html="sanitizedHtmlBody"
+    ></div>
+
+    <button
+      v-if="showDisclosureButton"
+      type="button"
+      class="disclosure-button"
+      :aria-expanded="!isCollapsed"
+      :aria-controls="contentId"
+      @click.stop="toggleDisclosure"
+    >
+      {{ isCollapsed ? t("readMore") : t("showLess") }}
+    </button>
+  </div>
+
   <span
+    v-else
     class="textBreak"
     :class="{ truncate: compactMode, coloredHrefs: !compactMode }"
     role="user-content"
@@ -13,23 +44,49 @@
 <script setup lang="ts">
 import { useComponentI18n } from "src/composables/ui/useComponentI18n";
 import { processUserGeneratedHtml } from "src/shared-app-api/html";
-import { computed } from "vue";
+import {
+  computed,
+  nextTick,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  useId,
+  watch,
+} from "vue";
 
 import {
   type ZKHtmlContentTranslations,
   zkHtmlContentTranslations,
 } from "./ZKHtmlContent.i18n";
 
-const props = defineProps<{
-  htmlBody: string;
-  compactMode: boolean;
-  enableLinks: boolean;
-}>();
+type HtmlContentRole = "body" | "title";
+
+const props = withDefaults(
+  defineProps<{
+    htmlBody: string;
+    compactMode: boolean;
+    enableLinks: boolean;
+    contentRole?: HtmlContentRole;
+    collapsible?: boolean;
+    collapsedLineCount?: number;
+  }>(),
+  {
+    contentRole: "body",
+    collapsible: true,
+    collapsedLineCount: 10,
+  }
+);
 
 const { t } = useComponentI18n<ZKHtmlContentTranslations>(
   zkHtmlContentTranslations
 );
 
+const contentId = `zk-html-content-${useId()}`;
+const contentRef = ref<HTMLElement | null>(null);
+const isCollapsed = ref(true);
+const isOverflowing = ref(false);
+let resizeObserver: ResizeObserver | undefined;
+
 const sanitizedHtmlBody = computed(() => {
   try {
     return processUserGeneratedHtml(props.htmlBody, props.enableLinks);
@@ -47,6 +104,49 @@ const sanitizedHtmlBody = computed(() => {
   }
 });
 
+const isDisclosureEnabled = computed(
+  () => props.collapsible && props.contentRole === "body" && !props.compactMode
+);
+
+const showDisclosureButton = computed(
+  () => isDisclosureEnabled.value && isOverflowing.value
+);
+
+const contentStyle = computed(() => ({
+  "--collapsed-line-count": props.collapsedLineCount.toString(),
+}));
+
+function observeContentElement(contentElement: HTMLElement | null): void {
+  resizeObserver?.disconnect();
+  if (resizeObserver !== undefined && contentElement !== null) {
+    resizeObserver.observe(contentElement);
+  }
+}
+
+async function updateOverflowState(): Promise<void> {
+  await nextTick();
+  const contentElement = contentRef.value;
+  if (contentElement === null || !isDisclosureEnabled.value) {
+    isOverflowing.value = false;
+    return;
+  }
+
+  if (!isCollapsed.value) {
+    return;
+  }
+
+  isOverflowing.value =
+    contentElement.scrollHeight > contentElement.clientHeight + 1;
+}
+
+function toggleDisclosure(): void {
+  isCollapsed.value = !isCollapsed.value;
+  if (isCollapsed.value) {
+    contentRef.value?.scrollIntoView({ block: "nearest" });
+    void updateOverflowState();
+  }
+}
+
 const handleClick = (event: Event) => {
   const target = event.target as HTMLElement;
   // Check if the clicked element is a link or is inside a link
@@ -56,6 +156,33 @@ const handleClick = (event: Event) => {
     event.stopPropagation();
   }
 };
+
+onMounted(() => {
+  if (typeof ResizeObserver !== "undefined") {
+    resizeObserver = new ResizeObserver(() => {
+      void updateOverflowState();
+    });
+    observeContentElement(contentRef.value);
+  }
+  void updateOverflowState();
+});
+
+onBeforeUnmount(() => {
+  resizeObserver?.disconnect();
+});
+
+watch(
+  [sanitizedHtmlBody, isDisclosureEnabled, () => props.collapsedLineCount],
+  () => {
+    isCollapsed.value = true;
+    void updateOverflowState();
+  }
+);
+
+watch(contentRef, (contentElement) => {
+  observeContentElement(contentElement);
+  void updateOverflowState();
+});
 </script>
 
 <style lang="scss" scoped>
@@ -66,6 +193,40 @@ const handleClick = (event: Event) => {
   word-break: break-word;
 }
 
+.html-content-wrapper {
+  display: block;
+}
+
+.collapsible-content {
+  position: relative;
+}
+
+.collapsible-content--collapsed {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: var(--collapsed-line-count);
+  line-clamp: var(--collapsed-line-count);
+  -webkit-box-orient: vertical;
+}
+
+.disclosure-button {
+  display: flex;
+  align-items: center;
+  padding: 0;
+  width: fit-content;
+  margin-block: 0.5rem;
+  border: 0;
+  background: transparent;
+  color: $primary;
+  font: inherit;
+  font-weight: var(--font-weight-medium);
+  cursor: pointer;
+}
+
+.disclosure-button:hover {
+  text-decoration: underline;
+}
+
 :deep(p) {
   margin-bottom: 0.5rem;
 }

services/agora/src/composables/conversation/draft/conversationDraft.schema.ts

@@ -6,7 +6,7 @@
  * - newConversationDrafts store (persistence validation)
  */
 
-import { MAX_LENGTH_BODY, MAX_LENGTH_TITLE } from "src/shared/shared";
+import { MAX_LENGTH_CONVERSATION_BODY, MAX_LENGTH_TITLE } from "src/shared/shared";
 import {
   zodConversationType,
   zodEventSlug,
@@ -174,5 +174,5 @@ export type ConversationImportType = z.infer<typeof zodConversationImportType>;
 
 export const VALIDATION_CONSTANTS = {
   MAX_LENGTH_TITLE,
-  MAX_LENGTH_BODY,
+  MAX_LENGTH_BODY: MAX_LENGTH_CONVERSATION_BODY,
 } as const;