add: default button-newDocument, selectAll

fix: component - deselect, insert, select
JiHong88 · Nov 24, 2023 · 924a2c7 · 924a2c7
1 parent bcda9a2
commit 924a2c7
Show file tree

Hide file tree

Showing 20 changed files with 155 additions and 91 deletions.
diff --git a/src/assets/icons/_default.js b/src/assets/icons/_default.js
diff --git a/src/assets/suneditor-content.css b/src/assets/suneditor-content.css
@@ -1,4 +1,5 @@
 :root {
+	--se-edit-font-size: 13px;
 	--se-edit-font: #333;
 	--se-edit-font-sub: #666;
 	--se-edit-background: #fff;
@@ -18,7 +19,7 @@
 /* suneditor content */
 .sun-editor-editable {
 	font-family: Helvetica Neue;
-	font-size: 13px;
+	font-size: var(--se-edit-font-size);
 	color: var(--se-edit-font);
 	background-color: var(--se-edit-background);
 	line-height: 1.5;
@@ -80,6 +81,16 @@
 .sun-editor-editable a {
 	color: var(--se-edit-anchor);
 	text-decoration: none;
+	white-space: nowrap;
+}
+
+.sun-editor-editable a[target='_blank']::after {
+	content: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTE0LDNWNUgxNy41OUw3Ljc2LDE0LjgzTDkuMTcsMTYuMjRMMTksNi40MVYxMEgyMVYzTTE5LDE5SDVWNUgxMlYzSDVDMy44OSwzIDMsMy45IDMsNVYxOUEyLDIgMCAwLDAgNSwyMUgxOUEyLDIgMCAwLDAgMjEsMTlWMTJIMTlWMTlaIiAvPjwvc3ZnPg==');
+	display: inline-block;
+	width: var(--se-edit-font-size);
+	height: auto;
+	color: var(--se-edit-anchor);
+	vertical-align: middle;
 }
 
 .sun-editor-editable span[style~='color:'] a {

diff --git a/src/assets/suneditor.css b/src/assets/suneditor.css
@@ -484,10 +484,10 @@
 }
 
 .sun-editor .se-line-breaker > button.se-btn:hover {
-	color: #fff;
-	background-color: #4592ff;
-	border: 1px solid #3288ff;
-	opacity: 0.9;
+	color: #fff !important;
+	background-color: #4592ff !important;
+	border: 1px solid #3288ff !important;
+	opacity: 0.9 !important;
 }
 
 /** --- line breaker --- component - top, bottom */

diff --git a/src/core/base/eventManager.js b/src/core/base/eventManager.js
@@ -2048,7 +2048,7 @@ function DisplayLineBreak(dir, e) {
 	component.parentNode.insertBefore(format, dir === 't' ? component : component.nextSibling);
 	this.editor.frameContext.get('lineBreaker').style.display = 'none';
 
-	this.component.close();
+	this.component.deselect();
 
 	const focusEl = isList ? format : format.firstChild;
 	this.selection.setRange(focusEl, 1, focusEl, 1);

diff --git a/src/core/class/component.js b/src/core/class/component.js
@@ -11,6 +11,7 @@ const Component = function (editor) {
 
 	// members
 	this.info = null;
+	this.isSelected = false;
 	this.currentTarget = null;
 	this.currentPlugin = null;
 	this.currentPluginName = '';
@@ -102,7 +103,7 @@ Component.prototype = {
 		return (this.info = {
 			target: target,
 			pluginName: pluginName || this.editor._fileManager.pluginMap[target.nodeName.toLowerCase()] || '',
-			container: figureInfo.container,
+			container: figureInfo.container || figureInfo.cover || target,
 			cover: figureInfo.cover,
 			caption: figureInfo.caption,
 			isFile: isFile
@@ -115,17 +116,19 @@ Component.prototype = {
 	 * @param {string} pluginName Plugin name (image, video)
 	 */
 	select(element, pluginName, isInput) {
-		this.get(element);
+		const info = this.get(element);
 		if (domUtils.isUneditable(domUtils.getParentElement(element, this.is.bind(this))) || domUtils.isUneditable(element)) return false;
 
 		const plugin = this.plugins[pluginName];
 		if (!plugin) return;
 
 		if (!isInput) {
 			this.editor._antiBlur = true;
+			this.selection.setRange(info.container, 0, info.container, 0);
 			this.editor.blur();
 		}
 
+		this.isSelected = true;
 		setTimeout(
 			() => {
 				if (typeof plugin.select === 'function') plugin.select(element);
@@ -140,16 +143,20 @@ Component.prototype = {
 		);
 	},
 
-	close() {
+	deselect(_globalClosed) {
 		this.editor._antiBlur = false;
 		const { frameContext } = this.editor;
 		frameContext.get('lineBreaker_t').style.display = frameContext.get('lineBreaker_b').style.display = frameContext.get('lineBreaker').style.display = 'none';
-		if (this.currentPlugin && typeof this.currentPlugin.close === 'function') {
-			this.currentPlugin.close(this.currentTarget);
+		if (this.currentPlugin && typeof this.currentPlugin.deselect === 'function') {
+			this.currentPlugin.deselect(this.currentTarget);
 		}
 
+		this.isSelected = false;
+		this.currentPlugin = null;
+		this.currentTarget = null;
+		this.currentPluginName = '';
 		this.__removeGlobalEvent();
-		this.editor._offCurrentController();
+		if (!_globalClosed) this.editor._offCurrentController(true);
 	},
 
 	/**
@@ -190,7 +197,7 @@ Component.prototype = {
 
 		const yScroll = wysiwyg.scrollY || wysiwyg.scrollTop || 0;
 		const wScroll = wysiwyg.scrollX || wysiwyg.scrollLeft || 0;
-		const container = info.container || info.cover;
+		const container = info.container;
 		const t_style = fc.get('lineBreaker_t').style;
 		const b_style = fc.get('lineBreaker_b').style;
 		const offsetTarget = container.offsetWidth < element.offsetWidth ? container : element;
@@ -244,9 +251,6 @@ Component.prototype = {
 		if (this._bindClose_copy) this._bindClose_copy = this.eventManager.removeGlobalEvent(this._bindClose_copy);
 		if (this._bindClose_cut) this._bindClose_cut = this.eventManager.removeGlobalEvent(this._bindClose_cut);
 		if (this._bindClose_keydown) this._bindClose_keydown = this.eventManager.removeGlobalEvent(this._bindClose_keydown);
-		this.currentPlugin = null;
-		this.currentTarget = null;
-		this.currentPluginName = '';
 	},
 
 	__addNotFileGlobalEvent() {
@@ -264,10 +268,11 @@ Component.prototype = {
 function CloseListener_mouse({ target }) {
 	if (
 		this.currentTarget?.contains(target) ||
+		domUtils.getParentElement(target, '.se-controller') ||
 		(this.currentPluginName === this.editor.currentControllerName && this.editor.opendControllers.some(({ form }) => form.contains(target)))
 	)
 		return;
-	this.close();
+	this.deselect();
 }
 
 function OnCopy_component(e) {
@@ -285,9 +290,8 @@ function OnCopy_component(e) {
 function OnCut_component(e) {
 	const info = this.info;
 	if (info) {
-		this.__removeGlobalEvent();
 		SetClipboardComponent(e, info.container, e.clipboardData);
-		this.editor._offCurrentController();
+		this.deselect();
 		domUtils.removeItem(info.container);
 	}
 }
@@ -305,7 +309,6 @@ function OnKeyDown_component(e) {
 			if (/^(redo|undo)$/.test(info?.c)) {
 				e.preventDefault();
 				e.stopPropagation();
-				this.__removeGlobalEvent();
 				this.editor.run(info.c, info.t, info.e);
 			}
 		}
@@ -318,8 +321,7 @@ function OnKeyDown_component(e) {
 		e.stopPropagation();
 		if (typeof this.currentPlugin?.destroy === 'function') {
 			this.currentPlugin.destroy(this.currentTarget);
-			this.editor._offCurrentController();
-			this.__removeGlobalEvent();
+			this.deselect();
 			return;
 		}
 	}
@@ -337,7 +339,7 @@ function OnKeyDown_component(e) {
 			newEl = domUtils.createElement(this.format.isLine(sibling) && !this.format.isBlock(sibling) ? sibling.nodeName : this.options.get('defaultLine'), null, '<br>');
 		}
 
-		this.editor._offCurrentController();
+		this.deselect();
 		container.parentNode.insertBefore(newEl, container);
 		if (this.select(compContext.target, this.currentPluginName) === false) this.editor.blur();
 	}
@@ -348,7 +350,7 @@ function OnKeyDown_component(e) {
 		const el = keyCode === 38 ? compContext.container.previousElementSibling : compContext.container.nextElementSibling;
 		if (!el) return;
 
-		this.close();
+		this.deselect();
 
 		const focusEl = this.eventManager.applyTagEffect(el);
 		if (focusEl) {
@@ -361,7 +363,7 @@ function OnKeyDown_component(e) {
 
 	// ESC
 	if (keyCode === 27) {
-		this.close();
+		this.deselect();
 		return;
 	}
 }

diff --git a/src/core/class/html.js b/src/core/class/html.js
@@ -645,9 +645,17 @@ HTML.prototype = {
 		const commonCon =
 			range.commonAncestorContainer.nodeType === 3 && range.commonAncestorContainer.parentNode === startCon.parentNode ? startCon.parentNode : range.commonAncestorContainer;
 		if (commonCon === startCon && commonCon === endCon) {
-			startCon = commonCon.children[startOff];
-			endCon = commonCon.children[endOff];
-			startOff = endOff = 0;
+			if (this.component.is(commonCon)) {
+				const compInfo = this.component.get(commonCon);
+				return {
+					container: compInfo.container,
+					offset: 0
+				};
+			} else {
+				startCon = commonCon.children[startOff];
+				endCon = commonCon.children[endOff];
+				startOff = endOff = 0;
+			}
 		}
 
 		if (!startCon || !endCon)