suneditor 3.0.0-rc.4 → 3.0.0

package/src/core/logic/shell/_commandExecutor.js

@@ -59,7 +59,7 @@ export default class CommandExecutor {
 	 * @description Execute default command of command button
 	 */
 	async execute(command, button) {
-		if (this.#frameContext.get('isReadOnly') && !/copy|cut|selectAll|codeView|fullScreen|print|preview|showBlocks/.test(command)) return;
+		if (this.#frameContext.get('isReadOnly') && !/copy|cut|selectAll|codeView|markdownView|fullScreen|print|preview|showBlocks|finder/.test(command)) return;
 
 		switch (command) {
 			case 'selectAll':
@@ -83,9 +83,15 @@ export default class CommandExecutor {
 					this.#frameContext.get('documentType').reHeader();
 				}
 				break;
+			case 'finder':
+				this.#$.finder.open(true);
+				break;
 			case 'codeView':
 				this.#$.viewer.codeView(!this.#frameContext.get('isCodeView'));
 				break;
+			case 'markdownView':
+				this.#$.viewer.markdownView(!this.#frameContext.get('isMarkdownView'));
+				break;
 			case 'fullScreen':
 				this.#$.viewer.fullScreen(!this.#frameContext.get('isFullScreen'));
 				break;

package/src/core/logic/shell/commandDispatcher.js

@@ -16,7 +16,7 @@ const ACTIVE_EVENT_COMMANDS = ['bold', 'underline', 'italic', 'strike', 'subscri
  * - such as undo, redo, saving, full-screen toggle, and text direction commands.
  * @constant {string[]}
  */
-const BASIC_COMMANDS = ACTIVE_EVENT_COMMANDS.concat(['undo', 'redo', 'save', 'fullScreen', 'showBlocks', 'codeView', 'dir', 'dir_ltr', 'dir_rtl']);
+const BASIC_COMMANDS = ACTIVE_EVENT_COMMANDS.concat(['undo', 'redo', 'save', 'fullScreen', 'showBlocks', 'codeView', 'markdownView', 'finder', 'dir', 'dir_ltr', 'dir_rtl']);
 
 /**
  * @description Routes toolbar button commands to their handlers and manages active button states.

package/src/core/logic/shell/component.js

@@ -1,4 +1,4 @@
-import { dom, env, numbers, unicode, keyCodeMap, converter } from '../../../helper';
+import { dom, env, numbers, unicode, keyCodeMap } from '../../../helper';
 import { Figure } from '../../../modules/contract';
 import { _DragHandle } from '../../../modules/ui';
 
@@ -339,11 +339,8 @@ class Component {
 			_DragHandle.set('__overInfo', __overInfo === ON_OVER_COMPONENT ? undefined : false);
 			if (__overInfo !== ON_OVER_COMPONENT) this.#addGlobalEvent();
 			if (!info.isFile) this.#addNotFileGlobalEvent();
-		}, 0);
-
-		converter.debounce(() => {
 			dom.utils.addClass(info.container, 'se-component-selected');
-		}, 0)();
+		}, 0);
 
 		if (notOver && !this.#store.get('hasFocus') && !this.#store.get('_preventFocus')) {
 			this.#kernel._eventOrchestrator.__postFocusEvent(this.#frameContext, null);
@@ -513,10 +510,11 @@ class Component {
 		if (this.currentInfo) {
 			const infoContainer = this.currentInfo.container;
 			const infoCover = this.currentInfo.cover;
-			converter.debounce(() => {
+
+			_w.setTimeout(() => {
 				RemoveSelectedClass(infoContainer);
 				dom.utils.removeClass(infoCover, 'se-figure-over-selected');
-			}, 0)();
+			}, 0);
 		}
 
 		if (this.#frameContext.get('lineBreaker_t')) {

package/src/core/logic/shell/history.js

@@ -17,6 +17,7 @@ export default function History(kernel) {
 	const frameContext = contextProvider.frameContext;
 
 	let delayTime = $.options.get('historyStackDelayTime');
+	const maxStackSize = $.options.get('historyStackSize');
 	let pushDelay = null;
 	let stackIndex, stack, rootStack, rootInitContents;
 	let waiting = false;
@@ -204,6 +205,29 @@ export default function History(kernel) {
 
 		setStack(current, range, rootKey, 1);
 
+		// Enforce max stack size
+		if (root.value.length > maxStackSize) {
+			const overflow = root.value.length - maxStackSize;
+			root.value.splice(0, overflow);
+			root.index -= overflow;
+
+			// Remove corresponding global stack entries
+			let removed = 0;
+			for (let i = stack.length - 1; i >= 0 && removed < overflow; i--) {
+				if (stack[i] === rootKey) {
+					// find the oldest entry for this rootKey
+					for (let j = 0; j < stack.length; j++) {
+						if (stack[j] === rootKey) {
+							stack.splice(j, 1);
+							removed++;
+							break;
+						}
+					}
+				}
+			}
+			stackIndex -= overflow;
+		}
+
 		if (stackIndex === 1) {
 			$.commandDispatcher.applyTargets('undo', (e) => {
 				e.disabled = false;

package/src/core/logic/shell/shortcuts.js

@@ -106,14 +106,14 @@ class Shortcuts {
 	 * @description Registers custom shortcut keys (keys starting with `_`) into the shortcut map.
 	 * Called during initialization and when toolbar is reset.
 	 */
-	_registerCustomShortcuts() {
+	_registerShortcuts() {
 		const shortcuts = this.#options.get('shortcuts');
 		const reverseCommandArray = this.#options.get('_reverseCommandArray');
 		const keyMap = (this.keyMap = new Map());
 		const reverseKeys = this.reverseKeys;
 		for (const key of Object.keys(shortcuts)) {
-			if (!key.startsWith('_')) continue;
-			CreateShortcuts('', null, shortcuts[key], keyMap, reverseCommandArray, reverseKeys);
+			const command = key.startsWith('_') ? '' : key;
+			CreateShortcuts(command, null, shortcuts[key], keyMap, reverseCommandArray, reverseKeys);
 		}
 	}
 

package/src/core/logic/shell/ui.js

@@ -28,6 +28,7 @@ class UIManager {
 	#alertInner;
 	#closeListener;
 	#closeSignal;
+	#bindAlertClick = null;
 	#backWrapper;
 
 	#controllerOnBtnDisabled = false;
@@ -97,7 +98,7 @@ class UIManager {
 		this.#alertArea = /** @type {HTMLElement} */ (this.#carrierWrapper.querySelector('.se-alert'));
 		this.#alertInner = /** @type {HTMLElement} */ (this.#carrierWrapper.querySelector('.se-alert .se-modal-inner'));
 		this.#alertInner.appendChild(alertModal);
-		this.#closeListener = [CloseListener.bind(this), OnClick_alert.bind(this)];
+		this.#closeListener = [this.#OnCloseListener.bind(this), this.#OnClick_alert.bind(this)];
 		this.#closeSignal = false;
 		this.#backWrapper = /** @type {HTMLElement} */ (this.#carrierWrapper.querySelector('.se-back-wrapper'));
 
@@ -393,7 +394,7 @@ class UIManager {
 		dom.utils.removeClass(this.alertModal, 'se-alert-error|se-alert-success');
 		if (type) dom.utils.addClass(this.alertModal, `se-alert-${type}`);
 
-		if (this.#closeSignal) this.#alertInner.addEventListener('click', this.#closeListener[1]);
+		if (this.#closeSignal) this.#bindAlertClick = this.#eventManager.addEvent(this.#alertInner, 'click', this.#closeListener[1]);
 		this.#bindClose &&= this.#eventManager.removeGlobalEvent(this.#bindClose);
 		this.#bindClose = this.#eventManager.addGlobalEvent('keydown', this.#closeListener[0]);
 
@@ -408,7 +409,7 @@ class UIManager {
 		dom.utils.removeClass(this.alertModal, 'se-modal-show');
 		dom.utils.removeClass(this.alertModal, 'se-alert-*');
 		this.#alertArea.style.display = 'none';
-		if (this.#closeSignal) this.#alertInner.removeEventListener('click', this.#closeListener[1]);
+		this.#bindAlertClick &&= this.#eventManager.removeEvent(this.#bindAlertClick);
 		this.#bindClose &&= this.#eventManager.removeGlobalEvent(this.#bindClose);
 	}
 
@@ -580,10 +581,10 @@ class UIManager {
 		const y = eventWysiwyg.scrollTop || eventWysiwyg.scrollY || 0;
 		const x = eventWysiwyg.scrollLeft || eventWysiwyg.scrollX || 0;
 
-		if (this.#store.mode.isBalloon) {
+		if (this.#store.mode.isBalloon && this.#context.get('toolbar_main').style.display === 'block') {
 			this.#context.get('toolbar_main').style.top = this.#$.toolbar.balloonOffset.top - y + 'px';
 			this.#context.get('toolbar_main').style.left = this.#$.toolbar.balloonOffset.left - x + 'px';
-		} else if (this.#store.mode.isSubBalloon) {
+		} else if (this.#store.mode.isSubBalloon && this.#context.get('toolbar_sub_main').style.display === 'block') {
 			this.#context.get('toolbar_sub_main').style.top = this.#$.subToolbar.balloonOffset.top - y + 'px';
 			this.#context.get('toolbar_sub_main').style.left = this.#$.subToolbar.balloonOffset.left - x + 'px';
 		}
@@ -855,6 +856,24 @@ class UIManager {
 		this._initToggleButtons();
 	}
 
+	/**
+	 * @param {MouseEvent} e - Event object
+	 */
+	#OnClick_alert(e) {
+		const eventTarget = dom.query.getEventTarget(e);
+		if (/close/.test(eventTarget.getAttribute('data-command')) || eventTarget === this.#alertInner) {
+			this.alertClose();
+		}
+	}
+
+	/**
+	 * @param {KeyboardEvent} e - Event object
+	 */
+	#OnCloseListener(e) {
+		if (!keyCodeMap.isEsc(e.code)) return;
+		this.alertClose();
+	}
+
 	/**
 	 * @internal
 	 * @description Destroy the UI instance and release memory
@@ -869,9 +888,7 @@ class UIManager {
 		this.#bindClose &&= this.#eventManager.removeGlobalEvent(this.#bindClose);
 
 		// Remove alert click event listener
-		if (this.#closeSignal && this.#alertInner) {
-			this.#alertInner.removeEventListener('click', this.#closeListener[1]);
-		}
+		this.#bindAlertClick &&= this.#eventManager.removeEvent(this.#bindAlertClick);
 
 		this.opendModal = null;
 		this.opendBrowser = null;
@@ -882,24 +899,6 @@ class UIManager {
 	}
 }
 
-/**
- * @param {MouseEvent} e - Event object
- */
-function OnClick_alert(e) {
-	const eventTarget = dom.query.getEventTarget(e);
-	if (/close/.test(eventTarget.getAttribute('data-command')) || eventTarget === this._alertInner) {
-		this.alertClose();
-	}
-}
-
-/**
- * @param {KeyboardEvent} e - Event object
- */
-function CloseListener(e) {
-	if (!keyCodeMap.isEsc(e.code)) return;
-	this.alertClose();
-}
-
 function CreateAlertHTML({ lang, icons }) {
 	const html = '<div><button class="close" data-command="close" title="' + lang.close + '">' + icons.cancel + '</button></div><div><span></span></div>';
 	return dom.utils.createElement('DIV', { class: 'se-alert-content' }, html);

package/src/core/schema/frameContext.js

@@ -30,6 +30,9 @@ import { get as getNumber } from '../../helper/numbers';
  * @property {HTMLElement} codeWrapper - Wrapper element for the code-view mode.
  * @property {HTMLElement & HTMLTextAreaElement} code - Code view editing element (a <textarea> or <pre>).
  * @property {HTMLTextAreaElement} codeNumbers - Element displaying line numbers in code view mode.
+ * @property {HTMLElement} markdownWrapper - Wrapper element for the markdown-view mode.
+ * @property {HTMLTextAreaElement} markdown - Markdown view editing element (a <textarea>).
+ * @property {HTMLTextAreaElement} markdownNumbers - Element displaying line numbers in markdown view mode.
  * @property {HTMLElement} placeholder - Placeholder element shown when the editor is empty.
  * @property {HTMLElement} statusbar - Editor status bar element (for resizing, info, etc.).
  * @property {HTMLElement} navigation - Navigation element (e.g., for outline or bookmarks).
@@ -47,6 +50,7 @@ import { get as getNumber } from '../../helper/numbers';
  *
  * === State Flags ===
  * @property {boolean} isCodeView - Whether the editor is currently in code view mode.
+ * @property {boolean} isMarkdownView - Whether the editor is currently in markdown view mode.
  * @property {boolean} isFullScreen - Whether the editor is currently in fullscreen mode.
  * @property {boolean} isReadOnly - Whether the editor is set to readonly mode.
  * @property {boolean} isDisabled - Whether the editor is currently disabled.
@@ -90,7 +94,7 @@ import { get as getNumber } from '../../helper/numbers';
  * @param {*} key root key
  * @returns {FrameContexType}
  */
-export function CreateFrameContext(editorTarget, top, wwFrame, codeWrapper, codeFrame, statusbar, documentTypeInner, key) {
+export function CreateFrameContext(editorTarget, top, wwFrame, codeWrapper, codeFrame, markdownWrapper, markdownFrame, statusbar, documentTypeInner, key) {
 	const m = /** @type {FrameContexType} */ (
 		new Map([
 			['key', key],
@@ -101,21 +105,31 @@ export function CreateFrameContext(editorTarget, top, wwFrame, codeWrapper, code
 			['wrapper', top.querySelector('.se-wrapper')],
 			['wysiwygFrame', wwFrame],
 			['wysiwyg', wwFrame], // options.iframe ? wwFrame.contentDocument.body : wwFrame
+			// codeview
 			['codeWrapper', codeWrapper],
 			['code', codeFrame],
 			['codeNumbers', /** @type {HTMLTextAreaElement} */ (codeWrapper?.querySelector('.se-code-view-line'))],
+			// markdown
+			['markdownWrapper', markdownWrapper],
+			['markdown', markdownFrame],
+			['markdownNumbers', /** @type {HTMLTextAreaElement} */ (markdownWrapper?.querySelector('.se-markdown-view-line'))],
+			// linebreak, toolbar internal
 			['lineBreaker_t', top.querySelector('.se-line-breaker-component-t')],
 			['lineBreaker_b', top.querySelector('.se-line-breaker-component-b')],
 			['_stickyDummy', top.querySelector('.se-toolbar-sticky-dummy')],
 			['_toolbarShadow', top.querySelector('.se-toolbar-shadow')],
 			['_minHeight', getNumber(wwFrame.style.minHeight || '65', 0)],
+			// is
 			['isCodeView', false],
+			['isMarkdownView', false],
 			['isFullScreen', false],
 			['isReadOnly', false],
 			['isDisabled', false],
 			['isChanged', false],
+			// index
 			['historyIndex', -1],
 			['savedIndex', -1],
+			// document type
 			['documentTypeInner', documentTypeInner.inner],
 			['documentTypePage', documentTypeInner.page],
 			['documentTypePageMirror', documentTypeInner.pageMirror],