suneditor 3.0.0-beta.1 → 3.0.0-beta.3

package/src/core/editor.js

@@ -1,5 +1,5 @@
 import { env, converter, dom, numbers } from '../helper';
-import Constructor, { InitOptions, UpdateButton, CreateShortcuts, CreateStatusbar, RO_UNAVAILABD } from './section/constructor';
+import Constructor, { InitOptions, UpdateButton, CreateShortcuts, CreateStatusbar, OPTION_FRAME_FIXED_FLAG, OPTION_FIXED_FLAG } from './section/constructor';
 import { UpdateStatusbarContext } from './section/context';
 import { BASIC_COMMANDS, ACTIVE_EVENT_COMMANDS, SELECT_ALL, DIR_BTN_ACTIVE, SAVE, COPY_FORMAT, FONT_STYLE, PAGE_BREAK } from './section/actives';
 import History from './base/history';
@@ -383,11 +383,17 @@ function Editor(multiTargets, options) {
 	this._notHideToolbar = false;
 
 	/**
-	 * @description Variables for controlling focus and blur events
+	 * @description Variables for controlling blur events
 	 * @type {boolean}
 	 */
 	this._preventBlur = false;
 
+	/**
+	 * @description Variables for controlling focus events
+	 * @type {boolean}
+	 */
+	this._preventFocus = false;
+
 	/**
 	 * @description Variables for controlling selection change events
 	 */
@@ -762,37 +768,39 @@ Editor.prototype = {
 	 * @param {EditorInitOptions_editor} newOptions Options
 	 */
 	resetOptions(newOptions) {
-		const _keys = Object.keys;
 		this.viewer.codeView(false);
 		this.viewer.showBlocks(false);
 
-		const newOptionKeys = _keys(newOptions);
+		const rootDiff = new Map();
+		const frameRoots = this.frameRoots;
+		const newRoots = [];
+		const newRootKeys = new Map();
+
+		// frame roots
+		const nRoot = {};
+		for (const k in newOptions) {
+			if (OPTION_FRAME_FIXED_FLAG[k] === undefined) continue;
+			nRoot[k] = newOptions[k];
+			delete newOptions[k];
+		}
+		for (const rootKey of frameRoots.keys()) {
+			newOptions[rootKey || ''] = { ...nRoot, ...newOptions[rootKey || ''] };
+		}
+
+		// check reoption validation
+		const newOptionKeys = Object.keys(newOptions);
 		CheckResetKeys(newOptionKeys, this.plugins, '');
 		if (newOptionKeys.length === 0) return;
 
+		if (frameRoots.size === 1) {
+			newOptionKeys.unshift(null);
+		}
+
 		// option merge
-		const rootDiff = {};
-		const rootKeys = this.rootKeys;
-		const frameRoots = this.frameRoots;
-		const newRoots = [];
-		const newRootKeys = {};
-		this._originOptions = [newOptions, this._originOptions].reduce(function (init, option) {
+		const _originOptions = [this._originOptions, newOptions].reduce((init, option) => {
 			for (const key in option) {
-				if (rootKeys.includes(key) && option[key]) {
-					const nro = option[key];
-					const newKeys = _keys(nro);
-					CheckResetKeys(newKeys, null, key + '.');
-					if (newKeys.length === 0) continue;
-
-					rootDiff[key] = new Map();
-					const o = frameRoots.get(key).get('options').get('_origin');
-					for (const rk in nro) {
-						const roV = nro[rk];
-						if (!newKeys.includes(rk) || o[rk] === roV) continue;
-						rootDiff[key].set(GetResetDiffKey(rk), true);
-						o[rk] = roV;
-					}
-					newRoots.push((newRootKeys[key] = { options: o }));
+				if (frameRoots.has(key || null)) {
+					RestoreFrameOptions(key, option, frameRoots, rootDiff, newRootKeys, newRoots);
 				} else {
 					init[key] = option[key];
 				}
@@ -802,17 +810,25 @@ Editor.prototype = {
 
 		// init options
 		const options = this.options;
-		const newMap = InitOptions(this._originOptions, newRoots, this.plugins).o;
-		/** --------- root start --------- */
-		for (let i = 0, k; (k = newOptionKeys[i]); i++) {
-			if (newRootKeys[k]) {
-				const diff = rootDiff[k];
+		const newO = InitOptions(_originOptions, newRoots, this.plugins);
+		const newOptionMap = newO.o;
+		const newFrameMap = newO.frameMap;
+		/** --------- [root start] --------- */
+		for (let i = 0, len = newOptionKeys.length, k; i < len; i++) {
+			k = newOptionKeys[i] || null;
+
+			if (newRootKeys.has(k)) {
+				const diff = rootDiff.get(k);
 				const fc = frameRoots.get(k);
 				const originOptions = fc.get('options');
-				const newRootOptions = newRootKeys[k].options;
+				const newRootOptions = newFrameMap.get(k);
 
-				// statusbar
-				if (diff.has('statusbar')) {
+				// --- set options : fc ---
+				fc.set('options', newRootOptions);
+
+				// statusbar-changed
+				if (diff.has('statusbar-changed')) {
+					// statusbar
 					dom.utils.removeItem(fc.get('statusbar'));
 					if (newRootOptions.get('statusbar')) {
 						const statusbar = CreateStatusbar(newRootOptions, null).statusbar;
@@ -824,6 +840,10 @@ Editor.prototype = {
 						newRootOptions.set('__statusbarEvent', null);
 						UpdateStatusbarContext(null, fc);
 					}
+					// charCounter
+					if (fc.get('statusbar')) {
+						this.char.display(fc);
+					}
 				}
 
 				// iframe's options
@@ -834,6 +854,7 @@ Editor.prototype = {
 					for (const origin_k in originAttr) frame.removeAttribute(origin_k, originAttr[origin_k]);
 					for (const new_k in newAttr) frame.setAttribute(new_k, newAttr[new_k]);
 				}
+
 				if (diff.has('iframe_cssFileName')) {
 					const docHead = fc.get('_wd').head;
 					const links = docHead.getElementsByTagName('link');
@@ -844,11 +865,12 @@ Editor.prototype = {
 					while (newLinks[0]) docHead.insertBefore(newLinks[0], sTag);
 				}
 
-				// --- options set ---
-				fc.set('options', newRootOptions);
+				if (diff.has('placeholder')) {
+					fc.get('placeholder').textContent = newRootOptions.get('placeholder');
+				}
 
 				// frame styles
-				this.ui.setEditorStyle(newRootOptions.get('_defaultStyles'), fc);
+				this.ui.setEditorStyle(newRootOptions.get('editorStyle'), fc);
 
 				// frame attributes
 				const frame = fc.get('wysiwyg');
@@ -859,25 +881,47 @@ Editor.prototype = {
 
 				continue;
 			}
-			/** --------- root end --------- */
+			/** --------- [root end] --------- */
 
-			options.set(k, newMap.get(k));
+			//  --- set options ---
+			options.set(k, newOptionMap.get(k));
 
-			/** apply option */
-			// history delay time
-			if (k === 'historyStackDelayTime') {
-				this.history.resetDelayTime(options.get('historyStackDelayTime'));
-				continue;
-			}
-			// set dir
-			if (k === 'textDirection') {
-				this.setDir(options.get('_rtl') ? 'ltr' : 'rtl');
-				continue;
+			/** Options that require a function call */
+			switch (k) {
+				case 'theme': {
+					this.ui.setTheme(options.get('theme'));
+					break;
+				}
+				case 'events': {
+					const events = options.get('events');
+					for (const name in events) {
+						this.events[name] = events[name];
+					}
+					break;
+				}
+				case 'autoStyleify': {
+					this.html.__resetAutoStyleify(options.get('autoStyleify'));
+					break;
+				}
+				case 'textDirection': {
+					this.setDir(options.get('_rtl') ? 'ltr' : 'rtl');
+					break;
+				}
+				case 'historyStackDelayTime': {
+					this.history.resetDelayTime(options.get('historyStackDelayTime'));
+					break;
+				}
+				case 'defaultLineBreakFormat': {
+					this.format.__resetBrLineBreak(options.get('defaultLineBreakFormat'));
+				}
 			}
 		}
 
 		/** apply options */
-		// toolbar
+		// _origin
+		this._originOptions = _originOptions;
+
+		// --- [toolbar] ---
 		const toolbar = this.context.get('toolbar.main');
 		// width
 		if (/inline|balloon/i.test(options.get('mode')) && newOptionKeys.includes('toolbar_width')) {
@@ -886,6 +930,8 @@ Editor.prototype = {
 		// hide
 		if (options.get('toolbar_hide')) {
 			toolbar.style.display = 'none';
+		} else {
+			toolbar.style.display = '';
 		}
 		// shortcuts hint
 		if (options.get('shortcutsHint')) {
@@ -894,11 +940,6 @@ Editor.prototype = {
 			dom.utils.addClass(toolbar, 'se-shortcut-hide');
 		}
 
-		// theme
-		if (this._originOptions.theme !== (newOptions.theme ?? this._originOptions.theme)) {
-			this.ui.setTheme(newOptions.theme);
-		}
-
 		this.effectNode = null;
 		this._setFrameInfo(this.frameRoots.get(this.status.rootKey));
 	},
@@ -971,7 +1012,7 @@ Editor.prototype = {
 
 		const fileComponentInfo = this.component.get(focusEl);
 		if (fileComponentInfo) {
-			this.component.select(fileComponentInfo.target, fileComponentInfo.pluginName, false);
+			this.component.select(fileComponentInfo.target, fileComponentInfo.pluginName);
 		} else if (focusEl) {
 			if (focusEl.nodeType !== 3) {
 				focusEl = dom.query.getEdgeChild(
@@ -1444,7 +1485,7 @@ Editor.prototype = {
 
 	/**
 	 * @private
-	 * @description Caches shortcut keys for commands.
+	 * @description Caches custom(starts with "_") shortcut keys for commands.
 	 */
 	__cachingShortcuts() {
 		const shortcuts = this.options.get('shortcuts');
@@ -1689,16 +1730,41 @@ Editor.prototype = {
 	Constructor: Editor
 };
 
+function RestoreFrameOptions(key, option, frameRoots, rootDiff, newRootKeys, newRoots) {
+	const nro = option[key];
+	const newKeys = Object.keys(nro);
+	CheckResetKeys(newKeys, null, key + '.');
+	if (newKeys.length === 0) return false;
+
+	const rootKey = key || null;
+	rootDiff.set(rootKey, new Map());
+
+	const o = frameRoots.get(rootKey).get('options').get('_origin');
+	const no = {};
+	const hasOwn = Object.prototype.hasOwnProperty;
+	for (const rk in nro) {
+		if (!hasOwn.call(OPTION_FRAME_FIXED_FLAG, rk)) continue;
+		const roV = nro[rk];
+		if (!newKeys.includes(rk) || o[rk] === roV) continue;
+		rootDiff.get(rootKey).set(GetResetDiffKey(rk), true);
+		no[rk] = roV;
+	}
+
+	const newO = { ...o, ...no };
+	newRootKeys.set(rootKey, new Map(Object.entries(newO)));
+	newRoots.push({ key: rootKey, options: newO });
+}
+
 function GetResetDiffKey(key) {
-	if (/^statusbar/i.test(key)) return 'statusbar';
+	if (/^statusbar|^charCounter/.test(key)) return 'statusbar-changed';
 	return key;
 }
 
 function CheckResetKeys(keys, plugins, root) {
 	for (let i = 0, len = keys.length, k; i < len; i++) {
 		k = keys[i];
-		if (RO_UNAVAILABD.includes(k) || (plugins && plugins[k])) {
-			console.warn(`[SUNEDITOR.warn.resetOptions] "[${root + k}]" options not available in resetOptions have no effect.`);
+		if (OPTION_FIXED_FLAG[k] === 'fixed' || OPTION_FRAME_FIXED_FLAG[k] === 'fixed' || (plugins && plugins[k])) {
+			console.warn(`[SUNEDITOR.warn.resetOptions] The "[${root + k}]" option cannot be changed after the editor is created.`);
 			keys.splice(i--, 1);
 			len--;
 		}

package/src/core/section/actives.js

@@ -31,6 +31,35 @@ const __RemoveCopyformt = function (ww, button) {
 	return true;
 };
 
+/**
+ * @private
+ * @description Finds the first and last child elements in a selection area.
+ * @param {Element} selectArea Selection area element
+ * @returns {{ first: Node, last: Node}} Object containing the first and last child elements
+ */
+const __findFirstAndLast = function (selectArea) {
+	const isContentLess = dom.check.isContentLess;
+	const isTable = dom.check.isTable;
+	const first =
+		dom.query.getEdgeChild(
+			dom.query.getEdgeChild(selectArea, (current) => !isContentLess(current), false),
+			(current) => {
+				return current.childNodes.length === 0 || current.nodeType === 3 || isTable(current);
+			},
+			false
+		) || selectArea.firstChild;
+	const last =
+		dom.query.getEdgeChild(
+			selectArea.lastChild,
+			(current) => {
+				return current.childNodes.length === 0 || current.nodeType === 3 || isTable(current);
+			},
+			true
+		) || selectArea.lastChild;
+
+	return { first, last };
+};
+
 /**
  * @description List of commands that trigger active event handling in the editor.
  * - These commands typically apply inline formatting or structural changes.
@@ -52,26 +81,60 @@ export const BASIC_COMMANDS = ACTIVE_EVENT_COMMANDS.concat(['undo', 'redo', 'sav
 export function SELECT_ALL(editor) {
 	editor.ui._offCurrentController();
 	editor.menu.containerOff();
-	const figcaption = dom.query.getParentElement(editor.selection.getNode(), 'FIGCAPTION');
-	const selectArea = figcaption || editor.frameContext.get('wysiwyg');
 
-	let first = dom.query.getEdgeChild(selectArea.firstChild, (current) => current.childNodes.length === 0 || current.nodeType === 3 || dom.check.isTable(current), false) || selectArea.firstChild;
-	let last = dom.query.getEdgeChild(selectArea.lastChild, (current) => current.childNodes.length === 0 || current.nodeType === 3 || dom.check.isTable(current), true) || selectArea.lastChild;
+	// check all tags
+	const ww = editor.frameContext.get('wysiwyg');
+	let prevScopeTag = null;
+	let prevScopeTagName = '';
+	const scopeSelectionTags = editor.options.get('scopeSelectionTags');
+	const range = editor.selection.getRange();
+	if (!range.collapsed) {
+		let commonNode = range.commonAncestorContainer;
+		let commonNodeName = commonNode.nodeName?.toLowerCase();
+
+		while (commonNode && ((!commonNode.nextSibling && !commonNode.previousSibling && !scopeSelectionTags.includes(commonNodeName)) || dom.check.isContentLess(commonNodeName)) && commonNode !== ww) {
+			commonNode = commonNode.parentElement;
+			commonNodeName = commonNode.nodeName?.toLowerCase();
+		}
+
+		if (scopeSelectionTags.includes(commonNodeName)) {
+			prevScopeTag = commonNode;
+			prevScopeTagName = commonNodeName;
+		}
+	}
+
+	// select all
+	const scopeTagList = scopeSelectionTags.filter((tagName) => tagName !== prevScopeTagName);
+	const scopeBaseTag = dom.query.getParentElement(prevScopeTag || editor.selection.getNode(), (current) => scopeTagList.includes(current.nodeName?.toLowerCase()));
+
+	let selectArea = scopeBaseTag || ww;
+	let { first, last } = __findFirstAndLast(selectArea);
+
+	if (!first || !last) return;
+
+	const isZeroWidth = dom.check.isZeroWidth;
+	while (isZeroWidth(first) && isZeroWidth(last) && selectArea !== ww) {
+		selectArea = selectArea.parentElement;
+		({ first, last } = __findFirstAndLast(dom.query.getParentElement(selectArea, (current) => scopeTagList.includes(current.nodeName?.toLowerCase())) || ww));
+	}
 
 	if (!first || !last) return;
 
-	if (dom.check.isMedia(first) || editor.component.is(first.parentElement) || dom.check.isTableElements(first)) {
-		const info = editor.component.get(first) || editor.component.get(first.parentElement);
+	let info = null;
+	if (dom.check.isMedia(first) || (info = editor.component.get(first.parentElement)) || dom.check.isTableElements(first)) {
 		const br = dom.utils.createElement('BR');
 		const format = dom.utils.createElement(editor.options.get('defaultLine'), null, br);
 		first = info ? info.container || info.cover : first;
-		first.parentNode.insertBefore(format, first);
+		first.parentElement.insertBefore(format, first);
 		first = br;
 	}
 
-	if (dom.check.isMedia(last) || editor.component.is(last.parentElement) || dom.check.isTableElements(last)) {
-		last = dom.utils.createElement('BR');
-		selectArea.appendChild(dom.utils.createElement(editor.options.get('defaultLine'), null, last));
+	if (dom.check.isMedia(last) || (info = editor.component.get(last.parentElement)) || dom.check.isTableElements(last)) {
+		const br = dom.utils.createElement('BR');
+		const format = dom.utils.createElement(editor.options.get('defaultLine'), null, br);
+		last = info ? info.container || info.cover : last;
+		last.parentElement.appendChild(format);
+		last = br;
 	}
 
 	editor.toolbar._showBalloon(editor.selection.setRange(first, 0, last, last.textContent.length));