Support rich text book descriptions

[mikiher]

Brief summary

Add support for rich text in book descriptions (including matching and editing).

Which issue is fixed?

Fixes #1820, #3786

In-depth Description

This adds the following:

• Centralized sanitization of match results.
• Rich text editing for book descriptions (including match results)
• Proper display of rich text book descriptions in item pages

The following changes were made:

• BookDetailsEdit.vue and Match.vue
  • Replaced text-area-with-label with rich-text-editor for the description field.
• RichTextEditor.vue
  • Added style="margin-top: 0; margin-bottom: 0.125em" to the label. This was to make it more compatible with TextareaWithLabel.
  • Added blur method to the editor. This is required by Details.vue.
  • Remvoed the config prop. It was moved into VueTrix.
• VueTrix.vue
  • Put the trix-toolbar into the template, with a unique id. This seems better than passing it as a prop.
  • Show the toolbar only when the editor is enabled.
    • note: I tried showing disabled toolbar buttons when the editor is disabled, but the trix-editor is slightly buggy, and sometimes the toolbar buttons go back to showing enabled if you click on the editor area.
  • Moved enableBreakParagraphOnReturn into the static initialization block (since it only does static initialization).
  • Fixed trix-editor background color, to make it more compatible with the rest of the input fields (when disabled and when not disabled).
  • Made the trix-editor show the equivalent of 4 lines of text (4 * lh)
• defaultStyles.css
  • Added less-spacing class to the p and ul tags. I think the current spacing (1em both before and after each block element) is a bit too much.
  • This is used in ViewEpisode.vue and pages/item/_id/index.vue
  • If you're OK with this, we can change the default-style classes themselves to use less spacing.
• trix.css
  • Changed the trix-content class to inherit the line-height from the parent element.
  • Added trix-content p to modify how the editor renders the p tags.
    • I used even less spacing then in defaultStyles.css, because I thought the editor should be more compact than the displayed text, but please change it if you don't like it.
• BookFinder.js
  • Moved all description sanitization into the runSearch method, instead of the various providers.
  • Added book.descriptionPlain to store a fully tag-stripped version of the description.
    • This is used in BookMatchCard.vue. I'm not sure if this is really required - maybe it's not a big deal if the card shows some html tags.
• Book.js
  • Added descriptionPlain to JSON outputs.
    • This is used in one place on the client, when displaying the Currently description in the selected match in Match.vue. I'm not sure if what I did is the best way, and I'm not even sure it's really required (if we just use description instead, the only difference would be that the Currently might show a few html tags - maybe not a big deal).
• htmlSanitizer.js
  • Added b and i tags to the allowed tags.

How have you tested this?

• Made sure rich text match results are properly displayed and edited in the Match Tab and Details Tab
• Made sure rich text descriptions are properly displayed in item pages and ViewEpisode modal.

[advplyr]

This is working great in my testing. We only needed descriptionPlain in the expanded json so I made that update.
Thanks!

[advplyr]

I just updated the mobile app for this and realized the <p> tag was containing <p> tags so updated it to a <div>

[mikiher]

Oh, I forgot about the mobile client. The 3rd-party apps might break as well.

[advplyr]

They would show html tags for new/updated descriptions but I will include in the release notes that descriptionPlain is available for expanded library items.

[obskyr]

Wonderful! Does this support Markdown, or only HTML? And is it possible to store rich text in audio metadata (ID3, etc.) and have Audiobookshelf use it?

[mikiher]

Wonderful! Does this support Markdown, or only HTML?

Only HTML. Also, you cannot edit the HTML directly - only through the rich text editor.

And is it possible to store rich text in audio metadata (ID3, etc.) and have Audiobookshelf use it?

I focused mainly on metadata editing, and on metadata obtained through match providers (like Audible and iTunes), and I believe I haven't changed anything in metadata obtained from audio files.

I expect that if the ID3 description field contains html, Audiobookshelf should read it and use it. I'll check, and if doesn't work I'll fix it.

Update: yes, it seems to be working as expected.