suneditor 2.46.2 → 3.0.0-alpha.2

package/src/plugins/command/exportPdf.js

@@ -0,0 +1,168 @@
+import EditorInjector from '../../editorInjector';
+import { domUtils, env } from '../../helper';
+import { ApiManager } from '../../modules';
+
+const { _d } = env;
+
+const ExportPdf = function (editor, pluginOptions) {
+	EditorInjector.call(this, editor);
+	// plugin basic properties
+	this.title = this.lang.exportPdf;
+	this.icon = 'pdf';
+
+	// plugin options
+	this.apiUrl = pluginOptions.apiUrl;
+	this.fileName = pluginOptions.fileName || 'suneditor-pdf';
+	this.jsPDFOptions = pluginOptions.jsPDFOptions || {};
+	this.html2canvasOptions = pluginOptions.html2canvasOptions || {};
+
+	// option check
+	if (!this.apiUrl && !this.options.get('externalLibs').html2canvas && !this.options.get('externalLibs').jsPDF) {
+		console.warn('[SUNEDITOR.plugins.exportPdf.error] Requires "apiUrl" or externalLibs.html2canvas and externalLibs.jsPDF options.');
+	} else if (this.apiUrl) {
+		this.apiManager = new ApiManager(this, {
+			method: 'POST',
+			url: this.apiUrl,
+			headers: {
+				'Content-Type': 'application/json'
+			},
+			responseType: 'blob'
+		});
+	}
+};
+
+ExportPdf.key = 'exportPdf';
+ExportPdf.type = 'command';
+ExportPdf.className = 'se-component-enabled';
+ExportPdf.prototype = {
+	/**
+	 * @override core
+	 * @param {Element} target Target command button
+	 */
+	async action() {
+		this.editor.showLoading();
+		let ww = null;
+
+		try {
+			const topArea = this.editor.frameContext.get('topArea');
+			const editableDiv = domUtils.createElement('div', { class: this.editor.frameContext.get('wysiwygFrame').className }, this.html.get());
+			ww = domUtils.createElement('div', { style: `position: absolute; left: -10000px; width: ${topArea.clientWidth}px; height: auto;` }, editableDiv);
+
+			if (this.apiUrl) {
+				const inlineWW = domUtils.applyInlineStylesAll(editableDiv, true, this.options.get('allUsedStyles'));
+				ww.innerHTML = inlineWW.outerHTML;
+			}
+
+			_d.body.appendChild(ww);
+
+			// before event
+			if ((await this.triggerEvent('onExportPdfBefore', { editableDiv })) === false) return;
+
+			// at server
+			if (this.apiUrl) {
+				await this._createByServer(ww);
+				return;
+			}
+
+			// at client
+			const checkAndProcessResources = async () => {
+				const resources = ww.querySelectorAll('img, audio, video');
+				const resourcesLoaded = Array.from(resources).map((resource) => {
+					switch (resource.tagName.toLowerCase()) {
+						case 'img':
+							return new Promise((resolve) => {
+								if (resource.complete && resource.naturalHeight !== 0) {
+									resolve();
+								} else {
+									resource.onload = resolve;
+									resource.onerror = () => resolve();
+								}
+							});
+						case 'audio':
+						case 'video':
+							return new Promise((resolve) => {
+								if (resource.readyState >= 4) {
+									// HAVE_ENOUGH_DATA
+									resolve();
+								} else {
+									resource.onloadeddata = resolve;
+									resource.onerror = () => resolve();
+								}
+							});
+						default:
+							return Promise.resolve();
+					}
+				});
+
+				await Promise.all(resourcesLoaded);
+				await this._createByHtml2canvas(ww);
+			};
+
+			// run observer
+			const observer = new MutationObserver(checkAndProcessResources);
+			observer.observe(ww, { childList: true, subtree: true, attributes: true });
+
+			await checkAndProcessResources();
+		} catch (error) {
+			console.error(`[SUNEDITOR.plugins.exportPdf.error] ${error.message}`);
+		} finally {
+			// domUtils.removeItem(ww);
+			this.editor.hideLoading();
+		}
+	},
+
+	async _createByHtml2canvas(ww) {
+		const canvas = await this.options.get('externalLibs').html2canvas(ww, {
+			useCORS: true,
+			logging: true,
+			...this.html2canvasOptions
+		});
+		const imageData = canvas.toDataURL('image/png');
+
+		const pdf = new (this.options.get('externalLibs').jsPDF)({
+			orientation: 'portrait',
+			unit: 'px',
+			format: [canvas.width, canvas.height],
+			...this.jsPDFOptions
+		});
+
+		pdf.addImage(imageData, 'PNG', 0, 0, canvas.width, canvas.height);
+
+		// save PDF file
+		pdf.save(`${this.fileName}.pdf`);
+	},
+
+	async _createByServer(ww) {
+		const data = {
+			fileName: this.fileName,
+			htmlContent: ww.innerHTML
+		};
+
+		const xhr = await this.apiManager.asyncCall({ data: JSON.stringify(data) });
+
+		if (xhr.status !== 200) {
+			const res = !xhr.responseText ? xhr : JSON.parse(xhr.responseText);
+			throw Error(`[SUNEDITOR.plugins.exportPdf.error] ${res.errorMessage}`);
+		}
+
+		const blob = new Blob([xhr.response], { type: 'application/pdf' });
+		const contentDisposition = xhr.getResponseHeader('Content-Disposition');
+		const downloadUrl = URL.createObjectURL(blob);
+		const filename = (contentDisposition.match(/filename="([^"]+)/) || [])[1] || this.fileName + '.pdf';
+		const a = domUtils.createElement('A', { href: downloadUrl, download: filename, style: 'display: none;' }, null);
+
+		try {
+			_d.body.appendChild(a);
+			a.click();
+		} finally {
+			setTimeout(() => {
+				domUtils.removeItem(a);
+				URL.revokeObjectURL(downloadUrl);
+			}, 100);
+		}
+	},
+
+	constructor: ExportPdf
+};
+
+export default ExportPdf;

package/src/plugins/command/fileUpload.js

@@ -0,0 +1,389 @@
+import EditorInjector from '../../editorInjector';
+import { CreateTooltipInner } from '../../core/section/constructor';
+import { domUtils, env, numbers } from '../../helper';
+import { FileManager, Figure, Controller } from '../../modules';
+
+const { NO_EVENT } = env;
+
+const FileUpload = function (editor, pluginOptions) {
+	EditorInjector.call(this, editor);
+	// plugin basic properties
+	this.title = this.lang.fileUpload;
+	this.icon = 'file_upload';
+
+	if (!pluginOptions.uploadUrl) console.warn('[SUNEDITOR.fileUpload.warn] "fileUpload" plugin must be have "uploadUrl" option.');
+
+	// members
+	this.uploadUrl = pluginOptions.uploadUrl;
+	this.uploadHeaders = pluginOptions.uploadHeaders;
+	this.uploadSizeLimit = /\d+/.test(pluginOptions.uploadSizeLimit) ? numbers.get(pluginOptions.uploadSizeLimit, 0) : null;
+	this.uploadSingleSizeLimit = /\d+/.test(pluginOptions.uploadSingleSizeLimit) ? numbers.get(pluginOptions.uploadSingleSizeLimit, 0) : null;
+	this.allowMultiple = !!pluginOptions.allowMultiple;
+	this.acceptedFormats = typeof pluginOptions.acceptedFormats !== 'string' ? '*' : pluginOptions.acceptedFormats.trim() || '*';
+	this._acceptedCheck = this.acceptedFormats.split(', ');
+	this.as = pluginOptions.as || 'box';
+	this.input = domUtils.createElement('input', { type: 'file', accept: this.acceptedFormats });
+	if (this.allowMultiple) {
+		this.input.setAttribute('multiple', 'multiple');
+	}
+	this._element = null;
+
+	// figure
+	const customItems = {
+		'custom-download': {
+			command: 'download',
+			title: this.lang.download,
+			icon: 'download',
+			action: (target) => {
+				const url = target.getAttribute('href');
+				if (url) domUtils.createElement('A', { href: url }, null).click();
+			}
+		},
+		'custom-as': {
+			command: 'as',
+			value: 'link', // 'block' or 'link'
+			title: this.lang.asLink,
+			icon: 'reduction',
+			action: (target, value) => {
+				this.convertFormat(target, value);
+			}
+		}
+	};
+	let figureControls = pluginOptions.controls || [['custom-as', 'edit', 'align', 'remove', 'custom-download']];
+	figureControls = figureControls.map((subArray) => subArray.map((item) => (item.startsWith('custom-') ? customItems[item] : item)));
+	this.figure = new Figure(this, figureControls, {});
+
+	// file manager
+	this.fileManager = new FileManager(this, {
+		query: 'a[download][data-se-file-download]',
+		loadHandler: this.events.onFileLoad,
+		eventHandler: this.events.onFileAction
+	});
+
+	// controller
+	if (/\bedit\b/.test(JSON.stringify(figureControls))) {
+		const controllerEl = CreateHTML_controller(this);
+		this.controller = new Controller(this, controllerEl, { position: 'bottom', disabled: true }, FileUpload.key);
+		this.editInput = controllerEl.querySelector('input');
+	}
+
+	// init
+	this.eventManager.addEvent(this.input, 'change', OnChangeFile.bind(this));
+};
+
+FileUpload.key = 'fileUpload';
+FileUpload.type = 'command';
+FileUpload.className = '';
+FileUpload.options = { eventIndex: 10000 };
+FileUpload.component = function (node) {
+	return domUtils.isAnchor(node) && node.hasAttribute('download') && node.hasAttribute('data-se-file-download') ? node : null;
+};
+FileUpload.prototype = {
+	/**
+	 * @override core
+	 * @param {Element} target Target command button
+	 */
+	action() {
+		this.input.click();
+	},
+
+	/**
+	 * @override fileManager
+	 * @param {Element} target Target element
+	 */
+	select(target) {
+		this._element = target;
+		const asBtn = this.figure.controller.form.querySelector('[data-command="__c__as"]');
+		if (domUtils.isFigure(target.parentElement)) {
+			asBtn.innerHTML = this.icons.reduction + CreateTooltipInner(this.lang.asLink);
+			asBtn.setAttribute('data-value', 'link');
+			this.figure.open(target, { nonResizing: true, nonSizeInfo: true, nonBorder: true, figureTarget: true, __fileManagerInfo: false });
+		} else {
+			asBtn.innerHTML = this.icons.expansion + CreateTooltipInner(this.lang.asBlock);
+			asBtn.setAttribute('data-value', 'box');
+			this.figure.controllerOpen(target, { isWWTarget: true });
+			return true;
+		}
+	},
+
+	/**
+	 * @description On paste or drop
+	 * @param {*} params { frameContext, event, file }
+	 */
+	onPastAndDrop({ file }) {
+		const fileType = file.type;
+		if (
+			!this._acceptedCheck.some((format) => {
+				if (format.startsWith('*')) return true;
+				if (format.startsWith(fileType)) return true;
+			})
+		) {
+			return;
+		}
+
+		this._submitFile([file]);
+		this.editor.focus();
+
+		return false;
+	},
+
+	/**
+	 * @override Figure
+	 * @param {Element} target Target element
+	 */
+	edit(target) {
+		this.editInput.value = target.textContent;
+		this.figure.controllerHide();
+		this.controller.open(target, null, { isWWTarget: !domUtils.isFigure(target.parentElement), initMethod: null, addOffset: null });
+		this.editInput.focus();
+	},
+
+	/**
+	 * @override controller
+	 * @param {Element} target Target button element
+	 * @returns
+	 */
+	controllerAction(target) {
+		const command = target.getAttribute('data-command');
+		if (!command) return;
+
+		if (command === 'edit') {
+			if (this.editInput.value.trim().length === 0) return;
+			this._element.textContent = this.editInput.value;
+		}
+
+		this.controller.close();
+		this.component.select(this._element, FileUpload.key, false);
+	},
+
+	async _submitFile(fileList) {
+		if (fileList.length === 0) return;
+
+		let fileSize = 0;
+		const files = [];
+		const slngleSizeLimit = this.uploadSingleSizeLimit;
+		for (let i = 0, len = fileList.length, f, s; i < len; i++) {
+			f = fileList[i];
+			s = f.size;
+			if (slngleSizeLimit && slngleSizeLimit > s) {
+				const err = '[SUNEDITOR.fileUpload.fail] Size of uploadable single file: ' + slngleSizeLimit / 1000 + 'KB';
+				const message = await this.triggerEvent('onFileUploadError', {
+					error: err,
+					limitSize: slngleSizeLimit,
+					uploadSize: s,
+					file: f
+				});
+
+				this.notice.open(message === NO_EVENT ? err : message || err);
+
+				return false;
+			}
+
+			files.push(f);
+			fileSize += s;
+		}
+
+		const limitSize = this.uploadSizeLimit;
+		const currentSize = this.fileManager.getSize();
+		if (limitSize > 0 && fileSize + currentSize > limitSize) {
+			const err = '[SUNEDITOR.fileUpload.fail] Size of uploadable total files: ' + limitSize / 1000 + 'KB';
+			const message = await this.triggerEvent('onFileUploadError', {
+				error: err,
+				limitSize,
+				currentSize,
+				uploadSize: fileSize
+			});
+
+			this.notice.open(message === NO_EVENT ? err : message || err);
+
+			return false;
+		}
+
+		const fileInfo = {
+			url: this.uploadUrl,
+			uploadHeaders: this.uploadHeaders,
+			files
+		};
+
+		const handler = async function (infos, newInfos) {
+			infos = newInfos || infos;
+			const xmlHttp = await this.fileManager.asyncUpload(infos.url, infos.uploadHeaders, infos.files);
+			this._uploadCallBack(xmlHttp);
+		}.bind(this, fileInfo);
+
+		const result = await this.triggerEvent('onFileUploadBefore', {
+			...fileInfo,
+			handler
+		});
+
+		if (result === undefined) return true;
+		if (result === false) return false;
+		if (result !== null && typeof result === 'object') handler(result);
+
+		if (result === true || result === NO_EVENT) handler(null);
+	},
+
+	/**
+	 * @override fileManager, Figure
+	 * @param {Element} target Target element
+	 */
+	async destroy(target) {
+		if (!target) return;
+
+		const figure = Figure.GetContainer(target);
+		target = domUtils.getParentElement(target, '.se-component') || target;
+
+		const message = await this.triggerEvent('onFileDeleteBefore', { target: figure.target, container: figure, url: figure.target.getAttribute('href') });
+		if (message === false) return;
+
+		const isInlineComp = this.component.isInline(target);
+		const focusEl = isInlineComp ? target.previousSibling || target.nextSibling : target.previousElementSibling || target.nextElementSibling;
+		domUtils.removeItem(target);
+		this.editor._offCurrentController();
+
+		this.editor.focusEdge(focusEl);
+		this.history.push(false);
+	},
+
+	/**
+	 * @description Convert format to link or block
+	 * @param {Element} target Target element
+	 * @param {string} value 'link' or 'block'
+	 */
+	convertFormat(target, value) {
+		if (value === 'link') {
+			this.figure.close();
+			const { container } = Figure.GetContainer(target);
+			const next = container.nextElementSibling;
+			const parent = container.parentElement;
+
+			target.removeAttribute('data-se-non-focus');
+			target.setAttribute('contenteditable', false);
+			domUtils.addClass(target, 'se-component|se-inline-component');
+
+			const line = domUtils.createElement(this.options.get('defaultLine'), null, target);
+			parent.insertBefore(line, next);
+			domUtils.removeItem(container);
+		} else {
+			// block
+			this.selection.setRange(target, 0, target, 1);
+			const r = this.html.remove();
+			const s = this.nodeTransform.split(r.container, r.offset, 0);
+
+			if (s?.previousElementSibling && domUtils.isZeroWith(s.previousElementSibling)) {
+				domUtils.removeItem(s.previousElementSibling);
+			}
+
+			target.setAttribute('data-se-non-focus', 'true');
+			target.removeAttribute('contenteditable');
+			domUtils.removeClass(target, 'se-component|se-component-selected|se-inline-component');
+
+			const figure = Figure.CreateContainer(target, 'se-file-figure se-flex-component');
+			(s || r.container).parentElement.insertBefore(figure.container, s);
+		}
+
+		this.history.push(false);
+		this.component.select(target, FileUpload.key, false);
+	},
+
+	_register(response) {
+		response.result.forEach((file, i, a) => {
+			this._create(
+				file.url,
+				{
+					name: file.name,
+					size: file.size
+				},
+				i === a.length - 1
+			);
+		});
+	},
+
+	_create(url, file, isLast) {
+		const name = file.name || url;
+		const a = domUtils.createElement(
+			'A',
+			{
+				href: url,
+				title: name,
+				download: name,
+				'data-se-file-download': '',
+				contenteditable: 'false',
+				'data-se-non-focus': 'true',
+				'data-se-non-link': 'true'
+			},
+			name
+		);
+
+		this.fileManager.setFileData(a, file);
+
+		if (this.as === 'link') {
+			a.className = 'se-component se-inline-component';
+			this.component.insert(a, false, false);
+			return;
+		}
+
+		const figure = Figure.CreateContainer(a);
+		domUtils.addClass(figure.container, 'se-file-figure|se-flex-component');
+
+		if (!this.component.insert(figure.container, false, isLast ? !this.options.get('mediaAutoSelect') : true)) {
+			this.editor.focus();
+			return;
+		}
+
+		if (!isLast) return;
+
+		if (!this.options.get('mediaAutoSelect')) {
+			const line = this.format.addLine(figure.container, null);
+			if (line) this.selection.setRange(line, 0, line, 0);
+		} else {
+			this.component.select(a, FileUpload.key, false);
+		}
+	},
+
+	async _error(response) {
+		const message = await this.triggerEvent('onFileUploadError', { error: response });
+		if (message === false) return;
+		const err = message === NO_EVENT ? response.errorMessage : message || response.errorMessage;
+		this.notice.open(err);
+		console.error('[SUNEDITOR.plugin.fileUpload.error]', err);
+	},
+
+	_uploadCallBack(xmlHttp) {
+		const response = JSON.parse(xmlHttp.responseText);
+		if (response.errorMessage) {
+			this._error(response);
+		} else {
+			this._register(response);
+		}
+	},
+
+	constructor: FileUpload
+};
+
+async function OnChangeFile(e) {
+	await this._submitFile(e.target.files);
+}
+
+function CreateHTML_controller({ lang, icons }) {
+	const html = /*html*/ `
+		<div class="se-arrow se-arrow-up"></div>
+		<form>
+			<div class="se-btn-group se-form-group">
+				<input type="text" />
+				<button type="submit" data-command="edit" class="se-btn se-tooltip se-btn-success">
+					${icons.checked}
+					<span class="se-tooltip-inner"><span class="se-tooltip-text">${lang.save}</span></span>
+				</button>
+				<button type="button" data-command="cancel" class="se-btn se-tooltip se-btn-danger">
+					${icons.cancel}
+					<span class="se-tooltip-inner"><span class="se-tooltip-text">${lang.cancel}</span></span>
+				</button>
+			</div>
+		</form>
+		`;
+
+	return domUtils.createElement('DIV', { class: 'se-controller se-controller-resizing' }, html);
+}
+
+export default FileUpload;

package/src/plugins/command/list_bulleted.js

@@ -0,0 +1,112 @@
+import EditorInjector from '../../editorInjector';
+import { domUtils } from '../../helper';
+
+const DEFAULT_TYPE = 'disc';
+
+const List_bulleted = function (editor) {
+	// plugin bisic properties
+	EditorInjector.call(this, editor);
+	this.title = this.lang.bulletedList;
+	this.icon = 'list_bulleted';
+	this.afterButton = 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>`
+	);
+
+	// create HTML
+	const menu = CreateHTML();
+
+	// members
+	this.listItems = menu.querySelectorAll('li button ul');
+
+	// init
+	this.menu.initDropdownTarget({ key: List_bulleted.key, type: 'dropdown' }, menu);
+};
+
+List_bulleted.key = 'list_bulleted';
+List_bulleted.type = 'command';
+List_bulleted.className = 'se-icon-flip-rtl';
+List_bulleted.prototype = {
+	/**
+	 * @override core
+	 */
+	active(element, target) {
+		if (domUtils.isListCell(element) && /^UL$/i.test(element.parentElement.nodeName)) {
+			domUtils.addClass(target, 'active');
+			return true;
+		}
+
+		domUtils.removeClass(target, 'active');
+		return false;
+	},
+
+	/**
+	 * @override dropdown
+	 */
+	on() {
+		const list = this.listItems;
+		const el = this.format.getBlock(this.selection.getNode());
+		const type = el?.style ? el.style.listStyleType || DEFAULT_TYPE : '';
+
+		for (let i = 0, len = list.length, l; i < len; i++) {
+			l = list[i];
+			if (type === l.style.listStyleType) {
+				domUtils.addClass(l.parentElement, 'active');
+			} else {
+				domUtils.removeClass(l.parentElement, 'active');
+			}
+		}
+	},
+
+	/**
+	 * @override core
+	 * @param {Element|null} target Target command button
+	 */
+	action(target) {
+		const el = this.format.getBlock(this.selection.getNode());
+		const type = target?.querySelector('ul')?.style.listStyleType || '';
+
+		if (domUtils.isList(el) && type) {
+			el.style.listStyleType = type;
+		} else {
+			const range = this.format.applyList(`ul:${type}`, null, false);
+			if (range) this.selection.setRange(range.sc, range.so, range.ec, range.eo);
+		}
+
+		this.menu.dropdownOff();
+		this.editor.focus();
+		this.history.push(false);
+	},
+
+	constructor: List_bulleted
+};
+
+function CreateHTML() {
+	const html = /*html*/ `
+	<div class="se-list-inner">
+		<ul class="se-list-basic se-list-horizontal se-list-carrier">
+			${_CreateLI(['disc', 'circle', 'square'])}
+		</ul>
+	</div>`;
+
+	return domUtils.createElement('DIV', { class: 'se-dropdown se-list-layer' }, html);
+}
+
+function _CreateLI(types) {
+	return types
+		.map((v) => {
+			return /*html*/ `
+			<li>
+				<button type="button" class="se-btn se-btn-list se-icon-flip-rtl" data-command="${v}" title="${v}" aria-label="${v}">
+					<ul style="list-style-type: ${v};">
+						<li></li><li></li><li></li>
+					</ul>
+				</button>
+			</li>
+		`;
+		})
+		.join('');
+}
+
+export default List_bulleted;