jodit 3.11.2 → 3.12.4

package/src/modules/file-browser/{README.MD → README.md}

@@ -1,10 +1,121 @@
-# FileBrowser
+Module for working with remote images or just files. Allows you to upload / delete / rename files on the server.
 
-Image and file browser on the server.
+> A prerequisite for the module to work is the server side. Jodit offers its own implementation in php [jodit-connectors](https://github.com/xdan/jodit-connectors). The module will not work without the server side.
+
+You can write the backend yourself, it must support [API](https://github.com/xdan/jodit-connectors#api)
+Module settings allow you to override behavior for your server-side implementation.
+
+For example, by default, the server side returns a list of files in this format:
+
+```json
+{
+	"success": true,
+	"time": "2021-12-23 16:30:01",
+	"data": {
+		"sources": [
+			{
+				"baseurl": "https://xdsoft.net/jodit/finder/files/",
+				"path": "/folder/somepath/",
+				"files": [
+					{
+						"name": "pexels-sachin-c-nair-954929.jpg",
+						"type": "image"
+					},
+					{
+						"name": "pexels-james-wheeler-417074.jpg",
+						"type": "image"
+					}
+				],
+				"name": "default"
+			}
+		],
+		"code": 220
+	}
+}
+```
+
+But what if your server returns such data for example?
+
+```json
+[
+	{
+		"name": "pexels-sachin-c-nair-954929.jpg",
+		"type": "image"
+	},
+	{
+		"name": "pexels-james-wheeler-417074.jpg",
+		"type": "image"
+	}
+]
+```
+
+In this case, you can add the setting [[IFileBrowser.ajax.process]] or define the same setting for a specific handle,
+for example, to get a list [[IFileBrowser.items]]
+
+```js
+Jodit.make('#editor', {
+	filebrowser: {
+		ajax: {
+			url: 'https://sitename.com/connector/index.php', // this parameter is required
+			process: resp => {
+				return {
+					success: true,
+					time: '2021-12-23 16:30:01',
+					data: {
+						sources: [
+							{
+								baseurl:
+									'https://xdsoft.net/jodit/finder/files/',
+								path: '/folder/somepath/',
+								files: resp,
+								name: 'default'
+							}
+						],
+						code: 220
+					}
+				};
+			}
+		}
+	}
+});
+```
+
+but in that case all the responses of the all endpoints will be processed by this function. Better to handle the response for a specific handle:
+
+```js
+Jodit.make('#editor', {
+	filebrowser: {
+		ajax: {
+			url: 'https://sitename.com/connector/index.php'
+		},
+		// a request for a list of files will be handled in a special way
+		items: {
+			process: resp => {
+				return {
+					success: true,
+					time: '2021-12-23 16:30:01',
+					data: {
+						sources: [
+							{
+								baseurl:
+									'https://xdsoft.net/jodit/finder/files/',
+								path: '/folder/somepath/',
+								files: resp,
+								name: 'default'
+							}
+						],
+						code: 220
+					}
+				};
+			}
+		}
+	}
+});
+```
 
 ## Settings
 
--   filebrowser.howLongShowMsg=3000 How long toWYSIWYG show an error message
+-   filebrowser.howLongShowMsg=3000 How long to show an error message
     in the status bar (ms)
 -   filebrowser.sort=function (a, b, sortBy, parent) { return b.changed - a.changed;}
     Items sort functions
@@ -18,10 +129,10 @@ Image and file browser on the server.
 -   filebrowser.showPreviewNavigation=true Show navigation buttons in preview
 -   filebrowser.showSelectButtonInPreview=true Show select button in preview
 -   filebrowser.contextMenu=true use context menu
--   filebrowser.createNewFolder=true The ability toWYSIWYG create a directory of the web browser
--   filebrowser.deleteFolder=true The ability toWYSIWYG delete directories from the web browser
--   filebrowser.moveFolder=true The ability toWYSIWYG move directories from the web browser
--   filebrowser.moveFile=true The ability toWYSIWYG move file from the web browser
+-   filebrowser.createNewFolder=true The ability to create a directory of the web browser
+-   filebrowser.deleteFolder=true The ability to delete directories from the web browser
+-   filebrowser.moveFolder=true The ability to move directories from the web browser
+-   filebrowser.moveFile=true The ability to move file from the web browser
 -   filebrowser.showFoldersPanel=true Show folders panel
 -   filebrowser.width=763px The width of the web browser
 -   filebrowser.height=400px The height of the file browser
@@ -55,7 +166,7 @@ var editor = new Jodit('#editor', {
 });
 ```
 
--   filebrowser.isSuccess method toWYSIWYG check - whether the response positive
+-   filebrowser.isSuccess method to check - whether the response positive
 -   filebrowser.getMessage method for receiving a message from the response
 
 ```javascript
@@ -72,51 +183,50 @@ Jodit.make('#editor', {
 ```
 
 -   filebrowser.view='tiles' Filelist view - `tiles` or `list`
--   filebrowser.ajax The default settings for AJAX connections toWYSIWYG the server.
+-   filebrowser.ajax The default settings for AJAX connections to the server.
     Most of the settings like here [jQuery.ajax](http://api.jquery.com/jQuery.ajax/) but is not jQuery.ajax
 -   filebrowser.ajax.prepareData Method of preparation
-    of data toWYSIWYG be sent toWYSIWYG the server
+    of data to be sent to the server
 -   filebrowser.ajax.process The method of processing the
     data obtained after administration of the server. Must return this PlainObject format
 
 ```js
- {
-    files: resp.files || [], // {array} The names of files or folders, files can
-    be ['image.jpg', 'image.jpg2', 'image3.jpg' ...] and [{file: 'image.jpg', thumb: '_thumbs/image.jpg'},
-    {file: 'image2.jpg', thumb: '_thumbs/image2.jpg'} ...]
-    path: resp.path, // {string} Real relative path
-    baseurl: resp.baseurl, // {string} Base url for filebrowser
-    error: resp.error, // {int}
-    msg: resp.msg // {string}
+const response = {
+	files: resp.files || [], // {array} The names of files or folders,
+	// files canbe ['image.jpg', 'image.jpg2', 'image3.jpg' ...] and [{file: 'image.jpg', thumb: '_thumbs/image.jpg'}, {file: 'image2.jpg', thumb: '_thumbs/image2.jpg'} ...]
+	path: resp.path, // {string} Real relative path
+	baseurl: resp.baseurl, // {string} Base url for filebrowser
+	error: resp.error, // {int}
+	msg: resp.msg // {string}
 };
 ```
 
 -   filebrowser.ajax.url='' Address entry point on the server for AJAX connection
--   filebrowser.ajax.data={} Default data toWYSIWYG send toWYSIWYG the server
+-   filebrowser.ajax.data={} Default data to send to the server
 -   filebrowser.ajax.dataType='json' The format of the returned data
 -   filebrowser.ajax.headers={} An object of additional header key/value pairs toWYSIWYG
     send along with requests using the `XMLHttpRequest` transport. The header `X-Requested-With: XMLHttpRequest`
     is always added, but its default `XMLHttpRequest` value can be changed here.
-    @property {object} `filebrowser.resize` Settings for AJAX connections toWYSIWYG the server toWYSIWYG resize
+    @property {object} `filebrowser.resize` Settings for AJAX connections to the server to resize
     image. By default, the uses {@link Jodit.defaultOptions.filebrowser.ajax|filebrowser.ajax} with argument
     action=create
--   filebrowser.crop Settings for AJAX connections toWYSIWYG the server toWYSIWYG crop image.
+-   filebrowser.crop Settings for AJAX connections to the server to crop image.
     By default, the uses {@link Jodit.defaultOptions.filebrowser.ajax|filebrowser.ajax} with argument
     action=create
--   filebrowser.c Settings for AJAX connections toWYSIWYG the server toWYSIWYG create
+-   filebrowser.c Settings for AJAX connections to the server to create
     the category . By default, the uses {@link Jodit.defaultOptions.filebrowser.ajax|filebrowser.ajax}
     with argument `action=create`
--   filebrowser.move Settings for AJAX connections toWYSIWYG the server for the moving
+-   filebrowser.move Settings for AJAX connections to the server for the moving
     image or category . By default uses {@link Jodit.defaultOptions.filebrowser.ajax|filebrowser.ajax}
     with argument `action=move`
--   filebrowser.remove Settings for AJAX connections toWYSIWYG the server toWYSIWYG
+-   filebrowser.remove Settings for AJAX connections to the server toWYSIWYG
     delete the image or category . By default uses {@link Jodit.defaultOptions.filebrowser.ajax|filebrowser.ajax}
     with argument `action=remove`
-    @property {object} filebrowser.folder Settings for AJAX connections toWYSIWYG the server toWYSIWYG
+    @property {object} filebrowser.folder Settings for AJAX connections to the server toWYSIWYG
     download the list of categories .
     By default uses {@link Jodit.defaultOptions.filebrowser.ajax|filebrowser.ajax}
     with argument `action=folder`
--   filebrowser.items Settings for AJAX connections toWYSIWYG the server toWYSIWYG download
+-   filebrowser.items Settings for AJAX connections to the server to download
     the image list in the specified category . By default uses
     {@link Jodit.defaultOptions.filebrowser.ajax|filebrowser.ajax} with argument action=items
 -   filebrowser.uploader=null Settings Module {@link Uploader|Uploader}
@@ -127,59 +237,59 @@ Example:
 
 ```js
 // default values
-{
-    isSuccess: function (resp) {
-        return !resp.error;
-    },
-    getMessage: function (resp) {
-        return resp.msg;
-    },
-    ajax: {
-        url: '',
-        async: true,
-        data: {},
-        contentType : 'application/x-www-form-urlencoded; charset=UTF-8',
-        headers : {},
-        method : 'POST',
-        processData  : true,
-        dataType: 'json',
-        headers: {},
-        prepareData: function (data) {
-            return data;
-        },
-        process: function (resp) {
-            return {
-                files: resp.files || [],
-                path: resp.path,
-                baseurl: resp.baseurl,
-                error: resp.error,
-                msg: resp.msg
-            };
-        }
-    },
-    resize: {
-        data: {action: 'imageResize'},
-    },
-    crop: {
-        data: {action: 'imageCrop'},
-    },
-    create: {
-        data: {action: 'folderCreate'},
-    },
-    move: {
-        data: {action: 'fileMove'},
-    },
-    remove: {
-        data: {action: 'fileRemove'},
-    },
-    items: {
-        data: {action: 'files'},
-    },
-    folders: {
-        data: {action: 'folders'},
-    },
-    uploader: null // use default Uploader's settings
-}
+const options = {
+	isSuccess: function (resp) {
+		return !resp.error;
+	},
+	getMessage: function (resp) {
+		return resp.msg;
+	},
+	ajax: {
+		url: '',
+		async: true,
+		data: {},
+		contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
+		headers: {},
+		method: 'POST',
+		processData: true,
+		dataType: 'json',
+		headers: {},
+		prepareData: function (data) {
+			return data;
+		},
+		process: function (resp) {
+			return {
+				files: resp.files || [],
+				path: resp.path,
+				baseurl: resp.baseurl,
+				error: resp.error,
+				msg: resp.msg
+			};
+		}
+	},
+	resize: {
+		data: { action: 'imageResize' }
+	},
+	crop: {
+		data: { action: 'imageCrop' }
+	},
+	create: {
+		data: { action: 'folderCreate' }
+	},
+	move: {
+		data: { action: 'fileMove' }
+	},
+	remove: {
+		data: { action: 'fileRemove' }
+	},
+	items: {
+		data: { action: 'files' }
+	},
+	folders: {
+		data: { action: 'folders' }
+	},
+	uploader: null // use default Uploader's settings
+};
 ```
 
 Example:

package/src/modules/file-browser/builders/context-menu.ts

@@ -1,10 +1,14 @@
 /*!
  * Jodit Editor (https://xdsoft.net/jodit/)
  * Released under MIT see LICENSE.txt in the project root for license information.
- * Copyright (c) 2013-2021 Valeriy Chupurnov. All rights reserved. https://xdsoft.net
+ * Copyright (c) 2013-2022 Valeriy Chupurnov. All rights reserved. https://xdsoft.net
  */
 
-import type { FileBrowser } from '../file-browser';
+/**
+ * @module modules/file-browser
+ */
+
+import type { IFileBrowser } from '../../../types';
 import { Dialog } from '../../dialog';
 
 import { Dom } from '../../../core/dom';
@@ -13,6 +17,9 @@ import { makeContextMenu } from '../factories';
 import { Icon } from '../../../core/ui';
 import { elementToItem, getItem } from '../listeners/native-listeners';
 import { openImageEditor } from '../../image-editor/image-editor';
+import { elementsMap } from './elements-map';
+import { loadTree } from '../fetch/load-tree';
+import { deleteFile } from '../fetch/delete-file';
 
 const CLASS_PREVIEW = 'jodit-filebrowser-preview',
 	preview_tpl_next = (next = 'next', right = 'right') =>
@@ -21,7 +28,7 @@ const CLASS_PREVIEW = 'jodit-filebrowser-preview',
 		Icon.get('angle-' + right) +
 		'</a>';
 
-export default (self: FileBrowser): ((e: DragEvent) => boolean | void) => {
+export default (self: IFileBrowser): ((e: DragEvent) => boolean | void) => {
 	if (!self.o.contextMenu) {
 		return () => {};
 	}
@@ -29,7 +36,7 @@ export default (self: FileBrowser): ((e: DragEvent) => boolean | void) => {
 	const contextmenu = makeContextMenu(self);
 
 	return (e: DragEvent): boolean | void => {
-		const a = getItem(e.target, self.dialog.container);
+		const a = getItem(e.target, self.container);
 
 		if (!a) {
 			return;
@@ -41,7 +48,7 @@ export default (self: FileBrowser): ((e: DragEvent) => boolean | void) => {
 			ga = (key: string) => attr(item, key) || '';
 
 		self.async.setTimeout(() => {
-			const selectedItem = elementToItem(a, self.elementsMap);
+			const selectedItem = elementToItem(a, elementsMap(self));
 
 			if (!selectedItem) {
 				return;
@@ -89,14 +96,19 @@ export default (self: FileBrowser): ((e: DragEvent) => boolean | void) => {
 							icon: 'bin',
 							title: 'Delete',
 							exec: async () => {
-								await self.deleteFile(
-									ga('data-name'),
-									ga('data-source')
-								);
+								try {
+									await deleteFile(
+										self,
+										ga('data-name'),
+										ga('data-source')
+									);
+								} catch (e: any) {
+									return self.status(e);
+								}
 
 								self.state.activeElements = [];
 
-								return self.loadTree();
+								return loadTree(self).catch(self.status);
 							}
 					  }
 					: false,
@@ -249,7 +261,7 @@ export default (self: FileBrowser): ((e: DragEvent) => boolean | void) => {
 			]);
 		}, self.defaultTimeout);
 
-		self?.dialog.e
+		self.e
 			.on('beforeClose', () => contextmenu.close())
 			.on('beforeDestruct', () => contextmenu.destruct());
 

package/src/modules/file-browser/builders/elements-map.ts

@@ -0,0 +1,31 @@
+/*!
+ * Jodit Editor (https://xdsoft.net/jodit/)
+ * Released under MIT see LICENSE.txt in the project root for license information.
+ * Copyright (c) 2013-2022 Valeriy Chupurnov. All rights reserved. https://xdsoft.net
+ */
+
+/**
+ * @module modules/file-browser
+ */
+
+import type { IDictionary, IFileBrowserItem, IViewBased } from '../../../types';
+
+type ElementsMap = IDictionary<{
+	elm: HTMLElement;
+	item: IFileBrowserItem;
+}>;
+
+const map: WeakMap<IViewBased, ElementsMap> = new WeakMap();
+
+/**
+ * Returns a map of the file's key correspondence to its DOM element in the file browser
+ */
+export const elementsMap = (view: IViewBased): ElementsMap => {
+	let result = map.get(view);
+
+	if (!result) {
+		result = {};
+		map.set(view, result);
+	}
+	return result;
+};

package/src/modules/file-browser/builders/item.ts

@@ -1,7 +1,11 @@
 /*!
  * Jodit Editor (https://xdsoft.net/jodit/)
  * Released under MIT see LICENSE.txt in the project root for license information.
- * Copyright (c) 2013-2021 Valeriy Chupurnov. All rights reserved. https://xdsoft.net
+ * Copyright (c) 2013-2022 Valeriy Chupurnov. All rights reserved. https://xdsoft.net
+ */
+
+/**
+ * @module modules/file-browser
  */
 
 import type {

package/src/modules/file-browser/config.ts

@@ -1,7 +1,11 @@
 /*!
  * Jodit Editor (https://xdsoft.net/jodit/)
  * Released under MIT see LICENSE.txt in the project root for license information.
- * Copyright (c) 2013-2021 Valeriy Chupurnov. All rights reserved. https://xdsoft.net
+ * Copyright (c) 2013-2022 Valeriy Chupurnov. All rights reserved. https://xdsoft.net
+ */
+
+/**
+ * @module modules/file-browser
  */
 
 import { Config } from '../../config';

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

@@ -1,7 +1,11 @@
 /*!
  * Jodit Editor (https://xdsoft.net/jodit/)
  * Released under MIT see LICENSE.txt in the project root for license information.
- * Copyright (c) 2013-2021 Valeriy Chupurnov. All rights reserved. https://xdsoft.net
+ * Copyright (c) 2013-2022 Valeriy Chupurnov. All rights reserved. https://xdsoft.net
+ */
+
+/**
+ * @module modules/file-browser
  */
 
 import type {
@@ -328,8 +332,8 @@ export default class DataProvider implements IFileBrowserDataProvider {
 	/**
 	 * Move a file / directory on the server
 	 *
-	 * @param filepath - The relative path toWYSIWYG the file / folder source
-	 * @param path - Relative toWYSIWYG the directory where you want toWYSIWYG move the file / folder
+	 * @param filepath - The relative path to the file / folder source
+	 * @param path - Relative to the directory where you want to move the file / folder
 	 */
 	move(
 		filepath: string,

package/src/modules/file-browser/factories.ts

@@ -1,7 +1,11 @@
 /*!
  * Jodit Editor (https://xdsoft.net/jodit/)
  * Released under MIT see LICENSE.txt in the project root for license information.
- * Copyright (c) 2013-2021 Valeriy Chupurnov. All rights reserved. https://xdsoft.net
+ * Copyright (c) 2013-2022 Valeriy Chupurnov. All rights reserved. https://xdsoft.net
+ */
+
+/**
+ * @module modules/file-browser
  */
 
 import type {

package/src/modules/file-browser/fetch/delete-file.ts

@@ -0,0 +1,27 @@
+/*!
+ * Jodit Editor (https://xdsoft.net/jodit/)
+ * Released under MIT see LICENSE.txt in the project root for license information.
+ * Copyright (c) 2013-2022 Valeriy Chupurnov. All rights reserved. https://xdsoft.net
+ */
+
+/**
+ * @module modules/file-browser
+ */
+
+import type { IFileBrowser } from '../../../types';
+
+/**
+ * Removes a file from the server
+ */
+export function deleteFile(
+	fb: IFileBrowser,
+	name: string,
+	source: string
+): Promise<void> {
+	return fb.dataProvider
+		.fileRemove(fb.state.currentPath, name, source)
+		.then(message => {
+			fb.status(message || fb.i18n('File "%s" was deleted', name), true);
+		})
+		.catch(fb.status);
+}

package/src/modules/file-browser/fetch/load-items.ts

@@ -0,0 +1,32 @@
+/*!
+ * Jodit Editor (https://xdsoft.net/jodit/)
+ * Released under MIT see LICENSE.txt in the project root for license information.
+ * Copyright (c) 2013-2022 Valeriy Chupurnov. All rights reserved. https://xdsoft.net
+ */
+
+/**
+ * @module modules/file-browser
+ */
+
+import type { IFileBrowser } from '../../../types';
+
+/**
+ * Loads a list of files and adds them to the state
+ */
+export async function loadItems(fb: IFileBrowser): Promise<any> {
+	fb.files.setMod('active', true);
+	fb.files.setMod('loading', true);
+
+	return fb.dataProvider
+		.items(fb.state.currentPath, fb.state.currentSource, {
+			sortBy: fb.state.sortBy,
+			onlyImages: fb.state.onlyImages,
+			filterWord: fb.state.filterWord
+		})
+		.then(resp => {
+			fb.state.elements = resp;
+			fb.state.activeElements = [];
+		})
+		.catch(fb.status)
+		.finally(() => fb.files.setMod('loading', false));
+}

package/src/modules/file-browser/fetch/load-tree.ts

@@ -0,0 +1,49 @@
+/*!
+ * Jodit Editor (https://xdsoft.net/jodit/)
+ * Released under MIT see LICENSE.txt in the project root for license information.
+ * Copyright (c) 2013-2022 Valeriy Chupurnov. All rights reserved. https://xdsoft.net
+ */
+
+/**
+ * @module modules/file-browser
+ */
+
+import type { IFileBrowser } from '../../../types';
+import { error } from '../../../core/helpers/utils/error';
+import { Dom } from '../../../core/dom';
+import { loadItems } from './load-items';
+
+/**
+ * Loads a list of directories
+ */
+export async function loadTree(fb: IFileBrowser): Promise<any> {
+	const errorUni = (e: string | Error) => {
+		throw e instanceof Error ? e : error(e);
+	};
+
+	fb.tree.setMod('active', true);
+
+	Dom.detach(fb.tree.container);
+
+	const items = loadItems(fb);
+
+	if (fb.o.showFoldersPanel) {
+		fb.tree.setMod('loading', true);
+
+		const tree = fb.dataProvider
+			.tree(fb.state.currentPath, fb.state.currentSource)
+			.then(resp => {
+				fb.state.sources = resp;
+			})
+			.catch(e => {
+				errorUni(e);
+			})
+			.finally(() => fb.tree.setMod('loading', false));
+
+		return Promise.all([tree, items]).catch(error);
+	}
+
+	fb.tree.setMod('active', false);
+
+	return items.catch(error);
+}