@azure/communication-react 1.26.0 → 1.27.0-alpha-202504170018

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

@@ -0,0 +1,56 @@
+/* @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;
+    }
+    getName() {
+        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
+        /* @conditional-compile-remove(rich-text-editor-image-upload) */
+        if (this.onUpdateContent &&
+            event.eventType === PluginEventType.ContentChanged &&
+            event.source === ChangeSource.SetContent) {
+            this.onUpdateContent();
+        }
+        /* @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) => {
+        const imageAttributes = getInlineImageAttributes(image);
+        onInsertInlineImage(imageAttributes);
+    });
+};
+//# sourceMappingURL=UndoRedoPlugin.js.map

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

@@ -0,0 +1 @@
+{"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.d.ts

@@ -0,0 +1,30 @@
+import type { EditorPlugin, IEditor, PluginEvent } from 'roosterjs-content-model-types';
+/**
+ * An update mode to indicate when the content update happens
+ */
+export declare enum UpdateEvent {
+    Init = "Init",
+    Dispose = "Dispose",
+    ContentChanged = "ContentChanged",
+    UserInput = "UserInput",
+    Blur = "Blur"
+}
+/**
+ * A plugin to handle content update
+ */
+export declare class UpdateContentPlugin implements EditorPlugin {
+    private editor;
+    private disposer;
+    onUpdate: ((event: UpdateEvent, shouldRemoveInlineImages?: boolean) => void) | null;
+    getName(): string;
+    /**
+     * Initialize this plugin
+     * @param editor The editor instance
+     */
+    initialize(editor: IEditor): void;
+    dispose(): void;
+    onPluginEvent(event: PluginEvent): void;
+    private onCompositionUpdate;
+    private onBlur;
+}
+//# sourceMappingURL=UpdateContentPlugin.d.ts.map

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

@@ -0,0 +1,96 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+import { PluginEventType } from '../../utils/RichTextEditorUtils';
+import { ChangeSource } from 'roosterjs-content-model-dom';
+/**
+ * An update mode to indicate when the content update happens
+ */
+export var UpdateEvent;
+(function (UpdateEvent) {
+    UpdateEvent["Init"] = "Init";
+    UpdateEvent["Dispose"] = "Dispose";
+    UpdateEvent["ContentChanged"] = "ContentChanged";
+    UpdateEvent["UserInput"] = "UserInput";
+    UpdateEvent["Blur"] = "Blur";
+})(UpdateEvent || (UpdateEvent = {}));
+var Keys;
+(function (Keys) {
+    Keys[Keys["BACKSPACE"] = 8] = "BACKSPACE";
+    Keys[Keys["DELETE"] = 46] = "DELETE";
+})(Keys || (Keys = {}));
+/**
+ * A plugin to handle content update
+ */
+export class UpdateContentPlugin {
+    constructor() {
+        this.editor = null;
+        this.disposer = null;
+        // don't set callback in constructor to be able to update callback without plugin recreation
+        this.onUpdate = null;
+        this.onCompositionUpdate = () => {
+            if (this.onUpdate === null) {
+                return;
+            }
+            this.onUpdate(UpdateEvent.ContentChanged);
+        };
+        this.onBlur = () => {
+            if (this.onUpdate === null) {
+                return;
+            }
+            this.onUpdate(UpdateEvent.Blur);
+        };
+    }
+    getName() {
+        return 'UpdateContentPlugin';
+    }
+    /**
+     * Initialize this plugin
+     * @param editor The editor instance
+     */
+    initialize(editor) {
+        this.editor = editor;
+        this.disposer = this.editor.attachDomEvent({
+            blur: { beforeDispatch: this.onBlur },
+            compositionupdate: { beforeDispatch: this.onCompositionUpdate }
+        });
+    }
+    dispose() {
+        this.editor = null;
+        if (this.disposer) {
+            this.disposer();
+            this.disposer = null;
+        }
+    }
+    onPluginEvent(event) {
+        if (this.onUpdate === null) {
+            return;
+        }
+        switch (event.eventType) {
+            case PluginEventType.EditorReady:
+                this.onUpdate(UpdateEvent.Init);
+                break;
+            case PluginEventType.BeforeDispose:
+                this.onUpdate(UpdateEvent.Dispose);
+                break;
+            case PluginEventType.CompositionEnd:
+                this.onUpdate(UpdateEvent.ContentChanged);
+                break;
+            case PluginEventType.ContentChanged:
+                if (event.source === ChangeSource.Cut ||
+                    // We need to add the paste source here for an edge case:
+                    // 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))) {
+                    this.onUpdate(UpdateEvent.ContentChanged, true);
+                }
+                this.onUpdate(UpdateEvent.ContentChanged);
+                break;
+            case PluginEventType.Input:
+                this.onUpdate(UpdateEvent.UserInput);
+                break;
+        }
+    }
+}
+//# sourceMappingURL=UpdateContentPlugin.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"UpdateContentPlugin.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/RichTextEditor/Plugins/UpdateContentPlugin.tsx"],"names":[],"mappings":"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","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      compositionupdate: { beforeDispatch: this.onCompositionUpdate }\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    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.CompositionEnd:\n        this.onUpdate(UpdateEvent.ContentChanged);\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 onCompositionUpdate = (): void => {\n    if (this.onUpdate === null) {\n      return;\n    }\n    this.onUpdate(UpdateEvent.ContentChanged);\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.d.ts

@@ -0,0 +1,59 @@
+import React from 'react';
+import { RichTextStrings } from './RichTextSendBox';
+import type { ContentModelDocument } from 'roosterjs-content-model-types';
+/**
+ * Style props for {@link RichTextEditor}.
+ *
+ * @private
+ */
+export interface RichTextEditorStyleProps {
+    minHeight: string;
+    maxHeight: string;
+}
+/**
+ * Props for {@link RichTextEditor}.
+ *
+ * @private
+ */
+export interface RichTextEditorProps {
+    initialContent?: string;
+    onChange: (newValue?: string, removedInlineImages?: Record<string, string>[]) => void;
+    onKeyDown?: (ev: KeyboardEvent) => void;
+    onCompositionUpdate?: () => void;
+    onContentModelUpdate?: (contentModel: ContentModelDocument | undefined) => void;
+    contentModel?: ContentModelDocument | undefined;
+    placeholderText?: string;
+    strings: Partial<RichTextStrings>;
+    showRichTextEditorFormatting: boolean;
+    styles: RichTextEditorStyleProps;
+    autoFocus?: 'sendBoxTextField';
+    onPaste?: (event: {
+        content: DocumentFragment;
+    }) => void;
+    onInsertInlineImage?: (imageAttributes: Record<string, string>) => void;
+}
+/**
+ * Represents a reference to the RichTextEditor component.
+ */
+export interface RichTextEditorComponentRef {
+    /**
+     * Sets focus on the RichTextEditor component.
+     */
+    focus: () => void;
+    /**
+     * Sets the content of the RichTextEditor component to an empty string.
+     */
+    setEmptyContent: () => void;
+    /**
+     * Retrieves the plain text content of the RichTextEditor component.
+     * @returns The plain text content of the RichTextEditor component, or undefined if the editor isn't available.
+     */
+    getPlainContent: () => string | undefined;
+}
+/**
+ * A component to wrap RoosterJS Rich Text Editor.
+ *
+ * @beta
+ */
+export declare const RichTextEditor: React.ForwardRefExoticComponent<RichTextEditorProps & React.RefAttributes<RichTextEditorComponentRef>>;
+//# sourceMappingURL=RichTextEditor.d.ts.map

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

@@ -0,0 +1,379 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+import React, { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { richTextEditorWrapperStyle, richTextEditorStyle } from '../styles/RichTextEditor.styles';
+import { useTheme } from '../../theming';
+import { isDarkThemed } from '../../theming/themeUtils';
+import CopyPastePlugin from './Plugins/CopyPastePlugin';
+import { createModelFromHtml, Editor, exportContent } from 'roosterjs-content-model-core';
+import { createBr, createEmptyModel, createParagraph, createSelectionMarker, setSelection } from 'roosterjs-content-model-dom';
+import { KeyboardInputPlugin } from './Plugins/KeyboardInputPlugin';
+import { AutoFormatPlugin, EditPlugin, PastePlugin, ShortcutPlugin, DefaultSanitizers } from 'roosterjs-content-model-plugins';
+import { UpdateContentPlugin, UpdateEvent } from './Plugins/UpdateContentPlugin';
+import { RichTextToolbar } from './Toolbar/RichTextToolbar';
+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';
+import { getFormatState, setDirection } from 'roosterjs-content-model-api';
+import UndoRedoPlugin from './Plugins/UndoRedoPlugin';
+/**
+ * A component to wrap RoosterJS Rich Text Editor.
+ *
+ * @beta
+ */
+export const RichTextEditor = React.forwardRef((props, ref) => {
+    const { initialContent, onChange, placeholderText, strings, showRichTextEditorFormatting, autoFocus, onKeyDown, onCompositionUpdate, 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 theme = useTheme();
+    const [contextMenuProps, setContextMenuProps] = useState(null);
+    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
+            cleanAllLocalBlobs(inlineImageLocalBlobs);
+        };
+        // This effect should only run once when the component is unmounted, so we don't need to add any dependencies
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    useEffect(() => {
+        var _a;
+        if (editor.current) {
+            if (!showRichTextEditorFormatting) {
+                (_a = editor.current) === null || _a === void 0 ? void 0 : _a.focus();
+            }
+        }
+    }, [showRichTextEditorFormatting]);
+    useImperativeHandle(ref, () => {
+        return {
+            focus() {
+                if (editor.current) {
+                    editor.current.focus();
+                }
+            },
+            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
+                    // ContentChanged event will be sent by RoosterJS automatically
+                    editor.current.formatContentModel((model) => {
+                        // Create a new empty paragraph with selection marker
+                        // this is needed for correct processing of images after the content is deleted
+                        const newModel = createEmptyModel();
+                        model.blocks = newModel.blocks;
+                        return true;
+                    });
+                    //reset content model
+                    onContentModelUpdate && onContentModelUpdate(editor.current.getContentModelCopy('disconnected'));
+                }
+            },
+            getPlainContent() {
+                if (editor.current) {
+                    return exportContent(editor.current, 'PlainTextFast');
+                }
+                else {
+                    return undefined;
+                }
+            }
+        };
+    }, [/* @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);
+    }, [theme]);
+    useEffect(() => {
+        if (placeholderText !== undefined) {
+            placeholderPlugin.updatePlaceholder(placeholderText);
+        }
+    }, [placeholderPlugin, placeholderText]);
+    const toolbar = useMemo(() => {
+        return React.createElement(RichTextToolbar, { plugin: toolbarPlugin, strings: strings });
+    }, [strings, toolbarPlugin]);
+    const updatePlugin = useMemo(() => {
+        return new UpdateContentPlugin();
+    }, []);
+    const copyPastePlugin = useMemo(() => {
+        return new CopyPastePlugin();
+    }, []);
+    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, /* @conditional-compile-remove(rich-text-editor-image-upload) */ removedInlineImages);
+        /* @conditional-compile-remove(rich-text-editor-image-upload) */
+        setPreviousInlineImages(getPreviousInlineImages(content));
+    }, [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, 
+        /* @conditional-compile-remove(rich-text-editor-image-upload) */ shouldRemoveInlineImages) => {
+            if (editor.current === null) {
+                return;
+            }
+            if (event === UpdateEvent.Blur || event === UpdateEvent.Dispose) {
+                onContentModelUpdate && onContentModelUpdate(editor.current.getContentModelCopy('disconnected'));
+            }
+            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, /* @conditional-compile-remove(rich-text-editor-image-upload) */ removedInlineImages);
+                /* @conditional-compile-remove(rich-text-editor-image-upload) */
+                setPreviousInlineImages(getPreviousInlineImages(content));
+            }
+        };
+    }, [
+        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) => {
+                    if (!id || !src) {
+                        return prev;
+                    }
+                    return Object.assign(Object.assign({}, prev), { [id]: src });
+                });
+                onInsertInlineImage(imageAttributes);
+            };
+        }
+        else {
+            copyPastePlugin.onInsertInlineImage = undefined;
+        }
+        undoRedoPlugin.onInsertInlineImage = onInsertInlineImage;
+    }, [copyPastePlugin, onInsertInlineImage, undoRedoPlugin]);
+    useEffect(() => {
+        undoRedoPlugin.onUpdateContent = () => {
+            onChangeContent(/* @conditional-compile-remove(rich-text-editor-image-upload) */ true);
+        };
+    }, [onChangeContent, undoRedoPlugin]);
+    const keyboardInputPlugin = useMemo(() => {
+        return new KeyboardInputPlugin();
+    }, []);
+    useEffect(() => {
+        // don't set callback in plugin constructor to update callback without plugin recreation
+        keyboardInputPlugin.onKeyDown = onKeyDown;
+    }, [keyboardInputPlugin, onKeyDown]);
+    useEffect(() => {
+        // don't set callback in plugin constructor to update callback without plugin recreation
+        keyboardInputPlugin.onCompositionUpdate = onCompositionUpdate;
+    }, [keyboardInputPlugin, onCompositionUpdate]);
+    const tableContextMenuPlugin = useMemo(() => {
+        return new TableEditContextMenuProvider();
+    }, []);
+    useEffect(() => {
+        tableContextMenuPlugin.updateStrings(strings);
+    }, [tableContextMenuPlugin, strings]);
+    const onContextMenuRender = useCallback((container, items, onDismiss) => {
+        setContextMenuProps({
+            items: items,
+            target: container,
+            onDismiss: onDismiss
+        });
+    }, []);
+    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 });
+        // AutoFormatPlugin previously was a part of the edit plugin
+        const autoFormatPlugin = new AutoFormatPlugin({ autoBullet: true, autoNumbering: true, autoLink: true });
+        const roosterPastePlugin = new PastePlugin(false, {
+            additionalDisallowedTags: ['head', '!doctype', '!cdata', '#comment'],
+            additionalAllowedTags: [],
+            styleSanitizers: DefaultSanitizers,
+            attributeSanitizers: {}
+        });
+        const shortcutPlugin = new ShortcutPlugin();
+        const contextMenuPlugin = new ContextMenuPlugin(onContextMenuRender, onContextMenuDismiss);
+        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
+    ]);
+    const announcerStringGetter = useCallback((key) => {
+        var _a, _b;
+        switch (key) {
+            case 'announceListItemBullet':
+                return (_a = strings.richTextNewBulletedListItemAnnouncement) !== null && _a !== void 0 ? _a : '';
+            case 'announceListItemNumbering':
+                return (_b = strings.richTextNewNumberedListItemAnnouncement) !== null && _b !== void 0 ? _b : '';
+            case 'announceOnFocusLastCell':
+                return '';
+        }
+    }, [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) {
+            editor.current = new Editor(editorDiv.current, {
+                inDarkMode: isDarkThemed(theme),
+                // doNotAdjustEditorColor is used to disable default color and background color for Rooster component
+                doNotAdjustEditorColor: true,
+                imageSelectionBorderColor: theme.palette.themePrimary,
+                tableCellSelectionBackgroundColor: theme.palette.neutralLight,
+                plugins: plugins,
+                initialModel: initialModel,
+                defaultModelToDomOptions: {
+                    formatApplierOverride: {
+                        // apply border and dataset formats for table
+                        border: borderApplier,
+                        dataset: dataSetApplier
+                    }
+                },
+                announcerStringGetter: announcerStringGetter
+            });
+        }
+        if (autoFocus === 'sendBoxTextField') {
+            (_a = editor.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+        return () => {
+            if (editor.current) {
+                editor.current.dispose();
+                editor.current = null;
+            }
+        };
+        // don't update the editor on deps update as everything is handled in separate hooks or plugins
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [theme, plugins, announcerStringGetter]);
+    useEffect(() => {
+        const themeDirectionValue = themeDirection(theme);
+        // check that editor exists and theme was actually changed
+        // as format.direction will be undefined if setDirection is not called
+        if (editor.current && previousThemeDirection.current !== themeDirectionValue) {
+            const format = getFormatState(editor.current);
+            if (format.direction !== themeDirectionValue) {
+                // should be set after the hook where editor is created as the editor might be null
+                // setDirection will cause the focus change back to the editor and this might not be what we want to do (autoFocus prop)
+                // that's why it's not part of the create editor hook
+                setDirection(editor.current, theme.rtl ? 'rtl' : 'ltr');
+            }
+            previousThemeDirection.current = themeDirectionValue;
+        }
+    }, [theme]);
+    return (React.createElement("div", { "data-testid": 'rich-text-editor-wrapper' },
+        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 } }))));
+});
+const createEditorInitialModel = (initialContent, contentModel) => {
+    if (contentModel) {
+        // contentModel is the current content of the editor
+        return contentModel;
+    }
+    else {
+        const initialContentValue = initialContent;
+        const initialModel = initialContentValue && initialContentValue.length > 0 ? createModelFromHtml(initialContentValue) : undefined;
+        if (initialModel && initialModel.blocks.length > 0) {
+            // lastBlock should have blockType = paragraph, otherwise add a new paragraph
+            // to set focus to the end of the content
+            const lastBlock = initialModel.blocks[initialModel.blocks.length - 1];
+            if ((lastBlock === null || lastBlock === void 0 ? void 0 : lastBlock.blockType) === 'Paragraph') {
+                // now lastBlock is paragraph
+                setSelectionAfterLastSegment(initialModel, lastBlock);
+            }
+            else {
+                const block = createParagraph(false);
+                initialModel.blocks.push(block);
+                setSelectionAfterLastSegment(initialModel, block);
+                // add content to the paragraph, otherwise height might be calculated incorrectly
+                block.segments.push(createBr());
+            }
+        }
+        return initialModel;
+    }
+};
+const setSelectionAfterLastSegment = (model, block) => {
+    var _a;
+    //selection marker should have the same format as the last segment if any
+    const format = block.segments.length > 0 ? (_a = block.segments[block.segments.length - 1]) === null || _a === void 0 ? void 0 : _a.format : undefined;
+    const marker = createSelectionMarker(format);
+    block.segments.push(marker);
+    setSelection(model, marker);
+};
+const themeDirection = (theme) => {
+    return theme.rtl ? 'rtl' : 'ltr';
+};
+//# sourceMappingURL=RichTextEditor.js.map