@azure/communication-react 1.17.0 → 1.18.0-alpha-202406080014

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

@@ -0,0 +1,29 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+import { ContextMenuPluginBase } from 'roosterjs-content-model-plugins';
+/**
+ * Represents a plugin that adds a context menu to the rich text editor.
+ */
+export class ContextMenuPlugin extends ContextMenuPluginBase {
+    constructor(onRender, onDismiss) {
+        super({
+            /**
+             * Renders the context menu in the specified container with the provided items.
+             * @param container - The container element where the context menu should be rendered.
+             * @param items - The items to be displayed in the context menu.
+             * @param onDismiss - Callback function to be called when the context menu is dismissed. It will call `dismiss` method.
+             */
+            render: (container, items, onDismissCallback) => {
+                const filteredItems = items.filter((item) => item !== null);
+                onRender(container, filteredItems, onDismissCallback);
+            },
+            /**
+             * Dismisses the context menu.
+             */
+            dismiss: () => {
+                onDismiss();
+            }
+        });
+    }
+}
+//# sourceMappingURL=ContextMenuPlugin.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ContextMenuPlugin.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/RichTextEditor/Plugins/ContextMenuPlugin.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,qBAAqB,EAAE,MAAM,iCAAiC,CAAC;AAGxE;;GAEG;AACH,MAAM,OAAO,iBAAkB,SAAQ,qBAA0C;IAC/E,YACE,QAA+F,EAC/F,SAAqB;QAErB,KAAK,CAAC;YACJ;;;;;eAKG;YACH,MAAM,EAAE,CAAC,SAAS,EAAE,KAAK,EAAE,iBAAiB,EAAE,EAAE;gBAC9C,MAAM,aAAa,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,EAA+B,EAAE,CAAC,IAAI,KAAK,IAAI,CAAC,CAAC;gBACzF,QAAQ,CAAC,SAAS,EAAE,aAAa,EAAE,iBAAiB,CAAC,CAAC;YACxD,CAAC;YACD;;eAEG;YACH,OAAO,EAAE,GAAG,EAAE;gBACZ,SAAS,EAAE,CAAC;YACd,CAAC;SACF,CAAC,CAAC;IACL,CAAC;CACF","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { ContextMenuPluginBase } from 'roosterjs-content-model-plugins';\nimport type { IContextualMenuItem } from '@fluentui/react/';\n\n/**\n * Represents a plugin that adds a context menu to the rich text editor.\n */\nexport class ContextMenuPlugin extends ContextMenuPluginBase<IContextualMenuItem> {\n  constructor(\n    onRender: (container: HTMLElement, items: IContextualMenuItem[], onDismiss: () => void) => void,\n    onDismiss: () => void\n  ) {\n    super({\n      /**\n       * Renders the context menu in the specified container with the provided items.\n       * @param container - The container element where the context menu should be rendered.\n       * @param items - The items to be displayed in the context menu.\n       * @param onDismiss - Callback function to be called when the context menu is dismissed. It will call `dismiss` method.\n       */\n      render: (container, items, onDismissCallback) => {\n        const filteredItems = items.filter((item): item is IContextualMenuItem => item !== null);\n        onRender(container, filteredItems, onDismissCallback);\n      },\n      /**\n       * Dismisses the context menu.\n       */\n      dismiss: () => {\n        onDismiss();\n      }\n    });\n  }\n}\n"]}

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

@@ -0,0 +1,26 @@
+import type { PluginEvent, EditorPlugin, IEditor, BeforePasteEvent } from 'roosterjs-content-model-types';
+/**
+ * CopyPastePlugin is a plugin for handling copy and paste events in the editor.
+ */
+export default class CopyPastePlugin implements EditorPlugin {
+    private editor;
+    onPaste?: (event: {
+        content: DocumentFragment;
+    }) => void;
+    getName(): string;
+    initialize(editor: IEditor): void;
+    dispose(): void;
+    onPluginEvent(event: PluginEvent): void;
+}
+/**
+ * @internal
+ * Exported only for unit testing
+ */
+export declare const removeImageElement: (event: BeforePasteEvent) => void;
+/**
+ * Scrolls the editor's scroll container to the bottom after content is pasted.
+ * @param event - The plugin event.
+ * @param editor - The editor instance.
+ */
+export declare const scrollToBottomAfterContentPaste: (event: PluginEvent, editor: IEditor) => void;
+//# sourceMappingURL=CopyPastePlugin.d.ts.map

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

@@ -0,0 +1,85 @@
+import { ContentChangedEventSource, PluginEventType } from '../../utils/RichTextEditorUtils';
+/**
+ * CopyPastePlugin is a plugin for handling copy and paste events in the editor.
+ */
+export default class CopyPastePlugin {
+    constructor() {
+        this.editor = null;
+    }
+    getName() {
+        return 'CopyPastePlugin';
+    }
+    initialize(editor) {
+        this.editor = editor;
+    }
+    dispose() { }
+    onPluginEvent(event) {
+        handleBeforePasteEvent(event, /* @conditional-compile-remove(rich-text-editor-image-upload) */ this.onPaste);
+        if (this.editor !== null && !this.editor.isDisposed()) {
+            // scroll the editor to the correct position after pasting content
+            scrollToBottomAfterContentPaste(event, this.editor);
+        }
+    }
+}
+const handleBeforePasteEvent = (event, 
+/* @conditional-compile-remove(rich-text-editor-image-upload) */ onPaste) => {
+    if (event.eventType === PluginEventType.BeforePaste && event.pasteType === 'normal') {
+        /* @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;
+        // the initial behavior
+        // removes inline image elements from the pasted content when rich-text-editor-image-upload not available
+        removeImageElement(event);
+    }
+};
+/**
+ * @internal
+ * Exported only for unit testing
+ */
+export const removeImageElement = (event) => {
+    // We don't support the pasting options such as paste as image yet.
+    if (event.pasteType === 'normal') {
+        event.fragment.querySelectorAll('img').forEach((image) => {
+            // If the image is the only child of its parent, remove all the parents of this img element.
+            let parentNode = image.parentElement;
+            let currentNode = image;
+            while ((parentNode === null || parentNode === void 0 ? void 0 : parentNode.childNodes.length) === 1) {
+                currentNode = parentNode;
+                parentNode = parentNode.parentElement;
+            }
+            currentNode === null || currentNode === void 0 ? void 0 : currentNode.remove();
+        });
+    }
+};
+/**
+ * Scrolls the editor's scroll container to the bottom after content is pasted.
+ * @param event - The plugin event.
+ * @param editor - The editor instance.
+ */
+export const scrollToBottomAfterContentPaste = (event, editor) => {
+    if (event.eventType === PluginEventType.ContentChanged && event.source === ContentChangedEventSource.Paste) {
+        const scrollContainer = editor.getScrollContainer();
+        // get current selection for the editor
+        const selection = document.getSelection();
+        // if selection exists
+        if (selection && selection.rangeCount > 0) {
+            // the range for the selection
+            const range = selection.getRangeAt(0);
+            // the selection position relative to the viewport
+            const cursorRect = range.getBoundingClientRect();
+            // the scrollContainer position relative to the viewport
+            const scrollContainerRect = scrollContainer.getBoundingClientRect();
+            // 1. scrollContainer.scrollTop represents the number of pixels that the content of scrollContainer is scrolled upward.
+            // 2. subtract the top position of the scrollContainer element (scrollContainerRect.top) to
+            // translate the scroll position from being relative to the document to being relative to the viewport.
+            // 3. add the top position of the cursor (containerRect.top) to moves the scroll position to the cursor's position.
+            const updatedScrollTop = scrollContainer.scrollTop - scrollContainerRect.top + cursorRect.top;
+            scrollContainer.scrollTo({
+                top: updatedScrollTop,
+                behavior: 'smooth'
+            });
+        }
+    }
+};
+//# sourceMappingURL=CopyPastePlugin.js.map

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

@@ -0,0 +1 @@
+{"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, BeforePasteEvent } from 'roosterjs-content-model-types';\nimport { ContentChangedEventSource, PluginEventType } from '../../utils/RichTextEditorUtils';\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\n  getName(): string {\n    return 'CopyPastePlugin';\n  }\n\n  initialize(editor: IEditor): void {\n    this.editor = editor;\n  }\n\n  dispose(): void {}\n\n  onPluginEvent(event: PluginEvent): void {\n    handleBeforePasteEvent(event, /* @conditional-compile-remove(rich-text-editor-image-upload) */ this.onPaste);\n\n    if (this.editor !== null && !this.editor.isDisposed()) {\n      // scroll the editor to the correct position after pasting content\n      scrollToBottomAfterContentPaste(event, this.editor);\n    }\n  }\n}\n\nconst 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    // the initial behavior\n    // removes inline image elements from the pasted content when rich-text-editor-image-upload not available\n    removeImageElement(event as BeforePasteEvent);\n  }\n};\n\n/**\n * @internal\n * Exported only for unit testing\n */\nexport const removeImageElement = (event: BeforePasteEvent): void => {\n  // We don't support the pasting options such as paste as image yet.\n  if (event.pasteType === 'normal') {\n    event.fragment.querySelectorAll('img').forEach((image) => {\n      // If the image is the only child of its parent, remove all the parents of this img element.\n      let parentNode: HTMLElement | null = image.parentElement;\n      let currentNode: HTMLElement = image;\n      while (parentNode?.childNodes.length === 1) {\n        currentNode = parentNode;\n        parentNode = parentNode.parentElement;\n      }\n      currentNode?.remove();\n    });\n  }\n};\n\n/**\n * Scrolls the editor's scroll container to the bottom after content is pasted.\n * @param event - The plugin event.\n * @param editor - The editor instance.\n */\nexport const scrollToBottomAfterContentPaste = (event: PluginEvent, editor: IEditor): void => {\n  if (event.eventType === PluginEventType.ContentChanged && event.source === ContentChangedEventSource.Paste) {\n    const scrollContainer = editor.getScrollContainer();\n    // get current selection for the editor\n    const selection = document.getSelection();\n    // if selection exists\n    if (selection && selection.rangeCount > 0) {\n      // the range for the selection\n      const range = selection.getRangeAt(0);\n      // the selection position relative to the viewport\n      const cursorRect = range.getBoundingClientRect();\n      // the scrollContainer position relative to the viewport\n      const scrollContainerRect = scrollContainer.getBoundingClientRect();\n      // 1. scrollContainer.scrollTop represents the number of pixels that the content of scrollContainer is scrolled upward.\n      // 2. subtract the top position of the scrollContainer element (scrollContainerRect.top) to\n      // translate the scroll position from being relative to the document to being relative to the viewport.\n      // 3. add the top position of the cursor (containerRect.top) to moves the scroll position to the cursor's position.\n      const updatedScrollTop = scrollContainer.scrollTop - scrollContainerRect.top + cursorRect.top;\n      scrollContainer.scrollTo({\n        top: updatedScrollTop,\n        behavior: 'smooth'\n      });\n    }\n  }\n};\n"]}

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

@@ -0,0 +1,12 @@
+import type { PluginEvent, EditorPlugin } from 'roosterjs-content-model-types';
+/**
+ * KeyboardInputPlugin is a plugin for handling keyboard events in the editor.
+ */
+export declare class KeyboardInputPlugin implements EditorPlugin {
+    onKeyDown?: ((event: KeyboardEvent) => void) | null;
+    getName(): string;
+    initialize(): void;
+    dispose(): void;
+    onPluginEvent(event: PluginEvent): void;
+}
+//# sourceMappingURL=KeyboardInputPlugin.d.ts.map

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

@@ -0,0 +1,23 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+import { PluginEventType } from '../../utils/RichTextEditorUtils';
+/**
+ * KeyboardInputPlugin is a plugin for handling keyboard events in the editor.
+ */
+export class KeyboardInputPlugin {
+    constructor() {
+        // don't set callback in constructor to be able to update callback without plugin recreation
+        this.onKeyDown = null;
+    }
+    getName() {
+        return 'KeyboardInputPlugin';
+    }
+    initialize() { }
+    dispose() { }
+    onPluginEvent(event) {
+        if (this.onKeyDown && event.eventType === PluginEventType.KeyDown && event.rawEvent instanceof KeyboardEvent) {
+            this.onKeyDown(event.rawEvent);
+        }
+    }
+}
+//# sourceMappingURL=KeyboardInputPlugin.js.map

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

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

@@ -0,0 +1,15 @@
+import { WatermarkPlugin } from 'roosterjs-content-model-plugins';
+import type { /*PluginEvent, EditorPlugin,*/ IEditor } from 'roosterjs-content-model-types';
+/**
+ * PlaceholderPlugin is a plugin for displaying placeholder and handle localization for it in the editor.
+ */
+export default class PlaceholderPlugin extends WatermarkPlugin {
+    private isPlaceholderShown;
+    private editorValue;
+    updatePlaceholder(placeholder: string): void;
+    initialize(editor: IEditor): void;
+    dispose(): void;
+    protected show(editor: IEditor): void;
+    protected hide(editor: IEditor): void;
+}
+//# sourceMappingURL=PlaceholderPlugin.d.ts.map

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

@@ -0,0 +1,39 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+import { WatermarkPlugin } from 'roosterjs-content-model-plugins';
+/**
+ * PlaceholderPlugin is a plugin for displaying placeholder and handle localization for it in the editor.
+ */
+export default class PlaceholderPlugin extends WatermarkPlugin {
+    constructor() {
+        super(...arguments);
+        this.isPlaceholderShown = false;
+        this.editorValue = null;
+    }
+    updatePlaceholder(placeholder) {
+        this.watermark = placeholder;
+        // hide and show the placeholder to show the latest one
+        // this needs to be done only if the placeholder is currently shown
+        if (this.editorValue && this.isPlaceholderShown) {
+            this.hide(this.editorValue);
+            this.show(this.editorValue);
+        }
+    }
+    initialize(editor) {
+        this.editorValue = editor;
+        super.initialize(editor);
+    }
+    dispose() {
+        this.editorValue = null;
+        super.dispose();
+    }
+    show(editor) {
+        super.show(editor);
+        this.isPlaceholderShown = true;
+    }
+    hide(editor) {
+        super.hide(editor);
+        this.isPlaceholderShown = false;
+    }
+}
+//# sourceMappingURL=PlaceholderPlugin.js.map

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

@@ -0,0 +1 @@
+{"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,CAAC,OAAO,OAAO,iBAAkB,SAAQ,eAAe;IAA9D;;QACU,uBAAkB,GAAY,KAAK,CAAC;QACpC,gBAAW,GAAmB,IAAI,CAAC;IA2B7C,CAAC;IAzBC,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;IAC3B,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 { /*PluginEvent, EditorPlugin,*/ 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 default 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  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.d.ts

@@ -0,0 +1,24 @@
+import type { ContentModelFormatState, EditorPlugin, IEditor, PluginEvent } from 'roosterjs-content-model-types';
+/**
+ * KeyboardInputPlugin is a plugin for handling keyboard events in the editor.
+ */
+export declare class RichTextToolbarPlugin implements EditorPlugin {
+    private formatState;
+    private editor;
+    onFormatChanged: ((formatState: ContentModelFormatState) => void) | null;
+    getName(): string;
+    initialize(editor: IEditor): void;
+    dispose(): void;
+    onPluginEvent(event: PluginEvent): void;
+    /**
+     * Handles the click event of a toolbar button.
+     * @param buttonAction - The action to be performed when the button is clicked.
+     */
+    onToolbarButtonClick(buttonAction: (editor: IEditor) => void): void;
+    /**
+     * Updates the format state of the rich text editor and triggers the `onFormatChanged` callback
+     * if there is any difference between the new and the current format states.
+     */
+    private updateFormat;
+}
+//# sourceMappingURL=RichTextToolbarPlugin.d.ts.map

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

@@ -0,0 +1,66 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+import { getFormatState } from 'roosterjs-content-model-api';
+import { getObjectKeys } from 'roosterjs-content-model-dom';
+import { PluginEventType } from '../../utils/RichTextEditorUtils';
+/**
+ * KeyboardInputPlugin is a plugin for handling keyboard events in the editor.
+ */
+export class RichTextToolbarPlugin {
+    constructor() {
+        this.formatState = null;
+        this.editor = null;
+        this.onFormatChanged = null;
+    }
+    getName() {
+        return 'RichTextToolbarPlugin';
+    }
+    initialize(editor) {
+        this.editor = editor;
+    }
+    dispose() {
+        this.editor = null;
+    }
+    onPluginEvent(event) {
+        switch (event.eventType) {
+            // KeyDown and MouseUp are used to update the state when the editor is already shown and focused by the user
+            case PluginEventType.EditorReady:
+            case PluginEventType.ContentChanged:
+            case PluginEventType.ZoomChanged:
+            case PluginEventType.KeyDown:
+            case PluginEventType.MouseUp:
+                this.updateFormat();
+                break;
+        }
+    }
+    /**
+     * Handles the click event of a toolbar button.
+     * @param buttonAction - The action to be performed when the button is clicked.
+     */
+    onToolbarButtonClick(buttonAction) {
+        if (this.editor && !this.editor.isDisposed()) {
+            buttonAction(this.editor);
+            this.updateFormat();
+        }
+    }
+    /**
+     * Updates the format state of the rich text editor and triggers the `onFormatChanged` callback
+     * if there is any difference between the new and the current format states.
+     */
+    updateFormat() {
+        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);
+            // 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]); })) {
+                this.formatState = newFormatState;
+                this.onFormatChanged(newFormatState);
+            }
+        }
+    }
+}
+//# sourceMappingURL=RichTextToolbarPlugin.js.map

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

@@ -0,0 +1 @@
+{"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;IACK,YAAY;QAClB,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  private 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.d.ts

@@ -0,0 +1,20 @@
+import type { ContextMenuProvider, IEditor } from 'roosterjs-content-model-types';
+import { RichTextStrings } from '../RichTextSendBox';
+import { IContextualMenuItem } from '@fluentui/react';
+/**
+ * Provides a context menu for editing tables in the rich text editor.
+ */
+export declare class TableEditContextMenuProvider implements ContextMenuProvider<IContextualMenuItem> {
+    private editor;
+    strings: Partial<RichTextStrings>;
+    private items;
+    updateStrings(strings: Partial<RichTextStrings>): void;
+    getName(): string;
+    initialize(editor: IEditor): void;
+    /**
+     * Dispose this plugin
+     */
+    dispose(): void;
+    getContextMenuItems(node: Node): IContextualMenuItem[] | null;
+}
+//# sourceMappingURL=TableEditContextMenuProvider.d.ts.map

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

@@ -0,0 +1,46 @@
+import { getTableEditContextMenuItems } from '../../utils/RichTextTableUtils';
+/**
+ * Provides a context menu for editing tables in the rich text editor.
+ */
+export class TableEditContextMenuProvider {
+    constructor() {
+        this.editor = null;
+        this.strings = {};
+        this.items = null;
+    }
+    updateStrings(strings) {
+        this.strings = strings;
+        if (this.editor) {
+            this.items = getTableEditContextMenuItems(this.editor, this.strings);
+        }
+    }
+    getName() {
+        return 'TableEditContextMenuProvider';
+    }
+    initialize(editor) {
+        this.editor = editor;
+        this.items = getTableEditContextMenuItems(editor, this.strings);
+    }
+    /**
+     * Dispose this plugin
+     */
+    dispose() {
+        this.editor = null;
+    }
+    getContextMenuItems(node) {
+        // return this.items;
+        if (this.editor && isTableEditable(this.editor, node)) {
+            return this.items;
+        }
+        else {
+            return null;
+        }
+    }
+}
+const isTableEditable = (editor, node) => {
+    const domHelper = editor.getDOMHelper();
+    const td = domHelper.findClosestElementAncestor(node, 'TD,TH');
+    const table = td && domHelper.findClosestElementAncestor(td, 'table');
+    return (table === null || table === void 0 ? void 0 : table.isContentEditable) === true;
+};
+//# sourceMappingURL=TableEditContextMenuProvider.js.map

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

@@ -0,0 +1 @@
+{"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;IAiCrD,CAAC;IA/BC,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,qBAAqB;QACrB,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    // return this.items;\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/UpdateContentPlugin.d.ts

@@ -0,0 +1,29 @@
+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) => void) | null;
+    getName(): string;
+    /**
+     * Initialize this plugin
+     * @param editor The editor instance
+     */
+    initialize(editor: IEditor): void;
+    dispose(): void;
+    onPluginEvent(event: PluginEvent): void;
+    private onBlur;
+}
+//# sourceMappingURL=UpdateContentPlugin.d.ts.map

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

@@ -0,0 +1,71 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+import { PluginEventType } from '../../utils/RichTextEditorUtils';
+/**
+ * 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 = {}));
+/**
+ * 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.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 }
+        });
+    }
+    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.ContentChanged:
+                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":"AAAA,uCAAuC;AACvC,kCAAkC;AAGlC,OAAO,EAAE,eAAe,EAAE,MAAM,iCAAiC,CAAC;AAElE;;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;;GAEG;AACH,MAAM,OAAO,mBAAmB;IAAhC;QACU,WAAM,GAAmB,IAAI,CAAC;QAC9B,aAAQ,GAAwB,IAAI,CAAC;QAC7C,4FAA4F;QAC5F,aAAQ,GAA0C,IAAI,CAAC;QAiD/C,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;IArDC,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;QACD,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,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';\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\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) => 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    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        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.d.ts

@@ -0,0 +1,57 @@
+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) => void;
+    onKeyDown?: (ev: KeyboardEvent) => 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;
+}
+/**
+ * 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