Merge pull request #1604 from USEPA/hotfix-1-22-25

[HOTFIX] Cherry-picking EPAD8-2674 & EPAD8-2676

services/drupal/config/sync/editor.editor.filtered_html.yml

@@ -172,6 +172,27 @@ settings:
         -
           label: Warning
           element: '<span class="warning">'
+        -
+          label: Mark
+          element: '<mark class="mark">'
+        -
+          label: Small
+          element: '<small class="small">'
+        -
+          label: 'Striped Table'
+          element: '<table class="usa-table usa-table--striped">'
+        -
+          label: 'Unstyled Table'
+          element: '<table class="usa-table usa-table--unstyled">'
+        -
+          label: 'Borderless Table'
+          element: '<table class="usa-table usa-table--borderless">'
+        -
+          label: 'Stacked Table'
+          element: '<table class="usa-table usa-table--stacked">'
+        -
+          label: 'Stacked Header Table'
+          element: '<table class="usa-table usa-table--stacked-header">'
     ckeditor_iframe_embed_iframeembed:
       enabled_optional_attributes:
         - height

services/drupal/config/sync/filter.format.filtered_html.yml

@@ -72,7 +72,7 @@ filters:
     status: true
     weight: -49
     settings:
-      allowed_html: '<a id target rel class="ck-anchor" hreflang occurrence href aria-label data-entity-type data-entity-uuid data-entity-substitution> <br> <p> <h2 class="highlight"> <h3 class="highlight"> <h4 class="highlight"> <h5 class="highlight"> <h6 class="highlight"> <blockquote class="pull-quote u-align-left u-align-right" cite> <ul class="list list--clean list--pipeline list--roomy" type> <ol class="list list--roomy" type reversed start> <span class="warning"> <article> <div> <figure> <figcaption> <dl> <dt> <dd> <address> <hgroup> <i> <b> <small> <section> <mark> <cite> <dfn> <var> <samp> <kbd> <wbr> <bdi> <ruby> <rt> <rp> <summary> <legend> <datalist> <map> <svg> <title> <q cite> <del cite datetime> <time datetime pubdate> <bdo dir> <colgroup span> <col span> <details open> <form action method> <fieldset disabled form> <label for form> <input checked size type value disabled placeholder required readonly autocomplete autofocus> <textarea rows cols disabled placeholder required readonly autocomplete autofocus> <meter min max low high optimum form value> <select multiple size> <optgroup disabled label> <option value> <output for form> <button value> <keygen autofocus challenge disabled form keytype> <progress max value> <img alt crossorigin height longdesc src width usemap> <embed height src type width> <object form height type usemap width> <param value> <iframe allowfullscreen sandbox seamless srcdoc src height width name tabindex title> <video autoplay buffered controls crossorigin height loop muted played preload poster src width> <audio autoplay buffered controls loop muted played preloadsrc> <source media src type> <track default kind label src srclang> <canvas height width> <area alt coords href hreflang media rel shape target type> <use href> <table summary width height> <th headers height width rowspan colspan> <td headers scope width height rowspan colspan> <drupal-paragraph drupal-paragraph data-embed-button data-entity-label data-paragraph-id data-paragraph-revision-id> <strong> <em> <sub> <sup> <li> <hr> <tr> <thead> <tbody> <tfoot> <caption> <drupal-media data-entity-type data-entity-uuid alt data-view-mode data-caption data-align> <abbr title> <ins class="new" data-date> <drupal-inline-media data-entity-type data-entity-uuid alt data-view-mode><* accesskey aria-* class id role tabindex title data data-* name hidden>'
+      allowed_html: '<a id target rel class="ck-anchor" hreflang occurrence href aria-label data-entity-type data-entity-uuid data-entity-substitution> <br> <p> <h2 class="highlight"> <h3 class="highlight"> <h4 class="highlight"> <h5 class="highlight"> <h6 class="highlight"> <blockquote class="pull-quote u-align-left u-align-right" cite> <ul class="list list--clean list--pipeline list--roomy" type> <ol class="list list--roomy" type reversed start> <span class="warning"> <mark class="mark"> <small class="small"> <table class="usa-table usa-table--striped usa-table--unstyled usa-table--borderless usa-table--stacked usa-table--stacked-header" summary width height> <article> <div> <figure> <figcaption> <dl> <dt> <dd> <address> <hgroup> <i> <b> <section> <cite> <dfn> <var> <samp> <kbd> <wbr> <bdi> <ruby> <rt> <rp> <summary> <legend> <datalist> <map> <svg> <title> <q cite> <del cite datetime> <time datetime pubdate> <bdo dir> <colgroup span> <col span> <details open> <form action method> <fieldset disabled form> <label for form> <input checked size type value disabled placeholder required readonly autocomplete autofocus> <textarea rows cols disabled placeholder required readonly autocomplete autofocus> <meter min max low high optimum form value> <select multiple size> <optgroup disabled label> <option value> <output for form> <button value> <keygen autofocus challenge disabled form keytype> <progress max value> <img alt crossorigin height longdesc src width usemap> <embed height src type width> <object form height type usemap width> <param value> <iframe allowfullscreen sandbox seamless srcdoc src height width name tabindex title> <video autoplay buffered controls crossorigin height loop muted played preload poster src width> <audio autoplay buffered controls loop muted played preloadsrc> <source media src type> <track default kind label src srclang> <canvas height width> <area alt coords href hreflang media rel shape target type> <use href> <th headers height width rowspan colspan> <td headers scope width height rowspan colspan> <drupal-paragraph drupal-paragraph data-embed-button data-entity-label data-paragraph-id data-paragraph-revision-id> <strong> <em> <sub> <sup> <li> <hr> <tr> <thead> <tbody> <tfoot> <caption> <drupal-media data-entity-type data-entity-uuid alt data-view-mode data-caption data-align> <abbr title> <ins class="new" data-date> <drupal-inline-media data-entity-type data-entity-uuid alt data-view-mode><* accesskey aria-* class id role tabindex title data data-* name hidden>'
       filter_html_help: true
       filter_html_nofollow: false
   filter_html_escape:

services/drupal/web/themes/epa_theme/source/_patterns/02-base/02-html-elements/15-inline-elements/_inline-elements.scss

@@ -84,7 +84,12 @@ cite {
   @include display-text-style(cite);
 }
 
-// code {}
+code {
+  @if $wysiwyg {
+    background: transparent !important;
+    padding: 0 !important;
+  }
+}
 
 // del {}
 

services/drupal/web/themes/epa_theme/source/_patterns/02-base/02-html-elements/24-table/_table.scss

@@ -7,6 +7,20 @@ table {
   @include usa-table();
 }
 
+@if $wysiwyg {
+  // To override CKEditor table styles.
+  .table {
+    table {
+      @include usa-table();
+
+      td,
+      th {
+        height: auto;
+      }
+    }
+  }
+}
+
 thead {
   @media print {
     display: table-header-group;

services/drupal/web/themes/epa_theme/source/_patterns/03-uswds/table/_table.scss

@@ -1,7 +1,25 @@
+@use '../../00-config' as *;
+
 .usa-table--borderless {
   tbody {
     th {
       background-color: transparent;
     }
   }
+
+  @if $wysiwyg {
+    border: 0 !important;
+
+    thead {
+      th {
+        background-color: #0000 !important;
+        border-block-start: 0 !important;
+      }
+    }
+
+    td,
+    th {
+      border-inline: 0 !important;
+    }
+  }
 }

services/drupal/web/themes/epa_theme/source/_patterns/05-components/file/_file.scss

@@ -8,6 +8,10 @@
     background-color: rgba(color($theme-color-warning), 0.5);
     padding-left: 0.125em;
   }
+
+  @if $wysiwyg {
+    font-size: 1em !important;
+  }
 }
 
 .file__private-icon {

services/drupal/web/themes/epa_theme/source/_patterns/05-components/table/table--unstyled/_table--unstyled.scss

@@ -25,4 +25,25 @@
       color: gesso-grayscale(white);
     }
   }
+
+  @if $wysiwyg {
+    border: 0 !important;
+
+    tbody,
+    thead {
+      th {
+        background-color: transparent !important;
+      }
+    }
+
+    td,
+    th {
+      background-color: transparent !important;
+      border: 0 !important;
+    }
+
+    tr {
+      border: 0 !important;
+    }
+  }
 }

services/drupal/web/themes/epa_theme/source/editor-styles.scss

@@ -62,3 +62,9 @@ div.ck-content {
 .ck.ck-balloon-panel {
   max-width: 1000px;
 }
+
+// Prevent anchor tags from being clicked when in the editor, see @link https://forumone.atlassian.net/browse/EPAD8-2676
+.ck .drupal-paragraph a,
+.ck .drupal-inline-media a {
+  pointer-events: none;
+}