CKEditor: Fix for tables and default styles

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(
@@ -1123,6 +1126,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,7 +106,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;

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.