Support rich text book descriptions

client/components/ui/VueTrix.vue

@@ -1,6 +1,37 @@
 <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-toolbar :id="toolbarId">
+      <div v-show="!disabledEditor" 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="$strings.LabelFontBold" tabindex="-1">{{ $strings.LabelFontBold }}</button>
+          <button type="button" class="trix-button trix-button--icon trix-button--icon-italic" data-trix-attribute="italic" data-trix-key="i" :title="$strings.LabelFontItalic" tabindex="-1">{{ $strings.LabelFontItalic }}</button>
+          <button type="button" class="trix-button trix-button--icon trix-button--icon-strike" data-trix-attribute="strike" :title="$strings.LabelFontStrikethrough" tabindex="-1">{{ $strings.LabelFontStrikethrough }}</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="$strings.LabelTextEditorLink" tabindex="-1">{{ $strings.LabelTextEditorLink }}</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="$strings.LabelTextEditorBulletedList" tabindex="-1">{{ $strings.LabelTextEditorBulletedList }}</button>
+          <button type="button" class="trix-button trix-button--icon trix-button--icon-number-list" data-trix-attribute="number" :title="$strings.LabelTextEditorNumberedList" tabindex="-1">{{ $strings.LabelTextEditorNumberedList }}</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="$strings.LabelUndo" tabindex="-1">{{ $strings.LabelUndo }}</button>
+          <button type="button" class="trix-button trix-button--icon trix-button--icon-redo" data-trix-action="redo" data-trix-key="shift+z" :title="$strings.LabelRedo" tabindex="-1">{{ $strings.LabelRedo }}</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="" aria-label="URL" required data-trix-input />
+            <div class="trix-button-group">
+              <input type="button" class="trix-button trix-button--dialog" :value="$strings.LabelTextEditorLink" data-trix-method="setAttribute" />
+              <input type="button" class="trix-button trix-button--dialog" :value="$strings.LabelTextEditorUnlink" data-trix-method="removeAttribute" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </trix-toolbar>
+    <trix-editor :toolbar="toolbarId" :contenteditable="!disabledEditor" :class="['trix-content']" 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>
@@ -14,6 +45,30 @@
 import Trix from 'trix'
 import '@/assets/trix.css'
 
+function enableBreakParagraphOnReturn() {
+  // Trix works with divs by default, we want paragraphs instead
+  Trix.config.blockAttributes.default.tagName = 'p'
+  // Enable break paragraph on Enter (Shift + Enter will still create a line break)
+  Trix.config.blockAttributes.default.breakOnReturn = true
+
+  // Hack to fix buggy paragraph breaks
+  // Copied from https://github.com/basecamp/trix/issues/680#issuecomment-735742942
+  Trix.Block.prototype.breaksOnReturn = function () {
+    const attr = this.getLastAttribute()
+    const config = Trix.getBlockConfig(attr ? attr : 'default')
+    return config ? config.breakOnReturn : false
+  }
+  Trix.LineBreakInsertion.prototype.shouldInsertBlockBreak = function () {
+    if (this.block.hasAttributes() && this.block.isListItem() && !this.block.isEmpty()) {
+      return this.startLocation.offset > 0
+    } else {
+      return !this.shouldBreakFormattedBlock() ? this.breaksOnReturn : false
+    }
+  }
+}
+
+enableBreakParagraphOnReturn()
+
 export default {
   name: 'vue-trix',
   model: {
@@ -134,6 +189,9 @@ export default {
      * Compute a random id of hidden input
      * when it haven't been specified.
      */
+    toolbarId() {
+      return `trix-toolbar-${this.generateId}`
+    },
     generateId() {
       return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
         var r = (Math.random() * 16) | 0
@@ -223,13 +281,17 @@ export default {
     decorateDisabledEditor(editorState) {
       /** Disable toolbar and editor by pointer events styling */
       if (editorState) {
-        this.$refs.trix.toolbarElement.style['pointer-events'] = 'none'
+        this.$refs.trix.disabled = true
         this.$refs.trix.contentEditable = false
-        this.$refs.trix.style['background'] = '#e9ecef'
+        this.$refs.trix.style['pointer-events'] = 'none'
+        this.$refs.trix.style['background-color'] = '#444'
+        this.$refs.trix.style['color'] = '#bbb'
       } else {
-        this.$refs.trix.toolbarElement.style['pointer-events'] = 'unset'
+        this.$refs.trix.disabled = false
+        this.$refs.trix.contentEditable = true
         this.$refs.trix.style['pointer-events'] = 'unset'
-        this.$refs.trix.style['background'] = 'transparent'
+        this.$refs.trix.style['background-color'] = ''
+        this.$refs.trix.style['color'] = ''
       }
     },
     overrideConfig(config) {
@@ -250,32 +312,15 @@ export default {
       }
       return target
     },
-    enableBreakParagraphOnReturn() {
-      // Trix works with divs by default, we want paragraphs instead
-      Trix.config.blockAttributes.default.tagName = 'p'
-      // Enable break paragraph on Enter (Shift + Enter will still create a line break)
-      Trix.config.blockAttributes.default.breakOnReturn = true
-
-      // Hack to fix buggy paragraph breaks
-      // Copied from https://github.com/basecamp/trix/issues/680#issuecomment-735742942
-      Trix.Block.prototype.breaksOnReturn = function () {
-        const attr = this.getLastAttribute()
-        const config = Trix.getBlockConfig(attr ? attr : 'default')
-        return config ? config.breakOnReturn : false
-      }
-      Trix.LineBreakInsertion.prototype.shouldInsertBlockBreak = function () {
-        if (this.block.hasAttributes() && this.block.isListItem() && !this.block.isEmpty()) {
-          return this.startLocation.offset > 0
-        } else {
-          return !this.shouldBreakFormattedBlock() ? this.breaksOnReturn : false
-        }
+    blur() {
+      if (this.$refs.trix && this.$refs.trix.blur) {
+        this.$refs.trix.blur()
       }
     }
   },
   mounted() {
     /** Override editor configuration */
     this.overrideConfig(this.config)
-    this.enableBreakParagraphOnReturn()
     /** Check if editor read-only mode is required */
     this.decorateDisabledEditor(this.disabledEditor)
     this.$nextTick(() => {
@@ -305,4 +350,12 @@ export default {
 .trix_container .trix-content {
   background-color: white;
 }
+trix-editor {
+  max-height: calc(4 * 1lh);
+  overflow-y: auto;
+}
+
+trix-editor * {
+  pointer-events: inherit;
+}
 </style>