suneditor 3.0.0-beta.1 → 3.0.0-beta.2

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "suneditor",
-	"version": "3.0.0-beta.1",
+	"version": "3.0.0-beta.2",
 	"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,33 @@
 	--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;
+	--se-active-color: #5cd2e6;
 	--se-active-dark-color: #80bdff;
 	--se-active-dark2-color: #407dd1;
 	--se-active-dark3-color: #4592ff;
@@ -58,34 +50,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 +90,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 +101,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,14 @@
 	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: var(--se-doc-info-width);
+	right: var(--se-doc-info-width);
+	padding: var(--se-edit-inner-padding-doc-type);
+}
 /** --- se-type-document end ---------------------------------------------------------- */
 
 .sun-editor .se-wrapper .se-code-viewer-mirror,
@@ -1642,8 +1650,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 +1660,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 +1672,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 +1695,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 +1823,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 +2156,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 +2380,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 +2586,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;
@@ -3028,7 +3035,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_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);
@@ -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;
 	}
 

package/src/core/base/eventManager.js

@@ -223,7 +223,7 @@ EventManager.prototype = {
 		if (this.component.is(selectionNode) && !this.component.__selectionSelected) {
 			const component = this.component.get(selectionNode);
 			if (!component) return;
-			this.component.select(component.target, component.pluginName, false);
+			this.component.select(component.target, component.pluginName);
 			return;
 		}
 
@@ -499,14 +499,14 @@ EventManager.prototype = {
 		const eCell = this.format.getBlock(ec);
 		const sIsCell = dom.check.isTableCell(sCell);
 		const eIsCell = dom.check.isTableCell(eCell);
-		const ancestor = range.commonAncestorContainer;
 		if (((sIsCell && !sCell.previousElementSibling && !sCell.parentElement.previousElementSibling) || (eIsCell && !eCell.nextElementSibling && !eCell.parentElement.nextElementSibling)) && sCell !== eCell) {
+			const ancestor = dom.query.getParentElement(range.commonAncestorContainer, dom.check.isFigure) || range.commonAncestorContainer;
 			if (!sIsCell) {
-				dom.utils.removeItem(dom.query.getParentElement(eCell, (current) => ancestor === current.parentNode));
+				dom.utils.removeItem(dom.query.getParentElement(eCell, (current) => ancestor === current));
 			} else if (!eIsCell) {
-				dom.utils.removeItem(dom.query.getParentElement(sCell, (current) => ancestor === current.parentNode));
+				dom.utils.removeItem(dom.query.getParentElement(sCell, (current) => ancestor === current));
 			} else {
-				dom.utils.removeItem(dom.query.getParentElement(sCell, (current) => ancestor === current.parentNode));
+				dom.utils.removeItem(dom.query.getParentElement(sCell, (current) => ancestor === current));
 				this.editor._nativeFocus();
 				return true;
 			}
@@ -571,7 +571,7 @@ EventManager.prototype = {
 				return;
 			}
 
-			this.component.select(compInfo.target, compInfo.pluginName, false);
+			this.component.select(compInfo.target, compInfo.pluginName);
 			return null;
 		} else if (commonCon.nodeType === 1 && commonCon.getAttribute('data-se-embed') === 'true') {
 			let el = commonCon.nextElementSibling;
@@ -822,7 +822,8 @@ EventManager.prototype = {
 		this.addEvent(_w, 'resize', OnResize_window.bind(this), false);
 		this.addEvent(_w, 'scroll', OnScroll_window.bind(this), false);
 		if (env.isMobile) {
-			this.addEvent(_w.visualViewport, 'scroll', OnScroll_viewport.bind(this), false);
+			this.addEvent(_w.visualViewport, 'resize', OnChange_viewport.bind(this), false);
+			this.addEvent(_w.visualViewport, 'scroll', OnChange_viewport.bind(this), false);
 		}
 	},
 
@@ -1177,7 +1178,7 @@ EventManager.prototype = {
 			if (info && !dom.utils.hasClass(info.container, 'se-component-selected')) {
 				this.ui._offCurrentController();
 				_DragHandle.set('__overInfo', ON_OVER_COMPONENT);
-				this.component.select(info.target, info.pluginName, false);
+				this.component.select(info.target, info.pluginName);
 			}
 		} else if (_DragHandle.get('__overInfo') !== null && !dom.utils.hasClass(target, 'se-drag-handle')) {
 			this.component.__deselect();
@@ -1211,6 +1212,16 @@ EventManager.prototype = {
 		this.editor.frameContext.get('wysiwyg').focus();
 	},
 
+	/**
+	 * @private
+	 * @description Scrolls the editor view to the caret position after pressing Enter. (Ignored on mobile devices)
+	 * @this {EventManagerThis}
+	 * @param {*} range Range object
+	 */
+	__enterScrollTo(range) {
+		if (!env.isMobile) this.editor.selection.scrollTo(range);
+	},
+
 	constructor: EventManager
 };
 
@@ -1419,9 +1430,10 @@ function OnScroll_window() {
 /**
  * @this {EventManagerThis}
  */
-function OnScroll_viewport() {
+function OnChange_viewport() {
 	if (this.options.get('toolbar_sticky') > -1) {
 		this.toolbar._resetSticky();
+		this.editor.menu._restoreMenuPosition();
 	}
 }