suneditor - npm Package Compare versions

Comparing version 3.0.0-alpha.5 to 3.0.0-alpha.6

package.json

 {
 	"name": "suneditor",
-	"version": "3.0.0-alpha.5",
+	"version": "3.0.0-alpha.6",
 	"description": "Vanilla javascript based WYSIWYG web editor",
@@ -5,0 +5,0 @@ "author": "Yi JiHong",

src/core/base/eventManager.js

@@ -291,3 +291,3 @@ /**
 	 * @description remove class, display text.
-	 * @param {Array|null} ignoredList Igonred button list
+	 * @param {Array} ignoredList Igonred button list
 	 * @private
@@ -523,7 +523,7 @@ */
 
-	_dataTransferAction(type, e, data, frameContext) {
-		const plainText = data.getData('text/plain');
-		const cleanData = data.getData('text/html');
+	_dataTransferAction(type, e, clipboardData, frameContext) {
+		const plainText = clipboardData.getData('text/plain');
+		const cleanData = clipboardData.getData('text/html');
 		try {
-			this._setClipboardData(type, e, plainText, cleanData, data, frameContext);
+			this._setClipboardData(type, e, plainText, cleanData, clipboardData, frameContext);
 			e.preventDefault();
@@ -537,6 +537,11 @@ e.stopPropagation();
 
-	async _setClipboardData(type, e, plainText, cleanData, data, frameContext) {
+	async _setClipboardData(type, e, plainText, cleanData, clipboardData, frameContext) {
+		const onlyText = !cleanData;
+
+		// SE copy data
+		const SEData = !!clipboardData.getData('application/se-copy-data');
 		// MS word, OneNode, Excel
 		const MSData = /class=["']*Mso(Normal|List)/i.test(cleanData) || /content=["']*Word.Document/i.test(cleanData) || /content=["']*OneNote.File/i.test(cleanData) || /content=["']*Excel.Sheet/i.test(cleanData);
-		const onlyText = !cleanData;
+		// from
+		const from = SEData ? 'SE' : MSData ? 'MS' : '';
 
@@ -557,3 +562,3 @@ if (!onlyText) {
 		if (type === 'paste') {
-			const value = await this.triggerEvent('onPaste', { frameContext, event: e, cleanData, maxCharCount });
+			const value = await this.triggerEvent('onPaste', { frameContext, event: e, html: cleanData, maxCharCount, from });
 			if (value === false) {
@@ -568,3 +573,3 @@ return false;
 		if (type === 'drop') {
-			const value = await this.triggerEvent('onDrop', { frameContext, event: e, cleanData, maxCharCount });
+			const value = await this.triggerEvent('onDrop', { frameContext, event: e, html: cleanData, maxCharCount, from });
 			if (value === false) {
@@ -579,3 +584,3 @@ return false;
 		// files
-		const files = data.files;
+		const files = clipboardData.files;
 		if (files.length > 0 && !MSData) {
@@ -679,3 +684,3 @@ for (let i = 0, len = files.length; i < len; i++) {
 		/** drag handle */
-		const dragHandle = this.editor.frameContext.get('wrapper').querySelector('.se-drag-handle');
+		const dragHandle = fc.get('wrapper').querySelector('.se-drag-handle');
 		this.addEvent(
@@ -682,0 +687,0 @@ dragHandle,

src/core/base/history.js

@@ -269,3 +269,3 @@ /**
 			const historyIndex = target.get('historyIndex');
-			const isChanged = savedIndex > -1 ? savedIndex !== index : isReset ? root.length > 0 : index > 0 && historyIndex !== index;
+			const isChanged = savedIndex > -1 ? savedIndex !== index : isReset ? root.index > 0 : index > 0 && historyIndex !== index;
 
@@ -272,0 +272,0 @@ target.set('historyIndex', index);

src/core/class/char.js

@@ -79,5 +79,6 @@ /**
 	display() {
-		if (this.editor.frameContext.has('charCounter')) {
+		const charCounter = this.editor.frameContext.get('charCounter');
+		if (charCounter) {
 			_w.setTimeout(() => {
-				this.editor.frameContext.get('charCounter').textContent = this.getLength();
+				charCounter.textContent = this.getLength();
 			}, 0);
@@ -84,0 +85,0 @@ }

src/core/class/component.js

@@ -225,3 +225,5 @@ /**
 			const sizeTarget = info.caption ? info.target : info.cover || info.container || info.target;
-			const { w, h, t, l } = this.offset.getSize(sizeTarget);
+			const w = sizeTarget.offsetWidth;
+			const h = sizeTarget.offsetHeight;
+			const { top, left } = this.offset.getLocal(sizeTarget);
 
@@ -231,4 +233,4 @@ dragHandle.style.opacity = 0;
 			dragHandle.style.height = h + 'px';
-			dragHandle.style.top = t + 'px';
-			dragHandle.style.left = l + 'px';
+			dragHandle.style.top = top + 'px';
+			dragHandle.style.left = left + 'px';
 
@@ -344,7 +346,9 @@ _DragHandle.set('__dragHandler', dragHandle);
 		const dir = isRtl ? ['right', 'left'] : ['left', 'right'];
-		const { t, scrollX, scrollY } = this.offset.getSize(offsetTarget);
+		const top = offsetTarget.offsetTop;
+		const { 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);
 			this.eventManager._lineBreakComp = container;
-			componentTop = t + scrollY;
+			componentTop = top;
 			w = target.offsetWidth / 2 / 2;
@@ -368,3 +372,3 @@ t_style.top = componentTop - scrollY - tH / 2 + 'px';
 				this.eventManager._lineBreakComp = container;
-				componentTop = t + scrollY;
+				componentTop = top;
 				w = target.offsetWidth / 2 / 2;
@@ -371,0 +375,0 @@ }

src/core/class/html.js

@@ -134,2 +134,16 @@ /**
 	/**
+	 * @description Check if the node is a format node.
+	 * @param {string} html HTML string
+	 * @param {object} params
+	 * @param {string} params.whitelist Whitelist of allowed tags. ex) tag|tag
+	 * @param {string} params.blacklist Blacklist of disallowed tags. ex) tag|tag
+	 * @returns {string}
+	 */
+	filterTags(html, { whitelist, blacklist }) {
+		html = whitelist ? html.replace(converter.createElementWhitelist(whitelist), '') : html;
+		html = blacklist ? html.replace(converter.createElementBlacklist(blacklist), '') : html;
+		return html;
+	},
+
+	/**
 	 * @description Clean and compress the HTML code to suit the editor format.
@@ -151,2 +165,3 @@ * @param {string} html HTML string
 		if (tagFilter) {
+			html = html.replace(this.__disallowedTagsRegExp, '');
 			html = this._deleteDisallowedTags(html, this._elementWhitelistRegExp, this._elementBlacklistRegExp).replace(/<br\/?>$/i, '');
@@ -170,8 +185,10 @@ }
 
-		this.editor._MELInfo.forEach((method, query) => {
-			const infoLst = dom.querySelectorAll(query);
-			for (let i = 0, len = infoLst.length; i < len; i++) {
-				method(infoLst[i]);
-			}
-		});
+		if (this.options.get('__pluginRetainFilter')) {
+			this.editor._MELInfo.forEach((method, query) => {
+				const infoLst = dom.querySelectorAll(query);
+				for (let i = 0, len = infoLst.length; i < len; i++) {
+					method(infoLst[i]);
+				}
+			});
+		}
 
@@ -1494,3 +1511,2 @@ if (formatFilter) {
 	_deleteDisallowedTags(html, whitelistRegExp, blacklistRegExp) {
-		html = html.replace(this.__disallowedTagsRegExp, '');
 		if (whitelistRegExp.test('<font>')) {
@@ -1497,0 +1513,0 @@ html = html.replace(/(<\/?)font(\s?)/gi, '$1span$2');

src/core/class/offset.js

@@ -21,27 +21,2 @@ /**
 	/**
-	 * @description Returns the offset and size of the argument, "target" relative to the editor.
-	 * @param {Node} target Target node
-	 * @returns {{w:number, h:number, t:number, l:number, scrollX:number, scrollY:number}}
-	 */
-	getSize(target) {
-		const eventWysiwyg = this.editor.frameContext.get('eventWysiwyg');
-		const wFrame = this.editor.frameContext.get('wysiwygFrame');
-		const offset = this.get(target);
-		const frameOffset = this.get(wFrame);
-		const w = target.offsetWidth - 1;
-		const h = target.offsetHeight - 1;
-		const t = offset.top - (this.editor.frameOptions.get('iframe') ? frameOffset.top : 0);
-		const l = offset.left - (this.editor.frameOptions.get('iframe') ? frameOffset.left + (eventWysiwyg.scrollX || eventWysiwyg.scrollLeft || 0) : 0) - wFrame.scrollLeft;
-
-		return {
-			w,
-			h,
-			t,
-			l,
-			scrollX: eventWysiwyg.scrollX || eventWysiwyg.scrollLeft || 0,
-			scrollY: eventWysiwyg.scrollY || eventWysiwyg.scrollTop || 0
-		};
-	},
-
-	/**
 	 * @description Gets the position just outside the argument's internal editor(wysiwygFrame). [getLocal() + iframe offset]
@@ -80,5 +55,8 @@ * @param {Node} node Target node
 
+		const eventWysiwyg = this.editor.frameContext.get('eventWysiwyg');
 		return {
 			left: offsetLeft,
-			top: offsetTop - (wysiwyg ? wysiwyg.scrollTop : 0)
+			top: offsetTop - (wysiwyg ? wysiwyg.scrollTop : 0),
+			scrollX: eventWysiwyg.scrollX || eventWysiwyg.scrollLeft || 0,
+			scrollY: eventWysiwyg.scrollY || eventWysiwyg.scrollTop || 0
 		};
@@ -338,3 +316,3 @@ },
 
-		const menuHeight_bottom = getClientSize(this.editor.frameContext.get('_wd')).h - (containerTop - scrollTop + bt + target.offsetHeight);
+		const menuHeight_bottom = getClientSize(_d).h - (containerTop - scrollTop + bt + target.offsetHeight);
 		if (menuHeight_bottom < elHeight) {
@@ -558,3 +536,3 @@ let menuTop = -1 * (elHeight - bt + 3);
 	_getWindowScroll() {
-		const viewPort = domUtils.getClientSize();
+		const viewPort = domUtils.getClientSize(_d);
 		return {
@@ -561,0 +539,0 @@ top: _w.scrollY,

src/core/section/constructor.js

@@ -360,2 +360,3 @@ import _icons from '../../assets/icons/_default';
 	});
+	o.set('__pluginRetainFilter', options.__pluginRetainFilter ?? true);
 	o.set('mode', options.mode || 'classic'); // classic, inline, balloon, balloon-always
@@ -362,0 +363,0 @@ o.set('externalLibs', options.externalLibs || {});

src/modules/Figure.js

@@ -240,3 +240,5 @@ import EditorInjector from '../editorInjector';
 		const sizeTarget = figureTarget ? this._cover || this._container || target : target;
-		const { w, h, t, l, scrollX, scrollY } = this.offset.getSize(sizeTarget);
+		const w = sizeTarget.offsetWidth;
+		const h = sizeTarget.offsetHeight;
+		const { top, left, scrollX, scrollY } = this.offset.getLocal(sizeTarget);
 
@@ -253,4 +255,4 @@ const dataSize = (target.getAttribute('data-se-size') || '').split(',');
 			h: h,
-			t: t,
-			l: l,
+			t: top,
+			l: left,
 			width: dataSize[0] || 'auto',
@@ -268,4 +270,4 @@ height: dataSize[1] || 'auto',
 		this.editor._figureContainer = _figure.main;
-		_figure.main.style.top = t + 'px';
-		_figure.main.style.left = l + 'px';
+		_figure.main.style.top = top + 'px';
+		_figure.main.style.left = left + 'px';
 		_figure.main.style.width = (this.isVertical ? h : w) + 'px';
@@ -278,3 +280,3 @@ _figure.main.style.height = (this.isVertical ? w : h) + 'px';
 
-		this.__offset = { left: l + scrollX, top: t + scrollY };
+		this.__offset = { left: left + scrollX, top: top + scrollY };
 		this.editor.opendControllers.push({
@@ -331,4 +333,4 @@ position: 'none',
 		this._element_h = this._resize_h = h;
-		this._element_l = l;
-		this._element_t = t;
+		this._element_l = left;
+		this._element_t = top;
 
@@ -335,0 +337,0 @@ // drag

src/plugins/command/fileUpload.js

@@ -79,3 +79,3 @@ import EditorInjector from '../../editorInjector';
 FileUpload.component = function (node) {
-	return domUtils.isAnchor(node) && node.hasAttribute('download') && node.hasAttribute('data-se-file-download') ? node : null;
+	return domUtils.isAnchor(node) && node.hasAttribute('data-se-file-download') ? node : null;
 };
@@ -82,0 +82,0 @@ FileUpload.prototype = {

No alert changes

Improved metrics

Total package byte prevSize

1971825

increased by0.02%

Lines of code

36396

increased by0.02%

No dependency changes