6.x to main

composer.json

@@ -9,6 +9,6 @@
     "drupal/twig_tweak": "^2.0 || ^3.0"
   },
   "conflict": {
-    "drupal/helfi_platform_config": "<3.3.8"
+    "drupal/helfi_platform_config": "<4.0"
   }
 }

hdbt.info.yml

@@ -35,7 +35,7 @@ libraries-extend:
   core/drupal.ajax:
     - hdbt/throbber
 
-ckeditor_stylesheets:
+ckeditor5-stylesheets:
   - dist/css/hdbt-icons.css
   - dist/css/ckeditor-icons.css
   - dist/css/ckeditor.min.css

hdbt.libraries.yml

@@ -206,3 +206,11 @@ search-helper:
   version: 1.x
   js:
     dist/js/search-helper.min.js: {}
+
+table-figcaption:
+  version: 1.0.0
+  js:
+    dist/js/handle-figcaption-source-order.min.js: {}
+  dependencies:
+    - core/drupal
+    - core/once

hdbt.theme

@@ -262,6 +262,11 @@ function hdbt_preprocess_page(&$variables): void {
 
   // Set theme path variable.
   $variables['theme_path'] = _hdbt_get_theme_path();
+
+  // Add the figcaption source order handler JS to current page.
+  // CKEditor creates a <table> markup with <figcaption> after the <tbody>.
+  // Fix the source order with JS.
+  $variables['#attached']['library'][] = 'hdbt/table-figcaption';
 }
 
 /**

src/icons/editor-selectable-icons.json

@@ -39,7 +39,6 @@
   "instagram",
   "key",
   "link",
-  "link-external",
   "linkedin",
   "locate",
   "location",

src/js/handle-figcaption-source-order.js

@@ -0,0 +1,17 @@
+// CKEditor creates a <table> markup with <figcaption> after the <tbody>.
+// Fix the source order with JS.
+document.querySelectorAll('.user-edited-content figure').forEach(figure => {
+  // Adding tabindex="0"
+  figure.setAttribute('tabindex', '0');
+
+  // Finding the figcaption element
+  const figcaption = figure.querySelector('figcaption');
+
+  if (figcaption) {
+    // Removing figcaption from its current position
+    figcaption.remove();
+
+    // Inserting figcaption as the first child of the figure element
+    figure.insertBefore(figcaption, figure.firstChild);
+  }
+});

src/scss/05_objects/_button.scss

@@ -554,7 +554,8 @@ p > a.hds-button.hds-button--supplementary:first-child {
 // ---------------------------------------------------------------------------------------------------------------------
 // Button v2
 
-[data-hds-component='button']:not([class*='hds-button']) {
+[data-hds-component='button']:not(a,[class*='hds-button']),
+a[href][data-hds-component='button']:not([class*='hds-button']) {
   @include font('button');
 
   --border-width: 2px;

src/scss/ckeditor.scss

@@ -1,4 +1,5 @@
 // stylelint-disable at-rule-empty-line-before
+// stylelint-disable no-invalid-position-at-import-rule
 // This file includes styling for WYSIWYG editor.
 
 @import 'hds';
@@ -9,11 +10,169 @@
 @import '01_variables/_index';
 @import '02_mixins/_index';
 
-// /* Content is created after this point */
-@import '03_generic/_index';
-@import '04_elements/_index';
-@import '05_objects/_index';
-@import '06_components/paragraphs/text';
+// The hds-button styles depend on hds_base variables.
+// TODO: UHF-8794 We should fix the 05_objects/_button to use our own variables and not hds variables (https://helsinkisolutionoffice.atlassian.net/browse/UHF-8794).
+@import '03_generic/_hds_base';
+
+.ck-content {
+  @import '03_generic/_index';
+
+  // Text paragraph styles as written in 03_generic/_base.scss and '06_components/paragraphs/text'.
+  @include font('body');
+  color: $color-black-90;
+  font-family: $base-font-family;
+
+  // Giving the max-width value here makes sure all the content inside is limited to this max-width.
+  > * {
+    max-width: $content-width-max;
+  }
+
+  @import '04_elements/_index';
+
+  // Import only the styles that are needed for the ckeditor content creation and not the whole __index.scss
+  @import '05_objects/_quote';
+  @import '05_objects/_button';
+  @include hds-button-colors-on-light-bg;
+}
+
+// Additional styling for links.
+// The CKEditor link element dom doesn't have all the elements that the rendered version has so we are adding the
+// icons here for the links so that the links look similar as in the end result.
+.ck-content a {
+  text-decoration: underline;
+
+  // E-mail link styles
+  &[href^='mailto:']::after {
+    @include pseudo-icon('mailto', calc(var(--line-height) * 1em), currentColor, inline-block);
+    overflow: hidden;
+  }
+
+  // Tel link styles. For some reason tel-links have only # in their href on the editor so I added both here in case
+  // this changes at some point.
+  &[href^='tel:']::after,
+  &[href='#']::after {
+    @include pseudo-icon('tel', calc(var(--line-height) * 1em), currentColor, inline-block);
+    overflow: hidden;
+  }
+
+  // Button styles rely on data-attributes which are not available in CKE5.
+  // TODO: UHF-8794 We should fix the 05_objects/_button to drop the support for data-attributes like data-selected-icon (https://helsinkisolutionoffice.atlassian.net/browse/UHF-8794).
+  &.hds-button:not([data-selected-icon], [data-is-external='true'])::before {
+    content: none !important;
+  }
+
+  // Switch HDS button label cursor to default to indicate user for an editable element.
+  &[data-variant] {
+    cursor: text;
+  }
+
+  // Fix the cursor bug when clicking outside of button link.
+  &.ck-editor__editable ~ a:not(.ck-editor__editable) {
+    margin-inline-end: 3px;
+    margin-inline-start: 3px;
+  }
+}
+
+// CKEditor5 overrides for lists.
+.ck-editor .ck-content ul {
+  list-style-type: disc;
+
+  ul {
+    list-style-type: circle;
+  }
+
+  ul ul {
+    list-style-type: square;
+  }
+}
+
+.ck-editor .ck-content ol {
+  list-style-type: decimal;
+}
+
+// 04_elements/_table.scss
+.ck-editor .ck-content {
+  @import '04_elements/_table';
+
+  // CKEditor and Gin styling overrides. These are quite nasty but so are the styles automatically set by
+  // the Gin-theme and CKEditor-module.
+
+  // CKEditor sets the table to aligned middle, which does not reflect to our theme.
+  figure.table {
+    margin: 0;
+  }
+
+  // CKEditor sets a background color and padding for the figcaption and aligns the text to center.
+  // These lines change the layout similar to what we have on the layout.
+  figure > figcaption {
+    @include font('h4');
+    background-color: transparent;
+    margin-top: $spacing-triple;
+    padding: 0;
+    text-align: left;
+  }
+
+  // CKEditor sets border styles for the tables. Changing that to the design we have.
+  figure > table {
+    @include font('body');
+    background: $color-white;
+    border: 2px solid $color-black-50;
+    border-collapse: collapse;
+    border-spacing: 0;
+    margin: $spacing 0 0 0;
+    padding: 0;
+    width: auto;
+
+    // Gin sets this after element for .field-multiple-table thead element but because of the selectors
+    // inaccuracy it also is visible on the editor. Hiding it with this.
+    thead::after {
+      display: none;
+    }
+
+    tr:not(tbody:last-child *:last-child) {
+      border-bottom: 1px solid $color-black-50;
+    }
+
+    // Gin sets all th-elements to small font size for some reason with very inaccurate selector so we need
+    // to change the font-size here. Also CKEditor sets background color for the th-element which is not the
+    // right for our design so changing it here.
+    th {
+      background: $color-black-10;
+      font-size: remify(18px);
+      font-weight: $font-weight-bold;
+
+      strong {
+        font-weight: $font-weight-bold;
+      }
+    }
+
+    // CKEditor adds paddings and borders for td- and th-elements so changing them to correct here.
+    // The padding is set to important because of paragraphs (.paragraphs-tabs-wrapper .field-multiple-table .draggable td)
+    td,
+    th {
+      border: 0;
+      color: $color-black;
+      min-width: 0;
+      padding: $spacing-three-quarters $spacing-and-half !important;
+      text-align: left;
+    }
+
+    // Add dashed borders to td elements to visualize the table.
+    // Otherwise it would be hard to understand that the box an editor is dealing with is actually a table.
+    .ck-editor__editable {
+      border: 1px dashed #e6e6e6;
+    }
+
+    // Zebra stripes for every other row.
+    &:has(tr:nth-child(n+5)) tr:nth-child(even) td {
+      background: $color-black-5;
+    }
+  }
+}
+
+// hds-button styles for CKEditor. These are copied from the old CKEditor stylesheet so not sure if they are still
+// usable/needed when the new version is created.
+// TODO: UHF-8489 Check that if these styles are still valid/needed and adjust accordingly.
 
 [data-selected-icon]::before,
 [data-is-external]::after,
@@ -31,6 +190,12 @@
   width: $size;
 }
 
+// CKEditor5 duplicates current anchor link when navigating with arrow keys.
+// This hides those anchor links, as they do not have href attribute set.
+a:not([href]) {
+  display: none;
+}
+
 a.hds-button.hds-button--supplementary::before {
   order: unset;
 }
@@ -43,7 +208,7 @@ p > a.hds-button.hds-button--supplementary[data-selected-icon]:first-child {
   margin-left: 0;
 }
 
-a.hds-button.hds-button--supplementary:not([data-selected-icon]):not([data-is-external='true']):before {
+a.hds-button.hds-button--supplementary:not([data-selected-icon], [data-is-external='true'])::before {
   content: none;
 }
 
@@ -84,3 +249,18 @@ a.hds-button.hds-button--supplementary:not([data-selected-icon]):not([data-is-ex
 [data-is-external].hds-button--secondary .hds-button__label:only-child {
   margin-right: 0;
 }
+
+
+// CKEditor5 overrides.
+.ck-editor .ck.ck-toolbar.ck-toolbar_grouping>.ck-toolbar__items {
+  flex-wrap: wrap;
+}
+
+.ck-editor .ck.ck-toolbar>.ck-toolbar__items>:not(.ck-toolbar__line-break) {
+  margin-right: var(--ck-spacing-tiny);
+}
+
+// Gin overrides.
+.quote::before {
+  border-radius: 0;
+}

templates/block/block--eucookiecomplianceblock.html.twig

@@ -21,7 +21,7 @@
         'component--cookie-compliance',
         'component--simulated',
       ],
-      component_content_class: 'cookie-compliance-block',
+      component_content_class: 'cookie-compliance-block user-edited-content',
     }
   %}
     {% block component_content %}
@@ -32,4 +32,3 @@
   {% endembed %}
   </div>
 {% endif %}
-