preserve line breaks in text content (#1061)

goplus · Oct 31, 2024 · 9f88d1c · 9f88d1c
1 parent b8e95cd
commit 9f88d1c
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 7 deletions.
diff --git a/spx-gui/src/components/community/TextView.vue b/spx-gui/src/components/community/TextView.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+defineProps<{
+  text: string
+  placeholder?: string
+}>()
+
+// TODO: more feature, see details in https://github.com/goplus/builder/issues/1060
+</script>
+
+<template>
+  <div class="text-view">
+    <template v-if="!!text">{{ text }}</template>
+    <template v-else>{{ placeholder ?? '&nbsp;' }}</template>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.text-view {
+  overflow-y: auto;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+</style>
diff --git a/spx-gui/src/components/community/project/ReleaseHistory.vue b/spx-gui/src/components/community/project/ReleaseHistory.vue
@@ -3,6 +3,7 @@ import { type QueryRet } from '@/utils/query'
 import { humanizeTime } from '@/utils/utils'
 import { type ProjectRelease } from '@/apis/project-release'
 import { UITimeline, UITimelineItem, UILoading, UIError } from '@/components/ui'
+import TextView from '../TextView.vue'
 
 defineProps<{
   queryRet: QueryRet<ProjectRelease[]>
@@ -23,7 +24,7 @@ defineProps<{
       :key="release.id"
       :time="$t(humanizeTime(release.createdAt))"
     >
-      {{ release.description }}
+      <TextView :text="release.description" />
     </UITimelineItem>
   </UITimeline>
 </template>

diff --git a/spx-gui/src/components/community/user/UserHeader.vue b/spx-gui/src/components/community/user/UserHeader.vue
@@ -1,13 +1,14 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { type User } from '@/apis/user'
+import { useMessageHandle } from '@/utils/exception'
 import { useUserStore } from '@/stores/user'
 import { UIButton, UIImg, useModal } from '@/components/ui'
 import CommunityCard from '@/components/community/CommunityCard.vue'
+import TextView from '../TextView.vue'
 import FollowButton from './FollowButton.vue'
 import UserJoinedAt from './UserJoinedAt.vue'
 import EditProfileModal from './EditProfileModal.vue'
-import { useMessageHandle } from '@/utils/exception'
 import { getCoverImgUrl } from './cover'
 
 const props = defineProps<{
@@ -35,7 +36,7 @@ const handleEditProfile = useMessageHandle(async () => invokeEditProfileModal({
           {{ user.displayName }}
           <UserJoinedAt class="joined-at" :time="user.createdAt" />
         </h2>
-        <p class="description">{{ user.description || '&nbsp;' }}</p>
+        <TextView style="max-height: 66px" :text="user.description" />
       </div>
       <div class="op">
         <UIButton v-if="isSignedInUser" @click="handleEditProfile">

diff --git a/spx-gui/src/components/community/user/UserItem.vue b/spx-gui/src/components/community/user/UserItem.vue
@@ -2,10 +2,11 @@
 import { computed } from 'vue'
 import type { User } from '@/apis/user'
 import { getUserPageRoute } from '@/router'
+import RouterUILink from '@/components/common/RouterUILink.vue'
+import TextView from '../TextView.vue'
 import UserAvatar from './UserAvatar.vue'
 import FollowButton from './FollowButton.vue'
 import UserJoinedAt from './UserJoinedAt.vue'
-import RouterUILink from '@/components/common/RouterUILink.vue'
 
 const props = defineProps<{
   user: User
@@ -19,7 +20,7 @@ const userRoute = computed(() => getUserPageRoute(props.user.username))
     <UserAvatar class="avatar" :user="user.username" />
     <RouterUILink class="name" type="boring" :to="userRoute">{{ user.displayName }}</RouterUILink>
     <UserJoinedAt class="joined-at" :time="user.createdAt" />
-    <p class="description">{{ user.description }}</p>
+    <TextView class="description" :text="user.description" />
     <FollowButton class="follow" :name="user.username" />
   </li>
 </template>
@@ -54,6 +55,7 @@ const userRoute = computed(() => getUserPageRoute(props.user.username))
 
 .description {
   margin-top: 6px;
+  max-height: 60px;
   font-size: 13px;
   line-height: 20px;
   color: var(--ui-color-text);

diff --git a/spx-gui/src/pages/community/project.vue b/spx-gui/src/pages/community/project.vue
@@ -35,6 +35,7 @@ import OwnerInfo from '@/components/community/project/OwnerInfo.vue'
 import { useCreateProject, useRemoveProject, useShareProject, useUnpublishProject } from '@/components/project'
 import CommunityCard from '@/components/community/CommunityCard.vue'
 import ReleaseHistory from '@/components/community/project/ReleaseHistory.vue'
+import TextView from '@/components/community/TextView.vue'
 
 const props = defineProps<{
   owner: string
@@ -413,10 +414,13 @@ const remixesRet = useQuery(
             <UIDivider class="divider" />
             <UICollapse class="collapse" :default-expanded-names="['description', 'instructions', 'releases']">
               <UICollapseItem :title="$t({ en: 'Description', zh: '描述' })" name="description">
-                {{ project.description || $t({ en: 'No description yet', zh: '暂无描述' }) }}
+                <TextView :text="project.description" :placeholder="$t({ en: 'No description yet', zh: '暂无描述' })" />
               </UICollapseItem>
               <UICollapseItem :title="$t({ en: 'Play instructions', zh: '操作说明' })" name="instructions">
-                {{ project.instructions || $t({ en: 'No instructions yet', zh: '暂无操作说明' }) }}
+                <TextView
+                  :text="project.instructions"
+                  :placeholder="$t({ en: 'No instructions yet', zh: '暂无操作说明' })"
+                />
               </UICollapseItem>
               <UICollapseItem :title="$t({ en: 'Release history', zh: '发布历史' })" name="releases">
                 <ReleaseHistory :query-ret="releasesRet" />