@azure/communication-react 1.13.0-alpha-202402020012 → 1.13.0-alpha-202402030013

package/dist/dist-cjs/communication-react/index.js

@@ -14,9 +14,9 @@ var textareaCaretTs = require('textarea-caret-ts');
 var reactComponents = require('@fluentui/react-components');
 var useDebounce = require('use-debounce');
 var reactFileTypeIcons = require('@fluentui/react-file-type-icons');
-require('roosterjs-editor-plugins');
-require('roosterjs-editor-core');
-require('roosterjs-react');
+var roosterjsEditorPlugins = require('roosterjs-editor-plugins');
+var roosterjsEditorCore = require('roosterjs-editor-core');
+var roosterjsReact = require('roosterjs-react');
 var uuid = require('uuid');
 var reactChat = require('@fluentui-contrib/react-chat');
 var react$1 = require('@griffel/react');
@@ -173,7 +173,7 @@ function getDefaultExportFromCjs (x) {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.13.0-alpha-202402020012';
+var telemetryVersion = '1.13.0-alpha-202402030013';
 
 
 var telemetryVersion$1 = /*@__PURE__*/getDefaultExportFromCjs(telemetryVersion);
@@ -8378,7 +8378,7 @@ const SendBoxErrorBar = (props) => {
     if (errorMessage) {
         return (React.createElement(React.Fragment, null,
             React.createElement(Announcer$1, { announcementString: errorMessage, ariaLive: 'polite' }),
-            React.createElement(react.MessageBar, { messageBarType: react.MessageBarType.warning, styles: {
+            React.createElement(react.MessageBar, { "data-test-id": 'send-box-message-bar', messageBarType: react.MessageBarType.warning, styles: {
                     iconContainer: {
                         display: 'none'
                     }
@@ -8576,6 +8576,11 @@ const _FileUploadCards = (props) => {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
+/**
+ * @private
+ */
+const MAXIMUM_LENGTH_OF_MESSAGE$1 = 8000;
+const EMPTY_MESSAGE_REGEX = /^\s*$/;
 /* @conditional-compile-remove(file-sharing) */
 /**
  * @private
@@ -8591,11 +8596,26 @@ const hasIncompleteFileUploads = (activeFileUploads) => {
 const hasCompletedFileUploads = (activeFileUploads) => {
     return !!(activeFileUploads === null || activeFileUploads === void 0 ? void 0 : activeFileUploads.find((file) => !file.error));
 };
+/**
+ * @private
+ */
+const exceedsMaxAllowedLength = (valueLength) => {
+    return valueLength > MAXIMUM_LENGTH_OF_MESSAGE$1;
+};
+/**
+ * @private
+ */
+const sanitizeText = (message) => {
+    if (EMPTY_MESSAGE_REGEX.test(message)) {
+        return '';
+    }
+    else {
+        return message;
+    }
+};
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-const MAXIMUM_LENGTH_OF_MESSAGE$1 = 8000;
-const EMPTY_MESSAGE_REGEX = /^\s*$/;
 /**
  * Component for typing and sending messages.
  *
@@ -8636,9 +8656,9 @@ const SendBox = (props) => {
         const message = textValue;
         // we don't want to send empty messages including spaces, newlines, tabs
         // Message can be empty if there is a valid file upload
-        if (!EMPTY_MESSAGE_REGEX.test(message) ||
+        if (sanitizeText(message).length > 0 ||
             /* @conditional-compile-remove(file-sharing) */ hasCompletedFileUploads(activeFileUploads)) {
-            onSendMessage && onSendMessage(sanitizeText(message));
+            onSendMessage && onSendMessage(message);
             setTextValue('');
         }
         (_a = sendTextFieldRef.current) === null || _a === void 0 ? void 0 : _a.focus();
@@ -8647,12 +8667,7 @@ const SendBox = (props) => {
         if (newValue === undefined) {
             return;
         }
-        if (newValue.length > MAXIMUM_LENGTH_OF_MESSAGE$1) {
-            setTextValueOverflow(true);
-        }
-        else {
-            setTextValueOverflow(false);
-        }
+        setTextValueOverflow(exceedsMaxAllowedLength(newValue.length));
         setTextValue(newValue);
     };
     const textTooLongMessage = textValueOverflow ? strings.textTooLong : undefined;
@@ -8728,17 +8743,6 @@ const SendBox = (props) => {
             /* @conditional-compile-remove(file-sharing) */
             onRenderFileUploads())));
 };
-/**
- * @private
- */
-const sanitizeText = (message) => {
-    if (EMPTY_MESSAGE_REGEX.test(message)) {
-        return '';
-    }
-    else {
-        return message;
-    }
-};
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
@@ -8991,7 +8995,7 @@ const ImageGallery = (props) => {
 /**
  * @private
  */
-react.mergeStyles({
+const richTextEditorStyle = react.mergeStyles({
     border: 'none',
     overflow: 'auto',
     padding: '10px',
@@ -9001,6 +9005,50 @@ react.mergeStyles({
     maxHeight: '8.25rem'
 });
 
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+/**
+ * A component to wrap RoosterJS Rich Text Editor.
+ *
+ * @beta
+ */
+React.forwardRef((props, ref) => {
+    const { content, onChange, placeholderText } = props;
+    const editor = React.useRef(null);
+    React.useImperativeHandle(ref, () => {
+        return {
+            focus() {
+                if (editor.current) {
+                    editor.current.focus();
+                }
+            }
+        };
+    }, []);
+    React.useEffect(() => {
+        var _a, _b;
+        if (content !== ((_a = editor.current) === null || _a === void 0 ? void 0 : _a.getContent())) {
+            (_b = editor.current) === null || _b === void 0 ? void 0 : _b.setContent(content || '');
+        }
+    }, [content]);
+    const editorCreator = React.useMemo(() => {
+        return (div) => {
+            const contentEdit = new roosterjsEditorPlugins.ContentEdit();
+            const placeholderPlugin = new roosterjsEditorPlugins.Watermark(placeholderText || '');
+            const updateContentPlugin = roosterjsReact.createUpdateContentPlugin(roosterjsReact.UpdateMode.OnContentChangedEvent | roosterjsReact.UpdateMode.OnUserInput, (content) => {
+                onChange && onChange(content);
+            });
+            const options = {
+                plugins: [placeholderPlugin, contentEdit, updateContentPlugin],
+                imageSelectionBorderColor: 'blue'
+            };
+            editor.current = new roosterjsEditorCore.Editor(div, options);
+            return editor.current;
+        };
+    }, [onChange, placeholderText]);
+    return (React.createElement("div", null,
+        React.createElement(roosterjsReact.Rooster, { className: richTextEditorStyle, editorCreator: editorCreator })));
+});
+
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 /** @private */