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

package/types/core/section/context.d.ts

@@ -0,0 +1,45 @@
+/**
+ * @description Elements and variables you should have
+ * @param {{target: Element, key: *, options: __se__FrameOptions}} editorTarget Target textarea
+ * @param {HTMLElement} top Editor top area
+ * @param {HTMLElement} wwFrame Editor wysiwyg frame
+ * @param {HTMLElement} codeWrapper Editor code view wrapper
+ * @param {HTMLElement} codeFrame Editor code view frame
+ * @param {{inner: HTMLElement, page: HTMLElement, pageMirror: HTMLElement}} documentTypeInner Document type elements
+ * @param {?HTMLElement} statusbar Editor statusbar
+ * @param {*} key root key
+ * @returns {__se__FrameContext}
+ */
+export function CreateFrameContext(
+	editorTarget: {
+		target: Element;
+		key: any;
+		options: __se__FrameOptions;
+	},
+	top: HTMLElement,
+	wwFrame: HTMLElement,
+	codeWrapper: HTMLElement,
+	codeFrame: HTMLElement,
+	statusbar: HTMLElement | null,
+	documentTypeInner: {
+		inner: HTMLElement;
+		page: HTMLElement;
+		pageMirror: HTMLElement;
+	},
+	key: any
+): __se__FrameContext;
+/**
+ * @description Update statusbar context
+ * @param {HTMLElement} statusbar Statusbar element
+ * @param {__se__FrameContext} mapper FrameContext map
+ */
+export function UpdateStatusbarContext(statusbar: HTMLElement, mapper: __se__FrameContext): void;
+/**
+ * @description Common elements and variables you should have
+ * @param {HTMLElement} toolbar Toolbar frame
+ * @param {HTMLElement|null} toolbarContainer Toolbar container
+ * @param {HTMLElement} menuTray menu tray
+ * @param {HTMLElement|null} subbar sub toolbar
+ * @returns {__se__Context}
+ */
+export function CreateContext(toolbar: HTMLElement, toolbarContainer: HTMLElement | null, menuTray: HTMLElement, subbar: HTMLElement | null, statusbarContainer: any): __se__Context;

package/types/core/section/documentType.d.ts

@@ -0,0 +1,178 @@
+export default DocumentType;
+/**
+ * @constructor
+ * @description DocumentType, page, header management class
+ * @param {__se__EditorCore} editor - The root editor instance
+ * @param {__se__FrameContext} fc - frame context object
+ */
+declare function DocumentType(editor: __se__EditorCore, fc: __se__FrameContext): void;
+declare class DocumentType {
+	/**
+	 * @constructor
+	 * @description DocumentType, page, header management class
+	 * @param {__se__EditorCore} editor - The root editor instance
+	 * @param {__se__FrameContext} fc - frame context object
+	 */
+	constructor(editor: __se__EditorCore, fc: __se__FrameContext);
+	editor: import('../editor').default;
+	context: __se__Context;
+	selection: import('../class/selection').default;
+	offset: import('../class/offset').default;
+	fc: __se__FrameContext;
+	ww: any;
+	wwFrame: any;
+	wwWidth: number;
+	wwHeight: number;
+	isAutoHeight: boolean;
+	displayPage: any;
+	innerHeaders: any;
+	_wwHeaders: any[];
+	documentTypeInner: any;
+	inner: any;
+	page: any;
+	totalPages: number;
+	pageNum: number;
+	pageHeight: number;
+	pageBreaksCnt: number;
+	pages: any[];
+	pages_line: any[];
+	prevScrollTop: number;
+	useHeader: any;
+	usePage: any;
+	navigatorButtons: any[];
+	pageNavigator: any;
+	_mirror: any;
+	_mirrorCache: number;
+	_positionCache: Map<any, any>;
+	_rePageTimeout: NodeJS.Timeout;
+	_paddingTop: number;
+	_paddingBottom: number;
+	/**
+	 * @description Refresh the document header area
+	 */
+	reHeader(): void;
+	/**
+	 * @description Refresh the document page
+	 * @param {boolean} force - Whether to force the page to be re-rendered
+	 * @returns {Promise<void>}
+	 */
+	rePage(force: boolean): Promise<void>;
+	/**
+	 * @private
+	 * @description Initializes the cache for document elements.
+	 * @param {Array<HTMLElement>} mChr - List of mirrored elements.
+	 */
+	_initializeCache(mChr: Array<HTMLElement>): void;
+	/**
+	 * @private
+	 * @description Retrieves the element at a given position.
+	 * @param {number} pageTop - The vertical position to check.
+	 * @param {NodeList} mChr - List of mirrored elements.
+	 * @returns {{ci: number, cm: number, ch: number}} The closest element and its related data.
+	 * - ci: The index of the closest element.
+	 * - cm: The distance between the top of the closest element and the given position.
+	 * - ch: The height of the closest element.
+	 */
+	_getElementAtPosition(
+		pageTop: number,
+		mChr: NodeList
+	): {
+		ci: number;
+		cm: number;
+		ch: number;
+	};
+	/**
+	 * @description Resizes the document page dynamically.
+	 */
+	resizePage(): void;
+	/**
+	 * @description Scrolls the document page.
+	 */
+	scrollPage(): void;
+	/**
+	 * @description Scrolls the window to a specific position.
+	 */
+	scrollWindow(): void;
+	/**
+	 * @description Retrieves the current page number.
+	 * @returns {number} The current page number.
+	 */
+	getCurrentPageNumber(): number;
+	/**
+	 * @description Moves to the previous page.
+	 */
+	pageUp(): void;
+	/**
+	 * @description Moves to the next page.
+	 */
+	pageDown(): void;
+	/**
+	 * @description Moves to a specific page.
+	 * @param {number} pageNum - The target page number.
+	 */
+	pageGo(pageNum: number): void;
+	/**
+	 * @description Highlights the header of the current line.
+	 * @param {Node} line - The "line" element to be highlighted.
+	 */
+	on(line: Node): void;
+	/**
+	 * @description Handles text changes in the document.
+	 */
+	onChangeText(header: any): void;
+	/**
+	 * @private
+	 * @description Displays the current page number.
+	 */
+	_displayCurrentPage(): void;
+	/**
+	 * @private
+	 * @description Retrieves the scroll position in WYSIWYG mode.
+	 * @returns {number} The current scroll position.
+	 */
+	_getWWScrollTop(): number;
+	/**
+	 * @private
+	 * @description Moves to a specific page and updates the view.
+	 * @param {number} pageNum - The target page number.
+	 */
+	_movePage(pageNum: number, force: any): void;
+	/**
+	 * @private
+	 * @description Applies smooth scrolling for page navigation.
+	 */
+	_applyPageScroll(top: any, callback: any): void;
+	/**
+	 * @private
+	 * @description Retrieves the global top offset of an element.
+	 * @returns {number} The top offset of the element.
+	 */
+	_getGlobalTop(): number;
+	/**
+	 * @private
+	 * @description Finds an header element of innerHeaders element.
+	 * @param {Node} header - H tag element to find.
+	 * @returns {HTMLElement|null} The found element, or null if not found.
+	 */
+	_findItem(header: Node): HTMLElement | null;
+	/**
+	 * @private
+	 * @description Finds the closest header element from a given line.
+	 * @param {Node} line - The "line" to check.
+	 * @returns {Node|null} The closest header element, or null if not found.
+	 */
+	_findLinesHeader(line: Node): Node | null;
+	/**
+	 * @private
+	 * @description Checks if an element is a header.
+	 * @param {Node} element - The element to check.
+	 * @returns {boolean} True if the element is a header, otherwise false.
+	 */
+	_is(element: Node): boolean;
+	/**
+	 * @private
+	 * @description Retrieves all headers in the document.
+	 * @returns {Array<HTMLElement>} An array of header elements.
+	 */
+	_getHeaders(): Array<HTMLElement>;
+}

package/types/editorInjector/_classes.d.ts

@@ -0,0 +1,41 @@
+export default ClassInjector;
+/**
+ * @private
+ * @description Add all inner classes to the editor instance.
+ * @param {__se__EditorCore} editor - The root editor instance
+ */
+declare function ClassInjector(editor: __se__EditorCore): void;
+declare class ClassInjector {
+	/**
+	 * @private
+	 * @description Add all inner classes to the editor instance.
+	 * @param {__se__EditorCore} editor - The root editor instance
+	 */
+	private constructor();
+	/** @description Toolbar class instance @type {__se__EditorCore['toolbar']} */
+	toolbar: __se__EditorCore['toolbar'];
+	/** @description Sub-Toolbar class instance @type {__se__EditorCore['subToolbar']|null} */
+	subToolbar: __se__EditorCore['subToolbar'] | null;
+	/** @description Char class instance @type {__se__EditorCore['char']} */
+	char: __se__EditorCore['char'];
+	/** @description Component class instance @type {__se__EditorCore['component']} */
+	component: __se__EditorCore['component'];
+	/** @description Format class instance @type {__se__EditorCore['format']} */
+	format: __se__EditorCore['format'];
+	/** @description HTML class instance @type {__se__EditorCore['html']} */
+	html: __se__EditorCore['html'];
+	/** @description Menu class instance @type {__se__EditorCore['menu']} */
+	menu: __se__EditorCore['menu'];
+	/** @description NodeTransform class instance @type {__se__EditorCore['nodeTransform']} */
+	nodeTransform: __se__EditorCore['nodeTransform'];
+	/** @description Offset class instance @type {__se__EditorCore['offset']} */
+	offset: __se__EditorCore['offset'];
+	/** @description Selection class instance @type {__se__EditorCore['selection']} */
+	selection: __se__EditorCore['selection'];
+	/** @description Shortcuts class instance @type {__se__EditorCore['shortcuts']} */
+	shortcuts: __se__EditorCore['shortcuts'];
+	/** @description UI class instance @type {__se__EditorCore['ui']} */
+	ui: __se__EditorCore['ui'];
+	/** @description Viewer class instance @type {__se__EditorCore['viewer']} */
+	viewer: __se__EditorCore['viewer'];
+}

package/types/editorInjector/_core.d.ts

@@ -0,0 +1,92 @@
+/**
+ * @description Add default properties to the editor core object.
+ * @param {__se__EditorCore} editor - The root editor instance
+ */
+export default function CoreInjector(editor: __se__EditorCore): void;
+export default class CoreInjector {
+	/**
+	 * @description Add default properties to the editor core object.
+	 * @param {__se__EditorCore} editor - The root editor instance
+	 */
+	constructor(editor: __se__EditorCore);
+	/**
+	 * @description The root editor instance.
+	 * @type {__se__EditorCore}
+	 */
+	editor: __se__EditorCore;
+	/**
+	 * @description The event manager instance.
+	 * @type {import('../core/base/eventManager').default}
+	 */
+	eventManager: import('../core/base/eventManager').default;
+	/**
+	 * @description The history manager instance.
+	 * @type {__se__EditorCore['history']}
+	 */
+	history: __se__EditorCore['history'];
+	/**
+	 * @description The events instance.
+	 * @type {__se__EditorCore['events']}
+	 */
+	events: __se__EditorCore['events'];
+	/**
+	 * @description The function to trigger an event.
+	 * @type {__se__EditorCore['triggerEvent']}
+	 */
+	triggerEvent: __se__EditorCore['triggerEvent'];
+	/**
+	 * @description The wrapper element for carrying elements.
+	 * @type {__se__EditorCore['carrierWrapper']}
+	 */
+	carrierWrapper: __se__EditorCore['carrierWrapper'];
+	/**
+	 * @description The plugins used by the editor.
+	 * @type {__se__EditorCore['plugins']}
+	 */
+	plugins: __se__EditorCore['plugins'];
+	/**
+	 * @description The status of the editor.
+	 * @type {__se__EditorStatus}
+	 */
+	status: __se__EditorStatus;
+	/**
+	 * @description The editor's context map.
+	 * @type {__se__EditorCore['context']}
+	 */
+	context: __se__EditorCore['context'];
+	/**
+	 * @description The editor's options map.
+	 * @type {__se__EditorCore['options']}
+	 */
+	options: __se__EditorCore['options'];
+	/**
+	 * @description The editor's icons.
+	 * @type {__se__EditorCore['icons']}
+	 */
+	icons: __se__EditorCore['icons'];
+	/**
+	 * @description The language settings.
+	 * @type {__se__EditorCore['lang']}
+	 */
+	lang: __se__EditorCore['lang'];
+	/**
+	 * @description editor.frameRoots map.
+	 * @type {__se__EditorCore['frameRoots']}
+	 */
+	frameRoots: __se__EditorCore['frameRoots'];
+	/**
+	 * @description The window object.
+	 * @type {Window}
+	 */
+	_w: Window;
+	/**
+	 * @description The document object.
+	 * @type {Document}
+	 */
+	_d: Document;
+	/**
+	 * @description The shadow root object (if any).
+	 * @type {__se__EditorCore['_shadowRoot']}
+	 */
+	_shadowRoot: __se__EditorCore['_shadowRoot'];
+}

package/types/editorInjector/index.d.ts

@@ -0,0 +1,71 @@
+export default EditorInjector;
+/**
+ * @description Initializes and adds inner classes and default properties of the editor.
+ * @param {__se__EditorCore} editor - The root editor instance
+ */
+declare function EditorInjector(editor: __se__EditorCore): void;
+declare class EditorInjector {
+	/**
+	 * @description Initializes and adds inner classes and default properties of the editor.
+	 * @param {__se__EditorCore} editor - The root editor instance
+	 */
+	constructor(editor: __se__EditorCore);
+	/** @type {__se__EditorCore} */
+	editor: __se__EditorCore;
+	/** @type {import('./_core').default['eventManager']} */
+	eventManager: import('./_core').default['eventManager'];
+	/** @type {import('./_core').default['history']} */
+	history: import('./_core').default['history'];
+	/** @type {import('./_core').default['events']} */
+	events: import('./_core').default['events'];
+	/** @type {import('./_core').default['triggerEvent']} */
+	triggerEvent: import('./_core').default['triggerEvent'];
+	/** @type {import('./_core').default['carrierWrapper']} */
+	carrierWrapper: import('./_core').default['carrierWrapper'];
+	/** @type {import('./_core').default['plugins']} */
+	plugins: import('./_core').default['plugins'];
+	/** @type {import('./_core').default['status']} */
+	status: import('./_core').default['status'];
+	/** @type {import('./_core').default['context']} */
+	context: import('./_core').default['context'];
+	/** @type {import('./_core').default['options']} */
+	options: import('./_core').default['options'];
+	/** @type {import('./_core').default['icons']} */
+	icons: import('./_core').default['icons'];
+	/** @type {import('./_core').default['lang']} */
+	lang: import('./_core').default['lang'];
+	/** @type {import('./_core').default['frameRoots']} */
+	frameRoots: import('./_core').default['frameRoots'];
+	/** @type {import('./_core').default['_w']} */
+	_w: import('./_core').default['_w'];
+	/** @type {import('./_core').default['_d']} */
+	_d: import('./_core').default['_d'];
+	/** @type {import('./_core').default['_shadowRoot']} */
+	_shadowRoot: import('./_core').default['_shadowRoot'];
+	/** @type {import('./_classes').default['toolbar']} */
+	toolbar: import('./_classes').default['toolbar'];
+	/** @type {import('./_classes').default['subToolbar']} */
+	subToolbar: import('./_classes').default['subToolbar'];
+	/** @type {import('./_classes').default['char']} */
+	char: import('./_classes').default['char'];
+	/** @type {import('./_classes').default['component']} */
+	component: import('./_classes').default['component'];
+	/** @type {import('./_classes').default['format']} */
+	format: import('./_classes').default['format'];
+	/** @type {import('./_classes').default['html']} */
+	html: import('./_classes').default['html'];
+	/** @type {import('./_classes').default['menu']} */
+	menu: import('./_classes').default['menu'];
+	/** @type {import('./_classes').default['nodeTransform']} */
+	nodeTransform: import('./_classes').default['nodeTransform'];
+	/** @type {import('./_classes').default['offset']} */
+	offset: import('./_classes').default['offset'];
+	/** @type {import('./_classes').default['selection']} */
+	selection: import('./_classes').default['selection'];
+	/** @type {import('./_classes').default['shortcuts']} */
+	shortcuts: import('./_classes').default['shortcuts'];
+	/** @type {import('./_classes').default['ui']} */
+	ui: import('./_classes').default['ui'];
+	/** @type {import('./_classes').default['viewer']} */
+	viewer: import('./_classes').default['viewer'];
+}

package/types/helper/converter.d.ts

@@ -0,0 +1,150 @@
+/**
+ * @description Convert HTML string to HTML Entity
+ * @param {string} content
+ * @returns {string} Content string
+ * @private
+ */
+export function htmlToEntity(content: string): string;
+/**
+ * @description Convert HTML Entity to HTML string
+ * @param {string} content Content string
+ * @returns {string}
+ */
+export function entityToHTML(content: string): string;
+/**
+ * @description Debounce function
+ * @param {(...args: *) => void} func function
+ * @param {number} wait delay ms
+ * @returns {*} executedFunction
+ */
+export function debounce(func: (...args: any) => void, wait: number): any;
+/**
+ * @description Synchronizes two Map objects by updating the first Map with the values from the second,
+ * - and deleting any keys in the first Map that are not present in the second.
+ * @param {Map<*, *>} targetMap The Map to update (target).
+ * @param {Map<*, *>} referenceMap The Map providing the reference values (source).
+ */
+export function syncMaps(targetMap: Map<any, any>, referenceMap: Map<any, any>): void;
+/**
+ *
+ * @param {"em"|"rem"|"%"|"pt"|"px"} to Size units to be converted
+ * @param {string} size siSize to convert with units (ex: "15rem")
+ * @returns {string}
+ */
+export function fontSize(to: 'em' | 'rem' | '%' | 'pt' | 'px', size: string): string;
+/**
+ * @description Convert the node list to an array. If not, returns an empty array.
+ * @param {?__se__NodeCollection} nodeList
+ * @returns Array
+ */
+export function nodeListToArray(nodeList: __se__NodeCollection | null): any;
+/**
+ * @description Returns a new object with keys and values swapped.
+ * @param {Object<*, *>} obj object
+ * @returns {Object<*, *>}
+ */
+export function swapKeyValue(obj: any): any;
+/**
+ * @description Create whitelist RegExp object.
+ * @param {string} list Tags list ("br|p|div|pre...")
+ * @returns {RegExp} Return RegExp format: new RegExp("<\\/?\\b(?!" + list + ")\\b[^>^<]*+>", "gi")
+ */
+export function createElementWhitelist(list: string): RegExp;
+/**
+ * @description Create blacklist RegExp object.
+ * @param {string} list Tags list ("br|p|div|pre...")
+ * @returns {RegExp} Return RegExp format: new RegExp("<\\/?\\b(?:" + list + ")\\b[^>^<]*+>", "gi")
+ */
+export function createElementBlacklist(list: string): RegExp;
+/**
+ * @description Function to check hex format color
+ * @param {string} str Color value
+ */
+export function isHexColor(str: string): boolean;
+/**
+ * @description Function to convert hex format to a rgb color
+ * @param {string} rgba RGBA color format
+ * @returns {string}
+ */
+export function rgb2hex(rgba: string): string;
+/**
+ * @description Computes the width as a percentage of the parent's width, and returns this value rounded to two decimal places.
+ * @param {HTMLElement} target The target element for which to calculate the width percentage.
+ * @param {?HTMLElement=} parentTarget The parent element to use as the reference for the width calculation. If not provided, the target's parent element is used.
+ * @returns {number}
+ */
+export function getWidthInPercentage(target: HTMLElement, parentTarget?: (HTMLElement | null) | undefined): number;
+/**
+ * @description Convert url pattern text node to anchor node
+ * @param {Node} node Text node
+ * @returns {boolean} Return true if the text node is converted to an anchor node
+ */
+export function textToAnchor(node: Node): boolean;
+/**
+ * Converts styles within a <span> tag to corresponding HTML tags (e.g., <strong>, <em>, <u>, <s>).
+ * Maintains the original <span> tag and wraps its content with the new tags.
+ * @param {{ regex: RegExp, tag: string }} styleToTag An object mapping style properties to HTML tags. ex) {bold: { regex: /font-weight\s*:\s*bold/i, tag: 'strong' },}
+ * @param {Node} node Node
+ */
+export function spanToStyleNode(
+	styleToTag: {
+		regex: RegExp;
+		tag: string;
+	},
+	node: Node
+): void;
+/**
+ * Adds a query string to a URL. If the URL already contains a query string, the new query is appended to the existing one.
+ * @param {string} url The original URL to which the query string will be added.
+ * @param {string} query The query string to be added to the URL.
+ * @returns {string} The updated URL with the query string appended.
+ */
+export function addUrlQuery(url: string, query: string): string;
+/**
+ * @description Converts options-related styles and returns them for each frame.
+ * @param {Map<string, *>} fo editor.frameOptions
+ * @param {string} cssText Style string
+ * @returns {{top: string, frame: string, editor: string}}
+ * @private
+ */
+export function _setDefaultOptionStyle(
+	fo: Map<string, any>,
+	cssText: string
+): {
+	top: string;
+	frame: string;
+	editor: string;
+};
+/**
+ * @description Set default style tag of the iframe
+ * @param {Array<string>} linkNames link names array of CSS files
+ * @returns {string} "<link rel="stylesheet" href=".." />.."
+ */
+export function _setIframeStyleLinks(linkNames: Array<string>): string;
+/**
+ * @description When iframe height options is "auto" return "<style>" tag that required.
+ * @param {string} frameHeight height
+ * @returns {string} "<style>...</style>"
+ */
+export function _setAutoHeightStyle(frameHeight: string): string;
+export default converter;
+declare namespace converter {
+	export { htmlToEntity };
+	export { entityToHTML };
+	export { debounce };
+	export { syncMaps };
+	export { fontSize };
+	export { nodeListToArray };
+	export { swapKeyValue };
+	export { createElementWhitelist };
+	export { createElementBlacklist };
+	export { isHexColor };
+	export { rgb2hex };
+	export { getWidthInPercentage };
+	export { textToAnchor };
+	export { spanToStyleNode };
+	export { addUrlQuery };
+	export { _setDefaultOptionStyle };
+	export { _setIframeStyleLinks };
+	export { _setAutoHeightStyle };
+}