suneditor 3.0.0-rc.5 → 3.0.0

package/src/core/section/constructor.js

@@ -115,6 +115,9 @@ function Constructor(editorTargets, options) {
 		toolbar.style.width = o.get('toolbar_width');
 		toolbar.appendChild(dom.utils.createElement('DIV', { class: 'se-arrow' }));
 	}
+	if (o.get('_toolbar_bottom')) {
+		toolbar.className += ' se-toolbar-bottom';
+	}
 
 	/** --- subToolbar --------------------------------------------------------------- */
 	if (optionMap.subButtons) {
@@ -180,20 +183,36 @@ function Constructor(editorTargets, options) {
 		// root key
 		const key = editTarget.key || null;
 
-		// code view - wrapper
-		const codeWrapper = dom.utils.createElement('DIV', { class: 'se-code-wrapper' }, textarea);
-		codeWrapper.style.setProperty('display', 'none', 'important');
-		editor_div.appendChild(codeWrapper);
-
-		// check code mirror
-		const codeMirrorEl = _checkCodeMirror(o, to, textarea);
-		// not used code mirror
-		if (textarea === codeMirrorEl) {
-			// add line nubers
-			const codeNumbers = dom.utils.createElement('TEXTAREA', { class: 'se-code-view-line', readonly: 'true' }, null);
-			codeWrapper.insertBefore(codeNumbers, textarea);
-		} else {
-			textarea = codeMirrorEl;
+		// code view - wrapper (only created when codeView button exists)
+		let codeWrapper = null;
+		if (o.get('buttons').has('codeView')) {
+			codeWrapper = dom.utils.createElement('DIV', { class: 'se-code-wrapper' }, textarea);
+			codeWrapper.style.setProperty('display', 'none', 'important');
+			editor_div.appendChild(codeWrapper);
+
+			// check code mirror
+			const codeMirrorEl = _checkCodeMirror(o, to, textarea);
+			// not used code mirror
+			if (textarea === codeMirrorEl) {
+				// add line nubers
+				const codeNumbers = dom.utils.createElement('TEXTAREA', { class: 'se-code-view-line', readonly: 'true' }, null);
+				codeWrapper.insertBefore(codeNumbers, textarea);
+			} else {
+				textarea = codeMirrorEl;
+			}
+		}
+
+		// markdown view - wrapper (only created when markdownView button exists)
+		let markdownWrapper = null;
+		let markdownTextarea = null;
+		if (o.get('buttons').has('markdownView')) {
+			markdownTextarea = initElements.markdownView;
+			const markdownNumbers = dom.utils.createElement('TEXTAREA', { class: 'se-markdown-view-line', readonly: 'true' }, null);
+			markdownWrapper = dom.utils.createElement('DIV', { class: 'se-markdown-wrapper' });
+			markdownWrapper.appendChild(markdownNumbers);
+			markdownWrapper.appendChild(markdownTextarea);
+			markdownWrapper.style.setProperty('display', 'none', 'important');
+			editor_div.appendChild(markdownWrapper);
 		}
 
 		// document type
@@ -216,7 +235,10 @@ function Constructor(editorTargets, options) {
 		// set container
 		top_div.appendChild(container);
 		rootKeys.push(key);
-		frameRoots.set(key, CreateFrameContext({ target: editTarget.target, key: editTarget.key, options: to }, top_div, wysiwyg_div, codeWrapper, textarea, default_status_bar || statusbar, documentTypeInner, key));
+		frameRoots.set(
+			key,
+			CreateFrameContext({ target: editTarget.target, key: editTarget.key, options: to }, top_div, wysiwyg_div, codeWrapper, textarea, markdownWrapper, markdownTextarea, default_status_bar || statusbar, documentTypeInner, key),
+		);
 	}
 	/** frame - root set - end -------------------------------------------------------------- */
 
@@ -232,8 +254,14 @@ function Constructor(editorTargets, options) {
 		toolbar_container.appendChild(dom.utils.createElement('DIV', { class: 'se-toolbar-sticky-dummy' }));
 	} else {
 		const rootContainer = frameRoots.get(rootId).get('container');
-		rootContainer.insertBefore(toolbar, rootContainer.firstElementChild);
-		if (subbar) rootContainer.insertBefore(subbar, rootContainer.firstElementChild);
+		if (o.get('_toolbar_bottom')) {
+			const statusbar = rootContainer.querySelector('.se-statusbar');
+			rootContainer.insertBefore(toolbar, statusbar);
+			if (subbar) rootContainer.insertBefore(subbar, toolbar);
+		} else {
+			rootContainer.insertBefore(toolbar, rootContainer.firstElementChild);
+			if (subbar) rootContainer.insertBefore(subbar, rootContainer.firstElementChild);
+		}
 	}
 
 	return {
@@ -395,9 +423,13 @@ export function InitOptions(options, editorTargets, plugins) {
 		...(typeof options.strictMode === 'boolean' ? {} : options.strictMode),
 	});
 	o.set('freeCodeViewMode', !!options.freeCodeViewMode);
+	o.set('finder_panel', options.finder_panel !== false);
+	o.set('finder_liveSearch', options.finder_liveSearch !== false);
 	o.set('__lineFormatFilter', options.__lineFormatFilter ?? true);
 	o.set('__pluginRetainFilter', options.__pluginRetainFilter ?? true);
-	o.set('mode', options.mode || 'classic'); // classic, inline, balloon, balloon-always
+	const [modeBase, modePart] = (options.mode || 'classic').split(':');
+	o.set('mode', modeBase); // classic, inline, balloon, balloon-always
+	o.set('_toolbar_bottom', modePart === 'bottom' && /^(classic|inline)$/i.test(modeBase));
 	o.set('type', options.type?.split(':')[0] || ''); // document:header,page
 	o.set('theme', options.theme || '');
 	o.set('_themeClass', options.theme ? ` se-theme-${options.theme}` : '');
@@ -506,6 +538,7 @@ export function InitOptions(options, editorTargets, plugins) {
 
 	// etc
 	o.set('historyStackDelayTime', typeof options.historyStackDelayTime === 'number' ? options.historyStackDelayTime : 400);
+	o.set('historyStackSize', typeof options.historyStackSize === 'number' && options.historyStackSize > 0 ? options.historyStackSize : 100);
 	o.set('_editableClass', 'sun-editor-editable' + o.get('_themeClass') + (o.get('_rtl') ? ' se-rtl' : '') + (o.get('type') === 'document' ? ' se-type-document-editable-a4' : ''));
 	o.set('lineAttrReset', ['id'].concat(options.lineAttrReset && typeof options.lineAttrReset === 'string' ? options.lineAttrReset.toLowerCase().split('|') : []));
 	o.set('printClass', typeof options.printClass === 'string' ? options.printClass + ' ' + o.get('_editableClass') : null);
@@ -624,6 +657,7 @@ export function InitOptions(options, editorTargets, plugins) {
 					indent: ['c+BracketRight', ']'],
 					outdent: ['c+BracketLeft', '['],
 					save: ['c+KeyS', 'S'],
+					...(o.get('finder_panel') ? { finder: ['c+KeyF', 'F'] } : {}),
 					// plugins
 					link: ['c+KeyK', 'K'],
 					hr: ['!+---+=+~shortcut', ''],
@@ -844,7 +878,7 @@ function InitFrameOptions(o, origin) {
  * @param {Map<string, *>} options - Options
  * @param {HTMLElement} topDiv - Top div
  * @param {SunEditor.FrameOptions} targetOptions - `editor.frameOptions`
- * @returns {{bottomBar: ReturnType<CreateStatusbar>, wysiwygFrame: HTMLElement, codeView: HTMLElement, placeholder: HTMLElement}}
+ * @returns {{bottomBar: ReturnType<CreateStatusbar>, wysiwygFrame: HTMLElement, codeView: HTMLElement, markdownView: HTMLElement, placeholder: HTMLElement}}
  */
 function _initTargetElements(key, options, topDiv, targetOptions) {
 	const editorStyles = targetOptions.get('_defaultStyles');
@@ -900,6 +934,10 @@ function _initTargetElements(key, options, topDiv, targetOptions) {
 
 	// textarea for code view
 	const textarea = dom.utils.createElement('TEXTAREA', { class: 'se-wrapper-inner se-code-viewer', style: editorStyles.frame });
+
+	// textarea for markdown view
+	const markdownTextarea = dom.utils.createElement('TEXTAREA', { class: 'se-wrapper-inner se-markdown-viewer', style: editorStyles.frame });
+
 	const placeholder = dom.utils.createElement('SPAN', { class: 'se-placeholder' });
 	if (targetOptions.get('placeholder')) {
 		placeholder.textContent = targetOptions.get('placeholder');
@@ -909,6 +947,7 @@ function _initTargetElements(key, options, topDiv, targetOptions) {
 		bottomBar: CreateStatusbar(targetOptions, null),
 		wysiwygFrame: wysiwygDiv,
 		codeView: textarea,
+		markdownView: markdownTextarea,
 		placeholder: placeholder,
 	};
 }
@@ -929,7 +968,7 @@ function _checkCodeMirror(options, targetOptions, textarea) {
 				mode: 'htmlmixed',
 				htmlMode: true,
 				lineNumbers: true,
-				lineWrapping: true,
+				lineWrapping: false,
 			},
 			codeMirror.options || {},
 		].reduce((init, option) => {
@@ -1038,6 +1077,7 @@ function _defaultButtons(isRTL, icons, lang) {
 		fullScreen: ['se-code-view-enabled se-component-enabled', lang.fullScreen, 'fullScreen', '', icons.expansion],
 		showBlocks: ['', lang.showBlocks, 'showBlocks', '', icons.show_blocks],
 		codeView: ['se-code-view-enabled se-component-enabled', lang.codeView, 'codeView', '', icons.code_view],
+		markdownView: ['se-code-view-enabled se-component-enabled', lang.markdownView, 'markdownView', '', icons.markdown_view],
 		undo: ['se-component-enabled', lang.undo, 'undo', '', icons.undo],
 		redo: ['se-component-enabled', lang.redo, 'redo', '', icons.redo],
 		preview: ['se-component-enabled', lang.preview, 'preview', '', icons.preview],
@@ -1046,6 +1086,7 @@ function _defaultButtons(isRTL, icons, lang) {
 		dir: ['', lang[isRTL ? 'dir_ltr' : 'dir_rtl'], 'dir', '', icons[isRTL ? 'dir_ltr' : 'dir_rtl']],
 		dir_ltr: ['', lang.dir_ltr, 'dir_ltr', '', icons.dir_ltr],
 		dir_rtl: ['', lang.dir_rtl, 'dir_rtl', '', icons.dir_rtl],
+		finder: ['se-component-enabled', lang.find, 'finder', '', icons.finder],
 		save: ['se-component-enabled', lang.save, 'save', '', icons.save],
 		newDocument: ['se-component-enabled', lang.newDocument, 'newDocument', '', icons.new_document],
 		selectAll: ['se-component-enabled', lang.selectAll, 'selectAll', '', icons.select_all],

package/src/core/section/documentType.js

@@ -489,7 +489,7 @@ class DocumentType {
 				if (!force) this.#selection.setRange(c, 0, c, 0);
 				const scrollTop = i === 0 && isScrollable ? 0 : c.offsetTop - this.#page.offsetTop - c.offsetHeight + globalTop;
 				this._applyPageScroll(scrollTop, () => {
-					if (this.#toolbar.isSticky) {
+					if (this.#toolbar.isSticky && !this.#store.mode.isBottom) {
 						this._getDisplayPage().scrollTo({ top: scrollTop - this.#context.get('toolbar_main').offsetHeight, behavior: 'smooth' });
 					}
 				});

package/src/events.js

@@ -312,6 +312,17 @@ function onBeforeShowController(params) {}
  */
 function onToggleCodeView(params) {}
 
+/**
+ * @callback
+ * @description Fired when the editor switches between WYSIWYG view and markdown view.
+ * The `is` parameter indicates whether markdown view is now active (`true`) or WYSIWYG view is active (`false`).
+ * @param {Object} params
+ * @param {SunEditor.Deps} params.$ - Kernel dependencies
+ * @param {SunEditor.FrameContext} params.frameContext - frame context
+ * @param {boolean} params.is - markdown view status
+ */
+function onToggleMarkdownView(params) {}
+
 /**
  * @callback
  * @description Fired when the editor enters or exits fullscreen mode.
@@ -859,6 +870,7 @@ function onEmbedDeleteBefore(params) {
  * @property {?onShowController} [onShowController]
  * @property {?onBeforeShowController} [onBeforeShowController]
  * @property {?onToggleCodeView} [onToggleCodeView]
+ * @property {?onToggleMarkdownView} [onToggleMarkdownView]
  * @property {?onToggleFullScreen} [onToggleFullScreen]
  * @property {?onResizeEditor} [onResizeEditor]
  * @property {?onSetToolbarButtons} [onSetToolbarButtons]

package/src/helper/clipboard.js

@@ -43,7 +43,7 @@ export async function write(content) {
 
 	try {
 		await navigator.clipboard.write([
-			/* eslint-disable-next-line compat/compat */
+			// eslint-disable-next-line compat/compat
 			new ClipboardItem({
 				'text/html': new Blob([htmlString], { type: 'text/html' }),
 				'text/plain': new Blob([plainText], { type: 'text/plain' }),

package/src/helper/dom/domUtils.js

@@ -368,7 +368,8 @@ export function setDisabled(buttonList, disabled, important) {
  */
 export function hasClass(element, className) {
 	if (!element || element.nodeType !== 1) return;
-	return /** @type {HTMLElement} */ (element).classList.contains(className);
+
+	return className.split('|').some((cls) => /** @type {HTMLElement} */ (element).classList.contains(cls));
 }
 
 /**
@@ -420,25 +421,15 @@ export function removeClass(element, className) {
  * @description Argument value If there is no class name, insert it and delete the class name if it exists
  * @param {Node} element Element to replace class name
  * @param {string} className Class name to be change
- * @returns {boolean|undefined}
+ * @param {boolean} [force] If true, adds the class; if false, removes it.
  */
-export function toggleClass(element, className) {
+export function toggleClass(element, className, force) {
 	if (!element || element.nodeType !== 1) return;
 
 	const el = /** @type {HTMLElement} */ (element);
-
-	let result = false;
-	const valid = new RegExp(`(\\s|^)${className}(\\s|$)`);
-	if (valid.test(el.className)) {
-		el.className = el.className.replace(valid, ' ').trim();
-	} else {
-		el.className += ' ' + className;
-		result = true;
-	}
+	el.classList.toggle(className, force);
 
 	if (!el.className.trim()) el.removeAttribute('class');
-
-	return result;
 }
 
 /**

package/src/helper/index.js

@@ -5,6 +5,7 @@ import Dom from './dom';
 import Numbers from './numbers';
 import KeyCodeMap from './keyCodeMap';
 import Clipboard from './clipboard';
+import Markdown from './markdown';
 
 export const env = Env;
 export const unicode = Unicode;
@@ -13,6 +14,7 @@ export const dom = Dom;
 export const numbers = Numbers;
 export const keyCodeMap = KeyCodeMap;
 export const clipboard = Clipboard;
+export const markdown = Markdown;
 
 export default {
 	env,
@@ -22,4 +24,5 @@ export default {
 	numbers,
 	keyCodeMap,
 	clipboard,
+	markdown,
 };