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

package/src/plugins/popup/anchor.js

@@ -1,5 +1,5 @@
-import EditorInjector from '../../editorInjector';
-import { Controller } from '../../modules';
+import { PluginPopup } from '../../interfaces';
+import { Controller } from '../../modules/contract';
 import { dom, env } from '../../helper';
 
 const { _w } = env;
@@ -9,12 +9,11 @@ const { _w } = env;
  * @description Anchor plugin
  * - Allows you to create, edit, and delete elements that act as anchors (bookmarks) within a document.
  */
-class Anchor extends EditorInjector {
+class Anchor extends PluginPopup {
 	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.
 	 */
@@ -22,75 +21,76 @@ class Anchor extends EditorInjector {
 		return dom.check.isAnchor(node) && node.hasAttribute('id') && node.hasAttribute('data-se-anchor') ? node : null;
 	}
 
+	#element = null;
+	#range = null;
+
 	/**
 	 * @constructor
-	 * @param {__se__EditorCore} editor - The root editor instance
+	 * @param {SunEditor.Kernel} editor - The core kernel
 	 */
 	constructor(editor) {
 		super(editor);
 		// plugin basic properties
-		this.title = this.lang.anchor;
+		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');
+		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);
+		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);
+		this.controllerSelect = new Controller(this, this.$, controllerSelectEl, { position: 'bottom', disabled: true }, Anchor.key);
 
-		const controllerEl = CreateHTML_controller(this);
+		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);
+		this.controller = new Controller(this, 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.
+	 * @override
+	 * @type {PluginPopup['show']}
 	 */
 	show() {
-		this.controller.open((this._range = this.selection.getRange()));
+		this.controller.open((this.#range = this.$.selection.getRange()));
 		_w.setTimeout(() => {
 			this.inputEl.focus();
 		}, 0);
 	}
 
 	/**
-	 * @editorMethod Editor.component
-	 * @description Executes the method that is called when a component of a plugin is selected.
-	 * @param {HTMLElement} target Target component element
+	 * @hook Editor.Component
+	 * @type {SunEditor.Hook.Component.Select}
 	 */
-	select(target) {
-		this._element = target;
+	componentSelect(target) {
+		this.#element = target;
 		this.displayId.textContent = target.getAttribute('id');
 		this.controllerSelect.open(target);
 	}
 
 	/**
-	 * @editorMethod Editor.Component
-	 * @description Called when a container is deselected.
+	 * @hook Editor.Component
+	 * @type {SunEditor.Hook.Component.Deselect}
 	 */
-	deselect() {
-		this._init();
+	componentDeselect() {
+		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
+	 * @hook Modules.Controller
+	 * @type {SunEditor.Hook.Controller.Action}
 	 */
 	controllerAction(target) {
 		const command = target.getAttribute('data-command');
 		if (!command) return;
-		const currentElement = this._element;
+		const currentElement = this.#element;
 
 		switch (command) {
 			case 'submit': {
+				this.controller.close();
+
 				if (!currentElement) {
 					const id = this.inputEl.value.trim();
 					if (!id) {
@@ -103,35 +103,35 @@ class Anchor extends EditorInjector {
 						'data-se-anchor': this.inputEl.value,
 						'data-se-non-link': 'true',
 						contenteditable: 'false',
-						class: 'se-component se-inline-component'
+						class: 'se-component se-inline-component',
 					});
 
-					this.component.insert(a, { skipCharCount: false, skipSelection: true, skipHistory: false });
+					this.$.component.insert(a, { insertBehavior: 'none', scrollTo: false });
 
-					const r = this.selection.getNearRange(a);
+					const r = this.$.selection.getNearRange(a);
 					if (r) {
-						this.selection.setRange(r.container, r.offset, r.container, r.offset);
+						this.$.selection.setRange(r.container, r.offset, r.container, r.offset);
 					} else {
-						this.component.select(a, Anchor.key);
+						this.$.component.select(a, Anchor.key);
 					}
-					this._init();
+
+					this.#init();
 				} else {
-					this.controller.close();
 					currentElement.id = this.inputEl.value;
-					this.select(currentElement);
+					this.$.component.select(currentElement, Anchor.key);
 				}
 
 				break;
 			}
 			case 'cancel': {
 				this.controller.close(!currentElement);
-				if (this._range) {
-					this.selection.setRange(this._range);
+				if (this.#range) {
+					this.$.selection.setRange(this.#range);
 				}
 
-				this._init();
+				this.#init();
 				if (currentElement) {
-					this.select(currentElement);
+					this.componentSelect(currentElement);
 				}
 
 				break;
@@ -140,20 +140,21 @@ class Anchor extends EditorInjector {
 				this.inputEl.value = this.displayId.textContent;
 				this.controllerSelect.hide();
 				this.controller.open(currentElement);
+				this.inputEl.focus();
 
 				break;
 			}
 			case 'delete': {
-				const r = this.selection.getNearRange(currentElement);
+				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.$.selection.setRange(r.container, r.offset, r.container, r.offset);
 				}
 
-				this._init();
+				this.#init();
 
 				break;
 			}
@@ -161,18 +162,21 @@ class Anchor extends EditorInjector {
 	}
 
 	/**
-	 * @private
 	 * @description Initializes state variables.
 	 * - called when the popup is closed
 	 */
-	_init() {
-		this._element = null;
-		this._range = null;
+	#init() {
+		this.#element = null;
+		this.#range = null;
 		this.inputEl.value = '';
 		this.displayId.textContent = '';
 	}
 }
 
+/**
+ * @param {SunEditor.Deps} $ - Kernel dependencies
+ * @returns {HTMLElement}
+ */
 function CreateHTML_controller({ lang, icons }) {
 	const html = /*html*/ `
 		<div class="se-arrow se-arrow-up"></div>
@@ -195,6 +199,10 @@ function CreateHTML_controller({ lang, icons }) {
 	return dom.utils.createElement('DIV', { class: 'se-controller se-controller-simple-input' }, html);
 }
 
+/**
+ * @param {SunEditor.Deps} $ - Kernel dependencies
+ * @returns {HTMLElement}
+ */
 function CreateHTML_controller_select({ lang, icons }) {
 	const html = /*html*/ `
 	<div class="se-arrow se-arrow-up"></div>

package/src/suneditor.js

@@ -1,47 +1,28 @@
-import Editor from './core/editor';
-
-import EditorInjector from './editorInjector';
-import Plugins from './plugins';
-import Langs from './langs';
-import Modules from './modules';
-import Helper from './helper';
-
 /**
- * @module SunEditorExports
+ * @warning `suneditor.js`, `cdn-builder.js`, `format-index.cjs` must be modified together.
  */
 
-/**
- * @typedef {import('./core/section/constructor').EditorFrameOptions} EditorFrameOptions_suneditor
- */
-
-/**
- * @typedef {import('./core/section/constructor').EditorInitOptions} EditorInitOptions_suneditor
- */
-
-/**
- * Editor Injector module, Inject "editor" and basic frequently used objects by calling it with "call(this, editor)".
- */
-export { EditorInjector };
+import Editor from './core/editor';
 
-/**
- * Available editor plugins
- */
-export { Plugins };
+import plugins from './plugins';
+import * as moduleContract from './modules/contract';
+import * as moduleManager from './modules/manager';
+import * as moduleUI from './modules/ui';
+import helper from './helper';
+import * as interfaces from './interfaces';
 
-/**
- * Editor modules
- */
-export { Modules };
+import langs from './langs';
 
-/**
- * Language packs for the editor
- */
-export { Langs };
+const modules = {
+	contract: moduleContract,
+	manager: moduleManager,
+	ui: moduleUI,
+};
 
 /**
- * Helper functions for the editor
+ * @module SunEditorExports
  */
-export { Helper };
+export { plugins, modules, helper, langs, interfaces };
 
 /**
  * SunEditor Factory Object
@@ -50,47 +31,78 @@ export { Helper };
 export default {
 	/**
 	 * Returns the create function with preset options.
-	 * If the options overlap, the options of the 'create' function take precedence.
-	 * @param {EditorInitOptions_suneditor} init_options - Initialization options
-	 * @returns {{create: (targets: Element|Object<string, {target: Element, options: EditorFrameOptions_suneditor}>, options: EditorInitOptions_suneditor) => Editor}}}
+	 * If the options overlap, the options of the `create` function take precedence.
+	 * @example
+	 * // Preset common options, then create multiple editors
+	 * const preset = SUNEDITOR.init({
+	 *   plugins: [image, link],
+	 *   buttonList: [['bold', 'italic'], ['image', 'link']],
+	 * });
+	 * const editor1 = preset.create('#editor1', { height: '300px' });
+	 * const editor2 = preset.create('#editor2', { height: '500px' });
+	 * @param {SunEditor.InitOptions} init_options - Initialization options
+	 * @returns {{create: (targets: Element|Object<string, {target: Element, options: SunEditor.InitFrameOptions}>, options: SunEditor.InitOptions) => SunEditor.Instance}}}
 	 */
 	init(init_options) {
 		return {
-			create: (targets, options) => this.create(targets, options, init_options)
+			create: (targets, options) => this.create(targets, options, init_options),
 		};
 	},
 
 	/**
 	 * Creates a new instance of the SunEditor
-	 * @param {Element|Object<string, {target: Element, options: EditorFrameOptions_suneditor}>} target - Target element or multi-root object
-	 * @param {EditorInitOptions_suneditor} options - Initialization options
-	 * @param {EditorInitOptions_suneditor} [_init_options] - Optional preset initialization options
-	 * @returns {Editor} - Instance of the SunEditor
+	 * @example
+	 * // Create with a DOM element
+	 * const editor = SUNEDITOR.create(document.getElementById('editor'), {
+	 *   buttonList: [['bold', 'italic', 'underline']],
+	 * });
+	 *
+	 * // Create with a CSS selector
+	 * const editor = SUNEDITOR.create('#editor', { height: '400px' });
+	 *
+	 * // Create multi-root editor
+	 * const editor = SUNEDITOR.create({
+	 *   header: { target: document.getElementById('header') },
+	 *   body: { target: document.getElementById('body'), options: { height: '500px' } },
+	 * });
+	 * @param {Element|string|Object<string, {target: Element, options: SunEditor.InitFrameOptions}>} target
+	 * - `Element`: The direct DOM element to initialize the editor on.
+	 * - `string`: A CSS selector string. The corresponding element is selected using `document.querySelector`.
+	 * - `Object`: For multi-root setup. Each key maps to a config with `{target, options}`.
+	 * @param {SunEditor.InitOptions} options - Initialization options
+	 * @param {SunEditor.InitOptions} [_init_options] - Optional preset initialization options
+	 * @returns {SunEditor.Instance} - 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 = {};
+		if (typeof options !== 'object') options = /** @type {SunEditor.InitOptions} */ ({});
 		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;
-				}, {});
-			})();
+			options = /** @type {SunEditor.InitOptions} */ (
+				(() => {
+					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;
+					}, {});
+				})()
+			);
 		}
 
-		if (!target) throw Error("[SUNEDITOR.create.fail] suneditor requires textarea's element");
+		if (!target) throw Error('[SUNEDITOR.create.fail] The first parameter "target" is missing.');
 
 		const multiTargets = [];
-		if (target.nodeType === 1) {
+		if (typeof target === 'string') {
+			const t = document.querySelector(target);
+			if (!t) throw Error(`[SUNEDITOR.create.fail]-[document.querySelector(${target})] Cannot find target element. Make sure "${target}" is a valid selector and exists in the document.`);
+			multiTargets.push({ key: null, target: t });
+		} else if (target.nodeType === 1) {
 			multiTargets.push({ key: null, target: target });
 		} else {
 			let props;
@@ -103,5 +115,5 @@ export default {
 		}
 
 		return new Editor(multiTargets, options);
-	}
+	},
 };

package/src/themes/cobalt.css

@@ -0,0 +1,155 @@
+/** Theme color tokens used by suneditor.css and suneditor-contents.css. */
+/** [ assets/design/color.css ] */
+
+.sun-editor.se-theme-cobalt,
+.sun-editor-editable.se-theme-cobalt {
+	/** --------------------------- content - [colors] ----------- */
+	/* caret and placeholder */
+	--se-caret-color: #ccc;
+	--se-drag-caret-color: #18aa7a;
+	--se-placeholder-color: #64718c;
+
+	/* editable text tones */
+	--se-edit-font-color: #ccc;
+	--se-edit-font-pre: #aaa;
+	--se-edit-font-quote: #8899aa;
+
+	/* editable surfaces */
+	--se-edit-background-color: #0f1828;
+	--se-edit-background-pre: #364153;
+
+	/* content border scale */
+	--se-edit-border-light: #2a4a7a;
+	--se-edit-border-dark: #1e3a6a;
+	--se-edit-border-dark-n1: #244070;
+	--se-edit-border-dark-n2: #305088;
+	--se-edit-border-table: #4a5565;
+
+	/* links and horizontal rules */
+	--se-edit-anchor: #77aaff;
+	--se-edit-anchor-on-back: #004cff;
+	--se-edit-anchor-on-font: #e8f7ff;
+	--se-edit-hr-color: #556688;
+	--se-edit-hr-on-back: #77aaff;
+
+	/* content interaction states */
+	--se-edit-active: #77aaff;
+	--se-edit-hover: #5599ff;
+	--se-edit-outline: #444;
+
+	/** --------------------------- layout - [colors] ----------- */
+	/* main shell and typography */
+	--se-main-font-family: Helvetica Neue;
+	--se-main-out-color: #444;
+	--se-main-color: #ccc;
+	--se-main-color-lighter: #aaa;
+	--se-main-background-color: #0f1828;
+	--se-code-view-color: #030712;
+	--se-main-font-color: #ccc;
+	--se-code-view-background-color: #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;
+
+	/* hover states */
+	--se-hover-color: #0d200c;
+	--se-hover-dark-color: #8192a3;
+	--se-hover-dark2-color: #738495;
+	--se-hover-dark3-color: #667788;
+	--se-hover-light-color: #9ab0c5;
+	--se-hover-light2-color: #adc2d7;
+	--se-hover-light3-color: #c0d3e5;
+
+	/* active foreground states */
+	--se-active-color: #5cd2e6;
+	--se-active-hover-color: #6de9f5;
+	--se-active-dark-color: #3bb9cd;
+	--se-active-dark2-color: #2a9fb1;
+	--se-active-dark3-color: #5cd2e6;
+	--se-active-dark4-color: #3bb9cd;
+	--se-active-dark5-color: #197d91;
+
+	/* active background states */
+	--se-active-light-color: #17303a;
+	--se-active-light2-color: #1e3f4d;
+	--se-active-light3-color: #255e6f;
+	--se-active-light4-color: #2c7d91;
+	--se-active-light5-color: #33aacc;
+	--se-active-light6-color: #3bd1f2;
+
+	/* floating layer shadow */
+	--se-shadow-layer-color: rgba(0, 64, 128, 0.25);
+
+	/* drag feedback */
+	--se-drag-over-color: #ffcc00;
+
+	/* modal, browser, dropdown surfaces */
+	--se-modal-background-color: #1c202a;
+	--se-modal-color: #ececec;
+	--se-modal-border-color: #555;
+	--se-modal-anchor-color: #77aaff;
+	--se-modal-preview-color: #aaa;
+	--se-modal-file-input-background-color: #232837;
+	--se-modal-input-disabled-color: #666;
+	--se-modal-input-disabled-background-color: #333;
+
+	/* dropdown text */
+	--se-dropdown-font-color: #ccc;
+
+	/* media/controller chrome */
+	--se-controller-border-color: #555;
+	--se-controller-background-color: #091025;
+	--se-controller-color: #ececec;
+	--se-shadow-controller-color: rgba(80, 200, 255, 0.2);
+
+	/* input-side button states */
+	--se-input-btn-border-color: #444;
+	--se-input-btn-disabled-color: #666;
+
+	/* table picker */
+	--se-table-picker-color: #2a3040;
+	--se-table-picker-border-color: #4a5568;
+	--se-table-picker-highlight-color: #24384d;
+	--se-table-picker-highlight-border-color: #558a9c;
+
+	/* success status palette */
+	--se-success-color: #2cb67d;
+	--se-success-dark-color: #1f8f65;
+	--se-success-dark2-color: #186f4f;
+	--se-success-dark3-color: #125f44;
+	--se-success-light-color: #3dd9a5;
+	--se-success-light2-color: #57e2b7;
+	--se-success-light3-color: #8cf0ce;
+	--se-success-light4-color: #c1fae4;
+	--se-success-light5-color: #e9fef5;
+
+	/* error status palette */
+	--se-error-color: #ef4444;
+	--se-error-dark-color: #991b1b;
+	--se-error-dark2-color: #7f1d1d;
+	--se-error-dark3-color: #651616;
+	--se-error-light-color: #f87171;
+	--se-error-light2-color: #fca5a5;
+	--se-error-light3-color: #fecaca;
+	--se-error-light4-color: #fee2e2;
+	--se-error-light5-color: #fef2f2;
+
+	/* document mode palette */
+	--se-doc-background: #344153;
+	--se-doc-info-page-font-color: #0f1828;
+	--se-doc-info-page-background-color: #cfcfcf;
+	--se-doc-info-font-color: #cfcfcf;
+	--se-doc-info-active-color: #5599ff;
+
+	/* loading indicator */
+	--se-loading-color: #77aaff;
+
+	/* show-blocks debug colors */
+	--se-show-blocks-color: #5599ff;
+	--se-show-blocks-li-color: #d539ff;
+	--se-show-blocks-pre-color: #27c022;
+	--se-show-blocks-component-color: #f4b124;
+}