瀏覽代碼

Merge branch 'master' into t/1214

Kamil Piechaczek 7 年之前
父節點
當前提交
7e2b3eacb5

+ 13 - 1
README.md

@@ -318,7 +318,7 @@ See CKEditor 5 release blog posts [on the CKEditor blog](https://ckeditor.com/bl
 		<a href="https://www.npmjs.com/package/@ckeditor/ckeditor5-adapter-ckfinder"><img src="https://img.shields.io/npm/v/@ckeditor/ckeditor5-adapter-ckfinder.svg" alt="@ckeditor/ckeditor5-adapter-ckfinder npm package badge"></a>
 	</td>
 	<td>
-		The <a href="https://ckeditor.com/ckeditor-4/ckfinder/">CKFinder</a> adapter for features which require upload capabilities.
+		The <a href="https://ckeditor.com/ckfinder/">CKFinder</a> adapter for features which require upload capabilities (e.g. image upload).
 	</td>
 </tr>
 
@@ -384,6 +384,18 @@ See CKEditor 5 release blog posts [on the CKEditor blog](https://ckeditor.com/bl
 
 <tr>
 	<td>
+		<a href="https://github.com/ckeditor/ckeditor5-ckfinder"><code>@ckeditor/ckeditor5-ckfinder</code></a>
+	</td>
+	<td>
+		<a href="https://www.npmjs.com/package/@ckeditor/ckeditor5-ckfinder"><img src="https://img.shields.io/npm/v/@ckeditor/ckeditor5-ckfinder.svg" alt="@ckeditor/ckeditor5-ckfinder npm package badge"></a>
+	</td>
+	<td>
+		The <a href="https://ckeditor.com/ckfinder/">CKFinder</a> file browser integration.
+	</td>
+</tr>
+
+<tr>
+	<td>
 		<a href="https://github.com/ckeditor/ckeditor5-clipboard"><code>@ckeditor/ckeditor5-clipboard</code></a>
 	</td>
 	<td>

+ 1 - 1
docs/api/index.md

@@ -5,7 +5,7 @@ category: api-reference
 # API documentation
 
 <info-box>
-	Use the **navigation tree on the left** to navigate through CKEditor API.
+	Use the <span class="navigation-hint_desktop">**navigation tree on the left**</span><span class="navigation-hint_mobile">**main menu button in the upper-left corner**</span> to navigate through CKEditor API.
 </info-box>
 
 ## Popular API pages

+ 16 - 0
docs/assets/styles.css

@@ -44,3 +44,19 @@ https://github.com/ckeditor/ckeditor5-build-decoupled-document/issues/12 */
 		padding-right: 300px;
 	}
 }
+
+/* https://github.com/ckeditor/ckeditor5/issues/1349 */
+.main .navigation-hint_mobile {
+	display: none;
+}
+
+/* https://github.com/ckeditor/ckeditor5/issues/1349 */
+@media only screen and (max-width: 960px) {
+	.main .navigation-hint_desktop {
+		display: none;
+	}
+
+	.main .navigation-hint_mobile {
+		display: inline;
+	}
+}

+ 0 - 2
docs/builds/guides/integration/saving-data.md

@@ -58,7 +58,6 @@ In your HTTP server, you can now read the editor data from the `content` variabl
 	If you need to get the actual data from CKEditor at any moment using JavaScript, use the {@link module:editor-classic/classiceditor~ClassicEditor#getData `editor.getData()`} method as described in the next section.
 </info-box>
 
-<!-- Hidden due to https://github.com/cksource/umberto/issues/558
 <info-box>
 	When you print the data from the database to a `<textarea>` element in an HTML page, you need to encode it correctly. For instance, if you use PHP then a minimal solution would look like this:
 
@@ -84,7 +83,6 @@ In your HTTP server, you can now read the editor data from the `content` variabl
 
 	While simple content like mentioned above does not itself require to be encoded, encoding the data will prevent losing text like "&lt;" or "&lt;img&gt;".
 </info-box>
--->
 
 ## Manually retrieving the data
 

+ 1 - 1
docs/builds/index.md

@@ -11,7 +11,7 @@ meta-description: Learn how to install, integrate, configure and develop CKEdito
 CKEditor 5 Builds are the fastest and easiest way to use CKEditor 5 in your application.
 
 <info-box>
-	Use the **navigation tree on the left** to navigate through CKEditor 5 Builds documentation.
+	Use the <span class="navigation-hint_desktop">**navigation tree on the left**</span><span class="navigation-hint_mobile">**main menu button in the upper-left corner**</span> to navigate through CKEditor 5 Builds documentation.
 </info-box>
 
 ## Related links

+ 1 - 1
docs/examples/index.md

@@ -9,7 +9,7 @@ meta-description: Navigate through CKEditor 5 examples to see what you are able
 # Examples
 
 <info-box>
-	Use the **navigation tree on the left** to navigate through CKEditor 5 examples. Visit the {@link features/index Features} section to see even more examples!
+	Use the <span class="navigation-hint_desktop">**navigation tree on the left**</span><span class="navigation-hint_mobile">**main menu button in the upper-left corner**</span> to navigate through CKEditor 5 examples. Visit the {@link features/index Features} section to see even more examples!
 </info-box>
 
 ## Related links

+ 1 - 1
docs/features/index.md

@@ -7,7 +7,7 @@ toc: false
 # Features
 
 <info-box>
-	Use the **navigation tree on the left** to navigate through selected CKEditor 5 features.
+	Use the <span class="navigation-hint_desktop">**navigation tree on the left**</span><span class="navigation-hint_mobile">**main menu button in the upper-left corner**</span> to navigate through selected CKEditor 5 features.
 </info-box>
 
 ## Features availability

+ 15 - 5
docs/framework/guides/contributing/development-environment.md

@@ -224,12 +224,22 @@ Leads to [`ckeditor/ckeditor5-image@02869eb`](https://github.com/ckeditor/ckedit
 
 By default, CKEditor 5 supports SVG icons found in the `ckeditor5-*/theme/icons` folders. Unfortunately, most of the SVG editing software produces the output with comments, obsolete tags, and complex paths, which bloats the DOM and makes the builds heavy for no good reason.
 
-To remove the excess data and prevent [certain issues](https://github.com/ckeditor/ckeditor5-ui/issues/245), **all new icons should be optimized before joining the code base**. The right utility to do this is Node–based [SVGO](https://github.com/svg/svgo) and the usage is as simple as:
+To remove the excess data and prevent [certain issues](https://github.com/ckeditor/ckeditor5-ui/issues/245), **all new icons should be optimized before joining the code base**. To do that, you can use the `clean-up-svg-icons` script in the [root of the project](#setting-up-the-ckeditor-development-environment), a wrapper for the [SVGO](https://github.com/svg/svgo) tool:
 
 ```bash
-npm install -g svgo
-cd ckeditor5-package-name/theme/icons
-svgo --enable removeTitle -i .
+cd path/to/ckeditor5
+
+# Optimize all SVG files in the folder.
+npm run clean-up-svg-icons path/to/icons/*.svg
+
+# Optimize a single SVG file.
+npm run clean-up-svg-icons path/to/icon/icon.svg
 ```
 
-SVGO reduces the icon size up to 70%, depending on the software used to create it and the general complexity of the image.
+The script reduces the icon size up to 70%, depending on the software used to create it and the general complexity of the image.
+
+**Note**: You may still need to tweak the source code of the SVG files manually after using the script:
+
+* The icons should have the `viewBox` attribute (instead of `width` and `height`). The `removeDimensions` SVGO plugin will not remove `width` and `height` if there is no `viewBox` attribute so make sure it is present.
+* Sometimes SVGO leaves empty (transparent) groups `<g>...</g>`. They should be removed from the source.
+* Make sure the number of `<path>` elements is minimal. Merge paths whenever possible in the image processor before saving the file.

+ 1 - 1
docs/framework/index.md

@@ -11,7 +11,7 @@ meta-description: Learn how to install, integrate, configure and develop CKEdito
 CKEditor 5 Framework is a set of components allowing you to create any kind of rich text editing solution.
 
 <info-box>
-    Use the **navigation tree on the left** to navigate through CKEditor 5 Framework documentation.
+    Use the <span class="navigation-hint_desktop">**navigation tree on the left**</span><span class="navigation-hint_mobile">**main menu button in the upper-left corner**</span> to navigate through CKEditor 5 Framework documentation.
 </info-box>
 
 ## Related links

+ 1 - 0
mgit.json

@@ -14,6 +14,7 @@
     "@ckeditor/ckeditor5-build-inline": "ckeditor/ckeditor5-build-inline",
     "@ckeditor/ckeditor5-clipboard": "ckeditor/ckeditor5-clipboard",
     "@ckeditor/ckeditor5-cloud-services": "ckeditor/ckeditor5-cloud-services",
+    "@ckeditor/ckeditor5-ckfinder": "ckeditor/ckeditor5-ckfinder",
     "@ckeditor/ckeditor5-core": "ckeditor/ckeditor5-core",
     "@ckeditor/ckeditor5-easy-image": "ckeditor/ckeditor5-easy-image",
     "@ckeditor/ckeditor5-editor-balloon": "ckeditor/ckeditor5-editor-balloon",

+ 4 - 1
package.json

@@ -33,6 +33,7 @@
     "@ckeditor/ckeditor5-build-inline": "^11.1.1",
     "@ckeditor/ckeditor5-clipboard": "^10.0.3",
     "@ckeditor/ckeditor5-cloud-services": "^10.1.0",
+    "@ckeditor/ckeditor5-ckfinder": "^0.0.1",
     "@ckeditor/ckeditor5-core": "^11.0.1",
     "@ckeditor/ckeditor5-easy-image": "^10.0.3",
     "@ckeditor/ckeditor5-editor-balloon": "^11.0.1",
@@ -80,6 +81,7 @@
     "postcss-loader": "^3.0.0",
     "raw-loader": "^0.5.1",
     "style-loader": "^0.23.0",
+    "svgo": "^1.1.0",
     "uglifyjs-webpack-plugin": "^1.2.7",
     "umberto": "^0.12.0",
     "webpack": "^4.15.0"
@@ -114,7 +116,8 @@
     "release:bump-version": "node ./scripts/release/bump-versions.js",
     "release:publish": "node ./scripts/release/publish.js",
     "release:stable-branches": "sh ./scripts/update-stable-branches.sh",
-    "switch-to-dev-dev": "sh ./scripts/switch-to-dev-dev.sh"
+    "switch-to-dev-dev": "sh ./scripts/switch-to-dev-dev.sh",
+    "clean-up-svg-icons": "sh ./scripts/clean-up-svg-icons.sh"
   },
   "lint-staged": {
     "**/*.js": [

+ 15 - 0
scripts/clean-up-svg-icons.sh

@@ -0,0 +1,15 @@
+#!/bin/bash
+
+# @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+# For licensing, see LICENSE.md.
+
+# Cleans up and optimizes SVG files using the SVGO utility.
+# The configuration file is located in svgo.config.json.
+#
+# Usage:
+#	npm run clean-up-svg-icons path/to/icons/*.svg
+
+for i in "$@"
+do
+	svgo --config=./scripts/svgo.config.json -i $i
+done

+ 10 - 0
scripts/svgo.config.json

@@ -0,0 +1,10 @@
+{
+	"plugins": [
+		"collapseGroups",
+		"removeDimensions",
+		{ "removeAttrs": { "attrs": "(fill|stroke|fill-rule)" } },
+		"removeTitle",
+		"removeComments",
+		"removeMetadata"
+	]
+}