Reverted ckeditor5 settings and styles.

hdbt.info.yml

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

src/scss/ckeditor.scss

@@ -1,5 +1,4 @@
 // stylelint-disable at-rule-empty-line-before
-// stylelint-disable no-invalid-position-at-import-rule
 // This file includes styling for WYSIWYG editor.
 
 @import 'hds';
@@ -10,131 +9,11 @@
 @import '01_variables/_index';
 @import '02_mixins/_index';
 
-// 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 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.
-  .table > figcaption {
-    background-color: transparent;
-    padding: 0;
-    text-align: left;
-  }
-
-  // CKEditor sets border styles for the tables. Changing that to the design we have.
-  .table table {
-    border: 2px solid $color-black-50;
-
-    // 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;
-    }
-
-    // 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: $color-black-10;
-      font-size: remify(18px);
-    }
-
-    // CKEditor adds paddings and borders for td- and th-elements so changing them to correct here.
-    td,
-    th {
-      border: 0;
-      padding: $spacing-three-quarters $spacing-and-half;
-    }
-  }
-}
-
-// 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.
+// /* Content is created after this point */
+@import '03_generic/_index';
+@import '04_elements/_index';
+@import '05_objects/_index';
+@import '06_components/paragraphs/text';
 
 [data-selected-icon]::before,
 [data-is-external]::after,
@@ -164,7 +43,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], [data-is-external='true'])::before {
+a.hds-button.hds-button--supplementary:not([data-selected-icon]):not([data-is-external='true']):before {
   content: none;
 }
 
@@ -205,18 +84,3 @@ a.hds-button.hds-button--supplementary:not([data-selected-icon], [data-is-extern
 [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;
-}