suneditor 3.0.4 → 3.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "suneditor",
-	"version": "3.0.4",
+	"version": "3.0.5",
 	"description": "Vanilla JavaScript based WYSIWYG web editor",
 	"author": "Yi JiHong",
 	"license": "MIT",

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

@@ -300,7 +300,7 @@ class Viewer {
 			this.#originCssText = topArea.style.cssText;
 			this.#editorAreaOriginCssText = editorArea.style.cssText;
 			this.#wysiwygOriginCssText = wysiwygFrame.style.cssText;
-			this.#codeWrapperOriginCssText = codeWrapper.style.cssText;
+			this.#codeWrapperOriginCssText = codeWrapper?.style.cssText;
 			this.#codeOriginCssText = code.style.cssText;
 			this.#codeNumberOriginCssText = codeNumbers?.style.cssText;
 			this.#markdownWrapperOriginCssText = markdownWrapper?.style.cssText;
@@ -344,9 +344,11 @@ class Viewer {
 			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%';
+			if (codeWrapper) {
+				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) {
@@ -384,7 +386,9 @@ class Viewer {
 			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;`;
+			if (codeWrapper) {
+				codeWrapper.style.cssText = this.#codeWrapperOriginCssText.replace(/\s?display(\s+)?:(\s+)?[a-zA-Z]+;/, '') + `display: ${!isCodeView ? 'none' : 'flex'} !important;`;
+			}
 
 			// code
 			code.style.cssText = this.#codeOriginCssText;

package/src/helper/markdown.js

@@ -1,6 +1,21 @@
 /**
  * @fileoverview Markdown converter module
  * - Supports GitHub Flavored Markdown (GFM) syntax
+ *
+ * @description Limitations — Style loss during roundtrip
+ *
+ * Markdown syntax cannot represent HTML inline styles, classes, or data attributes.
+ * When switching between WYSIWYG and Markdown view, the following behavior applies:
+ *
+ * | Content type                        | Behavior                                    | Example                                              |
+ * |-------------------------------------|---------------------------------------------|------------------------------------------------------|
+ * | Media components (`div.se-component`) | Converted to markdown — styles are lost     | Image alignment, data-se-* attrs                     |
+ * | Styled `<span>` elements            | Preserved as raw HTML in markdown           | Font color, background, custom classes               |
+ * | Tables, figures                      | Converted to markdown — styles are lost     | Table cell styles, figure width, colgroup widths      |
+ * | General elements (p, h1, blockquote) | Converted to markdown — styles are lost     | text-align, color, font-size on paragraphs/headings  |
+ *
+ * This is a fundamental limitation of the Markdown format.
+ * To preserve all HTML attributes without loss, use Code View instead.
  */
 
 const VOID_ELEMENTS = /^(area|base|br|col|embed|hr|img|input|link|meta|param|source|track|wbr)$/i;
@@ -439,16 +454,16 @@ function nodeToMarkdown(node, indent, isBlock) {
 
 	// Span - pass through as inline (may contain styles)
 	if (tag === 'span') {
-		// Check if it has meaningful attributes that need HTML fallback
 		if (attributes.style || attributes.class) {
 			return nodeToHtmlFallback(node);
 		}
 		return childrenToInline(children);
 	}
 
-	// Figure - process children (usually contains img or other media)
+	// Figure - process children (table, media)
 	if (tag === 'figure') {
-		return children.map((c) => nodeToMarkdown(c, indent, true)).join('');
+		const inner = children.map((c) => nodeToMarkdown(c, indent, true)).join('');
+		return /\n$/.test(inner) ? inner : inner + '\n\n';
 	}
 	if (tag === 'figcaption') {
 		const content = childrenToInline(children).trim();

package/src/modules/contract/Controller.js

@@ -377,14 +377,13 @@ class Controller {
 		if (!passive) {
 			this.#$.ui.onControllerContext();
 			this.#$.store.set('controlActive', true);
+			this.#$.store.set('_preventBlur', true);
 		}
 
 		if (!this.isOpen) {
 			this.#$.ui.opendControllers.push(info);
 		}
 
-		this.#$.store.set('_preventBlur', true);
-
 		this.isOpen = true;
 
 		this.host.controllerOn?.(form, target);

package/src/modules/contract/Figure.js

@@ -904,7 +904,7 @@ class Figure {
 	retainFigureFormat(container, originEl, anchorCover, fileManagerInst) {
 		const isInline = this.#$.component.isInline(container);
 		const originParent = originEl.parentNode;
-		let existElement = this.#$.format.isBlock(originParent) || dom.check.isWysiwygFrame(originParent) ? originEl : Figure.GetContainer(originEl)?.container || originParent || originEl;
+		let existElement = this.#$.format.isBlock(originParent) || dom.check.isWysiwygFrame(originParent) || originParent.nodeType >= 9 ? originEl : Figure.GetContainer(originEl)?.container || originParent || originEl;
 
 		if (dom.query.getParentElement(originEl, dom.check.isExcludeFormat)) {
 			existElement = anchorCover && anchorCover !== originEl ? anchorCover : originEl;

package/src/plugins/command/codeBlock.js

@@ -66,7 +66,7 @@ class CodeBlock extends PluginCommand {
 		// ───────────────── [[toolbar dropdown type]] ─────────────────
 		this.afterItem = dom.utils.createElement(
 			'button',
-			{ class: 'se-btn se-tooltip se-sub-arrow-btn', 'data-command': CodeBlock.key, 'data-type': 'dropdown' },
+			{ class: 'se-btn se-tooltip se-sub-arrow-btn', type: 'button', 'data-command': CodeBlock.key, 'data-type': 'dropdown' },
 			`${this.$.icons.arrow_down}<span class="se-tooltip-inner"><span class="se-tooltip-text">${this.$.lang.codeLanguage || 'Language'}</span></span>`,
 		);
 

package/src/plugins/command/list_bulleted.js

@@ -27,7 +27,7 @@ class List_bulleted extends PluginCommand {
 		this.icon = 'list_bulleted';
 		this.afterItem = dom.utils.createElement(
 			'button',
-			{ class: 'se-btn se-tooltip se-sub-arrow-btn', 'data-command': List_bulleted.key, 'data-type': 'dropdown' },
+			{ class: 'se-btn se-tooltip se-sub-arrow-btn', type: 'button', 'data-command': List_bulleted.key, 'data-type': 'dropdown' },
 			`${this.$.icons.arrow_down}<span class="se-tooltip-inner"><span class="se-tooltip-text">${this.$.lang.bulletedList}</span></span>`,
 		);
 

package/src/plugins/command/list_numbered.js

@@ -27,7 +27,7 @@ class List_numbered extends PluginCommand {
 		this.icon = 'list_numbered';
 		this.afterItem = dom.utils.createElement(
 			'button',
-			{ class: 'se-btn se-tooltip se-sub-arrow-btn', 'data-command': List_numbered.key, 'data-type': 'dropdown' },
+			{ class: 'se-btn se-tooltip se-sub-arrow-btn', type: 'button', 'data-command': List_numbered.key, 'data-type': 'dropdown' },
 			`${this.$.icons.arrow_down}<span class="se-tooltip-inner"><span class="se-tooltip-text">${this.$.lang.numberedList}</span></span>`,
 		);
 

package/src/plugins/input/fontSize.js

@@ -152,25 +152,25 @@ class FontSize extends PluginInput {
 		if (showIncDec) {
 			this.beforeItem = dom.utils.createElement(
 				'button',
-				{ class: 'se-btn se-tooltip se-sub-btn', 'data-command': FontSize.key, 'data-type': 'command', 'data-value': 'dec' },
+				{ class: 'se-btn se-tooltip se-sub-btn', type: 'button', 'data-command': FontSize.key, 'data-type': 'command', 'data-value': 'dec' },
 				`${this.$.icons.minus}<span class="se-tooltip-inner"><span class="se-tooltip-text">${this.$.lang.decrease}</span></span>`,
 			);
 			this.afterItem = dom.utils.createElement(
 				'button',
-				{ class: 'se-btn se-tooltip se-sub-btn', 'data-command': FontSize.key, 'data-type': 'command', 'data-value': 'inc' },
+				{ class: 'se-btn se-tooltip se-sub-btn', type: 'button', 'data-command': FontSize.key, 'data-type': 'command', 'data-value': 'inc' },
 				`${this.$.icons.plus}<span class="se-tooltip-inner"><span class="se-tooltip-text">${this.$.lang.increase}</span></span>`,
 			);
 		} else if (!disableInput) {
 			this.afterItem = dom.utils.createElement(
 				'button',
-				{ class: 'se-btn se-tooltip se-sub-arrow-btn', 'data-command': FontSize.key, 'data-type': 'dropdown' },
+				{ class: 'se-btn se-tooltip se-sub-arrow-btn', type: 'button', 'data-command': FontSize.key, 'data-type': 'dropdown' },
 				`${this.$.icons.arrow_down}<span class="se-tooltip-inner"><span class="se-tooltip-text">${this.$.lang.fontSize}</span></span>`,
 			);
 			this.$.menu.initDropdownTarget({ key: FontSize.key, type: 'dropdown' }, menu);
 		} else if (disableInput && !showIncDec) {
 			this.replaceButton = dom.utils.createElement(
 				'button',
-				{ class: 'se-btn se-tooltip se-btn-select se-btn-tool-font-size', 'data-command': FontSize.key, 'data-type': 'dropdown' },
+				{ class: 'se-btn se-tooltip se-btn-select se-btn-tool-font-size', type: 'button', 'data-command': FontSize.key, 'data-type': 'dropdown' },
 				`<span class="se-txt __se__font_size">${this.$.lang.fontSize}</span>${this.$.icons.arrow_down}<span class="se-tooltip-inner"><span class="se-tooltip-text">${this.$.lang.fontSize}</span></span>`,
 			);
 			this.$.menu.initDropdownTarget({ key: FontSize.key, type: 'dropdown' }, menu);