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

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 Editor.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);
+					}
+					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,53 @@ 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_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 {
 	/**
-	 * @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_suneditor} init_options - Initialization options
+	 * @returns {{create: (targets: Element|Object<string, {target: Element, options: EditorFrameOptions_suneditor}>, options: EditorInitOptions_suneditor) => Editor}}}
 	 */
 	init(init_options) {
 		return {
@@ -26,10 +61,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_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 = {};
@@ -54,7 +91,7 @@ export default {
 
 		const multiTargets = [];
 		if (target.nodeType === 1) {
-			multiTargets.push({ target: target });
+			multiTargets.push({ key: null, target: target });
 		} else {
 			let props;
 			for (const key in target) {

package/src/themes/dark.css

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

package/src/typedef.js

@@ -0,0 +1,130 @@
+/**
+ * @fileoverview Global Type Declarations for SunEditor Custom Types
+ */
+
+// --------------------------------------------------------- [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__ComponentInfo
+ * @property {HTMLElement} target - The target element associated with the component.
+ * @property {string} pluginName - The name of the plugin related to the component.
+ * @property {Object<string, *>} options - Options related to the component.
+ * @property {HTMLElement} container - The main container element for the component.
+ * @property {?HTMLElement} cover - The cover element, if applicable.
+ * @property {?HTMLElement} inlineCover - The inline cover element, if applicable.
+ * @property {?HTMLElement} caption - The caption element, if applicable.
+ * @property {boolean} isFile - Whether the component is a file-related component.
+ * @property {?HTMLElement} launcher - The element that triggered the component, if applicable.
+ * @property {boolean} isInputType - Whether the component is an input component (e.g., table).
+ */
+
+/**
+ * @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
+ */
+
+/**
+ * @typedef {Object} __se__PluginShortcutInfo Information of the "shortcut" plugin
+ * @property {Range} range - Range object
+ * @property {HTMLElement} line - The line element of the current range
+ * @property {import('./core/class/shortcuts').ShortcutInfo} info - Information of the shortcut
+ * @property {KeyboardEvent} event - Key event object
+ * @property {string} keyCode - KeyBoardEvent.code
+ * @property {__se__EditorCore} editor - The root editor instance
+ */
+
+/**
+ * @typedef {Object} __se__PluginPasteParams
+ * @property {__se__FrameContext} frameContext Frame context
+ * @property {ClipboardEvent} event Clipboard event object
+ * @property {string} data Format cleaned paste data (HTML string)
+ * @property {Document} doc DomParser data (new DOMParser().parseFromString(data, 'text/html');)
+ */
+
+/**
+ * @typedef {Object} __se__PluginCopyComponentParams
+ * @property {ClipboardEvent} event Clipboard event object
+ * @property {HTMLElement} cloneContainer Cloned component container
+ * @property {__se__ComponentInfo} info Component information
+ */
+
+// --------------------------------------------------------- [Context] ---------------------------------------------------------------------------------------------------
+/**
+ * @typedef {Map<string, *>} __se__FrameOptions
+ */
+
+/**
+ * @typedef {Map<string, *>} __se__FrameContext
+ */
+
+/**
+ * @typedef {Map<string, *>} __se__Context
+ */
+
+// --------------------------------------------------------- [core.class] ---------------------------------------------------------------------------------------------------
+/**
+ * @typedef {import('./core/class/offset').OffsetGlobalInfo} __se__Class_OffsetGlobalInfo
+ */