Add alignment buttons to TipTap editor (#2305)

* Add alignment buttons to TipTap editor * Add WYSIWYG alignment icons * Tiptap toolbar improvements: - Hide disabled unlink icon when not on a link - Improve icon labels - Improve opacity and cursor of disabled button --------- Co-authored-by: Quentin Renard <[email protected]>
area17 · Jan 24, 2024 · 1c8b40e · 1c8b40e
1 parent a0955a1
commit 1c8b40e
Show file tree

Hide file tree

Showing 20 changed files with 293 additions and 114 deletions.
diff --git a/docs/content/1_docs/4_form-fields/02_wysiwyg.md b/docs/content/1_docs/4_form-fields/02_wysiwyg.md
@@ -78,14 +78,15 @@ $wysiwygOptions = [
     'underline',
     'strike',
     'blockquote',
-    "code-block",
+    'code-block',
     'ordered',
     'bullet',
     'hr',
     'code',
     'link',
     'clean',
     'table',
+    'align',
 ];
 @endphp
 

diff --git a/frontend/icons-wysiwyg/wysiwyg_align_center.svg b/frontend/icons-wysiwyg/wysiwyg_align_center.svg
diff --git a/frontend/icons-wysiwyg/wysiwyg_align_justify.svg b/frontend/icons-wysiwyg/wysiwyg_align_justify.svg
diff --git a/frontend/icons-wysiwyg/wysiwyg_align_left.svg b/frontend/icons-wysiwyg/wysiwyg_align_left.svg
diff --git a/frontend/icons-wysiwyg/wysiwyg_align_right.svg b/frontend/icons-wysiwyg/wysiwyg_align_right.svg
diff --git a/frontend/js/components/WysiwygMenuBarButton.vue b/frontend/js/components/WysiwygMenuBarButton.vue
@@ -12,7 +12,7 @@
           :class="`icon--wysiwyg_${icon}`"
           aria-hidden="true">
     <svg>
-      <title>{{ icon }}</title>
+      <title>{{ label ?? icon }}</title>
       <use :xlink:href="`#icon--wysiwyg_${icon}`"></use>
     </svg>
     </span>
@@ -58,7 +58,8 @@
 
 <style lang="scss">
   .wysiwyg__menubar-button:disabled {
-    opacity: 10%;
+    opacity: 50%;
+    cursor: unset !important;
   }
 
   .icon--custom {

diff --git a/frontend/js/components/WysiwygTiptap.vue b/frontend/js/components/WysiwygTiptap.vue
@@ -60,7 +60,7 @@
             />
 
             <wysiwyg-menu-bar-btn icon="unlink"
-                                  v-if="toolbar.link"
+                                  v-if="toolbar.link && editor.isActive('link')"
                                   :disabled="!editor.isActive('link')"
                                   :isActive="editor.isActive('link')"
                                   @btn:click="removeLink()"/>
@@ -90,6 +90,27 @@
                                   :isActive="editor.isActive('code')"
                                   @btn:click="editor.chain().focus().setCode().run()"/>
 
+            <wysiwyg-menu-bar-btn icon="align_left"
+                                  label="align left"
+                                  v-if="toolbar.align || toolbar['align-left']"
+                                  :isActive="editor.isActive({ textAlign: 'left' })"
+                                  @btn:click="setTextAlign('left')"/>
+            <wysiwyg-menu-bar-btn icon="align_center"
+                                  label="align center"
+                                  v-if="toolbar.align || toolbar['align-center']"
+                                  :isActive="editor.isActive({ textAlign: 'center' })"
+                                  @btn:click="setTextAlign('center')"/>
+            <wysiwyg-menu-bar-btn icon="align_right"
+                                  label="align right"
+                                  v-if="toolbar.align || toolbar['align-right']"
+                                  :isActive="editor.isActive({ textAlign: 'right' })"
+                                  @btn:click="setTextAlign('right')"/>
+            <wysiwyg-menu-bar-btn icon="align_justify"
+                                  label="justify"
+                                  v-if="toolbar.align || toolbar['align-justify']"
+                                  :isActive="editor.isActive({ textAlign: 'justify' })"
+                                  @btn:click="setTextAlign('justify')"/>
+
             <wysiwyg-menu-bar-btn icon="table"
                                   v-if="toolbar.table"
                                   @btn:click="editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()"/>
@@ -244,6 +265,7 @@
   import {Placeholder} from "@tiptap/extension-placeholder";
   import {HardBreak} from "@tiptap/extension-hard-break";
   import {HorizontalRule} from "@tiptap/extension-horizontal-rule";
+  import {TextAlign} from '@tiptap/extension-text-align';
 
   export default {
     name: 'A17Wysiwyg',
@@ -498,7 +520,14 @@
 
         this.$refs['link-modal'].close()
         this.linkWindow = null
-      }
+      },
+      setTextAlign(align) {
+        this.editor
+          .chain()
+          .focus()
+          .setTextAlign(align)
+          .run();
+      },
     },
     beforeMount () {
       if (this.toolbar.header) {
@@ -509,7 +538,10 @@
 
       const content = this.value || ''
       const extensions = [
-        HardBreak
+        HardBreak,
+        TextAlign.configure({
+          types: ['heading','paragraph'],
+        }),
       ]
 
       if (this.placeholder && this.placeholder.length > 0) {
@@ -633,7 +665,7 @@
     &--link {
       z-index: $zindex__modal__lower;
     }
-    
+
     .input {
       margin-top: 35px !important;
     }