groove/audiobookshelf
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf.git synced 2026-07-15 13:51:35 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

support rich text book descriptions

Browse source
This commit is contained in:
MxMarx 2023-10-02 15:36:44 -07:00
parent ed82a5aa19
commit 082a1e5bca
10 changed files with 47 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

2
client/assets/trix.css
View file

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

2
client/components/cards/BookMatchCard.vue
View file

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

6
client/components/modals/item/tabs/Match.vue
View file

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

43
client/components/ui/RichTextEditor.vue
View file

@ -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>
<style scoped>
::v-deep .default-style p {
margin-block-start: 0em;
}
::v-deep trix-editor:not([contenteditable="true"]) {
color: #aaa;
background-color: #444;
}
</style>

7
client/components/ui/VueTrix.vue
View file

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

2
client/components/widgets/BookDetailsEdit.vue
View file

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

2
client/pages/item/_id/index.vue
View file

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

3
server/providers/Audible.js
View file

@ -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,

3
server/providers/iTunes.js
View file

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

2
server/utils/parsers/parseOpfMetadata.js
View file

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