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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "suneditor",
-	"version": "3.0.0-beta.1",
+	"version": "3.0.0-beta.3",
 	"description": "Vanilla javascript based WYSIWYG web editor",
 	"author": "Yi JiHong",
 	"license": "MIT",
@@ -34,10 +34,6 @@
 		"type": "git",
 		"url": "https://github.com/JiHong88/SunEditor.git"
 	},
-	"ignore": [
-		"**/.*",
-		"node_modules"
-	],
 	"devDependencies": {
 		"@babel/core": "^7.22.1",
 		"@codemirror/lang-html": "^6.4.3",
@@ -95,6 +91,18 @@
 		"not IE <= 11",
 		"not dead"
 	],
+	"ignore": [
+		"**/.*",
+		"node_modules"
+	],
+	"files": [
+		"src",
+		"types",
+		"dist",
+		"README.md",
+		"CONTRIBUTING.md",
+		"LICENSE"
+	],
 	"keywords": [
 		"wysiwyg",
 		"wysiwyg editor",

package/src/assets/{variables.css → design/color.css}

@@ -1,10 +1,8 @@
 .sun-editor,
 .sun-editor-editable {
-	/** --------- editable - styles --------- */
-	--se-edit-font-size: 13px;
-	--se-edit-inner-padding: 1.5em 1.5em;
-	--se-edit-inner-padding-doc-type: 2.5rem 2.5rem;
-	--se-edit-line-height: 1.5em;
+	/** --------------------------- content - [colors] ----------- */
+	--se-caret-color: #333;
+	--se-placeholder-color: #bbb;
 	--se-edit-font-color: #333;
 	--se-edit-font-pre: #666;
 	--se-edit-font-quote: #999;
@@ -14,39 +12,43 @@
 	--se-edit-border-dark: #b1b1b1;
 	--se-edit-border-dark-n1: #c1c1c1;
 	--se-edit-border-dark-n2: #d1d1d1;
-	--se-edit-anchor: #004cff;
+	--se-edit-anchor: #0056b3;
 	--se-edit-anchor-on-back: #e8f7ff;
 	--se-edit-anchor-on-font: #0093ff;
 	--se-edit-hr-color: #333;
 	--se-edit-hr-on-back: #c7deff;
 	--se-edit-active: #4592ff;
-	--se-edit-hover: #80bdff;
+	--se-edit-hover: #e0f4ff;
 	--se-edit-outline: #9e9e9e;
 
-	/** --------- editor - styles --------- */
+	/** --------------------------- layout - [colors] ----------- */
 	/** main, common */
-	--se-min-height: 65px;
 	--se-main-out-color: #dadada;
-	--se-main-font-family: Helvetica Neue;
 	--se-main-color: #000;
 	--se-main-color-lighter: #4c4c4d;
 	--se-main-background-color: #fff;
-	--se-main-background-color2: #f5f5f5;
-	--se-main-background-color3: #f9f9f9;
+	--se-code-view-color: #f5f5f5;
 	--se-main-font-color: #333;
-	--se-main-font-color2: #222;
-	--se-main-font-size: 13px;
+	--se-code-view-background-color: #222;
 	--se-main-divider-color: #e1e1e1;
 	--se-main-border-color: #d1d1d1;
 	--se-main-outline-color: #b1b1b1;
 	--se-main-shadow-color: #ececec;
-	--se-border-radius: 2px;
-	--se-btn-font-size: 12px;
-	--se-statusbar-font-size: 10px;
 	--se-statusbar-font-color: #666;
 	--se-overlay-background-color: #222;
-	/* hover, active */
-	--se-active-color: #3288ff;
+
+	/* hover */
+	--se-hover-color: #000;
+	--se-hover-dark-color: #cccccc;
+	--se-hover-dark2-color: #bfbfbf;
+	--se-hover-dark3-color: #b0b0b0;
+	--se-hover-light-color: #e1e1e1;
+	--se-hover-light2-color: #e6e6e6;
+	--se-hover-light3-color: #d9d9d9;
+
+	/* active */
+	--se-active-color: #5cd2e6;
+	--se-active-hover-color: #2964b7;
 	--se-active-dark-color: #80bdff;
 	--se-active-dark2-color: #407dd1;
 	--se-active-dark3-color: #4592ff;
@@ -58,34 +60,37 @@
 	--se-active-light4-color: #dbeaff;
 	--se-active-light5-color: #c4ddff;
 	--se-active-light6-color: #b7ccf2;
-	/* shadow */
-	/* shadow - [toolbar, menu, modal] layer */
-	--se-shadow-layer-color: rgba(0, 0, 0, 0.5);
-	/* shadow - controller */
-	--se-shadow-controller-color: rgba(0, 0, 0, 0.2);
+
+	/* [toolbar, menu, modal] layer - shadow */
+	--se-shadow-layer-color: rgba(0, 0, 0, 0.25);
+
 	/* drag */
 	--se-drag-over-color: #f0c20a;
+
 	/* modal, browser, dropdown */
-	--se-modal-title-font-size: 15px;
-	--se-modal-input-font-size: 14px;
-	--se-modal-input-width: 70px;
+	--se-modal-background-color: #f9f9f9;
+	--se-modal-color: #333;
 	--se-modal-border-color: #e5e5e5;
 	--se-modal-anchor-color: #004cff;
 	--se-modal-preview-color: #666;
+	--se-modal-file-input-background-color: #f9f9f9;
 	--se-modal-input-disabled-color: #999;
 	--se-modal-input-disabled-background-color: #f3f3f3;
-	/* browser */
-	--se-browser-title-font-size: 16px;
+
 	/* dropdown, selectMenu */
 	--se-dropdown-font-color: #555;
+
 	/* controller */
-	--se-controller-font-size: 14px;
 	--se-controller-border-color: #999;
-	/* input:btn */
-	--se-input-btn-size: 32px;
+	--se-controller-background-color: #f9f9f9;
+	--se-controller-color: #333;
+	--se-shadow-controller-color: rgba(0, 0, 0, 0.2);
+
+	/* button : input-side */
 	--se-input-btn-border-color: #ccc;
 	--se-input-btn-disabled-color: #bdbdbd;
-	/* btn - success */
+
+	/* success */
 	--se-success-color: #008000;
 	--se-success-dark-color: #628562;
 	--se-success-dark2-color: #419c41;
@@ -95,6 +100,7 @@
 	--se-success-light3-color: #c1f4d3;
 	--se-success-light4-color: #769c76;
 	--se-success-light5-color: #89b589;
+
 	/* error */
 	--se-error-color: #b94a48;
 	--se-error-dark-color: #e1a6a2;
@@ -105,41 +111,21 @@
 	--se-error-light3-color: #f2dede;
 	--se-error-light4-color: #f7deda;
 	--se-error-light5-color: #f8e3e1;
+
 	/* document type */
-	--se-doc-min-padding: 1rem;
-	--se-doc-max-padding: 1.5rem;
-	--se-doc-padding-factor: 0.5;
-	--se-doc-background: #d2d8e1d1;
-	--se-doc-info-font-size: 14px;
-	--se-doc-info-width: 18%;
-	--se-doc-info-min-width: 16ch;
-	--se-doc-info-inner-padding: 2ch;
-	--se-doc-info-inner-line-padding: 0.5ch;
-	--se-doc-info-page-width: 16px;
+	--se-doc-background: #f2f5fa;
 	--se-doc-info-page-font-color: #f5f5f5;
 	--se-doc-info-page-background-color: #b1b1b1;
 	/* document type - font, active */
-	--se-doc-info-font-color: #333;
+	--se-doc-info-font-color: #4c4c4c;
 	--se-doc-info-active-color: #4a32ff;
-	/* document type indent - padding */
-	--se-doc-info-inner-line-indent-h1: 0em;
-	--se-doc-info-inner-line-indent-h2: 0.4em;
-	--se-doc-info-inner-line-indent-h3: 0.8em;
-	--se-doc-info-inner-line-indent-h4: 1.2em;
-	--se-doc-info-inner-line-indent-h5: 1.6em;
-	--se-doc-info-inner-line-indent-h6: 2em;
-	/* document type indent - weight */
-	--se-doc-info-inner-line-weight-h1: 700;
-	--se-doc-info-inner-line-weight-h2: 500;
-	--se-doc-info-inner-line-weight-h3: 400;
-	--se-doc-info-inner-line-weight-h4: 300;
-	--se-doc-info-inner-line-weight-h5: 300;
-	--se-doc-info-inner-line-weight-h6: 300;
+
 	/* loading */
 	--se-loading-color: #07d;
+
 	/* show blocks */
 	--se-show-blocks-color: #3f9dff;
 	--se-show-blocks-li-color: #d539ff;
-	--se-show-blocks-pre-color: #27c022;
+	--se-show-blocks-pre-color: #34c38f;
 	--se-show-blocks-component-color: #f4b124;
 }

package/src/assets/design/index.css

@@ -0,0 +1,3 @@
+@import url('color.css');
+@import url('size.css');
+@import url('typography.css');

package/src/assets/design/size.css

@@ -0,0 +1,35 @@
+.sun-editor,
+.sun-editor-editable {
+	/** --------------------------- content - [size] ----------- */
+	/* main */
+	--se-edit-inner-padding: 1.5em 1.5em;
+	--se-edit-inner-padding-doc-type: 2.5rem 2.5rem;
+
+	/** --------------------------- layout - [size] ----------- */
+	/** main, common */
+	--se-border-radius: 2px;
+	--se-min-height: 65px;
+
+	/* modal */
+	--se-modal-input-width: 70px;
+
+	/* input:btn */
+	--se-input-btn-size: 32px;
+
+	/* document type */
+	--se-doc-min-padding: 1rem;
+	--se-doc-max-padding: 1.5rem;
+	--se-doc-padding-factor: 0.5;
+	--se-doc-info-width: 18%;
+	--se-doc-info-min-width: 16ch;
+	--se-doc-info-inner-padding: 2ch;
+	--se-doc-info-inner-line-padding: 0.5ch;
+	--se-doc-info-page-width: 16px;
+	/* document type indent - padding */
+	--se-doc-info-inner-line-indent-h1: 0em;
+	--se-doc-info-inner-line-indent-h2: 0.4em;
+	--se-doc-info-inner-line-indent-h3: 0.8em;
+	--se-doc-info-inner-line-indent-h4: 1.2em;
+	--se-doc-info-inner-line-indent-h5: 1.6em;
+	--se-doc-info-inner-line-indent-h6: 2em;
+}

package/src/assets/design/typography.css

@@ -0,0 +1,37 @@
+.sun-editor,
+.sun-editor-editable {
+	/** --------------------------- content - [typography] ----------- */
+	--se-edit-font-size: 13px;
+	--se-edit-line-height: 1.5em;
+
+	/** --------------------------- layout - [typography] ----------- */
+	/* main */
+	--se-main-font-family: Helvetica Neue;
+	--se-main-font-size: 13px;
+
+	/* button */
+	--se-btn-font-size: 12px;
+
+	/* status */
+	--se-statusbar-font-size: 10px;
+
+	/* modal */
+	--se-modal-title-font-size: 15px;
+	--se-modal-input-font-size: 14px;
+
+	/* browser */
+	--se-browser-title-font-size: 16px;
+
+	/* controller */
+	--se-controller-font-size: 14px;
+
+	/* document type */
+	--se-doc-info-font-size: 14px;
+	/* document type indent - weight */
+	--se-doc-info-inner-line-weight-h1: 700;
+	--se-doc-info-inner-line-weight-h2: 500;
+	--se-doc-info-inner-line-weight-h3: 400;
+	--se-doc-info-inner-line-weight-h4: 300;
+	--se-doc-info-inner-line-weight-h5: 300;
+	--se-doc-info-inner-line-weight-h6: 300;
+}

package/src/assets/suneditor-contents.css

@@ -1,4 +1,4 @@
-@import url('variables.css');
+@import url('design/index.css');
 
 /* suneditor content */
 .sun-editor-editable {

package/src/assets/suneditor.css

@@ -1,4 +1,4 @@
-@import url('variables.css');
+@import url('design/index.css');
 
 /** --- suneditor main */
 .sun-editor {
@@ -197,6 +197,18 @@
 	top: 0px;
 	right: 100%;
 }
+
+/* se-type-document - placeholder position set */
+.sun-editor .se-wrapper.se-type-document .se-placeholder {
+	top: clamp(var(--se-doc-min-padding));
+	left: clamp(var(--se-doc-min-padding));
+	right: clamp(var(--se-doc-min-padding));
+	padding: var(--se-edit-inner-padding-doc-type);
+}
+.sun-editor .se-wrapper.se-type-document.se-type-document-header .se-placeholder {
+	left: var(--se-doc-info-width);
+	right: var(--se-doc-info-width);
+}
 /** --- se-type-document end ---------------------------------------------------------- */
 
 .sun-editor .se-wrapper .se-code-viewer-mirror,
@@ -245,16 +257,17 @@
 
 .sun-editor .se-btn:not(.on):not(.active):enabled:hover,
 .sun-editor .se-btn:not(.on):not(.active):enabled:focus {
-	background-color: var(--se-main-divider-color);
-	border-color: var(--se-main-border-color);
+	color: var(--se-hover-color);
+	background-color: var(--se-hover-light-color);
+	border-color: var(--se-hover-dark-color);
 }
 
 .sun-editor .se-btn:not(.on):not(.active):enabled:active,
 .sun-editor .se-btn:not(.on):not(.active):enabled.__se__active {
-	background-color: var(--se-main-shadow-color);
-	border-color: var(--se-main-shadow-color) !important;
-	outline: 1px solid var(--se-main-outline-color) !important;
-	box-shadow: 0 0 0 0.3rem var(--se-main-shadow-color);
+	background-color: var(--se-hover-light2-color);
+	border-color: var(--se-hover-dark2-color) !important;
+	outline: 1px solid var(--se-hover-dark3-color) !important;
+	box-shadow: 0 0 0 0.3rem var(--se-hover-light2-color);
 	transition: box-shadow 0.1s ease-in-out;
 }
 
@@ -266,7 +279,7 @@
 .sun-editor .se-menu-list li:hover .se-btn-input input:enabled {
 	border-width: 1px;
 	border-style: solid;
-	border-color: var(--se-main-divider-color);
+	border-color: var(--se-hover-light3-color);
 }
 
 /* after, before button - on, active */
@@ -316,7 +329,7 @@
 .sun-editor .se-btn:enabled.on:hover,
 .sun-editor .se-btn:enabled.on:focus {
 	background-color: var(--se-active-light3-color);
-	color: var(--se-active-dark2-color);
+	color: var(--se-active-hover-color);
 	border-color: var(--se-active-light5-color);
 }
 
@@ -341,14 +354,14 @@
 .sun-editor .se-btn:enabled.active:hover,
 .sun-editor .se-btn:enabled.active:focus {
 	background-color: var(--se-active-light5-color);
-	color: var(--se-active-dark5-color);
+	color: var(--se-active-hover-color);
 	border-color: var(--se-active-dark4-color);
 }
 
 .sun-editor .se-btn:enabled.active:active,
 .sun-editor .se-btn:enabled.active.__se__active {
 	background-color: var(--se-active-light5-color);
-	color: var(--se-active-dark5-color);
+	color: var(--se-active-hover-color);
 	border-color: var(--se-active-dark5-color) !important;
 	outline: 1px solid var(--se-active-dark5-color) !important;
 	box-shadow: 0 0 0 0.3rem var(--se-active-light5-color);
@@ -1642,8 +1655,8 @@
 	width: 100%;
 }
 .sun-editor .se-wrapper .se-code-wrapper .se-code-view-line {
-	background-color: var(--se-main-background-color2);
-	color: var(--se-main-font-color2);
+	background-color: var(--se-code-view-color);
+	color: var(--se-code-view-background-color);
 	text-align: right;
 	width: 50px;
 	font-size: var(--se-main-font-size);
@@ -1652,8 +1665,8 @@
 }
 
 .sun-editor .se-wrapper .se-code-viewer {
-	background-color: var(--se-main-font-color2);
-	color: var(--se-main-background-color2);
+	background-color: var(--se-code-view-background-color);
+	color: var(--se-code-view-color);
 	font-size: var(--se-main-font-size);
 	word-break: break-all;
 	padding: 4px;
@@ -1664,6 +1677,7 @@
 .sun-editor .se-wrapper .se-wrapper-wysiwyg {
 	display: block;
 	position: relative;
+	caret-color: var(--se-caret-color);
 }
 
 .sun-editor-editable[contenteditable='true'] .se-disable-pointer *,
@@ -1686,12 +1700,8 @@
 	left: 0;
 	right: 0;
 	overflow: hidden;
-	margin-top: 0px;
-	padding-top: 16px;
-	padding-left: 16px;
-	margin-left: 0px;
-	padding-right: 16px;
-	margin-right: 0px;
+	padding: var(--se-edit-inner-padding);
+	margin: 0;
 	pointer-events: none;
 	backface-visibility: hidden;
 	-webkit-backface-visibility: hidden;
@@ -1818,7 +1828,8 @@
 	width: auto;
 	max-width: 500px;
 	margin: 1.75rem auto;
-	background-color: var(--se-main-background-color);
+	background-color: var(--se-modal-background-color);
+	color: var(--se-modal-color);
 	-webkit-background-clip: padding-box;
 	background-clip: padding-box;
 	border: 1px solid rgba(0, 0, 0, 0.2);
@@ -2150,7 +2161,7 @@
 	height: 100%;
 	padding: 0;
 	margin: 0;
-	background-color: var(--se-main-background-color3);
+	background-color: var(--se-modal-file-input-background-color);
 	border: 2px dashed var(--se-input-btn-border-color);
 	pointer-events: none;
 }
@@ -2374,7 +2385,8 @@
 	word-spacing: normal;
 	word-wrap: normal;
 	white-space: normal;
-	background-color: var(--se-main-background-color);
+	background-color: var(--se-controller-background-color);
+	color: var(--se-controller-color);
 	-webkit-background-clip: padding-box;
 	background-clip: padding-box;
 	line-break: auto;
@@ -2579,8 +2591,8 @@
 	display: none;
 	pointer-events: auto;
 	cursor: move;
-	width: 18px;
-	height: 18px;
+	width: 20px;
+	height: 20px;
 	background-color: var(--se-active-dark-color);
 	border: 0;
 	padding: 1px;
@@ -2838,7 +2850,7 @@
 	background-color: var(--se-active-light4-color);
 	border-color: var(--se-active-light4-color) !important;
 	outline: 1px solid var(--se-active-color) !important;
-	box-shadow: inset 2px 2px 5px var(--se-active-light6-color), inset -2px -2px 5px var(--se-active-light-color);
+	box-shadow: none;
 	transition: background-color 0.1s ease-in-out, box-shadow 0.1s ease-in-out;
 }
 
@@ -3028,7 +3040,7 @@
 
 .sun-editor .se-browser .se-browser-tags a {
 	display: inline-block;
-	background-color: var(--se-main-background-color2);
+	background-color: var(--se-code-view-color);
 	padding: 6px 12px;
 	margin: 8px 0 8px 8px;
 	color: var(--se-main-font-color);

package/src/core/base/eventHandlers/handler_ww_dragDrop.js

@@ -15,9 +15,10 @@ import { _DragHandle } from '../../../modules';
  * @param {DragEvent} e - Event object
  */
 export function OnDragOver_wysiwyg(fc, dragCursor, _iframeTopArea, _innerToolbar, e) {
-	e.preventDefault();
-
 	const { sc, so, ec, eo } = this.selection.getDragEventLocationRange(e);
+	if (!sc) return;
+
+	e.preventDefault();
 
 	const cursorRange = fc.get('_wd').createRange();
 	cursorRange.setStart(sc, so);
@@ -77,6 +78,7 @@ export function OnDrop_wysiwyg(fc, dragCursor, e) {
 		if (!dataTransfer) return true;
 
 		const { sc, so, ec, eo } = this.selection.getDragEventLocationRange(e);
+		if (!sc) return;
 
 		if (dom.query.getParentElement(sc, '.se-disable-pointer')) {
 			e.preventDefault();

package/src/core/base/eventHandlers/handler_ww_key_input.js

@@ -289,7 +289,7 @@ export async function OnKeyDown_wysiwyg(fc, e) {
 					if (fileComponentInfo) {
 						e.preventDefault();
 						e.stopPropagation();
-						if (this.component.select(fileComponentInfo.target, fileComponentInfo.pluginName, false) === false) this.editor.blur();
+						if (this.component.select(fileComponentInfo.target, fileComponentInfo.pluginName) === false) this.editor.blur();
 						break;
 					}
 				}
@@ -404,7 +404,7 @@ export async function OnKeyDown_wysiwyg(fc, e) {
 						e.preventDefault();
 						e.stopPropagation();
 						if (formatEl.textContent.length === 0) dom.utils.removeItem(formatEl);
-						if (this.component.select(fileComponentInfo.target, fileComponentInfo.pluginName, false) === false) this.editor.blur();
+						if (this.component.select(fileComponentInfo.target, fileComponentInfo.pluginName) === false) this.editor.blur();
 					} else if (this.component.is(prev)) {
 						e.preventDefault();
 						e.stopPropagation();
@@ -474,7 +474,7 @@ export async function OnKeyDown_wysiwyg(fc, e) {
 						e.preventDefault();
 						e.stopPropagation();
 						if (dom.check.isZeroWidth(formatEl.textContent)) dom.utils.removeItem(formatEl);
-						if (this.component.select(fileComponentInfo.target, fileComponentInfo.pluginName, false) === false) this.editor.blur();
+						if (this.component.select(fileComponentInfo.target, fileComponentInfo.pluginName) === false) this.editor.blur();
 						break;
 					}
 				}
@@ -512,7 +512,7 @@ export async function OnKeyDown_wysiwyg(fc, e) {
 					const fileComponentInfo = this.component.get(nextEl);
 					if (fileComponentInfo) {
 						e.stopPropagation();
-						if (this.component.select(fileComponentInfo.target, fileComponentInfo.pluginName, false) === false) this.editor.blur();
+						if (this.component.select(fileComponentInfo.target, fileComponentInfo.pluginName) === false) this.editor.blur();
 					} else if (this.component.is(nextEl)) {
 						e.stopPropagation();
 						dom.utils.removeItem(nextEl);
@@ -632,7 +632,7 @@ export async function OnKeyDown_wysiwyg(fc, e) {
 							const baseIndex = dom.query.findTextIndexOnLine(formatEl, range.startContainer, range.startOffset, this.component.is.bind(this.component));
 							const prevTabEndIndex = this.format.isLine(formatEl.previousElementSibling) ? dom.query.findTabEndIndex(formatEl.previousElementSibling, baseIndex, 2) : 0;
 							if (prevTabEndIndex > baseIndex) {
-								tabSize = prevTabEndIndex - baseIndex + 1;
+								tabSize = prevTabEndIndex - baseIndex;
 							}
 						}
 
@@ -744,7 +744,7 @@ export async function OnKeyDown_wysiwyg(fc, e) {
 					}
 
 					// enter scroll
-					this.selection.scrollTo(range);
+					this.__enterScrollTo(range);
 					break;
 				} else if (rangeEl && formatEl && !dom.check.isTableCell(rangeEl) && !/^FIGCAPTION$/i.test(rangeEl.nodeName)) {
 					const rangeEnt = this.selection.getRange();
@@ -759,7 +759,7 @@ export async function OnKeyDown_wysiwyg(fc, e) {
 						this.selection.setRange(br, 1, br, 1);
 
 						// enter scroll
-						this.selection.scrollTo(range);
+						this.__enterScrollTo(range);
 						break;
 					}
 
@@ -827,7 +827,7 @@ export async function OnKeyDown_wysiwyg(fc, e) {
 							(!selectionFormat &&
 								dom.check.isZeroWidth(selectionNode.textContent) &&
 								dom.check.isBreak(prev) &&
-								(dom.check.isBreak(prev.previousSibling) || !dom.check.isZeroWidth(prev.previousSibling.textContent)) &&
+								(dom.check.isBreak(prev.previousSibling) || !dom.check.isZeroWidth(prev.previousSibling?.textContent)) &&
 								(!next || (!dom.check.isBreak(next) && dom.check.isZeroWidth(next.textContent)))))
 					) {
 						if (selectionFormat) dom.utils.removeItem(children[offset - 1]);
@@ -838,7 +838,7 @@ export async function OnKeyDown_wysiwyg(fc, e) {
 						this.selection.setRange(newEl, 1, newEl, 1);
 
 						// enter scroll
-						this.selection.scrollTo(range);
+						this.__enterScrollTo(range);
 						break;
 					}
 
@@ -870,7 +870,7 @@ export async function OnKeyDown_wysiwyg(fc, e) {
 					this._onShortcutKey = true;
 
 					// enter scroll
-					this.selection.scrollTo(range);
+					this.__enterScrollTo(range);
 					break;
 				}
 
@@ -902,7 +902,7 @@ export async function OnKeyDown_wysiwyg(fc, e) {
 					}
 
 					// enter scroll
-					this.selection.scrollTo(range);
+					this.__enterScrollTo(range);
 					break;
 				}
 
@@ -932,7 +932,7 @@ export async function OnKeyDown_wysiwyg(fc, e) {
 							}
 
 							// enter scroll
-							this.selection.scrollTo(range);
+							this.__enterScrollTo(range);
 							break;
 						}
 
@@ -979,14 +979,14 @@ export async function OnKeyDown_wysiwyg(fc, e) {
 					this.selection.setRange(newEl, offset, newEl, offset);
 
 					// enter scroll
-					this.selection.scrollTo(range);
+					this.__enterScrollTo(range);
 					break;
 				}
 			}
 
 			if (selectRange) {
 				// enter scroll
-				this.selection.scrollTo(range);
+				this.__enterScrollTo(range);
 				break;
 			}
 
@@ -996,7 +996,7 @@ export async function OnKeyDown_wysiwyg(fc, e) {
 				this.selection.setRange(formatEl, 0, formatEl, 0);
 
 				// enter scroll
-				this.selection.scrollTo(range);
+				this.__enterScrollTo(range);
 			}
 
 			break;
@@ -1064,7 +1064,7 @@ export async function OnKeyDown_wysiwyg(fc, e) {
 
 	if (cmponentInfo && !cmponentInfo.options?.isInputComponent) {
 		e.preventDefault();
-		if (this.component.select(cmponentInfo.target, cmponentInfo.pluginName, false) === false) this.editor.blur();
+		if (this.component.select(cmponentInfo.target, cmponentInfo.pluginName) === false) this.editor.blur();
 	}
 }
 

package/src/core/base/eventHandlers/handler_ww_mouse.js

@@ -92,7 +92,7 @@ export async function OnClick_wysiwyg(fc, e) {
 	const componentInfo = this.component.get(eventTarget);
 	if (componentInfo) {
 		e.preventDefault();
-		this.component.select(componentInfo.target, componentInfo.pluginName, false);
+		this.component.select(componentInfo.target, componentInfo.pluginName);
 		return;
 	}