suneditor 3.0.0-alpha.2 → 3.0.0-alpha.20

package/src/plugins/popup/anchor.js

@@ -0,0 +1,222 @@
+import EditorInjector from '../../editorInjector';
+import { Controller } from '../../modules';
+import { dom, env } from '../../helper';
+
+const { _w } = env;
+
+/**
+ * @class
+ * @description Anchor plugin
+ * - Allows you to create, edit, and delete elements that act as anchors (bookmarks) within a document.
+ */
+class Anchor extends EditorInjector {
+	static key = 'anchor';
+	static type = 'popup';
+	static className = '';
+	/**
+	 * @this {Anchor}
+	 * @param {HTMLElement} node - The node to check.
+	 * @returns {HTMLElement|null} Returns a node if the node is a valid component.
+	 */
+	static component(node) {
+		return dom.check.isAnchor(node) && node.hasAttribute('id') && node.hasAttribute('data-se-anchor') ? node : null;
+	}
+
+	/**
+	 * @constructor
+	 * @param {__se__EditorCore} editor - The root editor instance
+	 */
+	constructor(editor) {
+		super(editor);
+		// plugin basic properties
+		this.title = this.lang.anchor;
+		this.icon = 'bookmark_anchor';
+
+		// members
+		const parser = new DOMParser();
+		const svgDoc = parser.parseFromString(this.icons.bookmark_anchor, 'image/svg+xml');
+		this.bookmarkIcon = svgDoc.documentElement;
+		this._element = null;
+		this._range = null;
+
+		// controller
+		const controllerSelectEl = CreateHTML_controller_select(this);
+		this.displayId = controllerSelectEl.querySelector('.se-controller-display');
+		this.controllerSelect = new Controller(this, controllerSelectEl, { position: 'bottom', disabled: true }, Anchor.key);
+
+		const controllerEl = CreateHTML_controller(this);
+		this.inputEl = controllerEl.querySelector('input');
+		this.controller = new Controller(this, controllerEl, { position: 'bottom', disabled: true, parents: [this.controllerSelect.form], parentsHide: true }, Anchor.key);
+	}
+
+	/**
+	 * @editorMethod Editor.Plugin<popup>
+	 * @description Displays a popup and gives focus to the input field.
+	 */
+	show() {
+		this.controller.open((this._range = this.selection.getRange()));
+		_w.setTimeout(() => {
+			this.inputEl.focus();
+		}, 0);
+	}
+
+	/**
+	 * @editorMethod Modules.Component
+	 * @description Executes the method that is called when a component of a plugin is selected.
+	 * @param {HTMLElement} target Target component element
+	 */
+	select(target) {
+		this._element = target;
+		this.displayId.textContent = target.getAttribute('id');
+		this.controllerSelect.open(target);
+	}
+
+	/**
+	 * @editorMethod Editor.Component
+	 * @description Called when a container is deselected.
+	 */
+	deselect() {
+		this._init();
+	}
+
+	/**
+	 * @editorMethod Modules.Controller
+	 * @description Executes the method that is called when a button is clicked in the "controller".
+	 * @param {HTMLButtonElement} target Target button element
+	 */
+	controllerAction(target) {
+		const command = target.getAttribute('data-command');
+		if (!command) return;
+		const currentElement = this._element;
+
+		switch (command) {
+			case 'submit': {
+				if (!currentElement) {
+					const id = this.inputEl.value.trim();
+					if (!id) {
+						this.inputEl.focus();
+						return;
+					}
+
+					const a = dom.utils.createElement('A', {
+						id,
+						'data-se-anchor': this.inputEl.value,
+						'data-se-non-link': 'true',
+						contenteditable: 'false',
+						class: 'se-component se-inline-component'
+					});
+
+					this.component.insert(a, { skipCharCount: false, skipSelection: true, skipHistory: false });
+
+					const r = this.selection.getNearRange(a);
+					if (r) {
+						this.selection.setRange(r.container, r.offset, r.container, r.offset);
+					} else {
+						this.component.select(a, Anchor.key, false);
+					}
+					this._init();
+				} else {
+					this.controller.close();
+					currentElement.id = this.inputEl.value;
+					this.select(currentElement);
+				}
+
+				break;
+			}
+			case 'cancel': {
+				this.controller.close(!currentElement);
+				if (this._range) {
+					this.selection.setRange(this._range);
+				}
+
+				this._init();
+				if (currentElement) {
+					this.select(currentElement);
+				}
+
+				break;
+			}
+			case 'edit': {
+				this.inputEl.value = this.displayId.textContent;
+				this.controllerSelect.hide();
+				this.controller.open(currentElement);
+
+				break;
+			}
+			case 'delete': {
+				const r = this.selection.getNearRange(currentElement);
+
+				dom.utils.removeItem(currentElement);
+				this.controllerSelect.close(true);
+
+				if (r) {
+					this.selection.setRange(r.container, r.offset, r.container, r.offset);
+				}
+
+				this._init();
+
+				break;
+			}
+		}
+	}
+
+	/**
+	 * @private
+	 * @description Initializes state variables.
+	 * - called when the popup is closed
+	 */
+	_init() {
+		this._element = null;
+		this._range = null;
+		this.inputEl.value = '';
+		this.displayId.textContent = '';
+	}
+}
+
+function CreateHTML_controller({ lang, icons }) {
+	const html = /*html*/ `
+		<div class="se-arrow se-arrow-up"></div>
+		<form>
+			<div class="se-controller-display">${lang.id}</div>
+			<div class="se-btn-group se-form-group">
+				<input type="text" required />
+				<button type="submit" data-command="submit" 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 dom.utils.createElement('DIV', { class: 'se-controller se-controller-simple-input' }, html);
+}
+
+function CreateHTML_controller_select({ lang, icons }) {
+	const html = /*html*/ `
+	<div class="se-arrow se-arrow-up"></div>
+	<div class="link-content">
+		<div class="se-controller-display"></div>
+		<div class="se-btn-group">
+			<button type="button" data-command="edit" tabindex="-1" class="se-btn se-tooltip">
+				${icons.edit}
+				<span class="se-tooltip-inner">
+					<span class="se-tooltip-text">${lang.edit}</span>
+				</span>
+			</button>
+			<button type="button" data-command="delete" tabindex="-1" class="se-btn se-tooltip">
+				${icons.delete}
+				<span class="se-tooltip-inner">
+					<span class="se-tooltip-text">${lang.remove}</span>
+				</span>
+			</button>
+		</div>
+	</div>`;
+
+	return dom.utils.createElement('DIV', { class: 'se-controller se-controller-link' }, html);
+}
+
+export default Anchor;

package/src/suneditor.js

@@ -6,18 +6,58 @@ import Langs from './langs';
 import Modules from './modules';
 import Helper from './helper';
 
-export const editorInjector = EditorInjector;
-export const plugins = Plugins;
-export const modules = Modules;
-export const langs = Langs;
-export const helper = Helper;
+/**
+ * @module SunEditorExports
+ */
 
+/**
+ * @typedef {import('./core/section/constructor').EditorFrameOptions} EditorFrameOptions
+ */
+
+/**
+ * Editor Injector module, Inject "editor" and basic frequently used objects by calling it with "call(this, editor)".
+ * @type {(...args: *) => *}
+ */
+export { EditorInjector };
+
+/**
+ * Available editor plugins
+ * @type {Object<string, *>}
+ */
+export { Plugins };
+
+/**
+ * Editor modules
+ * @type {{[key: string]: ((...args: *) => *)|Map}}
+ */
+export { Modules };
+
+/**
+ * Language packs for the editor
+ * @type {Object<string, Object<string, string> | ((...args: *) => *)>}
+ */
+export { Langs };
+
+/**
+ * Helper functions for the editor
+ * @type {Object<string|symbol, Object<string, ((...args: *) => *)>>}
+ */
+export { Helper };
+
+/**
+ * @typedef {import('./core/section/constructor').EditorInitOptions} EditorInitOptions
+ */
+
+/**
+ * SunEditor Factory Object
+ * @namespace SunEditor
+ */
 export default {
 	/**
-	 * @description Returns the create function with preset options.
+	 * 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}
+	 * @param {EditorInitOptions} init_options - Initialization options
+	 * @returns {{create: (targets: Element|Object<string, {target: Element, options: EditorFrameOptions}>, options: EditorInitOptions) => Editor}}}
 	 */
 	init(init_options) {
 		return {
@@ -26,10 +66,12 @@ export default {
 	},
 
 	/**
-	 * @description Create the suneditor
-	 * @param {string|Element|Array.<string|Element>} target textarea Id or textarea element
-	 * @param {JSON|Object} options user options
-	 * @returns {Object}
+	 * Creates a new instance of the SunEditor
+	 * @param {Element|Object<string, {target: Element, options: EditorFrameOptions}>} target - Target element or multi-root object
+	 * @param {EditorInitOptions} options - Initialization options
+	 * @param {EditorInitOptions} [_init_options] - Optional preset initialization options
+	 * @returns {Editor} - Instance of the SunEditor
+	 * @throws {Error} If the target element is not provided or is invalid
 	 */
 	create(target, options, _init_options) {
 		if (typeof options !== 'object') options = {};

package/src/themes/dark.css

@@ -0,0 +1,85 @@
+.sun-editor.se-theme-dark,
+.sun-editor-editable.se-theme-dark {
+	/** --------- editable - styles --------- */
+	--se-edit-font-color: #ccc;
+	--se-edit-font-pre: #aaa;
+	--se-edit-font-quote: #888;
+	--se-edit-background-color: #1e1e1e;
+	--se-edit-background-pre: #2a2a2a;
+	--se-edit-border-light: #555;
+	--se-edit-border-dark: #444;
+	--se-edit-border-dark-n1: #555;
+	--se-edit-border-dark-n2: #666;
+	--se-edit-anchor: #77aaff;
+	--se-edit-anchor-on-back: #004cff;
+	--se-edit-anchor-on-font: #e8f7ff;
+	--se-edit-hr-color: #ccc;
+	--se-edit-hr-on-back: #2a2a2a;
+	--se-edit-active: #77aaff;
+	--se-edit-hover: #5599ff;
+	--se-edit-outline: #444;
+
+	/** --------- editor - styles --------- */
+	--se-main-out-color: #444;
+	--se-main-color: #ccc;
+	--se-main-color-lighter: #aaa;
+	--se-main-background-color: #1e1e1e;
+	--se-main-background-color2: #2a2a2a;
+	--se-main-background-color3: #333;
+	--se-main-font-color: #ccc;
+	--se-main-font-color2: #ddd;
+	--se-main-divider-color: #555;
+	--se-main-border-color: #666;
+	--se-main-outline-color: #444;
+	--se-main-shadow-color: #222;
+	--se-statusbar-font-color: #aaa;
+	--se-overlay-background-color: #111;
+	--se-active-color: #77aaff;
+	--se-active-dark-color: #5599ff;
+	--se-active-dark2-color: #407dd1;
+	--se-active-dark3-color: #77aaff;
+	--se-active-dark4-color: #5599ff;
+	--se-active-dark5-color: #004cff;
+	--se-active-light-color: #002244;
+	--se-active-light2-color: #003366;
+	--se-active-light3-color: #004488;
+	--se-active-light4-color: #0055aa;
+	--se-active-light5-color: #0066cc;
+	--se-active-light6-color: #0077ee;
+	--se-drag-over-color: #ffcc00;
+	--se-modal-border-color: #555;
+	--se-modal-anchor-color: #77aaff;
+	--se-modal-preview-color: #aaa;
+	--se-modal-input-disabled-color: #666;
+	--se-modal-input-disabled-background-color: #333;
+	--se-dropdown-font-color: #ccc;
+	--se-controller-border-color: #555;
+	--se-input-btn-border-color: #444;
+	--se-input-btn-disabled-color: #666;
+	--se-success-color: #33cc33;
+	--se-success-dark-color: #2a7a2a;
+	--se-success-dark2-color: #207a20;
+	--se-success-dark3-color: #1a661a;
+	--se-success-light-color: #00ff00;
+	--se-success-light2-color: #00cc00;
+	--se-success-light3-color: #009900;
+	--se-success-light4-color: #006600;
+	--se-success-light5-color: #003300;
+	--se-error-color: #ff6666;
+	--se-error-dark-color: #b24a48;
+	--se-error-dark2-color: #993333;
+	--se-error-dark3-color: #662222;
+	--se-error-light-color: #ff9999;
+	--se-error-light2-color: #ffcccc;
+	--se-error-light3-color: #ff3333;
+	--se-error-light4-color: #ff0000;
+	--se-error-light5-color: #cc0000;
+	--se-doc-background: #2a2a2a;
+	--se-doc-info-font-color: #ccc;
+	--se-doc-info-page-background-color: #444;
+	--se-doc-info-active-color: #77aaff;
+	--se-loading-color: #77aaff;
+	--se-show-blocks-color: #5599ff;
+	--se-show-blocks-li-color: #d539ff;
+	--se-show-blocks-pre-color: #27c022;
+}

package/src/typedef.js

@@ -0,0 +1,86 @@
+/**
+ * @version 1.0.0
+ */
+
+// --------------------------------------------------------- [Node] ---------------------------------------------------------------------------------------------------
+/**
+ * @typedef {Array<Node>|HTMLCollection|NodeList} __se__NodeCollection
+ */
+
+// --------------------------------------------------------- [Editor] ---------------------------------------------------------------------------------------------------
+/**
+ * @typedef {import('./core/editor').default} __se__EditorCore
+ */
+
+/**
+ * @typedef {import('./editorInjector').default} __se__EditorInjector
+ */
+
+/**
+ * @typedef {import('./editorInjector/_core').default} __se__CoreInjector
+ */
+
+/**
+ * @typedef {Object} __se__EditorStatus
+ * @property {boolean} hasFocus Boolean value of whether the editor has focus
+ * @property {number} tabSize Indent size of tab (4)
+ * @property {number} indentSize Indent size (25)px
+ * @property {number} codeIndentSize Indent size of Code view mode (2)
+ * @property {Array<string>} currentNodes  An element array of the current cursor's node structure
+ * @property {Array<string>} currentNodesMap  An element name array of the current cursor's node structure
+ * @property {boolean} onSelected Boolean value of whether component is selected
+ * @property {number} rootKey Current root key
+ * @property {Range} _range Current range object
+ * @property {boolean} _onMousedown Mouse down event status
+ */
+
+// --------------------------------------------------------- [Event] ---------------------------------------------------------------------------------------------------
+/**
+ * @typedef {Object} __se__EventInfo
+ * @property {*} target Target element
+ * @property {string} type Event type
+ * @property {(...args: *) => *} listener Event listener
+ * @property {boolean|AddEventListenerOptions=} useCapture Event useCapture option
+ */
+
+/**
+ * @typedef {Object} __se__GlobalEventInfo
+ * @property {string} type Event type
+ * @property {(...args: *) => *} listener Event listener
+ * @property {boolean|AddEventListenerOptions=} useCapture Use event capture
+ */
+
+// --------------------------------------------------------- [Plugin Event] ---------------------------------------------------------------------------------------------------
+/**
+ * @typedef {Object} __se__PluginMouseEventInfo
+ * @property {__se__FrameContext} frameContext Frame context
+ * @property {MouseEvent} event Event object
+ */
+
+/**
+ * @typedef {Object} __se__PluginKeyEventInfo
+ * @property {__se__FrameContext} frameContext Frame context
+ * @property {KeyboardEvent} event Event object
+ * @property {Range} range range object
+ * @property {HTMLElement} line Current line element
+ */
+
+/**
+ * @typedef {Object} __se__PluginToolbarInputChangeEventInfo
+ * @property {HTMLElement} target Input element
+ * @property {Event} event Event object
+ * @property {string} value Input value
+ */
+
+// --------------------------------------------------------- [Context] ---------------------------------------------------------------------------------------------------
+/**
+ * @typedef {Map<string, *>} __se__FrameOptions
+ */
+
+/**
+ * @typedef {Map<string, *>} __se__FrameContext
+ */
+
+/**
+ * @typedef {Map<string, *>} __se__Context
+ */

package/types/assets/icons/_default.d.ts

@@ -0,0 +1,152 @@
+declare namespace _default {
+	export let redo: string;
+	export let undo: string;
+	export let bold: string;
+	export let underline: string;
+	export let italic: string;
+	export let strike: string;
+	export let subscript: string;
+	export let superscript: string;
+	export let remove_color: string;
+	export let remove_format: string;
+	export let indent: string;
+	export let outdent: string;
+	export let expansion: string;
+	export let reduction: string;
+	export let code_view: string;
+	export let preview: string;
+	export let print: string;
+	export let template: string;
+	export let layout: string;
+	export let new_document: string;
+	export let select_all: string;
+	export let line_height: string;
+	export let paragraph_style: string;
+	export let text_style: string;
+	export let save: string;
+	export let blockquote: string;
+	export let arrow_down: string;
+	export let align_justify: string;
+	export let align_left: string;
+	export let align_right: string;
+	export let align_center: string;
+	export let align_top: string;
+	export let align_middle: string;
+	export let align_bottom: string;
+	export let format_float_none: string;
+	export let format_float_left: string;
+	export let format_float_right: string;
+	export let format_float_center: string;
+	export let font_color: string;
+	export let background_color: string;
+	export let list_bulleted: string;
+	export let list_numbered: string;
+	export let table: string;
+	export let table_header: string;
+	export let table_properties: string;
+	export let cell_properties: string;
+	export let table_column: string;
+	export let table_row: string;
+	export let color_checked: string;
+	export let color_palette: string;
+	export let border_all: string;
+	export let border_inside: string;
+	export let border_horizontal: string;
+	export let border_vertical: string;
+	export let border_outside: string;
+	export let border_left: string;
+	export let border_top: string;
+	export let border_right: string;
+	export let border_bottom: string;
+	export let border_none: string;
+	export let horizontal_line: string;
+	export let show_blocks: string;
+	export let cancel: string;
+	export let selection_remove: string;
+	export let image: string;
+	export let image_thumbnail: string;
+	export let video: string;
+	export let video_thumbnail: string;
+	export let link: string;
+	export let link_rel: string;
+	export let math: string;
+	export let unlink: string;
+	export let merge_cell: string;
+	export let split_cell: string;
+	export let caption: string;
+	export let edit: string;
+	let _delete: string;
+	export { _delete as delete };
+	export let revert: string;
+	export let auto_size: string;
+	export let resize: string;
+	export let insert_row_below: string;
+	export let insert_row_above: string;
+	export let insert_column_left: string;
+	export let insert_column_right: string;
+	export let delete_row: string;
+	export let delete_column: string;
+	export let fixed_column_width: string;
+	export let rotate_left: string;
+	export let rotate_right: string;
+	export let mirror_horizontal: string;
+	export let mirror_vertical: string;
+	export let checked: string;
+	export let line_break: string;
+	export let audio: string;
+	export let audio_thumbnail: string;
+	export let image_gallery: string;
+	export let audio_gallery: string;
+	export let video_gallery: string;
+	export let file_gallery: string;
+	export let file_browser: string;
+	export let bookmark: string;
+	export let bookmark_anchor: string;
+	export let download: string;
+	export let dir_ltr: string;
+	export let dir_rtl: string;
+	export let file_upload: string;
+	export let file_thumbnail: string;
+	export let file_plus: string;
+	export let upload_tray: string;
+	export let folder: string;
+	export let plus: string;
+	export let minus: string;
+	export let selection: string;
+	export let copy: string;
+	export let cut: string;
+	export let PDF: string;
+	export let format_paint: string;
+	export let find_replace: string;
+	export let drawing: string;
+	export let eraser: string;
+	export let search: string;
+	export let selection_search: string;
+	export let embed: string;
+	export let menu_arrow_down: string;
+	export let menu_arrow_up: string;
+	export let menu_arrow_right: string;
+	export let menu_arrow_left: string;
+	export let side_menu_hamburger: string;
+	export let side_menu_folder: string;
+	export let side_menu_folder_item: string;
+	export let side_menu_item: string;
+	export let side_menu_folder_plus: string;
+	export let alert_outline: string;
+	export let more_text: string;
+	export let more_paragraph: string;
+	export let more_plus: string;
+	export let more_horizontal: string;
+	export let more_vertical: string;
+	export let as_inline: string;
+	export let as_block: string;
+	export let page_break: string;
+	export let page_down: string;
+	export let page_up: string;
+	export let collapse_left: string;
+	export let collapse_right: string;
+	export let map: string;
+	export let magic_stick: string;
+	export let open_in_new: string;
+}
+export default _default;

package/types/core/base/eventHandlers/handler_toolbar.d.ts

@@ -0,0 +1,41 @@
+/**
+ * @typedef {Omit<import('../eventManager').default & Partial<__se__EditorInjector>, 'eventManager'>} EventManagerThis
+ */
+/**
+ * @private
+ * @this {EventManagerThis}
+ * @param {MouseEvent} e - Event object
+ */
+export function ButtonsHandler(this: Omit<import('../eventManager').default & Partial<import('../../../editorInjector').default>, 'eventManager'>, e: MouseEvent): void;
+export class ButtonsHandler {
+	/**
+	 * @typedef {Omit<import('../eventManager').default & Partial<__se__EditorInjector>, 'eventManager'>} EventManagerThis
+	 */
+	/**
+	 * @private
+	 * @this {EventManagerThis}
+	 * @param {MouseEvent} e - Event object
+	 */
+	private constructor();
+	_inputFocus: boolean;
+	__inputPlugin: {
+		obj: any;
+		target: HTMLInputElement;
+		value: string;
+	};
+	__inputBlurEvent: __se__EventInfo;
+	__inputKeyEvent: __se__EventInfo;
+}
+/**
+ * @private
+ * @this {EventManagerThis}
+ * @param {MouseEvent} e - Event object
+ */
+export function OnClick_menuTray(this: Omit<import('../eventManager').default & Partial<import('../../../editorInjector').default>, 'eventManager'>, e: MouseEvent): void;
+/**
+ * @private
+ * @this {EventManagerThis}
+ * @param {MouseEvent} e - Event object
+ */
+export function OnClick_toolbar(this: Omit<import('../eventManager').default & Partial<import('../../../editorInjector').default>, 'eventManager'>, e: MouseEvent): void;
+export type EventManagerThis = Omit<import('../eventManager').default & Partial<__se__EditorInjector>, 'eventManager'>;