starred/audiobookshelf
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf.git synced 2026-05-30 23:40:40 +02:00
Code Issues 1.0k Packages Projects Releases 10 Wiki Activity

[PR #3880] [MERGED] Support rich text book descriptions #4108

New Issue
Closed
opened 2026-04-25 00:18:21 +02:00 by adam · 0 comments
adam commented 2026-04-25 00:18:21 +02:00
Owner
Copy Link
Copy Source

📋 Pull Request Information

Original PR: https://github.com/advplyr/audiobookshelf/pull/3880
Author: @mikiher
Created: 1/22/2025
Status: ✅ Merged
Merged: 1/25/2025
Merged by: @advplyr

Base: master ← Head: rich-text-book-descriptionss

📝 Commits (2)

  • 2861853 Support rich text book descriptions
  • 922a503 Update descriptionPlain to only be available in json expanded

📊 Changes

14 files changed (+134 additions, -83 deletions)

View changed files

📝 client/assets/defaultStyles.css (+14 -1)
📝 client/assets/trix.css (+9 -2)
📝 client/components/cards/BookMatchCard.vue (+1 -1)
📝 client/components/modals/item/tabs/Match.vue (+2 -2)
📝 client/components/modals/podcast/ViewEpisode.vue (+1 -1)
📝 client/components/ui/RichTextEditor.vue (+12 -39)
📝 client/components/ui/VueTrix.vue (+78 -25)
📝 client/components/widgets/BookDetailsEdit.vue (+1 -1)
📝 client/pages/item/_id/index.vue (+2 -3)
📝 server/finders/BookFinder.js (+7 -0)
📝 server/models/Book.js (+2 -0)
📝 server/providers/Audible.js (+1 -2)
📝 server/providers/iTunes.js (+1 -1)
📝 server/utils/htmlSanitizer.js (+3 -5)

📄 Description

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.

🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.

## 📋 Pull Request Information **Original PR:** https://github.com/advplyr/audiobookshelf/pull/3880 **Author:** [@mikiher](https://github.com/mikiher) **Created:** 1/22/2025 **Status:** ✅ Merged **Merged:** 1/25/2025 **Merged by:** [@advplyr](https://github.com/advplyr) **Base:** `master` ← **Head:** `rich-text-book-descriptionss` --- ### 📝 Commits (2) - [`2861853`](https://github.com/advplyr/audiobookshelf/commit/286185329d50695761653b87d2d8e54d2ad5431b) Support rich text book descriptions - [`922a503`](https://github.com/advplyr/audiobookshelf/commit/922a5039ce142976deeec2f8e954e91db90e0017) Update descriptionPlain to only be available in json expanded ### 📊 Changes **14 files changed** (+134 additions, -83 deletions) <details> <summary>View changed files</summary> 📝 `client/assets/defaultStyles.css` (+14 -1) 📝 `client/assets/trix.css` (+9 -2) 📝 `client/components/cards/BookMatchCard.vue` (+1 -1) 📝 `client/components/modals/item/tabs/Match.vue` (+2 -2) 📝 `client/components/modals/podcast/ViewEpisode.vue` (+1 -1) 📝 `client/components/ui/RichTextEditor.vue` (+12 -39) 📝 `client/components/ui/VueTrix.vue` (+78 -25) 📝 `client/components/widgets/BookDetailsEdit.vue` (+1 -1) 📝 `client/pages/item/_id/index.vue` (+2 -3) 📝 `server/finders/BookFinder.js` (+7 -0) 📝 `server/models/Book.js` (+2 -0) 📝 `server/providers/Audible.js` (+1 -2) 📝 `server/providers/iTunes.js` (+1 -1) 📝 `server/utils/htmlSanitizer.js` (+3 -5) </details> ### 📄 Description ## 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. --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>
adam added the pull-request label 2026-04-25 00:18:21 +02:00
adam closed this issue 2026-04-25 00:18:21 +02:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
authentication
backlog
bug
chapter editor
config-issue
ebooks
encoding/embedding
enhancement
help wanted
listening sessions & progress
planned
possible plugin
progress sync
pull-request
Mirrored from GitHub Pull Request
 sorting/filtering/searching
unable to reproduce
upload
users & permissions
waiting
No Label pull-request
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
adam (Adam Melkus)
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: starred/audiobookshelf#4108
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?