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

package/src/core/section/actives.js

@@ -1,266 +0,0 @@
-import { dom, env, keyCodeMap } from '../../helper';
-const { NO_EVENT } = env;
-
-/**
- * @constant {Object.<string, string[]>} StyleMap - Map of font styles to CSS properties.
- */
-const StyleMap = {
-	bold: ['font-weight'],
-	underline: ['text-decoration'],
-	italic: ['font-style'],
-	strike: ['text-decoration']
-};
-
-let __globalEventKeydown = null;
-let __globalEventMousedown = null;
-
-/**
- * @private
- * @this {__se__EditorCore}
- * @param {Node} ww Wywsiwyg element
- * @param {Node} button Button element
- */
-const __RemoveCopyformt = function (ww, button) {
-	__globalEventKeydown = this.eventManager.removeGlobalEvent('keydown', __globalEventKeydown);
-	__globalEventMousedown = this.eventManager.removeGlobalEvent('mousedown', __globalEventMousedown);
-	this._onCopyFormatInfo = null;
-	this._onCopyFormatInitMethod = null;
-	dom.utils.removeClass(ww, 'se-copy-format-cursor');
-	dom.utils.removeClass(button, 'on');
-
-	return true;
-};
-
-/**
- * @private
- * @description Finds the first and last child elements in a selection area.
- * @param {Element} selectArea Selection area element
- * @returns {{ first: Node, last: Node}} Object containing the first and last child elements
- */
-const __findFirstAndLast = function (selectArea) {
-	const isContentLess = dom.check.isContentLess;
-	const isTable = dom.check.isTable;
-	const first =
-		dom.query.getEdgeChild(
-			dom.query.getEdgeChild(selectArea, (current) => !isContentLess(current), false),
-			(current) => {
-				return current.childNodes.length === 0 || current.nodeType === 3 || isTable(current);
-			},
-			false
-		) || selectArea.firstChild;
-	const last =
-		dom.query.getEdgeChild(
-			selectArea.lastChild,
-			(current) => {
-				return current.childNodes.length === 0 || current.nodeType === 3 || isTable(current);
-			},
-			true
-		) || selectArea.lastChild;
-
-	return { first, last };
-};
-
-/**
- * @description List of commands that trigger active event handling in the editor.
- * - These commands typically apply inline formatting or structural changes.
- * @constant {string[]}
- */
-export const ACTIVE_EVENT_COMMANDS = ['bold', 'underline', 'italic', 'strike', 'subscript', 'superscript', 'indent', 'outdent'];
-
-/**
- * @description List of basic editor commands, including active event commands and additional actions
- * - such as undo, redo, saving, full-screen toggle, and text direction commands.
- * @constant {string[]}
- */
-export const BASIC_COMMANDS = ACTIVE_EVENT_COMMANDS.concat(['undo', 'redo', 'save', 'fullScreen', 'showBlocks', 'codeView', 'dir', 'dir_ltr', 'dir_rtl']);
-
-/**
- * @description Selects all content in the editor.
- * @param {__se__EditorCore} editor - The root editor instance
- */
-export function SELECT_ALL(editor) {
-	editor.ui._offCurrentController();
-	editor.menu.containerOff();
-
-	// check all tags
-	const ww = editor.frameContext.get('wysiwyg');
-	let prevScopeTag = null;
-	let prevScopeTagName = '';
-	const scopeSelectionTags = editor.options.get('scopeSelectionTags');
-	const range = editor.selection.getRange();
-	if (!range.collapsed) {
-		let commonNode = range.commonAncestorContainer;
-		let commonNodeName = commonNode.nodeName?.toLowerCase();
-
-		while (commonNode && ((!commonNode.nextSibling && !commonNode.previousSibling && !scopeSelectionTags.includes(commonNodeName)) || dom.check.isContentLess(commonNodeName)) && commonNode !== ww) {
-			commonNode = commonNode.parentElement;
-			commonNodeName = commonNode.nodeName?.toLowerCase();
-		}
-
-		if (scopeSelectionTags.includes(commonNodeName)) {
-			prevScopeTag = commonNode;
-			prevScopeTagName = commonNodeName;
-		}
-	}
-
-	// select all
-	const scopeTagList = scopeSelectionTags.filter((tagName) => tagName !== prevScopeTagName);
-	const scopeBaseTag = dom.query.getParentElement(prevScopeTag || editor.selection.getNode(), (current) => scopeTagList.includes(current.nodeName?.toLowerCase()));
-
-	let selectArea = scopeBaseTag || ww;
-	let { first, last } = __findFirstAndLast(selectArea);
-
-	if (!first || !last) return;
-
-	const isZeroWidth = dom.check.isZeroWidth;
-	while (isZeroWidth(first) && isZeroWidth(last) && selectArea !== ww) {
-		selectArea = selectArea.parentElement;
-		({ first, last } = __findFirstAndLast(dom.query.getParentElement(selectArea, (current) => scopeTagList.includes(current.nodeName?.toLowerCase())) || ww));
-	}
-
-	if (!first || !last) return;
-
-	let info = null;
-	if (dom.check.isMedia(first) || (info = editor.component.get(first.parentElement)) || dom.check.isTableElements(first)) {
-		const br = dom.utils.createElement('BR');
-		const format = dom.utils.createElement(editor.options.get('defaultLine'), null, br);
-		first = info ? info.container || info.cover : first;
-		first.parentElement.insertBefore(format, first);
-		first = br;
-	}
-
-	if (dom.check.isMedia(last) || (info = editor.component.get(last.parentElement)) || dom.check.isTableElements(last)) {
-		const br = dom.utils.createElement('BR');
-		const format = dom.utils.createElement(editor.options.get('defaultLine'), null, br);
-		last = info ? info.container || info.cover : last;
-		last.parentElement.appendChild(format);
-		last = br;
-	}
-
-	editor.toolbar._showBalloon(editor.selection.setRange(first, 0, last, last.textContent.length));
-}
-
-/**
- * @description Toggles direction button active state.
- * @param {__se__EditorCore} editor - The root editor instance
- * @param {boolean} rtl - Whether the text direction is right-to-left.
- */
-export function DIR_BTN_ACTIVE(editor, rtl) {
-	const icons = editor.icons;
-	const commandTargets = editor.commandTargets;
-	const shortcutsKeyMap = editor.shortcutsKeyMap;
-
-	// change reverse shortcuts key
-	editor.reverseKeys.forEach((e) => {
-		const info = shortcutsKeyMap.get(e);
-		if (!info) return;
-		const temp = info.c;
-		info.c = info.r;
-		info.r = temp;
-	});
-
-	// change dir buttons
-	editor.applyCommandTargets('dir', (e) => {
-		dom.utils.changeTxt(e.querySelector('.se-tooltip-text'), editor.lang[rtl ? 'dir_ltr' : 'dir_rtl']);
-		dom.utils.changeElement(e.firstElementChild, icons[rtl ? 'dir_ltr' : 'dir_rtl']);
-	});
-
-	if (rtl) {
-		dom.utils.addClass(commandTargets.get('dir_rtl'), 'active');
-		dom.utils.removeClass(commandTargets.get('dir_ltr'), 'active');
-	} else {
-		dom.utils.addClass(commandTargets.get('dir_ltr'), 'active');
-		dom.utils.removeClass(commandTargets.get('dir_rtl'), 'active');
-	}
-}
-
-/**
- * @description Saves the editor content.
- * @param {__se__EditorCore} editor - The root editor instance
- * @returns {Promise<void>}
- */
-export async function SAVE(editor) {
-	const fc = editor.frameContext;
-	if (!fc.get('isChanged')) return;
-
-	const data = editor.html.get();
-	const saved = await editor.triggerEvent('onSave', { frameContext: fc, data });
-	if (saved === NO_EVENT) {
-		const origin = fc.get('originElement');
-		if (/^TEXTAREA$/i.test(origin.nodeName)) {
-			origin.value = data;
-		} else {
-			origin.innerHTML = data;
-		}
-	} else if (saved === false) {
-		return;
-	}
-
-	fc.set('isChanged', false);
-	fc.set('savedIndex', editor.history.getRootStack()[editor.status.rootKey].index);
-
-	// set save button disable
-	editor.applyCommandTargets('save', (e) => {
-		e.disabled = true;
-	});
-}
-
-/**
- * @description Copies formatting from selected text.
- * @param {__se__EditorCore} editor - The root editor instance
- * @param {Node} button - The button triggering the copy format function.
- */
-export function COPY_FORMAT(editor, button) {
-	if (typeof editor._onCopyFormatInitMethod === 'function') {
-		editor._onCopyFormatInitMethod();
-		return;
-	}
-
-	const ww = editor.frameContext.get('wysiwyg');
-	editor._onCopyFormatInfo = [...editor.eventManager.__cacheStyleNodes];
-	editor._onCopyFormatInitMethod = __RemoveCopyformt.bind(editor, ww, button);
-	dom.utils.addClass(ww, 'se-copy-format-cursor');
-	dom.utils.addClass(button, 'on');
-
-	__globalEventKeydown = editor.eventManager.addGlobalEvent('keydown', (e) => {
-		if (!keyCodeMap.isEsc(e.code)) return;
-		editor._onCopyFormatInitMethod?.();
-	});
-	__globalEventMousedown = editor.eventManager.addGlobalEvent('mousedown', (e) => {
-		if (ww.contains(e.target) || e.target === button) return;
-		editor._onCopyFormatInitMethod?.();
-	});
-}
-
-/**
- * @description Applies font styling to selected text.
- * @param {__se__EditorCore} editor - The root editor instance
- * @param {string} command - The font style command (e.g., bold, italic, underline).
- */
-export function FONT_STYLE(editor, command) {
-	command = editor.options.get('_defaultTagCommand')[command.toLowerCase()] || command;
-	let nodeName = editor.options.get('convertTextTags')[command] || command;
-	const nodesMap = editor.status.currentNodesMap;
-	const el = nodesMap.includes(editor.options.get('_styleCommandMap')[nodeName]) ? null : dom.utils.createElement(nodeName);
-
-	if (/^sub$/i.test(nodeName) && nodesMap.includes('superscript')) {
-		nodeName = 'sup';
-	} else if (/^sup$/i.test(nodeName) && nodesMap.includes('subscript')) {
-		nodeName = 'sub';
-	}
-
-	editor.format.applyInlineElement(el, { stylesToModify: StyleMap[command] || null, nodesToRemove: [nodeName], strictRemove: false });
-	editor.focus();
-}
-
-/**
- * @description Inserts a page break element into the editor.
- * @param {__se__EditorCore} editor - The root editor instance
- */
-export function PAGE_BREAK(editor) {
-	const pageBreak = dom.utils.createElement('DIV', { class: 'se-component se-component-line-break se-page-break' });
-	editor.component.insert(pageBreak, { skipCharCount: true, skipSelection: true, skipHistory: false });
-	const line = pageBreak.nextElementSibling || editor.format.addLine(pageBreak);
-	editor.selection.setRange(line, 1, line, 1);
-	editor.history.push(false);
-}

package/src/core/section/context.js

@@ -1,102 +0,0 @@
-import { get as getNumber } from '../../helper/numbers';
-
-/**
- * @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, top, wwFrame, codeWrapper, codeFrame, statusbar, documentTypeInner, key) {
-	const m = new Map([
-		['key', key],
-		['options', editorTarget.options],
-		['originElement', editorTarget.target],
-		['topArea', top],
-		['container', top.querySelector('.se-container')],
-		['wrapper', top.querySelector('.se-wrapper')],
-		['documentTypeInner', documentTypeInner.inner],
-		['documentTypePage', documentTypeInner.page],
-		['documentTypePageMirror', documentTypeInner.pageMirror],
-		['wysiwygFrame', wwFrame],
-		['wysiwyg', wwFrame], // options.iframe ? wwFrame.contentDocument.body : wwFrame
-		['codeWrapper', codeWrapper],
-		['code', codeFrame],
-		['codeNumbers', /** @type {HTMLTextAreaElement} */ (codeWrapper?.querySelector('.se-code-view-line'))],
-		['lineBreaker_t', top.querySelector('.se-line-breaker-component-t')],
-		['lineBreaker_b', top.querySelector('.se-line-breaker-component-b')],
-		['_stickyDummy', top.querySelector('.se-toolbar-sticky-dummy')],
-		['_toolbarShadow', top.querySelector('.se-toolbar-shadow')],
-		['_minHeight', getNumber(wwFrame.style.minHeight || '65', 0)],
-		['isCodeView', false],
-		['isFullScreen', false],
-		['isReadOnly', false],
-		['isDisabled', false],
-		['isChanged', -1],
-		['historyIndex', -1],
-		['savedIndex', -1],
-		['eventwysiwyg', null]
-	]);
-
-	if (statusbar) UpdateStatusbarContext(statusbar, m);
-
-	const placeholder = top.querySelector('.se-placeholder');
-	if (placeholder) m.set('placeholder', placeholder);
-
-	return m;
-}
-
-/**
- * @description Update statusbar context
- * @param {HTMLElement} statusbar Statusbar element
- * @param {__se__FrameContext} mapper FrameContext map
- */
-export function UpdateStatusbarContext(statusbar, mapper) {
-	statusbar ? mapper.set('statusbar', statusbar) : mapper.delete('statusbar');
-	const navigation = statusbar ? statusbar.querySelector('.se-navigation') : null;
-	const charWrapper = statusbar ? statusbar.querySelector('.se-char-counter-wrapper') : null;
-	const charCounter = statusbar ? statusbar.querySelector('.se-char-counter-wrapper .se-char-counter') : null;
-	navigation ? mapper.set('navigation', navigation) : mapper.delete('navigation');
-	charWrapper ? mapper.set('charWrapper', charWrapper) : mapper.delete('charWrapper');
-	charCounter ? mapper.set('charCounter', charCounter) : mapper.delete('charCounter');
-}
-
-/**
- * @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, toolbarContainer, menuTray, subbar, statusbarContainer) {
-	const m = new Map([
-		['menuTray', menuTray],
-		['toolbar.main', toolbar],
-		['toolbar.buttonTray', toolbar.querySelector('.se-btn-tray')],
-		['toolbar._arrow', toolbar.querySelector('.se-arrow')]
-	]);
-
-	if (subbar) {
-		m.set('toolbar.sub.main', subbar);
-		m.set('toolbar.sub.buttonTray', subbar.querySelector('.se-btn-tray'));
-		m.set('toolbar.sub._arrow', subbar.querySelector('.se-arrow'));
-		m.set('toolbar.sub._wrapper', subbar.parentElement.parentElement);
-	}
-
-	if (toolbarContainer) {
-		m.set('toolbar._wrapper', toolbarContainer.querySelector('.sun-editor'));
-		m.set('_stickyDummy', toolbarContainer.querySelector('.se-toolbar-sticky-dummy'));
-	}
-
-	if (statusbarContainer) {
-		m.set('statusbar._wrapper', statusbarContainer.querySelector('.sun-editor'));
-	}
-
-	return m;
-}

package/src/editorInjector/_classes.js

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

package/src/editorInjector/_core.js

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

package/src/editorInjector/index.js

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