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]>

Author: florrie-90

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
 

frontend/icons-wysiwyg/wysiwyg_align_center.svg

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

frontend/icons-wysiwyg/wysiwyg_align_justify.svg

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