Merge pull request #1096 from julien/issue/1048

Fixes #1048 | Add button to remove images

src/adapter/core.js

@@ -10,6 +10,8 @@ import Base from '../oop/base';
 import Selections from '../selections/selections';
 import UI from '../components/main.jsx';
 
+import {removeImageCommand} from '../commands';
+
 import React from 'react';
 import ReactDOM from 'react-dom';
 
@@ -95,6 +97,22 @@ extend(
 
 					let editable = editor.editable();
 
+					let extraCommands = this.get('extraCommands');
+
+					const extraCommandKeys = Object.keys(extraCommands);
+					for (let i = 0; i < extraCommandKeys.length; i++) {
+						const commandName = extraCommandKeys[i];
+
+						if (editor.commands[commandName]) {
+							continue;
+						}
+
+						editor.addCommand(
+							commandName,
+							extraCommands[commandName]
+						);
+					}
+
 					editable.addClass('ae-editable');
 				}.bind(this)
 			);
@@ -488,6 +506,22 @@ extend(
 				value: 100,
 			},
 
+			/**
+			 * The list of extra commands to be added to the editor.
+			 *
+			 * @memberof Core
+			 * @instance
+			 * @property extraCommands
+			 * @type {Object}
+			 */
+			extraCommands: {
+				validator: Lang.isObject,
+				value: {
+					removeImage: removeImageCommand,
+				},
+				writeOnce: true,
+			},
+
 			/**
 			 * Specifies the extra plugins which have to be loaded to the current CKEditor instance in order to
 			 * make AlloyEditor to work properly.

src/assets/lang/en.json

@@ -28,6 +28,7 @@
 	"pasteVideoLink": "Paste Video Link",
 	"platformNotSupported": "Sorry, this platform is not supported",
 	"primary": "Primary",
+	"removeImage": "Remove Image",
 	"removeLink": "Remove link",
 	"rows": "Rows",
 	"success": "Success",

src/commands/index.js

@@ -0,0 +1,3 @@
+import removeImageCommand from './remove-image';
+
+export {removeImageCommand};

src/commands/remove-image.js

@@ -0,0 +1,29 @@
+const removeImageCommand = {
+	exec: editor => {
+		const selection = editor.getSelection();
+
+		if (selection) {
+			const ranges = selection.getRanges();
+			const startContainer = ranges[0].startContainer;
+
+			const nextRange = new CKEDITOR.dom.range(startContainer);
+			nextRange.setStart(startContainer, 0);
+			nextRange.setEnd(startContainer, 0);
+
+			const selectedElement = selection.getSelectedElement();
+
+			if (selectedElement && selectedElement.getName() === 'img') {
+				const native = selection.getNative();
+				if (native) {
+					native.removeAllRanges();
+				}
+
+				selection.selectRanges([nextRange]);
+
+				selectedElement.remove();
+			}
+		}
+	},
+};
+
+export default removeImageCommand;

src/components/buttons/button-remove-image.jsx

@@ -0,0 +1,37 @@
+import ButtonCommand from '../base/button-command.js';
+import ButtonIcon from './button-icon.jsx';
+import ButtonStateClasses from '../base/button-state-classes.js';
+import React from 'react';
+
+/**
+ * The ButtonRemoveImage class removes an image using a CKEDITOR.command.
+ *
+ * @class ButtonRemoveImage
+ * @uses ButtonCommand
+ */
+class ButtonRemoveImage extends React.Component {
+	static defaultProps = {
+		command: 'removeImage',
+	};
+
+	static key = 'removeImage';
+
+	/**
+	 * @inheritDoc
+	 */
+	render() {
+		const cssClass = `ae-button ${this.getStateClasses()}`;
+
+		return (
+			<button
+				aria-label={AlloyEditor.Strings.removeImage}
+				aria-pressed={cssClass.indexOf('pressed') !== -1}
+				className={cssClass}
+				onClick={this.execCommand}>
+				<ButtonIcon symbol="times-circle" />
+			</button>
+		);
+	}
+}
+
+export default ButtonCommand(ButtonStateClasses(ButtonRemoveImage));

src/components/buttons/index.js

@@ -39,6 +39,7 @@ import ButtonParagraphCenter from './button-paragraph-center.jsx';
 import ButtonParagraphJustify from './button-paragraph-justify.jsx';
 import ButtonQuote from './button-quote.jsx';
 import ButtonRemoveFormat from './button-remove-format.jsx';
+import ButtonRemoveImage from './button-remove-image.jsx';
 import ButtonSeparator from './button-separator.jsx';
 import ButtonSpacing from './button-spacing.jsx';
 import ButtonStrike from './button-strike.jsx';
@@ -103,6 +104,7 @@ export default {
 	[ButtonParagraphJustify.key]: ButtonParagraphJustify,
 	[ButtonQuote.key]: ButtonQuote,
 	[ButtonRemoveFormat.key]: ButtonRemoveFormat,
+	[ButtonRemoveImage.key]: ButtonRemoveImage,
 	[ButtonSeparator.key]: ButtonSeparator,
 	[ButtonSpacing.key]: ButtonSpacing,
 	[ButtonStrike.key]: ButtonStrike,

src/selections/selections.js

@@ -20,12 +20,7 @@ const Selections = [
 	},
 	{
 		name: 'image',
-		buttons: [
-			'imageLeft',
-			'imageCenter',
-			'imageRight',
-			'AccessibilityImageAlt',
-		],
+		buttons: ['imageLeft', 'imageCenter', 'imageRight', 'removeImage'],
 		setPosition: SelectionSetPosition.image,
 		test: SelectionTest.image,
 	},