From 70b98c1bb28526d8f30ac9b6ee57aad97a60011b Mon Sep 17 00:00:00 2001
From: James O'Toole <james.otoole@ubc.ca>
Date: Wed, 2 Aug 2023 12:31:17 -0700
Subject: [PATCH] Update styles menu for CKEditor 5

---
 .../ubc_science_shared_config.install         | 196 ++++++++++++++----
 1 file changed, 154 insertions(+), 42 deletions(-)

diff --git a/ubc_science_shared_config/ubc_science_shared_config.install b/ubc_science_shared_config/ubc_science_shared_config.install
index 15a3476..d71b736 100755
--- a/ubc_science_shared_config/ubc_science_shared_config.install
+++ b/ubc_science_shared_config/ubc_science_shared_config.install
@@ -8,49 +8,161 @@
 function ubc_science_shared_config_install() {
   $config = \Drupal::service('config.factory');
 
-  $config->getEditable('filter.format.filtered_text')
-    ->set('filters.filter_html.settings.allowed_html', '<a name href id hreflang data-* target aria-* class> <blockquote cite class="blockquote-* p-* px-* py-*"> <br> <caption> <cite> <code> <dd> <dl> <drupal-entity data-entity-type data-entity-uuid data-entity-embed-display data-entity-embed-display-settings data-align data-caption data-embed-button alt title class=""> <drupal-media data-entity-type data-entity-uuid alt data-align data-caption data-view-mode title class=""> <dt> <em> <h2 id> <h3 id class=""> <h4 id class=""> <h5 id class=""> <h6 id class=""> <hr> <iframe longdesc name scrolling src title align height frameborder width> <img src srcset alt title data-*> <kbd> <li> <p class="text-* mt-* uppercase text-hug text-lead text-ubc-blue-sea text-sm font-serif text-grey-700 text-uppercase"> <samp> <strike> <strong> <sub> <sup> <svg viewBox aria-* class=""> <tbody> <td colspan class="w-* w-half w-one-third w-one-quarter w-one-fifth w-one-sixth"> <tfoot> <th> <thead> <tr> <u> <use xlink:href> <span class="text-* font-* text-uppercase text-lowercase font-semibold text-grey-700 text-white"> <table class="table-* table--plain table--condensed table--striped table--hover "> <s> <div aria-* hidden class="accordion accordion--* accordion__* align-* bg-* card card--* card__* clearfix col-md-* columns--* fa fa-* first-* flex flex-* md--flex-* group hover--* js-* min-* my-* object-* p-* row second-* text-* third-* ubc-card ubc-card__* ubc-card--* unit-* widget-* widget-column-options widget-columns-2 widget--md--grid widget-region-one widget-region-two widget-columns-3 widget-region-three widget-region-four widget-color-box widget-content first-child--mt-0 widget-accordion js-reveal__parent js-reveal__trigger accordion__trigger js-reveal__target accordion__content widget-card--horizontal widget-card first-image ubc-card__media ubc-card__content_wrapper first-content ubc-card__content first-footer ubc-card__actions card--one widget-card! card--three md--flex-1 second-image second-content second-footer third-image third-content third-footer widget-card!card--two!md--flex-grid"> <button data-* data-state class="widget-* unit-* text-* widget-expandcollapse"> <ul type class="list-* list-inline list-bordered list-checked list-inline list-bordered list-checked button-list button-list list-grid--two button-list list-grid--three button-list list-grid--four"> <ol start type class="list-* list-inline list-bordered list-checked list-inline list-bordered list-checked button-list button-list list-grid--two button-list list-grid--three button-list list-grid--four">')
-    ->save();
   $config->getEditable('editor.editor.filtered_text')
-    ->set('settings.plugins.stylescombo.styles', 'p.text-hug|Text Hug (remove top spacing)
-p.text-lead.text-ubc-blue-sea|Lead Text
-p.text-sm|Text: small
-p.font-serif|Serif font
-span.text-uppercase|Uppercase Text
-span.text-lowercase|Lowercase Text
-span.font-semibold|Semibold Text
-span.text-grey-700|Grey Text
-span.text-white|White Text
-p.text-grey-700.text-uppercase.text-sm|Attribution, Footnote Text
-ul.list-inline|List: inline
-ul.list-bordered|List: bordered
-ul.list-checked|List: checked
-ul.button-list|List: buttons
-ul.button-list.list-grid--two|List: 2 across
-ul.button-list.list-grid--three|List: 3 across
-ul.button-list.list-grid--four|List: 4 across
-ol.list-inline|Ordered List: inline
-ol.list-bordered|Ordered List: bordered
-ol.list-checked|Ordered List: checked
-ol.button-list|Ordered List: buttons
-ol.button-list.list-grid--two|Ordered List: 2 across
-ol.button-list.list-grid--three|Ordered List: 3 across
-ol.button-list.list-grid--four|Ordered List: 4 across
-a.unit-button|Unit Button
-a.unit-button.unit-button--light|Light Button
-a.unit-button.unit-button--dark|Dark Button
-a.unit-button.unit-button--simple|Simple Button
-a.unit-button.unit-button--bordered|Bordered Button
-a.unit-button.unit-button--subunit|Subunit Button
-a.unit-button.unit-button--transparent|Transparent Button
-a.unit-button.unit-button--capped|List Button
-a.unit-button.unit-button--block|Full-width Button
-a.unit-button.text-xs.unit-button--text-xs|Extra Small Button
-a.unit-button.text-sm.unit-button--text-sm|Small Button
-a.unit-button.text-lg.unit-button--text-lg|Large Button
-a.unit-button.text-xl.unit-button--text-xl|XLarge Button
-a.unit-button.text-2xl.unit-button--text-2xl|XXLarge Button
-')
+    ->set('settings.plugins.ckeditor5_style.styles', [
+      [
+        'label' =>  'Text Hug (remove top spacing)',
+        'element' =>  '<p class="text-hug">',
+      ],
+      [
+        'label' =>  'Lead Text',
+        'element' =>  '<p class="text-lead text-ubc-blue-sea">',
+      ],
+      [
+        'label' =>  'Text: small',
+        'element' =>  '<p class="text-sm">',
+      ],
+      [
+        'label' =>  'Serif font',
+        'element' =>  '<p class="font-serif">',
+      ],
+      [
+        'label' =>  'Uppercase Text',
+        'element' =>  '<span class="text-uppercase">',
+      ],
+      [
+        'label' =>  'Lowercase Text',
+        'element' =>  '<span class="text-lowercase">',
+      ],
+      [
+        'label' =>  'Semibold Text',
+        'element' =>  '<span class="font-semibold">',
+      ],
+      [
+        'label' =>  'Grey Text',
+        'element' =>  '<span class="text-grey-700">',
+      ],
+      [
+        'label' =>  'White Text',
+        'element' =>  '<span class="text-white">',
+      ],
+      [
+        'label' =>  'Attribution, Footnote Text',
+        'element' =>  '<p class="text-sm text-grey-700 text-uppercase">',
+      ],
+      [
+        'label' =>  'List: inline',
+        'element' =>  '<ul class="list-inline">',
+      ],
+      [
+        'label' =>  'List: bordered',
+        'element' =>  '<ul class="list-bordered">',
+      ],
+      [
+        'label' =>  'List: checked',
+        'element' => '<ul class="list-checked">',
+      ],
+      [
+        'label' =>  'List: buttons',
+        'element' => '<ul class="button-list">',
+      ],
+      [
+        'label' =>  'List: 2 across',
+        'element' => '<ul class="button-list list-grid--two">',
+      ],
+      [
+        'label' =>  'List: 3 across',
+        'element' => '<ul class="button-list list-grid--three">',
+      ],
+      [
+        'label' =>  'List: 4 across',
+        'element' => '<ul class="button-list list-grid--four">',
+      ],
+      [
+        'label' =>  'Ordered List: inline',
+        'element' => '<ol class="list-inline">',
+      ],
+      [
+        'label' =>  'Ordered List: bordered',
+        'element' => '<ol class="list-bordered">',
+      ],
+      [
+        'label' =>  'Ordered List: checked',
+        'element' => '<ol class="list-checked">',
+      ],
+      [
+        'label' =>  'Ordered List: buttons',
+        'element' => '<ol class="button-list">',
+      ],
+      [
+        'label' =>  'Ordered List: 2 across',
+        'element' => '<ol class="button-list list-grid--two">',
+      ],
+      [
+        'label' =>  'Ordered List: 3 across',
+        'element' => '<ol class="button-list list-grid--three">',
+      ],
+      [
+        'label' =>  'Ordered List: 4 across',
+        'element' => '<ol class="button-list list-grid--four">',
+      ],
+      [
+        'label' =>  'Unit Button',
+        'element' => '<a class="unit-button">',
+      ],
+      [
+        'label' =>  'Light Button',
+        'element' => '<a class="unit-button unit-button--light">',
+      ],
+      [
+        'label' =>  'Dark Button',
+        'element' => '<a class="unit-button unit-button--dark">',
+      ],
+      [
+        'label' =>  'Simple Button',
+        'element' => '<a class="unit-button unit-button--simple">',
+      ],
+      [
+        'label' =>  'Bordered Button',
+        'element' => '<a class="unit-button unit-button--bordered">',
+      ],
+      [
+        'label' =>  'Subunit Button',
+        'element' => '<a class="unit-button unit-button--subunit">',
+      ],
+      [
+        'label' =>  'Transparent Button',
+        'element' => '<a class="unit-button unit-button--transparent">',
+      ],
+      [
+        'label' =>  'Capped Button',
+        'element' => '<a class="unit-button unit-button--capped">',
+      ],
+      [
+        'label' =>  'Full-width Button',
+        'element' => '<a class="unit-button unit-button--block">',
+      ],
+      [
+        'label' =>  'Extra Small Button',
+        'element' => '<a class="text-xs unit-button unit-button--text-xs">',
+      ],
+      [
+        'label' =>  'Small Button',
+        'element' => '<a class="text-sm unit-button unit-button--text-sm">',
+      ],
+      [
+        'label' =>  'Large Button',
+        'element' => '<a class="text-lg unit-button unit-button--text-lg">',
+      ],
+      [
+        'label' =>  'XLarge Button',
+        'element' => '<a class="text-xl unit-button unit-button--text-xl">',
+      ],
+      [
+        'label' =>  'XXLarge Button',
+        'element' => '<a class="text-2xl unit-button unit-button--text-2xl">',
+      ],
+    ])
     ->save();
   $config->getEditable('core.entity_form_display.media.image.default')
     ->clear(