suneditor 3.0.0-beta.7 → 3.0.0-beta.8

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "suneditor",
-	"version": "3.0.0-beta.7",
+	"version": "3.0.0-beta.8",
 	"description": "Vanilla javascript based WYSIWYG web editor",
 	"author": "Yi JiHong",
 	"license": "MIT",

package/src/core/section/constructor.js

@@ -21,7 +21,7 @@ const DEFAULT_BUTTON_LIST = [
 const REQUIRED_FORMAT_LINE = 'div';
 const REQUIRED_ELEMENT_WHITELIST = 'br|div';
 const DEFAULT_ELEMENT_WHITELIST =
-	'p|pre|blockquote|h1|h2|h3|h4|h5|h6|ol|ul|li|hr|figure|figcaption|img|iframe|audio|video|source|table|thead|tbody|tr|th|td|caption|a|b|strong|var|i|em|u|ins|s|span|strike|del|sub|sup|code|svg|path|details|summary';
+	'p|pre|blockquote|h1|h2|h3|h4|h5|h6|ol|ul|li|hr|figure|figcaption|img|iframe|audio|video|source|table|colgroup|col|thead|tbody|tr|th|td|caption|a|b|strong|var|i|em|u|ins|s|span|strike|del|sub|sup|code|svg|path|details|summary';
 const DEFAULT_TEXT_STYLE_TAGS = 'strong|span|font|b|var|i|em|u|ins|s|strike|del|sub|sup|mark|a|label|code|summary';
 
 /* scopeSelectionTags */
@@ -46,7 +46,10 @@ const DEFAULT_CLASS_MJX = 'mjx-container|mjx-math|mjx-mrow|mjx-mi|mjx-mo|mjx-mn|
 const DEFAULT_EXTRA_TAG_MAP = { script: false, style: false, meta: false, link: false, '[a-z]+:[a-z]+': false };
 
 const DEFAULT_TAG_STYLES = {
-	'table|th|td': 'border|border-[a-z]+|background-color|text-align|float|font-weight|text-decoration|font-style',
+	'table|th|td|tr': 'border|border-[a-z]+|background-color|text-align|float|font-weight|text-decoration|font-style|vertical-align|text-align',
+	'table|td': 'width',
+	tr: 'height',
+	col: 'width',
 	'ol|ul': 'list-style-type'
 };
 const DEFAULT_TEXT_STYLES = 'font-family|font-size|color|background-color';

package/src/helper/converter.js

@@ -2,14 +2,14 @@ import { _d, _w } from './env';
 
 const URLPattern = /https?:\/\/[^\s]+/g;
 const FONT_VALUES_MAP = {
-	'xx-small': 1,
-	'x-small': 2,
-	small: 3,
-	medium: 4,
-	large: 5,
-	'x-large': 6,
-	'xx-large': 7,
-	'xxx-large': 8
+	'xx-small': 0.5625,
+	'x-small': 0.625,
+	small: 0.8333,
+	medium: 1,
+	large: 1.125,
+	'x-large': 1.5,
+	'xx-large': 2,
+	'xxx-large': 2.5
 };
 
 function NodeToJson(node) {

package/src/helper/dom/domUtils.js

@@ -264,7 +264,7 @@ export function setStyle(elements, styleName, value) {
 	for (let i = 0, len = elements.length, e; i < len; i++) {
 		e = /** @type {HTMLElement} */ (elements[i]);
 		e.style[styleName] = value;
-		if (!value && !e.style.cssText) {
+		if (!e.style.cssText) {
 			e.removeAttribute('style');
 		}
 	}

package/src/plugins/dropdown/table.js

@@ -423,13 +423,28 @@ class Table extends EditorInjector {
 			query: 'table',
 			method: (element) => {
 				const ColgroupEl = element.querySelector('colgroup');
-				let FigureEl = dom.check.isFigure(element.parentNode) ? element.parentNode : null;
-				if (ColgroupEl && FigureEl) return;
+				let FigureEl = /** @type {HTMLElement} */ (dom.check.isFigure(element.parentNode) ? element.parentNode : null);
 
 				// create colgroup
 				if (!ColgroupEl) {
+					const rows = element.rows;
+					const firstRow = rows[0];
 					const maxCount = GetMaxColumns(element);
-					const colGroup = dom.utils.createElement('colgroup', null, `<col style="width: ${numbers.get(100 / maxCount, CELL_DECIMAL_END)}%;">`.repeat(maxCount));
+					const colHTML = [];
+
+					for (let i = 0; i < maxCount; i++) {
+						let colStyle = '';
+						if (firstRow && firstRow.cells[i]) {
+							const styleWidth = firstRow.cells[i].style.width;
+							if (styleWidth) {
+								colStyle = ` style="width: ${styleWidth};"`;
+								dom.utils.setStyle(firstRow.cells[i], 'width', '');
+							}
+						}
+						colHTML.push(`<col${colStyle}>`);
+					}
+
+					const colGroup = dom.utils.createElement('colgroup', null, colHTML.join(''));
 					element.insertBefore(colGroup, element.firstElementChild);
 				}
 
@@ -442,6 +457,12 @@ class Table extends EditorInjector {
 					dom.utils.addClass(FigureEl, 'se-flex-component|se-input-component');
 				}
 
+				// table width
+				if (element.style.width) {
+					FigureEl.style.width = element.style.width;
+					dom.utils.setStyle(element, 'width', '');
+				}
+
 				// scroll
 				if (!this.figureScroll) {
 					dom.utils.removeClass(FigureEl, this.figureScrollList.join('|'));