Merge pull request #251 from ckeditor/t/ckeditor5/436

Feature: Added styles for the code block feature UI (see ckeditor/ckeditor5#436).

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",

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,
 

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;
+}