roosterjs 8.12.0 → 8.13.0

package/dist/rooster.d.ts

@@ -1,4 +1,4 @@
-// Type definitions for roosterjs (Version 8.12.0)
+// Type definitions for roosterjs (Version 8.13.0)
 // Generated by dts tool from roosterjs
 // Project: https://github.com/Microsoft/roosterjs
 
@@ -771,7 +771,13 @@ 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
 }
 
     /**
@@ -2813,6 +2819,10 @@ 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;
 }
 
     /**
@@ -3013,6 +3023,12 @@ 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;
 }
 
     /**
@@ -3368,6 +3384,12 @@ 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;
 }
 
     /**
@@ -4059,6 +4081,15 @@ type DOMEventHandler = PluginEventType | DOMEventHandlerFunction | DOMEventHandl
  */
 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
+ */
+type SizeTransformer = (size: number) => number;
+
     /**
  * This produces a block element from a a node
  * It needs to account for various HTML structure. Examples:
@@ -5938,6 +5969,10 @@ 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.js

@@ -4768,7 +4768,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) {
@@ -5511,7 +5514,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) {
@@ -6988,11 +6992,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(),
@@ -7073,7 +7077,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
@@ -7083,7 +7087,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;
     };
     /**
@@ -7666,6 +7672,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;
@@ -15884,6 +15896,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
@@ -15898,12 +15913,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();
@@ -15916,8 +15932,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);
             }
@@ -17204,9 +17221,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';
@@ -17305,7 +17320,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.
@@ -18044,7 +18059,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';
@@ -18097,7 +18112,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());
             })
             : [];
     };
@@ -18304,7 +18319,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);
@@ -18548,7 +18563,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,