CKEditor5: Use npm instead of package

package.json

@@ -79,6 +79,7 @@
     "bootstrap-tagsinput": "^0.7.1",
     "chart.js": "^2.9.4",
     "chartjs-plugin-datalabels": "1.0.0",
+    "ckeditor5": "^43.3.0",
     "codemirror": "^6.0.1",
     "colors.js": "~1.2.4",
     "corejs-typeahead": "^1.3.3",

ui/bundle_wysiwyg_editor.js

@@ -0,0 +1,189 @@
+/*
+ * Copyright (C) 2024 Xibo Signage Ltd
+ *
+ * Xibo - Digital Signage - https://xibosignage.com
+ *
+ * This file is part of Xibo.
+ *
+ * Xibo is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * any later version.
+ *
+ * Xibo is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with Xibo.  If not, see <http://www.gnu.org/licenses/>.
+ */
+import {
+  ClassicEditor,
+  InlineEditor,
+  AccessibilityHelp,
+  Alignment,
+  Autoformat,
+  AutoImage,
+  Autosave,
+  BlockQuote,
+  Bold,
+  CloudServices,
+  Essentials,
+  FontBackgroundColor,
+  FontColor,
+  FontFamily,
+  FontSize,
+  Heading,
+  HorizontalLine,
+  ImageBlock,
+  ImageCaption,
+  ImageInline,
+  ImageInsertViaUrl,
+  ImageResize,
+  ImageStyle,
+  ImageTextAlternative,
+  ImageToolbar,
+  ImageUpload,
+  Indent,
+  IndentBlock,
+  Italic,
+  Link,
+  LinkImage,
+  List,
+  ListProperties,
+  Paragraph,
+  SelectAll,
+  SpecialCharacters,
+  SpecialCharactersArrows,
+  SpecialCharactersCurrency,
+  SpecialCharactersEssentials,
+  SpecialCharactersLatin,
+  SpecialCharactersMathematical,
+  SpecialCharactersText,
+  Table,
+  TableCaption,
+  TableCellProperties,
+  TableColumnResize,
+  TableProperties,
+  TableToolbar,
+  TextTransformation,
+  TodoList,
+  Underline,
+  Undo,
+} from 'ckeditor5';
+
+import 'ckeditor5/ckeditor5.css';
+
+const config = {
+  toolbar: {
+    items: [
+      'undo',
+      'redo',
+      'fontFamily',
+      'fontSize',
+      'fontColor',
+      'fontBackgroundColor',
+      'alignment',
+      'outdent',
+      'indent',
+      '|',
+      'bold',
+      'italic',
+      'underline',
+      'strikethrough',
+      'subscript',
+      'superscript',
+      '|',
+      'bulletedList',
+      'numberedList',
+      'blockQuote',
+      'insertTable',
+      'horizontalLine',
+      'specialCharacters',
+      '|',
+      'heading',
+    ],
+    shouldNotGroupWhenFull: true,
+  },
+  plugins: [
+    AccessibilityHelp,
+    Alignment,
+    Autoformat,
+    AutoImage,
+    Autosave,
+    BlockQuote,
+    Bold,
+    CloudServices,
+    Essentials,
+    FontBackgroundColor,
+    FontColor,
+    FontFamily,
+    FontSize,
+    Heading,
+    HorizontalLine,
+    ImageBlock,
+    ImageCaption,
+    ImageInline,
+    ImageInsertViaUrl,
+    ImageResize,
+    ImageStyle,
+    ImageTextAlternative,
+    ImageToolbar,
+    ImageUpload,
+    Indent,
+    IndentBlock,
+    Italic,
+    Link,
+    LinkImage,
+    List,
+    ListProperties,
+    Paragraph,
+    SelectAll,
+    SpecialCharacters,
+    SpecialCharactersArrows,
+    SpecialCharactersCurrency,
+    SpecialCharactersEssentials,
+    SpecialCharactersLatin,
+    SpecialCharactersMathematical,
+    SpecialCharactersText,
+    Table,
+    TableCaption,
+    TableCellProperties,
+    TableColumnResize,
+    TableCellProperties,
+    TableProperties,
+    TableToolbar,
+    TextTransformation,
+    TodoList,
+    Underline,
+    Undo,
+  ],
+  language: 'en-gb',
+  image: {
+    toolbar: [
+      'imageTextAlternative',
+      'toggleImageCaption',
+      'imageStyle:inline',
+      'imageStyle:block',
+      'imageStyle:side',
+    ],
+  },
+  table: {
+    contentToolbar: [
+      'tableColumn',
+      'tableRow',
+      'mergeTableCells',
+      'tableProperties',
+      'tableCellProperties',
+    ],
+  },
+};
+
+ClassicEditor.defaultConfig = config;
+InlineEditor.defaultConfig = config;
+
+window.CKEDITOR = {
+  ClassicEditor,
+  InlineEditor,
+};

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(
@@ -922,6 +926,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;
         });
       });
@@ -1121,6 +1134,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

@@ -105,11 +105,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 {
@@ -152,6 +173,7 @@
     .ck-editor__editable_inline {
         outline-color: $xibo-color-accent;
         outline-style: solid;
+        border-radius: 0 !important;
     }
 
     &.source {