suneditor 2.46.2 → 3.0.0-alpha.2

package/src/langs/zh_cn.js

@@ -0,0 +1,162 @@
+(function (global, factory) {
+	if (typeof module === 'object' && typeof module.exports === 'object') {
+		module.exports = global.document
+			? factory(global, true)
+			: function (w) {
+					if (!w.document) {
+						throw new Error('SUNEDITOR_LANG a window with a document');
+					}
+					return factory(w);
+			  };
+	} else {
+		factory(global);
+	}
+})(typeof window !== 'undefined' ? window : this, function (window, noGlobal) {
+	const lang = {
+		code: 'zh_cn',
+		align: '对齐方式',
+		alignCenter: '居中',
+		alignJustify: '两端对齐',
+		alignLeft: '左对齐',
+		alignRight: '右对齐',
+		audio: '音讯',
+		audio_modal_file: '上传图片',
+		audio_modal_title: '插入音频',
+		audio_modal_url: '音频网址',
+		autoSize: 'Auto size',
+		backgroundColor: '背景颜色',
+		basic: '基本',
+		bold: '粗体',
+		bulletedList: '无序列表',
+		caption: '标题',
+		center: '居中',
+		close: '取消',
+		codeView: '代码视图',
+		default: '默认',
+		deleteColumn: '删除列',
+		deleteRow: '删除行',
+		dir_ltr: '左到右',
+		dir_rtl: '右到左',
+		edit: '编辑',
+		fixedColumnWidth: '固定列宽',
+		font: '字体',
+		fontColor: '字体颜色',
+		fontSize: '字号',
+		formats: '格式',
+		fullScreen: '全屏',
+		height: '高度',
+		horizontalLine: '水平线',
+		horizontalSplit: '水平分割',
+		hr_dashed: '虚线',
+		hr_dotted: '点线',
+		hr_solid: '实线',
+		image: '图片',
+		imageGallery: '图片库',
+		image_modal_altText: '替换文字',
+		image_modal_file: '上传图片',
+		image_modal_title: '插入图片',
+		image_modal_url: '图片网址',
+		indent: '增加缩进',
+		insertColumnAfter: '在右侧插入',
+		insertColumnBefore: '在左侧插入',
+		insertRowAbove: '在上方插入',
+		insertRowBelow: '在下方插入',
+		italic: '斜体',
+		layout: 'Layout',
+		left: '左',
+		lineHeight: '行高',
+		link: '超链接',
+		link_modal_bookmark: '书签',
+		link_modal_downloadLinkCheck: '下载链接',
+		link_modal_newWindowCheck: '在新标签页中打开',
+		link_modal_text: '要显示的文字',
+		link_modal_title: '插入超链接',
+		link_modal_url: '网址',
+		list: '列表',
+		math: '数学',
+		math_modal_fontSizeLabel: '字号',
+		math_modal_inputLabel: '数学符号',
+		math_modal_previewLabel: '预览',
+		math_modal_title: '数学',
+		maxSize: '最大尺寸',
+		mention: '提到',
+		menu_bordered: '边界线',
+		menu_code: '代码',
+		menu_neon: '霓虹灯',
+		menu_shadow: '阴影',
+		menu_spaced: '间隔开',
+		menu_translucent: '半透明',
+		mergeCells: '合并单元格',
+		minSize: '最小尺寸',
+		mirrorHorizontal: '翻转左右',
+		mirrorVertical: '翻转上下',
+		numberedList: '有序列表',
+		outdent: '减少缩进',
+		paragraphStyle: '段落样式',
+		preview: '预览',
+		print: '打印',
+		proportion: '比例',
+		ratio: '比',
+		redo: '恢复',
+		remove: '删除',
+		removeFormat: '清除格式',
+		resize100: '放大 100%',
+		resize25: '放大 25%',
+		resize50: '放大 50%',
+		resize75: '放大 75%',
+		resize: 'Resize',
+		revert: '恢复',
+		right: '右',
+		rotateLeft: '向左旋转',
+		rotateRight: '向右旋转',
+		save: '保存',
+		search: '搜索',
+		showBlocks: '显示块区域',
+		size: '尺寸',
+		splitCells: '分割单元格',
+		strike: '删除线',
+		submitButton: '确定',
+		subscript: '下标',
+		superscript: '上标',
+		table: '表格',
+		tableHeader: '表格标题',
+		tags: '标签',
+		tag_blockquote: '引用',
+		tag_div: '正文 (DIV)',
+		tag_h: '标题',
+		tag_p: '段落',
+		tag_pre: '代码',
+		template: '模板',
+		textStyle: '文字样式',
+		title: 'Title',
+		underline: '下划线',
+		undo: '撤消',
+		unlink: '去除链接',
+		verticalSplit: '垂直分割',
+		video: '视频',
+		video_modal_file: '上传图片',
+		video_modal_title: '插入视频',
+		video_modal_url: '嵌入网址, Youtube,Vimeo',
+		width: '宽度'
+	};
+
+	if (typeof noGlobal === typeof undefined) {
+		if (!window.SUNEDITOR_LANG) {
+			Object.defineProperty(window, 'SUNEDITOR_LANG', {
+				enumerable: true,
+				writable: false,
+				configurable: false,
+				value: {}
+			});
+		}
+
+		Object.defineProperty(window.SUNEDITOR_LANG, 'zh_cn', {
+			enumerable: true,
+			writable: true,
+			configurable: true,
+			value: lang
+		});
+	}
+
+	return lang;
+});

package/src/modules/ApiManager.js

@@ -0,0 +1,168 @@
+import { env } from '../helper';
+
+/**
+ *
+ * @param {*} inst
+ * @param {Object|null=} params
+ * @param {string|null=} params.method - HTTP method (GET, POST, PUT, DELETE...)
+ * @param {string|null=} params.url - API's URL
+ * @param {Object|null=} params.headers - HTTP headers
+ * @param {Object|null=} params.data - API data
+ * @param {Function|null=} params.callBack - API success callback
+ * @param {Function|null=} params.errorCallBack - API fail callback
+ * @param {string|null=} params.responseType - XMLHttpRequest.responseType
+ */
+const ApiManager = function (inst, params) {
+	this.editor = inst.editor;
+	this.kind = inst.constructor.key || inst.constructor.name;
+
+	// members
+	this._xhr = env.getXMLHttpRequest();
+	// members - option
+	this.method = params?.method;
+	this.url = params?.url;
+	this.headers = params?.headers;
+	this.data = params?.data;
+	this.callBack = params?.callBack;
+	this.errorCallBack = params?.errorCallBack;
+	this.responseType = params?.responseType;
+};
+
+ApiManager.prototype = {
+	/**
+	 * @description Call API
+	 * @param {Object|null=} params
+	 * @param {string|null=} params.method - HTTP method (GET, POST, PUT, DELETE...)
+	 * @param {string|null=} params.url - API's URL
+	 * @param {Object|null=} params.headers - HTTP headers
+	 * @param {Object|null=} params.data - API data
+	 * @param {Function|null=} params.callBack - API success callback
+	 * @param {Function|null=} params.errorCallBack - API fail callback
+	 * @param {string|null=} params.responseType - XMLHttpRequest.responseType
+	 */
+	call({ method, url, headers, data, callBack, errorCallBack, responseType }) {
+		this.cancel();
+
+		method = method || this.method;
+		url = this._normalizeUrl(url || this.url);
+		headers = headers || this.headers;
+		data = data || this.data;
+		callBack = callBack || this.callBack;
+		errorCallBack = errorCallBack || this.errorCallBack;
+		responseType = responseType || this.responseType;
+
+		const xhr = this._xhr;
+		if (responseType) xhr.responseType = responseType;
+		xhr.onreadystatechange = CallBackApi.bind(this, xhr, callBack, errorCallBack);
+		xhr.open(method, url, true);
+		if (headers !== null && typeof headers === 'object' && Object.keys(headers).length > 0) {
+			for (const key in headers) {
+				xhr.setRequestHeader(key, headers[key]);
+			}
+		}
+
+		xhr.send(data);
+	},
+
+	/**
+	 * @description Call Async API
+	 * @param {Object|null=} params
+	 * @param {string|null=} params.method - HTTP method (GET, POST, PUT, DELETE...)
+	 * @param {string|null=} params.url - API's URL
+	 * @param {Object|null=} params.headers - HTTP headers
+	 * @param {Object|null=} params.data - API data
+	 * @param {string|null=} params.responseType - XMLHttpRequest.responseType
+	 */
+	asyncCall({ method, url, headers, data, responseType }) {
+		this.cancel();
+
+		method = method || this.method;
+		url = this._normalizeUrl(url || this.url);
+		headers = headers || this.headers;
+		data = data || this.data;
+		responseType = responseType || this.responseType;
+
+		const xhr = this._xhr;
+		if (responseType) xhr.responseType = responseType;
+		return new Promise((resolve, reject) => {
+			xhr.open(method, url, true);
+			if (headers !== null && typeof headers === 'object' && Object.keys(headers).length > 0) {
+				for (const key in headers) {
+					xhr.setRequestHeader(key, headers[key]);
+				}
+			}
+			xhr.onload = () => {
+				if (xhr.status === 200) {
+					try {
+						resolve(xhr);
+					} finally {
+						this.editor.hideLoading();
+					}
+				} else {
+					try {
+						const res = !xhr.responseText ? xhr : JSON.parse(xhr.responseText);
+						reject(res, xhr);
+					} finally {
+						this.editor.hideLoading();
+					}
+				}
+			};
+
+			xhr.onerror = () => {
+				reject(new Error('Network error'));
+			};
+
+			xhr.send(data);
+		});
+	},
+
+	/**
+	 * @description Cancel API (xhr.abort())
+	 */
+	cancel() {
+		if (this._xhr) this._xhr.abort();
+	},
+
+	/**
+	 * @description Remove unnecessary slashes in API URL.
+	 * @param {string} url url
+	 * @returns
+	 */
+	_normalizeUrl(url) {
+		return url.replace(/([^:])\/+/g, '$1/').replace(/\/(\?|#|$)/, '$1');
+	},
+
+	constructor: ApiManager
+};
+
+async function CallBackApi(xmlHttp, callBack, errorCallBack) {
+	if (xmlHttp.readyState === 4) {
+		if (xmlHttp.status === 200) {
+			try {
+				await callBack(xmlHttp);
+			} catch (error) {
+				throw Error(`[SUNEDITOR.ApiManager[${this.kind}].upload.callBack.fail] ${error.message}`);
+			} finally {
+				this.editor.hideLoading();
+			}
+		} else {
+			// exception
+			console.error(`[SUNEDITOR.ApiManager[${this.kind}].upload.serverException]`, xmlHttp);
+			try {
+				const res = !xmlHttp.responseText ? xmlHttp : JSON.parse(xmlHttp.responseText);
+				let message = '';
+				if (typeof errorCallBack === 'function') {
+					message = await errorCallBack(res, xmlHttp);
+				}
+				const err = `[SUNEDITOR.ApiManager[${this.kind}].upload.serverException] status: ${xmlHttp.status}, response: ${message || res.errorMessage || xmlHttp.responseText}`;
+				this.editor.notice.open(err);
+			} catch (error) {
+				throw Error(`[SUNEDITOR.ApiManager[${this.kind}].upload.errorCallBack.fail] ${error.message}`);
+			} finally {
+				this.editor.hideLoading();
+			}
+		}
+	}
+}
+
+export default ApiManager;

package/src/modules/ColorPicker.js

@@ -0,0 +1,302 @@
+import { domUtils, converter } from '../helper';
+import CoreInjector from '../editorInjector/_core';
+import { HueSlider } from '../modules';
+
+const DEFAULT_COLOR_LIST = [
+	'#ff0000',
+	'#ff5e00',
+	'#ffe400',
+	'#abf200',
+	'#00d8ff',
+	'#0055ff',
+	'#6600ff',
+	'#ff00dd',
+	'#000000',
+	'#ffd8d8',
+	'#fae0d4',
+	'#faf4c0',
+	'#e4f7ba',
+	'#d4f4fa',
+	'#d9e5ff',
+	'#e8d9ff',
+	'#ffd9fa',
+	'#f1f1f1',
+	'#ffa7a7',
+	'#ffc19e',
+	'#faed7d',
+	'#cef279',
+	'#b2ebf4',
+	'#b2ccff',
+	'#d1b2ff',
+	'#ffb2f5',
+	'#bdbdbd',
+	'#f15f5f',
+	'#f29661',
+	'#e5d85c',
+	'#bce55c',
+	'#5cd1e5',
+	'#6699ff',
+	'#a366ff',
+	'#f261df',
+	'#8c8c8c',
+	'#980000',
+	'#993800',
+	'#998a00',
+	'#6b9900',
+	'#008299',
+	'#003399',
+	'#3d0099',
+	'#990085',
+	'#353535',
+	'#670000',
+	'#662500',
+	'#665c00',
+	'#476600',
+	'#005766',
+	'#002266',
+	'#290066',
+	'#660058',
+	'#222222'
+];
+
+const DEFAULLT_COLOR_SPLITNUM = 9;
+
+/**
+ * @description Create a color picker element and register for related events. (this.target)
+ * When calling the color selection, "submit", and "remove" buttons, the "action" method of the instance is called with the "color" value as an argument.
+ * @param {Object} inst The "this" object of the calling function.
+ * @param {string} styles style property ("color", "backgroundColor"..)
+ * @param {Array.<string>} colorList color list
+ * @param {string} _defaultColor default color
+ */
+const ColorPicker = function (inst, styles, params) {
+	const editor = inst.editor;
+	CoreInjector.call(this, editor);
+
+	// members
+	this.kind = inst.constructor.key || inst.constructor.name;
+	this.inst = inst;
+	this.target = CreateHTML(editor, params);
+	this.targetButton = null;
+	this.inputElement = this.target.querySelector('.se-color-input');
+	this.styleProperties = styles;
+	this.splitNum = params.splitNum || 0;
+	this.defaultColor = params.defaultColor;
+	this.hueSliderOptions = params.hueSliderOptions;
+	this.parentDisplay = '';
+	this.currentColor = '';
+	this.parentForm = null;
+	this.colorList = this.target.querySelectorAll('li button') || [];
+	this.hueSlider = null;
+
+	// modules - hex, hue slider
+	if (!params.disableHEXInput) {
+		this.hueSlider = new HueSlider(this, params.hueSliderOptions, 'se-dropdown');
+		this.parentFormDisplay = [];
+		this.parentForm = params.hueSliderOptions?.controllerOptions?.parents?.length > 0 && !params.hueSliderOptions?.controllerOptions?.isInsideForm ? params.hueSliderOptions.controllerOptions.parents : null;
+		// hue open
+		this.eventManager.addEvent(this.target.querySelector('.se-btn-info'), 'click', OnColorPalette.bind(this));
+		this.eventManager.addEvent(this.inputElement, 'input', OnChangeInput.bind(this));
+		this.eventManager.addEvent(this.target.querySelector('form'), 'submit', Submit.bind(this));
+	}
+
+	// remove style
+	if (!params.disableRemove) {
+		this.eventManager.addEvent(this.target.querySelector('.__se_remove'), 'click', Remove.bind(this));
+	}
+
+	this.eventManager.addEvent(this.target, 'click', OnClickColor.bind(this));
+};
+
+ColorPicker.prototype = {
+	hueSliderAction(color) {
+		this._setInputText(color.hex);
+	},
+
+	hueSliderCancelAction() {
+		if (this.parentForm?.length > 0) {
+			this.parentFormDisplay.forEach((e) => (e[0].style.display = e[1]));
+		}
+	},
+
+	hueSliderClose() {
+		this.hueSlider.off();
+	},
+
+	/**
+	 * @description Displays or resets the currently selected color at color list.
+	 * @param {Node|String} nodeOrColor Current Selected node
+	 * @param {string|null} target target
+	 */
+	init(nodeOrColor, target) {
+		this.targetButton = target;
+
+		const computedColor = this.editor.frameContext.get('wwComputedStyle')[this.styleProperties];
+		const defaultColor = this.defaultColor || converter.isHexColor(computedColor) ? computedColor : converter.rgb2hex(computedColor);
+
+		let fillColor = (typeof nodeOrColor === 'string' ? nodeOrColor : this._getColorInNode(nodeOrColor)) || defaultColor;
+		fillColor = converter.isHexColor(fillColor) ? fillColor : converter.rgb2hex(fillColor) || fillColor || '';
+
+		const colorList = this.colorList;
+		for (let i = 0, len = colorList.length; i < len; i++) {
+			if (fillColor.toLowerCase() === colorList[i].getAttribute('data-value').toLowerCase()) {
+				domUtils.addClass(colorList[i], 'active');
+			} else {
+				domUtils.removeClass(colorList[i], 'active');
+			}
+		}
+
+		this._setInputText(this._colorName2hex(fillColor));
+	},
+
+	/**
+	 * @description Store color values
+	 * @param {string} hexColorStr Hax color value
+	 */
+	setHexColor(hexColorStr) {
+		this.currentColor = hexColorStr;
+		this.inputElement.style.borderColor = hexColorStr;
+	},
+
+	/**
+	 * @description Set color at input element
+	 * @param {string} hexColorStr Hax color value
+	 * @private
+	 */
+	_setInputText(hexColorStr) {
+		hexColorStr = /^#/.test(hexColorStr) ? hexColorStr : '#' + hexColorStr;
+		this.inputElement.value = hexColorStr;
+		this.setHexColor.call(this, hexColorStr);
+	},
+
+	/**
+	 * @description Gets color value at color property of node
+	 * @param {Node} node Selected node
+	 * @returns {string}
+	 * @private
+	 */
+	_getColorInNode(node) {
+		let findColor = '';
+		const sp = this.styleProperties;
+
+		while (node && !domUtils.isWysiwygFrame(node) && findColor.length === 0) {
+			if (node.nodeType === 1 && node.style[sp]) findColor = node.style[sp];
+			node = node.parentNode;
+		}
+
+		return findColor;
+	},
+
+	/**
+	 * @description Converts color values of other formats to hex color values and returns.
+	 * @param {string} colorName Color value
+	 * @returns {string}
+	 */
+	_colorName2hex(colorName) {
+		if (/^#/.test(colorName)) return colorName;
+		const temp = domUtils.createElement('div', { style: 'display: none; color: ' + colorName });
+		const colors = this._w
+			.getComputedStyle(this._d.body.appendChild(temp))
+			.color.match(/\d+/g)
+			.map(function (a) {
+				return parseInt(a, 10);
+			});
+		domUtils.removeItem(temp);
+		return colors.length >= 3 ? '#' + ((1 << 24) + (colors[0] << 16) + (colors[1] << 8) + colors[2]).toString(16).substr(1) : false;
+	},
+
+	constructor: ColorPicker
+};
+
+function OnColorPalette() {
+	if (this.parentForm?.length > 0) {
+		this.parentForm.forEach((e) => {
+			this.parentFormDisplay.push([e, e.style.display]);
+			e.style.display = 'none';
+		});
+	}
+	this.hueSlider.open(this.targetButton);
+}
+
+function Submit(e) {
+	e.preventDefault();
+
+	if (typeof this.inst.colorPickerAction !== 'function') return;
+	this.inst.colorPickerAction(this.currentColor);
+}
+
+function OnClickColor(e) {
+	const color = e.target.getAttribute('data-value');
+	if (!color) return;
+
+	if (typeof this.inst.colorPickerAction !== 'function') return;
+	this.inst.colorPickerAction(color);
+}
+
+function Remove() {
+	if (typeof this.inst.colorPickerAction !== 'function') return;
+	this.inst.colorPickerAction(null);
+}
+
+function OnChangeInput(e) {
+	this.setHexColor(e.target.value);
+}
+
+function CreateHTML({ lang, icons }, { colorList, disableHEXInput, disableRemove, splitNum }) {
+	colorList = colorList || DEFAULT_COLOR_LIST;
+	splitNum = colorList === DEFAULT_COLOR_LIST ? DEFAULLT_COLOR_SPLITNUM : splitNum;
+
+	let list = '';
+	for (let i = 0, len = colorList.length, colorArr = [], color; i < len; i++) {
+		color = colorList[i];
+		if (!color) continue;
+
+		if (typeof color === 'string' || color.value) {
+			colorArr.push(color);
+			if (i < len - 1) continue;
+		}
+		if (colorArr.length > 0) {
+			list += `<div class="se-selector-color">${_makeColor(colorArr, splitNum)}</div>`;
+			colorArr = [];
+		}
+		if (typeof color === 'object') {
+			list += `<div class="se-selector-color">${_makeColor(color, splitNum)}</div>`;
+		}
+	}
+	list += /*html*/ `
+		<form class="se-form-group se-form-w0">
+			${disableHEXInput ? '' : `<button type="button" class="se-btn se-btn-info" title="${lang.colorPicker}" aria-label="${lang.colorPicker}">${icons.color_palette}</button>`}
+			<input type="text" class="se-color-input" ${disableHEXInput ? 'readonly' : ''} placeholder="${lang.color}" />
+			${disableHEXInput ? '' : `<button type="submit" class="se-btn se-btn-success" title="${lang.submitButton}" aria-label="${lang.submitButton}">${icons.checked}</button>`}
+			${disableRemove ? '' : `<button type="button" class="se-btn __se_remove" title="${lang.remove}" aria-label="${lang.remove}">${icons.remove_color}</button>`}
+		</form>`;
+
+	return domUtils.createElement('DIV', { class: 'se-list-inner' }, list);
+}
+
+function _makeColor(colorList, splitNum) {
+	const ulHTML = `<ul class="se-color-pallet${splitNum ? ' se-list-horizontal' : ''}">`;
+
+	let list = ulHTML;
+	for (let i = 0, len = colorList.length, color, v, n; i < len; i++) {
+		color = colorList[i];
+		if (typeof color === 'string') {
+			v = color;
+			n = color;
+		} else if (typeof color === 'object') {
+			v = color.value;
+			n = color.name || v;
+		}
+
+		if (i > 0 && i % splitNum === 0) {
+			list += `</ul>${ulHTML}`;
+		}
+
+		list += /*html*/ `<li><button type="button" data-value="${v}" title="${n}" aria-label="${n}" style="background-color:${v};"></button></li>`;
+	}
+	list += '</ul>';
+
+	return list;
+}
+
+export default ColorPicker;