suneditor 3.0.0-alpha.13 → 3.0.0-alpha.15

package/src/assets/variables.css

@@ -0,0 +1,137 @@
+.sun-editor,
+.sun-editor-editable {
+	/** --------- editable - styles --------- */
+	--se-edit-font-size: 13px;
+	--se-edit-inner-padding: 16px;
+	--se-edit-line-height: 1.5;
+	--se-edit-font-color: #333;
+	--se-edit-font-pre: #666;
+	--se-edit-font-quote: #999;
+	--se-edit-background-color: #fff;
+	--se-edit-background-pre: #f9f9f9;
+	--se-edit-border-light: #e1e1e1;
+	--se-edit-border-dark: #b1b1b1;
+	--se-edit-border-dark-n1: #c1c1c1;
+	--se-edit-border-dark-n2: #d1d1d1;
+	--se-edit-anchor: #004cff;
+	--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-outline: #9e9e9e;
+
+	/** --------- editor - styles --------- */
+	/** 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-main-font-color: #333;
+	--se-main-font-color2: #222;
+	--se-main-font-size: 13px;
+	--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-dark-color: #80bdff;
+	--se-active-dark2-color: #407dd1;
+	--se-active-dark3-color: #4592ff;
+	--se-active-dark4-color: #3f9dff;
+	--se-active-dark5-color: #1275ff;
+	--se-active-light-color: #e6f2ff;
+	--se-active-light2-color: #eaf3ff;
+	--se-active-light3-color: #d0e3ff;
+	--se-active-light4-color: #dbeaff;
+	--se-active-light5-color: #c4ddff;
+	--se-active-light6-color: #b7ccf2;
+	/* 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-border-color: #e5e5e5;
+	--se-modal-anchor-color: #004cff;
+	--se-modal-preview-color: #666;
+	--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: 34px;
+	--se-input-btn-border-color: #ccc;
+	--se-input-btn-disabled-color: #bdbdbd;
+	/* btn - success */
+	--se-success-color: #008000;
+	--se-success-dark-color: #628562;
+	--se-success-dark2-color: #419c41;
+	--se-success-dark3-color: #006c00;
+	--se-success-light-color: #dff4e6;
+	--se-success-light2-color: #d5f3e0;
+	--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;
+	--se-error-dark2-color: #db8d8c;
+	--se-error-dark3-color: #d17872;
+	--se-error-light-color: #f5d0c8;
+	--se-error-light2-color: #eed3d7;
+	--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-info-page-font-color: #f5f5f5;
+	--se-doc-info-page-background-color: #b1b1b1;
+	/* document type - active */
+	--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;
+}

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

@@ -40,6 +40,7 @@ export function ButtonsHandler(e) {
 			if (!domUtils.isInputElement(eventTarget) || eventTarget.disabled) return;
 
 			const plugin = this.plugins[command];
+			if (!plugin) return;
 
 			if (this.__inputBlurEvent) this.__removeInput();
 

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

@@ -20,8 +20,15 @@ export function OnDragOver_wysiwyg(fc, dragCursor, _iframeTopArea, _innerToolbar
 
 	const rect = cursorRange.getBoundingClientRect();
 	if (rect.height > 0) {
-		dragCursor.style.left = `${rect.right + this._w.scrollX + _offset.x}px`;
-		dragCursor.style.top = `${rect.top + this._w.scrollY + _offset.y - 5}px`;
+		const wwFrame = fc.get('wysiwygFrame');
+		let frameX = 0;
+		let frameY = 0;
+		if (/^iframe$/i.test(wwFrame.nodeName)) {
+			frameX = wwFrame.offsetLeft;
+			frameY = wwFrame.offsetTop;
+		}
+		dragCursor.style.left = `${rect.right + this._w.scrollX + _offset.x + frameX}px`;
+		dragCursor.style.top = `${rect.top + this._w.scrollY + _offset.y - 5 + frameY}px`;
 		dragCursor.style.height = `${rect.height + 10}px`;
 		dragCursor.style.display = 'block';
 	} else {

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

@@ -6,7 +6,7 @@ const DIR_KEYCODE = /^(3[7-9]|40)$/;
 const DELETE_KEYCODE = /^(8|46)$/;
 const NON_TEXT_KEYCODE = /^(8|9|13|1[6-9]|20|27|3[3-9]|40|45|46|11[2-9]|12[0-3]|144|145|229)$/;
 const HISTORY_IGNORE_KEYCODE = /^(1[6-9]|20|27|3[3-9]|40|45|11[2-9]|12[0-3]|144|145|229)$/;
-const DOCUMENT_TYPE_OBSERVER_KEYCODE = /^(13)$/;
+const DOCUMENT_TYPE_OBSERVER_KEYCODE = /^(8|13|46)$/;
 const FRONT_ZEROWIDTH = new RegExp(unicode.zeroWidthSpace + '+', '');
 let _styleNodes = null;
 

package/src/core/base/eventManager.js

@@ -1128,6 +1128,11 @@ function OnScroll_window() {
 	}
 
 	this._scrollContainer();
+
+	// document type page
+	if (this.editor.frameContext.has('documentType-use-page')) {
+		this.editor.frameContext.get('documentType').scrollWindow();
+	}
 }
 
 function OnResize_viewport() {

package/src/core/class/component.js

@@ -113,6 +113,7 @@ Component.prototype = {
 		let pluginName = '';
 		let options = {};
 		let isFile = false;
+		let launcher = null;
 
 		if (this.is(element)) {
 			if (domUtils.hasClass(element, 'se-component') && !domUtils.hasClass(element, 'se-inline-component')) element = element.firstElementChild || element;
@@ -124,6 +125,7 @@ Component.prototype = {
 			target = comp.target;
 			pluginName = comp.pluginName;
 			options = comp.options;
+			launcher = comp.launcher;
 		}
 
 		if (!target && element.nodeName) {
@@ -135,6 +137,7 @@ Component.prototype = {
 			target = comp.target;
 			pluginName = comp.pluginName;
 			options = comp.options;
+			launcher = comp.launcher;
 		}
 
 		if (!target) {
@@ -150,7 +153,8 @@ Component.prototype = {
 			cover: figureInfo.cover,
 			inlineCover: figureInfo.inlineCover,
 			caption: figureInfo.caption,
-			isFile: isFile
+			isFile,
+			launcher
 		});
 	},
 
@@ -163,7 +167,7 @@ Component.prototype = {
 		const info = this.get(element);
 		if (!info || domUtils.isUneditable(domUtils.getParentElement(element, this.is.bind(this))) || domUtils.isUneditable(element)) return false;
 
-		const plugin = this.plugins[pluginName];
+		const plugin = info.launcher || this.plugins[pluginName];
 		if (!plugin) return;
 
 		if (!isInput && _DragHandle.get('__overInfo') !== ON_OVER_COMPONENT) {
@@ -185,7 +189,8 @@ Component.prototype = {
 		let isNonFigureComponent;
 		if (typeof plugin.select === 'function') isNonFigureComponent = plugin.select(element);
 
-		if (!isNonFigureComponent && !domUtils.hasClass(info.container, 'se-inline-component')) this._setComponentLineBreaker(info.container || info.cover || element);
+		const isBreakComponent = domUtils.hasClass(info.target, 'se-component-line-break');
+		if (isBreakComponent || (!isNonFigureComponent && !domUtils.hasClass(info.container, 'se-inline-component'))) this._setComponentLineBreaker(info.container || info.cover || element);
 
 		this.currentTarget = element;
 		this.currentPlugin = plugin;
@@ -202,7 +207,7 @@ Component.prototype = {
 		}, 0);
 		domUtils.addClass(info.container, 'se-component-selected');
 
-		if (__overInfo !== ON_OVER_COMPONENT) {
+		if (!isBreakComponent && __overInfo !== ON_OVER_COMPONENT) {
 			domUtils.setDisabled(this.editor._controllerOnDisabledButtons, true);
 
 			// set zero width space
@@ -221,7 +226,7 @@ Component.prototype = {
 			}
 
 			this.editor.status.onSelected = true;
-		} else if (!domUtils.hasClass(info.container, 'se-input-component')) {
+		} else if (isBreakComponent || !domUtils.hasClass(info.container, 'se-input-component')) {
 			const dragHandle = this.editor.frameContext.get('wrapper').querySelector('.se-drag-handle');
 			domUtils.addClass(dragHandle, 'se-drag-handle-full');
 			this.editor._visibleControllers(false, false);
@@ -234,7 +239,7 @@ Component.prototype = {
 			dragHandle.style.opacity = 0;
 			dragHandle.style.width = w + 'px';
 			dragHandle.style.height = h + 'px';
-			dragHandle.style.top = top + 'px';
+			dragHandle.style.top = top - 1 + 'px';
 			dragHandle.style.left = left + 'px';
 
 			_DragHandle.set('__dragHandler', dragHandle);
@@ -353,8 +358,7 @@ Component.prototype = {
 		let componentTop, w;
 		const isRtl = this.options.get('_rtl');
 		const dir = isRtl ? ['right', 'left'] : ['left', 'right'];
-		const top = offsetTarget.offsetTop;
-		const { scrollX, scrollY } = this.offset.getLocal(offsetTarget);
+		const { top, scrollX, scrollY } = this.offset.getLocal(offsetTarget);
 
 		if (isList ? !container.previousSibling : !this.format.isLine(container.previousElementSibling)) {
 			const tH = numbers.get(_w.getComputedStyle(lb_t).height, 1);

package/src/core/class/html.js

@@ -301,7 +301,7 @@ HTML.prototype = {
 	 * @param {boolean} notCleanData If true, inserts the HTML string without refining it with html.clean.
 	 */
 	insert(html, rangeSelection, notCheckCharCount, notCleanData) {
-		if (!this.editor.frameContext.get('wysiwygFrame').contains(this.selection.get().focusNode)) this.editor.focus();
+		if (!this.editor.frameContext.get('wysiwyg').contains(this.selection.get().focusNode)) this.editor.focus();
 
 		if (typeof html === 'string') {
 			if (!notCleanData) html = this.clean(html, false, null, null);
@@ -800,8 +800,8 @@ HTML.prototype = {
 				}
 			} else {
 				if ((commonCon.nodeType === 1 && startOff === 0 && endOff === 1) || (commonCon.nodeType === 3 && startOff === 0 && endOff === commonCon.textContent.length)) {
-					const nextEl = domUtils.getNextDeepestNode(commonCon, this.editor.frameContext.get('wysiwygFrame'));
-					const prevEl = domUtils.getPreviousDeepestNode(commonCon, this.editor.frameContext.get('wysiwygFrame'));
+					const nextEl = domUtils.getNextDeepestNode(commonCon, this.editor.frameContext.get('wysiwyg'));
+					const prevEl = domUtils.getPreviousDeepestNode(commonCon, this.editor.frameContext.get('wysiwyg'));
 					const line = this.format.getLine(commonCon);
 					domUtils.removeItem(commonCon);
 
@@ -1011,12 +1011,12 @@ HTML.prototype = {
 			if (this.editor.frameOptions.get('iframe_fullPage')) {
 				if (includeFullPage) {
 					const attrs = domUtils.getAttributesToString(fc.get('_wd').body, ['contenteditable']);
-					r = '<!DOCTYPE html><html>' + fc.get('_wd').head.outerHTML + '<body ' + attrs + '>' + content + '</body></html>';
+					r = `<!DOCTYPE html><html>${fc.get('_wd').head.outerHTML}<body ${attrs}>${content}</body></html>`;
 				} else {
 					r = content;
 				}
 			} else {
-				r = withFrame ? '<div class="sun-editor-editable' + (this.options.get('_rtl') ? ' se-rtl' : '') + '">' + content + '</div>' : renderHTML.innerHTML;
+				r = withFrame ? `<div class="${this.options.get('_editableClass') + '' + (this.options.get('_rtl') ? ' se-rtl' : '')}">${content}</div>` : renderHTML.innerHTML;
 			}
 
 			resultValue[rootKey[i]] = r;

package/src/core/class/offset.js

@@ -42,6 +42,8 @@ Offset.prototype = {
 	getLocal(node) {
 		let offsetLeft = 0;
 		let offsetTop = 0;
+		let l = 0;
+		let t = 0;
 		let offsetElement = node.nodeType === 3 ? node.parentElement : node;
 		const wysiwyg = getParentElement(node, isWysiwygFrame.bind(this));
 		const self = offsetElement;
@@ -52,10 +54,16 @@ Offset.prototype = {
 			offsetElement = offsetElement.offsetParent;
 		}
 
+		const wwFrame = this.editor.frameContext.get('wysiwygFrame');
+		if (/^iframe$/i.test(wwFrame.nodeName) && this.editor.frameContext.get('wysiwyg').contains(node)) {
+			l = wwFrame.offsetLeft;
+			t = wwFrame.offsetTop;
+		}
+
 		const eventWysiwyg = this.editor.frameContext.get('eventWysiwyg');
 		return {
-			left: offsetLeft,
-			top: offsetTop - (wysiwyg ? wysiwyg.scrollTop : 0),
+			left: offsetLeft + l,
+			top: offsetTop + t - (wysiwyg ? wysiwyg.scrollTop : 0),
 			scrollX: eventWysiwyg.scrollX || eventWysiwyg.scrollLeft || 0,
 			scrollY: eventWysiwyg.scrollY || eventWysiwyg.scrollTop || 0
 		};
@@ -93,7 +101,7 @@ Offset.prototype = {
 			element = element.offsetParent;
 		}
 
-		if (!targetAbs && !isTop && /^iframe$/i.test(wFrame.nodeName) && wFrame.contains(element)) {
+		if (!targetAbs && !isTop && /^iframe$/i.test(wFrame.nodeName) && this.editor.frameContext.get('wysiwyg').contains(element)) {
 			element = this.editor.frameContext.get('wrapper');
 			while (element) {
 				t += element.offsetTop;

package/src/core/class/selection.js

@@ -119,7 +119,7 @@ Selection.prototype = {
 		this.status._range = range;
 		this._rangeInfo(range, this.get());
 
-		if (this.editor.frameOptions.get('iframe')) this.__focus();
+		// if (this.editor.frameOptions.get('iframe')) this.__focus();
 
 		return range;
 	},
@@ -302,11 +302,12 @@ Selection.prototype = {
 	/**
 	 * @description Scroll to the corresponding selection or range position.
 	 * @param {Selection|Range|Node} ref selection or range object
+	 * @param {Object?} scrollOption option of scrollTo
 	 */
-	scrollTo(ref) {
+	scrollTo(ref, scrollOption) {
 		if (ref instanceof Selection) {
 			ref = ref.getRangeAt(0);
-		} else if (ref instanceof Node) {
+		} else if (ref instanceof Node || /^(1|3)$/.test(ref?.nodeType)) {
 			ref = this.setRange(ref, 1, ref, 1);
 		} else if (typeof ref?.startContainer === 'undefined') {
 			console.warn('[SUNEDITOR.html.scrollTo.warn] "selectionRange" must be Selection or Range or Node object.', ref);
@@ -318,7 +319,7 @@ Selection.prototype = {
 		if (isVisible) return;
 
 		const el = domUtils.getParentElement(ref.startContainer, (current) => current.nodeType === 1);
-		el?.scrollIntoView?.(this.options.get('scrollToOptions'));
+		el?.scrollIntoView?.(scrollOption || this.options.get('scrollToOptions'));
 	},
 
 	/**

package/src/core/class/toolbar.js

@@ -257,11 +257,7 @@ Toolbar.prototype = {
 			buttonsObj[size] = buttonGroup[1];
 		}
 
-		_rButtonsize
-			.sort(function (a, b) {
-				return a - b;
-			})
-			.unshift('default');
+		_rButtonsize.sort((a, b) => a - b).unshift('default');
 	},
 
 	_showBalloon(rangeObj) {

package/src/core/class/viewer.js

@@ -41,6 +41,7 @@ Viewer.prototype = {
 		const codeWrapper = fc.get('codeWrapper');
 		const codeFrame = fc.get('code');
 		const wysiwygFrame = fc.get('wysiwygFrame');
+		const wrapper = fc.get('wrapper');
 
 		if (value) {
 			this._setEditorDataToCodeView();
@@ -77,6 +78,7 @@ Viewer.prototype = {
 			this.status._range = null;
 			codeFrame.focus();
 			domUtils.addClass(this.editor.commandTargets.get('codeView'), 'active');
+			domUtils.addClass(wrapper, 'se-code-view-status');
 		} else {
 			if (!domUtils.isNonEditable(wysiwygFrame)) this._setCodeDataToEditor();
 			wysiwygFrame.scrollTop = 0;
@@ -102,6 +104,7 @@ Viewer.prototype = {
 				this.history.push(false);
 				this.history.resetButtons(fc.get('key'), null);
 			}
+			domUtils.removeClass(wrapper, 'se-code-view-status');
 		}
 
 		this.editor._checkPlaceholder();
@@ -334,9 +337,16 @@ Viewer.prototype = {
 		const iframe = domUtils.createElement('IFRAME', { style: 'display: none;' });
 		this._d.body.appendChild(iframe);
 
-		const contentHTML = this.options.get('printTemplate') ? this.options.get('printTemplate').replace(/\{\{\s*contents\s*\}\}/i, this.html.get(true)) : this.html.get(true);
+		const contentHTML = this.options.get('printTemplate') ? this.options.get('printTemplate').replace(/\{\{\s*contents\s*\}\}/i, this.html.get()) : this.html.get();
 		const printDocument = domUtils.getIframeDocument(iframe);
 		const wDoc = this.editor.frameContext.get('_wd');
+		const pageCSS = /*html*/ `
+			<style>
+				@page {
+					size: A4;
+					margin: 0;
+				}
+			</style>`;
 
 		if (this.editor.frameOptions.get('iframe')) {
 			const arrts = this.options.get('printClass')
@@ -345,7 +355,17 @@ Viewer.prototype = {
 				? domUtils.getAttributesToString(wDoc.body, ['contenteditable'])
 				: 'class="' + this.options.get('_editableClass') + '"';
 
-			printDocument.write('' + '<!DOCTYPE html><html>' + '<head>' + wDoc.head.innerHTML + '</head>' + '<body ' + arrts + '>' + contentHTML + '</body>' + '</html>');
+			printDocument.write(/*html*/ `
+				<!DOCTYPE html>
+				<html>
+					<head>
+						${wDoc.head.innerHTML}
+						${pageCSS}
+					</head>
+					<body ${arrts}>
+						${contentHTML}
+					</body>
+				</html>`);
 		} else {
 			const links = this._d.head.getElementsByTagName('link');
 			const styles = this._d.head.getElementsByTagName('style');
@@ -357,13 +377,15 @@ Viewer.prototype = {
 				linkHTML += styles[i].outerHTML;
 			}
 
-			printDocument.write(/*html*/ `<!DOCTYPE html>
+			printDocument.write(/*html*/ `
+				<!DOCTYPE html>
 				<html>
 					<head>
 						${linkHTML}
+						${pageCSS}
 					</head>
-					<body class="${this.options.get('printClass') ? this.options.get('printClass') : this.options.get('_editableClass')}">
-						${contentHTML} 
+					<body class="${this.options.get('printClass') || this.options.get('_editableClass')}">
+						${contentHTML}
 					</body>
 				</html>`);
 		}
@@ -419,7 +441,7 @@ Viewer.prototype = {
 					<head>
 						${wDoc.head.innerHTML}
 						<style>
-							body {overflow:auto !important; margin: 10px auto !important; height:auto !important; outline:1px dashed #ccc;}
+							body {overflow:auto !important; height:auto !important;}
 						</style>
 					</head>
 					<body ${arrts}>
@@ -445,7 +467,7 @@ Viewer.prototype = {
 						<title>${this.lang.preview}</title>
 						${linkHTML}
 					</head>
-					<body class="${this.options.get('printClass') ? this.options.get('printClass') : this.options.get('_editableClass')}" style="margin:10px auto !important; height:auto !important; outline:1px dashed #ccc;">
+					<body class="${this.options.get('printClass') ? this.options.get('printClass') : this.options.get('_editableClass')}" style="height:auto">
 						${contentHTML}
 					</body>
 				</html>`);

package/src/core/editor.js

@@ -1,7 +1,7 @@
 import { env, converter, domUtils, numbers } from '../helper';
 import Constructor, { InitOptions, UpdateButton, CreateShortcuts, CreateStatusbar, RO_UNAVAILABD } from './section/constructor';
 import { UpdateStatusbarContext } from './section/context';
-import { BASIC_COMMANDS, ACTIVE_EVENT_COMMANDS, SELECT_ALL, DIR_BTN_ACTIVE, SAVE, COPY_FORMAT, FONT_STYLE } from './section/actives';
+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';
 import EventManager from './base/eventManager';
 import Events from './base/events';
@@ -447,6 +447,15 @@ Editor.prototype = {
 			case 'copyFormat':
 				COPY_FORMAT(this, button);
 				break;
+			case 'pageBreak':
+				PAGE_BREAK(this);
+				break;
+			case 'pageUp':
+				this.frameContext.get('documentType').pageUp();
+				break;
+			case 'pageDown':
+				this.frameContext.get('documentType').pageDown();
+				break;
 			default:
 				FONT_STYLE(this, command);
 		}
@@ -712,10 +721,43 @@ Editor.prototype = {
 			domUtils.addClass(toolbar, 'se-shortcut-hide');
 		}
 
+		// theme
+		if (this._originOptions.theme !== (newOptions.theme ?? this._originOptions.theme)) {
+			this.setTheme(newOptions.theme);
+		}
+
 		this.effectNode = null;
 		this._setFrameInfo(this.frameRoots.get(this.status.rootKey));
 	},
 
+	/**
+	 * @description Set the theme to the editor
+	 * @param {string} theme Theme name
+	 */
+	setTheme(theme) {
+		if (typeof theme !== 'string') return;
+		const o = this.options;
+		const prevTheme = o.get('_themeClass').trim();
+		o.set('theme', theme || '');
+		o.set('_themeClass', theme ? ` se-theme-${theme}` : '');
+		theme = o.get('_themeClass').trim();
+
+		const applyTheme = (target) => {
+			if (!target) return;
+			if (prevTheme) domUtils.removeClass(target, prevTheme);
+			if (theme) domUtils.addClass(target, theme);
+		};
+
+		applyTheme(this.carrierWrapper);
+		this.applyFrameRoots((e) => {
+			applyTheme(e.get('topArea'));
+			applyTheme(e.get('wysiwyg'));
+		});
+
+		applyTheme(this.context.get('statusbar._wrapper'));
+		applyTheme(this.context.get('toolbar._wrapper'));
+	},
+
 	/**
 	 * @description Change the current root index.
 	 * @param {number} rootKey
@@ -1369,6 +1411,24 @@ Editor.prototype = {
 			}
 		}
 
+		if (this.options.get('buttons').has('pageBreak') || this.options.get('buttons_sub')?.has('pageBreak')) {
+			this._componentManager.push((element) => {
+				if (!element || !domUtils.hasClass(element, 'se-page-break')) return null;
+				return {
+					target: element,
+					launcher: {
+						destroy: (target) => {
+							const focusEl = target.previousElementSibling || target.nextElementSibling;
+							domUtils.removeItem(target);
+							// focus
+							this.focusEdge(focusEl);
+							this.history.push(false);
+						}
+					}
+				};
+			});
+		}
+
 		this._fileManager.regExp = new RegExp(`^(${this._fileManager.tags.join('|') || '\\^'})$`, 'i');
 		this._fileManager.pluginRegExp = new RegExp(`^(${filePluginRegExp.length === 0 ? '\\^' : filePluginRegExp.join('|')})$`, 'i');
 

package/src/core/section/actives.js

@@ -144,3 +144,8 @@ export function FONT_STYLE(editor, command) {
 	editor.format.applyInlineElement(el, StyleMap[command] || null, [nodeName], false);
 	editor.focus();
 }
+
+export function PAGE_BREAK(editor) {
+	const pageBreak = domUtils.createElement('DIV', { class: 'se-component se-component-line-break se-page-break' });
+	editor.component.insert(pageBreak, true, false);
+}