CKEditor: Fix for tables and default styles

relates to xibosignage/xibo#3546
xibosignage · Nov 25, 2024 · 8d70014 · 8d70014
1 parent 2da73f2
commit 8d70014
Show file tree

Hide file tree

Showing 4 changed files with 93 additions and 2 deletions.
diff --git a/ui/bundle_wysiwyg_editor.js b/ui/bundle_wysiwyg_editor.js
@@ -151,6 +151,7 @@ const config = {
     TableCaption,
     TableCellProperties,
     TableColumnResize,
+    TableCellProperties,
     TableProperties,
     TableToolbar,
     TextTransformation,
@@ -174,6 +175,7 @@ const config = {
       'tableRow',
       'mergeTableCells',
       'tableProperties',
+      'tableCellProperties',
     ],
   },
 };

diff --git a/ui/src/helpers/form-helpers.js b/ui/src/helpers/form-helpers.js
@@ -739,6 +739,7 @@ const formHelpers = function() {
           $container.css('transform-origin', '0 0');
           $container.css('word-wrap', 'inherit');
           $container.css('line-height', 'normal');
+          $container.css('padding', '0');
           $container
             .css('outline-width', (CKEDITOR_OVERLAY_WIDTH / scale));
 
@@ -749,7 +750,10 @@ const formHelpers = function() {
             scale: scale,
           });
 
-          $container.find('p').css('margin', '0 0 16px');
+          $container.find('p')
+            .css('margin', '0 0 16px')
+            .css('margin-top', 0);
+
           $container.show();
         } else {
           $('#cke_' + field + ' iframe').contents().find('head').append(
@@ -1121,6 +1125,82 @@ const formHelpers = function() {
       $sourceElement = $sourceElement.siblings('textarea');
     }
 
+    // Add CKEditor default CSS to the content to match the editor
+    // Convert into temporary DOM element
+    const $tempObj = $('<div>' + data + '</div>');
+
+    // Inject necessary CSS
+    const setCSSDefaultRules = function(els, rules) {
+      $(els).each(function(_idx, el) {
+        const $el = $(el);
+
+        for (const rule in rules) {
+          if (Object.hasOwn(rules, rule)) {
+            const value = rules[rule];
+            const oldStyle = $el.attr('style');
+
+            $el.attr('style', `${rule}: ${value}; ${oldStyle}`);
+          }
+        }
+      });
+    };
+
+    // Tables
+    $tempObj.find('.table').each((_idx, table) => {
+      const $table = $(table);
+
+      setCSSDefaultRules(
+        $table,
+        {
+          margin: '0.9em auto',
+          display: 'table',
+        },
+      );
+
+      setCSSDefaultRules(
+        $table.find('.ck-table-resized'),
+        {
+          'table-layout': 'fixed',
+        },
+      );
+
+      setCSSDefaultRules(
+        $table.find('table'),
+        {
+          overflow: 'hidden',
+          'border-collapse': 'collapse',
+          'border-spacing': '0',
+          width: '100%',
+          height: '100%',
+          border: '1px double hsl(0, 0%, 70%)',
+        },
+      );
+
+      setCSSDefaultRules(
+        $table.find('td, th'),
+        {
+          'text-align': 'left',
+          'overflow-wrap': 'break-word',
+          position: 'relative',
+          'min-width': '2em',
+          padding: '.4em',
+          border: '1px solid hsl(0, 0%, 75%)',
+        },
+      );
+
+      setCSSDefaultRules(
+        $table.find('th'),
+        {
+          'font-weight': 'bold',
+          'background-color': 'hsla(0, 0%, 0%, 5%)',
+        },
+      );
+    });
+
+    // Save object back to data string
+    // and inhect necessary CSS
+    data = $tempObj.html();
+
     $sourceElement.val(data);
 
     // If we're not saving, trigger change for saving

diff --git a/ui/src/style/forms.scss b/ui/src/style/forms.scss
@@ -105,7 +105,7 @@
     z-index: calc($properties-panel-rich-text-container-z-index + 1) !important;
 }
 
-.ck-editor-body-detached .ck-body-wrapper .ck-balloon-panel.ck-toolbar-container {
+.ck-editor-body-detached .ck-body-wrapper .ck-balloon-panel.ck-toolbar-container.ck-balloon-panel_toolbar_east {
     right: 150px !important;
     left: auto !important;
     top: 66px ! important;

diff --git a/web/theme/default/css/xibo.css b/web/theme/default/css/xibo.css
@@ -1569,6 +1569,15 @@ div.dataTables_wrapper div.dataTables_info {
 /* CKEditor */
 .ck-editor__editable_inline {
     min-height: 100px;
+
+    p {
+        margin: 0 0 16px !important;
+    }
+
+    figure {
+        margin-top: 0.9em !important;
+        width: auto;
+    }
 }
 
 .ck-fontsize-option span {