Merge pull request #15362 from ckeditor/cc/epic/5603-ckbox-image-editing

Feature (ckbox): Integrates CKBox Image Editing feature with the editor.
ckeditor · Nov 22, 2023 · 11f18ac · 11f18ac
2 parents 7dcbbea + 7cfae97
commit 11f18ac
Show file tree

Hide file tree

Showing 193 changed files with 3,128 additions and 455 deletions.
diff --git a/docs/_snippets/features/build-image-upload-source.js b/docs/_snippets/features/build-image-upload-source.js
@@ -5,7 +5,7 @@
 
 /* globals window */
 
-import { CKBox } from '@ckeditor/ckeditor5-ckbox';
+import { CKBox, CKBoxImageEdit } from '@ckeditor/ckeditor5-ckbox';
 import { PictureEditing, ImageResize, AutoImage } from '@ckeditor/ckeditor5-image';
 import { LinkImage } from '@ckeditor/ckeditor5-link';
 import { Alignment } from '@ckeditor/ckeditor5-alignment';
@@ -19,7 +19,8 @@ ClassicEditor.builtinPlugins.push(
 	AutoImage,
 	LinkImage,
 	Alignment,
-	CKBox
+	CKBox,
+	CKBoxImageEdit
 );
 
 window.ClassicEditor = ClassicEditor;
diff --git a/docs/_snippets/features/build-toolbar-source.js b/docs/_snippets/features/build-toolbar-source.js
@@ -6,6 +6,7 @@
 /* globals window */
 
 import { Code, Strikethrough, Subscript, Superscript, Underline } from '@ckeditor/ckeditor5-basic-styles';
+import { CKBox, CKBoxImageEdit } from '@ckeditor/ckeditor5-ckbox';
 import { TodoList } from '@ckeditor/ckeditor5-list';
 import { Alignment } from '@ckeditor/ckeditor5-alignment';
 import { TableProperties, TableCellProperties } from '@ckeditor/ckeditor5-table';
@@ -30,5 +31,7 @@ ClassicEditor.builtinPlugins.push( IndentBlock );
 ClassicEditor.builtinPlugins.push( Indent );
 ClassicEditor.builtinPlugins.push( Code );
 ClassicEditor.builtinPlugins.push( TodoList );
+ClassicEditor.builtinPlugins.push( CKBox );
+ClassicEditor.builtinPlugins.push( CKBoxImageEdit );
 
 window.ClassicEditor = ClassicEditor;
diff --git a/docs/_snippets/features/build-ui-language-source.html b/docs/_snippets/features/build-ui-language-source.html
@@ -0,0 +1 @@
+<script src="https://cdn.ckbox.io/ckbox/latest/ckbox.js"></script>
diff --git a/docs/_snippets/features/build-ui-language-source.js b/docs/_snippets/features/build-ui-language-source.js
@@ -8,8 +8,15 @@
 /* config { "additionalLanguages": [ "ar", "es" ] } */
 
 import { Superscript } from '@ckeditor/ckeditor5-basic-styles';
+import { CKBox, CKBoxImageEdit } from '@ckeditor/ckeditor5-ckbox';
+import { PictureEditing, ImageResize, AutoImage } from '@ckeditor/ckeditor5-image';
 import ClassicEditor from '../build-classic';
 
 ClassicEditor.builtinPlugins.push( Superscript );
+ClassicEditor.builtinPlugins.push( CKBox );
+ClassicEditor.builtinPlugins.push( CKBoxImageEdit );
+ClassicEditor.builtinPlugins.push( PictureEditing );
+ClassicEditor.builtinPlugins.push( ImageResize );
+ClassicEditor.builtinPlugins.push( AutoImage );
 
 window.ClassicEditor = ClassicEditor;
diff --git a/docs/_snippets/features/image-upload.html b/docs/_snippets/features/image-upload.html
@@ -1,3 +1,4 @@
+<script src="https://cdn.ckbox.io/ckbox/latest/ckbox.js"></script>
 <div class="ck ck-content" id="snippet-image-upload">
 	<h2>Uploading images</h2>
 	<p>To upload an image, do the following:</p>

diff --git a/docs/_snippets/features/image-upload.js b/docs/_snippets/features/image-upload.js
@@ -29,7 +29,9 @@ ClassicEditor
 				'|',
 				'resizeImage:25',
 				'resizeImage:50',
-				'resizeImage:original'
+				'resizeImage:original',
+				'|',
+				'ckboxImageEdit'
 			],
 			resizeOptions: [
 				{
@@ -56,7 +58,8 @@ ClassicEditor
 			}
 		},
 		ckbox: {
-			tokenUrl: TOKEN_URL
+			tokenUrl: TOKEN_URL,
+			forceDemoLabel: true
 		}
 	} )
 	.then( editor => {

diff --git a/docs/_snippets/features/mathtype.html b/docs/_snippets/features/mathtype.html
@@ -1,3 +1,4 @@
+<script src="https://cdn.ckbox.io/ckbox/latest/ckbox.js"></script>
 <style>
 	.editor-icon__image[alt="MathType"],
 	.editor-icon__image[alt="ChemType"] {

diff --git a/docs/_snippets/features/mathtype.js b/docs/_snippets/features/mathtype.js
@@ -10,13 +10,17 @@ import { CloudServices } from '@ckeditor/ckeditor5-cloud-services';
 import { CS_CONFIG } from '@ckeditor/ckeditor5-cloud-services/tests/_utils/cloud-services-config';
 import ArticlePluginSet from '@ckeditor/ckeditor5-core/tests/_utils/articlepluginset';
 import { EasyImage } from '@ckeditor/ckeditor5-easy-image';
-import { ImageUpload } from '@ckeditor/ckeditor5-image';
+import { ImageUpload, PictureEditing } from '@ckeditor/ckeditor5-image';
 import MathType from '@wiris/mathtype-ckeditor5';
+import { CKBox, CKBoxImageEdit } from '@ckeditor/ckeditor5-ckbox';
 
 ClassicEditor
 	.create( document.querySelector( '#mathtype-editor' ), {
 		plugins: [
 			ArticlePluginSet,
+			CKBox,
+			CKBoxImageEdit,
+			PictureEditing,
 			EasyImage,
 			ImageUpload,
 			CloudServices,
@@ -42,7 +46,9 @@ ClassicEditor
 				'imageStyle:breakText',
 				'|',
 				'toggleImageCaption',
-				'imageTextAlternative'
+				'imageTextAlternative',
+				'|',
+				'ckboxImageEdit'
 			]
 		},
 		table: {

diff --git a/docs/_snippets/features/read-only-build.js b/docs/_snippets/features/read-only-build.js
@@ -8,10 +8,17 @@
 import { FindAndReplace } from '@ckeditor/ckeditor5-find-and-replace';
 import { ExportPdf } from '@ckeditor/ckeditor5-export-pdf';
 import { ExportWord } from '@ckeditor/ckeditor5-export-word';
+import { CKBox, CKBoxImageEdit } from '@ckeditor/ckeditor5-ckbox';
+import { PictureEditing, ImageResize, AutoImage } from '@ckeditor/ckeditor5-image';
 import ClassicEditor from '../build-classic';
 
 ClassicEditor.builtinPlugins.push( FindAndReplace );
 ClassicEditor.builtinPlugins.push( ExportPdf );
 ClassicEditor.builtinPlugins.push( ExportWord );
+ClassicEditor.builtinPlugins.push( CKBox );
+ClassicEditor.builtinPlugins.push( CKBoxImageEdit );
+ClassicEditor.builtinPlugins.push( PictureEditing );
+ClassicEditor.builtinPlugins.push( ImageResize );
+ClassicEditor.builtinPlugins.push( AutoImage );
 
 window.ClassicEditor = ClassicEditor;
diff --git a/docs/_snippets/features/read-only-hide-toolbar.js b/docs/_snippets/features/read-only-hide-toolbar.js
@@ -19,6 +19,12 @@ ClassicEditor
 				'|', 'bulletedList', 'numberedList', 'outdent', 'indent'
 			]
 		},
+		image: {
+			toolbar: [
+				'imageStyle:inline', 'imageStyle:block', 'imageStyle:side', '|',
+				'toggleImageCaption', 'imageTextAlternative', 'ckboxImageEdit'
+			]
+		},
 		ui: {
 			viewportOffset: {
 				top: window.getViewportTopOffsetConfig()

diff --git a/docs/_snippets/features/read-only.js b/docs/_snippets/features/read-only.js
@@ -19,6 +19,12 @@ ClassicEditor
 				'|', 'bulletedList', 'numberedList', 'outdent', 'indent'
 			]
 		},
+		image: {
+			toolbar: [
+				'imageStyle:inline', 'imageStyle:block', 'imageStyle:side', '|',
+				'toggleImageCaption', 'imageTextAlternative', 'ckboxImageEdit'
+			]
+		},
 		ui: {
 			viewportOffset: {
 				top: window.getViewportTopOffsetConfig()

diff --git a/docs/_snippets/features/toolbar-basic.js b/docs/_snippets/features/toolbar-basic.js
@@ -18,6 +18,10 @@ ClassicEditor
 				'|', 'bulletedList', 'numberedList', 'outdent', 'indent'
 			]
 		},
+		image: {
+			toolbar: [ 'imageStyle:inline', 'imageStyle:block', 'imageStyle:side',
+				'|', 'toggleImageCaption', 'imageTextAlternative', '|', 'ckboxImageEdit' ]
+		},
 		cloudServices: CS_CONFIG,
 		ui: {
 			viewportOffset: {

diff --git a/docs/_snippets/features/toolbar-breakpoint.html b/docs/_snippets/features/toolbar-breakpoint.html
@@ -1,3 +1,4 @@
+<script src="https://cdn.ckbox.io/ckbox/latest/ckbox.js"></script>
 <div id="toolbar-breakpoint">
 	<h3>Seedless plants</h3>
 	<p>Plants in this group, called <em>cryptogams</em>, do not produce seeds.</p>

diff --git a/docs/_snippets/features/toolbar-breakpoint.js b/docs/_snippets/features/toolbar-breakpoint.js
@@ -28,7 +28,8 @@ ClassicEditor
 			}
 		},
 		image: {
-			toolbar: [ 'imageStyle:inline', 'imageStyle:block', 'imageStyle:side', '|', 'toggleImageCaption', 'imageTextAlternative' ]
+			toolbar: [ 'imageStyle:inline', 'imageStyle:block', 'imageStyle:side',
+				'|', 'toggleImageCaption', 'imageTextAlternative', '|', 'ckboxImageEdit' ]
 		},
 		codeBlock: {
 			languages: [

diff --git a/docs/_snippets/features/toolbar-grouping.html b/docs/_snippets/features/toolbar-grouping.html
@@ -1,3 +1,4 @@
+<script src="https://cdn.ckbox.io/ckbox/latest/ckbox.js"></script>
 <div id="toolbar-grouping">
 	<h3>What doesn’t kill me…</h3>
 	<p>

diff --git a/docs/_snippets/features/toolbar-grouping.js b/docs/_snippets/features/toolbar-grouping.js
@@ -25,7 +25,8 @@ ClassicEditor
 			}
 		},
 		image: {
-			toolbar: [ 'imageStyle:inline', 'imageStyle:block', 'imageStyle:side', '|', 'toggleImageCaption', 'imageTextAlternative' ]
+			toolbar: [ 'imageStyle:inline', 'imageStyle:block', 'imageStyle:side',
+				'|', 'toggleImageCaption', 'imageTextAlternative', '|', 'ckboxImageEdit' ]
 		},
 		codeBlock: {
 			languages: [

diff --git a/docs/_snippets/features/toolbar-nested-icon.html b/docs/_snippets/features/toolbar-nested-icon.html
@@ -1,3 +1,4 @@
+<script src="https://cdn.ckbox.io/ckbox/latest/ckbox.js"></script>
 <div id="toolbar-nested-icon">
 	<h5>Conifers</h5>
 	<p>

diff --git a/docs/_snippets/features/toolbar-nested-icon.js b/docs/_snippets/features/toolbar-nested-icon.js
@@ -42,7 +42,8 @@ ClassicEditor
 			}
 		],
 		image: {
-			toolbar: [ 'imageStyle:inline', 'imageStyle:block', 'imageStyle:side', '|', 'toggleImageCaption', 'imageTextAlternative' ]
+			toolbar: [ 'imageStyle:inline', 'imageStyle:block', 'imageStyle:side',
+				'|', 'toggleImageCaption', 'imageTextAlternative', '|', 'ckboxImageEdit' ]
 		},
 		cloudServices: CS_CONFIG,
 		ui: {

diff --git a/docs/_snippets/features/toolbar-nested-label.html b/docs/_snippets/features/toolbar-nested-label.html
@@ -1,3 +1,4 @@
+<script src="https://cdn.ckbox.io/ckbox/latest/ckbox.js"></script>
 <div id="toolbar-nested-label">
 	<h3>Seed-producing plants</h3>
 	<p>

diff --git a/docs/_snippets/features/toolbar-nested-label.js b/docs/_snippets/features/toolbar-nested-label.js
@@ -24,6 +24,10 @@ ClassicEditor
 				items: [ 'bold', 'italic', 'strikethrough', 'superscript', 'subscript' ]
 			}
 		],
+		image: {
+			toolbar: [ 'imageStyle:inline', 'imageStyle:block', 'imageStyle:side',
+				'|', 'toggleImageCaption', 'imageTextAlternative', '|', 'ckboxImageEdit' ]
+		},
 		cloudServices: CS_CONFIG,
 		ui: {
 			viewportOffset: {

diff --git a/docs/_snippets/features/toolbar-nested-simple.html b/docs/_snippets/features/toolbar-nested-simple.html
@@ -1,3 +1,4 @@
+<script src="https://cdn.ckbox.io/ckbox/latest/ckbox.js"></script>
 <div id="toolbar-nested-simple">
 	<h4>Mosses and liverworts</h4>
 	<p>

diff --git a/docs/_snippets/features/toolbar-nested-simple.js b/docs/_snippets/features/toolbar-nested-simple.js
@@ -31,6 +31,10 @@ ClassicEditor
 				items: [ 'bulletedList', 'numberedList', 'todoList' ]
 			}
 		],
+		image: {
+			toolbar: [ 'imageStyle:inline', 'imageStyle:block', 'imageStyle:side',
+				'|', 'toggleImageCaption', 'imageTextAlternative', '|', 'ckboxImageEdit' ]
+		},
 		cloudServices: CS_CONFIG,
 		ui: {
 			viewportOffset: {

diff --git a/docs/_snippets/features/toolbar-nested-tooltip.html b/docs/_snippets/features/toolbar-nested-tooltip.html
@@ -1,3 +1,4 @@
+<script src="https://cdn.ckbox.io/ckbox/latest/ckbox.js"></script>
 <div id="toolbar-nested-tooltip">
 	<h4>Flowering plants</h4>
 	<p>

diff --git a/docs/_snippets/features/toolbar-nested-tooltip.js b/docs/_snippets/features/toolbar-nested-tooltip.js
@@ -24,6 +24,10 @@ ClassicEditor
 				items: [ 'uploadImage', 'insertTable' ]
 			}
 		],
+		image: {
+			toolbar: [ 'imageStyle:inline', 'imageStyle:block', 'imageStyle:side',
+				'|', 'toggleImageCaption', 'imageTextAlternative', '|', 'ckboxImageEdit' ]
+		},
 		cloudServices: CS_CONFIG,
 		ui: {
 			viewportOffset: {

diff --git a/docs/_snippets/features/toolbar-separator.html b/docs/_snippets/features/toolbar-separator.html
@@ -1,3 +1,4 @@
+<script src="https://cdn.ckbox.io/ckbox/latest/ckbox.js"></script>
 <div id="toolbar-separator">
 	<h3>A brief history of a tiny beast</h3>
 	<p>

diff --git a/docs/_snippets/features/toolbar-separator.js b/docs/_snippets/features/toolbar-separator.js
@@ -18,6 +18,10 @@ ClassicEditor
 				'|', 'bulletedList', 'numberedList', 'outdent', 'indent'
 			]
 		},
+		image: {
+			toolbar: [ 'imageStyle:inline', 'imageStyle:block', 'imageStyle:side',
+				'|', 'toggleImageCaption', 'imageTextAlternative', '|', 'ckboxImageEdit' ]
+		},
 		cloudServices: CS_CONFIG,
 		ui: {
 			viewportOffset: {

diff --git a/docs/_snippets/features/toolbar-wrapping.html b/docs/_snippets/features/toolbar-wrapping.html
@@ -1,3 +1,4 @@
+<script src="https://cdn.ckbox.io/ckbox/latest/ckbox.js"></script>
 <div id="toolbar-wrapping">
 	<h2>The plant kingdom</h2>
 	<p>The plant kingdom is a diverse group of organisms that includes both tiny algae and giant sequoias. Despite this diversity, all plants have a few things in common.</p>

diff --git a/docs/_snippets/features/toolbar-wrapping.js b/docs/_snippets/features/toolbar-wrapping.js
@@ -27,7 +27,8 @@ ClassicEditor
 			}
 		},
 		image: {
-			toolbar: [ 'imageStyle:inline', 'imageStyle:block', 'imageStyle:side', '|', 'toggleImageCaption', 'imageTextAlternative' ]
+			toolbar: [ 'imageStyle:inline', 'imageStyle:block', 'imageStyle:side',
+				'|', 'toggleImageCaption', 'imageTextAlternative', '|', 'ckboxImageEdit' ]
 		},
 		codeBlock: {
 			languages: [

diff --git a/docs/_snippets/features/ui-language-content.js b/docs/_snippets/features/ui-language-content.js
@@ -22,6 +22,12 @@ ClassicEditor
 				'|', 'bulletedList', 'numberedList', 'outdent', 'indent'
 			]
 		},
+		image: {
+			toolbar: [
+				'imageStyle:inline', 'imageStyle:block', 'imageStyle:side', '|',
+				'toggleImageCaption', 'imageTextAlternative', 'ckboxImageEdit'
+			]
+		},
 		ui: {
 			viewportOffset: {
 				top: window.getViewportTopOffsetConfig()

diff --git a/docs/_snippets/features/ui-language-rtl.js b/docs/_snippets/features/ui-language-rtl.js
@@ -20,6 +20,12 @@ ClassicEditor
 				'|', 'bulletedList', 'numberedList', 'outdent', 'indent'
 			]
 		},
+		image: {
+			toolbar: [
+				'imageStyle:inline', 'imageStyle:block', 'imageStyle:side', '|',
+				'toggleImageCaption', 'imageTextAlternative', 'ckboxImageEdit'
+			]
+		},
 		ui: {
 			viewportOffset: {
 				top: window.getViewportTopOffsetConfig()

diff --git a/docs/_snippets/features/ui-language.js b/docs/_snippets/features/ui-language.js
@@ -20,6 +20,12 @@ ClassicEditor
 				'|', 'bulletedList', 'numberedList', 'outdent', 'indent'
 			]
 		},
+		image: {
+			toolbar: [
+				'imageStyle:inline', 'imageStyle:block', 'imageStyle:side', '|',
+				'toggleImageCaption', 'imageTextAlternative', 'ckboxImageEdit'
+			]
+		},
 		ui: {
 			viewportOffset: {
 				top: window.getViewportTopOffsetConfig()

diff --git a/docs/_snippets/features/wproofreader.html b/docs/_snippets/features/wproofreader.html
@@ -1,3 +1,4 @@
+<script src="https://cdn.ckbox.io/ckbox/latest/ckbox.js"></script>
 <div class="ck ck-content" id="snippet-wproofreader">
 	<p>Warsaw is the capital adn largest city of Poland. The metropolis stands on the Vistula River in east-central Poland and its population is officially estimatd at 1.8 million residents within a greater metropolitan area of 3.1 million residents, which makes Warsaw the 7th most-populous capital city in the European Union. Warsaw is an alpha-global city, a major international tourist destination, and a significaant cultural, political, and economic hub. Its historical Old Town was designated a UNESCO World Heritage Site.</p>
 

diff --git a/docs/_snippets/features/wproofreader.js b/docs/_snippets/features/wproofreader.js
@@ -8,15 +8,15 @@
 import { ClassicEditor } from '@ckeditor/ckeditor5-editor-classic';
 import { CloudServices } from '@ckeditor/ckeditor5-cloud-services';
 import ArticlePluginSet from '@ckeditor/ckeditor5-core/tests/_utils/articlepluginset';
-import { EasyImage } from '@ckeditor/ckeditor5-easy-image';
-import { ImageUpload } from '@ckeditor/ckeditor5-image';
+import { CKBox, CKBoxImageEdit } from '@ckeditor/ckeditor5-ckbox';
+import { PictureEditing, ImageUpload } from '@ckeditor/ckeditor5-image';
 import WProofreader from '@webspellchecker/wproofreader-ckeditor5/src/wproofreader';
 
 import { CS_CONFIG } from '@ckeditor/ckeditor5-cloud-services/tests/_utils/cloud-services-config';
 
 ClassicEditor
 	.create( document.querySelector( '#snippet-wproofreader' ), {
-		plugins: [ ArticlePluginSet, EasyImage, ImageUpload, CloudServices, WProofreader ],
+		plugins: [ ArticlePluginSet, PictureEditing, CKBox, CKBoxImageEdit, ImageUpload, CloudServices, WProofreader ],
 		wproofreader: {
 			serviceId: '1:Eebp63-lWHbt2-ASpHy4-AYUpy2-fo3mk4-sKrza1-NsuXy4-I1XZC2-0u2F54-aqYWd1-l3Qf14-umd',
 			lang: 'auto',
@@ -40,12 +40,8 @@ ClassicEditor
 		},
 		image: {
 			toolbar: [
-				'imageStyle:inline',
-				'imageStyle:wrapText',
-				'imageStyle:breakText',
-				'|',
-				'toggleImageCaption',
-				'imageTextAlternative'
+				'imageStyle:inline', 'imageStyle:block', 'imageStyle:side', '|',
+				'toggleImageCaption', 'imageTextAlternative', 'ckboxImageEdit'
 			]
 		},
 		table: {

diff --git a/docs/_snippets/installation/getting-and-setting-data/build-autosave-source.js b/docs/_snippets/installation/getting-and-setting-data/build-autosave-source.js
@@ -6,8 +6,15 @@
 /* globals window */
 
 import { Autosave } from '@ckeditor/ckeditor5-autosave';
+import { CKBox, CKBoxImageEdit } from '@ckeditor/ckeditor5-ckbox';
+import { PictureEditing, ImageResize, AutoImage } from '@ckeditor/ckeditor5-image';
 import ClassicEditor from '../../build-classic';
 
 ClassicEditor.builtinPlugins.push( Autosave );
+ClassicEditor.builtinPlugins.push( CKBox );
+ClassicEditor.builtinPlugins.push( CKBoxImageEdit );
+ClassicEditor.builtinPlugins.push( PictureEditing );
+ClassicEditor.builtinPlugins.push( ImageResize );
+ClassicEditor.builtinPlugins.push( AutoImage );
 
 window.ClassicEditor = ClassicEditor;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		<script src="https://cdn.ckbox.io/ckbox/latest/ckbox.js"></script>