diff --git a/package.json b/package.json index c0e039a..7c6e58b 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,7 @@ "devDependencies": { "@ckeditor/ckeditor5-alignment": "^15.0.0", "@ckeditor/ckeditor5-basic-styles": "^15.0.0", + "@ckeditor/ckeditor5-code-block": "^0.0.1", "@ckeditor/ckeditor5-core": "^15.0.0", "@ckeditor/ckeditor5-editor-balloon": "^15.0.0", "@ckeditor/ckeditor5-editor-classic": "^15.0.0", diff --git a/tests/manual/iconset.js b/tests/manual/iconset.js index e4ffd2b..1b5dfdd 100644 --- a/tests/manual/iconset.js +++ b/tests/manual/iconset.js @@ -22,6 +22,8 @@ import strikethrough from '@ckeditor/ckeditor5-basic-styles/theme/icons/striketh import subscript from '@ckeditor/ckeditor5-basic-styles/theme/icons/subscript.svg'; import superscript from '@ckeditor/ckeditor5-basic-styles/theme/icons/superscript.svg'; +import codeBlock from '@ckeditor/ckeditor5-code-block/theme/icons/codeblock.svg'; + import cancel from '@ckeditor/ckeditor5-core/theme/icons/cancel.svg'; import check from '@ckeditor/ckeditor5-core/theme/icons/check.svg'; import eraser from '@ckeditor/ckeditor5-core/theme/icons/eraser.svg'; @@ -82,6 +84,9 @@ const icons = { // basic-styles bold, italic, underline, code, strikethrough, subscript, superscript, + // code block + codeBlock, + // core check, cancel, eraser, lowVision, quote, image, objectLeft, objectCenter, objectRight, objectFullWidth, pencil, pilcrow, diff --git a/theme/ckeditor5-code-block/codeblock.css b/theme/ckeditor5-code-block/codeblock.css new file mode 100644 index 0000000..23d711d --- /dev/null +++ b/theme/ckeditor5-code-block/codeblock.css @@ -0,0 +1,28 @@ +/* + * Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved. + * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license + */ + +:root { + --ck-color-code-block-label-background: hsl(0, 0%, 46%); +} + +.ck.ck-editor__editable pre[data-language]::after { + top: -1px; + right: 10px; + background: var(--ck-color-code-block-label-background); + + font-size: 10px; + font-family: var(--ck-font-face); + line-height: 16px; + padding: var(--ck-spacing-tiny) var(--ck-spacing-medium); + color: hsl(0, 0%, 100%); + white-space: nowrap; +} + +.ck.ck-code-block-dropdown .ck-dropdown__panel { + /* There could be dozens of languages available. Use scroll to prevent a 10e6px dropdown. */ + max-height: 250px; + overflow-y: auto; + overflow-x: hidden; +}