suneditor 3.0.0-rc.5 → 3.0.0

package/src/core/logic/panel/menu.js

@@ -18,6 +18,8 @@ class Menu {
 	#bindClose_dropdown_mouse = null;
 	#bindClose_dropdown_key = null;
 	#bindClose_cons_mouse = null;
+	#bindMenu_mousemove = null;
+	#bindMenu_mouseout = null;
 	#menuBtn = null;
 	#menuContainer = null;
 
@@ -114,8 +116,8 @@ class Menu {
 			this.menus = converter.nodeListToArray(menu.querySelectorAll('[data-command]'));
 			if (this.menus.length > 0) {
 				this.#bindClose_dropdown_key = this.#eventManager.addGlobalEvent('keydown', this.#globalEventHandler.keydown, false);
-				menu.addEventListener('mousemove', this.#globalEventHandler.mousemove, false);
-				menu.addEventListener('mouseout', this.#globalEventHandler.mouseout, false);
+				this.#bindMenu_mousemove = this.#eventManager.addEvent(menu, 'mousemove', this.#globalEventHandler.mousemove, false);
+				this.#bindMenu_mouseout = this.#eventManager.addEvent(menu, 'mouseout', this.#globalEventHandler.mouseout, false);
 			}
 		}
 
@@ -220,7 +222,7 @@ class Menu {
 	 * @param {HTMLElement} menu Menu element
 	 */
 	__resetMenuPosition(element, menu) {
-		this.#$.offset.setRelPosition(menu, this.#contextProvider.carrierWrapper, element.parentElement, dom.query.getParentElement(element, '.se-toolbar'));
+		this.#$.offset.setRelPosition(menu, this.#contextProvider.carrierWrapper, element.parentElement, dom.query.getParentElement(element, '.se-toolbar'), { preferUp: this.#store.mode.isBottom });
 	}
 
 	/**
@@ -243,7 +245,7 @@ class Menu {
 		menu.style.height = '';
 		dom.utils.addClass(element.parentElement.children, 'on');
 
-		this.#$.offset.setRelPosition(menu, this.#contextProvider.carrierWrapper, element.parentElement, dom.query.getParentElement(element, '.se-toolbar'));
+		this.#$.offset.setRelPosition(menu, this.#contextProvider.carrierWrapper, element.parentElement, dom.query.getParentElement(element, '.se-toolbar'), { preferUp: this.#store.mode.isBottom });
 
 		menu.style.visibility = '';
 
@@ -293,10 +295,10 @@ class Menu {
 		this.#bindClose_cons_mouse &&= this.#eventManager.removeGlobalEvent(this.#bindClose_cons_mouse);
 		if (this.#bindClose_dropdown_key) {
 			this.#bindClose_dropdown_key = this.#eventManager.removeGlobalEvent(this.#bindClose_dropdown_key);
+			this.#bindMenu_mousemove &&= this.#eventManager.removeEvent(this.#bindMenu_mousemove);
+			this.#bindMenu_mouseout &&= this.#eventManager.removeEvent(this.#bindMenu_mouseout);
 			dom.utils.removeClass(this.menus, 'on');
 			dom.utils.removeClass(this.currentDropdown, 'se-select-menu-key-action|se-select-menu-mouse-move');
-			this.currentDropdown.removeEventListener('mousemove', this.#globalEventHandler.mousemove, false);
-			this.currentDropdown.removeEventListener('mouseout', this.#globalEventHandler.mouseout, false);
 		}
 	}
 

package/src/core/logic/panel/toolbar.js

@@ -26,6 +26,9 @@ class Toolbar {
 	#rButtonsInfo = null;
 	#rButtonsize = null;
 
+	#useCSSSticky = false;
+	#_isStickyFlag = false;
+
 	/**
 	 * @constructor
 	 * @param {SunEditor.Kernel} kernel
@@ -65,7 +68,6 @@ class Toolbar {
 		};
 
 		this.currentMoreLayerActiveButton = null;
-		this.isSticky = false;
 		this.isBalloonMode = balloon;
 		this.isInlineMode = inline;
 		this.isBalloonAlwaysMode = balloonAlways;
@@ -84,9 +86,63 @@ class Toolbar {
 		this.#rButtonArray = res;
 		this.#isViewPortSize = 'visualViewport' in _w;
 
+		// CSS sticky: non-balloon, non-inline, non-container, sticky enabled
+		const isStickyPosible = !this.isSub && !balloon && !inline;
+		const stickyTop = this.#options.get('toolbar_sticky');
+
+		this.#useCSSSticky = isStickyPosible && stickyTop >= 0 && !this.#options.get('toolbar_container') && typeof CSS !== 'undefined' && CSS.supports('position', 'sticky');
+
+		this.isBottomMode = this.#store.mode.isBottom;
+
+		if (this.#useCSSSticky) {
+			// CSS sticky: browser handles positioning natively
+			const toolbar = this.#context.get(this.keyName.main);
+			if (this.isBottomMode) {
+				toolbar.style.bottom = stickyTop + 'px';
+				toolbar.style.top = 'auto';
+			} else if (stickyTop > 0) {
+				toolbar.style.top = stickyTop + 'px';
+			}
+		} else if (isStickyPosible) {
+			// JS fallback (toolbar_container) or sticky disabled (-1):
+			dom.utils.addClass(this.#context.get(this.keyName.main), 'se-toolbar-relative');
+		}
+
 		this._setResponsive();
 	}
 
+	/**
+	 * @description Whether the toolbar is currently in a sticky (fixed) state.
+	 * For CSS sticky mode, computed from the element's viewport position.
+	 * For JS sticky mode (toolbar_container), uses a manual flag.
+	 * @type {boolean}
+	 */
+	get isSticky() {
+		if (this.isSub) return false;
+		const stickyTop = this.#options.get('toolbar_sticky');
+		if (stickyTop < 0) return false;
+
+		if (this.#useCSSSticky) {
+			const toolbar = this.#context.get(this.keyName.main);
+			if (!toolbar || toolbar.offsetWidth === 0 || toolbar.style.display === 'none') return false;
+			if (this.isBottomMode) {
+				return toolbar.getBoundingClientRect().bottom >= _w.innerHeight - stickyTop - 1;
+			}
+			return toolbar.getBoundingClientRect().top <= stickyTop + 1;
+		}
+
+		return this.#_isStickyFlag;
+	}
+
+	/**
+	 * @description Whether the toolbar uses native CSS `position: sticky`.
+	 * - When `false`, the JS-based sticky fallback (`position: fixed`) is active.
+	 * @type {boolean}
+	 */
+	get isCSSSticky() {
+		return this.#useCSSSticky;
+	}
+
 	/**
 	 * @description Disables all toolbar buttons.
 	 */
@@ -198,6 +254,8 @@ class Toolbar {
 	 * @description Reset the sticky toolbar position based on the editor state.
 	 */
 	_resetSticky() {
+		if (this.#useCSSSticky) return;
+
 		const wrapper = this.#frameContext.get('wrapper');
 		if (!wrapper) return;
 
@@ -210,18 +268,36 @@ class Toolbar {
 		const minHeight = this.#frameContext.get('_minHeight');
 		const editorHeight = wrapper.offsetHeight;
 		const editorOffset = this.#$.offset.getGlobal(this.#frameContext.get('topArea'));
-		const y = currentScrollY + stickyTop;
-		const t = (this.isBalloonMode || this.isInlineMode ? editorOffset.top : this.#$.offset.getGlobal(this.#options.get('toolbar_container')).top) - (this.isInlineMode ? toolbar.offsetHeight : 0);
 		const inlineOffset = 1;
 
-		const offSticky = !this.#options.get('toolbar_container') ? editorHeight + t + stickyTop - y - minHeight : editorOffset.top - currentScrollY + editorHeight - minHeight - stickyTop - toolbar.offsetHeight;
-		if (y < t) {
-			this.#offSticky();
-		} else if (offSticky < 0) {
-			if (!this.isSticky) this.#onSticky(inlineOffset);
-			toolbar.style.top = inlineOffset + offSticky + this.#getViewportTop() + 'px';
+		if (this.isBottomMode) {
+			const viewportBottom = currentScrollY + _w.innerHeight;
+			const editorBottom = editorOffset.top + editorHeight;
+			const y = viewportBottom - stickyTop - (this.isInlineMode ? toolbar.offsetHeight : 0);
+
+			const offSticky = !this.#options.get('toolbar_container') ? y - editorOffset.top - minHeight : viewportBottom - stickyTop - editorOffset.top - minHeight - toolbar.offsetHeight;
+			if (y > editorBottom) {
+				this.#offSticky();
+			} else if (offSticky < 0) {
+				if (!this.isSticky) this.#onSticky(inlineOffset);
+				toolbar.style.bottom = inlineOffset + offSticky + this.#getViewportTop() + 'px';
+				toolbar.style.top = 'auto';
+			} else {
+				this.#onSticky(inlineOffset);
+			}
 		} else {
-			this.#onSticky(inlineOffset);
+			const y = currentScrollY + stickyTop;
+			const t = (this.isBalloonMode || this.isInlineMode ? editorOffset.top : this.#$.offset.getGlobal(this.#options.get('toolbar_container')).top) - (this.isInlineMode ? toolbar.offsetHeight : 0);
+
+			const offSticky = !this.#options.get('toolbar_container') ? editorHeight + t + stickyTop - y - minHeight : editorOffset.top - currentScrollY + editorHeight - minHeight - stickyTop - toolbar.offsetHeight;
+			if (y < t) {
+				this.#offSticky();
+			} else if (offSticky < 0) {
+				if (!this.isSticky) this.#onSticky(inlineOffset);
+				toolbar.style.top = inlineOffset + offSticky + this.#getViewportTop() + 'px';
+			} else {
+				this.#onSticky(inlineOffset);
+			}
 		}
 	}
 
@@ -229,7 +305,7 @@ class Toolbar {
 	 * @description Reset the common buttons info.
 	 */
 	#resetButtonInfo() {
-		this.#$.shortcuts._registerCustomShortcuts();
+		this.#$.shortcuts._registerShortcuts();
 		this.#$.commandDispatcher.resetTargets();
 		this.#$.ui._initToggleButtons();
 
@@ -350,12 +426,17 @@ class Toolbar {
 
 		const toolbar = this.#context.get(this.keyName.main);
 		toolbar.style.visibility = 'hidden';
+		toolbar.style.display = 'block';
 		this.#offSticky();
 
-		toolbar.style.display = 'block';
 		toolbar.style.top = '0px';
 		this.inlineToolbarAttr.width = toolbar.style.width = this.#options.get(this.keyName.width);
-		this.inlineToolbarAttr.top = toolbar.style.top = -1 + (this.#$.offset.getGlobal(this.#frameContext.get('topArea')).top - this.#$.offset.getGlobal(toolbar).top - toolbar.offsetHeight) + 'px';
+		if (this.isBottomMode) {
+			const topArea = this.#frameContext.get('topArea');
+			this.inlineToolbarAttr.top = toolbar.style.top = this.#$.offset.getGlobal(topArea).top + topArea.offsetHeight - this.#$.offset.getGlobal(toolbar).top + 'px';
+		} else {
+			this.inlineToolbarAttr.top = toolbar.style.top = -1 + (this.#$.offset.getGlobal(this.#frameContext.get('topArea')).top - this.#$.offset.getGlobal(toolbar).top - toolbar.offsetHeight) + 'px';
+		}
 
 		this._resetSticky();
 		this.inlineToolbarAttr.isShow = true;
@@ -403,11 +484,17 @@ class Toolbar {
 			stickyDummy.style.display = 'block';
 		}
 
-		const toolbarTopPosition = this.#options.get('toolbar_sticky') + inlineOffset + this.#getViewportTop();
-		toolbar.style.top = `${toolbarTopPosition}px`;
+		if (this.isBottomMode) {
+			const toolbarBottomPosition = this.#options.get('toolbar_sticky') + this.#getViewportTop();
+			toolbar.style.bottom = `${toolbarBottomPosition}px`;
+			toolbar.style.top = 'auto';
+		} else {
+			const toolbarTopPosition = this.#options.get('toolbar_sticky') + inlineOffset + this.#getViewportTop();
+			toolbar.style.top = `${toolbarTopPosition}px`;
+		}
 		toolbar.style.width = this.isInlineMode ? this.inlineToolbarAttr.width : toolbar.offsetWidth + 'px';
 		dom.utils.addClass(toolbar, 'se-toolbar-sticky');
-		this.isSticky = true;
+		this.#_isStickyFlag = true;
 	}
 
 	/**
@@ -429,12 +516,18 @@ class Toolbar {
 		stickyDummy.style.display = 'none';
 
 		const toolbar = this.#context.get(this.keyName.main);
-		toolbar.style.top = this.isInlineMode ? this.inlineToolbarAttr.top : '';
+		if (this.isBottomMode) {
+			toolbar.style.bottom = this.isInlineMode ? `${-toolbar.offsetHeight}px` : '';
+			toolbar.style.top = 'auto';
+			this.#frameContext.get('wrapper').style.marginBottom = '';
+		} else {
+			toolbar.style.top = this.isInlineMode ? this.inlineToolbarAttr.top : '';
+			this.#frameContext.get('wrapper').style.marginTop = '';
+		}
 		toolbar.style.width = this.isInlineMode ? this.inlineToolbarAttr.width : '';
-		this.#frameContext.get('wrapper').style.marginTop = '';
 
 		dom.utils.removeClass(toolbar, 'se-toolbar-sticky');
-		this.isSticky = false;
+		this.#_isStickyFlag = false;
 	}
 
 	/**

package/src/core/logic/panel/viewer.js

@@ -1,4 +1,4 @@
-import { dom, env, converter, numbers } from '../../../helper';
+import { dom, env, converter, markdown } from '../../../helper';
 
 const { _w, _d } = env;
 
@@ -27,6 +27,9 @@ class Viewer {
 	#codeWrapperOriginCssText = '';
 	#codeOriginCssText = '';
 	#codeNumberOriginCssText = '';
+	#markdownWrapperOriginCssText = '';
+	#markdownOriginCssText = '';
+	#markdownNumberOriginCssText = '';
 	#toolbarOriginCssText = '';
 	#arrowOriginCssText = '';
 	#fullScreenInnerHeight = 0;
@@ -64,9 +67,15 @@ class Viewer {
 	 */
 	codeView(value) {
 		const fc = this.#frameContext;
+		if (!fc.get('codeWrapper')) return;
 		if (value === undefined) value = !fc.get('isCodeView');
 		if (value === fc.get('isCodeView')) return;
 
+		// Mutual exclusivity with markdown view
+		if (value && fc.get('isMarkdownView')) {
+			this.markdownView(false);
+		}
+
 		fc.set('isCodeView', value);
 		this.#$.ui.offCurrentController();
 		this.#$.ui.offCurrentModal();
@@ -77,6 +86,7 @@ class Viewer {
 		const wrapper = fc.get('wrapper');
 
 		if (value) {
+			this.#$.finder.close();
 			this.#setEditorDataToCodeView();
 			codeWrapper.style.setProperty('display', 'flex', 'important');
 			wysiwygFrame.style.display = 'none';
@@ -111,7 +121,7 @@ class Viewer {
 			this.#store.set('_range', null);
 			codeFrame.focus();
 			dom.utils.addClass(this.#$.commandDispatcher.targets.get('codeView'), 'active');
-			dom.utils.addClass(wrapper, 'se-code-view-status');
+			dom.utils.addClass(wrapper, 'se-source-view-status');
 		} else {
 			if (!dom.check.isNonEditable(wysiwygFrame)) this.#setCodeDataToEditor();
 			wysiwygFrame.scrollTop = 0;
@@ -137,7 +147,7 @@ class Viewer {
 				this.#$.history.push(false);
 				this.#$.history.resetButtons(fc.get('key'), null);
 			}
-			dom.utils.removeClass(wrapper, 'se-code-view-status');
+			dom.utils.removeClass(wrapper, 'se-source-view-status');
 		}
 
 		this.#$.ui._updatePlaceholder(fc);
@@ -157,6 +167,108 @@ class Viewer {
 		this.#eventManager.triggerEvent('onToggleCodeView', { frameContext: fc, is: fc.get('isCodeView') });
 	}
 
+	/**
+	 * @description Changes to markdown view or wysiwyg view
+	 * @param {boolean} [value] `true`/`false`, If `undefined` toggle the `markdownView` mode.
+	 */
+	markdownView(value) {
+		const fc = this.#frameContext;
+		if (!fc.get('markdownWrapper')) return;
+		if (value === undefined) value = !fc.get('isMarkdownView');
+		if (value === fc.get('isMarkdownView')) return;
+
+		// Mutual exclusivity with code view
+		if (value && fc.get('isCodeView')) {
+			this.codeView(false);
+		}
+
+		fc.set('isMarkdownView', value);
+		this.#$.ui.offCurrentController();
+		this.#$.ui.offCurrentModal();
+
+		const markdownWrapper = fc.get('markdownWrapper');
+		const markdownFrame = fc.get('markdown');
+		const wysiwygFrame = fc.get('wysiwygFrame');
+		const wrapper = fc.get('wrapper');
+
+		if (value) {
+			this.#$.finder.close();
+			this.#setEditorDataToMarkdownView();
+			markdownWrapper.style.setProperty('display', 'flex', 'important');
+			wysiwygFrame.style.display = 'none';
+
+			if (fc.get('isFullScreen')) {
+				markdownFrame.style.height = '100%';
+			} else if (this.#frameOptions.get('height') === 'auto') {
+				markdownFrame.style.height = markdownFrame.scrollHeight > 0 ? markdownFrame.scrollHeight + 'px' : 'auto';
+			}
+
+			if (!fc.get('isFullScreen')) {
+				this.#$.ui.preventToolbarHide(true);
+				if (this.#store.mode.isBalloon) {
+					this.#context.get('toolbar_arrow').style.display = 'none';
+					this.#context.get('toolbar_main').style.left = '';
+					this.#store.mode.isInline = this.#$.toolbar.isInlineMode = true;
+					this.#store.mode.isBalloon = this.#$.toolbar.isBalloonMode = false;
+					this.#$.toolbar._showInline();
+				}
+			}
+
+			if (this.#store.mode.isBalloon) {
+				this.#$.subToolbar.hide();
+			}
+
+			CreateLineNumbers(fc, 'markdown');
+
+			this.#store.set('_range', null);
+			markdownFrame.focus();
+			dom.utils.addClass(this.#$.commandDispatcher.targets.get('markdownView'), 'active');
+			dom.utils.addClass(wrapper, 'se-source-view-status');
+		} else {
+			if (!dom.check.isNonEditable(wysiwygFrame)) this.#setMarkdownDataToEditor();
+			wysiwygFrame.scrollTop = 0;
+			markdownWrapper.style.setProperty('display', 'none', 'important');
+			wysiwygFrame.style.display = 'block';
+
+			if (this.#frameOptions.get('height') === 'auto') markdownFrame.style.height = '0px';
+
+			if (!fc.get('isFullScreen')) {
+				this.#$.ui.preventToolbarHide(false);
+				if (/balloon/.test(this.#options.get('mode'))) {
+					this.#context.get('toolbar_arrow').style.display = '';
+					this.#store.mode.isInline = this.#$.toolbar.isInlineMode = false;
+					this.#store.mode.isBalloon = this.#$.toolbar.isBalloonMode = true;
+					this.#kernel._eventOrchestrator._hideToolbar();
+				}
+			}
+
+			this.#$.focusManager.nativeFocus();
+			dom.utils.removeClass(this.#$.commandDispatcher.targets.get('markdownView'), 'active');
+
+			if (!dom.check.isNonEditable(wysiwygFrame)) {
+				this.#$.history.push(false);
+				this.#$.history.resetButtons(fc.get('key'), null);
+			}
+			dom.utils.removeClass(wrapper, 'se-source-view-status');
+		}
+
+		this.#$.ui._updatePlaceholder(fc);
+		this.#$.ui._toggleCodeViewButtons(value);
+
+		// document type
+		if (fc.has('documentType_use_header')) {
+			if (value) {
+				fc.get('documentTypeInner').style.display = 'none';
+			} else {
+				fc.get('documentTypeInner').style.display = '';
+				fc.get('documentType').reHeader();
+			}
+		}
+
+		// user event
+		this.#eventManager.triggerEvent('onToggleMarkdownView', { frameContext: fc, is: fc.get('isMarkdownView') });
+	}
+
 	/**
 	 * @description Changes to full screen or default screen
 	 * @param {boolean} [value] `true`/`false`, If `undefined` toggle the `fullScreen` mode.
@@ -174,7 +286,11 @@ class Viewer {
 		const codeWrapper = fc.get('codeWrapper');
 		const code = fc.get('code');
 		const codeNumbers = fc.get('codeNumbers');
+		const markdownWrapper = fc.get('markdownWrapper');
+		const markdownFrame = fc.get('markdown');
+		const markdownNumbers = fc.get('markdownNumbers');
 		const isCodeView = this.#frameContext.get('isCodeView');
+		const isMarkdownView = this.#frameContext.get('isMarkdownView');
 		const arrow = this.#context.get('toolbar_arrow');
 
 		this.#$.ui.offCurrentController();
@@ -187,6 +303,9 @@ class Viewer {
 			this.#codeWrapperOriginCssText = codeWrapper.style.cssText;
 			this.#codeOriginCssText = code.style.cssText;
 			this.#codeNumberOriginCssText = codeNumbers?.style.cssText;
+			this.#markdownWrapperOriginCssText = markdownWrapper?.style.cssText;
+			this.#markdownOriginCssText = markdownFrame?.style.cssText;
+			this.#markdownNumberOriginCssText = markdownNumbers?.style.cssText;
 			this.#toolbarOriginCssText = toolbar.style.cssText;
 			if (arrow) this.#arrowOriginCssText = arrow.style.cssText;
 
@@ -222,15 +341,23 @@ class Viewer {
 
 			// frame
 			editorArea.style.cssText = toolbar.style.cssText = '';
-			wysiwygFrame.style.cssText = (wysiwygFrame.style.cssText.match(/\s?display(\s+)?:(\s+)?[a-zA-Z]+;/) || [''])[0] + this.#frameOptions.get('_defaultStyles').editor + (isCodeView ? 'display: none;' : '');
+			wysiwygFrame.style.cssText = (wysiwygFrame.style.cssText.match(/\s?display(\s+)?:(\s+)?[a-zA-Z]+;/) || [''])[0] + this.#frameOptions.get('_defaultStyles').editor + (isCodeView || isMarkdownView ? 'display: none;' : '');
 
 			// code wrapper
 			codeWrapper.style.cssText = (codeWrapper.style.cssText.match(/\s?display(\s+)?:(\s+)?[a-zA-Z]+;/) || [''])[0] + `display: ${!isCodeView ? 'none' : 'flex'} !important;`;
 			codeWrapper.style.overflow = 'auto';
 			codeWrapper.style.height = '100%';
 
+			// markdown wrapper
+			if (markdownWrapper) {
+				markdownWrapper.style.cssText = (markdownWrapper.style.cssText.match(/\s?display(\s+)?:(\s+)?[a-zA-Z]+;/) || [''])[0] + `display: ${!isMarkdownView ? 'none' : 'flex'} !important;`;
+				markdownWrapper.style.overflow = 'auto';
+				markdownWrapper.style.height = '100%';
+			}
+
 			// code
 			code.style.height = '';
+			if (markdownFrame) markdownFrame.style.height = '';
 
 			// toolbar, editor area
 			toolbar.style.width = wysiwygFrame.style.height = '100%';
@@ -254,7 +381,7 @@ class Viewer {
 			});
 		} else {
 			// frame
-			wysiwygFrame.style.cssText = this.#wysiwygOriginCssText.replace(/\s?display(\s+)?:(\s+)?[a-zA-Z]+;/, '') + (isCodeView ? 'display: none;' : '');
+			wysiwygFrame.style.cssText = this.#wysiwygOriginCssText.replace(/\s?display(\s+)?:(\s+)?[a-zA-Z]+;/, '') + (isCodeView || isMarkdownView ? 'display: none;' : '');
 
 			// code wrapper
 			codeWrapper.style.cssText = this.#codeWrapperOriginCssText.replace(/\s?display(\s+)?:(\s+)?[a-zA-Z]+;/, '') + `display: ${!isCodeView ? 'none' : 'flex'} !important;`;
@@ -263,6 +390,13 @@ class Viewer {
 			code.style.cssText = this.#codeOriginCssText;
 			if (codeNumbers) codeNumbers.style.cssText = this.#codeNumberOriginCssText;
 
+			// markdown wrapper
+			if (markdownWrapper) {
+				markdownWrapper.style.cssText = this.#markdownWrapperOriginCssText.replace(/\s?display(\s+)?:(\s+)?[a-zA-Z]+;/, '') + `display: ${!isMarkdownView ? 'none' : 'flex'} !important;`;
+			}
+			if (markdownFrame) markdownFrame.style.cssText = this.#markdownOriginCssText;
+			if (markdownNumbers) markdownNumbers.style.cssText = this.#markdownNumberOriginCssText;
+
 			// toolbar, editor area
 			toolbar.style.cssText = this.#toolbarOriginCssText;
 			editorArea.style.cssText = this.#editorAreaOriginCssText;
@@ -304,7 +438,7 @@ class Viewer {
 			});
 		}
 
-		if (wasToolbarHidden && !fc.get('isCodeView')) this.#$.toolbar.hide();
+		if (wasToolbarHidden && !fc.get('isCodeView') && !fc.get('isMarkdownView')) this.#$.toolbar.hide();
 
 		// user event
 		this.#eventManager.triggerEvent('onToggleFullScreen', { frameContext: fc, is: fc.get('isFullScreen') });
@@ -359,6 +493,13 @@ class Viewer {
 			});
 		}
 
+		// markdownView
+		if (fc.get('isMarkdownView')) {
+			dom.utils.addClass(this.#$.commandDispatcher.targets.get('markdownView'), 'active');
+		} else {
+			dom.utils.removeClass(this.#$.commandDispatcher.targets.get('markdownView'), 'active');
+		}
+
 		// showBlocks
 		if (fc.get('isShowBlocks')) {
 			dom.utils.addClass(this.#$.commandDispatcher.targets.get('showBlocks'), 'active');
@@ -582,7 +723,7 @@ class Viewer {
 	 * @internal
 	 * @description Adjusts the height of the code view area.
 	 * - Ensures the code block `auto`-resizes based on its content.
-	 * @param {HTMLElement} code - Code area
+	 * @param {HTMLTextAreaElement} code - Code area
 	 * @param {HTMLTextAreaElement} codeNumbers - Code numbers area
 	 * @param {boolean} isAuto - `auto` height option
 	 */
@@ -603,6 +744,29 @@ class Viewer {
 		codeNumbers.scrollLeft = this.scrollLeft;
 	}
 
+	/**
+	 * @internal
+	 * @description Adjusts the height of the markdown view area.
+	 * @param {HTMLTextAreaElement} md - Markdown area
+	 * @param {HTMLTextAreaElement} mdNumbers - Markdown numbers area
+	 * @param {boolean} isAuto - `auto` height option
+	 */
+	_markdownViewAutoHeight(md, mdNumbers, isAuto) {
+		if (isAuto) md.style.height = md.scrollHeight + 'px';
+		this.#updateLineNumbers(mdNumbers, md);
+	}
+
+	/**
+	 * @internal
+	 * @this {HTMLElement} Markdown numbers area
+	 * @description Synchronizes scrolling of line numbers with the markdown editor.
+	 * @param {HTMLTextAreaElement} mdNumbers - Markdown numbers textarea
+	 */
+	_scrollMarkdownLineNumbers(mdNumbers) {
+		mdNumbers.scrollTop = this.scrollTop;
+		mdNumbers.scrollLeft = this.scrollLeft;
+	}
+
 	/**
 	 * @description Convert the data of the code view and put it in the `WYSIWYG` area.
 	 */
@@ -668,25 +832,44 @@ class Viewer {
 		this._setCodeView(codeValue);
 	}
 
+	/**
+	 * @description Convert the data of the `WYSIWYG` area and put it in the markdown view area.
+	 */
+	#setEditorDataToMarkdownView() {
+		const json = converter.htmlToJson(this.#frameContext.get('wysiwyg').innerHTML);
+		const md = markdown.jsonToMarkdown(json);
+		this.#frameContext.get('markdown').value = md;
+	}
+
+	/**
+	 * @description Convert the data of the markdown view and put it in the `WYSIWYG` area.
+	 */
+	#setMarkdownDataToEditor() {
+		const md = this.#frameContext.get('markdown').value;
+		const html = markdown.markdownToHtml(md, this.#options.get('defaultLine'));
+
+		this.#frameContext.get('wysiwyg').innerHTML =
+			html.length > 0 ? this.#$.html.clean(html, { forceFormat: true, whitelist: null, blacklist: null }) : '<' + this.#options.get('defaultLine') + '><br></' + this.#options.get('defaultLine') + '>';
+	}
+
 	/**
 	 * @description Updates the line numbers for the code editor.
 	 * - Dynamically adjusts line numbers as content grows.
 	 * @param {HTMLTextAreaElement} lineNumbers - Code numbers area
-	 * @param {HTMLElement} code - Code area
+	 * @param {HTMLTextAreaElement} code - Code area
 	 */
 	#updateLineNumbers(lineNumbers, code) {
 		if (!lineNumbers) return;
 
-		const lineHeight = GetLineHeight(lineNumbers);
-		const numberOfLinesNeeded = Math.ceil(code.scrollHeight / lineHeight);
-
+		const numberOfLinesNeeded = (code.value.match(/\n/g) || []).length + 1;
 		const currentLineCount = (lineNumbers.value.match(/\n/g) || []).length;
-		if (numberOfLinesNeeded > currentLineCount) {
+
+		if (numberOfLinesNeeded !== currentLineCount) {
 			let n = '';
-			for (let i = currentLineCount + 1; i <= numberOfLinesNeeded; i++) {
+			for (let i = 1; i <= numberOfLinesNeeded; i++) {
 				n += `${i}\n`;
 			}
-			lineNumbers.value += n;
+			lineNumbers.value = n;
 		}
 	}
 
@@ -700,44 +883,32 @@ class Viewer {
 }
 
 /**
- * @description Create line numbers for the code view area
+ * @description Create line numbers for the code/markdown view area
  * @param {SunEditor.FrameContext} fc - Frame context
+ * @param {"code"|"markdown"} [type="code"] - View type
  */
-function CreateLineNumbers(fc) {
-	const codeNumbers = fc.get('codeNumbers');
-	if (!codeNumbers) return;
+function CreateLineNumbers(fc, type) {
+	const numbersKey = type === 'markdown' ? 'markdownNumbers' : 'codeNumbers';
+	const contentKey = type === 'markdown' ? 'markdown' : 'code';
+	const lineNumbers = fc.get(numbersKey);
+	if (!lineNumbers) return;
 
-	const lineHeight = GetLineHeight(codeNumbers);
-	const numberOfLines = fc.get('code').scrollHeight / lineHeight;
+	const content = fc.get(contentKey);
+	const numberOfLines = (content.value.match(/\n/g) || []).length + 1;
 
 	let n = '';
 	for (let i = 1; i <= numberOfLines; i++) {
 		n += `${i}\n`;
 	}
 
-	const { padding, margin } = _w.getComputedStyle(fc.get('code'));
-	codeNumbers.value = n;
-	codeNumbers.style.padding = padding || '';
-	codeNumbers.style.margin = margin || '';
-}
-
-/**
- * @description Get the `line-height` of the textarea
- * @param {HTMLTextAreaElement} textarea Textarea element
- * @returns {number}
- */
-function GetLineHeight(textarea) {
-	const lineHeight = _w.getComputedStyle(textarea).lineHeight;
-	let lineHeightMatch;
-
-	if (!numbers.is(lineHeight)) {
-		const fontSize = _w.getComputedStyle(textarea).fontSize;
-		lineHeightMatch = numbers.get(fontSize) * 1.2;
-	} else {
-		lineHeightMatch = numbers.get(lineHeight);
-	}
-
-	return lineHeightMatch;
+	// Sync font and line-height for accurate scroll alignment
+	const contentStyle = _w.getComputedStyle(content);
+	lineNumbers.style.lineHeight = contentStyle.lineHeight;
+	lineNumbers.style.fontSize = contentStyle.fontSize;
+	lineNumbers.style.fontFamily = contentStyle.fontFamily;
+	lineNumbers.style.paddingTop = contentStyle.paddingTop;
+	lineNumbers.style.paddingBottom = contentStyle.paddingBottom;
+	lineNumbers.value = n;
 }
 
 export default Viewer;