Browse Source

Merge branch 'master' into t/ckeditor5-theme-lark/107

Aleksander Nowodzinski 8 years ago
parent
commit
fd69dbc754

+ 22 - 0
packages/ckeditor5-image/CHANGELOG.md

@@ -1,6 +1,28 @@
 Changelog
 =========
 
+## [0.7.0](https://github.com/ckeditor/ckeditor5-image/compare/v0.6.0...v0.7.0) (2017-09-03)
+
+### Bug fixes
+
+* `ImageStyleCommand` should switch properly between any two non-null styles. Closes [#132](https://github.com/ckeditor/ckeditor5-image/issues/132). ([d6c847d](https://github.com/ckeditor/ckeditor5-image/commit/d6c847d))
+* Text alternative input should synchronize its value when the balloon shows up. Closes [#114](https://github.com/ckeditor/ckeditor5-image/issues/114). ([9b105ed](https://github.com/ckeditor/ckeditor5-image/commit/9b105ed))
+* The arrow of the toolbar's balloon should inherit the background color. Closes [#109](https://github.com/ckeditor/ckeditor5-image/issues/109). ([4322b04](https://github.com/ckeditor/ckeditor5-image/commit/4322b04))
+* The image toolbar should not be doubled when the `ContextualToolbar` plugin is in use. Closes [#110](https://github.com/ckeditor/ckeditor5-image/issues/110). ([5ace9a0](https://github.com/ckeditor/ckeditor5-image/commit/5ace9a0))
+
+### Features
+
+* Introduced support for responsive image's `srcset` attribute. Closes [#2](https://github.com/ckeditor/ckeditor5-image/issues/2). ([5b433d2](https://github.com/ckeditor/ckeditor5-image/commit/5b433d2))
+
+### Other changes
+
+* Aligned the implementation to the new Command API (see https://github.com/ckeditor/ckeditor5-core/issues/88). ([2c0044c](https://github.com/ckeditor/ckeditor5-image/commit/2c0044c))
+
+### BREAKING CHANGES
+
+* The command API has been changed.
+
+
 ## [0.6.0](https://github.com/ckeditor/ckeditor5-image/compare/v0.5.0...v0.6.0) (2017-05-07)
 
 ### Bug fixes

+ 9 - 0
packages/ckeditor5-image/docs/_snippets/features/image-style-custom.html

@@ -0,0 +1,9 @@
+<div id="snippet-image-style-custom">
+	<p>An image to play with:</p>
+
+	<figure class="image">
+		<img src="%BASE_PATH%/assets/img/fields.jpg" alt="Autumn fields">
+	</figure>
+
+	<p>Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here.</p>
+</div>

+ 53 - 0
packages/ckeditor5-image/docs/_snippets/features/image-style-custom.js

@@ -0,0 +1,53 @@
+/**
+ * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* globals ClassicEditor, console, window, document */
+
+import './image-style-custom.scss';
+
+import fullSizeIcon from '@ckeditor/ckeditor5-core/theme/icons/object-center.svg';
+import alignLeftIcon from '@ckeditor/ckeditor5-core/theme/icons/object-left.svg';
+import alignRightIcon from '@ckeditor/ckeditor5-core/theme/icons/object-right.svg';
+
+ClassicEditor
+	.create( document.querySelector( '#snippet-image-style-custom' ), {
+		image: {
+			styles: [
+				// This option is equal to a situation where no style is applied.
+				{
+					name: 'imageStyleFull',
+					title: 'Full size image',
+					icon: fullSizeIcon,
+					value: null
+				},
+
+				// This represents an image aligned to left.
+				{
+					name: 'imageStyleLeft',
+					title: 'Left aligned image',
+					icon: alignLeftIcon,
+					value: 'left',
+					className: 'image-style-left'
+				},
+
+				// This represents an image aligned to right.
+				{
+					name: 'imageStyleRight',
+					title: 'Right aligned image',
+					icon: alignRightIcon,
+					value: 'right',
+					className: 'image-style-right'
+				}
+			],
+
+			toolbar: [ 'imageTextAlternative', '|', 'imageStyleLeft', 'imageStyleFull', 'imageStyleRight' ]
+		}
+	} )
+	.then( editor => {
+		window.editorStyleCustom = editor;
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );

+ 14 - 0
packages/ckeditor5-image/docs/_snippets/features/image-style-custom.scss

@@ -0,0 +1,14 @@
+// Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+// For licensing, see LICENSE.md or http://ckeditor.com/license
+
+.image-style-left {
+    float: left;
+    width: 50%;
+    margin: 1em 1em 1em 0;
+}
+
+.image-style-right {
+    float: right;
+    width: 50%;
+    margin: 1em 0 1em 1em;
+}

+ 15 - 0
packages/ckeditor5-image/docs/_snippets/features/image-style.html

@@ -0,0 +1,15 @@
+<div id="snippet-image-style">
+	<p>This is full width image (default style):</p>
+
+	<figure class="image">
+		<img src="%BASE_PATH%/assets/img/fields.jpg" alt="Autumn fields">
+	</figure>
+
+	<p>This is side image:</p>
+
+	<figure class="image image-style-side">
+		<img src="%BASE_PATH%/assets/img/fields.jpg" alt="Autumn fields">
+	</figure>
+
+	<p>Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here.</p>
+</div>

+ 15 - 0
packages/ckeditor5-image/docs/_snippets/features/image-style.js

@@ -0,0 +1,15 @@
+/**
+ * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* globals ClassicEditor, console, window, document */
+
+ClassicEditor
+	.create( document.querySelector( '#snippet-image-style' ) )
+	.then( editor => {
+		window.editorStyle = editor;
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );

+ 34 - 14
packages/ckeditor5-image/docs/features/image.md

@@ -41,7 +41,7 @@ You can see the demo of an editor with the base image feature enabled below:
 
 ## Image contextual toolbar
 
-The {@link module:image/imagetoolbar~ImageToobar} plugin introduces contextual toolbar for images. The toolbar appears when an image is selected and can be configured to contain any buttons you want. Usually, these will be image-related options such as the text alternative (which is introduced by the base image plugin) button and [image styles buttons](#image-styles).
+The {@link module:image/imagetoolbar~ImageToolbar} plugin introduces contextual toolbar for images. The toolbar appears when an image is selected and can be configured to contain any buttons you want. Usually, these will be image-related options such as the text alternative (which is introduced by the base image plugin) button and [image styles buttons](#image-styles).
 
 See a demo of an editor with the contextual toolbar enabled:
 
@@ -51,7 +51,7 @@ The image toolbar is configured to contain the image text alternative button:
 
 ```js
 ClassicEditor
-	.create( {
+	.create( document.querySelector( '#editor' ), {
 		image: {
 			toolbar: [ 'imageTextAlternative' ]
 		}
@@ -105,7 +105,7 @@ A side image:
 
 Below you can see a demo of the editor with the image styles feature enabled. The default configuration is used. You can change the styles of images through the image's contextual toolbar.
 
-{@snippetTODO image-style}
+{@snippet features/image-style}
 
 ### Configuring image styles
 
@@ -119,20 +119,37 @@ import alignLeftIcon from '@ckeditor/ckeditor5-core/theme/icons/object-left.svg'
 import alignRightIcon from '@ckeditor/ckeditor5-core/theme/icons/object-right.svg';
 
 ClassicEditor
-	.create( {
+	.create( document.querySelector( '#editor' ), {
 		image: {
 			styles: [
 				// This option is equal to a situation where no style is applied.
-				{ name: 'imageStyleFull', title: 'Full size image', icon: fullSizeIcon, value: null },
+				{
+					name: 'imageStyleFull',
+					title: 'Full size image',
+					icon: fullSizeIcon,
+					value: null
+				},
 
 				// This represents an image aligned to left.
-				{ name: 'imageStyleLeft', title: 'Left aligned image', icon: alignLeftIcon, value: 'left', className: 'image-style-left' },
+				{
+					name: 'imageStyleLeft',
+					title: 'Left aligned image',
+					icon: alignLeftIcon,
+					value: 'left',
+					className: 'image-style-left'
+				},
 
 				// This represents an image aligned to right.
-				{ name: 'imageStyleRight', title: 'Right aligned image', icon: alignRightIcon, value: 'right', className: 'image-style-right' }
+				{
+					name: 'imageStyleRight',
+					title: 'Right aligned image',
+					icon: alignRightIcon,
+					value: 'right',
+					className: 'image-style-right'
+				}
 			],
 
-			toolbar: [ 'imageTextAlternative', '|', 'imageStyleFull', 'imageStyleLeft', 'imageStyleRight' ]
+			toolbar: [ 'imageTextAlternative', '|', 'imageStyleLeft', 'imageStyleFull', 'imageStyleRight' ]
 		}
 	} )
 	.then( ... )
@@ -141,17 +158,20 @@ ClassicEditor
 
 ```css
 .image-style-left {
-	float: left;
-	width: 50%;
+    float: left;
+    width: 50%;
+    margin: 1em 1em 1em 0;
 }
 
 .image-style-right {
-	float: right;
-	width: 50%;
+    float: right;
+    width: 50%;
+    margin: 1em 0 1em 1em;
 }
+
 ```
 
-{@snippetTODO image-style-custom}
+{@snippet features/image-style-custom}
 
 <info-box hint>
 	In the example above the options used represent simple "align left" and "align right" styles. Most text editors support left, center, right alignments, however, try not to think about CKEditor 5's image styles in this way. Try to understand what use cases the system needs to support and define semantical options accordingly. Defining useful and clear styles is one of the steps towards a good user experience and clear, portable output. For example, the "side image" style can be displayed as a floated image on wide screens and as a normal image on low resolution screens.
@@ -186,7 +206,7 @@ import ImageCaption from '@ckeditor/ckeditor5-image/src/imagecaption';
 import ImageStyle from '@ckeditor/ckeditor5-image/src/imagestyle';
 
 ClassicEditor
-	.create( {
+	.create( document.querySelector( '#editor' ), {
 		plugins: [ Image, ImageToolbar, ImageCaption, ImageStyle ],
 		image: {
 			toolbar: [ 'imageTextAlternative', '|', 'imageStyleFull', 'imageStyleSide' ]

+ 1 - 1
packages/ckeditor5-image/lang/translations/eo.po

@@ -27,4 +27,4 @@ msgstr "Alternativa teksto"
 
 msgctxt "Placeholder text for image caption displayed when caption is empty."
 msgid "Enter image caption"
-msgstr ""
+msgstr "Skribu klarigon pri la bildo"

+ 30 - 0
packages/ckeditor5-image/lang/translations/es.po

@@ -0,0 +1,30 @@
+# Copyright (c) Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+msgid ""
+msgstr ""
+"Language: es\n"
+"Language-Team: Spanish (https://www.transifex.com/ckeditor/teams/11143/es/)\n"
+"Plural-Forms: nplurals=2; plural=(n != 1);\n"
+
+msgctxt "Label for the image widget."
+msgid "image widget"
+msgstr "Imagen de widget"
+
+msgctxt "Label for the Side image option."
+msgid "Side image"
+msgstr ""
+
+msgctxt "Label for the Full size image option."
+msgid "Full size image"
+msgstr "Imagen tamaño completo"
+
+msgctxt "Label for the Change image text alternative button."
+msgid "Change image text alternative"
+msgstr "Cambiar el texto alternativo de la imagen"
+
+msgctxt "Label for the image text alternative input."
+msgid "Text alternative"
+msgstr "Texto alternativo"
+
+msgctxt "Placeholder text for image caption displayed when caption is empty."
+msgid "Enter image caption"
+msgstr ""

+ 30 - 0
packages/ckeditor5-image/lang/translations/gl.po

@@ -0,0 +1,30 @@
+# Copyright (c) Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+msgid ""
+msgstr ""
+"Language: gl\n"
+"Language-Team: Galician (https://www.transifex.com/ckeditor/teams/11143/gl/)\n"
+"Plural-Forms: nplurals=2; plural=(n != 1);\n"
+
+msgctxt "Label for the image widget."
+msgid "image widget"
+msgstr "Trebello de imaxe"
+
+msgctxt "Label for the Side image option."
+msgid "Side image"
+msgstr "Lado da imaxe"
+
+msgctxt "Label for the Full size image option."
+msgid "Full size image"
+msgstr "Imaxe a tamaño completo"
+
+msgctxt "Label for the Change image text alternative button."
+msgid "Change image text alternative"
+msgstr "Cambiar o texto alternativo da imaxe"
+
+msgctxt "Label for the image text alternative input."
+msgid "Text alternative"
+msgstr "Texto alternativo"
+
+msgctxt "Placeholder text for image caption displayed when caption is empty."
+msgid "Enter image caption"
+msgstr "Introduce o título da imaxe"

+ 30 - 0
packages/ckeditor5-image/lang/translations/ja.po

@@ -0,0 +1,30 @@
+# Copyright (c) Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+msgid ""
+msgstr ""
+"Language: ja\n"
+"Language-Team: Japanese (https://www.transifex.com/ckeditor/teams/11143/ja/)\n"
+"Plural-Forms: nplurals=1; plural=0;\n"
+
+msgctxt "Label for the image widget."
+msgid "image widget"
+msgstr "画像ウィジェット"
+
+msgctxt "Label for the Side image option."
+msgid "Side image"
+msgstr "サイドイメージ"
+
+msgctxt "Label for the Full size image option."
+msgid "Full size image"
+msgstr "フルサイズ画像"
+
+msgctxt "Label for the Change image text alternative button."
+msgid "Change image text alternative"
+msgstr "画像の代替テキストを変更"
+
+msgctxt "Label for the image text alternative input."
+msgid "Text alternative"
+msgstr "代替テキスト"
+
+msgctxt "Placeholder text for image caption displayed when caption is empty."
+msgid "Enter image caption"
+msgstr "画像の注釈を入力"

+ 1 - 1
packages/ckeditor5-image/lang/translations/pt.po

@@ -27,4 +27,4 @@ msgstr ""
 
 msgctxt "Placeholder text for image caption displayed when caption is empty."
 msgid "Enter image caption"
-msgstr ""
+msgstr "Indicar legenda da imagem"

+ 3 - 3
packages/ckeditor5-image/lang/translations/zh-cn.po

@@ -19,12 +19,12 @@ msgstr "全尺寸图像"
 
 msgctxt "Label for the Change image text alternative button."
 msgid "Change image text alternative"
-msgstr ""
+msgstr "更改图像替换文本"
 
 msgctxt "Label for the image text alternative input."
 msgid "Text alternative"
-msgstr ""
+msgstr "替换文本"
 
 msgctxt "Placeholder text for image caption displayed when caption is empty."
 msgid "Enter image caption"
-msgstr ""
+msgstr "输入图像标题"

+ 30 - 0
packages/ckeditor5-image/lang/translations/zh.po

@@ -0,0 +1,30 @@
+# Copyright (c) Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+msgid ""
+msgstr ""
+"Language: zh_TW\n"
+"Language-Team: Chinese (Taiwan) (https://www.transifex.com/ckeditor/teams/11143/zh_TW/)\n"
+"Plural-Forms: nplurals=1; plural=0;\n"
+
+msgctxt "Label for the image widget."
+msgid "image widget"
+msgstr "圖片小工具"
+
+msgctxt "Label for the Side image option."
+msgid "Side image"
+msgstr "側邊圖片"
+
+msgctxt "Label for the Full size image option."
+msgid "Full size image"
+msgstr "完整大小圖片"
+
+msgctxt "Label for the Change image text alternative button."
+msgid "Change image text alternative"
+msgstr "變更圖片的文字替代"
+
+msgctxt "Label for the image text alternative input."
+msgid "Text alternative"
+msgstr "文字替代"
+
+msgctxt "Placeholder text for image caption displayed when caption is empty."
+msgid "Enter image caption"
+msgstr "輸入圖片說明"

+ 14 - 14
packages/ckeditor5-image/package.json

@@ -1,25 +1,25 @@
 {
   "name": "@ckeditor/ckeditor5-image",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "Image feature for CKEditor 5.",
   "keywords": [],
   "dependencies": {
-    "@ckeditor/ckeditor5-core": "^0.8.1",
-    "@ckeditor/ckeditor5-engine": "^0.10.0",
-    "@ckeditor/ckeditor5-ui": "^0.9.0",
-    "@ckeditor/ckeditor5-utils": "^0.9.1",
-    "@ckeditor/ckeditor5-theme-lark": "^0.8.0",
-    "@ckeditor/ckeditor5-widget": "^0.1.1"
+    "@ckeditor/ckeditor5-core": "^0.9.0",
+    "@ckeditor/ckeditor5-engine": "^0.11.0",
+    "@ckeditor/ckeditor5-ui": "^0.10.0",
+    "@ckeditor/ckeditor5-utils": "^0.10.0",
+    "@ckeditor/ckeditor5-theme-lark": "^0.9.0",
+    "@ckeditor/ckeditor5-widget": "^0.2.0"
   },
   "devDependencies": {
-    "@ckeditor/ckeditor5-clipboard": "^0.6.0",
+    "@ckeditor/ckeditor5-clipboard": "^0.7.0",
     "@ckeditor/ckeditor5-dev-lint": "^3.1.0",
-    "@ckeditor/ckeditor5-editor-classic": "^0.7.3",
-    "@ckeditor/ckeditor5-enter": "^0.9.1",
-    "@ckeditor/ckeditor5-heading": "^0.9.1",
-    "@ckeditor/ckeditor5-paragraph": "^0.8.0",
-    "@ckeditor/ckeditor5-typing": "^0.9.1",
-    "@ckeditor/ckeditor5-undo": "^0.8.1",
+    "@ckeditor/ckeditor5-editor-classic": "^0.8.0",
+    "@ckeditor/ckeditor5-enter": "^0.10.0",
+    "@ckeditor/ckeditor5-heading": "^0.10.0",
+    "@ckeditor/ckeditor5-paragraph": "^0.9.0",
+    "@ckeditor/ckeditor5-typing": "^0.10.0",
+    "@ckeditor/ckeditor5-undo": "^0.9.0",
     "eslint-config-ckeditor5": "^1.0.5",
     "gulp": "^3.9.1",
     "guppy-pre-commit": "^0.4.0"