Remove html-truncate, truncate with CSS instead (github#17630)

heiskr · web-flow · commit e07c603b7d7c · 2021-02-02T17:55:05.000Z
* Remove html-truncate, truncate with CSS instead

* Update search.js
diff --git a/javascripts/search.js b/javascripts/search.js
@@ -1,9 +1,6 @@
 import { tags } from './hyperscript'
 import { sendEvent } from './events'
 import searchWithYourKeyboard from 'search-with-your-keyboard'
-import truncate from 'html-truncate'
-
-const maxContentLength = 300
 
 let $searchInputContainer
 let $searchResultsContainer
@@ -274,8 +271,7 @@ function tmplSearchResult ({ url, breadcrumbs, heading, title, content }) {
       ),
       div(
         { class: 'search-result-content d-block text-gray' },
-        // Truncate without breaking inner HTML tags
-        markify(truncate(content, maxContentLength))
+        markify(content)
       )
     )
   )
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -57,7 +57,6 @@
     "highlightjs-graphql": "^1.0.2",
     "hot-shots": "^8.2.0",
     "html-entities": "^1.2.1",
-    "html-truncate": "^1.2.2",
     "imurmurhash": "^0.1.4",
     "ioredis": "^4.19.4",
     "ioredis-mock": "^5.2.0",
diff --git a/script/check-deps.js b/script/check-deps.js
@@ -42,7 +42,6 @@ const main = async () => {
       'style-loader',
       'webpack-cli',
       'browser-date-formatter',
-      'html-truncate',
       'search-with-your-keyboard',
       'uuid',
       'imurmurhash',
diff --git a/stylesheets/search.scss b/stylesheets/search.scss
@@ -89,6 +89,11 @@ mark,
   }
 }
 
+.search-result-content {
+  max-height: 4rem;
+  overflow: hidden;
+}
+
 .search-result-title em {
   font-style: normal;
   text-decoration: underline;

Original file line number	Diff line number	Diff line change
`@@ -1,9 +1,6 @@`
`1`	`1`	`import { tags } from './hyperscript'`
`2`	`2`	`import { sendEvent } from './events'`
`3`	`3`	`import searchWithYourKeyboard from 'search-with-your-keyboard'`
`4`		`-import truncate from 'html-truncate'`
`5`		`-`
`6`		`-const maxContentLength = 300`
`7`	`4`
`8`	`5`	`let $searchInputContainer`
`9`	`6`	`let $searchResultsContainer`
`@@ -274,8 +271,7 @@ function tmplSearchResult ({ url, breadcrumbs, heading, title, content }) {`
`274`	`271`	`),`
`275`	`272`	`div(`
`276`	`273`	`{ class: 'search-result-content d-block text-gray' },`
`277`		`- // Truncate without breaking inner HTML tags`
`278`		`- markify(truncate(content, maxContentLength))`
	`274`	`+ markify(content)`
`279`	`275`	`)`
`280`	`276`	`)`
`281`	`277`	`)`
Original file line number	Diff line number	Diff line change
`@@ -89,6 +89,11 @@ mark,`
`89`	`89`	`}`
`90`	`90`	`}`
`91`	`91`
	`92`	`+.search-result-content {`
	`93`	`+ max-height: 4rem;`
	`94`	`+ overflow: hidden;`
	`95`	`+}`
	`96`	`+`
`92`	`97`	`.search-result-title em {`
`93`	`98`	`font-style: normal;`
`94`	`99`	`text-decoration: underline;`