Merge pull request #8394 from ckeditor/i/8033

Other: Unified buttons, and commands naming convention. Old values are available as aliases. Read more about those changes in the [Code style](TODO:URL_TO_OUR_DOCS) guide. Closes #8033. Changes in toolbar buttons (before → after): - `imageUpload` → `uploadImage` - `imageResize` → `resizeImage` - `imageInsert` → `insertImage` - `imageResize:*` → `resizeImage:*` Changes in command names: - `imageInsert` → `insertImage` - `imageUpload` → `uploadImage` - `imageResize` → `resizeImage` - `forwardDelete` → `deleteForward` - `todoListCheck` → `checkTodoList` MAJOR BREAKING CHANGE (list): The following module `list/todolistcheckedcommand~TodoListCheckCommand` has been moved to `list/checktodolistcommand~CheckTodoListCommand`. MAJOR BREAKING CHANGE (image): The following modules have been moved (before → after) - `image/image/imageinsertcommand~ImageInsertCommand` → `image/image/insertimagecommand~InsertImageCommand` - `image/imageresize/imageresizecommand~ImageResizeCommand` → `image/imageresize/resizeimagecommand~ResizeImageCommand` - `image/imageupload/imageuploadcommand~ImageUploadCommand` → `image/imageupload/uploadimagecommand~UploadImageCommand`
ckeditor · Feb 12, 2021 · e0fcb17 · e0fcb17
2 parents e0d15a4 + 9f70aa6
commit e0fcb17
Show file tree

Hide file tree

Showing 105 changed files with 520 additions and 392 deletions.
diff --git a/docs/_snippets/examples/inline-editor.js b/docs/_snippets/examples/inline-editor.js
@@ -38,17 +38,17 @@ Array.from( inlineInjectElements ).forEach( inlineElement => {
 		config.image = {
 			resizeOptions: [
 				{
-					name: 'imageResize:original',
+					name: 'resizeImage:original',
 					label: 'Original',
 					value: null
 				},
 				{
-					name: 'imageResize:50',
+					name: 'resizeImage:50',
 					label: '50%',
 					value: '50'
 				},
 				{
-					name: 'imageResize:75',
+					name: 'resizeImage:75',
 					label: '75%',
 					value: '75'
 				}
@@ -59,7 +59,7 @@ Array.from( inlineInjectElements ).forEach( inlineElement => {
 				'imageStyle:full',
 				'imageStyle:alignRight',
 				'|',
-				'imageResize',
+				'resizeImage',
 				'|',
 				'imageTextAlternative'
 			]

diff --git a/docs/_snippets/examples/multi-root-editor.js b/docs/_snippets/examples/multi-root-editor.js
@@ -391,7 +391,7 @@ MultirootEditor
 	}, {
 		plugins: [ Essentials, Paragraph, Heading, Bold, Italic, List, Link, BlockQuote, Image, ImageCaption,
 			ImageStyle, ImageToolbar, ImageUpload, Table, TableToolbar, MediaEmbed, EasyImage, CloudServices ],
-		toolbar: [ 'heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'imageUpload', 'blockQuote',
+		toolbar: [ 'heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'uploadImage', 'blockQuote',
 			'insertTable', 'mediaEmbed', 'undo', 'redo' ],
 		image: {
 			toolbar: [ 'imageTextAlternative', '|', 'imageStyle:full',

diff --git a/docs/_snippets/features/toolbar-breakpoint.js b/docs/_snippets/features/toolbar-breakpoint.js
@@ -20,7 +20,7 @@ ClassicEditor
 				'code', 'codeBlock', '|',
 				'insertTable', '|',
 				'outdent', 'indent', '|',
-				'imageUpload', 'blockQuote', '|',
+				'uploadImage', 'blockQuote', '|',
 				'undo', 'redo'
 			],
 			shouldNotGroupWhenFull: true,

diff --git a/docs/_snippets/features/toolbar-grouping.js b/docs/_snippets/features/toolbar-grouping.js
@@ -17,7 +17,7 @@ ClassicEditor
 				'bulletedList', 'numberedList', 'todoList', '|',
 				'code', 'codeBlock', '|',
 				'outdent', 'indent', '|',
-				'imageUpload', 'blockQuote', '|',
+				'uploadImage', 'blockQuote', '|',
 				'undo', 'redo'
 			],
 			viewportTopOffset: window.getViewportTopOffsetConfig()

diff --git a/docs/_snippets/features/toolbar-wrapping.js b/docs/_snippets/features/toolbar-wrapping.js
@@ -21,7 +21,7 @@ ClassicEditor
 				'bulletedList', 'numberedList', 'todoList', '|',
 				'code', 'codeBlock', '|',
 				'insertTable', '|',
-				'imageUpload', 'blockQuote', '|',
+				'uploadImage', 'blockQuote', '|',
 				'undo', 'redo'
 			],
 			shouldNotGroupWhenFull: true,

diff --git a/docs/builds/guides/development/dll-builds.md b/docs/builds/guides/development/dll-builds.md
@@ -179,7 +179,7 @@ An example classic editor build configuration using dll bundles:
 				'indent',
 				'outdent',
 				'|',
-				'imageUpload',
+				'uploadImage',
 				'blockQuote',
 				'insertTable',
 				'mediaEmbed',

diff --git a/docs/builds/guides/integration/advanced-setup.md b/docs/builds/guides/integration/advanced-setup.md
@@ -257,7 +257,7 @@ ClassicEditor.defaultConfig = {
 			'link',
 			'bulletedList',
 			'numberedList',
-			'imageUpload',
+			'uploadImage',
 			'blockQuote',
 			'undo',
 			'redo'
@@ -344,7 +344,7 @@ ClassicEditor
 			'link',
 			'bulletedList',
 			'numberedList',
-			'imageUpload',
+			'uploadImage',
 			'blockQuote',
 			'undo',
 			'redo'

diff --git a/docs/builds/guides/integration/installing-plugins.md b/docs/builds/guides/integration/installing-plugins.md
@@ -106,7 +106,7 @@ ClassicEditor.defaultConfig = {
 			'link',
 			'bulletedList',
 			'numberedList',
-			'imageUpload',
+			'uploadImage',
 			'blockQuote',
 			'undo',
 			'redo'

diff --git a/docs/features/toolbar.md b/docs/features/toolbar.md
@@ -112,7 +112,7 @@ toolbar: {
 		'bulletedList', 'numberedList', 'todoList', '|',
 		'code', 'codeBlock', '|',
 		'insertTable', '|',
-		'imageUpload', 'blockQuote', '|',
+		'uploadImage', 'blockQuote', '|',
 		'undo', 'redo'
     ],
     shouldNotGroupWhenFull: true
@@ -140,7 +140,7 @@ toolbar: {
 		'code', 'codeBlock', '|',
 		'insertTable', '|',
 		'outdent', 'indent', '|',
-		'imageUpload', 'blockQuote', '|',
+		'uploadImage', 'blockQuote', '|',
 		'undo', 'redo'
     ],
     shouldNotGroupWhenFull: true

diff --git a/docs/framework/guides/contributing/code-style.md b/docs/framework/guides/contributing/code-style.md
@@ -520,7 +520,7 @@ There are some special rules and tips for tests.
    * Use [sinon-chai assertions](https://www.chaijs.com/plugins/sinon-chai/)
 
 		```js
-		expect( myMethodSpy ).to.be.calledOnce 
+		expect( myMethodSpy ).to.be.calledOnce
 		// expected myMethod to be called once but was called twice
 		```
 
@@ -604,6 +604,59 @@ this.canObserve;
 this.mustRefresh;
 ```
 
+### Buttons, Commands and Plugins
+
+#### Buttons
+
+All buttons should follow the **verb + noun** or the **noun** convention. Examples:
+
+* The **verb + noun** convention:
+	* `insertTable`
+	* `selectAll`
+	* `uploadImage`
+* The **noun** convention:
+	* `bold`
+	* `mediaEmbed`
+	* `restrictedEditing`
+
+#### Commands
+
+As for commands it is trickier, because there are many more possible combinations of their names than there are for buttons. Examples:
+
+* The **feature-related** convention:
+	* **noun-based** case:
+		* `codeBlock`
+		* `fontColor`
+		* `shiftEnter`
+	* **verb-based** case:
+		* `indent`
+		* `removeFormat`
+		* `selectAll`
+* The **feature + sub-feature** convention:
+	* `imageStyle`
+	* `imageTextAlternative`
+	* `tableAlignment`
+
+For commands, the **noun + verb** (or the **feature + action**) naming conventions **should not be used**, because it does not sound natural (_what do_ vs. _do what_). In most cases the proper name should start with the **action** followed by the **feature** name:
+
+* `checkTodoList`
+* `insertTable`
+* `uploadImage`
+
+#### Plugins
+
+Plugins should follow the **feature** or the **feature + sub-feature** convention. Examples:
+* The **feature** convention:
+	* `Bold`
+	* `Paragraph`
+	* `SpecialCharacters`
+* The **feature + sub-feature** convention:
+	* `ImageResize`
+	* `ListStyle`
+	* `TableClipboard`
+
+Plugins must be named in [UpperCamelCase](http://en.wikipedia.org/wiki/CamelCase).
+
 ### Shortcuts
 
 For local variables **commonly accepted short versions** for long names are fine:

diff --git a/docs/framework/guides/custom-editor-creator.md b/docs/framework/guides/custom-editor-creator.md
@@ -439,7 +439,7 @@ MultirootEditor
 	}, {
 		plugins: [ Essentials, Paragraph, Heading, Bold, Italic, List, Link, BlockQuote, Image, ImageCaption,
 			ImageStyle, ImageToolbar, ImageUpload, Table, TableToolbar, MediaEmbed, EasyImage ],
-		toolbar: [ 'heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'imageUpload', 'blockQuote',
+		toolbar: [ 'heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'uploadImage', 'blockQuote',
 			'insertTable', 'mediaEmbed', 'undo', 'redo' ],
 		image: {
 			toolbar: [ 'imageTextAlternative', '|', 'imageStyle:alignLeft', 'imageStyle:full', 'imageStyle:alignRight' ],

diff --git a/packages/ckeditor5-adapter-ckfinder/tests/manual/uploadadapter.js b/packages/ckeditor5-adapter-ckfinder/tests/manual/uploadadapter.js
@@ -28,7 +28,7 @@ ClassicEditor
 			Enter, Typing, Paragraph, Heading, Undo, Bold, Italic, Heading, List, Image, ImageToolbar, Clipboard,
 			ImageCaption, ImageStyle, ImageUpload, CKFinderUploadAdapter
 		],
-		toolbar: [ 'heading', '|', 'undo', 'redo', 'bold', 'italic', 'bulletedList', 'numberedList', 'imageUpload' ],
+		toolbar: [ 'heading', '|', 'undo', 'redo', 'bold', 'italic', 'bulletedList', 'numberedList', 'uploadImage' ],
 		ckfinder: {
 			// eslint-disable-next-line max-len
 			uploadUrl: 'https://cksource.com/weuy2g4ryt278ywiue/core/connector/php/connector.php?command=QuickUpload&type=Files&responseType=json'

diff --git a/packages/ckeditor5-build-balloon-block/src/ckeditor.js b/packages/ckeditor5-build-balloon-block/src/ckeditor.js
@@ -76,7 +76,7 @@ BalloonEditor.defaultConfig = {
 		'indent',
 		'outdent',
 		'|',
-		'imageUpload',
+		'uploadImage',
 		'blockQuote',
 		'insertTable',
 		'mediaEmbed',

diff --git a/packages/ckeditor5-build-balloon/src/ckeditor.js b/packages/ckeditor5-build-balloon/src/ckeditor.js
@@ -76,7 +76,7 @@ BalloonEditor.defaultConfig = {
 			'indent',
 			'outdent',
 			'|',
-			'imageUpload',
+			'uploadImage',
 			'blockQuote',
 			'insertTable',
 			'mediaEmbed',

diff --git a/packages/ckeditor5-build-classic/src/ckeditor.js b/packages/ckeditor5-build-classic/src/ckeditor.js
@@ -76,7 +76,7 @@ ClassicEditor.defaultConfig = {
 			'indent',
 			'outdent',
 			'|',
-			'imageUpload',
+			'uploadImage',
 			'blockQuote',
 			'insertTable',
 			'mediaEmbed',

diff --git a/packages/ckeditor5-build-decoupled-document/src/ckeditor.js b/packages/ckeditor5-build-decoupled-document/src/ckeditor.js
@@ -105,7 +105,7 @@ DecoupledEditor.defaultConfig = {
 			'|',
 			'link',
 			'blockquote',
-			'imageUpload',
+			'uploadImage',
 			'insertTable',
 			'mediaEmbed',
 			'|',

diff --git a/packages/ckeditor5-build-inline/src/ckeditor.js b/packages/ckeditor5-build-inline/src/ckeditor.js
@@ -76,7 +76,7 @@ InlineEditor.defaultConfig = {
 			'indent',
 			'outdent',
 			'|',
-			'imageUpload',
+			'uploadImage',
 			'blockQuote',
 			'insertTable',
 			'mediaEmbed',

diff --git a/packages/ckeditor5-ckfinder/docs/_snippets/features/ckfinder-upload-only.js b/packages/ckeditor5-ckfinder/docs/_snippets/features/ckfinder-upload-only.js
@@ -9,7 +9,7 @@ ClassicEditor
 	.create( document.querySelector( '#snippet-ckfinder-upload-only' ), {
 		toolbar: {
 			items: [
-				'imageUpload', '|', 'heading', '|', 'bold', 'italic', '|', 'undo', 'redo'
+				'uploadImage', '|', 'heading', '|', 'bold', 'italic', '|', 'undo', 'redo'
 			],
 			viewportTopOffset: 100
 		},

diff --git a/packages/ckeditor5-ckfinder/docs/features/ckfinder.md b/packages/ckeditor5-ckfinder/docs/features/ckfinder.md
@@ -72,7 +72,7 @@ ClassicEditor
 		plugins: [ CKFinder, ... ],
 
 		// Enable the "Insert image" button in the toolbar.
-		toolbar: [ 'imageUpload', ... ],
+		toolbar: [ 'uploadImage', ... ],
 
 		ckfinder: {
 			// Upload the images to the server using the CKFinder QuickUpload command.
@@ -189,7 +189,7 @@ import CKFinder from '@ckeditor/ckeditor5-ckfinder/src/ckfinder';
 ClassicEditor
 	.create( document.querySelector( '#editor' ), {
 		plugins: [ CKFinder, ... ],
-		toolbar: [ 'ckfinder', 'imageUpload' ... ], // Depending on your preference.
+		toolbar: [ 'ckfinder', 'uploadImage' ... ], // Depending on your preference.
 		ckfinder: {
 			// Feature configuration.
 		}
@@ -213,8 +213,8 @@ The {@link module:ckfinder/ckfinder~CKFinder} plugin registers:
 
 Additionally, in the "image upload only" integration, you can use the following button and command registered by the {@link module:image/imageupload~ImageUpload} plugin:
 
-* The `'imageUpload'` UI button component.
-* The `'imageUpload'` command implemented by the {@link module:image/imageupload/imageuploadcommand~ImageUploadCommand}.
+* The `'uploadImage'` UI button component.
+* The `'uploadImage'` command implemented by the {@link module:image/imageupload/uploadimagecommand~UploadImageCommand}.
 
 <info-box>
 	We recommend using the official {@link framework/guides/development-tools#ckeditor-5-inspector CKEditor 5 inspector} for development and debugging. It will give you tons of useful information about the state of the editor such as internal data structures, selection, commands, and many more.

diff --git a/packages/ckeditor5-ckfinder/src/ckfindercommand.js b/packages/ckeditor5-ckfinder/src/ckfindercommand.js
@@ -19,7 +19,7 @@ import { CKEditorError } from 'ckeditor5/src/utils';
  *		editor.execute( 'ckfinder' );
  *
  * **Note:** This command uses other features to perform tasks:
- * - To insert images the {@link module:image/image/imageinsertcommand~ImageInsertCommand 'imageInsert'} command
+ * - To insert images the {@link module:image/image/insertimagecommand~InsertImageCommand 'insertImage'} command
  * from the {@link module:image/image~Image Image feature}.
  * - To insert links to files the {@link module:link/linkcommand~LinkCommand 'link'} command
  * from the {@link module:link/link~Link Link feature}.
@@ -44,7 +44,7 @@ export default class CKFinderCommand extends Command {
 	 * @inheritDoc
 	 */
 	refresh() {
-		const imageCommand = this.editor.commands.get( 'imageInsert' );
+		const imageCommand = this.editor.commands.get( 'insertImage' );
 		const linkCommand = this.editor.commands.get( 'link' );
 
 		// The CKFinder command is enabled when one of image or link command is enabled.
@@ -135,7 +135,7 @@ export default class CKFinderCommand extends Command {
 }
 
 function insertImages( editor, urls ) {
-	const imageCommand = editor.commands.get( 'imageInsert' );
+	const imageCommand = editor.commands.get( 'insertImage' );
 
 	// Check if inserting an image is actually possible - it might be possible to only insert a link.
 	if ( !imageCommand.isEnabled ) {
@@ -150,5 +150,5 @@ function insertImages( editor, urls ) {
 		return;
 	}
 
-	editor.execute( 'imageInsert', { source: urls } );
+	editor.execute( 'insertImage', { source: urls } );
 }
diff --git a/packages/ckeditor5-ckfinder/tests/ckfindercommand.js b/packages/ckeditor5-ckfinder/tests/ckfindercommand.js
@@ -105,9 +105,9 @@ describe( 'CKFinderCommand', () => {
 			expect( command.isEnabled ).to.be.false;
 		} );
 
-		it( 'should be true when imageInsert or link command is enabled', () => {
+		it( 'should be true when insertImage or link command is enabled', () => {
 			setModelData( model, '<paragraph>[]</paragraph>' );
-			const insertImage = editor.commands.get( 'imageInsert' );
+			const insertImage = editor.commands.get( 'insertImage' );
 			const linkCommand = editor.commands.get( 'link' );
 
 			insertImage.isEnabled = false;

diff --git a/packages/ckeditor5-core/src/command.js b/packages/ckeditor5-core/src/command.js
@@ -45,7 +45,7 @@ export default class Command {
 		 * For example, the `'bold'` command's value indicates whether the selection starts in a bolded text.
 		 * And the value of the `'link'` command may be an object with links details.
 		 *
-		 * It is possible for a command to have no value (e.g. for stateless actions such as `'imageUpload'`).
+		 * It is possible for a command to have no value (e.g. for stateless actions such as `'uploadImage'`).
 		 *
 		 * A concrete command class should control this value by overriding the {@link #refresh `refresh()`} method.
 		 *

diff --git a/packages/ckeditor5-easy-image/docs/features/easy-image.md b/packages/ckeditor5-easy-image/docs/features/easy-image.md
@@ -132,7 +132,7 @@ import EasyImage from '@ckeditor/ckeditor5-easy-image/src/easyimage';
 ClassicEditor
 	.create( document.querySelector( '#editor' ), {
 		plugins: [ EasyImage, ... ],
-		toolbar: [ 'imageUpload', ... ],
+		toolbar: [ 'uploadImage', ... ],
 
 		// Configure the endpoint. See the "Configuration" section above.
 		cloudServices: {

diff --git a/packages/ckeditor5-easy-image/tests/easyimage.js b/packages/ckeditor5-easy-image/tests/easyimage.js
@@ -126,7 +126,7 @@ describe( 'EasyImage', () => {
 							}
 						} );
 
-						editor.execute( 'imageUpload', { file: createNativeFileMock() } );
+						editor.execute( 'uploadImage', { file: createNativeFileMock() } );
 
 						setTimeout( () => {
 							upload._uploadGateway.resolveLastUpload();

diff --git a/packages/ckeditor5-easy-image/tests/manual/easyimage.js b/packages/ckeditor5-easy-image/tests/manual/easyimage.js
@@ -26,7 +26,7 @@ ClassicEditor
 			'bulletedList',
 			'numberedList',
 			'blockQuote',
-			'imageUpload',
+			'uploadImage',
 			'insertTable',
 			'mediaEmbed',
 			'undo',

diff --git a/packages/ckeditor5-engine/tests/model/operation/transform/undo.js b/packages/ckeditor5-engine/tests/model/operation/transform/undo.js
@@ -325,7 +325,7 @@ describe( 'transform', () => {
 		john.split();
 		john.setSelection( [ 1, 0 ] );
 		john._processExecute( 'bold' );
-		john._processExecute( 'forwardDelete' );
+		john._processExecute( 'deleteForward' );
 
 		expectClients( '<paragraph>Foo</paragraph><paragraph>Bar</paragraph>' );
 

diff --git a/packages/ckeditor5-heading/docs/_snippets/features/title.js b/packages/ckeditor5-heading/docs/_snippets/features/title.js
@@ -22,7 +22,7 @@ BaloonBlockEditor
 			'outdent',
 			'indent',
 			'|',
-			'imageUpload',
+			'uploadImage',
 			'blockQuote',
 			'insertTable',
 			'mediaEmbed'