Merge pull request #1678 from Human-Connection/improve-comments-output

Improve comments output

webapp/components/Comment.spec.js

@@ -30,6 +30,7 @@ describe('Comment.vue', () => {
       },
       $filters: {
         truncate: a => a,
+        removeHtml: a => a,
       },
       $apollo: {
         mutate: jest.fn().mockResolvedValue({

webapp/components/Comment.vue

@@ -38,14 +38,14 @@
       </div>
       <div v-show="!openEditCommentMenu">
         <content-viewer
-          v-if="comment.content.length < 400"
+          v-if="$filters.removeHtml(comment.content).length < 180"
           :content="comment.content"
           class="padding-left"
         />
         <div v-else class="show-more-or-less-div">
           <content-viewer
             v-if="isCollapsed"
-            :content="$filters.truncate(comment.content, 400)"
+            :content="$filters.truncate(comment.content, 180)"
             class="padding-left text-align-left"
           />
           <span class="show-more-or-less">

webapp/components/CommentList/CommentList.spec.js

@@ -41,6 +41,7 @@ describe('CommentList.vue', () => {
         $t: jest.fn(),
         $filters: {
           truncate: a => a,
+          removeHtml: a => a,
         },
         $apollo: {
           queries: {

webapp/package.json

@@ -78,6 +78,7 @@
     "tippy.js": "^4.3.5",
     "tiptap": "~1.25.0",
     "tiptap-extensions": "~1.27.0",
+    "trunc-html": "^1.1.2",
     "v-tooltip": "~2.0.2",
     "vue-count-to": "~1.0.13",
     "vue-infinite-scroll": "^2.0.2",

webapp/plugins/vue-filters.js

@@ -3,6 +3,7 @@ import Vue from 'vue'
 import { enUS, de, nl, fr, es } from 'date-fns/locale'
 import format from 'date-fns/format'
 import accounting from 'accounting'
+import trunc from 'trunc-html'
 
 export default ({ app = {} }) => {
   const locales = {
@@ -45,9 +46,9 @@ export default ({ app = {} }) => {
       if (length <= 0) {
         return value
       }
-      let output = value.substring(0, length)
+      let output = trunc(value, length).html
       if (output.length < value.length) {
-        output += '…'
+        output += ' …'
       }
       return output
     },

webapp/yarn.lock

@@ -3619,6 +3619,16 @@ assign-symbols@^1.0.0:
   resolved "https://registry.yarnpkg.com/assign-symbols/-/assign-symbols-1.0.0.tgz#59667f41fadd4f20ccbc2bb96b8d4f7f78ec0367"
   integrity sha1-WWZ/QfrdTyDMvCu5a41Pf3jsA2c=
 
+assignment@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/assignment/-/assignment-2.0.0.tgz#ffd17b21bf5d6b22e777b989681a815456a3dd3e"
+  integrity sha1-/9F7Ib9dayLnd7mJaBqBVFaj3T4=
+
+assignment@2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/assignment/-/assignment-2.2.0.tgz#f5b5bc2d160d69986e8700cd38f567c0aabe101e"
+  integrity sha1-9bW8LRYNaZhuhwDNOPVnwKq+EB4=
+
 ast-types@0.13.1:
   version "0.13.1"
   resolved "https://registry.yarnpkg.com/ast-types/-/ast-types-0.13.1.tgz#9461428a270c5a27fda44b738dd3bab2e9353003"
@@ -7946,6 +7956,11 @@ hastscript@^5.0.0:
     property-information "^5.0.1"
     space-separated-tokens "^1.0.0"
 
+he@0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/he/-/he-0.5.0.tgz#2c05ffaef90b68e860f3fd2b54ef580989277ee2"
+  integrity sha1-LAX/rvkLaOhg8/0rVO9YCYknfuI=
+
 he@1.2.x, he@^1.1.0, he@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
@@ -8427,6 +8442,14 @@ inquirer@^6.2.2:
     strip-ansi "^5.1.0"
     through "^2.3.6"
 
+insane@2.6.1:
+  version "2.6.1"
+  resolved "https://registry.yarnpkg.com/insane/-/insane-2.6.1.tgz#c7dcae7b51c20346883b71078fad6ce0483c198f"
+  integrity sha1-x9yue1HCA0aIO3EHj61s4Eg8GY8=
+  dependencies:
+    assignment "2.0.0"
+    he "0.5.0"
+
 interpret@^1.0.0, interpret@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.2.0.tgz#d5061a6224be58e8083985f5014d844359576296"
@@ -14689,6 +14712,20 @@ trim-right@^1.0.1:
   dependencies:
     glob "^7.1.2"
 
+trunc-html@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/trunc-html/-/trunc-html-1.1.2.tgz#1e97d51f67d470b67662b1a670e6d0ea7a8edafe"
+  integrity sha1-HpfVH2fUcLZ2YrGmcObQ6nqO2v4=
+  dependencies:
+    assignment "2.2.0"
+    insane "2.6.1"
+    trunc-text "1.0.1"
+
+trunc-text@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/trunc-text/-/trunc-text-1.0.1.tgz#58f876d8ac59b224b79834bb478b8656e69622b5"
+  integrity sha1-WPh22KxZsiS3mDS7R4uGVuaWIrU=
+
 tryer@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/tryer/-/tryer-1.0.1.tgz#f2c85406800b9b0f74c9f7465b81eaad241252f8"