suneditor 3.0.0-alpha.2 → 3.0.0-alpha.20

package/src/assets/variables.css

@@ -0,0 +1,138 @@
+.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;
+	--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: 32px;
+	--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

@@ -1,24 +1,33 @@
-import { domUtils, env } from '../../../helper';
+import { dom, env } from '../../../helper';
 
 const { isMobile } = env;
 
+/**
+ * @typedef {Omit<import('../eventManager').default & Partial<__se__EditorInjector>, 'eventManager'>} EventManagerThis
+ */
+
+/**
+ * @private
+ * @this {EventManagerThis}
+ * @param {MouseEvent} e - Event object
+ */
 export function ButtonsHandler(e) {
-	let target = e.target;
+	const eventTarget = dom.query.getEventTarget(e);
+	let target = eventTarget;
 
 	if (this.editor.isSubBalloon && !this.context.get('toolbar.sub.main')?.contains(target)) {
 		this._hideToolbar_sub();
 	}
 
-	const isInput = domUtils.isInputElement(target);
-	if (this.menu._bindControllersOff) e.stopPropagation();
+	const isInput = dom.check.isInputElement(target);
 
 	if (isInput) {
-		this.editor._antiBlur = false;
+		this.editor._preventBlur = false;
 	} else if (!this.editor.frameContext.get('wysiwyg').contains(this.selection.getNode())) {
 		this.editor.focus();
 	}
 
-	if (domUtils.getParentElement(target, '.se-dropdown')) {
+	if (dom.query.getParentElement(target, '.se-dropdown')) {
 		e.stopPropagation();
 		this.editor._notHideToolbar = true;
 	} else {
@@ -26,20 +35,20 @@ export function ButtonsHandler(e) {
 		let className = target.className;
 
 		while (target && !command && !/(se-menu-list|sun-editor-common|se-menu-tray)/.test(className)) {
-			target = target.parentNode;
+			target = target.parentElement;
 			command = target.getAttribute('data-command');
 			className = target.className;
 		}
 
 		// toolbar input button
 		if (isInput && /^INPUT$/i.test(target?.getAttribute('data-type'))) {
-			this.editor._antiBlur = this._inputFocus = true;
+			this.editor._preventBlur = this._inputFocus = true;
 			if (!this.status.hasFocus) this.applyTagEffect();
 			/* event */
-			const eventTarget = e.target;
-			if (!domUtils.isInputElement(eventTarget) || eventTarget.disabled) return;
+			if (!dom.check.isInputElement(eventTarget) || eventTarget.disabled) return;
 
 			const plugin = this.plugins[command];
+			if (!plugin) return;
 
 			if (this.__inputBlurEvent) this.__removeInput();
 
@@ -75,7 +84,7 @@ export function ButtonsHandler(e) {
 			return;
 		} else if (!this.editor.frameContext.get('isCodeView')) {
 			if (isMobile) {
-				this.editor._antiBlur = true;
+				this.editor._preventBlur = true;
 			} else {
 				e.preventDefault();
 				if (env.isGecko && command) {
@@ -84,14 +93,20 @@ export function ButtonsHandler(e) {
 			}
 		}
 
-		if (command === this.menu.currentDropdownName || command === this.editor._containerName) {
+		if (command === this.menu.currentDropdownName || command === this.menu.currentContainerName) {
 			e.stopPropagation();
 		}
 	}
 }
 
+/**
+ * @private
+ * @this {EventManagerThis}
+ * @param {MouseEvent} e - Event object
+ */
 export function OnClick_menuTray(e) {
-	const target = domUtils.getCommandTarget(e.target);
+	const eventTarget = dom.query.getEventTarget(e);
+	const target = dom.query.getCommandTarget(eventTarget);
 	if (!target) return;
 
 	let t = target;
@@ -109,6 +124,12 @@ export function OnClick_menuTray(e) {
 	plugin.action(target);
 }
 
+/**
+ * @private
+ * @this {EventManagerThis}
+ * @param {MouseEvent} e - Event object
+ */
 export function OnClick_toolbar(e) {
-	this.editor.runFromTarget(e.target);
+	const eventTarget = dom.query.getEventTarget(e);
+	this.editor.runFromTarget(eventTarget);
 }

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

@@ -1,30 +1,55 @@
+/**
+ * @typedef {Omit<import('../eventManager').default & Partial<__se__EditorInjector>, 'eventManager'>} EventManagerThis
+ */
+
+/**
+ * @private
+ * @this {EventManagerThis}
+ * @param {ClipboardEvent} e - Event object
+ */
 export function OnPaste_wysiwyg(frameContext, e) {
 	const clipboardData = e.clipboardData;
 	if (!clipboardData) return true;
 	return this._dataTransferAction('paste', e, clipboardData, frameContext);
 }
 
-export function OnCopy_wysiwyg(frameContext, e) {
+/**
+ * @private
+ * @this {EventManagerThis}
+ * @param {ClipboardEvent} e - Event object
+ */
+export async function OnCopy_wysiwyg(frameContext, e) {
 	const clipboardData = e.clipboardData;
 
 	// user event
-	if (this.triggerEvent('onCopy', { frameContext, event: e, clipboardData }) === false) {
+	if ((await this.triggerEvent('onCopy', { frameContext, event: e, clipboardData })) === false) {
 		e.preventDefault();
 		e.stopPropagation();
 		return false;
 	}
+
+	const fcSelection = frameContext.get('_ww').getSelection();
+	this.__secopy = fcSelection.toString();
 }
 
-export function OnCut_wysiwyg(frameContext, e) {
+/**
+ * @private
+ * @this {EventManagerThis}
+ * @param {ClipboardEvent} e - Event object
+ */
+export async function OnCut_wysiwyg(frameContext, e) {
 	const clipboardData = e.clipboardData;
 
 	// user event
-	if (this.triggerEvent('onCut', { frameContext, event: e, clipboardData }) === false) {
+	if ((await this.triggerEvent('onCut', { frameContext, event: e, clipboardData })) === false) {
 		e.preventDefault();
 		e.stopPropagation();
 		return false;
 	}
 
+	const fcSelection = frameContext.get('_ww').getSelection();
+	this.__secopy = fcSelection.toString();
+
 	this._w.setTimeout(() => {
 		this.history.push(false);
 	}, 0);

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

@@ -1,26 +1,47 @@
-import { domUtils } from '../../../helper';
+import { dom } from '../../../helper';
 import { _DragHandle } from '../../../modules';
 
-export function OnDragOver_wysiwyg(dragCursor, _iframe, e) {
+/**
+ * @typedef {Omit<import('../eventManager').default & Partial<__se__EditorInjector>, 'eventManager'>} EventManagerThis
+ */
+
+/**
+ * @private
+ * @this {EventManagerThis}
+ * @param {__se__FrameContext} fc - Frame context object
+ * @param {HTMLElement} dragCursor - Drag cursor element
+ * @param {?HTMLElement} _iframeTopArea - Iframe top area element
+ * @param {?HTMLElement} _innerToolbar - Inner toolbar element
+ * @param {DragEvent} e - Event object
+ */
+export function OnDragOver_wysiwyg(fc, dragCursor, _iframeTopArea, _innerToolbar, e) {
 	e.preventDefault();
 
-	const { sc, so, ec, eo } = this.selection.getEventLocationRange(e);
+	const { sc, so, ec, eo } = this.selection.getDragEventLocationRange(e);
 
-	const cursorRange = this._d.createRange();
+	const cursorRange = fc.get('_wd').createRange();
 	cursorRange.setStart(sc, so);
 	cursorRange.setEnd(ec, eo);
 
 	const _offset = { y: 0, x: 0 };
-	if (_iframe) {
-		const iframeOffset = this.offset.getGlobal(this.editor.frameContext.get('topArea'));
-		_offset.y = iframeOffset.top - this._w.scrollY;
+	if (_iframeTopArea) {
+		const iframeOffset = this.offset.getGlobal(_iframeTopArea);
+		const toolbarH = _innerToolbar ? this.context.get('toolbar.main').offsetHeight : 0;
+		_offset.y = iframeOffset.top + toolbarH - this._w.scrollY;
 		_offset.x = iframeOffset.left - this._w.scrollX;
 	}
 
 	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 {
@@ -28,9 +49,25 @@ export function OnDragOver_wysiwyg(dragCursor, _iframe, e) {
 	}
 }
 
-export function OnDrop_wysiwyg(frameContext, dragCursor, e) {
+/**
+ * @private
+ * @this {EventManagerThis}
+ * @param {HTMLElement} dragCursor - Drag cursor element
+ */
+export function OnDragEnd_wysiwyg(dragCursor) {
+	dragCursor.style.display = 'none';
+}
+
+/**
+ * @private
+ * @this {EventManagerThis}
+ * @param {__se__FrameContext} fc - Frame context object
+ * @param {HTMLElement} dragCursor - Drag cursor element
+ * @param {DragEvent} e - Event object
+ */
+export function OnDrop_wysiwyg(fc, dragCursor, e) {
 	try {
-		if (frameContext.get('isReadOnly')) {
+		if (fc.get('isReadOnly')) {
 			e.preventDefault();
 			e.stopPropagation();
 			return false;
@@ -39,9 +76,9 @@ export function OnDrop_wysiwyg(frameContext, dragCursor, e) {
 		const dataTransfer = e.dataTransfer;
 		if (!dataTransfer) return true;
 
-		const { sc, so, ec, eo } = this.selection.getEventLocationRange(e);
+		const { sc, so, ec, eo } = this.selection.getDragEventLocationRange(e);
 
-		if (domUtils.getParentElement(sc, '.se-disable-pointer')) {
+		if (dom.query.getParentElement(sc, '.se-disable-pointer')) {
 			e.preventDefault();
 			return;
 		}
@@ -56,13 +93,20 @@ export function OnDrop_wysiwyg(frameContext, dragCursor, e) {
 			const dragContainer = _DragHandle.get('__dragContainer');
 			this.component.deselect();
 			this.selection.setRange(sc, so, ec, eo);
-			this.html.insertNode(dragContainer, null, true);
+			this.html.insertNode(dragContainer, { afterNode: null, skipCharCount: true });
+
+			// document type page
+			if (fc.has('documentType-use-page')) {
+				fc.get('documentTypePageMirror').innerHTML = fc.get('wysiwyg').innerHTML;
+				fc.get('documentType').rePage(true);
+			}
+
 			return;
 		}
 
 		this.html.remove();
 		this.selection.setRange(sc, so, ec, eo);
-		return this._dataTransferAction('drop', e, dataTransfer, frameContext);
+		return this._dataTransferAction('drop', e, dataTransfer, fc);
 	} finally {
 		dragCursor.style.display = 'none';
 	}