roosterjs 8.11.3 → 8.13.0

package/dist/rooster-amd.d.ts

@@ -1,4 +1,4 @@
-// Type definitions for roosterjs (Version 8.11.3)
+// Type definitions for roosterjs (Version 8.13.0)
 // Generated by dts tool from roosterjs
 // Project: https://github.com/Microsoft/roosterjs
 
@@ -56,6 +56,10 @@ export interface BrowserInfo {
      * Whether current browser is IE/Edge
      */
     readonly isIEOrEdge?: boolean;
+    /**
+     * Whether current OS is Android
+     */
+    readonly isAndroid?: boolean;
 }
 
 /**
@@ -766,7 +770,13 @@ export const enum GetContentMode {
     /**
      * Get plain text content only, all format will be ignored
      */
-    PlainText = 3
+    PlainText = 3,
+    /**
+     * A fast way to get plain text content, the line-end positions may not be exactly same with HTML content,
+     * but the text content should be the same. This is used for quickly retrieve text content and check
+     * text only
+     */
+    PlainTextFast = 4
 }
 
 /**
@@ -2256,6 +2266,7 @@ export interface HtmlSanitizerOptions {
 }
 
 /**
+ * @deprecated
  * Options for sanitizeHtml function
  */
 export interface SanitizeHtmlOptions extends HtmlSanitizerOptions  {
@@ -2272,86 +2283,12 @@ export interface SanitizeHtmlOptions extends HtmlSanitizerOptions  {
 
 /**
  * Define DOM types of window, used by safeInstanceOf() to check if a given object is of the specified type of its own window
- *
- * !!!Note: This file is generated from /tools/generateTargetWindow.js. Do NOT modify this file directly!!!
  */
 export interface TargetWindowBase {
     Range: Range;
     Node: Node;
     ParentNode: ParentNode;
     Element: Element;
-    SVGElement: SVGElement;
-    SVGViewElement: SVGViewElement;
-    SVGTitleElement: SVGTitleElement;
-    SVGSymbolElement: SVGSymbolElement;
-    SVGStyleElement: SVGStyleElement;
-    SVGStopElement: SVGStopElement;
-    SVGScriptElement: SVGScriptElement;
-    SVGPatternElement: SVGPatternElement;
-    SVGMetadataElement: SVGMetadataElement;
-    SVGMaskElement: SVGMaskElement;
-    SVGMarkerElement: SVGMarkerElement;
-    SVGMPathElement: SVGMPathElement;
-    SVGGraphicsElement: SVGGraphicsElement;
-    SVGUseElement: SVGUseElement;
-    SVGTextContentElement: SVGTextContentElement;
-    SVGTextPositioningElement: SVGTextPositioningElement;
-    SVGTextElement: SVGTextElement;
-    SVGTSpanElement: SVGTSpanElement;
-    SVGTextPathElement: SVGTextPathElement;
-    SVGSwitchElement: SVGSwitchElement;
-    SVGSVGElement: SVGSVGElement;
-    SVGImageElement: SVGImageElement;
-    SVGGeometryElement: SVGGeometryElement;
-    SVGRectElement: SVGRectElement;
-    SVGPolylineElement: SVGPolylineElement;
-    SVGPolygonElement: SVGPolygonElement;
-    SVGPathElement: SVGPathElement;
-    SVGLineElement: SVGLineElement;
-    SVGEllipseElement: SVGEllipseElement;
-    SVGCircleElement: SVGCircleElement;
-    SVGGElement: SVGGElement;
-    SVGForeignObjectElement: SVGForeignObjectElement;
-    SVGDefsElement: SVGDefsElement;
-    SVGAElement: SVGAElement;
-    SVGGradientElement: SVGGradientElement;
-    SVGRadialGradientElement: SVGRadialGradientElement;
-    SVGLinearGradientElement: SVGLinearGradientElement;
-    SVGFilterElement: SVGFilterElement;
-    SVGFETurbulenceElement: SVGFETurbulenceElement;
-    SVGFETileElement: SVGFETileElement;
-    SVGFESpotLightElement: SVGFESpotLightElement;
-    SVGFESpecularLightingElement: SVGFESpecularLightingElement;
-    SVGFEPointLightElement: SVGFEPointLightElement;
-    SVGFEOffsetElement: SVGFEOffsetElement;
-    SVGFEMorphologyElement: SVGFEMorphologyElement;
-    SVGFEMergeNodeElement: SVGFEMergeNodeElement;
-    SVGFEMergeElement: SVGFEMergeElement;
-    SVGFEImageElement: SVGFEImageElement;
-    SVGFEGaussianBlurElement: SVGFEGaussianBlurElement;
-    SVGFEFloodElement: SVGFEFloodElement;
-    SVGFEDropShadowElement: SVGFEDropShadowElement;
-    SVGFEDistantLightElement: SVGFEDistantLightElement;
-    SVGFEDisplacementMapElement: SVGFEDisplacementMapElement;
-    SVGFEDiffuseLightingElement: SVGFEDiffuseLightingElement;
-    SVGFEConvolveMatrixElement: SVGFEConvolveMatrixElement;
-    SVGFECompositeElement: SVGFECompositeElement;
-    SVGFEComponentTransferElement: SVGFEComponentTransferElement;
-    SVGFEColorMatrixElement: SVGFEColorMatrixElement;
-    SVGFEBlendElement: SVGFEBlendElement;
-    SVGDescElement: SVGDescElement;
-    SVGComponentTransferFunctionElement: SVGComponentTransferFunctionElement;
-    SVGFEFuncRElement: SVGFEFuncRElement;
-    SVGFEFuncGElement: SVGFEFuncGElement;
-    SVGFEFuncBElement: SVGFEFuncBElement;
-    SVGFEFuncAElement: SVGFEFuncAElement;
-    SVGClipPathElement: SVGClipPathElement;
-    SVGAnimationElement: SVGAnimationElement;
-    SVGSetElement: SVGSetElement;
-    SVGAnimateTransformElement: SVGAnimateTransformElement;
-    SVGAnimateMotionElement: SVGAnimateMotionElement;
-    SVGAnimateElement: SVGAnimateElement;
-    MathMLElement: MathMLElement;
     HTMLElement: HTMLElement;
     HTMLUnknownElement: HTMLUnknownElement;
     HTMLUListElement: HTMLUListElement;
@@ -2881,6 +2818,10 @@ export interface IEditor {
      * See https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/trusted-types
      */
     getTrustedHTMLHandler(): TrustedHTMLHandler;
+    /**
+     * Get a transformer function. It transform the size changes according to current situation.
+     */
+    getSizeTransformer(): SizeTransformer;
 }
 
 /**
@@ -3081,6 +3022,12 @@ export interface EditorCore extends PluginState  {
      * To override, pass your own trusted HTML handler to EditorOptions.trustedHTMLHandler
      */
     readonly trustedHTMLHandler: TrustedHTMLHandler;
+    /**
+     * A transformer function. It transform the size changes according to current situation.
+     * A typical scenario to use this function is when editor is located under a scaled container, so we need to
+     * calculate the scaled size change according to current zoom rate.
+     */
+    sizeTransformer: SizeTransformer;
 }
 
 /**
@@ -3436,6 +3383,12 @@ export interface EditorOptions {
      * See https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/trusted-types
      */
     trustedHTMLHandler?: TrustedHTMLHandler;
+    /**
+     * A transformer function. It transform the size changes according to current situation.
+     * A typical scenario to use this function is when editor is located under a scaled container, so we need to
+     * calculate the scaled size change according to current zoom rate.
+     */
+    sizeTransformer?: SizeTransformer;
 }
 
 /**
@@ -4127,6 +4080,15 @@ export type DOMEventHandler = PluginEventType | DOMEventHandlerFunction | DOMEve
  */
 export type TrustedHTMLHandler = (html: string) => string;
 
+/**
+ * A transformer function. It transform the size changes according to current situation.
+ * A typical scenario to use this function is when editor is located under a scaled container, so we need to
+ * calculate the scaled size change according to current zoom rate.
+ * @param size Original delta size from mouse event
+ * @returns Calculated delta size. By default it should just return original value
+ */
+export type SizeTransformer = (size: number) => number;
+
 /**
  * This produces a block element from a a node
  * It needs to account for various HTML structure. Examples:
@@ -4819,7 +4781,7 @@ export function toArray<T>(array: readonly T[]): T[];
  * @param obj Object to check
  * @param typeName Target type name
  */
-export function safeInstanceOf<T extends keyof TargetWindow>(obj: any, typeName: T): obj is TargetWindow[T];
+export function safeInstanceOf<T extends keyof W, W extends TargetWindow = TargetWindow>(obj: any, typeName: T): obj is W[T];
 
 /**
  * Read a file object and invoke a callback function with the data url of this file
@@ -5521,12 +5483,14 @@ export function canUndoAutoComplete(snapshots: Snapshots): boolean;
  */
 export class HtmlSanitizer {
     /**
+     * @deprecated Use new HtmlSanitizer().convertGlobalCssToInlineCss() instead
      * Convert global CSS to inline CSS if any
      * @param html HTML source
      * @param additionalStyleNodes (Optional) additional HTML STYLE elements used as global CSS
      */
     static convertInlineCss(html: string, additionalStyleNodes?: HTMLStyleElement[]): string;
     /**
+     * @deprecated Use new HtmlSanitizer().sanitize() instead
      * Sanitize HTML string, remove any unused HTML node/attribute/CSS.
      * @param html HTML source string
      * @param options Options used for this sanitizing process
@@ -5549,6 +5513,7 @@ export class HtmlSanitizer {
      */
     constructor(options?: HtmlSanitizerOptions);
     /**
+     * @deprecated Use HtmlSanitizer.convertGlobalCssToInlineCss() and HtmlSanitizer.sanitize() instead
      * Sanitize HTML string
      * This function will do the following work:
      * 1. Convert global CSS into inline CSS
@@ -6003,6 +5968,10 @@ export class Editor implements IEditor  {
      * See https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/trusted-types
      */
     getTrustedHTMLHandler(): TrustedHTMLHandler;
+    /**
+     * Get a transformer function. It transform the size changes according to current situation.
+     */
+    getSizeTransformer(): SizeTransformer;
 }
 
 /**

package/dist/rooster-amd.js

@@ -1336,12 +1336,13 @@ module.exports = {
 /* MIT license */
 var colorNames = __webpack_require__(/*! color-name */ "./node_modules/color-name/index.js");
 var swizzle = __webpack_require__(/*! simple-swizzle */ "./node_modules/simple-swizzle/index.js");
+var hasOwnProperty = Object.hasOwnProperty;
 
 var reverseNames = {};
 
 // create a list of reverse color names
 for (var name in colorNames) {
-	if (colorNames.hasOwnProperty(name)) {
+	if (hasOwnProperty.call(colorNames, name)) {
 		reverseNames[colorNames[name]] = name;
 	}
 }
@@ -1384,9 +1385,9 @@ cs.get.rgb = function (string) {
 
 	var abbr = /^#([a-f0-9]{3,4})$/i;
 	var hex = /^#([a-f0-9]{6})([a-f0-9]{2})?$/i;
-	var rgba = /^rgba?\(\s*([+-]?\d+)\s*,\s*([+-]?\d+)\s*,\s*([+-]?\d+)\s*(?:,\s*([+-]?[\d\.]+)\s*)?\)$/;
-	var per = /^rgba?\(\s*([+-]?[\d\.]+)\%\s*,\s*([+-]?[\d\.]+)\%\s*,\s*([+-]?[\d\.]+)\%\s*(?:,\s*([+-]?[\d\.]+)\s*)?\)$/;
-	var keyword = /(\D+)/;
+	var rgba = /^rgba?\(\s*([+-]?\d+)(?=[\s,])\s*(?:,\s*)?([+-]?\d+)(?=[\s,])\s*(?:,\s*)?([+-]?\d+)\s*(?:[,|\/]\s*([+-]?[\d\.]+)(%?)\s*)?\)$/;
+	var per = /^rgba?\(\s*([+-]?[\d\.]+)\%\s*,?\s*([+-]?[\d\.]+)\%\s*,?\s*([+-]?[\d\.]+)\%\s*(?:[,|\/]\s*([+-]?[\d\.]+)(%?)\s*)?\)$/;
+	var keyword = /^(\w+)$/;
 
 	var rgb = [0, 0, 0, 1];
 	var match;
@@ -1423,7 +1424,11 @@ cs.get.rgb = function (string) {
 		}
 
 		if (match[4]) {
-			rgb[3] = parseFloat(match[4]);
+			if (match[5]) {
+				rgb[3] = parseFloat(match[4]) * 0.01;
+			} else {
+				rgb[3] = parseFloat(match[4]);
+			}
 		}
 	} else if (match = string.match(per)) {
 		for (i = 0; i < 3; i++) {
@@ -1431,19 +1436,22 @@ cs.get.rgb = function (string) {
 		}
 
 		if (match[4]) {
-			rgb[3] = parseFloat(match[4]);
+			if (match[5]) {
+				rgb[3] = parseFloat(match[4]) * 0.01;
+			} else {
+				rgb[3] = parseFloat(match[4]);
+			}
 		}
 	} else if (match = string.match(keyword)) {
 		if (match[1] === 'transparent') {
 			return [0, 0, 0, 0];
 		}
 
-		rgb = colorNames[match[1]];
-
-		if (!rgb) {
+		if (!hasOwnProperty.call(colorNames, match[1])) {
 			return null;
 		}
 
+		rgb = colorNames[match[1]];
 		rgb[3] = 1;
 
 		return rgb;
@@ -1464,12 +1472,12 @@ cs.get.hsl = function (string) {
 		return null;
 	}
 
-	var hsl = /^hsla?\(\s*([+-]?(?:\d{0,3}\.)?\d+)(?:deg)?\s*,?\s*([+-]?[\d\.]+)%\s*,?\s*([+-]?[\d\.]+)%\s*(?:[,|\/]\s*([+-]?[\d\.]+)\s*)?\)$/;
+	var hsl = /^hsla?\(\s*([+-]?(?:\d{0,3}\.)?\d+)(?:deg)?\s*,?\s*([+-]?[\d\.]+)%\s*,?\s*([+-]?[\d\.]+)%\s*(?:[,|\/]\s*([+-]?(?=\.\d|\d)(?:0|[1-9]\d*)?(?:\.\d*)?(?:[eE][+-]?\d+)?)\s*)?\)$/;
 	var match = string.match(hsl);
 
 	if (match) {
 		var alpha = parseFloat(match[4]);
-		var h = (parseFloat(match[1]) + 360) % 360;
+		var h = ((parseFloat(match[1]) % 360) + 360) % 360;
 		var s = clamp(parseFloat(match[2]), 0, 100);
 		var l = clamp(parseFloat(match[3]), 0, 100);
 		var a = clamp(isNaN(alpha) ? 1 : alpha, 0, 1);
@@ -1485,7 +1493,7 @@ cs.get.hwb = function (string) {
 		return null;
 	}
 
-	var hwb = /^hwb\(\s*([+-]?\d{0,3}(?:\.\d+)?)(?:deg)?\s*,\s*([+-]?[\d\.]+)%\s*,\s*([+-]?[\d\.]+)%\s*(?:,\s*([+-]?[\d\.]+)\s*)?\)$/;
+	var hwb = /^hwb\(\s*([+-]?\d{0,3}(?:\.\d+)?)(?:deg)?\s*,\s*([+-]?[\d\.]+)%\s*,\s*([+-]?[\d\.]+)%\s*(?:,\s*([+-]?(?=\.\d|\d)(?:0|[1-9]\d*)?(?:\.\d*)?(?:[eE][+-]?\d+)?)\s*)?\)$/;
 	var match = string.match(hwb);
 
 	if (match) {
@@ -1564,7 +1572,7 @@ function clamp(num, min, max) {
 }
 
 function hexDouble(num) {
-	var str = num.toString(16).toUpperCase();
+	var str = Math.round(num).toString(16).toUpperCase();
 	return (str.length < 2) ? '0' + str : str;
 }
 
@@ -4759,7 +4767,10 @@ var getContent = function (core, mode) {
     // When there is fragment for shadow edit, always use the cached fragment as document since HTML node in editor
     // has been changed by uncommitted shadow edit which should be ignored.
     var root = core.lifecycle.shadowEditFragment || core.contentDiv;
-    if (mode == 3 /* PlainText */) {
+    if (mode == 4 /* PlainTextFast */) {
+        content = root.textContent;
+    }
+    else if (mode == 3 /* PlainText */) {
         content = (0, roosterjs_editor_dom_1.getTextContent)(root);
     }
     else if (triggerExtractContentEvent || core.lifecycle.isDarkMode) {
@@ -5448,7 +5459,9 @@ function transformToDarkMode(element, getDarkColor) {
         var attrColor = element.getAttribute(names[1 /* HtmlColor */]);
         if (!element.dataset[names[2 /* CssDataSet */]] &&
             !element.dataset[names[3 /* HtmlDataSet */]] &&
-            (styleColor || attrColor)) {
+            (styleColor || attrColor) &&
+            styleColor != 'inherit' // For inherit style, no need to change it and let it keep inherit from parent element
+        ) {
             var newColor = getDarkColor(computedValues[index] || styleColor || attrColor);
             element.style.setProperty(names[0 /* CssColor */], newColor, 'important');
             element.dataset[names[2 /* CssDataSet */]] = styleColor || '';
@@ -5500,7 +5513,8 @@ exports.triggerEvent = void 0;
  * @param broadcast Set to true to skip the shouldHandleEventExclusively check
  */
 var triggerEvent = function (core, pluginEvent, broadcast) {
-    if (!core.lifecycle.shadowEditFragment &&
+    if ((!core.lifecycle.shadowEditFragment ||
+        pluginEvent.eventType == 12 /* BeforeDispose */) &&
         (broadcast || !core.plugins.some(function (plugin) { return handledExclusively(pluginEvent, plugin); }))) {
         core.plugins.forEach(function (plugin) {
             if (plugin.onPluginEvent) {
@@ -5641,6 +5655,9 @@ var CopyPastePlugin = /** @class */ (function () {
         return div;
     };
     CopyPastePlugin.prototype.cleanUpAndRestoreSelection = function (tempDiv, range) {
+        if (roosterjs_editor_dom_1.Browser.isAndroid) {
+            range.collapse();
+        }
         this.editor.select(range);
         tempDiv.style.backgroundColor = '';
         tempDiv.style.color = '';
@@ -6974,11 +6991,11 @@ function createCorePlugins(contentDiv, options) {
     return {
         typeInContainer: map.typeInContainer || new TypeInContainerPlugin_1.default(),
         edit: map.edit || new EditPlugin_1.default(),
+        pendingFormatState: map.pendingFormatState || new PendingFormatStatePlugin_1.default(),
         _placeholder: null,
         typeAfterLink: null,
         undo: map.undo || new UndoPlugin_1.default(options),
         domEvent: map.domEvent || new DOMEventPlugin_1.default(options, contentDiv),
-        pendingFormatState: map.pendingFormatState || new PendingFormatStatePlugin_1.default(),
         mouseUp: map.mouseUp || new MouseUpPlugin_1.default(),
         copyPaste: map.copyPaste || new CopyPastePlugin_1.default(options),
         entity: map.entity || new EntityPlugin_1.default(),
@@ -7059,7 +7076,7 @@ var Editor = /** @class */ (function () {
                 plugins.push(corePlugins[name]);
             }
         });
-        this.core = __assign(__assign({ contentDiv: contentDiv, api: __assign(__assign({}, coreApiMap_1.coreApiMap), (options.coreApiOverride || {})), plugins: plugins.filter(function (x) { return !!x; }) }, (0, createCorePlugins_1.getPluginState)(corePlugins)), { trustedHTMLHandler: options.trustedHTMLHandler || (function (html) { return html; }) });
+        this.core = __assign(__assign({ contentDiv: contentDiv, api: __assign(__assign({}, coreApiMap_1.coreApiMap), (options.coreApiOverride || {})), plugins: plugins.filter(function (x) { return !!x; }) }, (0, createCorePlugins_1.getPluginState)(corePlugins)), { trustedHTMLHandler: options.trustedHTMLHandler || (function (html) { return html; }), sizeTransformer: options.sizeTransformer });
         // 3. Initialize plugins
         this.core.plugins.forEach(function (plugin) { return plugin.initialize(_this); });
         // 4. Ensure user will type in a container node, not the editor content DIV
@@ -7069,7 +7086,9 @@ var Editor = /** @class */ (function () {
      * Dispose this editor, dispose all plugins and custom data
      */
     Editor.prototype.dispose = function () {
-        this.core.plugins.reverse().forEach(function (plugin) { return plugin.dispose(); });
+        for (var i = this.core.plugins.length - 1; i >= 0; i--) {
+            this.core.plugins[i].dispose();
+        }
         this.core = null;
     };
     /**
@@ -7652,6 +7671,12 @@ var Editor = /** @class */ (function () {
     Editor.prototype.getTrustedHTMLHandler = function () {
         return this.core.trustedHTMLHandler;
     };
+    /**
+     * Get a transformer function. It transform the size changes according to current situation.
+     */
+    Editor.prototype.getSizeTransformer = function () {
+        return this.core.sizeTransformer;
+    };
     return Editor;
 }());
 exports.default = Editor;
@@ -9236,6 +9261,7 @@ var HtmlSanitizer = /** @class */ (function () {
         this.unknownTagReplacement = options.unknownTagReplacement;
     }
     /**
+     * @deprecated Use new HtmlSanitizer().convertGlobalCssToInlineCss() instead
      * Convert global CSS to inline CSS if any
      * @param html HTML source
      * @param additionalStyleNodes (Optional) additional HTML STYLE elements used as global CSS
@@ -9247,6 +9273,7 @@ var HtmlSanitizer = /** @class */ (function () {
         return sanitizer.exec(html, true /*convertCssOnly*/);
     };
     /**
+     * @deprecated Use new HtmlSanitizer().sanitize() instead
      * Sanitize HTML string, remove any unused HTML node/attribute/CSS.
      * @param html HTML source string
      * @param options Options used for this sanitizing process
@@ -9260,6 +9287,7 @@ var HtmlSanitizer = /** @class */ (function () {
         return sanitizer.exec(html, options.convertCssOnly, currentStyles);
     };
     /**
+     * @deprecated Use HtmlSanitizer.convertGlobalCssToInlineCss() and HtmlSanitizer.sanitize() instead
      * Sanitize HTML string
      * This function will do the following work:
      * 1. Convert global CSS into inline CSS
@@ -9271,7 +9299,7 @@ var HtmlSanitizer = /** @class */ (function () {
      */
     HtmlSanitizer.prototype.exec = function (html, convertCssOnly, currentStyles) {
         var parser = new DOMParser();
-        var doc = parser.parseFromString(unsafeConvertToTrustedHTML(html) || '', 'text/html');
+        var doc = parser.parseFromString(html || '', 'text/html');
         if (doc && doc.body && doc.body.firstChild) {
             this.convertGlobalCssToInlineCss(doc);
             if (!convertCssOnly) {
@@ -9477,15 +9505,6 @@ var HtmlSanitizer = /** @class */ (function () {
     return HtmlSanitizer;
 }());
 exports.default = HtmlSanitizer;
-var trustedTypes = window.trustedTypes;
-var policy = trustedTypes === null || trustedTypes === void 0 ? void 0 : trustedTypes.createPolicy('roosterjsUnsafeConvertHTML', {
-    // This is unsafe. However, we only use this function for HtmlSanitizer which we will
-    // sanitize HTML tree by our own code. So we just directly return the HTML string here.
-    createHTML: function (html) { return html; },
-});
-var unsafeConvertToTrustedHTML = policy
-    ? function (html) { return policy.createHTML(html || ''); }
-    : function (html) { return html; };
 
 
 /***/ }),
@@ -13630,6 +13649,7 @@ function cloneNode(node) {
 
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Browser = exports.getBrowserInfo = void 0;
+var isAndroidRegex = /android/i;
 /**
  * Get current browser information from user agent string
  * @param userAgent The userAgent string of a browser
@@ -13665,6 +13685,7 @@ function getBrowserInfo(userAgent, appVersion) {
     }
     var isMac = appVersion.indexOf('Mac') != -1;
     var isWin = appVersion.indexOf('Win') != -1 || appVersion.indexOf('NT') != -1;
+    var isAndroid = isAndroidRegex.test(userAgent);
     return {
         isMac: isMac,
         isWin: isWin,
@@ -13676,6 +13697,7 @@ function getBrowserInfo(userAgent, appVersion) {
         isFirefox: isFirefox,
         isEdge: isEdge,
         isIEOrEdge: isIE || isEdge,
+        isAndroid: isAndroid,
     };
 }
 exports.getBrowserInfo = getBrowserInfo;
@@ -15873,6 +15895,9 @@ __exportStar(__webpack_require__(/*! ./Watermark */ "./packages/roosterjs-editor
 "use strict";
 
 Object.defineProperty(exports, "__esModule", { value: true });
+function defaultTransformer(size) {
+    return size;
+}
 /**
  * @internal
  * A helper class to help manage drag and drop to an HTML element
@@ -15887,12 +15912,13 @@ var DragAndDropHelper = /** @class */ (function () {
      * @param onSubmit A callback that will be invoked when event handler in handler object returns true
      * @param handler The event handler object, see DragAndDropHandler interface for more information
      */
-    function DragAndDropHelper(trigger, context, onSubmit, handler) {
+    function DragAndDropHelper(trigger, context, onSubmit, handler, sizeTransformer) {
         var _this = this;
         this.trigger = trigger;
         this.context = context;
         this.onSubmit = onSubmit;
         this.handler = handler;
+        this.sizeTransformer = sizeTransformer;
         this.onMouseDown = function (e) {
             var _a, _b;
             e.preventDefault();
@@ -15905,8 +15931,9 @@ var DragAndDropHelper = /** @class */ (function () {
         this.onMouseMove = function (e) {
             var _a, _b, _c;
             e.preventDefault();
-            var deltaX = e.pageX - _this.initX;
-            var deltaY = e.pageY - _this.initY;
+            var sizeTransformer = _this.sizeTransformer || defaultTransformer;
+            var deltaX = sizeTransformer(e.pageX - _this.initX);
+            var deltaY = sizeTransformer(e.pageY - _this.initY);
             if ((_b = (_a = _this.handler).onDragging) === null || _b === void 0 ? void 0 : _b.call(_a, _this.context, e, _this.initValue, deltaX, deltaY)) {
                 (_c = _this.onSubmit) === null || _c === void 0 ? void 0 : _c.call(_this, _this.context);
             }
@@ -16534,7 +16561,7 @@ function getCacheNextSibling(event, editor) {
 function prepareAutoBullet(editor, range) {
     var block = editor.getBlockElementAtNode(range.startContainer);
     var endNode = block === null || block === void 0 ? void 0 : block.getEndNode();
-    if (endNode && (0, roosterjs_editor_dom_1.getTagOfNode)(endNode) != 'BR' && (block === null || block === void 0 ? void 0 : block.getTextContent().trim()) === '') {
+    if (endNode && (0, roosterjs_editor_dom_1.getTagOfNode)(endNode) != 'BR') {
         var br = editor.getDocument().createElement('BR');
         if ((0, roosterjs_editor_dom_1.isBlockElement)(endNode)) {
             endNode.appendChild(br);
@@ -17193,9 +17220,7 @@ var ContextMenu = /** @class */ (function () {
     ContextMenu.prototype.initContainer = function (x, y) {
         if (!this.container) {
             this.container = (0, roosterjs_editor_dom_1.createElement)(5 /* ContextMenuWrapper */, this.editor.getDocument());
-            this.editor.insertNode(this.container, {
-                position: 4 /* Outside */,
-            });
+            this.editor.getDocument().body.appendChild(this.container);
         }
         this.container.style.left = x + 'px';
         this.container.style.top = y + 'px';
@@ -17294,7 +17319,7 @@ var CustomReplacePlugin = /** @class */ (function () {
      */
     CustomReplacePlugin.prototype.onPluginEvent = function (event) {
         var _this = this;
-        if (this.editor.isInIME() || event.eventType != 3 /* Input */) {
+        if (event.eventType != 3 /* Input */ || this.editor.isInIME()) {
             return;
         }
         // Exit early on input events that do not insert a replacement's final character.
@@ -18033,7 +18058,7 @@ var ImageEdit = /** @class */ (function () {
         wrapper.style.verticalAlign = 'bottom';
         wrapper.style.display = roosterjs_editor_dom_1.Browser.isSafari ? 'inline-block' : 'inline-flex';
         // Cache current src so that we can compare it after edit see if src is changed
-        this.lastSrc = this.image.src;
+        this.lastSrc = this.image.getAttribute('src');
         // Set image src to original src to help show editing UI, also it will be used when regenerate image dataURL after editing
         this.image.src = this.editInfo.src;
         this.image.style.position = 'absolute';
@@ -18086,7 +18111,7 @@ var ImageEdit = /** @class */ (function () {
         var wrapper = this.getImageWrapper(this.image);
         return wrapper
             ? getEditElements(wrapper, elementClass).map(function (element) {
-                return new DragAndDropHelper_1.default(element, __assign(__assign({}, commonContext), { x: element.dataset.x, y: element.dataset.y }), _this.updateWrapper, dragAndDrop);
+                return new DragAndDropHelper_1.default(element, __assign(__assign({}, commonContext), { x: element.dataset.x, y: element.dataset.y }), _this.updateWrapper, dragAndDrop, _this.editor.getSizeTransformer());
             })
             : [];
     };
@@ -18293,7 +18318,7 @@ function resizeByPercentage(editor, image, percentage, minWidth, minHeight) {
     if (!(0, isResizedTo_1.default)(image, percentage)) {
         loadImage(image, editInfo.src, function () {
             if (!editor.isDisposed() && editor.contains(image)) {
-                var lastSrc_1 = image.src;
+                var lastSrc_1 = image.getAttribute('src');
                 var _a = (0, getTargetSizeByPercentage_1.default)(editInfo, percentage), width = _a.width, height = _a.height;
                 editInfo.widthPx = Math.max(width, minWidth);
                 editInfo.heightPx = Math.max(height, minHeight);
@@ -18537,7 +18562,7 @@ function getEditInfoFromImage(image) {
 exports.getEditInfoFromImage = getEditInfoFromImage;
 function getInitialEditInfo(image) {
     return {
-        src: image.src,
+        src: image.getAttribute('src') || '',
         widthPx: image.clientWidth,
         heightPx: image.clientHeight,
         naturalWidth: image.naturalWidth,