Support rich text descriptions

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);

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">

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">

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>
+</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>

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) {

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">

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">

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,

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)

server/utils/htmlSanitizer.js

@@ -4,7 +4,7 @@ const { entities } = require("./htmlEntities");
 function sanitize(html) {
   const sanitizerOptions = {
     allowedTags: [
-      'p', 'ol', 'ul', 'li', 'a', 'strong', 'em', 'del', 'br'
+      'p', 'ol', 'ul', 'li', 'a', 'strong', 'b', 'em', 'i', 'del', 'br'
     ],
     disallowedTagsMode: 'discard',
     allowedAttributes: {

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) {

server/utils/toneHelpers.js

@@ -1,5 +1,6 @@
 const tone = require('node-tone')
 const fs = require('../libs/fsExtra')
+const htmlSanitizer = require('../utils/htmlSanitizer')
 const Logger = require('../Logger')
 
 function getToneMetadataObject(libraryItem, chapters, trackTotal, mimeType = null) {
@@ -23,8 +24,8 @@ function getToneMetadataObject(libraryItem, chapters, trackTotal, mimeType = nul
     metadataObject['albumArtist'] = bookMetadata.authorName
   }
   if (bookMetadata.description) {
-    metadataObject['comment'] = bookMetadata.description
-    metadataObject['description'] = bookMetadata.description
+    metadataObject['comment'] = htmlSanitizer.stripAllTags(bookMetadata.description)
+    metadataObject['description'] = htmlSanitizer.stripAllTags(bookMetadata.description)
   }
   if (bookMetadata.narratorName) {
     metadataObject['narrator'] = bookMetadata.narratorName