suneditor 2.46.2 → 3.0.0-alpha.2

package/src/suneditor.js

@@ -1,75 +1,70 @@
-/*
- * wysiwyg web editor
- *
- * suneditor.js
- * Copyright 2017 JiHong Lee.
- * MIT license.
- */
-'use strict';
+import Editor from './core/editor';
 
-import core from './lib/core';
-import util from './lib/util';
-import _Constructor from './lib/constructor';
-import _Context from './lib/context';
+import EditorInjector from './editorInjector';
+import Plugins from './plugins';
+import Langs from './langs';
+import Modules from './modules';
+import Helper from './helper';
 
-export default {
-    /**
-     * @description Returns the create function with preset options.
-     * If the options overlap, the options of the 'create' function take precedence.
-     * @param {Json} options Initialization options
-     * @returns {Object}
-     */
-    init: function (init_options) {
-        return {
-            create: function (idOrElement, options) {
-                return this.create(idOrElement, options, init_options);
-            }.bind(this)
-        };
-    },
-
-    /**
-     * @description Create the suneditor
-     * @param {String|Element} idOrElement textarea Id or textarea element
-     * @param {JSON|Object} options user options
-     * @returns {Object}
-     */
-    create: function (idOrElement, options, _init_options) {
-        util._propertiesInit();
+export const editorInjector = EditorInjector;
+export const plugins = Plugins;
+export const modules = Modules;
+export const langs = Langs;
+export const helper = Helper;
 
-        if (typeof options !== 'object') options = {};
-        if (_init_options) {
-            options =  [_init_options, options].reduce(function (init, option) {
-                            for (let key in option) {
-                                if (!util.hasOwn(option, key)) continue;
-                                if (key === 'plugins' && option[key] && init[key]) {
-                                    let i = init[key], o = option[key];
-                                    i = i.length ? i : Object.keys(i).map(function(name) { return i[name]; });
-                                    o = o.length ? o : Object.keys(o).map(function(name) { return o[name]; });
-                                    init[key] = (o.filter(function(val) { return i.indexOf(val) === -1; })).concat(i);
-                                } else {
-                                    init[key] = option[key];
-                                }
-                            }
-                            return init;
-                        }, {});
-        }
-        
-        const element = typeof idOrElement === 'string' ? document.getElementById(idOrElement) : idOrElement;
-
-        if (!element) {
-            if (typeof idOrElement === 'string') {
-                throw Error('[SUNEDITOR.create.fail] The element for that id was not found (ID:"' + idOrElement + '")');
-            }
+export default {
+	/**
+	 * @description Returns the create function with preset options.
+	 * If the options overlap, the options of the 'create' function take precedence.
+	 * @param {Json} options Initialization options
+	 * @returns {Object}
+	 */
+	init(init_options) {
+		return {
+			create: (targets, options) => this.create(targets, options, init_options)
+		};
+	},
 
-            throw Error('[SUNEDITOR.create.fail] suneditor requires textarea\'s element or id value');
-        }
+	/**
+	 * @description Create the suneditor
+	 * @param {string|Element|Array.<string|Element>} target textarea Id or textarea element
+	 * @param {JSON|Object} options user options
+	 * @returns {Object}
+	 */
+	create(target, options, _init_options) {
+		if (typeof options !== 'object') options = {};
+		if (_init_options) {
+			options = (() => {
+				return [_init_options, options].reduce((init, option) => {
+					Object.entries(option).forEach(([key, value]) => {
+						if (key === 'plugins' && value && init[key]) {
+							const i = Array.isArray(init[key]) ? init[key] : Object.values(init[key]);
+							const o = Array.isArray(value) ? value : Object.values(value);
+							init[key] = [...o.filter((val) => !i.includes(val)), ...i];
+						} else {
+							init[key] = value;
+						}
+					});
+					return init;
+				}, {});
+			})();
+		}
 
-        const cons = _Constructor.init(element, options);
+		if (!target) throw Error("[SUNEDITOR.create.fail] suneditor requires textarea's element");
 
-        if (cons.constructed._top.id && document.getElementById(cons.constructed._top.id)) {
-            throw Error('[SUNEDITOR.create.fail] The ID of the suneditor you are trying to create already exists (ID:"' + cons.constructed._top.id + '")');
-        }
+		const multiTargets = [];
+		if (target.nodeType === 1) {
+			multiTargets.push({ target: target });
+		} else {
+			let props;
+			for (const key in target) {
+				props = target[key];
+				if (!props.target || props.target.nodeType !== 1) throw Error('[SUNEDITOR.create.fail] suneditor multi root requires textarea\'s element at the "target" property.');
+				props.key = key;
+				multiTargets.push(props);
+			}
+		}
 
-        return core(_Context(element, cons.constructed, cons.options), cons.pluginCallButtons, cons.plugins, cons.options.lang, options, cons._responsiveButtons);
-    }
+		return new Editor(multiTargets, options);
+	}
 };

package/src/themes/test.css

@@ -0,0 +1,61 @@
+.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

@@ -0,0 +1,8 @@
+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

@@ -0,0 +1,20 @@
+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

@@ -0,0 +1,30 @@
+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/Lang.d.ts

@@ -0,0 +1,124 @@
+export interface Lang {
+	code: string;
+	default: string;
+	save: string;
+	font: string;
+	formats: string;
+	fontSize: string;
+	bold: string;
+	underline: string;
+	italic: string;
+	strike: string;
+	subscript: string;
+	superscript: string;
+	removeFormat: string;
+	fontColor: string;
+	backgroundColor: string;
+	indent: string;
+	outdent: string;
+	align: string;
+	alignLeft: string;
+	alignRight: string;
+	alignCenter: string;
+	alignJustify: string;
+	list: string;
+	numberedList: string;
+	bulletedList: string;
+	horizontalLine: string;
+	hr_solid: string;
+	hr_dotted: string;
+	hr_dashed: string;
+	table: string;
+	link: string;
+	math: string;
+	image: string;
+	video: string;
+	audio: string;
+	fullScreen: string;
+	showBlocks: string;
+	codeView: string;
+	undo: string;
+	redo: string;
+	preview: string;
+	print: string;
+	tag_p: string;
+	tag_div: string;
+	tag_h: string;
+	tag_blockquote: string;
+	tag_pre: string;
+	template: string;
+	lineHeight: string;
+	paragraphStyle: string;
+	textStyle: string;
+	imageGallery: string;
+	dir_ltr: string;
+	dir_rtl: string;
+	mention: string;
+	tags: string;
+	search: string;
+	caption: string;
+	close: string;
+	submitButton: string;
+	revertButton: string;
+	proportion: string;
+	basic: string;
+	left: string;
+	right: string;
+	center: string;
+	width: string;
+	height: string;
+	size: string;
+	ratio: string;
+	edit: string;
+	unlink: string;
+	remove: string;
+	link_modal_title: string;
+	link_modal_url: string;
+	link_modal_text: string;
+	link_modal_newWindowCheck: string;
+	link_modal_downloadLinkCheck: string;
+	link_modal_bookmark: string;
+	math_modal_title: string;
+	math_modal_inputLabel: string;
+	math_modal_fontSizeLabel: string;
+	math_modal_previewLabel: string;
+	image_modal_title: string;
+	image_modal_file: string;
+	image_modal_url: string;
+	image_modal_altText: string;
+	video_modal_title: string;
+	video_modal_file: string;
+	video_modal_url: string;
+	audio_modal_title: string;
+	audio_modal_file: string;
+	audio_modal_url: string;
+	insertRowAbove: string;
+	insertRowBelow: string;
+	deleteRow: string;
+	insertColumnBefore: string;
+	insertColumnAfter: string;
+	deleteColumn: string;
+	fixedColumnWidth: string;
+	resize100: string;
+	resize75: string;
+	resize50: string;
+	resize25: string;
+	autoSize: string;
+	mirrorHorizontal: string;
+	mirrorVertical: string;
+	rotateLeft: string;
+	rotateRight: string;
+	maxSize: string;
+	minSize: string;
+	tableHeader: string;
+	mergeCells: string;
+	splitCells: string;
+	horizontalSplit: string;
+	verticalSplit: string;
+	menu_spaced: string;
+	menu_bordered: string;
+	menu_neon: string;
+	menu_translucent: string;
+	menu_shadow: string;
+	menu_code: string;
+}

package/typings/Module.d.ts

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1,42 @@
+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;
+}

package/typings/SubmenuPlugin.d.ts

@@ -0,0 +1,8 @@
+import { Plugin } from './Plugin';
+
+export interface DropdownPlugin extends Plugin {
+	/**
+	 * @description Called after the dropdown has been rendered
+	 */
+	on?: () => void;
+}

package/typings/_classes.d.ts

@@ -0,0 +1,17 @@
+class ClassInterface {
+	char: any;
+	component: any;
+	format: any;
+	html: any;
+	menu: any;
+	nodeTransform: any;
+	notice: any;
+	offset: any;
+	selection: any;
+	shortcuts: any;
+	toolbar: any;
+	viewer: any;
+	subToolbar?: any;
+}
+
+export default ClassInterface;

package/typings/_colorPicker.d.ts

@@ -0,0 +1,60 @@
+import SunEditor from '../../lib/core';
+import { Module } from '../Module';
+
+declare interface _colorPicker extends Module {
+	/**
+	 * @description Create color list
+	 * @param core Core object
+	 * @param makeColor this._makeColorList
+	 * @returns HTML string
+	 */
+	createColorList(core: SunEditor, makeColor: (color: string) => string): string;
+
+	/**
+	 * @description Displays or resets the currently selected color at color list.
+	 * @param node Current Selected node
+	 * @param color Color value
+	 */
+	init(node: Node, color: string): void;
+
+	/**
+	 * @description Store color values
+	 * @param hexColorStr Hax color value
+	 */
+	setCurrentColor(hexColorStr: string): void;
+
+	/**
+	 * @description Set color at input element
+	 * @param hexColorStr Hax color value
+	 */
+	setInputText(hexColorStr: string): void;
+
+	/**
+	 * @description Gets color value at color property of node
+	 * @param node Selected node
+	 * @returns
+	 */
+	getColorInNode(node: Node): string;
+
+	/**
+	 * @description Function to check hex format color
+	 * @param str Color value
+	 */
+	isHexColor(str: string): boolean;
+
+	/**
+	 * @description Function to convert hex format to a rgb color
+	 * @param rgb RGB color format
+	 * @returns
+	 */
+	rgb2hex(rgb: string): string;
+
+	/**
+	 * @description Converts color values of other formats to hex color values and returns.
+	 * @param colorName Color value
+	 * @returns
+	 */
+	colorName2hex(colorName: string): string;
+}
+
+export default _colorPicker;

package/typings/_core.d.ts

@@ -0,0 +1,55 @@
+import { Core, status } from '../lib/core.d';
+import { Lang } from '../langs/Lang.d';
+import { Plugin } from '../plugins/Plugin.d';
+import { SunEditorOptions } from '../options.d';
+import { Context } from '../lib/context.d';
+import { History } from '../lib/history.d';
+import Helper from '../helper/index.d';
+
+class CoreInterface {
+	editor: Core;
+
+	/**
+	 * @description window object.
+	 */
+	_w: Window;
+
+	/**
+	 * @description document object.
+	 */
+	_d: Document;
+
+	/**
+	 * @description window obejct.(If in iframe mode, the window object of the iframe )
+	 */
+	_ww: Document;
+
+	/**
+	 * @description document object.(If in iframe mode, the document object of the iframe )
+	 */
+	_wd: Window;
+
+	/**
+	 * @description Closest ShadowRoot to editor if found
+	 */
+	shadowRoot: Document;
+
+	/**
+	 * @description Loaded plugins
+	 */
+	plugins: Record<string, Plugin>;
+
+	/**
+	 * @description Default icons object
+	 */
+	icons: Record<string, string>;
+
+	status: status;
+	options: SunEditorOptions;
+	context: Context;
+	history: History;
+	lang: Lang;
+	helper: Helper;
+}
+
+export default CoreInterface;

package/typings/align.d.ts

@@ -0,0 +1,5 @@
+import { DropdownPlugin } from '../DropdownPlugin';
+
+declare const align: DropdownPlugin;
+
+export default align;

package/{src/plugins/dialog → typings}/audio.d.ts

@@ -2,4 +2,4 @@ import { DialogPlugin } from '../DialogPlugin';
 
 declare const audio: DialogPlugin;
 
-export default audio;
+export default audio;

package/typings/backgroundColor.d.ts

@@ -0,0 +1,5 @@
+import { DropdownPlugin } from '../DropdownPlugin';
+
+declare const backgroundColor: DropdownPlugin;
+
+export default backgroundColor;

package/{src/plugins/command → typings}/blockquote.d.ts

@@ -2,4 +2,4 @@ import { CommandPlugin } from '../CommandPlugin';
 
 declare const blockquote: CommandPlugin;
 
-export default blockquote;
+export default blockquote;

package/typings/char.d.ts

@@ -0,0 +1,39 @@
+import EditorDependency from '../src/editorInjector';
+
+class Char extends EditorDependency {
+	/**
+	 * @description Returns false if char count is greater than "options.charCounter_max" when "html" is added to the current editor.
+	 * @param element Element node or String.
+	 */
+	check(html: Node | string): boolean;
+
+	/**
+	 * @description Get the [content]'s number of characters or binary data size. (options.charCounter_type)
+	 * If [content] is undefined, get the current editor's number of characters or binary data size.
+	 * @param content Content to count. (defalut: this.editor.frameContext.get('wysiwyg'))
+	 */
+	getLength(content?: string): number;
+
+	/**
+	 * @descriptionGets Get the length in bytes of a string.
+	 * @param text String text
+	 * @returns
+	 */
+	getByteLength(text: string): number;
+
+	/**
+	 * @description Set the char count to charCounter element textContent.
+	 */
+	display(): void;
+
+	/**
+	 * @description Returns false if char count is greater than "options.charCounter_max" when "inputText" is added to the current editor.
+	 * If the current number of characters is greater than "charCounter_max", the excess characters are removed.
+	 * And call the char.display()
+	 * @param inputText Text added.
+	 * @returns
+	 */
+	test(inputText: string): boolean;
+}
+
+export default Char;