CKEditor: Fix for tables and default styles (#2815)

relates to xibosignage/xibo#3546

ui/src/helpers/form-helpers.js

@@ -741,6 +741,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));
 
@@ -751,7 +752,9 @@ 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(
@@ -924,6 +927,15 @@ const formHelpers = function() {
               });
           }
 
+          // If we have a detached editor, we need to add a property
+          // to the main bar to help with CSS styling
+          $(
+            '.ck-editor-body-detached .ck-body-wrapper ' +
+            '.ck-balloon-panel > .ck-toolbar',
+          ).each((_idx, el) => {
+            $(el).parent().attr('data-main-toolbar', 1);
+          });
+
           return false;
         });
       });
@@ -1123,6 +1135,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

ui/src/style/forms.scss

@@ -106,11 +106,32 @@
     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[data-main-toolbar] {
+    z-index: calc($properties-panel-rich-text-container-z-index + 2) !important;
     right: 150px !important;
     left: auto !important;
-    top: 66px ! important;
+    top: auto !important;
+    bottom: calc(100vh - 100px) !important;
     width: calc(100vw - 300px) !important;
+    display: block;
+
+    &::before, &:after {
+        display: none;
+    }
+}
+
+.ck-editor-body-detached .ck-body-wrapper .ck-balloon-panel:not(.ck-powered-by-balloon):not([data-main-toolbar]) {
+    top: 148px !important;
+    left: 160px !important;
+    opacity: 0.95;
+}
+
+.ck-editor-body-detached .ck-body-wrapper .ck-balloon-panel.ck-powered-by-balloon {
+    top: auto !important;
+    left: auto !important;
+    bottom: 16px !important;
+    right: 16px !important;
+    display: block;
 }
 
 .rich-text-main-container {

ui/src/vendor/ckeditor/CHANGELOG.md

@@ -0,0 +1,4 @@
+Changelog
+=========
+
+All changes in the package are documented in https://github.com/ckeditor/ckeditor5/blob/master/CHANGELOG.md.

ui/src/vendor/ckeditor/CONTRIBUTING.md

@@ -0,0 +1,4 @@
+Contributing
+========================================
+
+See the [official contributors' guide to CKEditor 5](https://ckeditor.com/docs/ckeditor5/latest/framework/contributing/contributing.html) to learn more.