suneditor 2.46.2 → 3.0.0-alpha.2

package/src/core/base/events.js

@@ -0,0 +1,320 @@
+export default function () {
+	return {
+		/**
+		 * @description Event functions
+		 */
+		onload: null,
+		onScroll: null,
+		onMouseDown: null,
+		onClick: null,
+		onInput: null,
+		onMouseLeave: null,
+		onKeyDown: null,
+		onKeyUp: null,
+		onCopy: null,
+		onCut: null,
+		onFocus: null,
+		onBlur: null,
+		onChange: null,
+
+		/**
+		 * @description Called just before the inline toolbar is positioned and displayed on the screen.
+		 * @param {Element} toolbar Toolbar Element
+		 * @param {Object} context The editor's context object (editor.getContext())
+		 * @param {Object} core Core object
+		 */
+		onShowToolbar: null,
+
+		/**
+		 * @description Called just after the controller is positioned and displayed on the screen.
+		 * controller - editing elements displayed on the screen [image resizing, table editor, link editor..]]
+		 * @param {String} name The name of the plugin that called the controller
+		 * @param {Array} controllers Array of Controller elements
+		 * @param {Object} core Core object
+		 */
+		onShowController: null,
+		onBeforeShowController: null,
+
+		/**
+		 * @description An event when toggling between code view and wysiwyg view.
+		 * @param {Boolean} isCodeView Whether the current code view mode
+		 * @param {Object} core Core object
+		 */
+		onToggleCodeView: null,
+
+		/**
+		 * @description An event when toggling full screen.
+		 * @param {Boolean} isFullScreen Whether the current full screen mode
+		 * @param {Object} core Core object
+		 */
+		onToggleFullScreen: null,
+
+		/**
+		 * @description Called when the editor is resized using the bottom bar
+		 */
+		onResizeEditor: null,
+
+		/**
+		 * @description Called after the "setToolbarButtons" invocation.
+		 * Can be used to tweak buttons properties (useful for custom buttons)
+		 * @param {Element} buttonTray Button tray element
+		 * @param {Object} core Core object
+		 */
+		onSetToolbarButtons: null,
+
+		/**
+		 * --------------------------------------------------- async function ---------------------------------------------------
+		 */
+
+		/**
+		 * @description Event functions
+		 * @param {String} contents Current contents
+		 * @param {String|null} key Root key
+		 */
+		onSave: null,
+
+		/**
+		 * @description Event functions (drop, paste)
+		 * When false is returned, the default behavior is stopped.
+		 * If the string is returned, the cleanData value is modified to the return value.
+		 * @param {Object} e Event object.
+		 * @param {String} cleanData HTML string modified for editor format.
+		 * @param {Boolean} maxChartCount option (true if max character is exceeded)
+		 * @param {Object} core Core object
+		 * @returns {Boolean|String}
+		 */
+		onDrop: null,
+		onPaste: null,
+
+		/**
+		 * @description It replaces the default callback function of the image upload
+		 * @param {Object} response Response object
+		 * @param {Object} info Input information
+		 * - linkValue: Link url value
+		 * - linkNewWindow: Open in new window Check Value
+		 * - inputWidth: Value of width input
+		 * - inputHeight: Value of height input
+		 * - align: Align Check Value
+		 * - isUpdate: Update image if true, create image if false
+		 * - element: If isUpdate is true, the currently selected image.
+		 * @param {Object} core Core object
+		 */
+		imageUploadHandler: null,
+
+		/**
+		 * @description Called before the image is uploaded
+		 * If true is returned, the internal upload process runs normally.
+		 * If false is returned, no image upload is performed.
+		 * If new fileList are returned,  replaced the previous fileList
+		 * If undefined is returned, it waits until "uploadHandler" is executed.
+		 * @param {Array} files Files array
+		 * @param {Object} info info: {
+		 * - linkValue: Link url value
+		 * - linkNewWindow: Open in new window Check Value
+		 * - inputWidth: Value of width input
+		 * - inputHeight: Value of height input
+		 * - align: Align Check Value
+		 * - isUpdate: Update image if true, create image if false
+		 * - element: If isUpdate is true, the currently selected image.
+		 * }
+		 * @param {Object} core Core object
+		 * @param {Function} uploadHandler If undefined is returned, it waits until "uploadHandler" is executed.
+		 *                "uploadHandler" is an upload function with "core" and "info" bound.
+		 *                [upload files] : uploadHandler(files or [new File(...),])
+		 *                [error]        : uploadHandler("Error message")
+		 *                [Just finish]  : uploadHandler()
+		 *                [directly register] : uploadHandler(response) // Same format as "imageUploadUrl" response
+		 *                                   ex) {
+		 *                                      // "errorMessage": "insert error message",
+		 *                                      "result": [ { "url": "...", "name": "...", "size": "999" }, ]
+		 *                                   }
+		 * @returns {Boolean|Array|undefined}
+		 */
+		onImageUploadBefore: null,
+
+		/**
+		 * @description Called before the image is deleted
+		 */
+		onImageDeleteBefore: null,
+
+		/**
+		 * @description Called when the editor loaded, file Current editor value
+		 * -- arguments is same "Image info object" --
+		 */
+		onImageLoad: null,
+
+		/**
+		 * @description Called when the image is uploaded, updated, deleted
+		 * @param {Element} targetElement Target element
+		 * @param {Number} index Uploaded index
+		 * @param {String} state Upload status ('create', 'update', 'delete')
+		 * @param {Object} info Image info object
+		 * - index: data index
+		 * - name: file name
+		 * - size: file size
+		 * - select: select function
+		 * - delete: delete function
+		 * - element: target element
+		 * - src: src attribute of tag
+		 * @param {Number} remainingFilesCount Count of remaining files to upload (0 when added as a url)
+		 * @param {Object} core Core object
+		 */
+		onImageAction: null,
+
+		/**
+		 * @description Called when the image is upload failed
+		 * @param {String} errorMessage Error message
+		 * @param {Object} result Response Object
+		 * @param {Object} core Core object
+		 * @returns {Boolean}
+		 */
+		onImageUploadError: null,
+
+		/**
+		 * @description It replaces the default callback function of the video upload
+		 * @param xmlHttp xmlHttpRequest object
+		 * @param info Input information
+		 * - inputWidth: Value of width input
+		 * - inputHeight: Value of height input
+		 * - align: Align Check Value
+		 * - isUpdate: Update video if true, create video if false
+		 * - element: If isUpdate is true, the currently selected video.
+		 * @param core Core object
+		 */
+		videoUploadHandler: null,
+
+		/**
+		 * @description Called before the video is uploaded
+		 * If true is returned, the internal upload process runs normally.
+		 * If false is returned, no video(iframe, video) upload is performed.
+		 * If new fileList are returned,  replaced the previous fileList
+		 * If undefined is returned, it waits until "uploadHandler" is executed.
+		 * @param {Array} files Files array
+		 * @param {Object} info info: {
+		 * - inputWidth: Value of width input
+		 * - inputHeight: Value of height input
+		 * - align: Align Check Value
+		 * - isUpdate: Update video if true, create video if false
+		 * - element: If isUpdate is true, the currently selected video.
+		 * }
+		 * @param {Object} core Core object
+		 * @param {Function} uploadHandler If undefined is returned, it waits until "uploadHandler" is executed.
+		 *                "uploadHandler" is an upload function with "core" and "info" bound.
+		 *                [upload files] : uploadHandler(files or [new File(...),])
+		 *                [error]        : uploadHandler("Error message")
+		 *                [Just finish]  : uploadHandler()
+		 *                [directly register] : uploadHandler(response) // Same format as "videoUploadUrl" response
+		 *                                   ex) {
+		 *                                      // "errorMessage": "insert error message",
+		 *                                      "result": [ { "url": "...", "name": "...", "size": "999" }, ]
+		 *                                   }
+		 * @returns {Boolean|Array|undefined}
+		 */
+		onVideoUploadBefore: null,
+
+		/**
+		 * @description Called when the video(iframe, video) upload failed
+		 */
+		onVideoUploadError: null,
+
+		/**
+		 * @description Called when the editor loaded, file Current editor value
+		 * -- arguments is same "Image info object" --
+		 */
+		onVideoLoad: null,
+
+		/**
+		 * @description Called when the video(iframe, video) is is uploaded, updated, deleted
+		 * -- arguments is same "onImageUpload" --
+		 */
+		onVideoAction: null,
+
+		/**
+		 * @description Called before the video is deleted
+		 */
+		onVideoDeleteBefore: null,
+
+		/**
+		 * @description It replaces the default callback function of the audio upload
+		 * @param xmlHttp xmlHttpRequest object
+		 * @param info Input information
+		 * - isUpdate: Update audio if true, create audio if false
+		 * - element: If isUpdate is true, the currently selected audio.
+		 * @param core Core object
+		 */
+		audioUploadHandler: null,
+
+		/**
+		 * @description Called before the audio is uploaded
+		 * If true is returned, the internal upload process runs normally.
+		 * If false is returned, no audio upload is performed.
+		 * If new fileList are returned,  replaced the previous fileList
+		 * If undefined is returned, it waits until "uploadHandler" is executed.
+		 * @param {Array} files Files array
+		 * @param {Object} info info: {
+		 * - isUpdate: Update audio if true, create audio if false
+		 * - element: If isUpdate is true, the currently selected audio.
+		 * }
+		 * @param {Object} core Core object
+		 * @param {Function} uploadHandler If undefined is returned, it waits until "uploadHandler" is executed.
+		 *                "uploadHandler" is an upload function with "core" and "info" bound.
+		 *                [upload files] : uploadHandler(files or [new File(...),])
+		 *                [error]        : uploadHandler("Error message")
+		 *                [Just finish]  : uploadHandler()
+		 *                [directly register] : uploadHandler(response) // Same format as "audioUploadUrl" response
+		 *                                   ex) {
+		 *                                      // "errorMessage": "insert error message",
+		 *                                      "result": [ { "url": "...", "name": "...", "size": "999" }, ]
+		 *                                   }
+		 * @returns {Boolean|Array|undefined}
+		 */
+		onAudioUploadBefore: null,
+
+		/**
+		 * @description Called when the audio upload failed
+		 */
+		onAudioUploadError: null,
+
+		/**
+		 * @description Called when the audio is is uploaded, updated, deleted
+		 * -- arguments is same "onImageUpload" --
+		 */
+		onAudioAction: null,
+
+		/**
+		 * @description Called before the audio is deleted
+		 */
+		onAudioDeleteBefore: null,
+
+		/**
+		 * @description Called when the editor loaded, file Current editor value
+		 * -- arguments is same "Image info object" --
+		 */
+		onAudioLoad: null,
+
+		/**
+		 * @description Called when the file is is uploaded, updated, deleted
+		 * -- arguments is same "onImageUpload" --
+		 */
+		onFileAction: null,
+
+		/**
+		 * @description Called before the file is deleted
+		 */
+		onFileDeleteBefore: null,
+
+		/**
+		 * @description Called when the editor loaded, file Current editor value
+		 * -- arguments is same "Image info object" --
+		 */
+		onFileLoad: null,
+
+		onFileUploadBefore: null,
+
+		onFileUploadError: null,
+
+		onExportPdfBefore: null,
+
+		onFileManagerAction: null
+	};
+}

package/src/core/base/history.js

@@ -0,0 +1,301 @@
+/**
+ * @fileoverview history stack closure
+ */
+
+import { _w } from '../../helper/env';
+import { getNodeFromPath, getNodePath } from '../../helper/domUtils';
+import { numbers } from '../../helper';
+
+export default function (editor) {
+	const frameRoots = editor.frameRoots;
+	let delayTime = editor.options.get('historyStackDelayTime');
+	let pushDelay = null;
+	let stackIndex, stack, rootStack, rootInitContents;
+
+	function change(fc, index) {
+		if (editor.status.hasFocus) editor.eventManager.applyTagEffect();
+		editor.history.resetButtons(fc.get('key'), index);
+
+		// user event
+		editor.triggerEvent('onChange', { frameContext: fc, data: fc.get('wysiwyg').innerHTML });
+		if (editor.context.get('toolbar.main').style.display === 'block') editor.toolbar._showBalloon();
+		else if (editor.isSubBalloon && editor.context.get('toolbar.sub.main').style.display === 'block') editor.subToolbar._showBalloon();
+	}
+
+	function setContentFromStack(increase) {
+		const prevKey = stack[stackIndex];
+		const prevRoot = rootStack[prevKey];
+
+		stackIndex += increase;
+		const rootKey = increase < 0 && prevKey !== stack[stackIndex] && prevRoot.index > 0 ? prevKey : stack[stackIndex];
+		const root = rootStack[rootKey];
+		root.index += increase;
+
+		const item = root.value[root.index];
+		frameRoots.get(rootKey).get('wysiwyg').innerHTML = item.content;
+
+		if (prevKey !== rootKey && increase < 0 && stackIndex === 1) {
+			stackIndex = 0;
+		} else if (prevKey !== rootKey && increase > 0 && root.index === 1) {
+			stackIndex++;
+		} else if ((increase < 0 && root.index < 1) || (increase > 0 && root.index > root.value.length)) {
+			stackIndex += increase;
+		}
+
+		let focusKey = rootKey;
+		let focusItem = item;
+		if (increase < 0 && stackIndex > 0 && root.index === 0) {
+			const nextKey = stack[stackIndex + increase];
+			if (nextKey !== rootKey) {
+				const nextRoot = rootStack[nextKey];
+				focusKey = nextKey;
+				focusItem = nextRoot.value[nextRoot.index];
+			}
+		}
+
+		editor.changeFrameContext(focusKey);
+		editor.selection.setRange(getNodeFromPath(focusItem.s.path, focusItem.frame), focusItem.s.offset, getNodeFromPath(focusItem.e.path, focusItem.frame), focusItem.e.offset);
+		editor.focus();
+
+		if (stackIndex < 0) stackIndex = 0;
+		else if (stackIndex >= stack.length) stackIndex = stack.length - 1;
+
+		editor._offCurrentController();
+		editor._checkComponents();
+		editor.char.display();
+		editor._resourcesStateChange(editor.frameContext);
+
+		// onChange
+		change(editor.frameContext, root.index);
+	}
+
+	function setStack(content, range, rootKey, increase) {
+		let s, e;
+		if (!range) {
+			s = { path: [0, 0], offset: [0, 0] };
+			e = { path: 0, offset: 0 };
+		} else {
+			s = {
+				path: getNodePath(range.startContainer, null, null),
+				offset: range.startOffset
+			};
+			e = {
+				path: getNodePath(range.endContainer, null, null),
+				offset: range.endOffset
+			};
+		}
+
+		// set root stack
+		stackIndex += increase;
+		stack[stackIndex] = rootKey;
+		const root = rootStack[rootKey];
+		root.index += increase;
+		root.value[root.index] = {
+			content: content,
+			s: s,
+			e: e,
+			frame: frameRoots.get(rootKey).get('wysiwyg')
+		};
+	}
+
+	function resetRoot(rootKey) {
+		stackIndex++;
+		stack[stackIndex] = rootKey;
+		const root = rootStack[rootKey];
+		root.index = 0;
+		root.value[0] = {
+			content: rootInitContents[rootKey],
+			s: { path: [0, 0], offset: [0, 0] },
+			e: { path: 0, offset: 0 },
+			frame: frameRoots.get(rootKey).get('wysiwyg')
+		};
+	}
+
+	function initRoot(rootKey) {
+		rootStack[rootKey] = { value: [], index: -1 };
+		rootInitContents[rootKey] = frameRoots.get(rootKey).get('wysiwyg').innerHTML;
+	}
+
+	function refreshRoots(root) {
+		const deleteRoot = [];
+		for (let i = stackIndex + 1, len = stack.length; i < len; i++) {
+			if (deleteRoot.includes(stack[i])) continue;
+			deleteRoot.push(stack[i]);
+		}
+
+		stack = stack.slice(0, stackIndex + 1);
+		root.value.splice(stackIndex + 1);
+		editor.applyCommandTargets('redo', (e) => {
+			e.setAttribute('disabled', true);
+		});
+
+		for (let i = 0, len = deleteRoot.length; i < len; i++) {
+			if (!stack.includes(deleteRoot[i])) initRoot(deleteRoot[i]);
+		}
+	}
+
+	function pushStack(rootKey, range) {
+		editor._checkComponents();
+
+		const fc = frameRoots.get(rootKey);
+		const current = fc.get('wysiwyg').innerHTML;
+		const root = rootStack[rootKey];
+		if (!current || (root.value[root.index] && current === root.value[root.index].content)) return;
+		if (stack.length > stackIndex + 1) refreshRoots(root);
+		if (root.value.length === 0) resetRoot(rootKey);
+
+		setStack(current, range, rootKey, 1);
+
+		if (stackIndex === 1) {
+			editor.applyCommandTargets('undo', (e) => {
+				e.removeAttribute('disabled');
+			});
+		}
+
+		editor.char.display();
+		change(fc, root.index);
+	}
+
+	return {
+		/**
+		 * @description Saving the current status to the history object stack
+		 * If "delay" is true, it will be saved after (options.get('historyStackDelayTime') || 400) miliseconds
+		 * If the function is called again with the "delay" argument true before it is saved, the delay time is renewal
+		 * You can specify the delay time by sending a number.
+		 * @param {Boolean|Number} delay If true, Add stack without delay time.
+		 */
+		push(delay, rootKey) {
+			rootKey = rootKey || editor.status.rootKey;
+			const range = editor.status._range;
+
+			_w.setTimeout(editor._resourcesStateChange.bind(editor, frameRoots.get(rootKey)), 0);
+			const time = typeof delay === 'number' ? (delay > 0 ? delay : 0) : !delay ? 0 : delayTime;
+
+			if (!time || pushDelay) {
+				_w.clearTimeout(pushDelay);
+				if (!time) {
+					pushStack(rootKey, range);
+					return;
+				}
+			}
+
+			pushDelay = _w.setTimeout(() => {
+				_w.clearTimeout(pushDelay);
+				pushDelay = null;
+				pushStack(rootKey, range);
+			}, time);
+		},
+
+		check(rootKey, range) {
+			if (pushDelay) {
+				_w.clearTimeout(pushDelay);
+				pushDelay = null;
+				pushStack(rootKey, range);
+			}
+		},
+
+		/**
+		 * @description Undo function
+		 */
+		undo() {
+			if (stackIndex > 0) {
+				setContentFromStack(-1);
+			}
+		},
+
+		/**
+		 * @description Redo function
+		 */
+		redo() {
+			if (stack.length - 1 > stackIndex) {
+				setContentFromStack(1);
+			}
+		},
+
+		overwrite(rootKey) {
+			setStack(frameRoots.get(rootKey || editor.status.rootKey).get('wysiwyg').innerHTML, null, editor.status.rootKey, 0);
+		},
+
+		/**
+		 * @description Reset the history object
+		 */
+		reset() {
+			editor.applyCommandTargets('undo', (e) => {
+				e.setAttribute('disabled', true);
+			});
+			editor.applyCommandTargets('redo', (e) => {
+				e.setAttribute('disabled', true);
+			});
+
+			editor.applyCommandTargets('save', (e) => {
+				e.setAttribute('disabled', true);
+			});
+
+			editor.applyFrameRoots((e) => e.set('historyIndex', -1));
+			editor.applyFrameRoots((e) => e.set('isChanged', false));
+
+			stackIndex = -1;
+			stack = [];
+			rootStack = {};
+			rootInitContents = {};
+
+			const rootKeys = editor.rootKeys;
+			for (let i = 0, len = rootKeys.length; i < len; i++) {
+				initRoot(rootKeys[i]);
+			}
+		},
+
+		/**
+		 * @description Reset the disabled state of the buttons to fit the current stack.
+		 */
+		resetButtons(rootKey, index) {
+			const isReset = !numbers.is(index);
+			const root = rootStack[rootKey === undefined ? stack[stackIndex] : rootKey];
+			index = !isReset ? index : root.index;
+			const target = editor.frameRoots.get(rootKey);
+			const rootLen = root.value.length - 1;
+
+			editor.applyCommandTargets('undo', (e) => {
+				if (index > 0 && index <= rootLen) e.removeAttribute('disabled');
+				else e.setAttribute('disabled', true);
+			});
+			editor.applyCommandTargets('redo', (e) => {
+				if (index > -1 && index < rootLen) e.removeAttribute('disabled');
+				else e.setAttribute('disabled', true);
+			});
+
+			const savedIndex = target.get('savedIndex');
+			const historyIndex = target.get('historyIndex');
+			const isChanged = savedIndex > -1 ? savedIndex !== index : isReset ? root.length > 0 : index > 0 && historyIndex !== index;
+
+			target.set('historyIndex', index);
+			target.set('isChanged', isChanged);
+			editor.applyCommandTargets('save', (e) => {
+				if (isChanged) e.removeAttribute('disabled');
+				else e.setAttribute('disabled', true);
+			});
+
+			editor.triggerEvent('onResetButtons', { rootKey });
+		},
+
+		getRootStack() {
+			return rootStack;
+		},
+
+		/**
+		 * @description Reset the delay time.
+		 * @param {number} time millisecond
+		 */
+		resetDelayTime(time) {
+			delayTime = time;
+		},
+
+		/**
+		 * @description Remove all stacks and remove the timeout function.
+		 */
+		destroy() {
+			if (pushDelay) _w.clearTimeout(pushDelay);
+			stackIndex = stack = rootStack = rootInitContents = null;
+		}
+	};
+}