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

package/src/core/section/constructor.js

@@ -43,6 +43,7 @@ const DEFAULT_CONTENT_STYLES =
 	'margin|margin-block-end|margin-block-start|margin-bottom|margin-inline-end|margin-inline-start|margin-left|margin-right|margin-top|max-width|min-width|' +
 	'outline|overflow|' +
 	'position|padding|padding-bottom|padding-inline-start|padding-left|padding-right|padding-top|' +
+	'page-break-before|page-break-after|page-break-inside|' +
 	'rotate|rotateX|rotateY|' +
 	'table-layout|text-align|text-decoration|text-shadow|text-transform|top|' +
 	'text-indent|text-rendering|' +
@@ -118,7 +119,7 @@ const Constructor = function (editorTargets, options) {
 	const loadingBox = domUtils.createElement('DIV', { class: 'se-loading-box sun-editor-common' }, '<div class="se-loading-effect"></div>');
 
 	/** --- carrier wrapper --------------------------------------------------------------- */
-	const editor_carrier_wrapper = domUtils.createElement('DIV', { class: 'sun-editor sun-editor-carrier-wrapper sun-editor-common' + (o.get('_rtl') ? ' se-rtl' : '') });
+	const editor_carrier_wrapper = domUtils.createElement('DIV', { class: 'sun-editor sun-editor-carrier-wrapper sun-editor-common' + o.get('_themeClass') + (o.get('_rtl') ? ' se-rtl' : '') });
 	// menuTray
 	const menuTray = domUtils.createElement('DIV', { class: 'se-menu-tray' });
 	editor_carrier_wrapper.appendChild(menuTray);
@@ -185,7 +186,7 @@ const Constructor = function (editorTargets, options) {
 	for (let i = 0, len = editorTargets.length; i < len; i++) {
 		const editTarget = editorTargets[i];
 		const to = editTarget.options;
-		const top_div = domUtils.createElement('DIV', { class: 'sun-editor' + (to.get('_rtl') ? ' se-rtl' : '') });
+		const top_div = domUtils.createElement('DIV', { class: 'sun-editor' + o.get('_themeClass') + (to.get('_rtl') ? ' se-rtl' : '') });
 		const container = domUtils.createElement('DIV', { class: 'se-container' });
 		const editor_div = domUtils.createElement('DIV', { class: 'se-wrapper' + (o.get('type') === 'document' ? ' se-type-document' : '') });
 
@@ -215,7 +216,7 @@ const Constructor = function (editorTargets, options) {
 		if (statusbar) {
 			if (statusbarContainer) {
 				if (!default_status_bar) {
-					statusbarContainer.appendChild(domUtils.createElement('DIV', { class: 'sun-editor' }, statusbar));
+					statusbarContainer.appendChild(domUtils.createElement('DIV', { class: 'sun-editor' + o.get('_themeClass') }, statusbar));
 					default_status_bar = statusbar;
 				}
 			} else {
@@ -264,7 +265,7 @@ const Constructor = function (editorTargets, options) {
 	// toolbar container
 	const toolbar_container = o.get('toolbar_container');
 	if (toolbar_container) {
-		const top_div = domUtils.createElement('DIV', { class: 'sun-editor' + (o.get('_rtl') ? ' se-rtl' : '') });
+		const top_div = domUtils.createElement('DIV', { class: 'sun-editor' + o.get('_themeClass') + (o.get('_rtl') ? ' se-rtl' : '') });
 		const container = domUtils.createElement('DIV', { class: 'se-container' });
 		container.appendChild(toolbar);
 		if (subbar) container.appendChild(subbar);
@@ -362,6 +363,7 @@ export function InitOptions(options, editorTargets, plugins) {
 	o.set('v2Migration', !!options.v2Migration);
 
 	/** Base */
+	o.set('buttons', new Set(buttonList.toString().split(',')));
 	const modeValue = options.strictMode !== false;
 	o.set('strictMode', {
 		tagFilter: modeValue,
@@ -376,6 +378,8 @@ export function InitOptions(options, editorTargets, plugins) {
 	o.set('__pluginRetainFilter', options.__pluginRetainFilter ?? true);
 	o.set('mode', options.mode || 'classic'); // classic, inline, balloon, balloon-always
 	o.set('type', options.type?.split(':')[0] || ''); // document:header,page
+	o.set('theme', options.theme || '');
+	o.set('_themeClass', options.theme ? ` se-theme-${options.theme}` : '');
 	o.set('type-options', options.type?.split(':')[1] || '');
 	o.set('externalLibs', options.externalLibs || {});
 	o.set('keepStyleOnDelete', !!options.keepStyleOnDelete);
@@ -485,9 +489,9 @@ export function InitOptions(options, editorTargets, plugins) {
 
 	// etc
 	o.set('historyStackDelayTime', typeof options.historyStackDelayTime === 'number' ? options.historyStackDelayTime : 400);
-	o.set('_editableClass', 'sun-editor-editable' + (o.get('_rtl') ? ' se-rtl' : ''));
+	o.set('_editableClass', 'sun-editor-editable' + o.get('_themeClass') + (o.get('_rtl') ? ' se-rtl' : ''));
 	o.set('lineAttrReset', ['id'].concat(options.lineAttrReset && typeof options.lineAttrReset === 'string' ? options.lineAttrReset.toLowerCase().split('|') : []));
-	o.set('printClass', typeof options.printClass === 'string' ? options.printClass : null);
+	o.set('printClass', typeof options.printClass === 'string' ? options.printClass + ' ' + o.get('_editableClass') : null);
 
 	/** whitelist, blacklist */
 	// default line
@@ -571,6 +575,7 @@ export function InitOptions(options, editorTargets, plugins) {
 			o.set('_subMode', subbar.mode || 'balloon');
 			o.set('toolbar.sub_width', subbar.width ? (numbers.is(subbar.width) ? subbar.width + 'px' : subbar.width) : 'auto');
 			subButtons = o.get('_rtl') ? subbar.buttonList.reverse() : subbar.buttonList;
+			o.set('buttons_sub', new Set(subButtons.toString().split(',')));
 		}
 	}
 
@@ -986,7 +991,12 @@ function _defaultButtons(options, icons, lang) {
 		dir_rtl: ['', lang.dir_rtl, 'dir_rtl', '', icons.dir_rtl],
 		save: ['se-component-enabled', lang.save, 'save', '', icons.save],
 		newDocument: ['se-component-enabled', lang.newDocument, 'newDocument', '', icons.new_document],
-		selectAll: ['se-component-enabled', lang.selectAll, 'selectAll', '', icons.select_all]
+		selectAll: ['se-component-enabled', lang.selectAll, 'selectAll', '', icons.select_all],
+		pageBreak: ['se-component-enabled', lang.pageBreak, 'pageBreak', '', icons.page_break],
+		// document type buttons
+		pageUp: ['se-component-enabled', lang.pageUp, 'pageUp', '', icons.page_up],
+		pageDown: ['se-component-enabled', lang.pageDown, 'pageDown', '', icons.page_down],
+		pageNavigator: ['se-component-enabled', '', 'pageNavigator', 'input', '']
 	};
 }
 
@@ -1016,6 +1026,8 @@ function _createModuleGroup() {
  * @returns {Object}
  */
 function _createButton(className, title, dataCommand, dataType, innerHTML, _disabled, icons) {
+	if (!innerHTML) innerHTML = '';
+
 	const oLi = domUtils.createElement('LI');
 	const label = title || '';
 	const isDiv = /^INPUT|FIELD$/i.test(dataType);
@@ -1066,9 +1078,13 @@ export function UpdateButton(element, plugin, icons, lang) {
 
 	const noneInner = plugin.inner === false;
 
-	element.innerHTML = noneInner
-		? ''
-		: (plugin.inner || icons[plugin.icon] || plugin.icon || '<span class="se-icon-text">!</span>') + '<span class="se-tooltip-inner"><span class="se-tooltip-text">' + (lang[plugin.title] || plugin.title) + '</span></span>';
+	if (plugin.inner?.nodeType === 1) {
+		element.appendChild(plugin.inner);
+	} else {
+		element.innerHTML = noneInner
+			? ''
+			: (plugin.inner || icons[plugin.icon] || plugin.icon || '<span class="se-icon-text">!</span>') + '<span class="se-tooltip-inner"><span class="se-tooltip-text">' + (lang[plugin.title] || plugin.title) + '</span></span>';
+	}
 
 	element.setAttribute('aria-label', plugin.title);
 
@@ -1081,24 +1097,24 @@ export function UpdateButton(element, plugin, icons, lang) {
 	}
 
 	// side, replace button
-	if (plugin.afterButton) {
-		domUtils.addClass(plugin.afterButton, 'se-toolbar-btn');
-		element.parentElement.appendChild(plugin.afterButton);
+	if (plugin.afterItem) {
+		domUtils.addClass(plugin.afterItem, 'se-toolbar-btn');
+		element.parentElement.appendChild(plugin.afterItem);
 
 		domUtils.addClass(element, 'se-side-btn-a');
-		domUtils.addClass(plugin.afterButton, 'se-side-btn-after');
+		domUtils.addClass(plugin.afterItem, 'se-side-btn-after');
 	}
-	if (plugin.beforeButton) {
-		domUtils.addClass(plugin.beforeButton, 'se-toolbar-btn');
-		element.parentElement.insertBefore(plugin.beforeButton, element);
+	if (plugin.beforeItem) {
+		domUtils.addClass(plugin.beforeItem, 'se-toolbar-btn');
+		element.parentElement.insertBefore(plugin.beforeItem, element);
 
-		if (plugin.afterButton) {
+		if (plugin.afterItem) {
 			domUtils.addClass(element, 'se-side-btn');
 			domUtils.removeClass(element, 'se-side-btn-a');
 		} else {
 			domUtils.addClass(element, 'se-side-btn-b');
 		}
-		domUtils.addClass(plugin.beforeButton, 'se-side-btn-before');
+		domUtils.addClass(plugin.beforeItem, 'se-side-btn-before');
 	}
 	if (plugin.replaceButton) {
 		element.parentElement.appendChild(plugin.replaceButton);

package/src/core/section/documentType.js

@@ -2,27 +2,38 @@
  * @fileoverview DocumentType class
  */
 
-import { domUtils, numbers, env } from '../../helper';
+import { domUtils, numbers, converter, env } from '../../helper';
 
+const { _w } = env;
 const A4_HEIGHT_INCHES = 11.7; // A4 height(inches)
-const A4_HEIGHT = A4_HEIGHT_INCHES * env.DPI * 96; // 1 inch = 96px
+const A4_HEIGHT = A4_HEIGHT_INCHES * 96; // 1 inch = 96px
 
 const DocumentType = function (editor, fc) {
 	// members
 	this.editor = editor;
+	this.selection = editor.selection;
+	this.offset = editor.offset;
 	this.fc = fc;
 	this.ww = fc.get('wysiwyg');
 	this.wwFrame = fc.get('wysiwygFrame');
 	this.wwWidth = -1;
+	this.wwHeight = -1;
+	this.isAutoHeight = fc.get('options').get('height') === 'auto';
+	this.displayPage = this.isAutoHeight ? _w : fc.get('wysiwyg');
 	this.innerHeaders = [];
 	this._wwHeaders = [];
 	this.inner = null;
 	this.page = null;
+	this.totalPages = 0;
+	this.pageNum = 0;
 	this.pageHeight = -1;
 	this.pages = [];
 	this.pages_line = [];
+	this.prevScrollTop = 0;
 	this.useHeader = editor.options.get('type-options').includes('header');
 	this.usePage = editor.options.get('type-options').includes('page');
+	this.navigatorButtons = [];
+	this.pageNavigator = null;
 
 	// init header
 	if (this.useHeader) {
@@ -42,6 +53,7 @@ const DocumentType = function (editor, fc) {
 	// init page
 	if (this.usePage) {
 		this.page = fc.get('documentTypePage');
+		this.pageNavigator = editor.plugins.pageNavigator;
 	}
 };
 
@@ -85,43 +97,101 @@ DocumentType.prototype = {
 	rePage() {
 		if (!this.page) return;
 
-		const height = this.wwFrame.scrollHeight;
+		const height = this.displayPage.scrollHeight ?? this.ww.scrollHeight;
 		if (this.pageHeight === height) return;
 		this.pageHeight = height;
 
-		const page = this.page;
-		const scrollTop = this.ww.scrollTop;
-		const wwWidth = this.wwFrame.offsetWidth + 1;
 		const totalPages = Math.ceil(height / A4_HEIGHT);
+		const scrollTop = (this.prevScrollTop = this._getWWScrollTop());
+		const wwWidth = this.wwFrame.offsetWidth + 1;
+		const pageBreaks = this.ww.querySelectorAll('.se-page-break');
+
+		const pages = [];
+		const pageTop = this.page.offsetTop;
+		for (let i = 0, len = pageBreaks.length; i < len; i++) {
+			pages.push({ number: i, top: pageBreaks[i].offsetTop - pageTop + pageBreaks[i].offsetHeight / 2 - scrollTop });
+		}
 
+		for (let i = 0, t; i < totalPages; i++) {
+			t = i * A4_HEIGHT - scrollTop;
+			let inserted = false;
+			for (let j = 0, jLen = pages.length; j < jLen; j++) {
+				if (t < pages[j].top) {
+					pages.splice(j, 0, { number: i + pageBreaks.length, top: t });
+					inserted = true;
+					break;
+				}
+			}
+			if (!inserted) {
+				pages.push({ number: i + pageBreaks.length, top: t });
+			}
+		}
+
+		// set page number
 		this.page.innerHTML = '';
 		this.pages = [];
-		for (let i = 0; i < totalPages; i++) {
-			const pageNumber = domUtils.createElement('DIV', { style: `top:${i * A4_HEIGHT + scrollTop}px`, innerHTML: i + 1 }, `<div class="se-document-page-line" style="width: ${wwWidth}px;"></div>${i + 1}`);
-			page.appendChild(pageNumber);
+		for (let i = 0, len = pages.length; i < len; i++) {
+			const pageNumber = domUtils.createElement('DIV', { style: `top:${pages[i].top}px`, innerHTML: i + 1 }, `<div class="se-document-page-line" style="width: ${wwWidth}px;"></div>${i + 1}`);
+			this.page.appendChild(pageNumber);
 			this.pages.push(pageNumber);
 		}
 
 		this.pages_line = this.page.querySelectorAll('.se-document-page-line');
-	},
-
-	scrollPage() {
-		const scrollTop = this.wwFrame.scrollTop;
-		const pages = this.pages;
-		for (let i = 0, len = pages.length; i < len; i++) {
-			pages[i].style.top = `${i * A4_HEIGHT - scrollTop}px`;
-		}
+		this.totalPages = totalPages;
 	},
 
 	resizePage() {
 		const wwWidth = this.wwFrame.offsetWidth + 1;
-		if (wwWidth === this.wwWidth) return;
+		const wwHeight = this.wwFrame.offsetHeight + 1;
+		if (wwWidth === this.wwWidth || wwHeight === this.wwHeight) return;
 
 		this.wwWidth = wwWidth;
+		this.wwHeight = wwHeight;
 		const pages_line = this.pages_line;
 		for (let i = 0, len = pages_line.length; i < len; i++) {
 			pages_line[i].style.width = `${wwWidth}px`;
 		}
+
+		this._displayCurrentPage();
+	},
+
+	scrollPage() {
+		const prevScrollTop = this.prevScrollTop;
+		const scrollTop = this._getWWScrollTop();
+		if (prevScrollTop === scrollTop) return;
+
+		const pages = this.pages;
+		for (let i = 0, len = pages.length; i < len; i++) {
+			pages[i].style.top = `${numbers.get(pages[i].style.top) - (scrollTop - prevScrollTop)}px`;
+		}
+
+		this.prevScrollTop = scrollTop;
+		this._displayCurrentPage();
+	},
+
+	getCurrentPageNumber() {
+		if (this.totalPages <= 1) return 1;
+
+		const scrollTop = this.isAutoHeight ? _w.scrollY + this.wwHeight / 2 - this._getGlobalTop() : this._getWWScrollTop() + this.wwHeight / 2;
+		const pageNum = this.isAutoHeight ? Math.floor(scrollTop / A4_HEIGHT) : Math.ceil(scrollTop / A4_HEIGHT);
+		return (this.pageNum = pageNum < 1 ? 1 : pageNum > this.pages.length ? this.pages.length : pageNum);
+	},
+
+	pageUp() {
+		const pageNum = this.pageNum - 1 <= 1 ? 1 : this.pageNum - 1;
+		this._movePage(pageNum, false);
+	},
+
+	pageDown() {
+		const pageNum = this.pageNum + 1 > this.pages.length ? this.pages.length : this.pageNum + 1;
+		this._movePage(pageNum, false);
+	},
+
+	pageGo(pageNum) {
+		if (pageNum < 1) pageNum = 1;
+		else if (pageNum > this.pages.length) pageNum = this.pages.length;
+
+		this._movePage(pageNum, true);
 	},
 
 	on(line) {
@@ -146,6 +216,60 @@ DocumentType.prototype = {
 		item.textContent = header.textContent;
 	},
 
+	scrollWindow() {
+		if (!this.isAutoHeight) return;
+		this._displayCurrentPage();
+	},
+
+	_displayCurrentPage() {
+		const pageNum = this.getCurrentPageNumber();
+		this.pageNavigator?.display(pageNum, this.totalPages);
+	},
+
+	_getWWScrollTop() {
+		return this.displayPage.scrollTop || 0;
+	},
+
+	_movePage(pageNum, force) {
+		if (!force && this.pageNum === pageNum) return;
+
+		const globalTop = this._getGlobalTop();
+		const children = converter.nodeListToArray(this.ww.children);
+		const pageTop = this.page.offsetTop + numbers.get(this.pages[pageNum - 1].style.top) + this._getWWScrollTop();
+		for (let i = 0, len = children.length, c; i < len; i++) {
+			c = children[i];
+			if (c.offsetTop >= pageTop) {
+				if (!force) this.selection.setRange(c, 0, c, 0);
+				const scrollTop = i === 0 && !this.isAutoHeight ? 0 : c.offsetTop - this.page.offsetTop - c.offsetHeight + globalTop;
+				this._applyPageScroll(scrollTop, () => {
+					if (this.editor.toolbar._sticky) {
+						this.displayPage.scrollTo({ top: scrollTop - this.editor.context.get('toolbar.main').offsetHeight, behavior: 'smooth' });
+					}
+				});
+
+				this.pageNum = pageNum;
+				break;
+			}
+		}
+	},
+
+	_applyPageScroll(top, callback) {
+		this.displayPage.scrollTo({ top, behavior: 'smooth' });
+		const checkScrollEnd = () => {
+			if (Math.abs((this.displayPage.scrollY ?? this.displayPage.scrollTop) - top) < 1) {
+				callback();
+			} else {
+				_w.requestAnimationFrame(checkScrollEnd);
+			}
+		};
+
+		_w.requestAnimationFrame(checkScrollEnd);
+	},
+
+	_getGlobalTop() {
+		return this.isAutoHeight ? this.offset.getGlobal(this.wwFrame).top : 0;
+	},
+
 	_findItem(header) {
 		const headers = this._wwHeaders;
 		const index = Array.prototype.indexOf.call(headers, header);
@@ -191,7 +315,7 @@ function OnClickHeader(ww, e) {
 
 			const header = this._wwHeaders[innerIndex];
 			if (header) {
-				this.editor.selection.scrollTo(header);
+				this.selection.scrollTo(header);
 			}
 		}
 	} finally {

package/src/helper/domUtils.js

@@ -1163,11 +1163,12 @@ export function applyInlineStylesAll(wwTarget, includeWW, styles) {
 	tempTarget.appendChild(wwTarget);
 	_d.body.appendChild(tempTarget);
 
-	const elements = wwTarget.querySelectorAll('*');
-	for (let i = includeWW ? 0 : 1, el; (el = elements[i]); i++) {
+	const elements = includeWW ? [wwTarget].concat(Array.from(wwTarget.querySelectorAll('*'))) : wwTarget.querySelectorAll('*');
+	for (let i = 0, el; (el = elements[i]); i++) {
 		const computedStyle = _w.getComputedStyle(el);
-		for (const props of styles || computedStyle) {
-			el.style[props] = computedStyle.getPropertyValue(props) || '';
+		const els = el.style;
+		for (const props of styles) {
+			els.setProperty(props, computedStyle.getPropertyValue(props) || '');
 		}
 	}
 

package/src/langs/en.js

@@ -69,6 +69,8 @@
 		dir_rtl: 'Right to left',
 		download: 'Download',
 		drag: 'Drag',
+		drawing: 'Drawing',
+		drawing_modal_title: 'Drawing',
 		edit: 'Edit',
 		exportPdf: 'Export to PDF',
 		exportWord: 'Export to Word',
@@ -137,6 +139,9 @@
 		numberedList: 'Numbered list',
 		outdent: 'Outdent',
 		pageBreak: 'Page break',
+		pageDown: 'Page down',
+		pageNumber: 'Page number',
+		pageUp: 'Page up',
 		paragraphStyle: 'Paragraph style',
 		preview: 'Preview',
 		print: 'print',

package/src/modules/Modal.js

@@ -1,11 +1,13 @@
 import CoreInjector from '../editorInjector/_core';
 import { CreateTooltipInner } from '../core/section/constructor';
-import { env } from '../helper';
+import { domUtils, env } from '../helper';
 
 const { _w } = env;
+const DIRECTION_CURSOR_MAP = { w: 'ns-resize', h: 'ew-resize', c: 'nwse-resize', wRTL: 'ns-resize', hRTL: 'ew-resize', cRTL: 'nesw-resize' };
 
 const Modal = function (inst, element) {
 	CoreInjector.call(this, inst.editor);
+	this.offset = this.editor.offset;
 
 	// members
 	this.inst = inst;
@@ -20,6 +22,8 @@ const Modal = function (inst, element) {
 	this._bindClose = null;
 	this._onClickEvent = null;
 	this._closeSignal = false;
+	// resie
+	this._resizeBody = null;
 
 	// add element
 	this._modalInner.appendChild(element);
@@ -27,6 +31,26 @@ const Modal = function (inst, element) {
 	// init
 	this.eventManager.addEvent(element.querySelector('form'), 'submit', Action.bind(this));
 	this._closeSignal = !this.eventManager.addEvent(element.querySelector('[data-command="close"]'), 'click', this.close.bind(this));
+
+	// resize
+	if (element.querySelector('.se-modal-resize-handle-w') || element.querySelector('.se-modal-resize-handle-h') || element.querySelector('.se-modal-resize-handle-c') || element.querySelector('.se-modal-resize-form')) {
+		if (!(this._resizeBody = element.querySelector('.se-modal-resize-form')) && (this._resizeBody = element.querySelector('.se-modal-body'))) {
+			this.eventManager.addEvent(element.querySelector('.se-modal-resize-handle-w'), 'mousedown', OnResizeMouseDown.bind(this, 'w'));
+			this.eventManager.addEvent(element.querySelector('.se-modal-resize-handle-h'), 'mousedown', OnResizeMouseDown.bind(this, 'h'));
+			this.eventManager.addEvent(element.querySelector('.se-modal-resize-handle-c'), 'mousedown', OnResizeMouseDown.bind(this, 'c'));
+
+			this._currentHandle = null;
+			this.__resizeDir = '';
+			this.__offetTop = 0;
+			this.__offetLeft = 0;
+			this.__globalEventHandlers = {
+				mousemove: OnResize.bind(this),
+				mouseup: OnResizeMouseUp.bind(this)
+			};
+			this._bindClose_mousemove = null;
+			this._bindClose_mouseup = null;
+		}
+	}
 };
 
 Modal.prototype = {
@@ -51,6 +75,16 @@ Modal.prototype = {
 		this._modalInner.style.display = 'block';
 		this.form.style.display = 'block';
 
+		if (this._resizeBody) {
+			const offset = this._saveOffset();
+			const { maxWidth, maxHeight } = _w.getComputedStyle(this.form);
+			const mw = `${this.form.offsetWidth - offset.width}px`;
+			const mh = `${this.form.offsetTop + (this.form.offsetHeight - this._resizeBody.offsetHeight)}px`;
+			// set max
+			if (maxWidth && typeof this.__resizeDir === 'string') domUtils.setStyle(this._resizeBody, 'max-width', `calc(${maxWidth} - ${mw})`);
+			if (maxHeight) domUtils.setStyle(this._resizeBody, 'max-height', `calc(${maxHeight} - ${mh})`);
+		}
+
 		if (this.focusElement) this.focusElement.focus();
 	},
 
@@ -59,6 +93,7 @@ Modal.prototype = {
 	 * The plugin's "init" method is called.
 	 */
 	close() {
+		this.__removeGlobalEvent();
 		this._fixCurrentController(false);
 		_w.setTimeout(() => {
 			this.editor.opendModal = null;
@@ -73,6 +108,7 @@ Modal.prototype = {
 		this._modalArea.style.display = 'none';
 
 		if (typeof this.inst.init === 'function') this.inst.init();
+		if (typeof this.inst.off === 'function') this.inst.off(this.isUpdate);
 		this.editor.focus();
 	},
 
@@ -84,6 +120,26 @@ Modal.prototype = {
 		}
 	},
 
+	_saveOffset() {
+		const offset = this.offset.getGlobal(this._resizeBody);
+		this.__offetTop = offset.top;
+		this.__offetLeft = offset.left;
+		return offset;
+	},
+
+	__addGlobalEvent(dir) {
+		this.__removeGlobalEvent();
+		this.editor.enableBackWrapper(DIRECTION_CURSOR_MAP[dir]);
+		this._bindClose_mousemove = this.eventManager.addGlobalEvent('mousemove', this.__globalEventHandlers.mousemove, true);
+		this._bindClose_mouseup = this.eventManager.addGlobalEvent('mouseup', this.__globalEventHandlers.mouseup, true);
+	},
+
+	__removeGlobalEvent() {
+		this.editor.disableBackWrapper();
+		if (this._bindClose_mousemove) this._bindClose_mousemove = this.eventManager.removeGlobalEvent(this._bindClose_mousemove);
+		if (this._bindClose_mouseup) this._bindClose_mouseup = this.eventManager.removeGlobalEvent(this._bindClose_mouseup);
+	},
+
 	constructor: Modal
 };
 
@@ -130,6 +186,57 @@ function CloseListener(e) {
 	this.close();
 }
 
+/** Resize events */
+function OnResizeMouseDown(dir, e) {
+	domUtils.addClass((this._currentHandle = e.target), 'active');
+	this.__addGlobalEvent((this.__resizeDir = dir + (this.options.get('_rtl') ? 'RTL' : '')));
+}
+
+function OnResize(e) {
+	switch (this.__resizeDir) {
+		case 'w':
+		case 'wRTL': {
+			const h = e.clientY - this.__offetTop - this._resizeBody.offsetHeight;
+			this._resizeBody.style.height = this._resizeBody.offsetHeight + h + 'px';
+			break;
+		}
+		case 'h': {
+			const w = e.clientX - this.__offetLeft - this._resizeBody.offsetWidth;
+			this._resizeBody.style.width = this._resizeBody.offsetWidth + w + 'px';
+			break;
+		}
+		case 'hRTL': {
+			const w = this.__offetLeft - e.clientX;
+			this._resizeBody.style.width = this._resizeBody.offsetWidth + w + 'px';
+			break;
+		}
+		case 'c': {
+			const w = e.clientX - this.__offetLeft - this._resizeBody.offsetWidth;
+			const h = e.clientY - this.__offetTop - this._resizeBody.offsetHeight;
+			this._resizeBody.style.width = this._resizeBody.offsetWidth + w + 'px';
+			this._resizeBody.style.height = this._resizeBody.offsetHeight + h + 'px';
+			break;
+		}
+		case 'cRTL': {
+			const w = this.__offetLeft - e.clientX;
+			const h = e.clientY - this.__offetTop - this._resizeBody.offsetHeight;
+			this._resizeBody.style.width = this._resizeBody.offsetWidth + w + 'px';
+			this._resizeBody.style.height = this._resizeBody.offsetHeight + h + 'px';
+			break;
+		}
+	}
+
+	this._saveOffset();
+
+	if (typeof this.inst.modalResize === 'function') this.inst.modalResize();
+}
+
+function OnResizeMouseUp() {
+	domUtils.removeClass(this._currentHandle, 'active');
+	this._currentHandle = null;
+	this.__removeGlobalEvent();
+}
+
 // HTML Creator ======================================================================================================
 
 // Create a file input tag

package/src/plugins/command/exportPdf.js

@@ -45,7 +45,7 @@ ExportPdf.prototype = {
 
 		try {
 			const topArea = this.editor.frameContext.get('topArea');
-			const editableDiv = domUtils.createElement('div', { class: this.editor.frameContext.get('wysiwygFrame').className }, this.html.get());
+			const editableDiv = domUtils.createElement('div', { class: this.editor.frameContext.get('wysiwyg').className }, this.html.get());
 			ww = domUtils.createElement('div', { style: `position: absolute; left: -10000px; width: ${topArea.clientWidth}px; height: auto;` }, editableDiv);
 
 			if (this.apiUrl) {

package/src/plugins/command/list_bulleted.js

@@ -8,7 +8,7 @@ const List_bulleted = function (editor) {
 	EditorInjector.call(this, editor);
 	this.title = this.lang.bulletedList;
 	this.icon = 'list_bulleted';
-	this.afterButton = domUtils.createElement(
+	this.afterItem = domUtils.createElement(
 		'button',
 		{ class: 'se-btn se-tooltip se-sub-arrow-btn', 'data-command': List_bulleted.key, 'data-type': 'dropdown' },
 		`${this.icons.arrow_down}<span class="se-tooltip-inner"><span class="se-tooltip-text">${this.lang.bulletedList}</span></span>`

package/src/plugins/command/list_numbered.js

@@ -8,7 +8,7 @@ const List_numbered = function (editor) {
 	EditorInjector.call(this, editor);
 	this.title = this.lang.numberedList;
 	this.icon = 'list_numbered';
-	this.afterButton = domUtils.createElement(
+	this.afterItem = domUtils.createElement(
 		'button',
 		{ class: 'se-btn se-tooltip se-sub-arrow-btn', 'data-command': List_numbered.key, 'data-type': 'dropdown' },
 		`${this.icons.arrow_down}<span class="se-tooltip-inner"><span class="se-tooltip-text">${this.lang.numberedList}</span></span>`

package/src/plugins/index.js

@@ -29,12 +29,14 @@ import image from './modal/image';
 import video from './modal/video';
 import audio from './modal/audio';
 import math from './modal/math';
+import drawing from './modal/drawing';
 
 // file browser
 import imageGallery from './fileBrowser/imageGallery';
 
 // input
 import fontSize from './input/fontSize';
+import pageNavigator from './input/pageNavigator';
 
 // popup
 import anchor from './popup/anchor';
@@ -64,8 +66,10 @@ export {
 	video,
 	audio,
 	math,
+	drawing,
 	imageGallery,
 	fontSize,
+	pageNavigator,
 	anchor
 };
 export default {
@@ -93,7 +97,9 @@ export default {
 	video,
 	audio,
 	math,
+	drawing,
 	imageGallery,
 	fontSize,
+	pageNavigator,
 	anchor
 };