@azure/communication-react 1.21.0-beta.1 → 1.22.0-alpha-202411160017

package/dist/dist-esm/react-components/src/components/RichTextEditor/Plugins/CopyPastePlugin.js

@@ -7,10 +7,14 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
+/* @conditional-compile-remove(rich-text-editor) */
 import { scrollToBottomRichTextEditor } from '../../utils/RichTextEditorUtils';
 import { ContentChangedEventSource, PluginEventType } from '../../utils/RichTextEditorUtils';
+/* @conditional-compile-remove(rich-text-editor-image-upload) */
 import { getInlineImageAttributes } from '../../utils/RichTextEditorUtils';
+/* @conditional-compile-remove(rich-text-editor-image-upload) */
 import { _base64ToBlob, removeImageTags, _IMAGE_ATTRIBUTE_INLINE_IMAGE_FILE_NAME_KEY } from "../../../../../acs-ui-common/src";
+/* @conditional-compile-remove(rich-text-editor-image-upload) */
 import { v1 as generateGUID } from 'uuid';
 /**
  * CopyPastePlugin is a plugin for handling copy and paste events in the editor.
@@ -18,15 +22,20 @@ import { v1 as generateGUID } from 'uuid';
 export default class CopyPastePlugin {
     constructor() {
         this.editor = null;
+        /* @conditional-compile-remove(rich-text-editor-image-upload) */
         this.imageBase64DataMap = {};
+        /* @conditional-compile-remove(rich-text-editor-image-upload) */
         this.handleInlineImage = (event) => {
             if (event.eventType === PluginEventType.BeforePaste && event.pasteType === 'normal' && this.onInsertInlineImage) {
-                event.fragment.querySelectorAll('img').forEach(image => {
+                event.fragment.querySelectorAll('img').forEach((image) => {
                     // Assign a unique id to the image element so Contosos can identify the image element.
                     // We also use it internally such as in getRemovedInlineImages to compare images in the content with previous images
                     image.id = generateGUID();
                     const clipboardImage = event.clipboardData.image;
-                    const fileName = (clipboardImage === null || clipboardImage === void 0 ? void 0 : clipboardImage.name) || (clipboardImage === null || clipboardImage === void 0 ? void 0 : clipboardImage.type.replace('/', '.')) || image.getAttribute(_IMAGE_ATTRIBUTE_INLINE_IMAGE_FILE_NAME_KEY) || '';
+                    const fileName = (clipboardImage === null || clipboardImage === void 0 ? void 0 : clipboardImage.name) ||
+                        (clipboardImage === null || clipboardImage === void 0 ? void 0 : clipboardImage.type.replace('/', '.')) ||
+                        image.getAttribute(_IMAGE_ATTRIBUTE_INLINE_IMAGE_FILE_NAME_KEY) ||
+                        '';
                     // If the image src is an external url, call the onInsertInlineImage callback with the url.
                     let imageUrl = image.src;
                     if (image.src.startsWith('data:image/')) {
@@ -51,6 +60,7 @@ export default class CopyPastePlugin {
     }
     dispose() { }
     onPluginEvent(event) {
+        /* @conditional-compile-remove(rich-text-editor-image-upload) */
         if (event.eventType === PluginEventType.BeforeCutCopy) {
             event.clonedRoot.querySelectorAll('img').forEach((image) => __awaiter(this, void 0, void 0, function* () {
                 if (image.src.startsWith('blob:')) {
@@ -58,13 +68,15 @@ export default class CopyPastePlugin {
                     image.src = base64Data || image.src;
                 }
             }));
-        } // If onInsertInlineImage is not provided, we should remove the image tags before calling the onPaste callback
+        }
+        /* @conditional-compile-remove(rich-text-editor-image-upload) */
+        // If onInsertInlineImage is not provided, we should remove the image tags before calling the onPaste callback
         if (event.eventType === PluginEventType.BeforePaste && event.pasteType === 'normal' && !this.onInsertInlineImage) {
-            removeImageTags({
-                content: event.fragment
-            });
+            removeImageTags({ content: event.fragment });
         }
-        handleBeforePasteEvent(event, this.onPaste); // We should handle the onInsertInlineImage after the onPaste callback in case Contosos want to modify the image tags, especially the src attribute.
+        handleBeforePasteEvent(event, /* @conditional-compile-remove(rich-text-editor-image-upload) */ this.onPaste);
+        /* @conditional-compile-remove(rich-text-editor-image-upload) */
+        // We should handle the onInsertInlineImage after the onPaste callback in case Contosos want to modify the image tags, especially the src attribute.
         if (this.onInsertInlineImage) {
             this.handleInlineImage(event);
         }
@@ -78,11 +90,12 @@ export default class CopyPastePlugin {
  * @internal
  * Exported only for unit testing
  */
-export const handleBeforePasteEvent = (event, onPaste) => {
+export const handleBeforePasteEvent = (event, 
+/* @conditional-compile-remove(rich-text-editor-image-upload) */ onPaste) => {
     if (event.eventType === PluginEventType.BeforePaste && event.pasteType === 'normal') {
-        onPaste === null || onPaste === void 0 ? void 0 : onPaste({
-            content: event.fragment
-        });
+        /* @conditional-compile-remove(rich-text-editor-image-upload) */
+        onPaste === null || onPaste === void 0 ? void 0 : onPaste({ content: event.fragment });
+        /* @conditional-compile-remove(rich-text-editor-image-upload) */
         return;
     }
 };
@@ -92,6 +105,7 @@ export const handleBeforePasteEvent = (event, onPaste) => {
  */
 export const scrollToBottomAfterContentPaste = (event) => {
     if (event.eventType === PluginEventType.ContentChanged && event.source === ContentChangedEventSource.Paste) {
+        /* @conditional-compile-remove(rich-text-editor) */
         scrollToBottomRichTextEditor();
     }
 };

package/dist/dist-esm/react-components/src/components/RichTextEditor/Plugins/CopyPastePlugin.js.map

@@ -1 +1 @@
-{"version":3,"file":"CopyPastePlugin.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-components/src/components/RichTextEditor/Plugins/CopyPastePlugin.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\nimport type { PluginEvent, EditorPlugin, IEditor } from 'roosterjs-content-model-types';\nimport { scrollToBottomRichTextEditor } from '../../utils/RichTextEditorUtils';\nimport { ContentChangedEventSource, PluginEventType } from '../../utils/RichTextEditorUtils';\nimport { getInlineImageAttributes } from '../../utils/RichTextEditorUtils';\nimport { _base64ToBlob, removeImageTags, _IMAGE_ATTRIBUTE_INLINE_IMAGE_FILE_NAME_KEY } from '@internal/acs-ui-common';\nimport { v1 as generateGUID } from 'uuid';\n\n/**\n * CopyPastePlugin is a plugin for handling copy and paste events in the editor.\n */\nexport default class CopyPastePlugin implements EditorPlugin {\n  private editor: IEditor | null = null;\n  // don't set value in constructor to be able to update it without plugin recreation\n  onPaste?: (event: {\n    content: DocumentFragment;\n  }) => void;\n  onInsertInlineImage?: (imageAttributes: Record<string, string>) => void;\n  private imageBase64DataMap: Record<string, string> = {};\n  getName(): string {\n    return 'CopyPastePlugin';\n  }\n  initialize(editor: IEditor): void {\n    this.editor = editor;\n  }\n  dispose(): void {}\n  private handleInlineImage = (event: PluginEvent): void => {\n    if (event.eventType === PluginEventType.BeforePaste && event.pasteType === 'normal' && this.onInsertInlineImage) {\n      event.fragment.querySelectorAll('img').forEach(image => {\n        // Assign a unique id to the image element so Contosos can identify the image element.\n        // We also use it internally such as in getRemovedInlineImages to compare images in the content with previous images\n        image.id = generateGUID();\n        const clipboardImage = event.clipboardData.image;\n        const fileName = clipboardImage?.name || clipboardImage?.type.replace('/', '.') || image.getAttribute(_IMAGE_ATTRIBUTE_INLINE_IMAGE_FILE_NAME_KEY) || '';\n        // If the image src is an external url, call the onInsertInlineImage callback with the url.\n        let imageUrl = image.src;\n        if (image.src.startsWith('data:image/')) {\n          this.imageBase64DataMap[image.id] = image.src;\n          const blobImage = _base64ToBlob(image.src);\n          imageUrl = URL.createObjectURL(blobImage);\n        }\n        image.src = imageUrl;\n        image.alt = image.alt || 'image';\n        image.dataset.imageFileName = fileName;\n        const imageAttributes = getInlineImageAttributes(image);\n        this.onInsertInlineImage && this.onInsertInlineImage(imageAttributes);\n      });\n    }\n  };\n  onPluginEvent(event: PluginEvent): void {\n    if (event.eventType === PluginEventType.BeforeCutCopy) {\n      event.clonedRoot.querySelectorAll('img').forEach(async image => {\n        if (image.src.startsWith('blob:')) {\n          const base64Data = this.imageBase64DataMap[image.id];\n          image.src = base64Data || image.src;\n        }\n      });\n    } // If onInsertInlineImage is not provided, we should remove the image tags before calling the onPaste callback\n    if (event.eventType === PluginEventType.BeforePaste && event.pasteType === 'normal' && !this.onInsertInlineImage) {\n      removeImageTags({\n        content: event.fragment\n      });\n    }\n    handleBeforePasteEvent(event, this.onPaste); // We should handle the onInsertInlineImage after the onPaste callback in case Contosos want to modify the image tags, especially the src attribute.\n    if (this.onInsertInlineImage) {\n      this.handleInlineImage(event);\n    }\n    if (this.editor !== null && !this.editor.isDisposed()) {\n      // scroll the editor to the correct position after pasting content\n      scrollToBottomAfterContentPaste(event);\n    }\n  }\n}\n\n/**\n * @internal\n * Exported only for unit testing\n */\nexport const handleBeforePasteEvent = (event: PluginEvent, onPaste?: (event: {\n  content: DocumentFragment;\n}) => void): void => {\n  if (event.eventType === PluginEventType.BeforePaste && event.pasteType === 'normal') {\n    onPaste?.({\n      content: event.fragment\n    });\n    return;\n  }\n};\n\n/**\n * Update the scroll position of the editor after pasting content to ensure the content is visible.\n * @param event - The plugin event.\n */\nexport const scrollToBottomAfterContentPaste = (event: PluginEvent): void => {\n  if (event.eventType === PluginEventType.ContentChanged && event.source === ContentChangedEventSource.Paste) {\n    scrollToBottomRichTextEditor();\n  }\n};"]}
+{"version":3,"file":"CopyPastePlugin.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/RichTextEditor/Plugins/CopyPastePlugin.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\nimport type { PluginEvent, EditorPlugin, IEditor } from 'roosterjs-content-model-types';\n/* @conditional-compile-remove(rich-text-editor) */\nimport { scrollToBottomRichTextEditor } from '../../utils/RichTextEditorUtils';\nimport { ContentChangedEventSource, PluginEventType } from '../../utils/RichTextEditorUtils';\n/* @conditional-compile-remove(rich-text-editor-image-upload) */\nimport { getInlineImageAttributes } from '../../utils/RichTextEditorUtils';\n/* @conditional-compile-remove(rich-text-editor-image-upload) */\nimport { _base64ToBlob, removeImageTags, _IMAGE_ATTRIBUTE_INLINE_IMAGE_FILE_NAME_KEY } from '@internal/acs-ui-common';\n/* @conditional-compile-remove(rich-text-editor-image-upload) */\nimport { v1 as generateGUID } from 'uuid';\n\n/**\n * CopyPastePlugin is a plugin for handling copy and paste events in the editor.\n */\nexport default class CopyPastePlugin implements EditorPlugin {\n  private editor: IEditor | null = null;\n  // don't set value in constructor to be able to update it without plugin recreation\n  /* @conditional-compile-remove(rich-text-editor-image-upload) */\n  onPaste?: (event: { content: DocumentFragment }) => void;\n  /* @conditional-compile-remove(rich-text-editor-image-upload) */\n  onInsertInlineImage?: (imageAttributes: Record<string, string>) => void;\n  /* @conditional-compile-remove(rich-text-editor-image-upload) */\n  private imageBase64DataMap: Record<string, string> = {};\n\n  getName(): string {\n    return 'CopyPastePlugin';\n  }\n\n  initialize(editor: IEditor): void {\n    this.editor = editor;\n  }\n\n  dispose(): void {}\n\n  /* @conditional-compile-remove(rich-text-editor-image-upload) */\n  private handleInlineImage = (event: PluginEvent): void => {\n    if (event.eventType === PluginEventType.BeforePaste && event.pasteType === 'normal' && this.onInsertInlineImage) {\n      event.fragment.querySelectorAll('img').forEach((image) => {\n        // Assign a unique id to the image element so Contosos can identify the image element.\n        // We also use it internally such as in getRemovedInlineImages to compare images in the content with previous images\n        image.id = generateGUID();\n\n        const clipboardImage = event.clipboardData.image;\n        const fileName =\n          clipboardImage?.name ||\n          clipboardImage?.type.replace('/', '.') ||\n          image.getAttribute(_IMAGE_ATTRIBUTE_INLINE_IMAGE_FILE_NAME_KEY) ||\n          '';\n        // If the image src is an external url, call the onInsertInlineImage callback with the url.\n        let imageUrl = image.src;\n        if (image.src.startsWith('data:image/')) {\n          this.imageBase64DataMap[image.id] = image.src;\n\n          const blobImage = _base64ToBlob(image.src);\n          imageUrl = URL.createObjectURL(blobImage);\n        }\n\n        image.src = imageUrl;\n        image.alt = image.alt || 'image';\n\n        image.dataset.imageFileName = fileName;\n\n        const imageAttributes = getInlineImageAttributes(image);\n\n        this.onInsertInlineImage && this.onInsertInlineImage(imageAttributes);\n      });\n    }\n  };\n\n  onPluginEvent(event: PluginEvent): void {\n    /* @conditional-compile-remove(rich-text-editor-image-upload) */\n    if (event.eventType === PluginEventType.BeforeCutCopy) {\n      event.clonedRoot.querySelectorAll('img').forEach(async (image) => {\n        if (image.src.startsWith('blob:')) {\n          const base64Data = this.imageBase64DataMap[image.id];\n          image.src = base64Data || image.src;\n        }\n      });\n    }\n\n    /* @conditional-compile-remove(rich-text-editor-image-upload) */\n    // If onInsertInlineImage is not provided, we should remove the image tags before calling the onPaste callback\n    if (event.eventType === PluginEventType.BeforePaste && event.pasteType === 'normal' && !this.onInsertInlineImage) {\n      removeImageTags({ content: event.fragment });\n    }\n\n    handleBeforePasteEvent(event, /* @conditional-compile-remove(rich-text-editor-image-upload) */ this.onPaste);\n\n    /* @conditional-compile-remove(rich-text-editor-image-upload) */\n    // We should handle the onInsertInlineImage after the onPaste callback in case Contosos want to modify the image tags, especially the src attribute.\n    if (this.onInsertInlineImage) {\n      this.handleInlineImage(event);\n    }\n\n    if (this.editor !== null && !this.editor.isDisposed()) {\n      // scroll the editor to the correct position after pasting content\n      scrollToBottomAfterContentPaste(event);\n    }\n  }\n}\n\n/**\n * @internal\n * Exported only for unit testing\n */\nexport const handleBeforePasteEvent = (\n  event: PluginEvent,\n  /* @conditional-compile-remove(rich-text-editor-image-upload) */ onPaste?: (event: {\n    content: DocumentFragment;\n  }) => void\n): void => {\n  if (event.eventType === PluginEventType.BeforePaste && event.pasteType === 'normal') {\n    /* @conditional-compile-remove(rich-text-editor-image-upload) */\n    onPaste?.({ content: event.fragment });\n    /* @conditional-compile-remove(rich-text-editor-image-upload) */\n    return;\n  }\n};\n\n/**\n * Update the scroll position of the editor after pasting content to ensure the content is visible.\n * @param event - The plugin event.\n */\nexport const scrollToBottomAfterContentPaste = (event: PluginEvent): void => {\n  if (event.eventType === PluginEventType.ContentChanged && event.source === ContentChangedEventSource.Paste) {\n    /* @conditional-compile-remove(rich-text-editor) */\n    scrollToBottomRichTextEditor();\n  }\n};\n"]}

package/dist/dist-esm/react-components/src/components/RichTextEditor/Plugins/KeyboardInputPlugin.js.map

@@ -1 +1 @@
-{"version":3,"file":"KeyboardInputPlugin.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-components/src/components/RichTextEditor/Plugins/KeyboardInputPlugin.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAGlC,OAAO,EAAE,eAAe,EAAE,MAAM,iCAAiC,CAAC;AAElE;;GAEG;AACH,MAAM,OAAO,mBAAmB;IAAhC;QACE,4FAA4F;QAC5F,cAAS,GAA6C,IAAI,CAAC;IAW7D,CAAC;IAVC,OAAO;QACL,OAAO,qBAAqB,CAAC;IAC/B,CAAC;IACD,UAAU,KAAU,CAAC;IACrB,OAAO,KAAU,CAAC;IAClB,aAAa,CAAC,KAAkB;QAC9B,IAAI,IAAI,CAAC,SAAS,IAAI,KAAK,CAAC,SAAS,KAAK,eAAe,CAAC,OAAO,IAAI,KAAK,CAAC,QAAQ,YAAY,aAAa,EAAE,CAAC;YAC7G,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;QACjC,CAAC;IACH,CAAC;CACF","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport type { PluginEvent, EditorPlugin } from 'roosterjs-content-model-types';\nimport { PluginEventType } from '../../utils/RichTextEditorUtils';\n\n/**\n * KeyboardInputPlugin is a plugin for handling keyboard events in the editor.\n */\nexport class KeyboardInputPlugin implements EditorPlugin {\n  // don't set callback in constructor to be able to update callback without plugin recreation\n  onKeyDown?: ((event: KeyboardEvent) => void) | null = null;\n  getName(): string {\n    return 'KeyboardInputPlugin';\n  }\n  initialize(): void {}\n  dispose(): void {}\n  onPluginEvent(event: PluginEvent): void {\n    if (this.onKeyDown && event.eventType === PluginEventType.KeyDown && event.rawEvent instanceof KeyboardEvent) {\n      this.onKeyDown(event.rawEvent);\n    }\n  }\n}"]}
+{"version":3,"file":"KeyboardInputPlugin.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/RichTextEditor/Plugins/KeyboardInputPlugin.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAGlC,OAAO,EAAE,eAAe,EAAE,MAAM,iCAAiC,CAAC;AAElE;;GAEG;AACH,MAAM,OAAO,mBAAmB;IAAhC;QACE,4FAA4F;QAC5F,cAAS,GAA6C,IAAI,CAAC;IAe7D,CAAC;IAbC,OAAO;QACL,OAAO,qBAAqB,CAAC;IAC/B,CAAC;IAED,UAAU,KAAU,CAAC;IAErB,OAAO,KAAU,CAAC;IAElB,aAAa,CAAC,KAAkB;QAC9B,IAAI,IAAI,CAAC,SAAS,IAAI,KAAK,CAAC,SAAS,KAAK,eAAe,CAAC,OAAO,IAAI,KAAK,CAAC,QAAQ,YAAY,aAAa,EAAE,CAAC;YAC7G,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;QACjC,CAAC;IACH,CAAC;CACF","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport type { PluginEvent, EditorPlugin } from 'roosterjs-content-model-types';\nimport { PluginEventType } from '../../utils/RichTextEditorUtils';\n\n/**\n * KeyboardInputPlugin is a plugin for handling keyboard events in the editor.\n */\nexport class KeyboardInputPlugin implements EditorPlugin {\n  // don't set callback in constructor to be able to update callback without plugin recreation\n  onKeyDown?: ((event: KeyboardEvent) => void) | null = null;\n\n  getName(): string {\n    return 'KeyboardInputPlugin';\n  }\n\n  initialize(): void {}\n\n  dispose(): void {}\n\n  onPluginEvent(event: PluginEvent): void {\n    if (this.onKeyDown && event.eventType === PluginEventType.KeyDown && event.rawEvent instanceof KeyboardEvent) {\n      this.onKeyDown(event.rawEvent);\n    }\n  }\n}\n"]}

package/dist/dist-esm/react-components/src/components/RichTextEditor/Plugins/PlaceholderPlugin.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlaceholderPlugin.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-components/src/components/RichTextEditor/Plugins/PlaceholderPlugin.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAClC,OAAO,EAAE,eAAe,EAAE,MAAM,iCAAiC,CAAC;AAGlE;;GAEG;AACH,MAAM,OAAO,iBAAkB,SAAQ,eAAe;IAAtD;;QACU,uBAAkB,GAAY,KAAK,CAAC;QACpC,gBAAW,GAAmB,IAAI,CAAC;IA8B7C,CAAC;IA7BC,iBAAiB,CAAC,WAAmB;QACnC,IAAI,CAAC,SAAS,GAAG,WAAW,CAAC;QAC7B,uDAAuD;QACvD,mEAAmE;QACnE,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,kBAAkB,EAAE,CAAC;YAChD,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;YAC5B,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QAC9B,CAAC;IACH,CAAC;IACD,UAAU,CAAC,MAAe;QACxB,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC;QAC1B,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC;QAEzB,uFAAuF;QACvF,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QAC5B,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IAC9B,CAAC;IACD,OAAO;QACL,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;QACxB,KAAK,CAAC,OAAO,EAAE,CAAC;IAClB,CAAC;IACS,IAAI,CAAC,MAAe;QAC5B,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QACnB,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC;IACjC,CAAC;IACS,IAAI,CAAC,MAAe;QAC5B,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QACnB,IAAI,CAAC,kBAAkB,GAAG,KAAK,CAAC;IAClC,CAAC;CACF","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\nimport { WatermarkPlugin } from 'roosterjs-content-model-plugins';\nimport type { IEditor } from 'roosterjs-content-model-types';\n\n/**\n * PlaceholderPlugin is a plugin for displaying placeholder and handle localization for it in the editor.\n */\nexport class PlaceholderPlugin extends WatermarkPlugin {\n  private isPlaceholderShown: boolean = false;\n  private editorValue: IEditor | null = null;\n  updatePlaceholder(placeholder: string): void {\n    this.watermark = placeholder;\n    // hide and show the placeholder to show the latest one\n    // this needs to be done only if the placeholder is currently shown\n    if (this.editorValue && this.isPlaceholderShown) {\n      this.hide(this.editorValue);\n      this.show(this.editorValue);\n    }\n  }\n  initialize(editor: IEditor): void {\n    this.editorValue = editor;\n    super.initialize(editor);\n\n    // Hide/show the placeholder as workaround for the placeholder not hiding in some cases\n    this.hide(this.editorValue);\n    this.show(this.editorValue);\n  }\n  dispose(): void {\n    this.editorValue = null;\n    super.dispose();\n  }\n  protected show(editor: IEditor): void {\n    super.show(editor);\n    this.isPlaceholderShown = true;\n  }\n  protected hide(editor: IEditor): void {\n    super.hide(editor);\n    this.isPlaceholderShown = false;\n  }\n}"]}
+{"version":3,"file":"PlaceholderPlugin.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/RichTextEditor/Plugins/PlaceholderPlugin.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAClC,OAAO,EAAE,eAAe,EAAE,MAAM,iCAAiC,CAAC;AAGlE;;GAEG;AACH,MAAM,OAAO,iBAAkB,SAAQ,eAAe;IAAtD;;QACU,uBAAkB,GAAY,KAAK,CAAC;QACpC,gBAAW,GAAmB,IAAI,CAAC;IA+B7C,CAAC;IA7BC,iBAAiB,CAAC,WAAmB;QACnC,IAAI,CAAC,SAAS,GAAG,WAAW,CAAC;QAC7B,uDAAuD;QACvD,mEAAmE;QACnE,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,kBAAkB,EAAE,CAAC;YAChD,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;YAC5B,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QAC9B,CAAC;IACH,CAAC;IACD,UAAU,CAAC,MAAe;QACxB,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC;QAC1B,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC;QAEzB,uFAAuF;QACvF,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QAC5B,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IAC9B,CAAC;IACD,OAAO;QACL,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;QACxB,KAAK,CAAC,OAAO,EAAE,CAAC;IAClB,CAAC;IACS,IAAI,CAAC,MAAe;QAC5B,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QACnB,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC;IACjC,CAAC;IACS,IAAI,CAAC,MAAe;QAC5B,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QACnB,IAAI,CAAC,kBAAkB,GAAG,KAAK,CAAC;IAClC,CAAC;CACF","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\nimport { WatermarkPlugin } from 'roosterjs-content-model-plugins';\nimport type { IEditor } from 'roosterjs-content-model-types';\n\n/**\n * PlaceholderPlugin is a plugin for displaying placeholder and handle localization for it in the editor.\n */\nexport class PlaceholderPlugin extends WatermarkPlugin {\n  private isPlaceholderShown: boolean = false;\n  private editorValue: IEditor | null = null;\n\n  updatePlaceholder(placeholder: string): void {\n    this.watermark = placeholder;\n    // hide and show the placeholder to show the latest one\n    // this needs to be done only if the placeholder is currently shown\n    if (this.editorValue && this.isPlaceholderShown) {\n      this.hide(this.editorValue);\n      this.show(this.editorValue);\n    }\n  }\n  initialize(editor: IEditor): void {\n    this.editorValue = editor;\n    super.initialize(editor);\n\n    // Hide/show the placeholder as workaround for the placeholder not hiding in some cases\n    this.hide(this.editorValue);\n    this.show(this.editorValue);\n  }\n  dispose(): void {\n    this.editorValue = null;\n    super.dispose();\n  }\n  protected show(editor: IEditor): void {\n    super.show(editor);\n    this.isPlaceholderShown = true;\n  }\n  protected hide(editor: IEditor): void {\n    super.hide(editor);\n    this.isPlaceholderShown = false;\n  }\n}\n"]}

package/dist/dist-esm/react-components/src/components/RichTextEditor/Plugins/RichTextToolbarPlugin.js

@@ -51,10 +51,12 @@ export class RichTextToolbarPlugin {
         if (this.editor && this.onFormatChanged) {
             const newFormatState = getFormatState(this.editor);
             // use keys from the format that has more keys or the new format state if there is no current format state
-            const keys = !this.formatState || getObjectKeys(newFormatState).length > getObjectKeys(this.formatState).length ? getObjectKeys(newFormatState) : getObjectKeys(this.formatState);
+            const keys = !this.formatState || getObjectKeys(newFormatState).length > getObjectKeys(this.formatState).length
+                ? getObjectKeys(newFormatState)
+                : getObjectKeys(this.formatState);
             // check if there is any difference between the new format state and the current format state
             // otherwise the states will produce new objects every time even when the format state is the same
-            if (!this.formatState || keys.some(key => { var _a; return newFormatState[key] !== ((_a = this.formatState) === null || _a === void 0 ? void 0 : _a[key]); })) {
+            if (!this.formatState || keys.some((key) => { var _a; return newFormatState[key] !== ((_a = this.formatState) === null || _a === void 0 ? void 0 : _a[key]); })) {
                 this.formatState = newFormatState;
                 this.onFormatChanged(newFormatState);
             }

package/dist/dist-esm/react-components/src/components/RichTextEditor/Plugins/RichTextToolbarPlugin.js.map

@@ -1 +1 @@
-{"version":3,"file":"RichTextToolbarPlugin.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-components/src/components/RichTextEditor/Plugins/RichTextToolbarPlugin.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC7D,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAE5D,OAAO,EAAE,eAAe,EAAE,MAAM,iCAAiC,CAAC;AAElE;;GAEG;AACH,MAAM,OAAO,qBAAqB;IAAlC;QACU,gBAAW,GAAmC,IAAI,CAAC;QACnD,WAAM,GAAmB,IAAI,CAAC;QACtC,oBAAe,GAA4D,IAAI,CAAC;IAmDlF,CAAC;IAlDC,OAAO;QACL,OAAO,uBAAuB,CAAC;IACjC,CAAC;IACD,UAAU,CAAC,MAAe;QACxB,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;IACvB,CAAC;IACD,OAAO;QACL,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;IACrB,CAAC;IACD,aAAa,CAAC,KAAkB;QAC9B,QAAQ,KAAK,CAAC,SAAS,EAAE,CAAC;YACxB,4GAA4G;YAC5G,KAAK,eAAe,CAAC,WAAW,CAAC;YACjC,KAAK,eAAe,CAAC,cAAc,CAAC;YACpC,KAAK,eAAe,CAAC,WAAW,CAAC;YACjC,KAAK,eAAe,CAAC,OAAO,CAAC;YAC7B,KAAK,eAAe,CAAC,OAAO;gBAC1B,IAAI,CAAC,YAAY,EAAE,CAAC;gBACpB,MAAM;QACV,CAAC;IACH,CAAC;IAED;;;OAGG;IACH,oBAAoB,CAAC,YAAuC;QAC1D,IAAI,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,UAAU,EAAE,EAAE,CAAC;YAC7C,YAAY,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;YAC1B,IAAI,CAAC,YAAY,EAAE,CAAC;QACtB,CAAC;IACH,CAAC;IAED;;;OAGG;IACH,YAAY;QACV,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,eAAe,EAAE,CAAC;YACxC,MAAM,cAAc,GAAG,cAAc,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;YACnD,0GAA0G;YAC1G,MAAM,IAAI,GAAG,CAAC,IAAI,CAAC,WAAW,IAAI,aAAa,CAAC,cAAc,CAAC,CAAC,MAAM,GAAG,aAAa,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;YAClL,6FAA6F;YAC7F,kGAAkG;YAClG,IAAI,CAAC,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,WAAC,OAAA,cAAc,CAAC,GAAG,CAAC,MAAK,MAAA,IAAI,CAAC,WAAW,0CAAG,GAAG,CAAC,CAAA,CAAA,EAAA,CAAC,EAAE,CAAC;gBAC3F,IAAI,CAAC,WAAW,GAAG,cAAc,CAAC;gBAClC,IAAI,CAAC,eAAe,CAAC,cAAc,CAAC,CAAC;YACvC,CAAC;QACH,CAAC;IACH,CAAC;CACF","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { getFormatState } from 'roosterjs-content-model-api';\nimport { getObjectKeys } from 'roosterjs-content-model-dom';\nimport type { ContentModelFormatState, EditorPlugin, IEditor, PluginEvent } from 'roosterjs-content-model-types';\nimport { PluginEventType } from '../../utils/RichTextEditorUtils';\n\n/**\n * KeyboardInputPlugin is a plugin for handling keyboard events in the editor.\n */\nexport class RichTextToolbarPlugin implements EditorPlugin {\n  private formatState: ContentModelFormatState | null = null;\n  private editor: IEditor | null = null;\n  onFormatChanged: ((formatState: ContentModelFormatState) => void) | null = null;\n  getName(): string {\n    return 'RichTextToolbarPlugin';\n  }\n  initialize(editor: IEditor): void {\n    this.editor = editor;\n  }\n  dispose(): void {\n    this.editor = null;\n  }\n  onPluginEvent(event: PluginEvent): void {\n    switch (event.eventType) {\n      // KeyDown and MouseUp are used to update the state when the editor is already shown and focused by the user\n      case PluginEventType.EditorReady:\n      case PluginEventType.ContentChanged:\n      case PluginEventType.ZoomChanged:\n      case PluginEventType.KeyDown:\n      case PluginEventType.MouseUp:\n        this.updateFormat();\n        break;\n    }\n  }\n\n  /**\n   * Handles the click event of a toolbar button.\n   * @param buttonAction - The action to be performed when the button is clicked.\n   */\n  onToolbarButtonClick(buttonAction: (editor: IEditor) => void): void {\n    if (this.editor && !this.editor.isDisposed()) {\n      buttonAction(this.editor);\n      this.updateFormat();\n    }\n  }\n\n  /**\n   * Updates the format state of the rich text editor and triggers the `onFormatChanged` callback\n   * if there is any difference between the new and the current format states.\n   */\n  updateFormat(): void {\n    if (this.editor && this.onFormatChanged) {\n      const newFormatState = getFormatState(this.editor);\n      // use keys from the format that has more keys or the new format state if there is no current format state\n      const keys = !this.formatState || getObjectKeys(newFormatState).length > getObjectKeys(this.formatState).length ? getObjectKeys(newFormatState) : getObjectKeys(this.formatState);\n      // check if there is any difference between the new format state and the current format state\n      // otherwise the states will produce new objects every time even when the format state is the same\n      if (!this.formatState || keys.some(key => newFormatState[key] !== this.formatState?.[key])) {\n        this.formatState = newFormatState;\n        this.onFormatChanged(newFormatState);\n      }\n    }\n  }\n}"]}
+{"version":3,"file":"RichTextToolbarPlugin.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/RichTextEditor/Plugins/RichTextToolbarPlugin.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC7D,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAE5D,OAAO,EAAE,eAAe,EAAE,MAAM,iCAAiC,CAAC;AAElE;;GAEG;AACH,MAAM,OAAO,qBAAqB;IAAlC;QACU,gBAAW,GAAmC,IAAI,CAAC;QACnD,WAAM,GAAmB,IAAI,CAAC;QACtC,oBAAe,GAA4D,IAAI,CAAC;IA0DlF,CAAC;IAxDC,OAAO;QACL,OAAO,uBAAuB,CAAC;IACjC,CAAC;IAED,UAAU,CAAC,MAAe;QACxB,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;IACvB,CAAC;IAED,OAAO;QACL,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;IACrB,CAAC;IAED,aAAa,CAAC,KAAkB;QAC9B,QAAQ,KAAK,CAAC,SAAS,EAAE,CAAC;YACxB,4GAA4G;YAC5G,KAAK,eAAe,CAAC,WAAW,CAAC;YACjC,KAAK,eAAe,CAAC,cAAc,CAAC;YACpC,KAAK,eAAe,CAAC,WAAW,CAAC;YACjC,KAAK,eAAe,CAAC,OAAO,CAAC;YAC7B,KAAK,eAAe,CAAC,OAAO;gBAC1B,IAAI,CAAC,YAAY,EAAE,CAAC;gBACpB,MAAM;QACV,CAAC;IACH,CAAC;IAED;;;OAGG;IACH,oBAAoB,CAAC,YAAuC;QAC1D,IAAI,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,UAAU,EAAE,EAAE,CAAC;YAC7C,YAAY,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;YAC1B,IAAI,CAAC,YAAY,EAAE,CAAC;QACtB,CAAC;IACH,CAAC;IAED;;;OAGG;IACH,YAAY;QACV,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,eAAe,EAAE,CAAC;YACxC,MAAM,cAAc,GAAG,cAAc,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;YACnD,0GAA0G;YAC1G,MAAM,IAAI,GACR,CAAC,IAAI,CAAC,WAAW,IAAI,aAAa,CAAC,cAAc,CAAC,CAAC,MAAM,GAAG,aAAa,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,MAAM;gBAChG,CAAC,CAAC,aAAa,CAAC,cAAc,CAAC;gBAC/B,CAAC,CAAC,aAAa,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;YACtC,6FAA6F;YAC7F,kGAAkG;YAClG,IAAI,CAAC,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,EAAE,EAAE,WAAC,OAAA,cAAc,CAAC,GAAG,CAAC,MAAK,MAAA,IAAI,CAAC,WAAW,0CAAG,GAAG,CAAC,CAAA,CAAA,EAAA,CAAC,EAAE,CAAC;gBAC7F,IAAI,CAAC,WAAW,GAAG,cAAc,CAAC;gBAClC,IAAI,CAAC,eAAe,CAAC,cAAc,CAAC,CAAC;YACvC,CAAC;QACH,CAAC;IACH,CAAC;CACF","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { getFormatState } from 'roosterjs-content-model-api';\nimport { getObjectKeys } from 'roosterjs-content-model-dom';\nimport type { ContentModelFormatState, EditorPlugin, IEditor, PluginEvent } from 'roosterjs-content-model-types';\nimport { PluginEventType } from '../../utils/RichTextEditorUtils';\n\n/**\n * KeyboardInputPlugin is a plugin for handling keyboard events in the editor.\n */\nexport class RichTextToolbarPlugin implements EditorPlugin {\n  private formatState: ContentModelFormatState | null = null;\n  private editor: IEditor | null = null;\n  onFormatChanged: ((formatState: ContentModelFormatState) => void) | null = null;\n\n  getName(): string {\n    return 'RichTextToolbarPlugin';\n  }\n\n  initialize(editor: IEditor): void {\n    this.editor = editor;\n  }\n\n  dispose(): void {\n    this.editor = null;\n  }\n\n  onPluginEvent(event: PluginEvent): void {\n    switch (event.eventType) {\n      // KeyDown and MouseUp are used to update the state when the editor is already shown and focused by the user\n      case PluginEventType.EditorReady:\n      case PluginEventType.ContentChanged:\n      case PluginEventType.ZoomChanged:\n      case PluginEventType.KeyDown:\n      case PluginEventType.MouseUp:\n        this.updateFormat();\n        break;\n    }\n  }\n\n  /**\n   * Handles the click event of a toolbar button.\n   * @param buttonAction - The action to be performed when the button is clicked.\n   */\n  onToolbarButtonClick(buttonAction: (editor: IEditor) => void): void {\n    if (this.editor && !this.editor.isDisposed()) {\n      buttonAction(this.editor);\n      this.updateFormat();\n    }\n  }\n\n  /**\n   * Updates the format state of the rich text editor and triggers the `onFormatChanged` callback\n   * if there is any difference between the new and the current format states.\n   */\n  updateFormat(): void {\n    if (this.editor && this.onFormatChanged) {\n      const newFormatState = getFormatState(this.editor);\n      // use keys from the format that has more keys or the new format state if there is no current format state\n      const keys =\n        !this.formatState || getObjectKeys(newFormatState).length > getObjectKeys(this.formatState).length\n          ? getObjectKeys(newFormatState)\n          : getObjectKeys(this.formatState);\n      // check if there is any difference between the new format state and the current format state\n      // otherwise the states will produce new objects every time even when the format state is the same\n      if (!this.formatState || keys.some((key) => newFormatState[key] !== this.formatState?.[key])) {\n        this.formatState = newFormatState;\n        this.onFormatChanged(newFormatState);\n      }\n    }\n  }\n}\n"]}

package/dist/dist-esm/react-components/src/components/RichTextEditor/Plugins/TableEditContextMenuProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableEditContextMenuProvider.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-components/src/components/RichTextEditor/Plugins/TableEditContextMenuProvider.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,4BAA4B,EAAE,MAAM,gCAAgC,CAAC;AAE9E;;GAEG;AACH,MAAM,OAAO,4BAA4B;IAAzC;QACU,WAAM,GAAmB,IAAI,CAAC;QACtC,YAAO,GAA6B,EAAE,CAAC;QAC/B,UAAK,GAAiC,IAAI,CAAC;IA4BrD,CAAC;IA3BC,aAAa,CAAC,OAAiC;QAC7C,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;QACvB,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAChB,IAAI,CAAC,KAAK,GAAG,4BAA4B,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;QACvE,CAAC;IACH,CAAC;IACD,OAAO;QACL,OAAO,8BAA8B,CAAC;IACxC,CAAC;IACD,UAAU,CAAC,MAAe;QACxB,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;QACrB,IAAI,CAAC,KAAK,GAAG,4BAA4B,CAAC,MAAM,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;IAClE,CAAC;IAED;;OAEG;IACH,OAAO;QACL,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;IACrB,CAAC;IACD,mBAAmB,CAAC,IAAU;QAC5B,IAAI,IAAI,CAAC,MAAM,IAAI,eAAe,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC;YACtD,OAAO,IAAI,CAAC,KAAK,CAAC;QACpB,CAAC;aAAM,CAAC;YACN,OAAO,IAAI,CAAC;QACd,CAAC;IACH,CAAC;CACF;AACD,MAAM,eAAe,GAAG,CAAC,MAAe,EAAE,IAAU,EAAW,EAAE;IAC/D,MAAM,SAAS,GAAG,MAAM,CAAC,YAAY,EAAE,CAAC;IACxC,MAAM,EAAE,GAAG,SAAS,CAAC,0BAA0B,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;IAC/D,MAAM,KAAK,GAAG,EAAE,IAAI,SAAS,CAAC,0BAA0B,CAAC,EAAE,EAAE,OAAO,CAAC,CAAC;IACtE,OAAO,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,iBAAiB,MAAK,IAAI,CAAC;AAC3C,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\nimport type { ContextMenuProvider, IEditor } from 'roosterjs-content-model-types';\nimport { RichTextStrings } from '../RichTextSendBox';\nimport { IContextualMenuItem } from '@fluentui/react';\nimport { getTableEditContextMenuItems } from '../../utils/RichTextTableUtils';\n\n/**\n * Provides a context menu for editing tables in the rich text editor.\n */\nexport class TableEditContextMenuProvider implements ContextMenuProvider<IContextualMenuItem> {\n  private editor: IEditor | null = null;\n  strings: Partial<RichTextStrings> = {};\n  private items: IContextualMenuItem[] | null = null;\n  updateStrings(strings: Partial<RichTextStrings>): void {\n    this.strings = strings;\n    if (this.editor) {\n      this.items = getTableEditContextMenuItems(this.editor, this.strings);\n    }\n  }\n  getName(): string {\n    return 'TableEditContextMenuProvider';\n  }\n  initialize(editor: IEditor): void {\n    this.editor = editor;\n    this.items = getTableEditContextMenuItems(editor, this.strings);\n  }\n\n  /**\n   * Dispose this plugin\n   */\n  dispose(): void {\n    this.editor = null;\n  }\n  getContextMenuItems(node: Node): IContextualMenuItem[] | null {\n    if (this.editor && isTableEditable(this.editor, node)) {\n      return this.items;\n    } else {\n      return null;\n    }\n  }\n}\nconst isTableEditable = (editor: IEditor, node: Node): boolean => {\n  const domHelper = editor.getDOMHelper();\n  const td = domHelper.findClosestElementAncestor(node, 'TD,TH');\n  const table = td && domHelper.findClosestElementAncestor(td, 'table');\n  return table?.isContentEditable === true;\n};"]}
+{"version":3,"file":"TableEditContextMenuProvider.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/RichTextEditor/Plugins/TableEditContextMenuProvider.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,4BAA4B,EAAE,MAAM,gCAAgC,CAAC;AAE9E;;GAEG;AACH,MAAM,OAAO,4BAA4B;IAAzC;QACU,WAAM,GAAmB,IAAI,CAAC;QACtC,YAAO,GAA6B,EAAE,CAAC;QAC/B,UAAK,GAAiC,IAAI,CAAC;IAgCrD,CAAC;IA9BC,aAAa,CAAC,OAAiC;QAC7C,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;QACvB,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAChB,IAAI,CAAC,KAAK,GAAG,4BAA4B,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;QACvE,CAAC;IACH,CAAC;IAED,OAAO;QACL,OAAO,8BAA8B,CAAC;IACxC,CAAC;IAED,UAAU,CAAC,MAAe;QACxB,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;QACrB,IAAI,CAAC,KAAK,GAAG,4BAA4B,CAAC,MAAM,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;IAClE,CAAC;IAED;;OAEG;IACH,OAAO;QACL,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;IACrB,CAAC;IAED,mBAAmB,CAAC,IAAU;QAC5B,IAAI,IAAI,CAAC,MAAM,IAAI,eAAe,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC;YACtD,OAAO,IAAI,CAAC,KAAK,CAAC;QACpB,CAAC;aAAM,CAAC;YACN,OAAO,IAAI,CAAC;QACd,CAAC;IACH,CAAC;CACF;AAED,MAAM,eAAe,GAAG,CAAC,MAAe,EAAE,IAAU,EAAW,EAAE;IAC/D,MAAM,SAAS,GAAG,MAAM,CAAC,YAAY,EAAE,CAAC;IACxC,MAAM,EAAE,GAAG,SAAS,CAAC,0BAA0B,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;IAC/D,MAAM,KAAK,GAAG,EAAE,IAAI,SAAS,CAAC,0BAA0B,CAAC,EAAE,EAAE,OAAO,CAAC,CAAC;IAEtE,OAAO,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,iBAAiB,MAAK,IAAI,CAAC;AAC3C,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\nimport type { ContextMenuProvider, IEditor } from 'roosterjs-content-model-types';\nimport { RichTextStrings } from '../RichTextSendBox';\nimport { IContextualMenuItem } from '@fluentui/react';\nimport { getTableEditContextMenuItems } from '../../utils/RichTextTableUtils';\n\n/**\n * Provides a context menu for editing tables in the rich text editor.\n */\nexport class TableEditContextMenuProvider implements ContextMenuProvider<IContextualMenuItem> {\n  private editor: IEditor | null = null;\n  strings: Partial<RichTextStrings> = {};\n  private items: IContextualMenuItem[] | null = null;\n\n  updateStrings(strings: Partial<RichTextStrings>): void {\n    this.strings = strings;\n    if (this.editor) {\n      this.items = getTableEditContextMenuItems(this.editor, this.strings);\n    }\n  }\n\n  getName(): string {\n    return 'TableEditContextMenuProvider';\n  }\n\n  initialize(editor: IEditor): void {\n    this.editor = editor;\n    this.items = getTableEditContextMenuItems(editor, this.strings);\n  }\n\n  /**\n   * Dispose this plugin\n   */\n  dispose(): void {\n    this.editor = null;\n  }\n\n  getContextMenuItems(node: Node): IContextualMenuItem[] | null {\n    if (this.editor && isTableEditable(this.editor, node)) {\n      return this.items;\n    } else {\n      return null;\n    }\n  }\n}\n\nconst isTableEditable = (editor: IEditor, node: Node): boolean => {\n  const domHelper = editor.getDOMHelper();\n  const td = domHelper.findClosestElementAncestor(node, 'TD,TH');\n  const table = td && domHelper.findClosestElementAncestor(td, 'table');\n\n  return table?.isContentEditable === true;\n};\n"]}

package/dist/dist-esm/react-components/src/components/RichTextEditor/Plugins/UndoRedoPlugin.js

@@ -1,11 +1,15 @@
+/* @conditional-compile-remove(rich-text-editor-image-upload) */
 import { PluginEventType, scrollToBottomRichTextEditor, getInsertedInlineImages } from '../../utils/RichTextEditorUtils';
+/* @conditional-compile-remove(rich-text-editor-image-upload) */
 import { getInlineImageAttributes } from '../../utils/RichTextEditorUtils';
+/* @conditional-compile-remove(rich-text-editor-image-upload) */
 import { ChangeSource } from 'roosterjs-content-model-dom';
 /**
  * UndoRedoPlugin is a plugin for additional handling undo and redo events in the editor.
  */
 export default class UndoRedoPlugin {
     constructor() {
+        /* @conditional-compile-remove(rich-text-editor-image-upload) */
         this.editor = null;
         this.onUpdateContent = null;
     }
@@ -13,28 +17,38 @@ export default class UndoRedoPlugin {
         return 'CustomUndoRedoPlugin';
     }
     initialize(editor) {
+        /* @conditional-compile-remove(rich-text-editor-image-upload) */
         this.editor = editor;
     }
     dispose() { }
     onPluginEvent(event) {
         // handle when new images are added to the editor because of undo/redo
+        /* @conditional-compile-remove(rich-text-editor-image-upload) */
         if (this.editor && event.eventType === PluginEventType.BeforeSetContent && this.onInsertInlineImage) {
             handleBeforeSetEvent(event, this.editor, this.onInsertInlineImage);
         }
         // handle deleted images and updated content
-        if (this.onUpdateContent && event.eventType === PluginEventType.ContentChanged && event.source === ChangeSource.SetContent) {
+        /* @conditional-compile-remove(rich-text-editor-image-upload) */
+        if (this.onUpdateContent &&
+            event.eventType === PluginEventType.ContentChanged &&
+            event.source === ChangeSource.SetContent) {
             this.onUpdateContent();
         }
-        if (this.editor && !this.editor.isDisposed() && event.eventType === PluginEventType.ContentChanged && event.source === ChangeSource.SetContent) {
+        /* @conditional-compile-remove(rich-text-editor-image-upload) */
+        if (this.editor &&
+            !this.editor.isDisposed() &&
+            event.eventType === PluginEventType.ContentChanged &&
+            event.source === ChangeSource.SetContent) {
             // scroll the editor to the correct position after undo/redo actions
             scrollToBottomRichTextEditor();
         }
     }
 }
+/* @conditional-compile-remove(rich-text-editor-image-upload) */
 const handleBeforeSetEvent = (event, editor, onInsertInlineImage) => {
     const currentImagesList = editor.getDocument().querySelectorAll('img');
     const insertedImages = getInsertedInlineImages(event.newContent, currentImagesList);
-    insertedImages.forEach(image => {
+    insertedImages.forEach((image) => {
         const imageAttributes = getInlineImageAttributes(image);
         onInsertInlineImage(imageAttributes);
     });

package/dist/dist-esm/react-components/src/components/RichTextEditor/Plugins/UndoRedoPlugin.js.map

@@ -1 +1 @@
-{"version":3,"file":"UndoRedoPlugin.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-components/src/components/RichTextEditor/Plugins/UndoRedoPlugin.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,eAAe,EAAE,4BAA4B,EAAE,uBAAuB,EAAE,MAAM,iCAAiC,CAAC;AACzH,OAAO,EAAE,wBAAwB,EAAE,MAAM,iCAAiC,CAAC;AAC3E,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAE3D;;GAEG;AACH,MAAM,CAAC,OAAO,OAAO,cAAc;IAAnC;QACU,WAAM,GAAmB,IAAI,CAAC;QAGtC,oBAAe,GAAyB,IAAI,CAAC;IAuB/C,CAAC;IAtBC,OAAO;QACL,OAAO,sBAAsB,CAAC;IAChC,CAAC;IACD,UAAU,CAAC,MAAe;QACxB,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;IACvB,CAAC;IACD,OAAO,KAAU,CAAC;IAClB,aAAa,CAAC,KAAkB;QAC9B,sEAAsE;QACtE,IAAI,IAAI,CAAC,MAAM,IAAI,KAAK,CAAC,SAAS,KAAK,eAAe,CAAC,gBAAgB,IAAI,IAAI,CAAC,mBAAmB,EAAE,CAAC;YACpG,oBAAoB,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,mBAAmB,CAAC,CAAC;QACrE,CAAC;QAED,4CAA4C;QAC5C,IAAI,IAAI,CAAC,eAAe,IAAI,KAAK,CAAC,SAAS,KAAK,eAAe,CAAC,cAAc,IAAI,KAAK,CAAC,MAAM,KAAK,YAAY,CAAC,UAAU,EAAE,CAAC;YAC3H,IAAI,CAAC,eAAe,EAAE,CAAC;QACzB,CAAC;QACD,IAAI,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,UAAU,EAAE,IAAI,KAAK,CAAC,SAAS,KAAK,eAAe,CAAC,cAAc,IAAI,KAAK,CAAC,MAAM,KAAK,YAAY,CAAC,UAAU,EAAE,CAAC;YAC/I,oEAAoE;YACpE,4BAA4B,EAAE,CAAC;QACjC,CAAC;IACH,CAAC;CACF;AACD,MAAM,oBAAoB,GAAG,CAAC,KAA4B,EAAE,MAAe,EAAE,mBAAsE,EAAQ,EAAE;IAC3J,MAAM,iBAAiB,GAAG,MAAM,CAAC,WAAW,EAAE,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC;IACvE,MAAM,cAAc,GAAG,uBAAuB,CAAC,KAAK,CAAC,UAAU,EAAE,iBAAiB,CAAC,CAAC;IACpF,cAAc,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;QAC7B,MAAM,eAAe,GAAG,wBAAwB,CAAC,KAAK,CAAC,CAAC;QACxD,mBAAmB,CAAC,eAAe,CAAC,CAAC;IACvC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\nimport type { PluginEvent, EditorPlugin, IEditor } from 'roosterjs-content-model-types';\nimport type { BeforeSetContentEvent } from 'roosterjs-content-model-types';\nimport { PluginEventType, scrollToBottomRichTextEditor, getInsertedInlineImages } from '../../utils/RichTextEditorUtils';\nimport { getInlineImageAttributes } from '../../utils/RichTextEditorUtils';\nimport { ChangeSource } from 'roosterjs-content-model-dom';\n\n/**\n * UndoRedoPlugin is a plugin for additional handling undo and redo events in the editor.\n */\nexport default class UndoRedoPlugin implements EditorPlugin {\n  private editor: IEditor | null = null;\n  // don't set value in constructor to be able to update it without plugin recreation\n  onInsertInlineImage?: (imageAttributes: Record<string, string>) => void;\n  onUpdateContent?: (() => void) | null = null;\n  getName(): string {\n    return 'CustomUndoRedoPlugin';\n  }\n  initialize(editor: IEditor): void {\n    this.editor = editor;\n  }\n  dispose(): void {}\n  onPluginEvent(event: PluginEvent): void {\n    // handle when new images are added to the editor because of undo/redo\n    if (this.editor && event.eventType === PluginEventType.BeforeSetContent && this.onInsertInlineImage) {\n      handleBeforeSetEvent(event, this.editor, this.onInsertInlineImage);\n    }\n\n    // handle deleted images and updated content\n    if (this.onUpdateContent && event.eventType === PluginEventType.ContentChanged && event.source === ChangeSource.SetContent) {\n      this.onUpdateContent();\n    }\n    if (this.editor && !this.editor.isDisposed() && event.eventType === PluginEventType.ContentChanged && event.source === ChangeSource.SetContent) {\n      // scroll the editor to the correct position after undo/redo actions\n      scrollToBottomRichTextEditor();\n    }\n  }\n}\nconst handleBeforeSetEvent = (event: BeforeSetContentEvent, editor: IEditor, onInsertInlineImage: (imageAttributes: Record<string, string>) => void): void => {\n  const currentImagesList = editor.getDocument().querySelectorAll('img');\n  const insertedImages = getInsertedInlineImages(event.newContent, currentImagesList);\n  insertedImages.forEach(image => {\n    const imageAttributes = getInlineImageAttributes(image);\n    onInsertInlineImage(imageAttributes);\n  });\n};"]}
+{"version":3,"file":"UndoRedoPlugin.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/RichTextEditor/Plugins/UndoRedoPlugin.tsx"],"names":[],"mappings":"AAKA,gEAAgE;AAChE,OAAO,EACL,eAAe,EACf,4BAA4B,EAC5B,uBAAuB,EACxB,MAAM,iCAAiC,CAAC;AACzC,gEAAgE;AAChE,OAAO,EAAE,wBAAwB,EAAE,MAAM,iCAAiC,CAAC;AAC3E,gEAAgE;AAChE,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAE3D;;GAEG;AACH,MAAM,CAAC,OAAO,OAAO,cAAc;IAAnC;QACE,gEAAgE;QACxD,WAAM,GAAmB,IAAI,CAAC;QAItC,oBAAe,GAAyB,IAAI,CAAC;IAyC/C,CAAC;IAvCC,OAAO;QACL,OAAO,sBAAsB,CAAC;IAChC,CAAC;IAED,UAAU,CAAC,MAAe;QACxB,gEAAgE;QAChE,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;IACvB,CAAC;IAED,OAAO,KAAU,CAAC;IAElB,aAAa,CAAC,KAAkB;QAC9B,sEAAsE;QACtE,gEAAgE;QAChE,IAAI,IAAI,CAAC,MAAM,IAAI,KAAK,CAAC,SAAS,KAAK,eAAe,CAAC,gBAAgB,IAAI,IAAI,CAAC,mBAAmB,EAAE,CAAC;YACpG,oBAAoB,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,mBAAmB,CAAC,CAAC;QACrE,CAAC;QAED,4CAA4C;QAC5C,gEAAgE;QAChE,IACE,IAAI,CAAC,eAAe;YACpB,KAAK,CAAC,SAAS,KAAK,eAAe,CAAC,cAAc;YAClD,KAAK,CAAC,MAAM,KAAK,YAAY,CAAC,UAAU,EACxC,CAAC;YACD,IAAI,CAAC,eAAe,EAAE,CAAC;QACzB,CAAC;QAED,gEAAgE;QAChE,IACE,IAAI,CAAC,MAAM;YACX,CAAC,IAAI,CAAC,MAAM,CAAC,UAAU,EAAE;YACzB,KAAK,CAAC,SAAS,KAAK,eAAe,CAAC,cAAc;YAClD,KAAK,CAAC,MAAM,KAAK,YAAY,CAAC,UAAU,EACxC,CAAC;YACD,oEAAoE;YACpE,4BAA4B,EAAE,CAAC;QACjC,CAAC;IACH,CAAC;CACF;AAED,gEAAgE;AAChE,MAAM,oBAAoB,GAAG,CAC3B,KAA4B,EAC5B,MAAe,EACf,mBAAsE,EAChE,EAAE;IACR,MAAM,iBAAiB,GAAG,MAAM,CAAC,WAAW,EAAE,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC;IACvE,MAAM,cAAc,GAAG,uBAAuB,CAAC,KAAK,CAAC,UAAU,EAAE,iBAAiB,CAAC,CAAC;IAEpF,cAAc,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE;QAC/B,MAAM,eAAe,GAAG,wBAAwB,CAAC,KAAK,CAAC,CAAC;QACxD,mBAAmB,CAAC,eAAe,CAAC,CAAC;IACvC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\nimport type { PluginEvent, EditorPlugin, IEditor } from 'roosterjs-content-model-types';\n/* @conditional-compile-remove(rich-text-editor-image-upload) */\nimport type { BeforeSetContentEvent } from 'roosterjs-content-model-types';\n/* @conditional-compile-remove(rich-text-editor-image-upload) */\nimport {\n  PluginEventType,\n  scrollToBottomRichTextEditor,\n  getInsertedInlineImages\n} from '../../utils/RichTextEditorUtils';\n/* @conditional-compile-remove(rich-text-editor-image-upload) */\nimport { getInlineImageAttributes } from '../../utils/RichTextEditorUtils';\n/* @conditional-compile-remove(rich-text-editor-image-upload) */\nimport { ChangeSource } from 'roosterjs-content-model-dom';\n\n/**\n * UndoRedoPlugin is a plugin for additional handling undo and redo events in the editor.\n */\nexport default class UndoRedoPlugin implements EditorPlugin {\n  /* @conditional-compile-remove(rich-text-editor-image-upload) */\n  private editor: IEditor | null = null;\n  // don't set value in constructor to be able to update it without plugin recreation\n  /* @conditional-compile-remove(rich-text-editor-image-upload) */\n  onInsertInlineImage?: (imageAttributes: Record<string, string>) => void;\n  onUpdateContent?: (() => void) | null = null;\n\n  getName(): string {\n    return 'CustomUndoRedoPlugin';\n  }\n\n  initialize(editor: IEditor): void {\n    /* @conditional-compile-remove(rich-text-editor-image-upload) */\n    this.editor = editor;\n  }\n\n  dispose(): void {}\n\n  onPluginEvent(event: PluginEvent): void {\n    // handle when new images are added to the editor because of undo/redo\n    /* @conditional-compile-remove(rich-text-editor-image-upload) */\n    if (this.editor && event.eventType === PluginEventType.BeforeSetContent && this.onInsertInlineImage) {\n      handleBeforeSetEvent(event, this.editor, this.onInsertInlineImage);\n    }\n\n    // handle deleted images and updated content\n    /* @conditional-compile-remove(rich-text-editor-image-upload) */\n    if (\n      this.onUpdateContent &&\n      event.eventType === PluginEventType.ContentChanged &&\n      event.source === ChangeSource.SetContent\n    ) {\n      this.onUpdateContent();\n    }\n\n    /* @conditional-compile-remove(rich-text-editor-image-upload) */\n    if (\n      this.editor &&\n      !this.editor.isDisposed() &&\n      event.eventType === PluginEventType.ContentChanged &&\n      event.source === ChangeSource.SetContent\n    ) {\n      // scroll the editor to the correct position after undo/redo actions\n      scrollToBottomRichTextEditor();\n    }\n  }\n}\n\n/* @conditional-compile-remove(rich-text-editor-image-upload) */\nconst handleBeforeSetEvent = (\n  event: BeforeSetContentEvent,\n  editor: IEditor,\n  onInsertInlineImage: (imageAttributes: Record<string, string>) => void\n): void => {\n  const currentImagesList = editor.getDocument().querySelectorAll('img');\n  const insertedImages = getInsertedInlineImages(event.newContent, currentImagesList);\n\n  insertedImages.forEach((image) => {\n    const imageAttributes = getInlineImageAttributes(image);\n    onInsertInlineImage(imageAttributes);\n  });\n};\n"]}

package/dist/dist-esm/react-components/src/components/RichTextEditor/Plugins/UpdateContentPlugin.js

@@ -44,9 +44,7 @@ export class UpdateContentPlugin {
     initialize(editor) {
         this.editor = editor;
         this.disposer = this.editor.attachDomEvent({
-            blur: {
-                beforeDispatch: this.onBlur
-            }
+            blur: { beforeDispatch: this.onBlur }
         });
     }
     dispose() {
@@ -73,7 +71,8 @@ export class UpdateContentPlugin {
                     // when user select an image that's already in the editor, then paste in an image to replace the selected one,
                     // we will only get a paste event.
                     // In this case, we need to update the removedInlineImage array to include the replaced image.
-                    event.source === ChangeSource.Paste || event.source === ChangeSource.Keyboard && (event.data === Keys.BACKSPACE || event.data === Keys.DELETE)) {
+                    event.source === ChangeSource.Paste ||
+                    (event.source === ChangeSource.Keyboard && (event.data === Keys.BACKSPACE || event.data === Keys.DELETE))) {
                     this.onUpdate(UpdateEvent.ContentChanged, true);
                 }
                 this.onUpdate(UpdateEvent.ContentChanged);

package/dist/dist-esm/react-components/src/components/RichTextEditor/Plugins/UpdateContentPlugin.js.map

@@ -1 +1 @@
-{"version":3,"file":"UpdateContentPlugin.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-components/src/components/RichTextEditor/Plugins/UpdateContentPlugin.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAGlC,OAAO,EAAE,eAAe,EAAE,MAAM,iCAAiC,CAAC;AAClE,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAE3D;;GAEG;AACH,MAAM,CAAN,IAAY,WAMX;AAND,WAAY,WAAW;IACrB,4BAAa,CAAA;IACb,kCAAmB,CAAA;IACnB,gDAAiC,CAAA;IACjC,sCAAuB,CAAA;IACvB,4BAAa,CAAA;AACf,CAAC,EANW,WAAW,KAAX,WAAW,QAMtB;AACD,IAAW,IAGV;AAHD,WAAW,IAAI;IACb,yCAAa,CAAA;IACb,oCAAW,CAAA;AACb,CAAC,EAHU,IAAI,KAAJ,IAAI,QAGd;AAED;;GAEG;AACH,MAAM,OAAO,mBAAmB;IAAhC;QACU,WAAM,GAAmB,IAAI,CAAC;QAC9B,aAAQ,GAAwB,IAAI,CAAC;QAC7C,4FAA4F;QAC5F,aAAQ,GAA8E,IAAI,CAAC;QAmDnF,WAAM,GAAG,GAAS,EAAE;YAC1B,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,EAAE,CAAC;gBAC3B,OAAO;YACT,CAAC;YACD,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;QAClC,CAAC,CAAC;IACJ,CAAC;IAxDC,OAAO;QACL,OAAO,qBAAqB,CAAC;IAC/B,CAAC;IAED;;;OAGG;IACH,UAAU,CAAC,MAAe;QACxB,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;QACrB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,MAAM,CAAC,cAAc,CAAC;YACzC,IAAI,EAAE;gBACJ,cAAc,EAAE,IAAI,CAAC,MAAM;aAC5B;SACF,CAAC,CAAC;IACL,CAAC;IACD,OAAO;QACL,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;QACnB,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,IAAI,CAAC,QAAQ,EAAE,CAAC;YAChB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;QACvB,CAAC;IACH,CAAC;IACD,aAAa,CAAC,KAAkB;QAC9B,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,EAAE,CAAC;YAC3B,OAAO;QACT,CAAC;QACD,QAAQ,KAAK,CAAC,SAAS,EAAE,CAAC;YACxB,KAAK,eAAe,CAAC,WAAW;gBAC9B,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;gBAChC,MAAM;YACR,KAAK,eAAe,CAAC,aAAa;gBAChC,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;gBACnC,MAAM;YACR,KAAK,eAAe,CAAC,cAAc;gBACjC,IAAI,KAAK,CAAC,MAAM,KAAK,YAAY,CAAC,GAAG;oBACrC,yDAAyD;oBACzD,8GAA8G;oBAC9G,kCAAkC;oBAClC,8FAA8F;oBAC9F,KAAK,CAAC,MAAM,KAAK,YAAY,CAAC,KAAK,IAAI,KAAK,CAAC,MAAM,KAAK,YAAY,CAAC,QAAQ,IAAI,CAAC,KAAK,CAAC,IAAI,KAAK,IAAI,CAAC,SAAS,IAAI,KAAK,CAAC,IAAI,KAAK,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC;oBAC/I,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,cAAc,EAAE,IAAI,CAAC,CAAC;gBAClD,CAAC;gBACD,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,cAAc,CAAC,CAAC;gBAC1C,MAAM;YACR,KAAK,eAAe,CAAC,KAAK;gBACxB,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC;gBACrC,MAAM;QACV,CAAC;IACH,CAAC;CAOF","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport type { EditorPlugin, IEditor, PluginEvent } from 'roosterjs-content-model-types';\nimport { PluginEventType } from '../../utils/RichTextEditorUtils';\nimport { ChangeSource } from 'roosterjs-content-model-dom';\n\n/**\n * An update mode to indicate when the content update happens\n */\nexport enum UpdateEvent {\n  Init = 'Init',\n  Dispose = 'Dispose',\n  ContentChanged = 'ContentChanged',\n  UserInput = 'UserInput',\n  Blur = 'Blur',\n}\nconst enum Keys {\n  BACKSPACE = 8,\n  DELETE = 46,\n}\n\n/**\n * A plugin to handle content update\n */\nexport class UpdateContentPlugin implements EditorPlugin {\n  private editor: IEditor | null = null;\n  private disposer: (() => void) | null = null;\n  // don't set callback in constructor to be able to update callback without plugin recreation\n  onUpdate: ((event: UpdateEvent, shouldRemoveInlineImages?: boolean) => void) | null = null;\n  getName(): string {\n    return 'UpdateContentPlugin';\n  }\n\n  /**\n   * Initialize this plugin\n   * @param editor The editor instance\n   */\n  initialize(editor: IEditor): void {\n    this.editor = editor;\n    this.disposer = this.editor.attachDomEvent({\n      blur: {\n        beforeDispatch: this.onBlur\n      }\n    });\n  }\n  dispose(): void {\n    this.editor = null;\n    if (this.disposer) {\n      this.disposer();\n      this.disposer = null;\n    }\n  }\n  onPluginEvent(event: PluginEvent): void {\n    if (this.onUpdate === null) {\n      return;\n    }\n    switch (event.eventType) {\n      case PluginEventType.EditorReady:\n        this.onUpdate(UpdateEvent.Init);\n        break;\n      case PluginEventType.BeforeDispose:\n        this.onUpdate(UpdateEvent.Dispose);\n        break;\n      case PluginEventType.ContentChanged:\n        if (event.source === ChangeSource.Cut ||\n        // We need to add the paste source here for an edge case:\n        // when user select an image that's already in the editor, then paste in an image to replace the selected one,\n        // we will only get a paste event.\n        // In this case, we need to update the removedInlineImage array to include the replaced image.\n        event.source === ChangeSource.Paste || event.source === ChangeSource.Keyboard && (event.data === Keys.BACKSPACE || event.data === Keys.DELETE)) {\n          this.onUpdate(UpdateEvent.ContentChanged, true);\n        }\n        this.onUpdate(UpdateEvent.ContentChanged);\n        break;\n      case PluginEventType.Input:\n        this.onUpdate(UpdateEvent.UserInput);\n        break;\n    }\n  }\n  private onBlur = (): void => {\n    if (this.onUpdate === null) {\n      return;\n    }\n    this.onUpdate(UpdateEvent.Blur);\n  };\n}"]}
+{"version":3,"file":"UpdateContentPlugin.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/RichTextEditor/Plugins/UpdateContentPlugin.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAGlC,OAAO,EAAE,eAAe,EAAE,MAAM,iCAAiC,CAAC;AAClE,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAE3D;;GAEG;AACH,MAAM,CAAN,IAAY,WAMX;AAND,WAAY,WAAW;IACrB,4BAAa,CAAA;IACb,kCAAmB,CAAA;IACnB,gDAAiC,CAAA;IACjC,sCAAuB,CAAA;IACvB,4BAAa,CAAA;AACf,CAAC,EANW,WAAW,KAAX,WAAW,QAMtB;AAED,IAAW,IAGV;AAHD,WAAW,IAAI;IACb,yCAAa,CAAA;IACb,oCAAW,CAAA;AACb,CAAC,EAHU,IAAI,KAAJ,IAAI,QAGd;AAED;;GAEG;AACH,MAAM,OAAO,mBAAmB;IAAhC;QACU,WAAM,GAAmB,IAAI,CAAC;QAC9B,aAAQ,GAAwB,IAAI,CAAC;QAC7C,4FAA4F;QAC5F,aAAQ,GAA8E,IAAI,CAAC;QA6DnF,WAAM,GAAG,GAAS,EAAE;YAC1B,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,EAAE,CAAC;gBAC3B,OAAO;YACT,CAAC;YACD,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;QAClC,CAAC,CAAC;IACJ,CAAC;IAjEC,OAAO;QACL,OAAO,qBAAqB,CAAC;IAC/B,CAAC;IAED;;;OAGG;IACH,UAAU,CAAC,MAAe;QACxB,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;QACrB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,MAAM,CAAC,cAAc,CAAC;YACzC,IAAI,EAAE,EAAE,cAAc,EAAE,IAAI,CAAC,MAAM,EAAE;SACtC,CAAC,CAAC;IACL,CAAC;IAED,OAAO;QACL,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;QAEnB,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,IAAI,CAAC,QAAQ,EAAE,CAAC;YAChB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;QACvB,CAAC;IACH,CAAC;IAED,aAAa,CAAC,KAAkB;QAC9B,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,EAAE,CAAC;YAC3B,OAAO;QACT,CAAC;QAED,QAAQ,KAAK,CAAC,SAAS,EAAE,CAAC;YACxB,KAAK,eAAe,CAAC,WAAW;gBAC9B,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;gBAChC,MAAM;YAER,KAAK,eAAe,CAAC,aAAa;gBAChC,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;gBACnC,MAAM;YAER,KAAK,eAAe,CAAC,cAAc;gBACjC,IACE,KAAK,CAAC,MAAM,KAAK,YAAY,CAAC,GAAG;oBACjC,yDAAyD;oBACzD,8GAA8G;oBAC9G,kCAAkC;oBAClC,8FAA8F;oBAC9F,KAAK,CAAC,MAAM,KAAK,YAAY,CAAC,KAAK;oBACnC,CAAC,KAAK,CAAC,MAAM,KAAK,YAAY,CAAC,QAAQ,IAAI,CAAC,KAAK,CAAC,IAAI,KAAK,IAAI,CAAC,SAAS,IAAI,KAAK,CAAC,IAAI,KAAK,IAAI,CAAC,MAAM,CAAC,CAAC,EACzG,CAAC;oBACD,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,cAAc,EAAE,IAAI,CAAC,CAAC;gBAClD,CAAC;gBACD,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,cAAc,CAAC,CAAC;gBAC1C,MAAM;YAER,KAAK,eAAe,CAAC,KAAK;gBACxB,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC;gBACrC,MAAM;QACV,CAAC;IACH,CAAC;CAQF","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport type { EditorPlugin, IEditor, PluginEvent } from 'roosterjs-content-model-types';\nimport { PluginEventType } from '../../utils/RichTextEditorUtils';\nimport { ChangeSource } from 'roosterjs-content-model-dom';\n\n/**\n * An update mode to indicate when the content update happens\n */\nexport enum UpdateEvent {\n  Init = 'Init',\n  Dispose = 'Dispose',\n  ContentChanged = 'ContentChanged',\n  UserInput = 'UserInput',\n  Blur = 'Blur'\n}\n\nconst enum Keys {\n  BACKSPACE = 8,\n  DELETE = 46\n}\n\n/**\n * A plugin to handle content update\n */\nexport class UpdateContentPlugin implements EditorPlugin {\n  private editor: IEditor | null = null;\n  private disposer: (() => void) | null = null;\n  // don't set callback in constructor to be able to update callback without plugin recreation\n  onUpdate: ((event: UpdateEvent, shouldRemoveInlineImages?: boolean) => void) | null = null;\n\n  getName(): string {\n    return 'UpdateContentPlugin';\n  }\n\n  /**\n   * Initialize this plugin\n   * @param editor The editor instance\n   */\n  initialize(editor: IEditor): void {\n    this.editor = editor;\n    this.disposer = this.editor.attachDomEvent({\n      blur: { beforeDispatch: this.onBlur }\n    });\n  }\n\n  dispose(): void {\n    this.editor = null;\n\n    if (this.disposer) {\n      this.disposer();\n      this.disposer = null;\n    }\n  }\n\n  onPluginEvent(event: PluginEvent): void {\n    if (this.onUpdate === null) {\n      return;\n    }\n\n    switch (event.eventType) {\n      case PluginEventType.EditorReady:\n        this.onUpdate(UpdateEvent.Init);\n        break;\n\n      case PluginEventType.BeforeDispose:\n        this.onUpdate(UpdateEvent.Dispose);\n        break;\n\n      case PluginEventType.ContentChanged:\n        if (\n          event.source === ChangeSource.Cut ||\n          // We need to add the paste source here for an edge case:\n          // when user select an image that's already in the editor, then paste in an image to replace the selected one,\n          // we will only get a paste event.\n          // In this case, we need to update the removedInlineImage array to include the replaced image.\n          event.source === ChangeSource.Paste ||\n          (event.source === ChangeSource.Keyboard && (event.data === Keys.BACKSPACE || event.data === Keys.DELETE))\n        ) {\n          this.onUpdate(UpdateEvent.ContentChanged, true);\n        }\n        this.onUpdate(UpdateEvent.ContentChanged);\n        break;\n\n      case PluginEventType.Input:\n        this.onUpdate(UpdateEvent.UserInput);\n        break;\n    }\n  }\n\n  private onBlur = (): void => {\n    if (this.onUpdate === null) {\n      return;\n    }\n    this.onUpdate(UpdateEvent.Blur);\n  };\n}\n"]}

package/dist/dist-esm/react-components/src/components/RichTextEditor/RichTextEditor.js

@@ -15,6 +15,7 @@ import { RichTextToolbarPlugin } from './Plugins/RichTextToolbarPlugin';
 import { ContextMenuPlugin } from './Plugins/ContextMenuPlugin';
 import { TableEditContextMenuProvider } from './Plugins/TableEditContextMenuProvider';
 import { borderApplier, dataSetApplier } from '../utils/RichTextEditorUtils';
+/* @conditional-compile-remove(rich-text-editor-image-upload) */
 import { getPreviousInlineImages, getRemovedInlineImages, removeLocalBlobs, cleanAllLocalBlobs } from '../utils/RichTextEditorUtils';
 import { ContextualMenu } from '@fluentui/react';
 import { PlaceholderPlugin } from './Plugins/PlaceholderPlugin';
@@ -26,15 +27,23 @@ import UndoRedoPlugin from './Plugins/UndoRedoPlugin';
  * @beta
  */
 export const RichTextEditor = React.forwardRef((props, ref) => {
-    const { initialContent, onChange, placeholderText, strings, showRichTextEditorFormatting, autoFocus, onKeyDown, onContentModelUpdate, contentModel, onPaste, onInsertInlineImage } = props;
+    const { initialContent, onChange, placeholderText, strings, showRichTextEditorFormatting, autoFocus, onKeyDown, onContentModelUpdate, contentModel, 
+    /* @conditional-compile-remove(rich-text-editor-image-upload) */
+    onPaste, 
+    /* @conditional-compile-remove(rich-text-editor-image-upload) */
+    onInsertInlineImage } = props;
     const editor = useRef(null);
     const editorDiv = useRef(null);
     const toolbarRef = useRef(null);
     const theme = useTheme();
     const [contextMenuProps, setContextMenuProps] = useState(null);
-    const previousThemeDirection = useRef(themeDirection(theme)); // This will be set when the editor is initialized and when the content is updated.
+    const previousThemeDirection = useRef(themeDirection(theme));
+    /* @conditional-compile-remove(rich-text-editor-image-upload) */
+    // This will be set when the editor is initialized and when the content is updated.
     const [previousInlineImages, setPreviousInlineImages] = useState([]);
+    /* @conditional-compile-remove(rich-text-editor-image-upload) */
     const [inlineImageLocalBlobs, setInlineImageLocalBlobs] = useState({});
+    /* @conditional-compile-remove(rich-text-editor-image-upload) */
     useEffect(() => {
         return () => {
             // Cleanup Local Blob URLs when the component is unmounted
@@ -62,7 +71,9 @@ export const RichTextEditor = React.forwardRef((props, ref) => {
                 }
             },
             setEmptyContent() {
+                /* @conditional-compile-remove(rich-text-editor-image-upload) */
                 setPreviousInlineImages([]);
+                /* @conditional-compile-remove(rich-text-editor-image-upload) */
                 cleanAllLocalBlobs(inlineImageLocalBlobs);
                 if (editor.current) {
                     // remove all content from the editor and update the model
@@ -87,16 +98,18 @@ export const RichTextEditor = React.forwardRef((props, ref) => {
                 }
             }
         };
-    }, [inlineImageLocalBlobs, onContentModelUpdate]);
+    }, [/* @conditional-compile-remove(rich-text-editor-image-upload) */ inlineImageLocalBlobs, onContentModelUpdate]);
     const toolbarPlugin = React.useMemo(() => {
         return new RichTextToolbarPlugin();
     }, []);
     const placeholderPlugin = useMemo(() => {
         var _a;
         const textColor = (_a = theme.palette) === null || _a === void 0 ? void 0 : _a.neutralSecondary;
-        return new PlaceholderPlugin('', textColor ? {
-            textColor: textColor
-        } : undefined);
+        return new PlaceholderPlugin('', textColor
+            ? {
+                textColor: textColor
+            }
+            : undefined);
     }, [theme]);
     useEffect(() => {
         if (placeholderText !== undefined) {
@@ -112,21 +125,27 @@ export const RichTextEditor = React.forwardRef((props, ref) => {
     const copyPastePlugin = useMemo(() => {
         return new CopyPastePlugin();
     }, []);
-    const onChangeContent = useCallback((shouldUpdateInlineImages) => {
+    const onChangeContent = useCallback((/* @conditional-compile-remove(rich-text-editor-image-upload) */ shouldUpdateInlineImages) => {
         if (editor.current === null) {
             return;
         }
         const content = exportContent(editor.current);
+        /* @conditional-compile-remove(rich-text-editor-image-upload) */
         let removedInlineImages = [];
+        /* @conditional-compile-remove(rich-text-editor-image-upload) */
         if (shouldUpdateInlineImages) {
+            /* @conditional-compile-remove(rich-text-editor-image-upload) */
             removedInlineImages = getRemovedInlineImages(content, previousInlineImages);
         }
-        onChange && onChange(content, removedInlineImages);
+        onChange &&
+            onChange(content, /* @conditional-compile-remove(rich-text-editor-image-upload) */ removedInlineImages);
+        /* @conditional-compile-remove(rich-text-editor-image-upload) */
         setPreviousInlineImages(getPreviousInlineImages(content));
-    }, [onChange, previousInlineImages]);
+    }, [onChange, /* @conditional-compile-remove(rich-text-editor-image-upload) */ previousInlineImages]);
     useEffect(() => {
         // don't set callback in plugin constructor to update callback without plugin recreation
-        updatePlugin.onUpdate = (event, shouldRemoveInlineImages) => {
+        updatePlugin.onUpdate = (event, 
+        /* @conditional-compile-remove(rich-text-editor-image-upload) */ shouldRemoveInlineImages) => {
             if (editor.current === null) {
                 return;
             }
@@ -135,26 +154,37 @@ export const RichTextEditor = React.forwardRef((props, ref) => {
             }
             else {
                 const content = exportContent(editor.current);
+                /* @conditional-compile-remove(rich-text-editor-image-upload) */
                 let removedInlineImages = [];
+                /* @conditional-compile-remove(rich-text-editor-image-upload) */
                 if (shouldRemoveInlineImages) {
                     removedInlineImages = getRemovedInlineImages(content, previousInlineImages);
                     if (removedInlineImages.length > 0) {
                         removeLocalBlobs(inlineImageLocalBlobs, removedInlineImages);
                     }
                 }
-                onChange && onChange(content, removedInlineImages);
+                onChange &&
+                    onChange(content, /* @conditional-compile-remove(rich-text-editor-image-upload) */ removedInlineImages);
+                /* @conditional-compile-remove(rich-text-editor-image-upload) */
                 setPreviousInlineImages(getPreviousInlineImages(content));
             }
         };
-    }, [onChange, onContentModelUpdate, updatePlugin, previousInlineImages, inlineImageLocalBlobs]);
+    }, [
+        onChange,
+        onContentModelUpdate,
+        updatePlugin,
+        /* @conditional-compile-remove(rich-text-editor-image-upload) */ previousInlineImages,
+        /* @conditional-compile-remove(rich-text-editor-image-upload) */ inlineImageLocalBlobs
+    ]);
     const undoRedoPlugin = useMemo(() => {
         return new UndoRedoPlugin();
     }, []);
+    /* @conditional-compile-remove(rich-text-editor-image-upload) */
     useEffect(() => {
         if (onInsertInlineImage) {
             copyPastePlugin.onInsertInlineImage = (imageAttributes) => {
                 const { id, src } = imageAttributes;
-                setInlineImageLocalBlobs(prev => {
+                setInlineImageLocalBlobs((prev) => {
                     if (!id || !src) {
                         return prev;
                     }
@@ -170,7 +200,7 @@ export const RichTextEditor = React.forwardRef((props, ref) => {
     }, [copyPastePlugin, onInsertInlineImage, undoRedoPlugin]);
     useEffect(() => {
         undoRedoPlugin.onUpdateContent = () => {
-            onChangeContent(true);
+            onChangeContent(/* @conditional-compile-remove(rich-text-editor-image-upload) */ true);
         };
     }, [onChangeContent, undoRedoPlugin]);
     const keyboardInputPlugin = useMemo(() => {
@@ -196,19 +226,14 @@ export const RichTextEditor = React.forwardRef((props, ref) => {
     const onContextMenuDismiss = useCallback(() => {
         setContextMenuProps(null);
     }, []);
+    /* @conditional-compile-remove(rich-text-editor-image-upload) */
     useEffect(() => {
         copyPastePlugin.onPaste = onPaste;
     }, [copyPastePlugin, onPaste]);
     const plugins = useMemo(() => {
-        const contentEdit = new EditPlugin({
-            handleTabKey: false
-        });
+        const contentEdit = new EditPlugin({ handleTabKey: false });
         // AutoFormatPlugin previously was a part of the edit plugin
-        const autoFormatPlugin = new AutoFormatPlugin({
-            autoBullet: true,
-            autoNumbering: true,
-            autoLink: true
-        });
+        const autoFormatPlugin = new AutoFormatPlugin({ autoBullet: true, autoNumbering: true, autoLink: true });
         const roosterPastePlugin = new PastePlugin(false, {
             additionalDisallowedTags: ['head', '!doctype', '!cdata', '#comment'],
             additionalAllowedTags: [],
@@ -217,10 +242,32 @@ export const RichTextEditor = React.forwardRef((props, ref) => {
         });
         const shortcutPlugin = new ShortcutPlugin();
         const contextMenuPlugin = new ContextMenuPlugin(onContextMenuRender, onContextMenuDismiss);
-        return [placeholderPlugin, keyboardInputPlugin, contentEdit, autoFormatPlugin, updatePlugin, copyPastePlugin, roosterPastePlugin, toolbarPlugin, shortcutPlugin,
+        return [
+            placeholderPlugin,
+            keyboardInputPlugin,
+            contentEdit,
+            autoFormatPlugin,
+            updatePlugin,
+            copyPastePlugin,
+            roosterPastePlugin,
+            toolbarPlugin,
+            shortcutPlugin,
             // contextPlugin and tableEditMenuProvider allow to show insert/delete menu for the table
-            contextMenuPlugin, tableContextMenuPlugin, undoRedoPlugin];
-    }, [onContextMenuRender, onContextMenuDismiss, placeholderPlugin, keyboardInputPlugin, updatePlugin, copyPastePlugin, toolbarPlugin, tableContextMenuPlugin, undoRedoPlugin]);
+            contextMenuPlugin,
+            tableContextMenuPlugin,
+            undoRedoPlugin
+        ];
+    }, [
+        onContextMenuRender,
+        onContextMenuDismiss,
+        placeholderPlugin,
+        keyboardInputPlugin,
+        updatePlugin,
+        copyPastePlugin,
+        toolbarPlugin,
+        tableContextMenuPlugin,
+        undoRedoPlugin
+    ]);
     const announcerStringGetter = useCallback((key) => {
         var _a, _b;
         switch (key) {
@@ -234,7 +281,9 @@ export const RichTextEditor = React.forwardRef((props, ref) => {
     }, [strings.richTextNewBulletedListItemAnnouncement, strings.richTextNewNumberedListItemAnnouncement]);
     useEffect(() => {
         var _a;
+        /* @conditional-compile-remove(rich-text-editor-image-upload) */
         const prevInlineImage = getPreviousInlineImages(initialContent);
+        /* @conditional-compile-remove(rich-text-editor-image-upload) */
         setPreviousInlineImages(prevInlineImage);
         const initialModel = createEditorInitialModel(initialContent, contentModel);
         if (editorDiv.current) {
@@ -283,13 +332,11 @@ export const RichTextEditor = React.forwardRef((props, ref) => {
             previousThemeDirection.current = themeDirectionValue;
         }
     }, [theme]);
-    return React.createElement("div", { "data-testid": 'rich-text-editor-wrapper' },
+    return (React.createElement("div", { "data-testid": 'rich-text-editor-wrapper' },
         React.createElement("div", { ref: toolbarRef }, showRichTextEditorFormatting && toolbar),
         React.createElement("div", { className: richTextEditorWrapperStyle(theme) },
             React.createElement("div", { id: "richTextSendBox", ref: editorDiv, tabIndex: 0, role: "textbox", "aria-multiline": "true", "data-testid": 'rooster-rich-text-editor', className: richTextEditorStyle(props.styles), "aria-label": placeholderText })),
-        contextMenuProps && React.createElement(ContextualMenu, Object.assign({}, contextMenuProps, { calloutProps: {
-                isBeakVisible: false
-            } })));
+        contextMenuProps && React.createElement(ContextualMenu, Object.assign({}, contextMenuProps, { calloutProps: { isBeakVisible: false } }))));
 });
 const createEditorInitialModel = (initialContent, contentModel) => {
     if (contentModel) {