@azure/communication-react 1.30.0 → 1.31.0-beta.1

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

@@ -0,0 +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};"]}

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

@@ -0,0 +1,14 @@
+import type { PluginEvent, EditorPlugin, IEditor } from 'roosterjs-content-model-types';
+/**
+ * UndoRedoPlugin is a plugin for additional handling undo and redo events in the editor.
+ */
+export default class UndoRedoPlugin implements EditorPlugin {
+    private editor;
+    onInsertInlineImage?: (imageAttributes: Record<string, string>) => void;
+    onUpdateContent?: (() => void) | null;
+    getName(): string;
+    initialize(editor: IEditor): void;
+    dispose(): void;
+    onPluginEvent(event: PluginEvent): void;
+}
+//# sourceMappingURL=UndoRedoPlugin.d.ts.map

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

@@ -0,0 +1,42 @@
+import { PluginEventType, scrollToBottomRichTextEditor, getInsertedInlineImages } from '../../utils/RichTextEditorUtils';
+import { getInlineImageAttributes } from '../../utils/RichTextEditorUtils';
+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() {
+        this.editor = null;
+        this.onUpdateContent = null;
+    }
+    getName() {
+        return 'CustomUndoRedoPlugin';
+    }
+    initialize(editor) {
+        this.editor = editor;
+    }
+    dispose() { }
+    onPluginEvent(event) {
+        // handle when new images are added to the editor because of undo/redo
+        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) {
+            this.onUpdateContent();
+        }
+        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();
+        }
+    }
+}
+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":["../../../../../../../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};"]}

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,99 @@
+// 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":["../../../../../../../preprocess-dist/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}\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      compositionupdate: {\n        beforeDispatch: this.onCompositionUpdate\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.CompositionEnd:\n        this.onUpdate(UpdateEvent.ContentChanged);\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 onCompositionUpdate = (): void => {\n    if (this.onUpdate === null) {\n      return;\n    }\n    this.onUpdate(UpdateEvent.ContentChanged);\n  };\n  private onBlur = (): void => {\n    if (this.onUpdate === null) {\n      return;\n    }\n    this.onUpdate(UpdateEvent.Blur);\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,334 @@
+// 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';
+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, onPaste, onInsertInlineImage } = props;
+    const editor = useRef(null);
+    const editorDiv = 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 [previousInlineImages, setPreviousInlineImages] = useState([]);
+    const [inlineImageLocalBlobs, setInlineImageLocalBlobs] = useState({});
+    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() {
+                setPreviousInlineImages([]);
+                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;
+                }
+            }
+        };
+    }, [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((shouldUpdateInlineImages) => {
+        if (editor.current === null) {
+            return;
+        }
+        const content = exportContent(editor.current);
+        let removedInlineImages = [];
+        if (shouldUpdateInlineImages) {
+            removedInlineImages = getRemovedInlineImages(content, previousInlineImages);
+        }
+        onChange && onChange(content, removedInlineImages);
+        setPreviousInlineImages(getPreviousInlineImages(content));
+    }, [onChange, previousInlineImages]);
+    useEffect(() => {
+        // don't set callback in plugin constructor to update callback without plugin recreation
+        updatePlugin.onUpdate = (event, 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);
+                let removedInlineImages = [];
+                if (shouldRemoveInlineImages) {
+                    removedInlineImages = getRemovedInlineImages(content, previousInlineImages);
+                    if (removedInlineImages.length > 0) {
+                        removeLocalBlobs(inlineImageLocalBlobs, removedInlineImages);
+                    }
+                }
+                onChange && onChange(content, removedInlineImages);
+                setPreviousInlineImages(getPreviousInlineImages(content));
+            }
+        };
+    }, [onChange, onContentModelUpdate, updatePlugin, previousInlineImages, inlineImageLocalBlobs]);
+    const undoRedoPlugin = useMemo(() => {
+        return new UndoRedoPlugin();
+    }, []);
+    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(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);
+    }, []);
+    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;
+        const prevInlineImage = getPreviousInlineImages(initialContent);
+        setPreviousInlineImages(prevInlineImage);
+        const initialModel = createEditorInitialModel(initialContent, contentModel);
+        if (editorDiv.current) {
+            editor.current = new Editor(editorDiv.current, {
+                generateColorKey: color => color,
+                // Needed to ensure override of text color in dark mode.
+                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