From 63eb6e8cf21744420cc482665f0993c7ea7e8305 Mon Sep 17 00:00:00 2001 From: nshenderov <103522779+nshenderov@users.noreply.github.com> Date: Sat, 7 Dec 2024 21:04:05 +0300 Subject: [PATCH] feat: markdown default preset (#194) - Introduced a new default preset: defaultMarkdown. - Renamed the default preset to defaultHtml. - Added the to-do list feature to the default configurations. - Removed the style feature and default material color palette. - Slightly modified the toolbar for the default HTML preset. BREAKING CHANGE: The style feature and default color palette have been removed. The default preset has been renamed to defaultHtml. Update existing fields or configure your default preset accordingly following the migration guide. --- admin/src/config/colors.ts | 125 -------- .../{defaultPreset.ts => htmlPreset.ts} | 284 ++++++++---------- admin/src/config/index.ts | 4 +- admin/src/config/markdownPreset.ts | 159 ++++++++++ admin/src/config/pluginConfig.ts | 6 +- admin/src/exports.ts | 2 +- admin/src/theme/additional.ts | 175 ----------- 7 files changed, 299 insertions(+), 456 deletions(-) delete mode 100644 admin/src/config/colors.ts rename admin/src/config/{defaultPreset.ts => htmlPreset.ts} (62%) create mode 100644 admin/src/config/markdownPreset.ts diff --git a/admin/src/config/colors.ts b/admin/src/config/colors.ts deleted file mode 100644 index 8dd910c..0000000 --- a/admin/src/config/colors.ts +++ /dev/null @@ -1,125 +0,0 @@ -export const materialColors: Array<{ - label: string; - color: string; -}> = [ - { label: 'Red 50', color: '#FFEBEE' }, - { label: 'Purple 50', color: '#F3E5F5' }, - { label: 'Indigo 50', color: '#E8EAF6' }, - { label: 'Blue 50', color: '#E3F2FD' }, - { label: 'Cyan 50', color: '#E0F7FA' }, - { label: 'Teal 50', color: '#E0F2F1' }, - { label: 'Light green 50', color: '#F1F8E9' }, - { label: 'Lime 50', color: '#F9FBE7' }, - { label: 'Amber 50', color: '#FFF8E1' }, - { label: 'Orange 50', color: '#FFF3E0' }, - { label: 'Grey 50', color: '#FAFAFA' }, - { label: 'Blue grey 50', color: '#ECEFF1' }, - { label: 'Red 100', color: '#FFCDD2' }, - { label: 'Purple 100', color: '#E1BEE7' }, - { label: 'Indigo 100', color: '#C5CAE9' }, - { label: 'Blue 100', color: '#BBDEFB' }, - { label: 'Cyan 100', color: '#B2EBF2' }, - { label: 'Teal 100', color: '#B2DFDB' }, - { label: 'Light green 100', color: '#DCEDC8' }, - { label: 'Lime 100', color: '#F0F4C3' }, - { label: 'Amber 100', color: '#FFECB3' }, - { label: 'Orange 100', color: '#FFE0B2' }, - { label: 'Grey 100', color: '#F5F5F5' }, - { label: 'Blue grey 100', color: '#CFD8DC' }, - { label: 'Red 200', color: '#EF9A9A' }, - { label: 'Purple 200', color: '#CE93D8' }, - { label: 'Indigo 200', color: '#9FA8DA' }, - { label: 'Blue 200', color: '#90CAF9' }, - { label: 'Cyan 200', color: '#80DEEA' }, - { label: 'Teal 200', color: '#80CBC4' }, - { label: 'Light green 200', color: '#C5E1A5' }, - { label: 'Lime 200', color: '#E6EE9C' }, - { label: 'Amber 200', color: '#FFE082' }, - { label: 'Orange 200', color: '#FFCC80' }, - { label: 'Grey 200', color: '#EEEEEE' }, - { label: 'Blue grey 200', color: '#B0BEC5' }, - { label: 'Red 300', color: '#E57373' }, - { label: 'Purple 300', color: '#BA68C8' }, - { label: 'Indigo 300', color: '#7986CB' }, - { label: 'Blue 300', color: '#64B5F6' }, - { label: 'Cyan 300', color: '#4DD0E1' }, - { label: 'Teal 300', color: '#4DB6AC' }, - { label: 'Light green 300', color: '#AED581' }, - { label: 'Lime 300', color: '#DCE775' }, - { label: 'Amber 300', color: '#FFD54F' }, - { label: 'Orange 300', color: '#FFB74D' }, - { label: 'Grey 300', color: '#E0E0E0' }, - { label: 'Blue grey 300', color: '#90A4AE' }, - { label: 'Red 400', color: '#EF5350' }, - { label: 'Purple 400', color: '#AB47BC' }, - { label: 'Indigo 400', color: '#5C6BC0' }, - { label: 'Blue 400', color: '#42A5F5' }, - { label: 'Cyan 400', color: '#26C6DA' }, - { label: 'Teal 400', color: '#26A69A' }, - { label: 'Light green 400', color: '#9CCC65' }, - { label: 'Lime 400', color: '#D4E157' }, - { label: 'Amber 400', color: '#FFCA28' }, - { label: 'Orange 400', color: '#FFA726' }, - { label: 'Grey 400', color: '#BDBDBD' }, - { label: 'Blue grey 400', color: '#78909C' }, - { label: 'Red 500', color: '#F44336' }, - { label: 'Purple 500', color: '#9C27B0' }, - { label: 'Indigo 500', color: '#3F51B5' }, - { label: 'Blue 500', color: '#2196F3' }, - { label: 'Cyan 500', color: '#00BCD4' }, - { label: 'Teal 500', color: '#009688' }, - { label: 'Light green 500', color: '#8BC34A' }, - { label: 'Lime 500', color: '#CDDC39' }, - { label: 'Amber 500', color: '#FFC107' }, - { label: 'Orange 500', color: '#FF9800' }, - { label: 'Grey 500', color: '#9E9E9E' }, - { label: 'Blue grey 500', color: '#607D8B' }, - { label: 'Red 600', color: '#E53935' }, - { label: 'Purple 600', color: '#8E24AA' }, - { label: 'Indigo 600', color: '#3949AB' }, - { label: 'Blue 600', color: '#1E88E5' }, - { label: 'Cyan 600', color: '#00ACC1' }, - { label: 'Teal 600', color: '#00897B' }, - { label: 'Light green 600', color: '#7CB342' }, - { label: 'Lime 600', color: '#C0CA33' }, - { label: 'Amber 600', color: '#FFB300' }, - { label: 'Orange 600', color: '#FB8C00' }, - { label: 'Grey 600', color: '#757575' }, - { label: 'Blue grey 600', color: '#546E7A' }, - { label: 'Red 700', color: '#D32F2F' }, - { label: 'Purple 700', color: '#7B1FA2' }, - { label: 'Indigo 700', color: '#303F9F' }, - { label: 'Blue 700', color: '#1976D2' }, - { label: 'Cyan 700', color: '#0097A7' }, - { label: 'Teal 700', color: '#00796B' }, - { label: 'Light green 700', color: '#689F38' }, - { label: 'Lime 700', color: '#AFB42B' }, - { label: 'Amber 700', color: '#FFA000' }, - { label: 'Orange 700', color: '#F57C00' }, - { label: 'Grey 700', color: '#616161' }, - { label: 'Blue grey 700', color: '#455A64' }, - { label: 'Red 800', color: '#C62828' }, - { label: 'Purple 800', color: '#6A1B9A' }, - { label: 'Indigo 800', color: '#283593' }, - { label: 'Blue 800', color: '#1565C0' }, - { label: 'Cyan 800', color: '#00838F' }, - { label: 'Teal 800', color: '#00695C' }, - { label: 'Light green 800', color: '#558B2F' }, - { label: 'Lime 800', color: '#9E9D24' }, - { label: 'Amber 800', color: '#FF8F00' }, - { label: 'Orange 800', color: '#EF6C00' }, - { label: 'Grey 800', color: '#424242' }, - { label: 'Blue grey 800', color: '#37474F' }, - { label: 'Red 900', color: '#B71C1C' }, - { label: 'Purple 900', color: '#4A148C' }, - { label: 'Indigo 900', color: '#1A237E' }, - { label: 'Blue 900', color: '#0D47A1' }, - { label: 'Cyan 900', color: '#006064' }, - { label: 'Teal 900', color: '#004D40' }, - { label: 'Light green 900', color: '#33691E' }, - { label: 'Lime 900', color: '#827717' }, - { label: 'Amber 900', color: '#FF6F00' }, - { label: 'Orange 900', color: '#E65100' }, - { label: 'Grey 900', color: '#212121' }, - { label: 'Blue grey 900', color: '#263238' }, -]; diff --git a/admin/src/config/defaultPreset.ts b/admin/src/config/htmlPreset.ts similarity index 62% rename from admin/src/config/defaultPreset.ts rename to admin/src/config/htmlPreset.ts index 67b0e4c..21203ef 100644 --- a/admin/src/config/defaultPreset.ts +++ b/admin/src/config/htmlPreset.ts @@ -1,115 +1,156 @@ -import * as CKE from 'ckeditor5'; +import { + Alignment, + Autoformat, + AutoImage, + BalloonToolbar, + BlockQuote, + Bold, + Code, + CodeBlock, + Essentials, + FontBackgroundColor, + FontColor, + FontFamily, + FontSize, + GeneralHtmlSupport, + Heading, + HorizontalLine, + HtmlEmbed, + Image, + ImageCaption, + ImageInsert, + ImageResize, + ImageStyle, + ImageToolbar, + ImageUpload, + Indent, + IndentBlock, + Italic, + List, + ListProperties, + Link, + LinkImage, + MediaEmbed, + Paragraph, + PageBreak, + PasteFromOffice, + PictureEditing, + RemoveFormat, + SourceEditing, + SpecialCharacters, + SpecialCharactersEssentials, + Strikethrough, + Style, + Subscript, + Superscript, + ShowBlocks, + Table, + TableCaption, + TableCellProperties, + TableColumnResize, + TableProperties, + TableToolbar, + TodoList, + Underline, + WordCount, + icons, +} from 'ckeditor5'; import * as sanitizeHtml from 'sanitize-html'; import type { Preset, EditorConfig } from './types'; import { StrapiMediaLib, StrapiUploadAdapter } from '../plugins'; -import { materialColors } from './colors'; -const defaultEditorConfig: EditorConfig = { +const editorConfig: EditorConfig = { plugins: [ - CKE.Alignment, - CKE.Autoformat, - CKE.AutoImage, - CKE.BalloonToolbar, - CKE.BlockQuote, - CKE.Bold, - CKE.Code, - CKE.CodeBlock, - CKE.Essentials, - CKE.FontBackgroundColor, - CKE.FontColor, - CKE.FontFamily, - CKE.FontSize, - CKE.GeneralHtmlSupport, - CKE.Heading, - CKE.HorizontalLine, - CKE.HtmlEmbed, - CKE.Image, - CKE.ImageCaption, - CKE.ImageInsert, - CKE.ImageResize, - CKE.ImageStyle, - CKE.ImageToolbar, - CKE.ImageUpload, - CKE.Indent, - CKE.IndentBlock, - CKE.Italic, - CKE.List, - CKE.ListProperties, - CKE.Link, - CKE.LinkImage, - CKE.LinkImage, - CKE.MediaEmbed, - CKE.PageBreak, - CKE.Paragraph, - CKE.PasteFromOffice, - CKE.PictureEditing, - CKE.RemoveFormat, - CKE.SourceEditing, - CKE.SpecialCharacters, - CKE.SpecialCharactersArrows, - CKE.SpecialCharactersCurrency, - CKE.SpecialCharactersLatin, - CKE.SpecialCharactersMathematical, - CKE.SpecialCharactersText, + Alignment, + Autoformat, + AutoImage, + BalloonToolbar, + BlockQuote, + Bold, + Code, + CodeBlock, + Essentials, + FontBackgroundColor, + FontColor, + FontFamily, + FontSize, + GeneralHtmlSupport, + Heading, + HorizontalLine, + HtmlEmbed, + Image, + ImageCaption, + ImageInsert, + ImageResize, + ImageStyle, + ImageToolbar, + ImageUpload, + Indent, + IndentBlock, + Italic, + List, + ListProperties, + Link, + LinkImage, + MediaEmbed, + Paragraph, + PageBreak, + PasteFromOffice, + PictureEditing, + RemoveFormat, + SourceEditing, + SpecialCharacters, + SpecialCharactersEssentials, + Strikethrough, + Style, + Subscript, + Superscript, + ShowBlocks, + Table, + TableCaption, + TableCellProperties, + TableColumnResize, + TableProperties, + TableToolbar, + TodoList, + Underline, + WordCount, + StrapiMediaLib, StrapiUploadAdapter, - CKE.Strikethrough, - CKE.Style, - CKE.Subscript, - CKE.Superscript, - CKE.ShowBlocks, - CKE.Table, - CKE.TableCaption, - CKE.TableCellProperties, - CKE.TableColumnResize, - CKE.TableProperties, - CKE.TableToolbar, - CKE.Underline, - CKE.WordCount, ], toolbar: [ - { - label: ' ', - icon: 'paragraph', - items: ['heading', 'style'], - }, - { - label: ' ', - icon: 'text', - items: ['fontSize', 'fontFamily'], - }, + 'showBlocks', '|', + 'heading', + '|', + 'fontSize', + 'fontFamily', 'alignment', { - label: ' ', - icon: CKE.icons.indent, + label: 'Indentation', + icon: icons.indent, items: ['outdent', 'indent'], }, - '|', 'bulletedList', 'numberedList', - '|', - 'insertImage', + 'todoList', + 'link', 'mediaEmbed', + 'insertImage', 'strapiMediaLib', - 'link', 'blockquote', 'insertTable', - 'specialCharacters', - 'htmlEmbed', 'codeBlock', - '|', + 'htmlEmbed', + 'SourceEditing', + 'specialCharacters', 'horizontalLine', 'pageBreak', '|', - 'SourceEditing', - '|', - 'showBlocks', - '|', 'undo', 'redo', - '|', ], balloonToolbar: [ 'bold', @@ -117,7 +158,7 @@ const defaultEditorConfig: EditorConfig = { 'fontColor', 'fontBackgroundColor', { - label: ' ', + label: 'Other formatting options', icon: ` @@ -137,16 +178,6 @@ const defaultEditorConfig: EditorConfig = { options: [10, 12, 14, 'default', 18, 20, 22], supportAllValues: true, }, - fontColor: { - columns: 12, - documentColors: 12, - colors: materialColors, - }, - fontBackgroundColor: { - columns: 12, - documentColors: 12, - colors: materialColors, - }, heading: { options: [ { model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' }, @@ -294,55 +325,6 @@ const defaultEditorConfig: EditorConfig = { addTargetToExternalLinks: true, defaultProtocol: 'https://', }, - style: { - definitions: [ - { - name: 'Title', - element: 'h1', - classes: ['document-title'], - }, - { - name: 'Subtitle', - element: 'h2', - classes: ['document-subtitle'], - }, - { - name: 'Callout', - element: 'p', - classes: ['callout'], - }, - { - name: 'Side quote', - element: 'blockquote', - classes: ['side-quote'], - }, - { - name: 'Needs clarification', - element: 'span', - classes: ['needs-clarification'], - }, - { - name: 'Wide spacing', - element: 'span', - classes: ['wide-spacing'], - }, - { - name: 'Small caps', - element: 'span', - classes: ['small-caps'], - }, - { - name: 'Code (dark)', - element: 'pre', - classes: ['stylish-code', 'stylish-code-dark'], - }, - { - name: 'Code (bright)', - element: 'pre', - classes: ['stylish-code', 'stylish-code-bright'], - }, - ], - }, ui: { poweredBy: { position: 'inside', @@ -354,16 +336,16 @@ const defaultEditorConfig: EditorConfig = { }, }; -export const defaultPreset: Preset = { +export const defaultHtmlPreset: Preset = { field: { - key: 'default', - value: 'default', + key: 'defaultHtml', + value: 'defaultHtml', metadatas: { intlLabel: { - id: 'ckeditor.preset.default.label', - defaultMessage: 'default', + id: 'ckeditor.preset.defaultHtml.label', + defaultMessage: 'Default HTML editor', }, }, }, - editorConfig: defaultEditorConfig, + editorConfig, }; diff --git a/admin/src/config/index.ts b/admin/src/config/index.ts index 6e1b1fa..a62b4d5 100644 --- a/admin/src/config/index.ts +++ b/admin/src/config/index.ts @@ -1,5 +1,5 @@ export * from './types'; export * from './language'; export * from './pluginConfig'; -export * from './colors'; -export * from './defaultPreset'; +export * from './htmlPreset'; +export * from './markdownPreset'; diff --git a/admin/src/config/markdownPreset.ts b/admin/src/config/markdownPreset.ts new file mode 100644 index 0000000..14c96e3 --- /dev/null +++ b/admin/src/config/markdownPreset.ts @@ -0,0 +1,159 @@ +import { + Autoformat, + BlockQuote, + Bold, + Code, + CodeBlock, + Essentials, + Heading, + HorizontalLine, + Image, + ImageInsert, + ImageToolbar, + ImageUpload, + Italic, + List, + Link, + Paragraph, + SourceEditing, + SpecialCharacters, + SpecialCharactersEssentials, + Strikethrough, + Table, + TableToolbar, + WordCount, + Markdown, + TextTransformation, + TodoList, +} from 'ckeditor5'; + +import type { Preset, EditorConfig } from './types'; +import { StrapiMediaLib, StrapiUploadAdapter } from '../plugins'; + +const editorConfig: EditorConfig = { + plugins: [ + Autoformat, + BlockQuote, + Bold, + Code, + CodeBlock, + Essentials, + Heading, + HorizontalLine, + Image, + ImageToolbar, + ImageUpload, + ImageInsert, + Italic, + List, + Link, + Markdown, + Paragraph, + SourceEditing, + SpecialCharacters, + SpecialCharactersEssentials, + Strikethrough, + Table, + TableToolbar, + TextTransformation, + TodoList, + WordCount, + + StrapiMediaLib, + StrapiUploadAdapter, + ], + toolbar: [ + 'sourceEditing', + '|', + 'heading', + '|', + 'bold', + 'italic', + 'fontColor', + 'strikethrough', + 'code', + 'bulletedList', + 'numberedList', + 'todoList', + 'link', + 'insertImage', + 'strapiMediaLib', + 'blockQuote', + 'insertTable', + 'codeBlock', + 'specialCharacters', + 'horizontalLine', + 'undo', + 'redo', + ], + heading: { + options: [ + { model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' }, + { + model: 'heading1', + view: 'h1', + title: 'Heading 1', + class: 'ck-heading_heading1', + }, + { + model: 'heading2', + view: 'h2', + title: 'Heading 2', + class: 'ck-heading_heading2', + }, + { + model: 'heading3', + view: 'h3', + title: 'Heading 3', + class: 'ck-heading_heading3', + }, + { + model: 'heading4', + view: 'h4', + title: 'Heading 4', + class: 'ck-heading_heading4', + }, + { + model: 'heading5', + view: 'h5', + title: 'Heading 5', + class: 'ck-heading_heading5', + }, + { + model: 'heading6', + view: 'h6', + title: 'Heading 6', + class: 'ck-heading_heading6', + }, + ], + }, + image: { + toolbar: ['imageTextAlternative'], + }, + table: { + contentToolbar: ['tableColumn', 'tableRow', 'mergeTableCells'], + }, + ui: { + poweredBy: { + position: 'inside', + side: 'left', + label: '', + verticalOffset: 0, + horizontalOffset: 0, + }, + }, +}; + +export const defaultMarkdownPreset: Preset = { + field: { + key: 'defaultMarkdown', + value: 'defaultMarkdown', + metadatas: { + intlLabel: { + id: 'ckeditor.preset.defaultMarkdown.label', + defaultMessage: 'Default Markdown editor', + }, + }, + }, + editorConfig, +}; diff --git a/admin/src/config/pluginConfig.ts b/admin/src/config/pluginConfig.ts index 9ae767c..2320225 100644 --- a/admin/src/config/pluginConfig.ts +++ b/admin/src/config/pluginConfig.ts @@ -1,10 +1,12 @@ import { defaultTheme } from '../theme'; -import { defaultPreset } from './defaultPreset'; +import { defaultHtmlPreset } from './htmlPreset'; +import { defaultMarkdownPreset } from './markdownPreset'; import type { PluginConfig } from './types'; const PLUGIN_CONFIG: PluginConfig = { presets: { - default: defaultPreset, + defaultHtml: defaultHtmlPreset, + defaultMarkdown: defaultMarkdownPreset, }, theme: defaultTheme, }; diff --git a/admin/src/exports.ts b/admin/src/exports.ts index 4be5d64..c9a9fbd 100644 --- a/admin/src/exports.ts +++ b/admin/src/exports.ts @@ -1,3 +1,3 @@ export type * from './config/types'; -export { setPluginConfig, defaultPreset, materialColors } from './config'; +export { setPluginConfig, defaultHtmlPreset, defaultMarkdownPreset } from './config'; export { StrapiMediaLib, StrapiUploadAdapter } from './plugins'; diff --git a/admin/src/theme/additional.ts b/admin/src/theme/additional.ts index b25d5ee..70a43e6 100644 --- a/admin/src/theme/additional.ts +++ b/admin/src/theme/additional.ts @@ -12,181 +12,6 @@ const editorSizes = css` } `; -const colorGrid = css` - .ck.ck-color-ui-dropdown { - --ck-color-grid-tile-size: 22px !important; - } - .ck.ck-color-grid__tile { - width: auto; - } - .ck.ck-color-ui-dropdown .ck-color-grid { - grid-gap: 2px; - } - .ck.ck-color-ui-dropdown .ck-color-grid .ck-button { - border-radius: 2px; - } - .ck.ck-color-ui-dropdown .ck.ck-color-grid .ck-color-grid__tile:hover:not(.ck-disabled), - .ck.ck-color-ui-dropdown .ck.ck-color-grid .ck-color-grid__tile:focus:not(.ck-disabled) { - z-index: 1; - transform: scale(1.1); - border-radius: 2px; - } -`; - -const styleFeature = css` - :root { - --ck-georgia-serif-font-stack: Georgia, Times, Times New Roman, serif; - } - - .ck-content h1.document-title { - font-family: var(--ck-georgia-serif-font-stack); - font-size: 50px; - font-weight: bold; - border: 0; - } - - .ck-content h2.document-subtitle { - font-family: var(--ck-georgia-serif-font-stack); - font-size: 20px; - font-weight: bold; - color: #d1d1d1; - letter-spacing: 10px; - } - - .ck-content p.callout { - --border-color: #e91e1e; - padding: 1.2em 2em; - border: 1px solid var(--border-color); - border-left: 10px solid var(--border-color); - background: #fff9fb; - border-radius: 5px; - margin: 1.5em 2em; - box-shadow: 5px 5px 0 #ffe6ef; - } - - .ck-content blockquote.side-quote { - font-family: var(--ck-georgia-serif-font-stack); - font-style: normal; - float: right; - width: 35%; - position: relative; - border: 0; - overflow: visible; - z-index: 1; - margin-left: 1em; - } - - .ck-content blockquote.side-quote::before { - content: '“'; - position: absolute; - top: -37px; - left: -10px; - display: block; - font-size: 200px; - color: #e7e7e7; - z-index: -1; - line-height: 1; - } - - .ck-content blockquote.side-quote p { - font-size: 2em; - line-height: 1; - } - - .ck-content blockquote.side-quote p:last-child:not(:first-child) { - font-size: 1.3em; - text-align: right; - color: #555; - } - - .ck-content span.needs-clarification { - outline: 1px dashed #c8a24b; - background: #ffe19c; - border-radius: 2px; - position: relative; - } - - .ck-content span.needs-clarification::after { - content: '?'; - display: inline-block; - color: #fff; - background: #3b3b3b; - font-size: 12px; - vertical-align: super; - width: 12px; - height: 12px; - line-height: 12px; - border-radius: 10px; - text-align: center; - position: absolute; - right: -6px; - top: -6px; - font-weight: bold; - letter-spacing: initial; - } - - .ck-content span.wide-spacing { - letter-spacing: 0.3em; - } - - .ck-content span.small-caps { - font-variant: small-caps; - } - - .ck-content span.spoiler { - background: #000; - color: #000; - } - - .ck-content span.spoiler:hover { - background: #000; - color: #fff; - } - - .ck-content pre.stylish-code { - border-color: transparent; - margin-left: 2em; - margin-right: 2em; - border-radius: 10px; - } - - .ck-content pre.stylish-code::before { - content: ''; - display: block; - height: 13px; - background: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1NCAxMyI+CiAgPGNpcmNsZSBjeD0iNi41IiBjeT0iNi41IiByPSI2LjUiIGZpbGw9IiNGMzZCNUMiLz4KICA8Y2lyY2xlIGN4PSIyNi41IiBjeT0iNi41IiByPSI2LjUiIGZpbGw9IiNGOUJFNEQiLz4KICA8Y2lyY2xlIGN4PSI0Ny41IiBjeT0iNi41IiByPSI2LjUiIGZpbGw9IiM1NkM0NTMiLz4KPC9zdmc+Cg==); - margin-bottom: 8px; - background-repeat: no-repeat; - } - - .ck-content pre.stylish-code-dark, - .ck-content pre.stylish-code-bright { - padding: 1em; - } - - .ck-content pre.stylish-code-dark { - background: #272822; - box-shadow: 5px 5px 0 #0000001f; - color: white; - } - - .ck-content pre.stylish-code-dark code { - color: white; - } - - .ck-content pre.stylish-code-bright { - background: #dddfe0; - color: #000; - box-shadow: 5px 5px 0 #b3b3b3; - } - - .ck-content pre.stylish-code-bright code { - color: #222; - } -`; - export const additional = css` ${editorSizes} - ${colorGrid} - ${styleFeature} `;