From 082a1e5bcac633ce30afe157d348f8be7ac25dd3 Mon Sep 17 00:00:00 2001
From: MxMarx <ruby.e.marx@gmail.com>
Date: Mon, 2 Oct 2023 15:36:44 -0700
Subject: [PATCH] support rich text book descriptions

---
 client/assets/trix.css                        |  2 +-
 client/components/cards/BookMatchCard.vue     |  2 +-
 client/components/modals/item/tabs/Match.vue  |  6 +--
 client/components/ui/RichTextEditor.vue       | 45 +++++++++++++------
 client/components/ui/VueTrix.vue              |  7 +--
 client/components/widgets/BookDetailsEdit.vue |  2 +-
 client/pages/item/_id/index.vue               |  2 +-
 server/providers/Audible.js                   |  3 +-
 server/providers/iTunes.js                    |  3 +-
 server/utils/parsers/parseOpfMetadata.js      |  2 +-
 10 files changed, 47 insertions(+), 27 deletions(-)

diff --git a/client/assets/trix.css b/client/assets/trix.css
index 8f88c61f1..2beb6c190 100644
--- a/client/assets/trix.css
+++ b/client/assets/trix.css
@@ -27,7 +27,7 @@ trix-toolbar .trix-button-row {
 
 trix-toolbar .trix-button-group {
   display: flex;
-  margin-bottom: 10px;
+  margin-bottom: .3em;
   border: 1px solid rgb(75, 85, 99);
   border-top-color: rgb(75, 85, 99);
   border-bottom-color: rgb(75, 85, 99);
diff --git a/client/components/cards/BookMatchCard.vue b/client/components/cards/BookMatchCard.vue
index dd782d30d..c3878b694 100644
--- a/client/components/cards/BookMatchCard.vue
+++ b/client/components/cards/BookMatchCard.vue
@@ -24,7 +24,7 @@
           </div>
         </div>
         <div class="w-full max-h-12 overflow-hidden">
-          <p class="text-gray-500 text-xs">{{ book.description }}</p>
+          <p class="text-gray-500 text-xs">{{ book.descriptionPlain || book.description }}</p>
         </div>
       </div>
       <div v-else class="px-4 flex-grow">
diff --git a/client/components/modals/item/tabs/Match.vue b/client/components/modals/item/tabs/Match.vue
index 0c5d67eba..5aad63109 100644
--- a/client/components/modals/item/tabs/Match.vue
+++ b/client/components/modals/item/tabs/Match.vue
@@ -85,9 +85,9 @@
         </div>
         <div v-if="selectedMatchOrig.description" class="flex items-center py-2">
           <ui-checkbox v-model="selectedMatchUsage.description" checkbox-bg="bg" @input="checkboxToggled" />
-          <div class="flex-grow ml-4">
-            <ui-textarea-with-label v-model="selectedMatch.description" :rows="3" :disabled="!selectedMatchUsage.description" :label="$strings.LabelDescription" />
-            <p v-if="mediaMetadata.description" class="text-xs ml-1 text-white text-opacity-60">{{ $strings.LabelCurrently }} {{ mediaMetadata.description.substr(0, 100) + (mediaMetadata.description.length > 100 ? '...' : '') }}</p>
+          <div class="flex-grow ml-4 min-w-0">
+            <ui-rich-text-editor v-model="selectedMatch.description" :disabled="!selectedMatchUsage.description" :label="$strings.LabelDescription" />
+            <p v-if="mediaMetadata.description" class="text-xs ml-1 text-white text-opacity-60 truncate ..." :title="mediaMetadata.description" >{{ $strings.LabelCurrently }} {{ mediaMetadata.description || '' }}</p>
           </div>
         </div>
         <div v-if="selectedMatchOrig.publisher" class="flex items-center py-2">
diff --git a/client/components/ui/RichTextEditor.vue b/client/components/ui/RichTextEditor.vue
index 582f5e8f0..fadf1fdb6 100644
--- a/client/components/ui/RichTextEditor.vue
+++ b/client/components/ui/RichTextEditor.vue
@@ -3,7 +3,7 @@
     <p v-if="label" class="px-1 text-sm font-semibold" :class="{ 'text-gray-400': disabled }">
       {{ label }}
     </p>
-    <ui-vue-trix v-model="content" :config="config" :disabled-editor="disabled" @trix-file-accept="trixFileAccept" />
+    <ui-vue-trix v-model="content" :config="config" :disabled-editor="disabled" editorClasses="h-24 resize-y overflow-y-auto default-style py-2 px-3 rounded bg-primary text-gray-200 focus:border-gray-500 focus:outline-none" @trix-file-accept="trixFileAccept" />
   </div>
 </template>
 
@@ -28,32 +28,34 @@ export default {
     },
     config() {
       return {
+        blockAttributes: {default: {tagName: 'p'}},
+        // lang: {bold: this.$strings.ButtonEditorBold}, // this should work but for some reason it doesn't if toolbar.getDefaultHTML is provided
         toolbar: {
           getDefaultHTML: () => `    <div class="trix-button-row">
       <span class="trix-button-group trix-button-group--text-tools" data-trix-button-group="text-tools">
-        <button type="button" class="trix-button trix-button--icon trix-button--icon-bold" data-trix-attribute="bold" data-trix-key="b" title="#{lang.bold}" tabindex="-1">#{lang.bold}</button>
-        <button type="button" class="trix-button trix-button--icon trix-button--icon-italic" data-trix-attribute="italic" data-trix-key="i" title="#{lang.italic}" tabindex="-1">#{lang.italic}</button>
-        <button type="button" class="trix-button trix-button--icon trix-button--icon-strike" data-trix-attribute="strike" title="#{lang.strike}" tabindex="-1">#{lang.strike}</button>
-        <button type="button" class="trix-button trix-button--icon trix-button--icon-link" data-trix-attribute="href" data-trix-action="link" data-trix-key="k" title="#{lang.link}" tabindex="-1">#{lang.link}</button>
+        <button type="button" class="trix-button trix-button--icon trix-button--icon-bold" data-trix-attribute="bold" data-trix-key="b" title="Bold" tabindex="-1">Bold</button>
+        <button type="button" class="trix-button trix-button--icon trix-button--icon-italic" data-trix-attribute="italic" data-trix-key="i" title="Italic" tabindex="-1">Italic</button>
+        <button type="button" class="trix-button trix-button--icon trix-button--icon-strike" data-trix-attribute="strike" title="Strikethrough" tabindex="-1">Strikethrough</button>
+        <button type="button" class="trix-button trix-button--icon trix-button--icon-link" data-trix-attribute="href" data-trix-action="link" data-trix-key="k" title="Link" tabindex="-1">Link</button>
       </span>
       <span class="trix-button-group trix-button-group--block-tools" data-trix-button-group="block-tools">
-        <button type="button" class="trix-button trix-button--icon trix-button--icon-bullet-list" data-trix-attribute="bullet" title="#{lang.bullets}" tabindex="-1">#{lang.bullets}</button>
-        <button type="button" class="trix-button trix-button--icon trix-button--icon-number-list" data-trix-attribute="number" title="#{lang.numbers}" tabindex="-1">#{lang.numbers}</button>
+        <button type="button" class="trix-button trix-button--icon trix-button--icon-bullet-list" data-trix-attribute="bullet" title="Bullets" tabindex="-1">Bullets</button>
+        <button type="button" class="trix-button trix-button--icon trix-button--icon-number-list" data-trix-attribute="number" title="Numbers" tabindex="-1">Numbers</button>
       </span>
 
       <span class="trix-button-group-spacer"></span>
       <span class="trix-button-group trix-button-group--history-tools" data-trix-button-group="history-tools">
-        <button type="button" class="trix-button trix-button--icon trix-button--icon-undo" data-trix-action="undo" data-trix-key="z" title="#{lang.undo}" tabindex="-1">#{lang.undo}</button>
-        <button type="button" class="trix-button trix-button--icon trix-button--icon-redo" data-trix-action="redo" data-trix-key="shift+z" title="#{lang.redo}" tabindex="-1">#{lang.redo}</button>
+        <button type="button" class="trix-button trix-button--icon trix-button--icon-undo" data-trix-action="undo" data-trix-key="z" title="Undo" tabindex="-1">Undo</button>
+        <button type="button" class="trix-button trix-button--icon trix-button--icon-redo" data-trix-action="redo" data-trix-key="shift+z" title="Redo" tabindex="-1">Redo</button>
       </span>
     </div>
     <div class="trix-dialogs" data-trix-dialogs>
       <div class="trix-dialog trix-dialog--link" data-trix-dialog="href" data-trix-dialog-attribute="href">
         <div class="trix-dialog__link-fields">
-          <input type="url" name="href" class="trix-input trix-input--dialog" placeholder="#{lang.urlPlaceholder}" aria-label="#{lang.url}" required data-trix-input>
+          <input type="url" name="href" class="trix-input trix-input--dialog" placeholder="lang.Enter a URL…" aria-label="URL" required data-trix-input>
           <div class="trix-button-group">
-            <input type="button" class="trix-button trix-button--dialog" value="#{lang.link}" data-trix-method="setAttribute">
-            <input type="button" class="trix-button trix-button--dialog" value="#{lang.unlink}" data-trix-method="removeAttribute">
+            <input type="button" class="trix-button trix-button--dialog" value="Link" data-trix-method="setAttribute">
+            <input type="button" class="trix-button trix-button--dialog" value="Unlink" data-trix-method="removeAttribute">
           </div>
         </div>
       </div>
@@ -65,9 +67,24 @@ export default {
   methods: {
     trixFileAccept(e) {
       e.preventDefault()
-    }
+    },
+    blur() {
+      if (this.$refs.input && this.$refs.input.blur) {
+        this.$refs.input.blur()
+      }
+    },
   },
   mounted() {},
   beforeDestroy() {}
 }
-</script>
\ No newline at end of file
+</script>
+
+<style scoped>
+::v-deep .default-style p {
+  margin-block-start: 0em;
+}
+::v-deep trix-editor:not([contenteditable="true"]) {
+  color: #aaa;
+  background-color: #444;
+}
+</style>
\ No newline at end of file
diff --git a/client/components/ui/VueTrix.vue b/client/components/ui/VueTrix.vue
index ace1edd35..f753b1c2d 100644
--- a/client/components/ui/VueTrix.vue
+++ b/client/components/ui/VueTrix.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <trix-editor :contenteditable="!disabledEditor" :class="['trix-content']" ref="trix" :input="computedId" :placeholder="placeholder" @trix-change="handleContentChange" @trix-initialize="handleInitialize" @trix-focus="processTrixFocus" @trix-blur="processTrixBlur" />
+    <trix-editor :contenteditable="!disabledEditor" :class="['trix-content', editorClasses]" ref="trix" :input="computedId" :placeholder="placeholder" @trix-change="handleContentChange" @trix-initialize="handleInitialize" @trix-focus="processTrixFocus" @trix-blur="processTrixBlur" />
     <input type="hidden" :name="inputName" :id="computedId" :value="editorContent" />
   </div>
 </template>
@@ -21,6 +21,7 @@ export default {
     event: 'update'
   },
   props: {
+    editorClasses: String, // classes to apply to the editor but not the toolbar
     /**
      * This prop will put the editor in read-only mode
      */
@@ -224,12 +225,12 @@ export default {
       /** Disable toolbar and editor by pointer events styling */
       if (editorState) {
         this.$refs.trix.toolbarElement.style['pointer-events'] = 'none'
+        this.$refs.trix.toolbarElement.style['display'] = 'none'
         this.$refs.trix.contentEditable = false
-        this.$refs.trix.style['background'] = '#e9ecef'
       } else {
         this.$refs.trix.toolbarElement.style['pointer-events'] = 'unset'
+        this.$refs.trix.toolbarElement.style['display'] = 'block'
         this.$refs.trix.style['pointer-events'] = 'unset'
-        this.$refs.trix.style['background'] = 'transparent'
       }
     },
     overrideConfig(config) {
diff --git a/client/components/widgets/BookDetailsEdit.vue b/client/components/widgets/BookDetailsEdit.vue
index b42082b57..c90f57032 100644
--- a/client/components/widgets/BookDetailsEdit.vue
+++ b/client/components/widgets/BookDetailsEdit.vue
@@ -26,7 +26,7 @@
         </div>
       </div>
 
-      <ui-textarea-with-label ref="descriptionInput" v-model="details.description" :rows="3" :label="$strings.LabelDescription" class="mt-2" />
+      <ui-rich-text-editor ref="descriptionInput" v-model="details.description" :label="$strings.LabelDescription" class="mt-2" />
 
       <div class="flex flex-wrap mt-2 -mx-1">
         <div class="w-full md:w-1/2 px-1">
diff --git a/client/pages/item/_id/index.vue b/client/pages/item/_id/index.vue
index 176725b91..89972f2ba 100644
--- a/client/pages/item/_id/index.vue
+++ b/client/pages/item/_id/index.vue
@@ -125,7 +125,7 @@
           </div>
 
           <div class="my-4 max-w-2xl">
-            <p class="text-base text-gray-100 whitespace-pre-line">{{ description }}</p>
+            <div class="text-base text-gray-100 default-style" v-html="description" />
           </div>
 
           <div v-if="invalidAudioFiles.length" class="bg-error border-red-800 shadow-md p-4">
diff --git a/server/providers/Audible.js b/server/providers/Audible.js
index 31719eef1..a7aa27cbe 100644
--- a/server/providers/Audible.js
+++ b/server/providers/Audible.js
@@ -45,7 +45,8 @@ class Audible {
             narrator: narrators ? narrators.map(({ name }) => name).join(', ') : null,
             publisher: publisherName,
             publishedYear: releaseDate ? releaseDate.split('-')[0] : null,
-            description: summary ? htmlSanitizer.stripAllTags(summary) : null,
+            description: summary ? htmlSanitizer.sanitize(summary) : null,
+            descriptionPlain: summary ? htmlSanitizer.stripAllTags(summary) : null,
             cover: image,
             asin,
             genres: genresFiltered.length ? genresFiltered : null,
diff --git a/server/providers/iTunes.js b/server/providers/iTunes.js
index 39f36ab29..5ce9863df 100644
--- a/server/providers/iTunes.js
+++ b/server/providers/iTunes.js
@@ -69,7 +69,8 @@ class iTunes {
       artistId: data.artistId,
       title: data.collectionName,
       author,
-      description: htmlSanitizer.stripAllTags(data.description || ''),
+      description: htmlSanitizer.sanitize(data.description || ''),
+      descriptionPlain: htmlSanitizer.stripAllTags(data.description || ''),
       publishedYear: data.releaseDate ? data.releaseDate.split('-')[0] : null,
       genres: data.primaryGenreName ? [data.primaryGenreName] : null,
       cover: this.getCoverArtwork(data)
diff --git a/server/utils/parsers/parseOpfMetadata.js b/server/utils/parsers/parseOpfMetadata.js
index d5fb4651c..6b053fb5d 100644
--- a/server/utils/parsers/parseOpfMetadata.js
+++ b/server/utils/parsers/parseOpfMetadata.js
@@ -87,7 +87,7 @@ function fetchDescription(metadata) {
   // check if description is HTML or plain text. only plain text allowed
   // calibre stores < and > as &lt; and &gt;
   description = description.replace(/&lt;/g, '<').replace(/&gt;/g, '>')
-  return htmlSanitizer.stripAllTags(description)
+  return htmlSanitizer.sanitize(description)
 }
 
 function fetchGenres(metadata) {