suneditor 2.46.2 → 3.0.0-alpha.1

package/src/plugins/dropdown/template.js

@@ -0,0 +1,71 @@
+import EditorInjector from '../../editorInjector';
+import { domUtils } from '../../helper';
+
+const Template = function (editor, pluginOptions) {
+	// plugin bisic properties
+	EditorInjector.call(this, editor);
+	this.title = this.lang.template;
+	this.icon = 'template';
+
+	// members
+	this.selectedIndex = -1;
+	this.items = pluginOptions.items;
+
+	// create HTML
+	const menu = CreateHTML(this.items);
+
+	// init
+	this.menu.initDropdownTarget(Template, menu);
+};
+
+Template.key = 'template';
+Template.type = 'dropdown';
+Template.className = '';
+Template.prototype = {
+	/**
+	 * @override core
+	 */
+	action(target) {
+		const index = target.getAttribute('data-value') * 1;
+		const temp = this.items[(this.selectedIndex = index)];
+
+		if (temp.html) {
+			this.html.insert(temp.html);
+		} else {
+			this.menu.dropdownOff();
+			throw Error('[SUNEDITOR.template.fail] cause : "templates[i].html not found"');
+		}
+
+		this.menu.dropdownOff();
+	},
+
+	constructor: Template
+};
+
+function CreateHTML(templateList) {
+	if (!templateList || templateList.length === 0) {
+		console.warn('[SUNEDITOR.plugins.template.warn] To use the "template" plugin, please define the "templates" option.');
+	}
+
+	let list = '<div class="se-dropdown se-list-inner"><ul class="se-list-basic">';
+	for (let i = 0, len = (templateList || []).length, t; i < len; i++) {
+		t = templateList[i];
+		list += /*html*/ `
+		<li>
+			<button 
+				type="button" 
+				class="se-btn se-btn-list" 
+				data-value="${i}" 
+				title="${t.name}" 
+				aria-label="${t.name}"
+			>
+				${t.name}
+			</button>
+		</li>`;
+	}
+	list += '</ul></div>';
+
+	return domUtils.createElement('DIV', { class: 'se-list-layer' }, list);
+}
+
+export default Template;

package/src/plugins/dropdown/textStyle.js

@@ -0,0 +1,137 @@
+import EditorInjector from '../../editorInjector';
+import { domUtils } from '../../helper';
+
+const TextStyle = function (editor, pluginOptions) {
+	// plugin bisic properties
+	EditorInjector.call(this, editor);
+	this.title = this.lang.textStyle;
+	this.icon = 'text_style';
+
+	// create HTML
+	const menu = CreateHTML(editor, pluginOptions.items);
+
+	// members
+	this.styleList = menu.querySelectorAll('li button');
+
+	// init
+	this.menu.initDropdownTarget(TextStyle, menu);
+};
+
+TextStyle.key = 'textStyle';
+TextStyle.type = 'dropdown';
+TextStyle.className = '';
+TextStyle.prototype = {
+	/**
+	 * @override dropdown
+	 */
+	on() {
+		const styleButtonList = this.styleList;
+		const selectionNode = this.selection.getNode();
+
+		for (let i = 0, len = styleButtonList.length, btn, data, active; i < len; i++) {
+			btn = styleButtonList[i];
+			data = btn.getAttribute('data-value').split(',');
+
+			for (let v = 0, node, value; v < data.length; v++) {
+				node = selectionNode;
+				active = false;
+
+				while (node && !this.format.isLine(node) && !this.component.is(node)) {
+					if (node.nodeName.toLowerCase() === btn.getAttribute('data-command').toLowerCase()) {
+						value = data[v];
+						if (/^\./.test(value) ? domUtils.hasClass(node, value.replace(/^\./, '')) : node.style[value]) {
+							active = true;
+							break;
+						}
+					}
+					node = node.parentNode;
+				}
+
+				if (!active) break;
+			}
+
+			active ? domUtils.addClass(btn, 'active') : domUtils.removeClass(btn, 'active');
+		}
+	},
+
+	/**
+	 * @override core
+	 * @param {Element} target Target command button
+	 */
+	action(target) {
+		const tempElement = target.firstElementChild;
+		const checkStyles = tempElement.style.cssText.replace(/:.+(;|$)/g, ',').split(',');
+		checkStyles.pop();
+
+		const classes = tempElement.classList;
+		for (let i = 0, len = classes.length; i < len; i++) {
+			checkStyles.push('.' + classes[i]);
+		}
+
+		const newNode = domUtils.hasClass(target, 'active') ? null : tempElement.cloneNode(false);
+		const removeNodes = newNode ? null : [tempElement.nodeName];
+		this.format.applyTextStyle(newNode, checkStyles, removeNodes, true);
+
+		this.menu.dropdownOff();
+	},
+
+	constructor: TextStyle
+};
+
+function CreateHTML({ lang }, items) {
+	const defaultList = {
+		code: {
+			name: lang.menu_code,
+			class: '__se__t-code',
+			tag: 'code'
+		},
+		shadow: {
+			name: lang.menu_shadow,
+			class: '__se__t-shadow',
+			tag: 'span'
+		}
+	};
+	const styleList = items || Object.keys(defaultList);
+
+	let list = '<div class="se-list-inner"><ul class="se-list-basic">';
+	for (let i = 0, len = styleList.length, t, tag, name, attrs, command, value; i < len; i++) {
+		t = styleList[i];
+		attrs = '';
+		value = '';
+		command = [];
+
+		if (typeof t === 'string') {
+			const cssText = defaultList[t.toLowerCase()];
+			if (!cssText) continue;
+			t = cssText;
+		}
+
+		name = t.name;
+		tag = t.tag || 'span';
+
+		attrs += ` class="${t.class}"`;
+		value += `.${t.class.trim().replace(/\s+/g, ',.')}`;
+		command.push('class');
+
+		value = value.replace(/,$/, '');
+
+		list += `
+		<li>
+			<button 
+				type="button" 
+				class="se-btn se-btn-list" 
+				data-command="${tag}" 
+				data-value="${value}" 
+				title="${name}" 
+				aria-label="${name}"
+			>
+				<${tag}${attrs}>${name}</${tag}>
+			</button>
+		</li>`;
+	}
+	list += '</ul></div>';
+
+	return domUtils.createElement('DIV', { class: 'se-dropdown se-list-layer se-list-format' }, list);
+}
+
+export default TextStyle;

package/src/plugins/field/mention.js

@@ -0,0 +1,172 @@
+import EditorInjector from '../../editorInjector';
+import { ApiManager, SelectMenu, Controller } from '../../modules';
+import { domUtils, converter } from '../../helper';
+
+const { debounce } = converter;
+
+const Mention = function (editor, pluginOptions) {
+	EditorInjector.call(this, editor);
+	// plugin basic properties
+	this.title = this.lang.mention;
+	this.icon = 'mention';
+
+	// members
+	this.triggerText = pluginOptions.triggerText || '@';
+	this.limitSize = pluginOptions.limitSize || 5;
+	this.searchStartLength = pluginOptions.searchStartLength || 0;
+	this.delayTime = typeof pluginOptions.delayTime === 'number' ? pluginOptions.delayTime : 200;
+	this.apiUrl = pluginOptions.apiUrl?.replace(/\s/g, '').replace(/\{limitSize\}/i, this.limitSize) || '';
+	this._delay = 0;
+	this._lastAtPos = 0;
+	this._anchorOffset = 0;
+	this._anchorNode = null;
+	// members - api, caching
+	this.apiManager = new ApiManager(this, { headers: pluginOptions.apiHeaders });
+	this.cachingData = pluginOptions.useCachingData ?? true ? new Map() : null;
+
+	// controller
+	const controllerEl = CreateHTML_controller();
+	this.selectMenu = new SelectMenu(this, { position: 'right-bottom', dir: 'ltr', closeMethod: () => this.controller.close() });
+	this.controller = new Controller(
+		this,
+		controllerEl,
+		{
+			position: 'bottom',
+			initMethod: () => {
+				this.apiManager.cancel();
+				this.selectMenu.close();
+			}
+		},
+		null
+	);
+	this.selectMenu.on(controllerEl.firstElementChild, SelectMention.bind(this));
+
+	// onInput debounce
+	this.onInput = debounce(this.onInput.bind(this), this.delayTime);
+};
+
+Mention.key = 'mention';
+Mention.type = 'field';
+Mention.className = '';
+Mention.prototype = {
+	/**
+	 * @override core
+	 */
+	async onInput() {
+		this.apiManager.cancel();
+
+		const sel = this.selection.get();
+		if (!sel.rangeCount) {
+			this.selectMenu.close();
+			return;
+		}
+
+		const anchorNode = sel.anchorNode;
+		const anchorOffset = sel.anchorOffset;
+		const textBeforeCursor = anchorNode.textContent.substring(0, anchorOffset);
+		const lastAtPos = textBeforeCursor.lastIndexOf(this.triggerText);
+
+		if (lastAtPos > -1) {
+			const mentionQuery = textBeforeCursor.substring(lastAtPos + 1, anchorOffset);
+			const beforeText = textBeforeCursor[lastAtPos - 1]?.trim();
+			if (!/\s/.test(mentionQuery) && (!beforeText || domUtils.isZeroWith(beforeText))) {
+				if (mentionQuery.length < this.searchStartLength) return true;
+
+				const anchorParent = anchorNode.parentNode;
+				if (domUtils.isAnchor(anchorParent) && !anchorParent.getAttribute('data-se-mention')) {
+					return true;
+				}
+
+				try {
+					const result = await this._createMentionList(mentionQuery, anchorNode);
+					this._lastAtPos = lastAtPos;
+					this._anchorNode = anchorNode;
+					this._anchorOffset = anchorOffset;
+					return !result;
+				} catch (error) {
+					console.warn('[SUNEDITOR.mention.api.file] ', error);
+				}
+			}
+		}
+
+		this.selectMenu.close();
+		return true;
+	},
+
+	async _createMentionList(value, targetNode) {
+		let response = null;
+		if (this.cachingData) {
+			response = this.cachingData.get(value);
+		}
+
+		if (!response) {
+			const xmlHttp = await this.apiManager.asyncCall({ method: 'GET', url: this._createUrl(value) });
+			response = JSON.parse(xmlHttp.responseText);
+		}
+
+		if (!response?.length) {
+			this.selectMenu.close();
+			return false;
+		}
+
+		const list = [];
+		const menus = [];
+		for (let i = 0, len = response.length, v; i < len; i++) {
+			v = response[i];
+			list.push(v);
+			menus.push(`<div class="se-mention-item"><span>${v.key}</span><span>${v.name}</span></div>`);
+		}
+
+		if (list.length === 0) {
+			this.selectMenu.close();
+			return false;
+		} else {
+			// controller open
+			this.controller.open(targetNode, null, { isWWTarget: true, initMethod: null, addOffset: null });
+			// select menu create
+			this.selectMenu.create(list, menus);
+			this.selectMenu.open();
+			this.selectMenu.setItem(0);
+			if (this.cachingData) this.cachingData.set(value, list);
+			return true;
+		}
+	},
+
+	_createUrl(key) {
+		return this.apiUrl.replace(/\{key\}/i, key);
+	},
+
+	constructor: Mention
+};
+
+function SelectMention(item) {
+	if (!item) return false;
+
+	let oA = null;
+	const { key, name, url } = item;
+	const anchorParent = this._anchorNode.parentNode;
+
+	if (domUtils.isAnchor(anchorParent)) {
+		oA = anchorParent;
+		oA.setAttribute('data-se-mention', key);
+		oA.setAttribute('href', url);
+		oA.setAttribute('title', name);
+		oA.textContent = this.triggerText + key;
+	} else {
+		this.selection.setRange(this._anchorNode, this._lastAtPos, this._anchorNode, this._anchorOffset);
+		oA = domUtils.createElement('A', { 'data-se-mention': key, href: url, title: name, target: '_blank' }, this.triggerText + key);
+		if (!this.html.insertNode(oA, null, false)) return false;
+	}
+
+	this.selectMenu.close();
+
+	const space = domUtils.createTextNode('\u00A0');
+	oA.parentNode.insertBefore(space, oA.nextSibling);
+	this.selection.setRange(space, 1, space, 1);
+}
+
+function CreateHTML_controller() {
+	return domUtils.createElement('DIV', { class: 'se-controller se-empty-controller' }, '<div></div>');
+}
+
+export default Mention;

package/src/plugins/fileBrowser/imageGallery.js

@@ -1,64 +1,81 @@
-/*
- * wysiwyg web editor
- *
- * suneditor.js
- * Copyright 2017 JiHong Lee.
- * MIT license.
- */
-'use strict';
+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
+	});
 
-import fileBrowser from '../modules/fileBrowser';
+	// 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;
+};
 
-export default {
-    name: 'imageGallery',
-    /**
-     * @description Constructor
-     * @param {Object} core Core object 
-     */
-    add: function (core) {
-        core.addModule([fileBrowser]);
+ImageGallery.key = 'imageGallery';
+ImageGallery.type = 'fileBrowser';
+ImageGallery.className = '';
+ImageGallery.prototype = {
+	/**
+	 * @description Open image gallery
+	 */
+	open(inputTarget) {
+		this.inputTarget = inputTarget;
+		this.fileBrowser.open();
+	},
 
-        const context = core.context;
-        context.imageGallery = {
-            title: core.lang.toolbar.imageGallery, // @Required @Override fileBrowser - File browser window title.
-            url: core.options.imageGalleryUrl, // @Required @Override fileBrowser - File server url.
-            header: core.options.imageGalleryHeader, // @Required @Override fileBrowser - File server http header.
-            listClass: 'se-image-list', // @Required @Override fileBrowser - Class name of list div.
-            itemTemplateHandler: this.drawItems, // @Required @Override fileBrowser - Function that defines the HTML of an file item.
-            selectorHandler: this.setImage.bind(core), // @Required @Override fileBrowser - Function that action when item click.
-            columnSize: 4 // @Option @Override fileBrowser - Number of "div.se-file-item-column" to be created (default: 4)
-        };
-    },
-    
-    /**
-     * @Required @Override fileBrowser
-     * @description Open a file browser.
-     * @param {Function|null} selectorHandler When the function comes as an argument value, it substitutes "context.selectorHandler".
-     */
-    open: function (selectorHandler) {
-        this.plugins.fileBrowser.open.call(this, 'imageGallery', selectorHandler);
-    },
+	/**
+	 * @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>`;
+}
 
-    /**
-     * @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
-     */
-    drawItems: function (item) {
-        const srcName = item.src.split('/').pop();
-        return  '<div class="se-file-item-img"><img src="' + (item.thumbnail || item.src) + '" alt="' + (item.alt || srcName) + '" data-command="pick" data-value="' + (item.src || item.thumbnail) + '">' +
-                    '<div class="se-file-img-name se-file-name-back"></div>' +
-                    '<div class="se-file-img-name __se__img_name">' + (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);
+	}
+}
 
-    setImage: function (target, fileName) {
-        this.callPlugin('image', function () {
-            const file = {name: fileName, size: 0};
-            this.plugins.image.create_image.call(this, target.getAttribute('data-value'), null, this.context.image._origin_w, this.context.image._origin_h, 'none', file, target.alt);
-        }.bind(this), null);
-    }
-};
+export default ImageGallery;

package/src/plugins/index.js

@@ -1,32 +1,94 @@
-'use strict';
-
 // command
 import blockquote from './command/blockquote';
+import exportPdf from './command/exportPdf';
+import fileUpload from './command/fileUpload';
+import list_bulleted from './command/list_bulleted';
+import list_numbered from './command/list_numbered';
+
+// field
+import mention from './field/mention';
 
-// submenu
-import align from './submenu/align';
-import font from './submenu/font';
-import fontSize from './submenu/fontSize';
-import fontColor from './submenu/fontColor';
-import hiliteColor from './submenu/hiliteColor';
-import horizontalRule from './submenu/horizontalRule';
-import list from './submenu/list';
-import table from './submenu/table';
-import formatBlock from './submenu/formatBlock';
-import lineHeight from './submenu/lineHeight';
-import template from './submenu/template';
-import paragraphStyle from './submenu/paragraphStyle';
-import textStyle from './submenu/textStyle';
+// dropdown
+import align from './dropdown/align';
+import font from './dropdown/font';
+import fontColor from './dropdown/fontColor';
+import backgroundColor from './dropdown/backgroundColor';
+import hr from './dropdown/hr';
+import list from './dropdown/list';
+import table from './dropdown/table';
+import formatBlock from './dropdown/formatBlock';
+import layout from './dropdown/layout';
+import lineHeight from './dropdown/lineHeight';
+import template from './dropdown/template';
+import paragraphStyle from './dropdown/paragraphStyle';
+import textStyle from './dropdown/textStyle';
 
-// dialog
-import link from './dialog/link';
-import image from './dialog/image';
-import video from './dialog/video';
-import audio from './dialog/audio';
-import math from './dialog/math';
+// modal
+import link from './modal/link';
+import image from './modal/image';
+import video from './modal/video';
+import audio from './modal/audio';
+import math from './modal/math';
 
 // file browser
 import imageGallery from './fileBrowser/imageGallery';
 
-export { blockquote, align, font, fontSize, fontColor, hiliteColor, horizontalRule, list, table, formatBlock, lineHeight, template, paragraphStyle, textStyle, link, image, video, audio, math, imageGallery };
-export default { blockquote, align, font, fontSize, fontColor, hiliteColor, horizontalRule, list, table, formatBlock, lineHeight, template, paragraphStyle, textStyle, link, image, video, audio, math, imageGallery };
+// input
+import fontSize from './input/fontSize';
+
+export {
+	blockquote,
+	exportPdf,
+	fileUpload,
+	list_bulleted,
+	list_numbered,
+	mention,
+	align,
+	font,
+	fontColor,
+	backgroundColor,
+	list,
+	table,
+	formatBlock,
+	hr,
+	layout,
+	lineHeight,
+	template,
+	paragraphStyle,
+	textStyle,
+	link,
+	image,
+	video,
+	audio,
+	math,
+	imageGallery,
+	fontSize
+};
+export default {
+	blockquote,
+	exportPdf,
+	fileUpload,
+	list_bulleted,
+	list_numbered,
+	mention,
+	align,
+	font,
+	fontColor,
+	backgroundColor,
+	list,
+	table,
+	formatBlock,
+	hr,
+	layout,
+	lineHeight,
+	template,
+	paragraphStyle,
+	textStyle,
+	link,
+	image,
+	video,
+	audio,
+	math,
+	imageGallery,
+	fontSize
+};