Fix #909 Add option to provide pre-defined classes for img elements.

src/plugins/image-properties/config.ts

@@ -61,6 +61,27 @@ declare module 'jodit/config' {
 			 */
 			editClass: boolean;
 
+			/**
+			 * Pre-define available classes to select from
+			 *
+			 * Classes can be provided as list of strings or as list of tuples
+			 * `["classname", "human label"]`.
+			 *
+			 * @example
+			 * ```javascript
+			 * new Jodit('#editor', {
+			 *    image: {
+			 *        availableClasses: [
+			 *            "rte-image-width-50",
+			 *            ["rte-image-width-75", "75 % width"]
+			 *        ]
+			 *    }
+			 * })
+			 * ```
+			 */
+
+			availableClasses: [string, string][] | string[];
+
 			/**
 			 * Show style edit input
 			 */
@@ -101,6 +122,7 @@ Config.prototype.image = {
 	editBorderRadius: true,
 	editMargins: true,
 	editClass: true,
+	availableClasses: [],
 	editStyle: true,
 	editId: true,
 	editAlign: true,

src/plugins/image-properties/image-properties.test.js

@@ -544,5 +544,91 @@ describe('Edit image tests', function () {
 				}).timeout(7000);
 			});
 		});
+		describe('Classes', function () {
+			describe('No available classes defined', function () {
+				it('Should render as input box', function (done) {
+					const area = appendTestArea();
+					const editor = Jodit.make(area, {
+						history: {
+							timeout: 0
+						},
+						disablePlugins: 'mobile'
+					});
+
+					editor.value =
+						'<img alt="" src="https://xdsoft.net/jodit/files/th.jpg">';
+
+					simulateEvent(
+						'dblclick',
+						editor.editor.querySelector('img')
+					);
+
+					const dialog = getOpenedDialog(editor);
+
+					expect(dialog).is.not.null;
+					expect(
+						dialog.querySelectorAll('[data-ref="editImage"]').length
+					).equals(1);
+
+					expect(
+						dialog.querySelectorAll('input[data-ref="classes"]')
+							.length
+					).equals(1);
+
+					done();
+				}).timeout(7000);
+			});
+			describe('Available classes defined', function () {
+				it('Should render as select box', function (done) {
+					const area = appendTestArea();
+					const editor = Jodit.make(area, {
+						history: {
+							timeout: 0
+						},
+						image: {
+							availableClasses: [
+								'rte-image-width-50',
+								['rte-image-width-75', '75 % width']
+							]
+						},
+						disablePlugins: 'mobile'
+					});
+
+					editor.value =
+						'<img alt="" src="https://xdsoft.net/jodit/files/th.jpg">';
+
+					simulateEvent(
+						'dblclick',
+						editor.editor.querySelector('img')
+					);
+
+					const dialog = getOpenedDialog(editor);
+
+					expect(dialog).is.not.null;
+					expect(
+						dialog.querySelectorAll('[data-ref="editImage"]').length
+					).equals(1);
+
+					expect(
+						dialog.querySelectorAll('select[data-ref="classes"]')
+							.length
+					).equals(1);
+
+					const options = [];
+					dialog
+						.querySelectorAll('select[data-ref="classes"] option')
+						.forEach(option => {
+							options.push([option.value, option.textContent]);
+						});
+
+					expect(options).to.eql([
+						['rte-image-width-50', 'rte-image-width-50'],
+						['rte-image-width-75', '75 % width']
+					]);
+
+					done();
+				}).timeout(7000);
+			});
+		});
 	});
 });

src/plugins/image-properties/templates/position-tab.ts

@@ -16,6 +16,27 @@ export function positionTab(editor: IJodit): HTMLElement {
 		i18n = editor.i18n.bind(editor),
 		gi = Icon.get.bind(Icon);
 
+	const classInput = [];
+	if (opt.image.availableClasses.length > 0) {
+		classInput.push(
+			'<select data-ref="classes" class="jodit-input jodit-select">'
+		);
+		opt.image.availableClasses.forEach(item => {
+			if (typeof item === 'string') {
+				classInput.push(`<option value="${item}">${item}</option>`);
+			} else {
+				classInput.push(
+					`<option value="${item[0]}">${item[1]}</option>`
+				);
+			}
+		});
+		classInput.push('</select>');
+	} else {
+		classInput.push(
+			'<input data-ref="classes" type="text" class="jodit-input"/>'
+		);
+	}
+
 	return editor.c.fromHTML(`<div style="${
 		!opt.image.editMargins ? 'display:none' : ''
 	}" class="jodit-form__group">
@@ -60,7 +81,7 @@ export function positionTab(editor: IJodit): HTMLElement {
 			!opt.image.editClass ? 'display:none' : ''
 		}" class="jodit-form__group">
 			<label>${i18n('Classes')}</label>
-			<input data-ref="classes" type="text" class="jodit-input"/>
+			${classInput.join('')}
 		</div>
 		<div style="${
 			!opt.image.editId ? 'display:none' : ''