ソースを参照

Merge branch 'master' into t/1575

Aleksander Nowodzinski 6 年 前
コミット
0e47732660

+ 13 - 0
README.md

@@ -52,6 +52,7 @@ The following CKEditor 5 Builds are currently available:
 * [Classic editor](https://ckeditor.com/docs/ckeditor5/latest/builds/guides/overview.html#classic-editor)
 * [Inline editor](https://ckeditor.com/docs/ckeditor5/latest/builds/guides/overview.html#inline-editor)
 * [Balloon editor](https://ckeditor.com/docs/ckeditor5/latest/builds/guides/overview.html#balloon-editor)
+* [Balloon block editor](https://ckeditor.com/docs/ckeditor5/latest/builds/guides/overview.html#balloon-block-editor)
 * [Document editor](https://ckeditor.com/docs/ckeditor5/latest/builds/guides/overview.html#document-editor)
 
 #### Example
@@ -285,6 +286,18 @@ See CKEditor 5 release blog posts [on the CKEditor blog](https://ckeditor.com/bl
 
 <tr>
 	<td>
+		<a href="https://github.com/ckeditor/ckeditor5-build-balloon-block"><code>@ckeditor/ckeditor5-build-balloon-block</code></a>
+	</td>
+	<td>
+		<a href="https://www.npmjs.com/package/@ckeditor/ckeditor5-build-balloon-block"><img src="https://img.shields.io/npm/v/@ckeditor/ckeditor5-build-balloon-block.svg" alt="@ckeditor/ckeditor5-build-balloon-block npm package badge"></a>
+	</td>
+	<td>
+		The balloon editor with a block toolbar (Slack–like) build.
+	</td>
+</tr>
+
+<tr>
+	<td>
 		<a href="https://github.com/ckeditor/ckeditor5-build-decoupled-document"><code>@ckeditor/ckeditor5-build-decoupled-document</code></a>
 	</td>
 	<td>

+ 37 - 0
docs/_snippets/examples/balloon-block-editor.html

@@ -0,0 +1,37 @@
+<div id="snippet-balloon-block-editor">
+	<h2>Walking the capitals of Europe: Warsaw</h2>
+
+	<figure class="media">
+		<oembed url="https://www.youtube.com/watch?v=WmWFwGLA1kQ"></oembed>
+	</figure>
+
+	<p>If you enjoyed my previous articles in which we discussed wandering around <a href="https://en.wikipedia.org/wiki/Copenhagen">Copenhagen</a> and <a href="https://en.wikipedia.org/wiki/Vilnius">Vilnius</a>, you’ll definitely love exploring <a href="https://en.wikipedia.org/wiki/Warsaw">Warsaw</a>.</p>
+
+	<h3>Time to put comfy sandals on!</h3>
+
+	<p>Best time to visit the city is July and August, when it’s cool enough to not break a sweat and hot enough to enjoy summer. The city which has quite a combination of both old and modern textures is located by the river of Vistula.</p>
+
+	<p>The historic <strong>Old Town</strong>, which was reconstructed after the World War II, with its late 18th century characteristics, is a must-see. You can start your walk from the <strong>Nowy Świat Street</strong> which will take you straight to the Old Town.</p>
+
+	<p>Then you can go to the <strong>Powiśle</strong> area and take a walk on the newly renovated promenade on the riverfront. There are also lots of cafes, bars and restaurants where you can shake off the exhaustion of the day. On Sundays, there are many parks where you can enjoy nature or listen to pianists from around the world playing Chopin.</p>
+
+	<p>For museum lovers, you can add these to your list:</p>
+
+	<ul>
+		<li><a href="http://www.polin.pl/en">POLIN</a></li>
+		<li><a href="http://www.1944.pl/en">Warsaw Uprising Museum</a></li>
+		<li><a href="http://chopin.museum/en">Fryderyk Chopin Museum</a></li>
+	</ul>
+
+	<h3>Next destination</h3>
+
+	<p>We will go to Berlin and have a night's walk in the city that never sleeps! Make sure you subscribe to our newsletter!</p>
+</div>
+
+<style>
+	/* Restrict the width of the editor to isolate it from the content of the guide. */
+	#snippet-balloon-block-editor {
+		margin-left: 5%;
+		margin-right: 5%;
+	}
+</style>

+ 21 - 0
docs/_snippets/examples/balloon-block-editor.js

@@ -0,0 +1,21 @@
+/**
+ * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* globals console, window, document */
+
+import BalloonEditor from '@ckeditor/ckeditor5-build-balloon-block/src/ckeditor';
+
+import { CS_CONFIG } from '@ckeditor/ckeditor5-cloud-services/tests/_utils/cloud-services-config';
+
+BalloonEditor
+	.create( document.querySelector( '#snippet-balloon-block-editor' ), {
+		cloudServices: CS_CONFIG
+	} )
+	.then( editor => {
+		window.editor = editor;
+	} )
+	.catch( err => {
+		console.error( err );
+	} );

+ 3 - 2
docs/_snippets/features/placeholder-custom.js

@@ -3,12 +3,13 @@
  * For licensing, see LICENSE.md.
  */
 
-/* globals console, window, document */
+/* globals console, window, document, ClassicEditor */
 
-import ClassicEditor from '@ckeditor/ckeditor5-build-classic/src/ckeditor';
+import { CS_CONFIG } from '@ckeditor/ckeditor5-cloud-services/tests/_utils/cloud-services-config';
 
 ClassicEditor
 	.create( document.querySelector( '#snippet-placeholder-custom' ), {
+		cloudServices: CS_CONFIG,
 		placeholder: 'Type the content here!'
 	} )
 	.then( editor => {

+ 3 - 2
docs/_snippets/features/placeholder.js

@@ -3,12 +3,13 @@
  * For licensing, see LICENSE.md.
  */
 
-/* globals console, window, document */
+/* globals console, window, document, ClassicEditor */
 
-import ClassicEditor from '@ckeditor/ckeditor5-build-classic/src/ckeditor';
+import { CS_CONFIG } from '@ckeditor/ckeditor5-cloud-services/tests/_utils/cloud-services-config';
 
 ClassicEditor
 	.create( document.querySelector( '#snippet-placeholder' ), {
+		cloudServices: CS_CONFIG,
 		placeholder: 'Type the content here!'
 	} )
 	.then( editor => {

BIN
docs/assets/img/editor-balloon-block.png


+ 5 - 1
docs/assets/snippet-styles.css

@@ -128,7 +128,11 @@ It breaks CKEditor 5 (see how <p><code>[]</code></p> looks). */
 	padding: 2rem;
 }
 
-#snippet-inline-editor .ck-content:not(.ck-focused) {
+/* Visually separate inline editors from example description.
+https://github.com/ckeditor/ckeditor5/issues/1545 */
+#snippet-inline-editor .ck-content:not(.ck-focused),
+#snippet-balloon-editor.ck-content:not(.ck-focused),
+#snippet-balloon-block-editor.ck-content:not(.ck-focused) {
 	border: 1px solid rgba(0, 0, 0, 0.15);
 }
 

+ 0 - 2
docs/builds/guides/frameworks/css.md

@@ -15,8 +15,6 @@ In this guide, you will learn how to address these integration issues and use th
 
 ## Compatibility with Bootstrap
 
-### Bootstrap modals
-
 We noticed that [Bootstrap](https://getbootstrap.com) modals cover the UI of the rich-text editor and break the input fields. Knowing that, you will need to take the following steps to get CKEditor 5 working in the Bootstrap environment:
 
 * Configure the `z-index` of the floating editor UI (e.g. balloons) so it is displayed over the Bootstrap overlay.

+ 2 - 0
docs/builds/guides/integration/installation.md

@@ -37,6 +37,8 @@ npm install --save @ckeditor/ckeditor5-build-inline
 # Or:
 npm install --save @ckeditor/ckeditor5-build-balloon
 # Or:
+npm install --save @ckeditor/ckeditor5-build-balloon-block
+# Or:
 npm install --save @ckeditor/ckeditor5-build-decoupled-document
 ```
 

+ 8 - 0
docs/builds/guides/overview.md

@@ -56,6 +56,14 @@ Balloon editor is very similar to inline editor. The difference between them is
 
 To try it out online, check the {@link examples/builds/balloon-editor balloon editor example}. Jump to {@link builds/guides/quick-start#balloon-editor Quick start} to start using it.
 
+### Balloon block editor
+
+Balloon block is essentially the [balloon editor](#balloon-editor) with an extra block toolbar which can be accessed using the button attached to the editable content area and following the selection in the document. The toolbar gives an access to additional, block–level editing features.
+
+{@img assets/img/editor-balloon-block.png 813 Screenshot of a balloon block toolbar editor.}
+
+To try it out online, check the {@link examples/builds/balloon-block-editor balloon block editor example}. Jump to {@link builds/guides/quick-start#balloon-block-editor Quick start} to start using it.
+
 ### Document editor
 
 The document editor is focused on rich text editing experience similar to the native word processors. It works best for creating documents which are usually later printed or exported to PDF files.

+ 54 - 0
docs/builds/guides/quick-start.md

@@ -173,6 +173,60 @@ Call the {@link module:editor-balloon/ballooneditor~BalloonEditor#create `Balloo
 </html>
 ```
 
+## Balloon block editor
+
+In your HTML page add an element that CKEditor should make editable:
+
+```html
+<div id="editor"></div>
+```
+
+Load the balloon block editor build (here [CDN](https://cdn.ckeditor.com/) location is used):
+
+```html
+<script src="https://cdn.ckeditor.com/ckeditor5/{@var ckeditor5-version}/balloon-block/ckeditor.js"></script>
+```
+
+Call the {@link module:editor-balloon/ballooneditor~BalloonEditor#create `BalloonEditor.create()`} method.
+
+```html
+<script>
+	BalloonEditor
+		.create( document.querySelector( '#editor' ) )
+		.catch( error => {
+			console.error( error );
+		} );
+</script>
+```
+
+**Note:** You can configure the block toolbar items using the {@link module:core/editor/editorconfig~EditorConfig#blockToolbar `config.blockToolbar`} option.
+
+### Example
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>CKEditor 5 – Balloon block editor</title>
+	<script src="https://cdn.ckeditor.com/ckeditor5/{@var ckeditor5-version}/balloon-block/ckeditor.js"></script>
+</head>
+<body>
+	<h1>Balloon editor</h1>
+	<div id="editor">
+		<p>This is some sample content.</p>
+	</div>
+	<script>
+		BalloonEditor
+			.create( document.querySelector( '#editor' ) )
+			.catch( error => {
+				console.error( error );
+			} );
+	</script>
+</body>
+</html>
+```
+
 ## Document editor
 
 Load the document editor build (here [CDN](https://cdn.ckeditor.com/) location is used):

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

@@ -0,0 +1,13 @@
+---
+category: examples-builds
+order: 30
+---
+
+# Balloon block editor
+
+{@link builds/guides/overview#balloon-block-editor Balloon block editor} lets you create your content directly in its target location with the help of two toolbars:
+
+* a balloon toolbar that appears next to the selected editable document element (offering inline content formatting tools),
+* a {@link features/blocktoolbar block toolbar} accessible using a button attached to the editable content area and following the selection in the document (bringing additional block formatting tools).
+
+{@snippet examples/balloon-block-editor}

+ 2 - 0
docs/features/placeholder.md

@@ -2,6 +2,8 @@
 category: features
 ---
 
+{@snippet build-classic-source}
+
 # Editor placeholder
 
 CKEditor 5 can display a configurable placeholder text when the content is empty. The placeholder helps users locate the editor in the application and prompts to input the content. It works similarly to the native DOM [`placeholder` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#The_placeholder_attribute) used by inputs.

+ 1 - 0
mgit.json

@@ -9,6 +9,7 @@
     "@ckeditor/ckeditor5-basic-styles": "ckeditor/ckeditor5-basic-styles",
     "@ckeditor/ckeditor5-block-quote": "ckeditor/ckeditor5-block-quote",
     "@ckeditor/ckeditor5-build-balloon": "ckeditor/ckeditor5-build-balloon",
+    "@ckeditor/ckeditor5-build-balloon-block": "ckeditor/ckeditor5-build-balloon-block",
     "@ckeditor/ckeditor5-build-classic": "ckeditor/ckeditor5-build-classic",
     "@ckeditor/ckeditor5-build-decoupled-document": "ckeditor/ckeditor5-build-decoupled-document",
     "@ckeditor/ckeditor5-build-inline": "ckeditor/ckeditor5-build-inline",

+ 8 - 7
package.json

@@ -28,6 +28,7 @@
     "@ckeditor/ckeditor5-basic-styles": "^10.1.0",
     "@ckeditor/ckeditor5-block-quote": "^10.1.1",
     "@ckeditor/ckeditor5-build-balloon": "^11.2.0",
+    "@ckeditor/ckeditor5-build-balloon-block": "0.0.1",
     "@ckeditor/ckeditor5-build-classic": "^11.2.0",
     "@ckeditor/ckeditor5-build-decoupled-document": "^11.2.0",
     "@ckeditor/ckeditor5-build-inline": "^11.2.0",
@@ -65,14 +66,14 @@
   "devDependencies": {
     "@ckeditor/ckeditor5-real-time-collaboration": "^12.0.1",
     "@ckeditor/ckeditor5-comments": "^1.0.1",
-    "@ckeditor/ckeditor5-dev-docs": "^10.0.3",
-    "@ckeditor/ckeditor5-dev-env": "^13.0.2",
-    "@ckeditor/ckeditor5-dev-tests": "^15.2.0",
-    "@ckeditor/ckeditor5-dev-utils": "^11.0.1",
-    "@ckeditor/ckeditor5-dev-webpack-plugin": "^7.0.1",
+    "@ckeditor/ckeditor5-dev-docs": "^11.0.0",
+    "@ckeditor/ckeditor5-dev-env": "^14.0.0",
+    "@ckeditor/ckeditor5-dev-tests": "^16.0.0",
+    "@ckeditor/ckeditor5-dev-utils": "^12.0.0",
+    "@ckeditor/ckeditor5-dev-webpack-plugin": "^8.0.0",
     "css-loader": "^1.0.0",
     "eslint": "^5.5.0",
-    "eslint-config-ckeditor5": "^1.0.9",
+    "eslint-config-ckeditor5": "^1.0.11",
     "glob": "^7.1.2",
     "husky": "^1.3.1",
     "lint-staged": "^7.0.0",
@@ -84,7 +85,7 @@
     "style-loader": "^0.23.0",
     "svgo": "^1.1.0",
     "uglifyjs-webpack-plugin": "^1.2.7",
-    "umberto": "^0.14.0",
+    "umberto": "^0.19.0",
     "webpack": "^4.15.0"
   },
   "engines": {

+ 4 - 1
scripts/clean-up-svg-icons.sh

@@ -7,7 +7,10 @@
 # The configuration file is located in svgo.config.json.
 #
 # Usage:
-#	npm run clean-up-svg-icons path/to/icons/*.svg
+#	yarn run clean-up-svg-icons path/to/icons/foo.svg
+#
+# To optimize the entire project:
+#	yarn clean-up-svg-icons packages/**/theme/icons
 
 for i in "$@"
 do

ファイルの差分が大きいため隠しています
+ 636 - 96
yarn.lock