suneditor 3.3.1 → 3.3.2

package/src/core/schema/options.js

@@ -71,6 +71,7 @@ export const DEFAULTS = {
 		'@text': 'font-family|font-size|color|background-color|width|height',
 		'@line': 'text-align|margin|margin-left|margin-right|line-height',
 		'@component': 'width|height|min-width',
+		li: 'font-family|font-size|color|background-color|font-weight|font-style',
 		'table|th|td':
 			'border|border-[a-z]+|color|background-color|text-align|float|font-weight|text-decoration|font-style|vertical-align',
 		'table|td': 'width',
@@ -457,7 +458,7 @@ export const DEFAULTS = {
  * - Value is a pipe-delimited list of allowed style names.
  * - Resolution order when filtering an element: `@component` (for `.se-component` containers) → explicit tag entry → `@line` (for formatLine elements) → `@text` (for textStyleTags).
  * - `@component` guards the inline sizing (`width`/`height`/`min-width`) the editor writes on a media component's container for percentage-based sizes; keep these so a clean() round-trip does not reset the component to full width.
- * - An explicit tag entry **replaces** the category default — include category styles in the value if you want both.
+ * - An explicit tag entry is **merged** with its category default when the tag belongs to one (`@line` for formatLine elements, else `@text` for textStyleTags) — the entry adds styles on top of the category's.
  * - Merged with {@link DEFAULTS.TAG_STYLES}; user-supplied keys win.
  * ```js
  * {
@@ -465,8 +466,8 @@ export const DEFAULTS = {
  *     '@text': 'color|font-size|background-color',  // default for span, b, i, em, ...
  *     '@line': 'text-align|margin|line-height',     // default for p, h1-h6, div, li, ...
  *     'table|td': 'border|color|background-color',  // per-tag whitelist
- *     div: 'color',                                   // explicit override; ignores `@line` default
- *     hr: 'border-top',
+ *      div: 'color',                                 // merged with the `@line` default (div is a line element)
+ *      hr: 'border-top',
  *   }
  * }
  * ```

package/src/events.js

@@ -17,7 +17,7 @@
  * @property {Event} event - event object
  * @property {string} data - drop data
  * @property {boolean} maxCharCount - is max char count
- * @property {string} from - `"SE"`|`"MS"`|`""` - source
+ * @property {string} from - `"SE"`|`"MS"`|`"GOOGLE"`|`""` - source
  */
 
 // --- media

package/src/helper/dom/domQuery.js

@@ -513,7 +513,8 @@ export function getEdgeChildNodes(first, last) {
 
 /**
  * @template {Node} T
- * @description Gets the previous sibling last child. If there is no sibling, then it'll take it from the closest ancestor with child
+ * @description Gets the previous sibling last child. If there is no sibling, then it'll take it from the closest ancestor with child.
+ * - Components (image, table, etc.) are treated as a single tag and not traversed into.
  * @param {Node} node Reference element
  * @param {?Node} [ceiling] Highest boundary allowed
  * @returns {T|null} Not found: `null`
@@ -533,14 +534,17 @@ export function getPreviousDeepestNode(node, ceiling) {
 
 	if (domCheck.isNonEditable(previousNode)) return /** @type {T} */ (/** @type {unknown} */ (previousNode));
 
-	while (previousNode.lastChild) previousNode = previousNode.lastChild;
+	while (!domCheck.isComponentContainer(previousNode) && previousNode.lastChild) {
+		previousNode = previousNode.lastChild;
+	}
 
 	return /** @type {T} */ (/** @type {unknown} */ (previousNode));
 }
 
 /**
  * @template {Node} T
- * @description Gets the next sibling first child. If there is no sibling, then it'll take it from the closest ancestor with child
+ * @description Gets the next sibling first child. If there is no sibling, then it'll take it from the closest ancestor with child.
+ * - Components (image, table, etc.) are treated as a single tag and not traversed into.
  * @param {Node} node Reference element
  * @param {?Node} [ceiling] Highest boundary allowed
  * @returns {T|null} Not found: `null`
@@ -560,7 +564,9 @@ export function getNextDeepestNode(node, ceiling) {
 
 	if (domCheck.isNonEditable(nextNode)) return /** @type {T} */ (/** @type {unknown} */ (nextNode));
 
-	while (nextNode.firstChild) nextNode = nextNode.firstChild;
+	while (!domCheck.isComponentContainer(nextNode) && nextNode.firstChild) {
+		nextNode = nextNode.firstChild;
+	}
 
 	return /** @type {T} */ (/** @type {unknown} */ (nextNode));
 }

package/src/helper/googleDocs.js

@@ -0,0 +1,40 @@
+/**
+ * @description Cleans Google Docs clipboard HTML.
+ */
+
+/** Matches the Google Docs clipboard wrapper id */
+const _RE_GUID = /id=["']?docs-internal-guid-/i;
+
+/**
+ * @description Whether the HTML string is a Google Docs clipboard payload.
+ * @param {string} html HTML string
+ * @returns {boolean}
+ */
+export function isGoogleDocs(html) {
+	return _RE_GUID.test(html);
+}
+
+/**
+ * @description Removes the Google Docs clipboard wrapper tags, keeping their children.
+ * - Only the guid-carrying inline wrappers (`b`/`span`) are unwrapped; real formatting tags inside are untouched.
+ * @param {string} html HTML string
+ * @returns {string} HTML string
+ */
+export function cleanHTML(html) {
+	const doc = new DOMParser().parseFromString(html, 'text/html');
+	const wrappers = doc.body.querySelectorAll('b[id^="docs-internal-guid-"], span[id^="docs-internal-guid-"]');
+	if (wrappers.length === 0) return html;
+
+	for (let i = 0, len = wrappers.length, w; i < len; i++) {
+		w = wrappers[i];
+		while (w.firstChild) w.parentNode.insertBefore(w.firstChild, w);
+		w.parentNode.removeChild(w);
+	}
+
+	return doc.body.innerHTML;
+}
+
+export default {
+	isGoogleDocs,
+	cleanHTML,
+};

package/src/helper/index.js

@@ -7,6 +7,7 @@ import KeyCodeMap from './keyCodeMap';
 import Clipboard from './clipboard';
 import Markdown from './markdown';
 import MSOffice from './msOffice';
+import GoogleDocs from './googleDocs';
 
 export const env = Env;
 export const unicode = Unicode;
@@ -17,6 +18,7 @@ export const keyCodeMap = KeyCodeMap;
 export const clipboard = Clipboard;
 export const markdown = Markdown;
 export const msOffice = MSOffice;
+export const googleDocs = GoogleDocs;
 
 export default {
 	env,
@@ -28,4 +30,5 @@ export default {
 	clipboard,
 	markdown,
 	msOffice,
+	googleDocs,
 };

package/types/core/event/effects/ruleHelpers.d.ts

@@ -51,3 +51,59 @@ export function isRtlBidiMismatch(
 	detectedEdge: 'front' | 'end',
 	doc: Document,
 ): boolean;
+/**
+ * @description Whether the caret sits on a bare `<br>` that stands at the front/end edge of its `line`.
+ * @param {Range} range - The current range
+ * @param {Node} selectionNode - Current selection node
+ * @param {'front'|'end'} edge - Edge to test: `front` for Backspace, `end` for Delete
+ * @returns {boolean} `true` if the caret is on an edge `<br>`
+ */
+export function isEdgeBreakCaret(range: Range, selectionNode: Node, edge: 'front' | 'end'): boolean;
+/**
+ * @description The previous/next element in document order — crossing in and out of blocks (list, quote).
+ * - Out of list-cell ancestors (a nested list), stopping at a closure block (table cell).
+ * @param {EventPorts['format']} format - Format module
+ * @param {?HTMLElement} line - The caret's `line` element
+ * @param {'front'|'end'} edge - `front` for the previous element, `end` for the next one
+ * @returns {?HTMLElement} The adjacent element, or `null` at the document edge
+ */
+export function getAdjacentElement(
+	format: EventPorts['format'],
+	line: HTMLElement | null,
+	edge: 'front' | 'end',
+): HTMLElement | null;
+/**
+ * @description The previous/next `line` in document order — {@link getAdjacentElement} filtered to lines.
+ * - `null` means either the document edge or a non-`line` neighbour (a component); use
+ * {@link getAdjacentElement} when the two must be told apart.
+ * @param {EventPorts['format']} format - Format module
+ * @param {?HTMLElement} line - The caret's `line` element
+ * @param {'front'|'end'} edge - `front` for the previous line, `end` for the next one
+ * @returns {?HTMLElement} The adjacent line, or `null`
+ */
+export function getAdjacentLine(
+	format: EventPorts['format'],
+	line: HTMLElement | null,
+	edge: 'front' | 'end',
+): HTMLElement | null;
+/**
+ * @description The neighbouring `line` an empty line collapses into, or `null` when there is nothing to merge.
+ * - A cell owning a nested list belongs to {@link getNestedListTarget} instead.
+ * @param {EventPorts['format']} format - Format module
+ * @param {?HTMLElement} formatEl - The caret's `line` element
+ * @param {'front'|'end'} edge - `front` for Backspace (previous line), `end` for Delete (next line)
+ * @returns {?HTMLElement} The neighbouring line to merge into, or `null`
+ */
+export function getEmptyLineMergeTarget(
+	format: EventPorts['format'],
+	formatEl: HTMLElement | null,
+	edge: 'front' | 'end',
+): HTMLElement | null;
+/**
+ * @description The nested list a list-cell Backspace/Delete would lift, or `null` when there is none.
+ * - The rules gate their list branch on it so the branch can't claim the key with nothing to do.
+ * @param {HTMLElement} formatEl - The caret's list cell
+ * @param {HTMLElement} rangeEl - The list (`UL`/`OL`) the cell belongs to
+ * @returns {?HTMLElement} The element carrying the nested list, or `null`
+ */
+export function getNestedListTarget(formatEl: HTMLElement, rangeEl: HTMLElement): HTMLElement | null;

package/types/core/schema/options.d.ts

@@ -28,6 +28,7 @@ export namespace DEFAULTS {
 		'@text': string;
 		'@line': string;
 		'@component': string;
+		li: string;
 		'table|th|td': string;
 		'table|td': string;
 		tr: string;
@@ -400,7 +401,7 @@ export namespace DEFAULTS {
  * - Value is a pipe-delimited list of allowed style names.
  * - Resolution order when filtering an element: `@component` (for `.se-component` containers) → explicit tag entry → `@line` (for formatLine elements) → `@text` (for textStyleTags).
  * - `@component` guards the inline sizing (`width`/`height`/`min-width`) the editor writes on a media component's container for percentage-based sizes; keep these so a clean() round-trip does not reset the component to full width.
- * - An explicit tag entry **replaces** the category default — include category styles in the value if you want both.
+ * - An explicit tag entry is **merged** with its category default when the tag belongs to one (`@line` for formatLine elements, else `@text` for textStyleTags) — the entry adds styles on top of the category's.
  * - Merged with {@link DEFAULTS.TAG_STYLES}; user-supplied keys win.
  * ```js
  * {
@@ -408,8 +409,8 @@ export namespace DEFAULTS {
  *     '@text': 'color|font-size|background-color',  // default for span, b, i, em, ...
  *     '@line': 'text-align|margin|line-height',     // default for p, h1-h6, div, li, ...
  *     'table|td': 'border|color|background-color',  // per-tag whitelist
- *     div: 'color',                                   // explicit override; ignores `@line` default
- *     hr: 'border-top',
+ *      div: 'color',                                 // merged with the `@line` default (div is a line element)
+ *      hr: 'border-top',
  *   }
  * }
  * ```
@@ -1254,7 +1255,7 @@ export type EditorBaseOptions = {
 	 * - Value is a pipe-delimited list of allowed style names.
 	 * - Resolution order when filtering an element: `@component` (for `.se-component` containers) → explicit tag entry → `@line` (for formatLine elements) → `@text` (for textStyleTags).
 	 * - `@component` guards the inline sizing (`width`/`height`/`min-width`) the editor writes on a media component's container for percentage-based sizes; keep these so a clean() round-trip does not reset the component to full width.
-	 * - An explicit tag entry **replaces** the category default — include category styles in the value if you want both.
+	 * - An explicit tag entry is **merged** with its category default when the tag belongs to one (`@line` for formatLine elements, else `@text` for textStyleTags) — the entry adds styles on top of the category's.
 	 * - Merged with {@link DEFAULTS.TAG_STYLES}; user-supplied keys win.
 	 * ```js
 	 * {
@@ -1262,7 +1263,7 @@ export type EditorBaseOptions = {
 	 * '@text': 'color|font-size|background-color',  // default for span, b, i, em, ...
 	 * '@line': 'text-align|margin|line-height',     // default for p, h1-h6, div, li, ...
 	 * 'table|td': 'border|color|background-color',  // per-tag whitelist
-	 * div: 'color',                                   // explicit override; ignores `@line` default
+	 * div: 'color',                                 // merged with the `@line` default (div is a line element)
 	 * hr: 'border-top',
 	 * }
 	 * }

package/types/events.d.ts

@@ -35,7 +35,7 @@ export type ClipboardEvent = {
 	 */
 	maxCharCount: boolean;
 	/**
-	 * - `"SE"`|`"MS"`|`""` - source
+	 * - `"SE"`|`"MS"`|`"GOOGLE"`|`""` - source
 	 */
 	from: string;
 };
@@ -289,7 +289,7 @@ export type EventHandlers = {
  * @property {Event} event - event object
  * @property {string} data - drop data
  * @property {boolean} maxCharCount - is max char count
- * @property {string} from - `"SE"`|`"MS"`|`""` - source
+ * @property {string} from - `"SE"`|`"MS"`|`"GOOGLE"`|`""` - source
  */
 /**
  * @typedef {Object} FileManagementInfo

package/types/helper/dom/domQuery.d.ts

@@ -198,7 +198,8 @@ export function getEdgeChildNodes(
 };
 /**
  * @template {Node} T
- * @description Gets the previous sibling last child. If there is no sibling, then it'll take it from the closest ancestor with child
+ * @description Gets the previous sibling last child. If there is no sibling, then it'll take it from the closest ancestor with child.
+ * - Components (image, table, etc.) are treated as a single tag and not traversed into.
  * @param {Node} node Reference element
  * @param {?Node} [ceiling] Highest boundary allowed
  * @returns {T|null} Not found: `null`
@@ -206,7 +207,8 @@ export function getEdgeChildNodes(
 export function getPreviousDeepestNode<T extends Node>(node: Node, ceiling?: Node | null): T | null;
 /**
  * @template {Node} T
- * @description Gets the next sibling first child. If there is no sibling, then it'll take it from the closest ancestor with child
+ * @description Gets the next sibling first child. If there is no sibling, then it'll take it from the closest ancestor with child.
+ * - Components (image, table, etc.) are treated as a single tag and not traversed into.
  * @param {Node} node Reference element
  * @param {?Node} [ceiling] Highest boundary allowed
  * @returns {T|null} Not found: `null`

package/types/helper/googleDocs.d.ts

@@ -0,0 +1,19 @@
+import type {} from '../typedef';
+/**
+ * @description Whether the HTML string is a Google Docs clipboard payload.
+ * @param {string} html HTML string
+ * @returns {boolean}
+ */
+export function isGoogleDocs(html: string): boolean;
+/**
+ * @description Removes the Google Docs clipboard wrapper tags, keeping their children.
+ * - Only the guid-carrying inline wrappers (`b`/`span`) are unwrapped; real formatting tags inside are untouched.
+ * @param {string} html HTML string
+ * @returns {string} HTML string
+ */
+export function cleanHTML(html: string): string;
+declare namespace _default {
+	export { isGoogleDocs };
+	export { cleanHTML };
+}
+export default _default;

package/types/helper/index.d.ts

@@ -178,6 +178,10 @@ export const markdown: {
 export const msOffice: {
 	cleanHTML: typeof import('./msOffice').cleanHTML;
 };
+export const googleDocs: {
+	isGoogleDocs: typeof import('./googleDocs').isGoogleDocs;
+	cleanHTML: typeof import('./googleDocs').cleanHTML;
+};
 declare namespace _default {
 	export { env };
 	export { unicode };
@@ -188,5 +192,6 @@ declare namespace _default {
 	export { clipboard };
 	export { markdown };
 	export { msOffice };
+	export { googleDocs };
 }
 export default _default;