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

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

@@ -0,0 +1,246 @@
+// 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 { darkTheme, lightTheme, useTheme } from '../../theming';
+import { isDarkThemed } from '../../theming/themeUtils';
+import CopyPastePlugin from './Plugins/CopyPastePlugin';
+import { createModelFromHtml, Editor, exportContent } from 'roosterjs-content-model-core';
+import { createParagraph, createSelectionMarker, setSelection } from 'roosterjs-content-model-dom';
+import { KeyboardInputPlugin } from './Plugins/KeyboardInputPlugin';
+import { AutoFormatPlugin, EditPlugin, PastePlugin, ShortcutPlugin } 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 { ContextualMenu } from '@fluentui/react';
+import PlaceholderPlugin from './Plugins/PlaceholderPlugin';
+/**
+ * A component to wrap RoosterJS Rich Text Editor.
+ *
+ * @beta
+ */
+export const RichTextEditor = React.forwardRef((props, ref) => {
+    const { initialContent, onChange, placeholderText, strings, showRichTextEditorFormatting, autoFocus, onKeyDown, onContentModelUpdate, contentModel, 
+    /* @conditional-compile-remove(rich-text-editor-image-upload) */
+    onPaste } = props;
+    const editor = useRef(null);
+    const editorDiv = useRef(null);
+    const theme = useTheme();
+    const [contextMenuProps, setContextMenuProps] = useState(null);
+    const tableCellSelectionLightThemeBackgroundColor = useRef(undefined);
+    useImperativeHandle(ref, () => {
+        return {
+            focus() {
+                if (editor.current) {
+                    editor.current.focus();
+                }
+            },
+            setEmptyContent() {
+                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) => {
+                        model.blocks = [];
+                        return true;
+                    });
+                    //reset content model
+                    onContentModelUpdate && onContentModelUpdate(undefined);
+                }
+            },
+            getPlainContent() {
+                if (editor.current) {
+                    return exportContent(editor.current, 'PlainTextFast');
+                }
+                else {
+                    return undefined;
+                }
+            }
+        };
+    }, [onContentModelUpdate]);
+    const toolbarPlugin = React.useMemo(() => {
+        return new RichTextToolbarPlugin();
+    }, []);
+    const isDarkThemedValue = useMemo(() => {
+        return isDarkThemed(theme);
+    }, [theme]);
+    useEffect(() => {
+        var _a;
+        (_a = editor.current) === null || _a === void 0 ? void 0 : _a.setDarkModeState(isDarkThemedValue);
+    }, [isDarkThemedValue]);
+    // remember light color to correctly set it in the dark theme
+    useEffect(() => {
+        var _a, _b, _c;
+        // focus to update selection color for table, otherwise the existing selection color for table won't be updated
+        (_a = editor.current) === null || _a === void 0 ? void 0 : _a.focus();
+        if (!isDarkThemedValue) {
+            tableCellSelectionLightThemeBackgroundColor.current =
+                (_c = (_b = lightTheme.palette) === null || _b === void 0 ? void 0 : _b.neutralLight) !== null && _c !== void 0 ? _c : theme.palette.neutralLight;
+        }
+    }, [theme.palette.neutralLight, isDarkThemedValue]);
+    const placeholderPlugin = useMemo(() => {
+        return new PlaceholderPlugin('');
+    }, []);
+    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();
+    }, []);
+    useEffect(() => {
+        // don't set callback in plugin constructor to update callback without plugin recreation
+        updatePlugin.onUpdate = (event) => {
+            if (editor.current === null) {
+                return;
+            }
+            if (event === UpdateEvent.Blur || event === UpdateEvent.Dispose) {
+                onContentModelUpdate && onContentModelUpdate(editor.current.getContentModelCopy('disconnected'));
+            }
+            else {
+                onChange && onChange(exportContent(editor.current));
+            }
+        };
+    }, [onChange, onContentModelUpdate, updatePlugin]);
+    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]);
+    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);
+    }, []);
+    const getDarkColor = useCallback((lightColor, _baseLValue, colorType) => {
+        var _a, _b;
+        if (lightColor === tableCellSelectionLightThemeBackgroundColor.current && colorType === 'background') {
+            return (_b = (_a = darkTheme.palette) === null || _a === void 0 ? void 0 : _a.neutralLight) !== null && _b !== void 0 ? _b : theme.palette.neutralLight;
+        }
+        return lightColor;
+    }, [theme.palette.neutralLight]);
+    const copyPastePlugin = useMemo(() => {
+        return new CopyPastePlugin();
+    }, []);
+    /* @conditional-compile-remove(rich-text-editor-image-upload) */
+    useEffect(() => {
+        copyPastePlugin.onPaste = onPaste;
+    }, [copyPastePlugin, onPaste]);
+    const plugins = useMemo(() => {
+        const contentEdit = new EditPlugin();
+        // AutoFormatPlugin previously was a part of the edit plugin
+        const autoFormatPlugin = new AutoFormatPlugin({ autoBullet: true, autoNumbering: true, autoLink: true });
+        const roosterPastePlugin = new PastePlugin(false);
+        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
+        ];
+    }, [
+        onContextMenuRender,
+        onContextMenuDismiss,
+        placeholderPlugin,
+        keyboardInputPlugin,
+        updatePlugin,
+        copyPastePlugin,
+        toolbarPlugin,
+        tableContextMenuPlugin
+    ]);
+    useEffect(() => {
+        var _a, _b;
+        const initialModel = createEditorInitialModel(initialContent, contentModel);
+        if (editorDiv.current) {
+            editor.current = new Editor(editorDiv.current, {
+                inDarkMode: isDarkThemedValue,
+                // doNotAdjustEditorColor is used to disable default color and background color for Rooster component
+                doNotAdjustEditorColor: true,
+                // TODO: confirm the color during inline images implementation
+                imageSelectionBorderColor: 'blue',
+                tableCellSelectionBackgroundColor: ((_a = lightTheme.palette) === null || _a === void 0 ? void 0 : _a.neutralLight) && theme.palette.neutralLight,
+                plugins: plugins,
+                initialModel: initialModel,
+                defaultModelToDomOptions: {
+                    formatApplierOverride: {
+                        // apply border and dataset formats for table
+                        border: borderApplier,
+                        dataset: dataSetApplier
+                    }
+                },
+                getDarkColor: getDarkColor
+            });
+        }
+        if (autoFocus === 'sendBoxTextField') {
+            (_b = editor.current) === null || _b === void 0 ? void 0 : _b.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
+    }, []);
+    return (React.createElement("div", { "data-testid": 'rich-text-editor-wrapper' },
+        showRichTextEditorFormatting && toolbar,
+        React.createElement("div", { className: richTextEditorWrapperStyle(theme, !showRichTextEditorFormatting) },
+            React.createElement("div", { ref: editorDiv, tabIndex: 0, role: "textbox", "aria-multiline": "true", "data-testid": 'rooster-rich-text-editor', className: richTextEditorStyle(props.styles) })),
+        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
+            let lastBlock = initialModel.blocks[initialModel.blocks.length - 1];
+            if ((lastBlock === null || lastBlock === void 0 ? void 0 : lastBlock.blockType) === 'Paragraph') {
+                // now lastBlock is paragraph
+            }
+            else {
+                lastBlock = createParagraph(true);
+                initialModel.blocks.push(lastBlock);
+            }
+            const marker = createSelectionMarker();
+            lastBlock.segments.push(marker);
+            setSelection(initialModel, marker);
+        }
+        return initialModel;
+    }
+};
+//# sourceMappingURL=RichTextEditor.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RichTextEditor.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/RichTextEditor/RichTextEditor.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\nimport React, { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';\nimport { richTextEditorWrapperStyle, richTextEditorStyle } from '../styles/RichTextEditor.styles';\nimport { darkTheme, lightTheme, useTheme } from '../../theming';\nimport { RichTextStrings } from './RichTextSendBox';\nimport { isDarkThemed } from '../../theming/themeUtils';\nimport CopyPastePlugin from './Plugins/CopyPastePlugin';\nimport type { ContentModelDocument, EditorPlugin, IEditor } from 'roosterjs-content-model-types';\nimport { createModelFromHtml, Editor, exportContent } from 'roosterjs-content-model-core';\nimport { createParagraph, createSelectionMarker, setSelection } from 'roosterjs-content-model-dom';\nimport { KeyboardInputPlugin } from './Plugins/KeyboardInputPlugin';\nimport { AutoFormatPlugin, EditPlugin, PastePlugin, ShortcutPlugin } from 'roosterjs-content-model-plugins';\nimport { UpdateContentPlugin, UpdateEvent } from './Plugins/UpdateContentPlugin';\nimport { RichTextToolbar } from './Toolbar/RichTextToolbar';\nimport { RichTextToolbarPlugin } from './Plugins/RichTextToolbarPlugin';\nimport { ContextMenuPlugin } from './Plugins/ContextMenuPlugin';\nimport { TableEditContextMenuProvider } from './Plugins/TableEditContextMenuProvider';\nimport { borderApplier, dataSetApplier } from '../utils/RichTextEditorUtils';\nimport { ContextualMenu, IContextualMenuItem, IContextualMenuProps } from '@fluentui/react';\nimport PlaceholderPlugin from './Plugins/PlaceholderPlugin';\n\n/**\n * Style props for {@link RichTextEditor}.\n *\n * @private\n */\nexport interface RichTextEditorStyleProps {\n  minHeight: string;\n  maxHeight: string;\n}\n\n/**\n * Props for {@link RichTextEditor}.\n *\n * @private\n */\nexport interface RichTextEditorProps {\n  // the initial content of editor that is set when editor is created (e.g. when editing a message)\n  initialContent?: string;\n  onChange: (newValue?: string) => void;\n  onKeyDown?: (ev: KeyboardEvent) => void;\n  // update the current content of the rich text editor\n  onContentModelUpdate?: (contentModel: ContentModelDocument | undefined) => void;\n  contentModel?: ContentModelDocument | undefined;\n  placeholderText?: string;\n  strings: Partial<RichTextStrings>;\n  showRichTextEditorFormatting: boolean;\n  styles: RichTextEditorStyleProps;\n  autoFocus?: 'sendBoxTextField';\n  /* @conditional-compile-remove(rich-text-editor-image-upload) */\n  onPaste?: (event: { content: DocumentFragment }) => void;\n}\n\n/**\n * Represents a reference to the RichTextEditor component.\n */\nexport interface RichTextEditorComponentRef {\n  /**\n   * Sets focus on the RichTextEditor component.\n   */\n  focus: () => void;\n\n  /**\n   * Sets the content of the RichTextEditor component to an empty string.\n   */\n  setEmptyContent: () => void;\n\n  /**\n   * Retrieves the plain text content of the RichTextEditor component.\n   * @returns The plain text content of the RichTextEditor component, or undefined if the editor isn't available.\n   */\n  getPlainContent: () => string | undefined;\n}\n\n/**\n * A component to wrap RoosterJS Rich Text Editor.\n *\n * @beta\n */\nexport const RichTextEditor = React.forwardRef<RichTextEditorComponentRef, RichTextEditorProps>((props, ref) => {\n  const {\n    initialContent,\n    onChange,\n    placeholderText,\n    strings,\n    showRichTextEditorFormatting,\n    autoFocus,\n    onKeyDown,\n    onContentModelUpdate,\n    contentModel,\n    /* @conditional-compile-remove(rich-text-editor-image-upload) */\n    onPaste\n  } = props;\n  const editor = useRef<IEditor | null>(null);\n  const editorDiv = useRef<HTMLDivElement>(null);\n  const theme = useTheme();\n  const [contextMenuProps, setContextMenuProps] = useState<IContextualMenuProps | null>(null);\n  const tableCellSelectionLightThemeBackgroundColor = useRef<string | undefined>(undefined);\n\n  useImperativeHandle(\n    ref,\n    () => {\n      return {\n        focus() {\n          if (editor.current) {\n            editor.current.focus();\n          }\n        },\n        setEmptyContent() {\n          if (editor.current) {\n            // remove all content from the editor and update the model\n            // ContentChanged event will be sent by RoosterJS automatically\n            editor.current.formatContentModel((model: ContentModelDocument): boolean => {\n              model.blocks = [];\n              return true;\n            });\n            //reset content model\n            onContentModelUpdate && onContentModelUpdate(undefined);\n          }\n        },\n        getPlainContent() {\n          if (editor.current) {\n            return exportContent(editor.current, 'PlainTextFast');\n          } else {\n            return undefined;\n          }\n        }\n      };\n    },\n    [onContentModelUpdate]\n  );\n\n  const toolbarPlugin = React.useMemo(() => {\n    return new RichTextToolbarPlugin();\n  }, []);\n\n  const isDarkThemedValue = useMemo(() => {\n    return isDarkThemed(theme);\n  }, [theme]);\n\n  useEffect(() => {\n    editor.current?.setDarkModeState(isDarkThemedValue);\n  }, [isDarkThemedValue]);\n\n  // remember light color to correctly set it in the dark theme\n  useEffect(() => {\n    // focus to update selection color for table, otherwise the existing selection color for table won't be updated\n    editor.current?.focus();\n    if (!isDarkThemedValue) {\n      tableCellSelectionLightThemeBackgroundColor.current =\n        lightTheme.palette?.neutralLight ?? theme.palette.neutralLight;\n    }\n  }, [theme.palette.neutralLight, isDarkThemedValue]);\n\n  const placeholderPlugin = useMemo(() => {\n    return new PlaceholderPlugin('');\n  }, []);\n\n  useEffect(() => {\n    if (placeholderText !== undefined) {\n      placeholderPlugin.updatePlaceholder(placeholderText);\n    }\n  }, [placeholderPlugin, placeholderText]);\n\n  const toolbar = useMemo(() => {\n    return <RichTextToolbar plugin={toolbarPlugin} strings={strings} />;\n  }, [strings, toolbarPlugin]);\n\n  const updatePlugin = useMemo(() => {\n    return new UpdateContentPlugin();\n  }, []);\n\n  useEffect(() => {\n    // don't set callback in plugin constructor to update callback without plugin recreation\n    updatePlugin.onUpdate = (event: string) => {\n      if (editor.current === null) {\n        return;\n      }\n      if (event === UpdateEvent.Blur || event === UpdateEvent.Dispose) {\n        onContentModelUpdate && onContentModelUpdate(editor.current.getContentModelCopy('disconnected'));\n      } else {\n        onChange && onChange(exportContent(editor.current));\n      }\n    };\n  }, [onChange, onContentModelUpdate, updatePlugin]);\n\n  const keyboardInputPlugin = useMemo(() => {\n    return new KeyboardInputPlugin();\n  }, []);\n\n  useEffect(() => {\n    // don't set callback in plugin constructor to update callback without plugin recreation\n    keyboardInputPlugin.onKeyDown = onKeyDown;\n  }, [keyboardInputPlugin, onKeyDown]);\n\n  const tableContextMenuPlugin = useMemo(() => {\n    return new TableEditContextMenuProvider();\n  }, []);\n\n  useEffect(() => {\n    tableContextMenuPlugin.updateStrings(strings);\n  }, [tableContextMenuPlugin, strings]);\n\n  const onContextMenuRender = useCallback(\n    (container: HTMLElement, items: IContextualMenuItem[], onDismiss: () => void): void => {\n      setContextMenuProps({\n        items: items,\n        target: container,\n        onDismiss: onDismiss\n      });\n    },\n    []\n  );\n\n  const onContextMenuDismiss = useCallback((): void => {\n    setContextMenuProps(null);\n  }, []);\n\n  const getDarkColor = useCallback(\n    (lightColor: string, _baseLValue?: number, colorType?: 'text' | 'background' | 'border'): string => {\n      if (lightColor === tableCellSelectionLightThemeBackgroundColor.current && colorType === 'background') {\n        return darkTheme.palette?.neutralLight ?? theme.palette.neutralLight;\n      }\n      return lightColor;\n    },\n    [theme.palette.neutralLight]\n  );\n\n  const copyPastePlugin = useMemo(() => {\n    return new CopyPastePlugin();\n  }, []);\n\n  /* @conditional-compile-remove(rich-text-editor-image-upload) */\n  useEffect(() => {\n    copyPastePlugin.onPaste = onPaste;\n  }, [copyPastePlugin, onPaste]);\n\n  const plugins: EditorPlugin[] = useMemo(() => {\n    const contentEdit = new EditPlugin();\n    // AutoFormatPlugin previously was a part of the edit plugin\n    const autoFormatPlugin = new AutoFormatPlugin({ autoBullet: true, autoNumbering: true, autoLink: true });\n    const roosterPastePlugin = new PastePlugin(false);\n    const shortcutPlugin = new ShortcutPlugin();\n    const contextMenuPlugin = new ContextMenuPlugin(onContextMenuRender, onContextMenuDismiss);\n    return [\n      placeholderPlugin,\n      keyboardInputPlugin,\n      contentEdit,\n      autoFormatPlugin,\n      updatePlugin,\n      copyPastePlugin,\n      roosterPastePlugin,\n      toolbarPlugin,\n      shortcutPlugin,\n      // contextPlugin and tableEditMenuProvider allow to show insert/delete menu for the table\n      contextMenuPlugin,\n      tableContextMenuPlugin\n    ];\n  }, [\n    onContextMenuRender,\n    onContextMenuDismiss,\n    placeholderPlugin,\n    keyboardInputPlugin,\n    updatePlugin,\n    copyPastePlugin,\n    toolbarPlugin,\n    tableContextMenuPlugin\n  ]);\n\n  useEffect(() => {\n    const initialModel = createEditorInitialModel(initialContent, contentModel);\n    if (editorDiv.current) {\n      editor.current = new Editor(editorDiv.current, {\n        inDarkMode: isDarkThemedValue,\n        // doNotAdjustEditorColor is used to disable default color and background color for Rooster component\n        doNotAdjustEditorColor: true,\n        // TODO: confirm the color during inline images implementation\n        imageSelectionBorderColor: 'blue',\n        tableCellSelectionBackgroundColor: lightTheme.palette?.neutralLight && theme.palette.neutralLight,\n        plugins: plugins,\n        initialModel: initialModel,\n        defaultModelToDomOptions: {\n          formatApplierOverride: {\n            // apply border and dataset formats for table\n            border: borderApplier,\n            dataset: dataSetApplier\n          }\n        },\n        getDarkColor: getDarkColor\n      });\n    }\n\n    if (autoFocus === 'sendBoxTextField') {\n      editor.current?.focus();\n    }\n\n    return () => {\n      if (editor.current) {\n        editor.current.dispose();\n        editor.current = null;\n      }\n    };\n    // don't update the editor on deps update as everything is handled in separate hooks or plugins\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  return (\n    <div data-testid={'rich-text-editor-wrapper'}>\n      {showRichTextEditorFormatting && toolbar}\n      <div className={richTextEditorWrapperStyle(theme, !showRichTextEditorFormatting)}>\n        {/* div that is used by Rooster JS as a parent of the editor */}\n        <div\n          ref={editorDiv}\n          tabIndex={0}\n          role=\"textbox\"\n          aria-multiline=\"true\"\n          data-testid={'rooster-rich-text-editor'}\n          className={richTextEditorStyle(props.styles)}\n        />\n      </div>\n      {contextMenuProps && <ContextualMenu {...contextMenuProps} calloutProps={{ isBeakVisible: false }} />}\n    </div>\n  );\n});\n\nconst createEditorInitialModel = (\n  initialContent?: string,\n  contentModel?: ContentModelDocument\n): ContentModelDocument | undefined => {\n  if (contentModel) {\n    // contentModel is the current content of the editor\n    return contentModel;\n  } else {\n    const initialContentValue = initialContent;\n    const initialModel =\n      initialContentValue && initialContentValue.length > 0 ? createModelFromHtml(initialContentValue) : undefined;\n    if (initialModel && initialModel.blocks.length > 0) {\n      // lastBlock should have blockType = paragraph, otherwise add a new paragraph\n      // to set focus to the end of the content\n      let lastBlock = initialModel.blocks[initialModel.blocks.length - 1];\n      if (lastBlock?.blockType === 'Paragraph') {\n        // now lastBlock is paragraph\n      } else {\n        lastBlock = createParagraph(true);\n        initialModel.blocks.push(lastBlock);\n      }\n      const marker = createSelectionMarker();\n      lastBlock.segments.push(marker);\n      setSelection(initialModel, marker);\n    }\n    return initialModel;\n  }\n};\n"]}

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

@@ -0,0 +1,36 @@
+import React, { ReactNode } from 'react';
+import { BaseCustomStyles } from '../../types';
+import { RichTextEditorComponentRef, RichTextEditorStyleProps } from './RichTextEditor';
+import { RichTextSendBoxStrings } from './RichTextSendBox';
+/**
+ * @private
+ */
+export interface RichTextInputBoxComponentStylesProps extends BaseCustomStyles {
+}
+/**
+ * @private
+ */
+export interface RichTextInputBoxComponentProps {
+    placeholderText?: string;
+    initialContent?: string;
+    onChange: (newValue?: string) => void;
+    onEnterKeyDown?: () => void;
+    editorComponentRef: React.RefObject<RichTextEditorComponentRef>;
+    strings: Partial<RichTextSendBoxStrings>;
+    disabled: boolean;
+    actionComponents: ReactNode;
+    onRenderAttachmentUploads?: () => JSX.Element;
+    hasAttachments?: boolean;
+    richTextEditorStyleProps: (isExpanded: boolean) => RichTextEditorStyleProps;
+    isHorizontalLayoutDisabled?: boolean;
+    autoFocus?: 'sendBoxTextField';
+    onTyping?: () => Promise<void>;
+    onPaste?: (event: {
+        content: DocumentFragment;
+    }) => void;
+}
+/**
+ * @private
+ */
+export declare const RichTextInputBoxComponent: (props: RichTextInputBoxComponentProps) => JSX.Element;
+//# sourceMappingURL=RichTextInputBoxComponent.d.ts.map

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

@@ -0,0 +1,96 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { RichTextEditor } from './RichTextEditor';
+import { useTheme } from '../../theming';
+import { Icon, Stack } from '@fluentui/react';
+import { InputBoxButton } from '../InputBoxButton';
+import { isEnterKeyEventFromCompositionSession } from '../utils';
+import { richTextActionButtonsDividerStyle, richTextActionButtonsStackStyle, richTextActionButtonsStyle, richTextFormatButtonIconStyle } from '../styles/RichTextEditor.styles';
+import { inputBoxContentStackStyle, inputBoxRichTextStackItemStyle, inputBoxRichTextStackStyle, richTextBorderBoxStyle } from '../styles/RichTextInputBoxComponent.styles';
+/**
+ * @private
+ */
+export const RichTextInputBoxComponent = (props) => {
+    const { placeholderText, initialContent, onChange, onEnterKeyDown, editorComponentRef, disabled, strings, actionComponents, 
+    /* @conditional-compile-remove(file-sharing-acs) */
+    onRenderAttachmentUploads, 
+    /* @conditional-compile-remove(file-sharing-acs) */
+    hasAttachments, richTextEditorStyleProps, isHorizontalLayoutDisabled = false, autoFocus, onTyping } = props;
+    const theme = useTheme();
+    // undefined is used to indicate that the rich text editor toolbar state wasn't changed yet
+    const [showRichTextEditorFormatting, setShowRichTextEditorFormatting] = useState(undefined);
+    const [contentModel, setContentModel] = useState(undefined);
+    const onRenderRichTextEditorIcon = useCallback((isHover) => {
+        const isRichTextEditorToolbarShown = showRichTextEditorFormatting === true;
+        return (React.createElement(Icon, { iconName: isHover || isRichTextEditorToolbarShown ? 'RichTextEditorButtonIconFilled' : 'RichTextEditorButtonIcon', className: richTextFormatButtonIconStyle(theme, !disabled && (isHover || isRichTextEditorToolbarShown)) }));
+    }, [disabled, showRichTextEditorFormatting, theme]);
+    useEffect(() => {
+        var _a;
+        if (showRichTextEditorFormatting !== undefined) {
+            // Focus the editor when toolbar shown/hidden
+            (_a = editorComponentRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+        // we don't need execute this useEffect if editorComponentRef is changed
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [showRichTextEditorFormatting]);
+    const actionButtons = useMemo(() => {
+        return (React.createElement(Stack.Item, { align: "end", className: richTextActionButtonsStackStyle },
+            React.createElement(Stack, { horizontal: true },
+                React.createElement(InputBoxButton, { onRenderIcon: onRenderRichTextEditorIcon, onClick: (e) => {
+                        const isRichTextEditorToolbarShown = showRichTextEditorFormatting === true;
+                        setShowRichTextEditorFormatting(!isRichTextEditorToolbarShown);
+                        e.stopPropagation(); // Prevents the click from bubbling up and triggering a focus event on the chat.
+                    }, ariaLabel: strings.richTextFormatButtonTooltip, tooltipContent: strings.richTextFormatButtonTooltip, className: richTextActionButtonsStyle, "data-testId": 'rich-text-input-box-format-button' }),
+                React.createElement(Icon, { iconName: "RichTextDividerIcon", className: richTextActionButtonsDividerStyle(theme) }),
+                actionComponents)));
+    }, [
+        actionComponents,
+        onRenderRichTextEditorIcon,
+        showRichTextEditorFormatting,
+        strings.richTextFormatButtonTooltip,
+        theme
+    ]);
+    const richTextEditorStyle = useMemo(() => {
+        return richTextEditorStyleProps(showRichTextEditorFormatting === true);
+    }, [richTextEditorStyleProps, showRichTextEditorFormatting]);
+    const onKeyDown = useCallback((ev) => {
+        if (isEnterKeyEventFromCompositionSession(ev)) {
+            return;
+        }
+        const isRichTextEditorToolbarShown = showRichTextEditorFormatting === true;
+        if (ev.key === 'Enter' && ev.shiftKey === false && !isRichTextEditorToolbarShown) {
+            ev.preventDefault();
+            onEnterKeyDown && onEnterKeyDown();
+        }
+        else {
+            onTyping === null || onTyping === void 0 ? void 0 : onTyping();
+        }
+    }, [onEnterKeyDown, showRichTextEditorFormatting, onTyping]);
+    const useHorizontalLayout = useMemo(() => {
+        const isRichTextEditorToolbarShown = showRichTextEditorFormatting === true;
+        return (!isHorizontalLayoutDisabled &&
+            !isRichTextEditorToolbarShown &&
+            /* @conditional-compile-remove(file-sharing-acs) */ !hasAttachments);
+    }, [
+        isHorizontalLayoutDisabled,
+        showRichTextEditorFormatting,
+        /* @conditional-compile-remove(file-sharing-acs) */ hasAttachments
+    ]);
+    const onContentModelUpdate = useCallback((contentModel) => {
+        setContentModel(contentModel);
+    }, []);
+    return (React.createElement("div", { className: richTextBorderBoxStyle({
+            theme: theme,
+            disabled: !!disabled
+        }) },
+        React.createElement(Stack, { grow: true, horizontal: useHorizontalLayout, horizontalAlign: useHorizontalLayout ? 'end' : 'space-between', className: inputBoxContentStackStyle, wrap: useHorizontalLayout },
+            React.createElement(Stack, { grow: true, className: inputBoxRichTextStackStyle },
+                React.createElement(Stack.Item, { className: inputBoxRichTextStackItemStyle },
+                    React.createElement(RichTextEditor, { contentModel: contentModel, initialContent: initialContent, placeholderText: placeholderText, onChange: onChange, onKeyDown: onKeyDown, ref: editorComponentRef, strings: strings, showRichTextEditorFormatting: showRichTextEditorFormatting === true, styles: richTextEditorStyle, autoFocus: autoFocus, onContentModelUpdate: onContentModelUpdate, 
+                        /* @conditional-compile-remove(rich-text-editor-image-upload) */
+                        onPaste: props.onPaste })), /* @conditional-compile-remove(file-sharing-acs) */
+                onRenderAttachmentUploads && onRenderAttachmentUploads()),
+            actionButtons)));
+};
+//# sourceMappingURL=RichTextInputBoxComponent.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RichTextInputBoxComponent.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/RichTextEditor/RichTextInputBoxComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { ReactNode, useCallback, useEffect, useMemo, useState } from 'react';\nimport { BaseCustomStyles } from '../../types';\nimport { RichTextEditor, RichTextEditorComponentRef, RichTextEditorStyleProps } from './RichTextEditor';\nimport { RichTextSendBoxStrings } from './RichTextSendBox';\nimport { useTheme } from '../../theming';\nimport { Icon, Stack } from '@fluentui/react';\nimport { InputBoxButton } from '../InputBoxButton';\nimport { isEnterKeyEventFromCompositionSession } from '../utils';\nimport {\n  richTextActionButtonsDividerStyle,\n  richTextActionButtonsStackStyle,\n  richTextActionButtonsStyle,\n  richTextFormatButtonIconStyle\n} from '../styles/RichTextEditor.styles';\nimport {\n  inputBoxContentStackStyle,\n  inputBoxRichTextStackItemStyle,\n  inputBoxRichTextStackStyle,\n  richTextBorderBoxStyle\n} from '../styles/RichTextInputBoxComponent.styles';\nimport type { ContentModelDocument } from 'roosterjs-content-model-types';\n\n/**\n * @private\n */\nexport interface RichTextInputBoxComponentStylesProps extends BaseCustomStyles {}\n\n/**\n * @private\n */\nexport interface RichTextInputBoxComponentProps {\n  placeholderText?: string;\n  // the initial content of editor that is set when editor is created (e.g. when editing a message)\n  initialContent?: string;\n  onChange: (newValue?: string) => void;\n  onEnterKeyDown?: () => void;\n  editorComponentRef: React.RefObject<RichTextEditorComponentRef>;\n  // Partial needs to be removed when the rich text editor feature goes to GA\n  strings: Partial<RichTextSendBoxStrings>;\n  disabled: boolean;\n  actionComponents: ReactNode;\n  /* @conditional-compile-remove(file-sharing-acs) */\n  onRenderAttachmentUploads?: () => JSX.Element;\n  /* @conditional-compile-remove(file-sharing-acs) */\n  hasAttachments?: boolean;\n  // props for min and max height for the rich text editor\n  // otherwise the editor will grow to fit the content\n  richTextEditorStyleProps: (isExpanded: boolean) => RichTextEditorStyleProps;\n  isHorizontalLayoutDisabled?: boolean;\n  autoFocus?: 'sendBoxTextField';\n  onTyping?: () => Promise<void>;\n  /* @conditional-compile-remove(rich-text-editor-image-upload) */\n  onPaste?: (event: { content: DocumentFragment }) => void;\n}\n\n/**\n * @private\n */\nexport const RichTextInputBoxComponent = (props: RichTextInputBoxComponentProps): JSX.Element => {\n  const {\n    placeholderText,\n    initialContent,\n    onChange,\n    onEnterKeyDown,\n    editorComponentRef,\n    disabled,\n    strings,\n    actionComponents,\n    /* @conditional-compile-remove(file-sharing-acs) */\n    onRenderAttachmentUploads,\n    /* @conditional-compile-remove(file-sharing-acs) */\n    hasAttachments,\n    richTextEditorStyleProps,\n    isHorizontalLayoutDisabled = false,\n    autoFocus,\n    onTyping\n  } = props;\n  const theme = useTheme();\n  // undefined is used to indicate that the rich text editor toolbar state wasn't changed yet\n  const [showRichTextEditorFormatting, setShowRichTextEditorFormatting] = useState<boolean | undefined>(undefined);\n  const [contentModel, setContentModel] = useState<ContentModelDocument | undefined>(undefined);\n\n  const onRenderRichTextEditorIcon = useCallback(\n    (isHover: boolean) => {\n      const isRichTextEditorToolbarShown = showRichTextEditorFormatting === true;\n      return (\n        <Icon\n          iconName={\n            isHover || isRichTextEditorToolbarShown ? 'RichTextEditorButtonIconFilled' : 'RichTextEditorButtonIcon'\n          }\n          className={richTextFormatButtonIconStyle(theme, !disabled && (isHover || isRichTextEditorToolbarShown))}\n        />\n      );\n    },\n    [disabled, showRichTextEditorFormatting, theme]\n  );\n\n  useEffect(() => {\n    if (showRichTextEditorFormatting !== undefined) {\n      // Focus the editor when toolbar shown/hidden\n      editorComponentRef.current?.focus();\n    }\n    // we don't need execute this useEffect if editorComponentRef is changed\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [showRichTextEditorFormatting]);\n\n  const actionButtons = useMemo(() => {\n    return (\n      <Stack.Item align=\"end\" className={richTextActionButtonsStackStyle}>\n        <Stack horizontal>\n          <InputBoxButton\n            onRenderIcon={onRenderRichTextEditorIcon}\n            onClick={(e) => {\n              const isRichTextEditorToolbarShown = showRichTextEditorFormatting === true;\n              setShowRichTextEditorFormatting(!isRichTextEditorToolbarShown);\n              e.stopPropagation(); // Prevents the click from bubbling up and triggering a focus event on the chat.\n            }}\n            ariaLabel={strings.richTextFormatButtonTooltip}\n            tooltipContent={strings.richTextFormatButtonTooltip}\n            className={richTextActionButtonsStyle}\n            data-testId={'rich-text-input-box-format-button'}\n          />\n          <Icon iconName=\"RichTextDividerIcon\" className={richTextActionButtonsDividerStyle(theme)} />\n          {actionComponents}\n        </Stack>\n      </Stack.Item>\n    );\n  }, [\n    actionComponents,\n    onRenderRichTextEditorIcon,\n    showRichTextEditorFormatting,\n    strings.richTextFormatButtonTooltip,\n    theme\n  ]);\n\n  const richTextEditorStyle = useMemo(() => {\n    return richTextEditorStyleProps(showRichTextEditorFormatting === true);\n  }, [richTextEditorStyleProps, showRichTextEditorFormatting]);\n\n  const onKeyDown = useCallback(\n    (ev: KeyboardEvent) => {\n      if (isEnterKeyEventFromCompositionSession(ev)) {\n        return;\n      }\n      const isRichTextEditorToolbarShown = showRichTextEditorFormatting === true;\n      if (ev.key === 'Enter' && ev.shiftKey === false && !isRichTextEditorToolbarShown) {\n        ev.preventDefault();\n        onEnterKeyDown && onEnterKeyDown();\n      } else {\n        onTyping?.();\n      }\n    },\n    [onEnterKeyDown, showRichTextEditorFormatting, onTyping]\n  );\n\n  const useHorizontalLayout = useMemo(() => {\n    const isRichTextEditorToolbarShown = showRichTextEditorFormatting === true;\n    return (\n      !isHorizontalLayoutDisabled &&\n      !isRichTextEditorToolbarShown &&\n      /* @conditional-compile-remove(file-sharing-acs) */ !hasAttachments\n    );\n  }, [\n    isHorizontalLayoutDisabled,\n    showRichTextEditorFormatting,\n    /* @conditional-compile-remove(file-sharing-acs) */ hasAttachments\n  ]);\n\n  const onContentModelUpdate = useCallback((contentModel: ContentModelDocument | undefined) => {\n    setContentModel(contentModel);\n  }, []);\n\n  return (\n    <div\n      className={richTextBorderBoxStyle({\n        theme: theme,\n        disabled: !!disabled\n      })}\n    >\n      {/* This layout is used for the compact view when formatting options are not shown */}\n      <Stack\n        grow\n        horizontal={useHorizontalLayout}\n        horizontalAlign={useHorizontalLayout ? 'end' : 'space-between'}\n        className={inputBoxContentStackStyle}\n        wrap={useHorizontalLayout}\n      >\n        {/* Fixes the issue when flex box can grow to be bigger than parent */}\n        <Stack grow className={inputBoxRichTextStackStyle}>\n          <Stack.Item className={inputBoxRichTextStackItemStyle}>\n            <RichTextEditor\n              contentModel={contentModel}\n              initialContent={initialContent}\n              placeholderText={placeholderText}\n              onChange={onChange}\n              onKeyDown={onKeyDown}\n              ref={editorComponentRef}\n              strings={strings}\n              showRichTextEditorFormatting={showRichTextEditorFormatting === true}\n              styles={richTextEditorStyle}\n              autoFocus={autoFocus}\n              onContentModelUpdate={onContentModelUpdate}\n              /* @conditional-compile-remove(rich-text-editor-image-upload) */\n              onPaste={props.onPaste}\n            />\n          </Stack.Item>\n          {/* @conditional-compile-remove(file-sharing-acs) */ onRenderAttachmentUploads && onRenderAttachmentUploads()}\n        </Stack>\n        {actionButtons}\n      </Stack>\n    </div>\n  );\n};\n"]}

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

@@ -0,0 +1,155 @@
+/// <reference types="react" />
+import { SendBoxStrings } from '../SendBox';
+import { AttachmentMetadataInProgress, MessageOptions } from "../../../../acs-ui-common/src";
+/**
+ * Strings of {@link RichTextSendBox} that can be overridden.
+ *
+ * @beta
+ */
+export interface RichTextSendBoxStrings extends RichTextStrings, SendBoxStrings {
+}
+/**
+ * Strings of RichText that can be overridden.
+ *
+ * @beta
+ */
+export interface RichTextStrings {
+    /**
+     * Tooltip text for the bold button.
+     */
+    richTextBoldTooltip: string;
+    /**
+     * Tooltip text for the italic button.
+     */
+    richTextItalicTooltip: string;
+    /**
+     * Tooltip text for the underline button.
+     */
+    richTextUnderlineTooltip: string;
+    /**
+     * Tooltip text for the bullet list button.
+     */
+    richTextBulletListTooltip: string;
+    /**
+     * Tooltip text for the number list button.
+     */
+    richTextNumberListTooltip: string;
+    /**
+     * Tooltip text for the increase indent button.
+     */
+    richTextIncreaseIndentTooltip: string;
+    /**
+     * Tooltip text for the decrease indent button.
+     */
+    richTextDecreaseIndentTooltip: string;
+    /**
+     * Tooltip text insert table button.
+     */
+    richTextInsertTableTooltip: string;
+    /**
+     * Tooltip text for the rich text format button button.
+     */
+    richTextFormatButtonTooltip: string;
+    /**
+     * Text for the insert menu item.
+     */
+    richTextInsertRowOrColumnMenu: string;
+    /**
+     * Title for the insert table menu.
+     */
+    richTextInsertTableMenuTitle: string;
+    /**
+     * Text for the insert menu item to insert row above the current selection.
+     */
+    richTextInsertRowAboveMenu: string;
+    /**
+     * Text for the insert menu item to insert row below the current selection.
+     */
+    richTextInsertRowBelowMenu: string;
+    /**
+     * Text for the insert menu item to insert column to the left from the current selection.
+     */
+    richTextInsertColumnLeftMenu: string;
+    /**
+     * Text for the insert menu item to insert column to the right from the current selection.
+     */
+    richTextInsertColumnRightMenu: string;
+    /**
+     * Text for the delete row or column menu.
+     */
+    richTextDeleteRowOrColumnMenu: string;
+    /**
+     * Text for the delete column menu.
+     */
+    richTextDeleteColumnMenu: string;
+    /**
+     * Text for the delete row menu.
+     */
+    richTextDeleteRowMenu: string;
+    /**
+     * Text for the delete table menu.
+     */
+    richTextDeleteTableMenu: string;
+    /**
+     * Text for the rich text toolbar more button.
+     */
+    richTextToolbarMoreButtonAriaLabel: string;
+}
+/**
+ * Props for {@link RichTextSendBox}.
+ *
+ * @beta
+ */
+export interface RichTextSendBoxProps {
+    /**
+     * Optional boolean to disable text box
+     * @defaultValue false
+     */
+    disabled?: boolean;
+    /**
+     * Optional callback to handle paste event.
+     */
+    onPaste?: (event: {
+        content: DocumentFragment;
+    }) => void;
+    /**
+     * Optional strings to override in component
+     */
+    strings?: Partial<RichTextSendBoxStrings>;
+    /**
+     * Optional text for system message above the text box
+     */
+    systemMessage?: string;
+    /**
+     * Optional array of type {@link AttachmentMetadataInProgress}
+     * to render attachments being uploaded in the SendBox.
+     * @beta
+     */
+    attachments?: AttachmentMetadataInProgress[];
+    /**
+     * enumerable to determine if the input box has focus on render or not.
+     * When undefined nothing has focus on render
+     */
+    autoFocus?: 'sendBoxTextField';
+    /**
+     * Optional callback to remove the attachment upload before sending by clicking on
+     * cancel icon.
+     * @beta
+     */
+    onCancelAttachmentUpload?: (attachmentId: string) => void;
+    /**
+     * Callback function used when the send button is clicked.
+     */
+    onSendMessage: (content: string, options?: MessageOptions) => Promise<void>;
+    /**
+     * Optional callback called when user is typing
+     */
+    onTyping?: () => Promise<void>;
+}
+/**
+ * A component to render SendBox with Rich Text Editor support.
+ *
+ * @beta
+ */
+export declare const RichTextSendBox: (props: RichTextSendBoxProps) => JSX.Element;
+//# sourceMappingURL=RichTextSendBox.d.ts.map