suneditor 3.0.0-alpha.9 → 3.0.0-beta.2

package/src/modules/FileBrowser.js

@@ -1,271 +0,0 @@
-import CoreInjector from '../editorInjector/_core';
-import { domUtils } from '../helper';
-import ApiManager from './ApiManager';
-
-/**
- * @param {*} inst
- * @param {Object} params
- * @param {string} params.title - File browser window title. Required. Can be overridden in fileBrowser.
- * @param {string} params.url - File server url. Required. Can be overridden in fileBrowser.
- * @param {Object} params.headers - File server http header. Required. Can be overridden in fileBrowser.
- * @param {string} params.listClass - Class name of list div. Required. Can be overridden in fileBrowser.
- * @param {function} params.drawItemHandler - Function that defines the HTML of a file item. Required. Can be overridden in fileBrowser.
- * @param {function} params.selectorHandler - Function that actions when an item is clicked. Required. Can be overridden in fileBrowser.
- * @param {number} params.columnSize - Number of "div.se-file-item-column" to be created. Optional. Can be overridden in fileBrowser. Default: 4.
- */
-const FileBrowser = function (inst, params) {
-	CoreInjector.call(this, inst.editor);
-
-	// create HTML
-	const browserFrame = domUtils.createElement('DIV', { class: 'se-file-browser sun-editor-common' });
-	const content = domUtils.createElement('DIV', { class: 'se-file-browser-inner' }, CreateHTML(inst.editor));
-
-	// members
-	this.kind = inst.constructor.key || inst.constructor.name;
-	this.inst = inst;
-	this.area = browserFrame;
-	this.header = content.querySelector('.se-file-browser-header');
-	this.titleArea = content.querySelector('.se-file-browser-title');
-	this.tagArea = content.querySelector('.se-file-browser-tags');
-	this.body = content.querySelector('.se-file-browser-body');
-	this.list = content.querySelector('.se-file-browser-list');
-	this._loading = content.querySelector('.se-loading-box');
-
-	this.title = params.title;
-	this.listClass = params.listClass;
-	this.url = params.url;
-	this.urlHeader = params.headers;
-	this.drawItemHandler = params.drawItemHandler;
-	this.selectorHandler = params.selectorHandler;
-	this.columnSize = params.columnSize || 4;
-
-	this.items = [];
-	this.selectedTags = [];
-	this._closeSignal = false;
-	this._bindClose = null;
-	this.__globalEventHandler = (e) => {
-		if (!/27/.test(e.keyCode)) return;
-		this.close();
-	};
-	// api manager
-	this.apiManager = new ApiManager(this, { method: 'GET' });
-
-	// init
-	browserFrame.appendChild(domUtils.createElement('DIV', { class: 'se-file-browser-back' }));
-	browserFrame.appendChild(content);
-	this.carrierWrapper.appendChild(browserFrame);
-
-	this.eventManager.addEvent(this.tagArea, 'click', OnClickTag.bind(this));
-	this.eventManager.addEvent(this.list, 'click', OnClickFile.bind(this));
-	this.eventManager.addEvent(content, 'mousedown', OnMouseDown_browser.bind(this));
-	this.eventManager.addEvent(content, 'click', OnClick_browser.bind(this));
-};
-
-FileBrowser.prototype = {
-	/**
-	 * @description Open a file browser plugin
-	 * @param {Object|null} params {
-	 * 	selectorHandler: When the function comes as an argument value, it substitutes "context.selectorHandler".
-	 * }
-	 */
-	open(params) {
-		if (!params) params = {};
-		this.__addGlobalEvent();
-
-		const listClassName = params.listClass || this.listClass;
-		if (!domUtils.hasClass(this.list, listClassName)) {
-			this.list.className = 'se-file-browser-list ' + listClassName;
-		}
-		this.titleArea.textContent = params.title || this.title;
-		this.area.style.display = 'block';
-
-		this._drawFileList(params.url || this.url, params.urlHeader || this.urlHeader);
-	},
-
-	/**
-	 * @description Close a fileBrowser plugin
-	 * The plugin's "init" method is called.
-	 */
-	close() {
-		this.__removeGlobalEvent();
-		this.apiManager.cancel();
-
-		this.area.style.display = 'none';
-		this.selectedTags = [];
-		this.items = [];
-		this.list.innerHTML = this.tagArea.innerHTML = this.titleArea.textContent = '';
-
-		if (typeof this.inst.init === 'function') this.inst.init();
-	},
-
-	/**
-	 * @description Show file browser loading box
-	 */
-	showBrowserLoading() {
-		this._loading.style.display = 'block';
-	},
-
-	/**
-	 * @description Close file browser loading box
-	 */
-	closeBrowserLoading() {
-		this._loading.style.display = 'none';
-	},
-
-	_drawFileList(url, urlHeader) {
-		this.apiManager.call({ method: 'GET', url, headers: urlHeader, callBack: CallBackGet.bind(this), errorCallBack: CallBackError.bind(this) });
-		this.showBrowserLoading();
-	},
-
-	_drawListItem(items, update) {
-		const _tags = [];
-		const len = items.length;
-		const columnSize = this.columnSize;
-		const splitSize = columnSize <= 1 ? 1 : Math.round(len / columnSize) || 1;
-		const drawItemHandler = this.drawItemHandler;
-
-		let tagsHTML = '';
-		let listHTML = '<div class="se-file-item-column">';
-		let columns = 1;
-		for (let i = 0, item, tags; i < len; i++) {
-			item = items[i];
-			tags = !item.tag ? [] : typeof item.tag === 'string' ? item.tag.split(',') : item.tag;
-			tags = item.tag = tags.map(function (v) {
-				return v.trim();
-			});
-			listHTML += drawItemHandler(item);
-
-			if ((i + 1) % splitSize === 0 && columns < columnSize && i + 1 < len) {
-				columns++;
-				listHTML += '</div><div class="se-file-item-column">';
-			}
-
-			if (update && tags.length > 0) {
-				for (let t = 0, tLen = tags.length, tag; t < tLen; t++) {
-					tag = tags[t];
-					if (tag && !_tags.includes(tag)) {
-						_tags.push(tag);
-						tagsHTML += `<a title="${tag}" aria-label="${tag}">${tag}</a>`;
-					}
-				}
-			}
-		}
-		listHTML += '</div>';
-
-		this.list.innerHTML = listHTML;
-
-		if (update) {
-			this.items = items;
-			this.tagArea.innerHTML = tagsHTML;
-		}
-	},
-
-	__addGlobalEvent() {
-		this.__removeGlobalEvent();
-		this._bindClose = this.eventManager.addGlobalEvent('keydown', this.__globalEventHandler, true);
-	},
-
-	__removeGlobalEvent() {
-		if (this._bindClose) this._bindClose = this.eventManager.removeGlobalEvent(this._bindClose);
-	},
-
-	constructor: FileBrowser
-};
-
-function CallBackGet(xmlHttp) {
-	try {
-		const res = JSON.parse(xmlHttp.responseText);
-		if (res.result.length > 0) {
-			this._drawListItem(res.result, true);
-		} else if (res.nullMessage) {
-			this.list.innerHTML = res.nullMessage;
-		}
-	} catch (e) {
-		throw Error(`[SUNEDITOR.fileBrowser.drawList.fail] cause: "${e.message}"`);
-	} finally {
-		this.closeBrowserLoading();
-		this.body.style.maxHeight = domUtils.getClientSize().h - this.header.offsetHeight - 50 + 'px';
-	}
-}
-
-function CallBackError(res, xmlHttp) {
-	this.closeBrowserLoading();
-	throw Error(`[SUNEDITOR.fileBrowser.get.serverException] status: ${xmlHttp.status}, response: ${res.errorMessage || xmlHttp.responseText}`);
-}
-
-function OnClickTag(e) {
-	const target = e.target;
-	if (!domUtils.isAnchor(target)) return;
-
-	const tagName = target.textContent;
-	const selectTag = this.tagArea.querySelector('a[title="' + tagName + '"]');
-	const selectedTags = this.selectedTags;
-	const sTagIndex = selectedTags.indexOf(tagName);
-
-	if (sTagIndex > -1) {
-		selectedTags.splice(sTagIndex, 1);
-		domUtils.removeClass(selectTag, 'on');
-	} else {
-		selectedTags.push(tagName);
-		domUtils.addClass(selectTag, 'on');
-	}
-
-	this._drawListItem(
-		selectedTags.length === 0
-			? this.items
-			: this.items.filter(function (item) {
-					return item.tag.some(function (tag) {
-						return selectedTags.includes(tag);
-					});
-			  }),
-		false
-	);
-}
-
-function OnClickFile(e) {
-	e.preventDefault();
-	e.stopPropagation();
-
-	if (e.target === this.list) return;
-
-	const target = domUtils.getCommandTarget(e.target);
-	if (!target) return;
-
-	this.close();
-	this.selectorHandler(target);
-}
-
-function OnMouseDown_browser(e) {
-	if (/se-file-browser-inner/.test(e.target.className)) {
-		this._closeSignal = true;
-	} else {
-		this._closeSignal = false;
-	}
-}
-
-function OnClick_browser(e) {
-	e.stopPropagation();
-
-	if (/close/.test(e.target.getAttribute('data-command')) || this._closeSignal) {
-		this.close();
-	}
-}
-
-function CreateHTML({ lang, icons }) {
-	return /*html*/ `
-		<div class="se-file-browser-content">
-			<div class="se-file-browser-header">
-				<button type="button" data-command="close" class="se-btn se-file-browser-close" class="close" title="${lang.close}" aria-label="${lang.close}">
-					${icons.cancel}
-				</button>
-				<span class="se-file-browser-title"></span>
-				<div class="se-file-browser-tags"></div>
-			</div>
-			<div class="se-file-browser-body">
-				<div class="se-loading-box sun-editor-common"><div class="se-loading-effect"></div></div>
-				<div class="se-file-browser-list"></div>
-			</div>
-		</div>`;
-}
-
-export default FileBrowser;

package/src/plugins/command/exportPdf.js

@@ -1,168 +0,0 @@
-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/fileBrowser/imageGallery.js

@@ -1,81 +0,0 @@
-import EditorInjector from '../../editorInjector';
-import { FileBrowser } from '../../modules';
-
-const ImageGallery = function (editor, pluginOptions) {
-	// plugin bisic properties
-	EditorInjector.call(this, editor);
-	this.title = this.lang.imageGallery;
-	this.icon = 'image_gallery';
-
-	// modules
-	this.fileBrowser = new FileBrowser(this, {
-		title: this.lang.imageGallery,
-		url: pluginOptions.url,
-		headers: pluginOptions.headers,
-		listClass: 'se-image-list',
-		drawItemHandler: DrawItems,
-		selectorHandler: SetImage.bind(this),
-		columnSize: 4
-	});
-
-	// members
-	this.width = this.plugins.image.pluginOptions.defaultWidth === 'auto' ? '' : this.plugins.image.pluginOptions.defaultWidth;
-	this.height = this.plugins.image.pluginOptions.defaultHeight === 'auto' ? '' : this.plugins.image.pluginOptions.defaultHeight;
-};
-
-ImageGallery.key = 'imageGallery';
-ImageGallery.type = 'fileBrowser';
-ImageGallery.className = '';
-ImageGallery.prototype = {
-	/**
-	 * @description Open image gallery
-	 */
-	open(inputTarget) {
-		this.inputTarget = inputTarget;
-		this.fileBrowser.open();
-	},
-
-	/**
-	 * @description Close image gallery
-	 */
-	close() {
-		this.inputTarget = null;
-		this.fileBrowser.close();
-	},
-
-	constructor: ImageGallery
-};
-
-/**
- * @Required @override fileBrowser
- * @description Define the HTML of the item to be put in "div.se-file-item-column".
- * Format: [
- *      { src: "image src", name: "name(@option)", alt: "image alt(@option)", tag: "tag name(@option)" }
- * ]
- * @param {Object} item Item of the response data's array
- */
-function DrawItems(item) {
-	const srcName = item.src.split('/').pop();
-	return /*html*/ `
-		<div class="se-file-item-img">
-			<img 
-				src="${item.thumbnail || item.src}" 
-				alt="${item.alt || srcName}" 
-				data-command="${item.src || item.thumbnail}" 
-				data-value="${item.name || srcName}">
-			<div class="se-file-name-image se-file-name-back"></div>
-			<div class="se-file-name-image">${item.name || srcName}</div>
-		</div>`;
-}
-
-function SetImage(target) {
-	if (this.inputTarget) {
-		this.inputTarget(target);
-	} else {
-		const file = { name: target.getAttribute('data-value'), size: 0 };
-		this.plugins.image.init();
-		this.plugins.image.create(target.getAttribute('data-command'), null, this.width, this.height, 'none', file, target.alt);
-	}
-}
-
-export default ImageGallery;

package/src/themes/test.css

@@ -1,61 +0,0 @@
-.sun-editor button > svg,
-.sun-editor .se-svg {
-	width: 14px;
-	height: 14px;
-}
-
-/** se-btn button */
-.sun-editor .se-btn {
-	width: 32px;
-	font-size: 12px;
-	line-height: 1.8;
-}
-
-.sun-editor .close > svg,
-.sun-editor .se-modal .se-close-btn > svg {
-	width: 10px;
-	height: 10px;
-}
-
-/* se-select-btn icon */
-.sun-editor .se-btn-select > svg {
-	width: 8px;
-	height: 8px;
-}
-
-/* se-btn-list inner icon */
-.sun-editor .se-btn-list > .se-list-icon {
-	width: 12px;
-	height: 14px;
-}
-
-/* modal */
-.sun-editor .se-modal .se-modal-inner .se-modal-form input,
-.sun-editor .se-modal .se-modal-inner .se-modal-form select {
-	height: 32px;
-	font-size: 13px;
-	line-height: 1.7;
-}
-
-.sun-editor .se-modal .se-modal-inner .se-modal-content .se-btn-primary {
-	padding: 5px 11px;
-}
-
-.sun-editor .se-modal .se-modal-inner .se-modal-footer > div {
-	line-height: 1.7;
-}
-
-.sun-editor .se-line-breaker-component {
-	width: 22px;
-	height: 22px;
-}
-
-.sun-editor .se-modal label,
-.sun-editor .se-modal input,
-.sun-editor .se-modal button {
-	font-size: 14px;
-}
-
-.sun-editor .se-modal .se-modal-inner .se-modal-header .se-modal-title {
-	font-size: 15px;
-}

package/typings/CommandPlugin.d.ts

@@ -1,8 +0,0 @@
-import { Plugin } from './Plugin';
-
-export interface CommandPlugin extends Plugin {
-	/**
-	 * @description The behavior of the "command plugin" must be defined in the "action" method.
-	 */
-	action: () => void;
-}

package/typings/DialogPlugin.d.ts

@@ -1,20 +0,0 @@
-import { Plugin } from './Plugin';
-
-export interface DialogPlugin extends Plugin {
-	/**
-	 * @description This method is called when the plugin button is clicked.
-	 * Open the modal window here.
-	 */
-	open: () => void;
-
-	/**
-	 * @description Called after the dropdown has been rendered
-	 */
-	on?: () => void;
-
-	/**
-	 * @description This method is called when the dialog window is closed.
-	 * Initialize the properties.
-	 */
-	init: () => void;
-}

package/typings/FileBrowserPlugin.d.ts

@@ -1,30 +0,0 @@
-import { Plugin } from './Plugin';
-
-export interface FileBrowserPlugin extends Plugin {
-	/**
-	 * @description Open a file browser window
-	 * @param pluginName Plugin name using the file browser
-	 * @param selectorHandler When the function comes as an argument value, it substitutes "context.selectorHandler".
-	 * @example this.plugins.fileBrowser.open.call(this, 'imageGallery', (selectorHandler || null));
-	 */
-	open(kind: string, update: boolean): void;
-
-	/**
-	 * @description Define the HTML of the item to be put in "div.se-file-item-column".
-	 * @param item Item of the response data's array
-	 */
-	drawItems: (item: object) => string;
-
-	/**
-	 * @description Close a file browser window
-	 * The plugin's "init" method is called.
-	 * @example this.plugins.fileBrowser.close.call(this);
-	 */
-	close(): void;
-
-	/**
-	 * @description This method is called when the file browser window is closed.
-	 * Initialize the properties.
-	 */
-	init?: () => void;
-}

package/typings/Module.d.ts

@@ -1,15 +0,0 @@
-import SunEditor from '../lib/core';
-
-export interface Module {
-	/**
-	 * @description Module name
-	 */
-	name: string;
-
-	/**
-	 * @description Constructor, It will run automatically.
-	 * @param core Core object
-	 * @example core.addModule([dialog, resizing, fileManager])
-	 */
-	add?: (core: SunEditor) => void;
-}

package/typings/Plugin.d.ts

@@ -1,42 +0,0 @@
-export interface Plugin {
-	/**
-	 * @description Plugin name
-	 */
-	name: string;
-
-	/**
-	 * @description Plugin type ('container', 'command', 'dropdown', 'dialog')
-	 */
-	display: string;
-
-	/**
-	 * @description Constructor
-	 * @param core Core object
-	 * @param targetElement Target button Element
-	 */
-	add: (core: any, targetElement?: any) => void;
-
-	/**
-	 * @description Plugins with active methods load immediately when the editor loads.
-	 * Called each time the selection is moved.
-	 * @param element Selected elements
-	 */
-	active?: (element: any) => boolean;
-
-	/**
-	 * @description TML title attribute (tooltip) - default: plugin's name
-	 */
-	title?: string;
-
-	/**
-	 * @description HTML to be append to button (icon)
-	 * Recommend using the inline svg icon. - default: "<span class="se-icon-text">!</span>"
-	 */
-	innerHTML?: string;
-
-	/**
-	 * @description The class of the button. - default: "se-btn"
-	 * Do not recommend using it unless it is a special situation.
-	 */
-	className?: string;
-}