Răsfoiți Sursa

Merge branch 'master' into i/1410

Anna Tomanek 6 ani în urmă
părinte
comite
8f59776dfb

+ 1 - 1
.travis.yml

@@ -24,7 +24,7 @@ script:
 - yarn run test --reporter=dots
 - yarn run test --reporter=dots
 - yarn run docs:api --validate-only
 - yarn run docs:api --validate-only
 - 'if [ $TRAVIS_TEST_RESULT -eq 0 ]; then
 - 'if [ $TRAVIS_TEST_RESULT -eq 0 ]; then
-    travis_wait yarn run docs:build-and-publish-nightly;
+    travis_wait 30 yarn run docs:build-and-publish-nightly;
   fi'
   fi'
 after_script:
 after_script:
 - export END_TIME=$( date +%s )
 - export END_TIME=$( date +%s )

+ 36 - 0
docs/_snippets/examples/document-editor.html

@@ -200,4 +200,40 @@
 	.document-editor .ck-content table td {
 	.document-editor .ck-content table td {
 		vertical-align: middle;
 		vertical-align: middle;
 	}
 	}
+
+	@media only screen and (max-width: 960px) {
+		/* Because on mobile 2cm paddings are to big. */
+		.document-editor__editable-container .document-editor__editable.ck-editor__editable {
+			padding: 1.5em;
+		}
+	}
+
+	@media only screen and (max-width: 1200px) {
+		.main__content-wide .document-editor__editable-container .document-editor__editable.ck-editor__editable {
+			width: 100%;
+		}
+	}
+
+	/* Style document editor a'ka Google Docs.*/
+	@media only screen and (min-width: 1360px) {
+		.main .main__content.main__content-wide {
+			padding-right: 0;
+		}
+	}
+
+	@media only screen and (min-width: 1600px) {
+		.main .main__content.main__content-wide {
+			width: 24cm;
+		}
+
+		.main .main__content.main__content-wide .main__content-inner {
+			width: auto;
+			margin: 0 50px;
+		}
+
+		/* Keep "page" look based on viewport width. */
+		.main__content-wide .document-editor__editable-container .document-editor__editable.ck-editor__editable {
+			width: 60%;
+		}
+	}
 </style>
 </style>

+ 1 - 0
docs/_snippets/examples/inline-editor.js

@@ -32,6 +32,7 @@ Array.from( inlineInjectElements ).forEach( inlineElement => {
 			'ImageUpload',
 			'ImageUpload',
 			'List',
 			'List',
 			'EasyImage',
 			'EasyImage',
+			'CKFinder',
 			'CKFinderUploadAdapter'
 			'CKFinderUploadAdapter'
 		];
 		];
 		config.toolbar.items = [ 'heading', '|', 'bold', 'italic', 'link' ];
 		config.toolbar.items = [ 'heading', '|', 'bold', 'italic', 'link' ];

+ 15 - 24
docs/assets/styles.css

@@ -2,12 +2,12 @@
  * Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
  * Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
  */
  */
 
 
-/* https://github.com/ckeditor/ckeditor5/issues/913 */
-@media only screen and (min-width: 1600px) {
-	/* https://github.com/ckeditor/ckeditor5/issues/1077 */
-	.main .main__content .main__content-inner,
-	.main .main__content-wide .main__content-inner {
-		width: 840px;
+/* https://github.com/ckeditor/ckeditor5/issues/5598. */
+@media only screen and (min-width: 960px) and (max-width: 1024px ) {
+	.main .main__content {
+		/* Reduce content width including side navigation (340px). */
+		max-width: calc( 100% - 340px );
+		min-width: auto;
 	}
 	}
 }
 }
 
 
@@ -17,31 +17,22 @@ https://github.com/ckeditor/ckeditor5-build-decoupled-document/issues/12 */
 	/* https://github.com/ckeditor/ckeditor5/issues/1077 */
 	/* https://github.com/ckeditor/ckeditor5/issues/1077 */
 	.main .main__content .main__content-inner,
 	.main .main__content .main__content-inner,
 	.main .main__content-wide .main__content-inner {
 	.main .main__content-wide .main__content-inner {
-		max-width: 900px;
 		padding-left: 30px;
 		padding-left: 30px;
 		padding-right: 30px
 		padding-right: 30px
 	}
 	}
 }
 }
 
 
-/* https://github.com/ckeditor/ckeditor5/issues/913 */
-@media only screen and (min-width: 1360px) {
-	.main .main__content.main__content-wide {
-		padding-right: 0;
-	}
-
-	.main .main__content-wide .main__content-inner {
-		max-width: 840px;
+/* https://github.com/ckeditor/ckeditor5/issues/5598. */
+@media only screen and (max-width: 1360px) {
+	.main .main__content-inner {
+		max-width: 960px;
 	}
 	}
 }
 }
-
-/* https://github.com/ckeditor/ckeditor5/issues/1007 */
-@media only screen and (min-width: 1600px) {
-	.main .main__content.main__content-wide {
-		/*
-		 * `.main__content` by default has 760px width and 340px right padding.
-		 * `.main__content-wide` is 40px wider (800px), that's why we are reducing this right padding.
-		 */
-		padding-right: 300px;
+/* https://github.com/ckeditor/ckeditor5/issues/5598. */
+@media only screen and (min-width: 1360px) {
+	.main .main__content--no-toc .main__content-inner {
+		/* Because there is `width: auto`, we need to set some minimal value. */
+		min-width: 910px;
 	}
 	}
 }
 }
 
 

+ 142 - 32
docs/builds/guides/integration/content-styles.md

@@ -48,15 +48,36 @@ Below there is a full list of content styles used by the editor features. You ca
 
 
 ```css
 ```css
 /*
 /*
- * CKEditor 5 (v12.3.1) content styles.
- * Generated on Mon, 19 Aug 2019 12:01:17 GMT.
+ * CKEditor 5 (v12.4.0) content styles.
+ * Generated on Thu, 17 Oct 2019 07:18:45 GMT.
  * For more information, check out https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/content-styles.html
  * For more information, check out https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/content-styles.html
  */
  */
 
 
 :root {
 :root {
 	--ck-image-style-spacing: 1.5em;
 	--ck-image-style-spacing: 1.5em;
+	--ck-todo-list-checkmark-size: 16px;
 }
 }
 
 
+/* ckeditor5-basic-styles/theme/code.css */
+.ck-content code {
+	background-color: hsla(0, 0%, 78%, 0.3);
+	padding: .15em;
+	border-radius: 2px;
+}
+/* ckeditor5-image/theme/imageresize.css */
+.ck-content .image.image_resized {
+	max-width: 100%;
+	display: block;
+	box-sizing: border-box
+}
+/* ckeditor5-image/theme/imageresize.css */
+.ck-content .image.image_resized img {
+	width: 100%;
+}
+/* ckeditor5-image/theme/imageresize.css */
+.ck-content .image.image_resized > figcaption {
+	display: block;
+}
 /* ckeditor5-image/theme/image.css */
 /* ckeditor5-image/theme/image.css */
 .ck-content .image {
 .ck-content .image {
 	display: table;
 	display: table;
@@ -82,26 +103,72 @@ Below there is a full list of content styles used by the editor features. You ca
 	font-size: .75em;
 	font-size: .75em;
 	outline-offset: -1px;
 	outline-offset: -1px;
 }
 }
-/* ckeditor5-image/theme/imageresize.css */
-.ck-content .image.image_resized {
-	max-width: 100%;
-	display: block;
-	box-sizing: border-box
+/* ckeditor5-list/theme/todolist.css */
+.ck-content .todo-list {
+	list-style: none
 }
 }
-/* ckeditor5-image/theme/imageresize.css */
-.ck-content .image.image_resized img {
-	width: 100%;
+/* ckeditor5-list/theme/todolist.css */
+.ck-content .todo-list li {
+	margin-bottom: 5px
 }
 }
-/* ckeditor5-image/theme/imageresize.css */
-.ck-content .image.image_resized > figcaption {
+/* ckeditor5-list/theme/todolist.css */
+.ck-content .todo-list li .todo-list {
+	margin-top: 5px;
+}
+/* ckeditor5-list/theme/todolist.css */
+.ck-content .todo-list .todo-list__label > input {
+	-webkit-appearance: none;
+	display: inline-block;
+	position: relative;
+	width: var(--ck-todo-list-checkmark-size);
+	height: var(--ck-todo-list-checkmark-size);
+	vertical-align: middle;
+	border: 0;
+	left: -25px;
+	margin-right: -15px;
+	right: 0;
+	margin-left: 0
+}
+/* ckeditor5-list/theme/todolist.css */
+.ck-content .todo-list .todo-list__label > input::before {
 	display: block;
 	display: block;
+	position: absolute;
+	box-sizing: border-box;
+	content: '';
+	width: 100%;
+	height: 100%;
+	border: 1px solid hsl(0, 0%, 20%);
+	border-radius: 2px;
+	transition: 250ms ease-in-out box-shadow, 250ms ease-in-out background, 250ms ease-in-out border;
 }
 }
-/* ckeditor5-media-embed/theme/mediaembed.css */
-.ck-content .media {
-	clear: both;
-	margin: 1em 0;
+/* ckeditor5-list/theme/todolist.css */
+.ck-content .todo-list .todo-list__label > input::after {
 	display: block;
 	display: block;
-	min-width: 15em;
+	position: absolute;
+	box-sizing: content-box;
+	pointer-events: none;
+	content: '';
+	left: calc( var(--ck-todo-list-checkmark-size) / 3 );
+	top: calc( var(--ck-todo-list-checkmark-size) / 5.3 );
+	width: calc( var(--ck-todo-list-checkmark-size) / 5.3 );
+	height: calc( var(--ck-todo-list-checkmark-size) / 2.6 );
+	border-style: solid;
+	border-color: transparent;
+	border-width: 0 calc( var(--ck-todo-list-checkmark-size) / 8 ) calc( var(--ck-todo-list-checkmark-size) / 8 ) 0;
+	transform: rotate(45deg);
+}
+/* ckeditor5-list/theme/todolist.css */
+.ck-content .todo-list .todo-list__label > input[checked]::before {
+	background: hsl(126, 64%, 41%);
+	border-color: hsl(126, 64%, 41%);
+}
+/* ckeditor5-list/theme/todolist.css */
+.ck-content .todo-list .todo-list__label > input[checked]::after {
+	border-color: hsl(0, 0%, 100%);
+}
+/* ckeditor5-list/theme/todolist.css */
+.ck-content .todo-list .todo-list__label .todo-list__label__description {
+	vertical-align: middle;
 }
 }
 /* ckeditor5-table/theme/table.css */
 /* ckeditor5-table/theme/table.css */
 .ck-content .table {
 .ck-content .table {
@@ -133,26 +200,55 @@ Below there is a full list of content styles used by the editor features. You ca
 	font-weight: bold;
 	font-weight: bold;
 	background: hsl(0, 0%, 98%);
 	background: hsl(0, 0%, 98%);
 }
 }
-/* ckeditor5-basic-styles/theme/code.css */
-.ck-content code {
-	background-color: hsla(0, 0%, 78%, 0.3);
-	padding: .15em;
-	border-radius: 2px;
+/* ckeditor5-page-break/theme/pagebreak.css */
+.ck-content .page-break {
+	position: relative;
+	clear: both;
+	padding: 5px 0;
+	display: flex;
+	align-items: center;
+	justify-content: center
 }
 }
-/* ckeditor5-image/theme/imagestyle.css */
-.ck-content .image-style-side:not(.image_resized), .ck-content .image-style-align-left:not(.image_resized), .ck-content .image-style-align-center:not(.image_resized), .ck-content .image-style-align-right:not(.image_resized) {
-	max-width: 50%;
+/* ckeditor5-page-break/theme/pagebreak.css */
+.ck-content .page-break::after {
+	content: '';
+	position: absolute;
+	border-bottom: 2px dashed hsl(0, 0%, 77%);
+	width: 100%;
 }
 }
-/* ckeditor5-image/theme/imagestyle.css */
-.ck-content .image-style-side:not(.image_resized), .ck-content .image-style-align-left:not(.image_resized), .ck-content .image-style-align-center:not(.image_resized), .ck-content .image-style-align-right:not(.image_resized) {
-	max-width: 50%;
+/* ckeditor5-page-break/theme/pagebreak.css */
+.ck-content .page-break__label {
+	position: relative;
+	z-index: 1;
+	padding: .3em .6em;
+	display: block;
+	text-transform: uppercase;
+	border: 1px solid hsl(0, 0%, 77%);
+	border-radius: 2px;
+	font-family: Helvetica, Arial, Tahoma, Verdana, Sans-Serif;
+	font-size: 0.75em;
+	font-weight: bold;
+	color: hsl(0, 0%, 20%);
+	background: #fff;
+	box-shadow: 2px 2px 1px hsla(0, 0%, 0%, 0.15);
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
 }
 }
-/* ckeditor5-image/theme/imagestyle.css */
-.ck-content .image-style-side:not(.image_resized), .ck-content .image-style-align-left:not(.image_resized), .ck-content .image-style-align-center:not(.image_resized), .ck-content .image-style-align-right:not(.image_resized) {
-	max-width: 50%;
+/* ckeditor5-page-break/theme/pagebreak.css */
+.ck-content .page-break {
+	padding: 0
+}
+/* ckeditor5-page-break/theme/pagebreak.css */
+.ck-content .page-break::after {
+	display: none;
 }
 }
 /* ckeditor5-image/theme/imagestyle.css */
 /* ckeditor5-image/theme/imagestyle.css */
-.ck-content .image-style-side:not(.image_resized), .ck-content .image-style-align-left:not(.image_resized), .ck-content .image-style-align-center:not(.image_resized), .ck-content .image-style-align-right:not(.image_resized) {
+.ck-content .image-style-side,
+.ck-content .image-style-align-left,
+.ck-content .image-style-align-center,
+.ck-content .image-style-align-right {
 	max-width: 50%;
 	max-width: 50%;
 }
 }
 /* ckeditor5-image/theme/imagestyle.css */
 /* ckeditor5-image/theme/imagestyle.css */
@@ -190,4 +286,18 @@ Below there is a full list of content styles used by the editor features. You ca
 	border-left: 0;
 	border-left: 0;
 	border-right: solid 5px hsl(0, 0%, 80%);
 	border-right: solid 5px hsl(0, 0%, 80%);
 }
 }
+/* ckeditor5-media-embed/theme/mediaembed.css */
+.ck-content .media {
+	clear: both;
+	margin: 1em 0;
+	display: block;
+	min-width: 15em;
+}
+/* ckeditor5-horizontal-line/theme/horizontalline.css */
+.ck-content hr {
+	border-width: 1px 0 0;
+	border-style: solid;
+	border-color: hsl(0, 0%, 37%);
+	margin: 0;
+}
 ```
 ```

+ 1 - 0
docs/examples/builds/balloon-block-editor.md

@@ -1,6 +1,7 @@
 ---
 ---
 category: examples-builds
 category: examples-builds
 order: 30
 order: 30
+classes: main__content--no-toc
 ---
 ---
 
 
 # Balloon block editor
 # Balloon block editor

+ 1 - 0
docs/examples/builds/balloon-editor.md

@@ -1,6 +1,7 @@
 ---
 ---
 category: examples-builds
 category: examples-builds
 order: 30
 order: 30
+classes: main__content--no-toc
 ---
 ---
 
 
 # Balloon editor
 # Balloon editor

+ 1 - 0
docs/examples/builds/classic-editor.md

@@ -1,6 +1,7 @@
 ---
 ---
 category: examples-builds
 category: examples-builds
 order: 10
 order: 10
+classes: main__content--no-toc
 ---
 ---
 
 
 # Classic editor
 # Classic editor

+ 1 - 0
docs/examples/builds/custom-build.md

@@ -1,6 +1,7 @@
 ---
 ---
 category: examples-builds
 category: examples-builds
 order: 40
 order: 40
+classes: main__content--no-toc
 ---
 ---
 
 
 # Custom build
 # Custom build

+ 1 - 1
docs/examples/builds/document-editor.md

@@ -1,7 +1,7 @@
 ---
 ---
 category: examples-builds
 category: examples-builds
 order: 30
 order: 30
-classes: main__content-wide
+classes: 'main__content-wide main__content--no-toc'
 ---
 ---
 
 
 # Document editor
 # Document editor

+ 1 - 0
docs/examples/builds/inline-editor.md

@@ -1,6 +1,7 @@
 ---
 ---
 category: examples-builds
 category: examples-builds
 order: 20
 order: 20
+classes: main__content--no-toc
 ---
 ---
 
 
 # Inline editor
 # Inline editor

+ 4 - 0
scripts/docs/content-styles/ckeditor.js

@@ -20,6 +20,7 @@ import BlockQuote from '@ckeditor/ckeditor5-block-quote/src/blockquote';
 import CKFinder from '@ckeditor/ckeditor5-ckfinder/src/ckfinder';
 import CKFinder from '@ckeditor/ckeditor5-ckfinder/src/ckfinder';
 import EasyImage from '@ckeditor/ckeditor5-easy-image/src/easyimage';
 import EasyImage from '@ckeditor/ckeditor5-easy-image/src/easyimage';
 import Heading from '@ckeditor/ckeditor5-heading/src/heading';
 import Heading from '@ckeditor/ckeditor5-heading/src/heading';
+import HorizontalLine from '@ckeditor/ckeditor5-horizontal-line/src/horizontalline';
 import Image from '@ckeditor/ckeditor5-image/src/image';
 import Image from '@ckeditor/ckeditor5-image/src/image';
 import ImageCaption from '@ckeditor/ckeditor5-image/src/imagecaption';
 import ImageCaption from '@ckeditor/ckeditor5-image/src/imagecaption';
 import ImageResize from '@ckeditor/ckeditor5-image/src/imageresize';
 import ImageResize from '@ckeditor/ckeditor5-image/src/imageresize';
@@ -31,6 +32,7 @@ import List from '@ckeditor/ckeditor5-list/src/list';
 import TodoList from '@ckeditor/ckeditor5-list/src/todolist';
 import TodoList from '@ckeditor/ckeditor5-list/src/todolist';
 import MediaEmbed from '@ckeditor/ckeditor5-media-embed/src/mediaembed';
 import MediaEmbed from '@ckeditor/ckeditor5-media-embed/src/mediaembed';
 import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
 import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
+import PageBreak from '@ckeditor/ckeditor5-page-break/src/pagebreak';
 import PasteFromOffice from '@ckeditor/ckeditor5-paste-from-office/src/pastefromoffice';
 import PasteFromOffice from '@ckeditor/ckeditor5-paste-from-office/src/pastefromoffice';
 import Table from '@ckeditor/ckeditor5-table/src/table';
 import Table from '@ckeditor/ckeditor5-table/src/table';
 import TableToolbar from '@ckeditor/ckeditor5-table/src/tabletoolbar';
 import TableToolbar from '@ckeditor/ckeditor5-table/src/tabletoolbar';
@@ -56,6 +58,7 @@ ClassicEditor.builtinPlugins = [
 	CKFinder,
 	CKFinder,
 	EasyImage,
 	EasyImage,
 	Heading,
 	Heading,
+	HorizontalLine,
 	Image,
 	Image,
 	ImageCaption,
 	ImageCaption,
 	ImageResize,
 	ImageResize,
@@ -66,6 +69,7 @@ ClassicEditor.builtinPlugins = [
 	List,
 	List,
 	TodoList,
 	TodoList,
 	MediaEmbed,
 	MediaEmbed,
+	PageBreak,
 	Paragraph,
 	Paragraph,
 	PasteFromOffice,
 	PasteFromOffice,
 	Table,
 	Table,

+ 4 - 0
tests/manual/article.js

@@ -20,6 +20,10 @@ ClassicEditor
 			'link',
 			'link',
 			'bulletedList',
 			'bulletedList',
 			'numberedList',
 			'numberedList',
+			'|',
+			'outdent',
+			'indent',
+			'|',
 			'blockQuote',
 			'blockQuote',
 			'insertTable',
 			'insertTable',
 			'mediaEmbed',
 			'mediaEmbed',