feat(block-editor: Add justify button for text (#26601)

Co-authored-by: Freddy Montes <[email protected]>
dotCMS · Nov 7, 2023 · 56d7271 · 56d7271
1 parent 0005129
commit 56d7271
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 2 deletions.
diff --git a/core-web/libs/block-editor/src/lib/extensions/bubble-menu/plugins/dot-bubble-menu.plugin.ts b/core-web/libs/block-editor/src/lib/extensions/bubble-menu/plugins/dot-bubble-menu.plugin.ts
@@ -216,7 +216,7 @@ export class DotBubbleMenuPluginView extends BubbleMenuView {
     updateComponent() {
         const { items } = this.component.instance;
         const { activeItem } = this.getActiveNode();
-        const activeMarks = this.getActiveMarks(['left', 'center', 'right']);
+        const activeMarks = this.getActiveMarks(['justify', 'left', 'center', 'right']);
 
         // Update
         this.component.instance.selected = activeItem?.label;
@@ -340,6 +340,10 @@ export class DotBubbleMenuPluginView extends BubbleMenuView {
                 this.editor.commands.toggleUnderline();
                 break;
 
+            case 'justify':
+                this.toggleTextAlign(action, active);
+                break;
+
             case 'left':
                 this.toggleTextAlign(action, active);
                 break;

diff --git a/core-web/libs/block-editor/src/lib/extensions/bubble-menu/utils/index.ts b/core-web/libs/block-editor/src/lib/extensions/bubble-menu/utils/index.ts
@@ -150,6 +150,11 @@ const textMarks: Array<BubbleMenuItem> = [
 ];
 
 const alignmentMarks: Array<BubbleMenuItem> = [
+    {
+        icon: 'format_align_justify',
+        markAction: 'justify',
+        active: false
+    },
     {
         icon: 'format_align_left',
         markAction: 'left',

diff --git a/dotCMS/src/main/webapp/html/dotcms-block-editor.js b/dotCMS/src/main/webapp/html/dotcms-block-editor.js