Add CKEditor toolbar alignment plugin

app/Views/ipd_discharge/discharge_template_edit.php

@@ -126,32 +126,14 @@ $placeholders = [
 
                     <div class="mb-2">
                         <label class="form-label form-label-sm">Header HTML</label>
-                        <div class="btn-group btn-group-sm mb-1 ck-align-tools" data-editor="tpl_header_html" role="group" aria-label="Header alignment">
-                            <button type="button" class="btn btn-outline-secondary" data-align="left">Left</button>
-                            <button type="button" class="btn btn-outline-secondary" data-align="center">Center</button>
-                            <button type="button" class="btn btn-outline-secondary" data-align="right">Right</button>
-                            <button type="button" class="btn btn-outline-secondary" data-align="justify">Justify</button>
-                        </div>
                         <textarea id="tpl_header_html" class="form-control form-control-sm" rows="4"><?= esc($headerHtml) ?></textarea>
                     </div>
                     <div class="mb-2">
                         <label class="form-label form-label-sm">Footer HTML</label>
-                        <div class="btn-group btn-group-sm mb-1 ck-align-tools" data-editor="tpl_footer_html" role="group" aria-label="Footer alignment">
-                            <button type="button" class="btn btn-outline-secondary" data-align="left">Left</button>
-                            <button type="button" class="btn btn-outline-secondary" data-align="center">Center</button>
-                            <button type="button" class="btn btn-outline-secondary" data-align="right">Right</button>
-                            <button type="button" class="btn btn-outline-secondary" data-align="justify">Justify</button>
-                        </div>
                         <textarea id="tpl_footer_html" class="form-control form-control-sm" rows="3"><?= esc($footerHtml) ?></textarea>
                     </div>
                     <div class="mb-2">
                         <label class="form-label form-label-sm">HTML Content <span class="text-muted small">(use <code>{{CONTENT}}</code> or section placeholders)</span></label>
-                        <div class="btn-group btn-group-sm mb-1 ck-align-tools" data-editor="tpl_html" role="group" aria-label="Content alignment">
-                            <button type="button" class="btn btn-outline-secondary" data-align="left">Left</button>
-                            <button type="button" class="btn btn-outline-secondary" data-align="center">Center</button>
-                            <button type="button" class="btn btn-outline-secondary" data-align="right">Right</button>
-                            <button type="button" class="btn btn-outline-secondary" data-align="justify">Justify</button>
-                        </div>
                         <textarea id="tpl_html" class="form-control form-control-sm" rows="10"><?= esc($templateHtml) ?></textarea>
                     </div>
                     <div class="mb-2">
@@ -245,10 +227,11 @@ $placeholders = [
             if (!CKEDITOR.instances[id]) {
                 CKEDITOR.replace(id, {
                     height: id === 'tpl_html' ? 280 : 140,
+                    extraPlugins: 'hmsjustify',
                     toolbar: [
                         {name: 'clipboard', items: ['Cut', 'Copy', 'Paste', 'PasteText', 'Undo', 'Redo']},
                         {name: 'basicstyles', items: ['Bold', 'Italic', 'Underline', 'Strike', 'RemoveFormat']},
-                        {name: 'paragraph', items: ['NumberedList', 'BulletedList', 'Outdent', 'Indent']},
+                        {name: 'paragraph', items: ['NumberedList', 'BulletedList', 'Outdent', 'Indent', 'HmsJustifyLeft', 'HmsJustifyCenter', 'HmsJustifyRight', 'HmsJustifyBlock']},
                         {name: 'links', items: ['Link', 'Unlink']},
                         {name: 'insert', items: ['Image', 'Table']},
                         {name: 'styles', items: ['Styles', 'Format']},
@@ -259,30 +242,6 @@ $placeholders = [
         });
     }
 
-    document.querySelectorAll('.ck-align-tools button').forEach(function (button) {
-        button.addEventListener('click', function () {
-            var editorId = button.closest('.ck-align-tools').getAttribute('data-editor');
-            var alignment = button.getAttribute('data-align');
-            if (typeof CKEDITOR === 'undefined' || !CKEDITOR.instances[editorId]) {
-                return;
-            }
-            var editor = CKEDITOR.instances[editorId];
-            editor.focus();
-            var element = editor.getSelection().getStartElement();
-            var block = null;
-            while (element) {
-                var tag = element.getName ? element.getName() : '';
-                if (['p', 'div', 'td', 'th', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'].indexOf(tag) !== -1) {
-                    block = element;
-                    break;
-                }
-                element = element.getParent ? element.getParent() : null;
-            }
-            if (block) {
-                block.setStyle('text-align', alignment);
-            }
-        });
-    });
 
     function getCsrf() {
         var el = document.querySelector('input[name^="csrf_"]');

public/assets/vendor/ckeditor/plugins/hmsjustify/plugin.js

@@ -0,0 +1,41 @@
+CKEDITOR.plugins.add('hmsjustify', {
+    init: function(editor) {
+        var commands = {
+            HmsJustifyLeft: 'justifyLeft',
+            HmsJustifyCenter: 'justifyCenter',
+            HmsJustifyRight: 'justifyRight',
+            HmsJustifyBlock: 'justifyFull'
+        };
+
+        Object.keys(commands).forEach(function(commandName) {
+            var nativeCommand = commands[commandName];
+            editor.addCommand(commandName, {
+                exec: function(instance) {
+                    instance.focus();
+                    instance.document.$.execCommand(nativeCommand, false, null);
+                }
+            });
+        });
+
+        editor.ui.addButton('HmsJustifyLeft', {
+            label: 'Align Left',
+            command: 'HmsJustifyLeft',
+            toolbar: 'paragraph,40'
+        });
+        editor.ui.addButton('HmsJustifyCenter', {
+            label: 'Center',
+            command: 'HmsJustifyCenter',
+            toolbar: 'paragraph,41'
+        });
+        editor.ui.addButton('HmsJustifyRight', {
+            label: 'Align Right',
+            command: 'HmsJustifyRight',
+            toolbar: 'paragraph,42'
+        });
+        editor.ui.addButton('HmsJustifyBlock', {
+            label: 'Justify',
+            command: 'HmsJustifyBlock',
+            toolbar: 'paragraph,43'
+        });
+    }
+});