Enhance image editor functionality with 'Save as' prompt and refactor button definitions

Author: xdan

src/core/helpers/utils/utils.ts

@@ -40,6 +40,24 @@ export function call<T extends any[], R>(
 	return func(...args);
 }
 
+/**
+ * Call function with parameters
+ *
+ * @example
+ * ```js
+ * const f = Math.random();
+ * Jodit.modules.Helpers.call(f > 0.5 ? Math.ceil : Math.floor, f);
+ * ```
+ */
+
+export function callThis<This, T extends any[], R>(
+	func: (this: This, ...args: T) => R,
+	thisArg: This,
+	...args: T
+): R {
+	return func.apply(thisArg, args);
+}
+
 /**
  * Mark element for debugging
  */

src/modules/file-browser/data-provider.ts

@@ -26,15 +26,13 @@ import type {
 	Nullable
 } from 'jodit/types';
 import { IS_PROD } from 'jodit/core/constants';
-import {
-	abort,
-	ConfigProto,
-	error,
-	isFunction,
-	normalizeRelativePath,
-	set
-} from 'jodit/core/helpers';
-import { Ajax } from 'jodit/core/request';
+import { autobind } from 'jodit/core/decorators/autobind/autobind';
+import { isFunction } from 'jodit/core/helpers/checker/is-function';
+import { normalizeRelativePath } from 'jodit/core/helpers/normalize/normalize-relative-path';
+import { ConfigProto } from 'jodit/core/helpers/utils/config-proto';
+import { abort, error } from 'jodit/core/helpers/utils/error';
+import { set } from 'jodit/core/helpers/utils/set';
+import { Ajax } from 'jodit/core/request/ajax';
 import { FileBrowserItem } from 'jodit/modules/file-browser/builders/item';
 
 export const DEFAULT_SOURCE_NAME = 'default';
@@ -127,13 +125,15 @@ export default class DataProvider implements IFileBrowserDataProvider {
 
 	private progressHandler = (ignore: number): void => {};
 
+	@autobind
 	onProgress(callback: (percentage: number) => void): void {
 		this.progressHandler = callback;
 	}
 
 	/**
 	 * Load permissions for path and source
 	 */
+	@autobind
 	async permissions(
 		path: string,
 		source: string
@@ -182,6 +182,7 @@ export default class DataProvider implements IFileBrowserDataProvider {
 		return null;
 	}
 
+	@autobind
 	canI(action: string): boolean {
 		const rule: keyof IPermissions = 'allow' + action;
 
@@ -238,19 +239,21 @@ export default class DataProvider implements IFileBrowserDataProvider {
 	/**
 	 * Load items list by path and source
 	 */
+	@autobind
 	items(
 		path: string,
 		source: string,
 		mods: IFileBrowserDataProviderItemsMods = {}
 	): Promise<IFileBrowserItem[]> {
 		return this.__items(path, source, mods, resp =>
-			this.generateItemsList(resp.data.sources, mods)
+			this.__generateItemsList(resp.data.sources, mods)
 		);
 	}
 
 	/**
 	 * Load items list by path and source
 	 */
+	@autobind
 	itemsEx(
 		path: string,
 		source: string,
@@ -260,12 +263,12 @@ export default class DataProvider implements IFileBrowserDataProvider {
 			sources.reduce((acc, source) => acc + source.files.length, 0);
 
 		return this.__items(path, source, mods, resp => ({
-			items: this.generateItemsList(resp.data.sources, mods),
+			items: this.__generateItemsList(resp.data.sources, mods),
 			loadedTotal: calcTotal(resp.data.sources)
 		}));
 	}
 
-	private generateItemsList(
+	private __generateItemsList(
 		sources: ISourcesFiles,
 		mods: IFileBrowserDataProviderItemsMods = {}
 	): IFileBrowserItem[] {
@@ -306,6 +309,7 @@ export default class DataProvider implements IFileBrowserDataProvider {
 		return elements;
 	}
 
+	@autobind
 	async tree(path: string, source: string): Promise<ISourcesFiles> {
 		path = normalizeRelativePath(path);
 
@@ -338,6 +342,7 @@ export default class DataProvider implements IFileBrowserDataProvider {
 	/**
 	 * Get path by url. You can use this method in another modules
 	 */
+	@autobind
 	getPathByUrl(url: string): Promise<any> {
 		set('options.getLocalFileByUrl.data.url', url, this);
 
@@ -357,6 +362,7 @@ export default class DataProvider implements IFileBrowserDataProvider {
 	 * @param path - Relative directory in which you want create a folder
 	 * @param source - Server source key
 	 */
+	@autobind
 	createFolder(name: string, path: string, source: string): Promise<boolean> {
 		const { create } = this.o;
 
@@ -383,6 +389,7 @@ export default class DataProvider implements IFileBrowserDataProvider {
 	 * @param filepath - The relative path to the file / folder source
 	 * @param path - Relative to the directory where you want to move the file / folder
 	 */
+	@autobind
 	move(
 		filepath: string,
 		path: string,
@@ -419,7 +426,7 @@ export default class DataProvider implements IFileBrowserDataProvider {
 	 * @param file - The filename
 	 * @param source - Source
 	 */
-	private remove(
+	private __remove(
 		action: 'fileRemove' | 'folderRemove',
 		path: string,
 		file: string,
@@ -451,8 +458,9 @@ export default class DataProvider implements IFileBrowserDataProvider {
 	 * @param file - The filename
 	 * @param source - Source
 	 */
+	@autobind
 	fileRemove(path: string, file: string, source: string): Promise<string> {
-		return this.remove('fileRemove', path, file, source);
+		return this.__remove('fileRemove', path, file, source);
 	}
 
 	/**
@@ -462,8 +470,9 @@ export default class DataProvider implements IFileBrowserDataProvider {
 	 * @param file - The filename
 	 * @param source - Source
 	 */
+	@autobind
 	folderRemove(path: string, file: string, source: string): Promise<string> {
-		return this.remove('folderRemove', path, file, source);
+		return this.__remove('folderRemove', path, file, source);
 	}
 
 	/**
@@ -474,7 +483,7 @@ export default class DataProvider implements IFileBrowserDataProvider {
 	 * @param newname - New name
 	 * @param source - Source
 	 */
-	private rename(
+	private __rename(
 		action: 'fileRename' | 'folderRename',
 		path: string,
 		name: string,
@@ -504,28 +513,30 @@ export default class DataProvider implements IFileBrowserDataProvider {
 	/**
 	 * Rename folder
 	 */
+	@autobind
 	folderRename(
 		path: string,
 		name: string,
 		newname: string,
 		source: string
 	): Promise<string> {
-		return this.rename('folderRename', path, name, newname, source);
+		return this.__rename('folderRename', path, name, newname, source);
 	}
 
 	/**
 	 * Rename file
 	 */
+	@autobind
 	fileRename(
 		path: string,
 		name: string,
 		newname: string,
 		source: string
 	): Promise<string> {
-		return this.rename('fileRename', path, name, newname, source);
+		return this.__rename('fileRename', path, name, newname, source);
 	}
 
-	private changeImage(
+	private __changeImage(
 		type: 'resize' | 'crop',
 		path: string,
 		source: string,
@@ -565,37 +576,42 @@ export default class DataProvider implements IFileBrowserDataProvider {
 	/**
 	 * Send command to server to crop image
 	 */
+	@autobind
 	crop(
 		path: string,
 		source: string,
 		name: string,
 		newname: string | void,
 		box: ImageBox | void
 	): Promise<boolean> {
-		return this.changeImage('crop', path, source, name, newname, box);
+		return this.__changeImage('crop', path, source, name, newname, box);
 	}
 
 	/**
 	 * Send command to server to resize image
 	 */
+	@autobind
 	resize(
 		path: string,
 		source: string,
 		name: string,
 		newname: string | void,
 		box: ImageBox | void
 	): Promise<boolean> {
-		return this.changeImage('resize', path, source, name, newname, box);
+		return this.__changeImage('resize', path, source, name, newname, box);
 	}
 
+	@autobind
 	getMessage(resp: IFileBrowserAnswer): string {
 		return this.options.getMessage(resp);
 	}
 
+	@autobind
 	isSuccess(resp: IFileBrowserAnswer): boolean {
 		return this.options.isSuccess(resp);
 	}
 
+	@autobind
 	destruct(): any {
 		this.__ajaxInstances.forEach(a => a.destruct());
 		this.__ajaxInstances.clear();

src/modules/image-editor/image-editor.test.js

@@ -240,6 +240,50 @@ describe('Image editor', () => {
 	});
 
 	describe('Resize mode', () => {
+		describe('Save as', () => {
+			it('Should shoe prompt dialog', async () => {
+				const editor = getJodit({
+					uploader: {
+						url: 'https://xdsoft.net/jodit/connector/index.php?action=upload'
+					},
+					filebrowser: {
+						ajax: {
+							url: 'https://xdsoft.net/jodit/connector/index.php'
+						}
+					}
+				});
+
+				editor.value =
+					'<p><img alt="artio" src="tests/artio.jpg"/></p>';
+
+				simulateEvent('dblclick', editor.editor.querySelector('img'));
+
+				const dialog = getOpenedDialog(editor);
+
+				const form = getForm(dialog);
+				simulateEvent('click', form.getElm('editImage'));
+				await new Promise(resolve =>
+					editor.filebrowser.events.one('afterImageEditor', resolve)
+				);
+
+				const imageEditor = getOpenedDialog(editor);
+				expect(imageEditor).is.not.null;
+
+				clickButton('save-as', imageEditor);
+
+				const prompt = getOpenedDialog(editor);
+				expect(prompt).is.not.null;
+				expect(prompt).is.not.equals(dialog);
+				const input = prompt.querySelector('input');
+				expect(input).is.not.null;
+				input.value = 'new-name';
+				clickButton('ok', prompt);
+				await editor.async.requestIdlePromise();
+				expect(getOpenedDialog(editor)).eq(dialog);
+				clickButton('ok', dialog);
+			}).timeout(7000);
+		});
+
 		describe('Enable ratio', () => {
 			it('Should deny resize image without ratio', async () => {
 				const editor = getJodit({

src/modules/image-editor/image-editor.ts

@@ -25,7 +25,12 @@ import type {
 import { ViewComponent } from 'jodit/core/component';
 import { autobind, component, debounce, throttle } from 'jodit/core/decorators';
 import { Dom } from 'jodit/core/dom';
-import { $$, attr, call, css, refs, toArray, trim } from 'jodit/core/helpers';
+import { toArray } from 'jodit/core/helpers/array/to-array';
+import { trim } from 'jodit/core/helpers/string/trim';
+import { attr } from 'jodit/core/helpers/utils/attr';
+import { css } from 'jodit/core/helpers/utils/css';
+import { $$, refs } from 'jodit/core/helpers/utils/selector';
+import { call } from 'jodit/core/helpers/utils/utils';
 import { Button } from 'jodit/core/ui/button';
 import { Config } from 'jodit/config';
 
@@ -738,7 +743,13 @@ export class ImageEditor extends ViewComponent<IViewWithToolbar & IDlgs> {
 		this.buttons = {
 			reset: Button(this.j, 'update', 'Reset'),
 			save: Button(this.j, 'save', 'Save'),
-			saveas: Button(this.j, 'save', 'Save as ...')
+			saveas: Button(this.j, {
+				icon: {
+					name: 'save'
+				},
+				name: 'save-as',
+				text: 'Save as ...'
+			})
 		};
 
 		this.activeTab = o.resize ? TABS.resize : TABS.crop;

src/plugins/search/search.test.spec.ts

@@ -31,7 +31,7 @@ test.describe('Search screenshot testing', () => {
 
 		test.describe('Replace popup', () => {
 			test('works', async function ({ page }) {
-				await page.click('[data-ref="find"] [role="trigger"]');
+				await page.click('[data-ref="find"] [aria-haspopup="true"]');
 				await page.click('[data-ref="replace"]');
 				await page.evaluate(() => {
 					(document.activeElement as HTMLInputElement).blur();

test/bootstrap.js

@@ -328,6 +328,13 @@ function mockAjax() {
 						break;
 					}
 
+					case 'imageResize':
+						resolve({
+							success: true,
+							time: '2020-08-04 19:03:23',
+							data: { code: 220 }
+						});
+						break;
 					case 'folderRemove':
 					case 'folderRename': {
 						temp.folderName = ajax.options.data.newname;
@@ -1144,8 +1151,14 @@ function getButton(buttonName, joditOrElement, role, last) {
 	let button;
 
 	if (!/\s/.test(buttonName)) {
-		for (const className of classes) {
-			const prefix = `.${className}.${className}_${buttonName}${last ? ':last-child' : ''}`;
+		const variants = classes
+			.map(c => [
+				`.${c}.${c}_${buttonName}`,
+				`.${c}.${c}_${buttonName.replace(/-/g, '_')}`
+			])
+			.flat();
+		for (const className of variants) {
+			const prefix = `${className}${last ? ':last-child' : ''}`;
 			button = elm.querySelector(`${prefix} ${roleSelector}`);
 
 			if (button) {