suneditor 3.0.0-beta.2 → 3.0.0-beta.20

package/src/suneditor.js

@@ -1,107 +1,114 @@
-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
- */
-
-/**
- * @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 };
-
-/**
- * Available editor plugins
- */
-export { Plugins };
-
-/**
- * Editor modules
- */
-export { Modules };
-
-/**
- * Language packs for the editor
- */
-export { Langs };
-
-/**
- * Helper functions for the editor
- */
-export { Helper };
-
-/**
- * SunEditor Factory Object
- * @namespace SunEditor
- */
-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}}}
-	 */
-	init(init_options) {
-		return {
-			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
-	 * @throws {Error} If the target element is not provided or is invalid
-	 */
-	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;
-				}, {});
-			})();
-		}
-
-		if (!target) throw Error("[SUNEDITOR.create.fail] suneditor requires textarea's element");
-
-		const multiTargets = [];
-		if (target.nodeType === 1) {
-			multiTargets.push({ key: null, 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 new Editor(multiTargets, options);
-	}
-};
+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
+ */
+
+/**
+ * @typedef {import('./core/section/options').EditorFrameOptions} EditorFrameOptions_suneditor
+ */
+
+/**
+ * @typedef {import('./core/section/options').EditorInitOptions} EditorInitOptions_suneditor
+ */
+
+/**
+ * Editor Injector module, Inject "editor" and basic frequently used objects by calling it with "call(this, editor)".
+ */
+export { editorInjector };
+
+/**
+ * Available editor plugins
+ */
+export { plugins };
+
+/**
+ * Editor modules
+ */
+export { modules };
+
+/**
+ * Language packs for the editor
+ */
+export { langs };
+
+/**
+ * Helper functions for the editor
+ */
+export { helper };
+
+/**
+ * SunEditor Factory Object
+ * @namespace SunEditor
+ */
+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}}}
+	 */
+	init(init_options) {
+		return {
+			create: (targets, options) => this.create(targets, options, init_options)
+		};
+	},
+
+	/**
+	 * Creates a new instance of the SunEditor
+	 * @param {Element|string|Object<string, {target: Element, options: EditorFrameOptions_suneditor}>} 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 {EditorInitOptions_suneditor} options - Initialization options
+	 * @param {EditorInitOptions_suneditor} [_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 = {};
+		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;
+				}, {});
+			})();
+		}
+
+		if (!target) throw Error('[SUNEDITOR.create.fail] The first parameter "target" is missing.');
+
+		const multiTargets = [];
+		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;
+			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 new Editor(multiTargets, options);
+	}
+};

package/src/themes/dark.css

@@ -1,122 +1,132 @@
-.sun-editor.se-theme-dark,
-.sun-editor-editable.se-theme-dark {
-	/** --------------------------- content - [colors] ----------- */
-	--se-caret-color: #ccc;
-	--se-placeholder-color: #64718c;
-	--se-edit-font-color: #ccc;
-	--se-edit-font-pre: #aaa;
-	--se-edit-font-quote: #888;
-	--se-edit-background-color: #0f1828;
-	--se-edit-background-pre: #364153;
-	--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: #77aaff;
-	--se-edit-active: #77aaff;
-	--se-edit-hover: #5599ff;
-	--se-edit-outline: #444;
-
-	/** --------------------------- layout - [colors] ----------- */
-	/** main, common */
-	--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, active */
-	--se-active-color: #5cd2e6;
-	--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;
-	--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;
-
-	/* [toolbar, menu, modal] layer - shadow */
-	--se-shadow-layer-color: rgba(0, 64, 128, 0.25);
-
-	/* drag */
-	--se-drag-over-color: #ffcc00;
-
-	/* modal, browser, dropdown */
-	--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, selectMenu */
-	--se-dropdown-font-color: #ccc;
-
-	/* controller */
-	--se-controller-border-color: #555;
-	--se-controller-background-color: #091025;
-	--se-controller-color: #ececec;
-	--se-shadow-controller-color: rgba(80, 200, 255, 0.2);
-
-	/* button : input-side */
-	--se-input-btn-border-color: #444;
-	--se-input-btn-disabled-color: #666;
-
-	/* success */
-	--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 */
-	--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 type */
-	--se-doc-background: #344153;
-	--se-doc-info-page-font-color: #0f1828;
-	--se-doc-info-page-background-color: #cfcfcf;
-	/* document type - font, active */
-	--se-doc-info-font-color: #cfcfcf;
-	--se-doc-info-active-color: #5599ff;
-
-	/* loading */
-	--se-loading-color: #77aaff;
-
-	/* show blocks */
-	--se-show-blocks-color: #5599ff;
-	--se-show-blocks-li-color: #d539ff;
-	--se-show-blocks-pre-color: #27c022;
-	--se-show-blocks-component-color: #f4b124;
-}
+.sun-editor.se-theme-dark,
+.sun-editor-editable.se-theme-dark {
+	/** --------------------------- content - [colors] ----------- */
+	--se-caret-color: #ccc;
+	--se-placeholder-color: #64718c;
+	--se-edit-font-color: #ccc;
+	--se-edit-font-pre: #aaa;
+	--se-edit-font-quote: #888;
+	--se-edit-background-color: #0f1828;
+	--se-edit-background-pre: #364153;
+	--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: #77aaff;
+	--se-edit-active: #77aaff;
+	--se-edit-hover: #5599ff;
+	--se-edit-outline: #444;
+
+	/** --------------------------- layout - [colors] ----------- */
+	/** main, common */
+	--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 */
+	--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 */
+	--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;
+	--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;
+
+	/* [toolbar, menu, modal] layer - shadow */
+	--se-shadow-layer-color: rgba(0, 64, 128, 0.25);
+
+	/* drag */
+	--se-drag-over-color: #ffcc00;
+
+	/* modal, browser, dropdown */
+	--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, selectMenu */
+	--se-dropdown-font-color: #ccc;
+
+	/* controller */
+	--se-controller-border-color: #555;
+	--se-controller-background-color: #091025;
+	--se-controller-color: #ececec;
+	--se-shadow-controller-color: rgba(80, 200, 255, 0.2);
+
+	/* button : input-side */
+	--se-input-btn-border-color: #444;
+	--se-input-btn-disabled-color: #666;
+
+	/* success */
+	--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 */
+	--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 type */
+	--se-doc-background: #344153;
+	--se-doc-info-page-font-color: #0f1828;
+	--se-doc-info-page-background-color: #cfcfcf;
+	/* document type - font, active */
+	--se-doc-info-font-color: #cfcfcf;
+	--se-doc-info-active-color: #5599ff;
+
+	/* loading */
+	--se-loading-color: #77aaff;
+
+	/* show blocks */
+	--se-show-blocks-color: #5599ff;
+	--se-show-blocks-li-color: #d539ff;
+	--se-show-blocks-pre-color: #27c022;
+	--se-show-blocks-component-color: #f4b124;
+}