diff --git a/_config.php b/_config.php index 72fc3811..98428cce 100644 --- a/_config.php +++ b/_config.php @@ -1,21 +1,160 @@ setOption('table_class_list', [ - [ - 'title' => 'Table', - 'value' => 'nsw-table' - ], - [ - 'title' => 'Striped', - 'value' => 'nsw-table nsw-table--striped' - ], - [ - 'title' => 'Bordered', - 'value' => 'nsw-table nsw-table--bordered' - ], - [ - 'title' => 'Stripe and bordered', - 'value' => 'nsw-table nsw-table--striped nsw-table--bordered' - ] -]); +use SilverStripe\Forms\HTMLEditor\TinyMCEConfig; + +try { + + TinyMCEConfig::get('cms')->setOption('table_class_list', [ + [ + 'title' => 'Table', + 'value' => 'nsw-table' + ], + [ + 'title' => 'Striped', + 'value' => 'nsw-table nsw-table--striped' + ], + [ + 'title' => 'Bordered', + 'value' => 'nsw-table nsw-table--bordered' + ], + [ + 'title' => 'Stripe and bordered', + 'value' => 'nsw-table nsw-table--striped nsw-table--bordered' + ] + ]); + + + TinyMCEConfig::get('cms')->setOptions([ + 'importcss_append' => true, + 'style_formats' => [ + [ + 'title' => 'Text', + 'items' => [ + [ + 'title' => 'Paragraph', + 'block' => 'p', + 'attributes' => [ + 'class' => '' + ] + ], + [ + 'title' => 'Heading 1', + 'block' => 'h1', + 'attributes' => [ + 'class' => '' + ] + ], + [ + 'title' => 'Heading 2', + 'block' => 'h2', + 'attributes' => [ + 'class' => '' + ] + ], + [ + 'title' => 'Heading 3', + 'block' => 'h3', + 'attributes' => [ + 'class' => '' + ] + ], + [ + 'title' => 'Heading 4', + 'block' => 'h4', + 'attributes' => [ + 'class' => '' + ] + ], + [ + 'title' => 'Heading 5', + 'block' => 'h5', + 'attributes' => [ + 'class' => '' + ] + ], + [ + 'title' => 'Heading 6', + 'block' => 'h6', + 'attributes' => [ + 'class' => '' + ] + ], + [ + 'title' => 'Paragraph (Intro)', + 'selector' => 'p', + 'attributes' => [ + 'class' => 'nsw-intro' + ] + ], + ] + ], + [ + 'title' => 'Buttons', + 'items' => [ + [ + 'title' => 'Dark button', + 'selector' => 'a', + 'attributes' => [ + 'class' => 'nsw-button nsw-button--dark' + ] + ], + /* + [ + 'title' => 'Dark Outline button', + 'selector' => 'a', + 'attributes' => [ + 'class' => 'nsw-button nsw-button--dark-outline' + ] + ], + [ + 'title' => 'Dark Outline Solid button', + 'selector' => 'a', + 'attributes' => [ + 'class' => 'nsw-button nsw-button--dark-outline-solid' + ] + ], + */ + [ + 'title' => 'Light button', + 'selector' => 'a', + 'attributes' => [ + 'class' => 'nsw-button nsw-button--light' + ] + ], + /* + [ + 'title' => 'Light Outline button', + 'selector' => 'a', + 'attributes' => [ + 'class' => 'nsw-button nsw-button--light-outline' + ] + ], + [ + 'title' => 'White button', + 'selector' => 'a', + 'attributes' => [ + 'class' => 'nsw-button nsw-button--white' + ] + ], + [ + 'title' => 'White Outline button', + 'selector' => 'a', + 'attributes' => [ + 'class' => 'nsw-button nsw-button--white-outline' + ] + ], + */ + [ + 'title' => 'Danger button', + 'selector' => 'a', + 'attributes' => [ + 'class' => 'nsw-button nsw-button--danger' + ] + ] + ], + ] + ] + ]); + + +} catch (\Exception $exception) {} \ No newline at end of file diff --git a/_config/tinymce.yml b/_config/tinymce.yml index 07e5e0e8..6c5ae920 100644 --- a/_config/tinymce.yml +++ b/_config/tinymce.yml @@ -1,5 +1,7 @@ --- Name: nswdpc-waratah-tinymce +After: + - '#nswdpc-content-tinymce' --- SilverStripe\Forms\HTMLEditor\TinyMCEConfig: editor_css: diff --git a/src/Models/DesignSystemConfiguration.php b/src/Models/DesignSystemConfiguration.php index 17af6316..2c6c7b98 100644 --- a/src/Models/DesignSystemConfiguration.php +++ b/src/Models/DesignSystemConfiguration.php @@ -388,7 +388,7 @@ public static function get_per_layout_content($template): ?DBHTMLText // do not include requirements when parsing the template $viewer->includeRequirements(false); // process template with current controller - $result = $viewer->process($controller, null, null); + $result = $viewer->process($controller); return DBField::create_field( DBHTMLText::class, $result diff --git a/themes/nswds/app/static/editor.css b/themes/nswds/app/static/editor.css index d087fe27..ed027930 100644 --- a/themes/nswds/app/static/editor.css +++ b/themes/nswds/app/static/editor.css @@ -4,7 +4,11 @@ --nsw-font-family: 'Public Sans', sans-serif; } -body { +/** + * Editor fields + * Styles applied to the editor field + */ +.mce-content-body.typography { overflow-x: hidden; font-size: 1rem; color: #383838; @@ -12,41 +16,51 @@ body { line-height: 1.75; } -html, -body, -button, -input, -select, -textarea { +.mce-content-body.typography, +.mce-content-body.typography button, +.mce-content-body.typography input, +.mce-content-body.typography select, +.mce-content-body.typography textarea { font-family: var(--nsw-font-family); } -table { +.mce-content-body.typography table { width: 100%; margin-bottom: 2rem; } -table, -th, -td { +.mce-content-body.typography table, +.mce-content-body.typography th, +.mce-content-body.typography td { border: 1px solid #DCDDDE; } -thead td, -th { +.mce-content-body.typography thead td, +.mce-content-body.typography th { background: #F1F2F2; font-weight: 500; font-style: normal; } -th, -td { +.mce-content-body.typography th, +.mce-content-body.typography td { padding: .5rem .825rem; vertical-align: top; } -a.nsw-button.nsw-button--dark, -a.nsw-button.nsw-button--primary { +.mce-content-body.typography blockquote { + font-size: 1.375rem; + line-height: 1.25; + margin-top: 1rem; + border-left: 6px solid #d7153a; + padding: 1.25rem 1.5rem; +} + +/** + * tag.selector styles below will display in the 'style' menu + */ +.mce-content-body.typography a.nsw-button.nsw-button--dark, +.mce-content-body.typography a.nsw-button.nsw-button--primary { font-family: var(--nsw-font-family); font-weight: 600; font-size: 1rem; @@ -71,10 +85,11 @@ a.nsw-button.nsw-button--primary { color: #fff !important; background-color: #002664; border-color: transparent; + outline-width: 0; } -a.nsw-button.nsw-button--light, -a.nsw-button.nsw-button--secondary { +.mce-content-body.typography a.nsw-button.nsw-button--light, +.mce-content-body.typography a.nsw-button.nsw-button--secondary { font-family: var(--nsw-font-family); font-weight: 600; font-size: 1rem; @@ -99,9 +114,10 @@ a.nsw-button.nsw-button--secondary { color: #22272b; background-color: #cbedfd; border-color: transparent; + outline: none; } -a.nsw-button.nsw-button--danger { +.mce-content-body.typography a.nsw-button.nsw-button--danger { font-family: var(--nsw-font-family); font-weight: 600; font-size: 1rem; @@ -126,18 +142,11 @@ a.nsw-button.nsw-button--danger { color: #fff; background-color: #b81237; border-color: transparent; + outline: none; } -p.nsw-intro { +.mce-content-body.typography p.nsw-intro { font-size: 1.125rem; line-height: 1.33; margin: 1rem 0 0; } - -blockquote { - font-size: 1.375rem; - line-height: 1.25; - margin-top: 1rem; - border-left: 6px solid #d7153a; - padding: 1.25rem 1.5rem; -}