@@ -59,6 +59,7 @@ import { MessageWithCustomMentionRenderer } from './snippets/MessageWithCustomMe
59
59
import { MessageThreadWithSystemMessagesExample } from './snippets/SystemMessages.snippet' ;
60
60
import { MessageThreadWithInlineImageExample } from './snippets/WithInlineImageMessage.snippet' ;
61
61
import { MessageThreadWithMessageDateExample } from './snippets/WithMessageDate.snippet' ;
62
+ import { MessageThreadWithRichTextEditorExample } from './snippets/WithRichTextEditor.snippet' ;
62
63
63
64
const MessageThreadWithBlockedMessagesExampleText =
64
65
require ( '!!raw-loader!./snippets/BlockedMessages.snippet.tsx' ) . default ;
@@ -89,6 +90,7 @@ const MessageThreadWithSystemMessagesExampleText =
89
90
const MessageThreadWithInlineImageExampleText =
90
91
require ( '!!raw-loader!./snippets/WithInlineImageMessage.snippet.tsx' ) . default ;
91
92
const MessageThreadWithMessageDateExampleText = require ( '!!raw-loader!./snippets/WithMessageDate.snippet.tsx' ) . default ;
93
+ const MessageThreadWithRichTextEditorText = require ( '!!raw-loader!./snippets/WithRichTextEditor.snippet.tsx' ) . default ;
92
94
93
95
const importStatement = `
94
96
import { FluentThemeProvider, MessageThread } from '@azure/communication-react';
@@ -115,6 +117,7 @@ const Docs: () => JSX.Element = () => {
115
117
const refDisplayInlineImages = useRef ( null ) ;
116
118
const refDisplayAttachments = useRef ( null ) ;
117
119
const refMentionOfUsers = useRef ( null ) ;
120
+ const refRichTextEditor = useRef ( null ) ;
118
121
const refProps = useRef ( null ) ;
119
122
120
123
const scrollToRef = ( ref ) : void => {
@@ -159,6 +162,8 @@ const Docs: () => JSX.Element = () => {
159
162
scrollToRef ( refDisplayAttachments ) ;
160
163
} else if ( url . includes ( 'mention-of-users-with-a-custom-renderer-within-messages' ) && refMentionOfUsers . current ) {
161
164
scrollToRef ( refMentionOfUsers ) ;
165
+ } else if ( url . includes ( 'rich-text-editor-support-for-editing-messages' ) && refRichTextEditor . current ) {
166
+ scrollToRef ( refRichTextEditor ) ;
162
167
} else if ( url . includes ( 'props' ) && refProps . current ) {
163
168
scrollToRef ( refProps ) ;
164
169
}
@@ -192,6 +197,12 @@ const Docs: () => JSX.Element = () => {
192
197
checkout the details about these components
193
198
[here](https://microsoft.github.io/fluentui-contrib/react-chat/?path=/story/chat--default).
194
199
</ Description >
200
+ < Description >
201
+ The MessageThread component supports lazy loading for the rich text editor used for editing messages. This means
202
+ that the rich text editor and its dependencies can be excluded from the bundle if they're not required,
203
+ utilizing tree-shaking techniques such as [the sideEffects
204
+ option](https://webpack.js.org/guides/tree-shaking/#mark-the-file-as-side-effect-free) in webpack.
205
+ </ Description >
195
206
196
207
< Heading > Importing</ Heading >
197
208
< Source code = { importStatement } />
@@ -368,6 +379,18 @@ const Docs: () => JSX.Element = () => {
368
379
</ Canvas >
369
380
</ div >
370
381
382
+ < div ref = { refRichTextEditor } >
383
+ < Heading > Rich Text Editor Support for Editing Messages</ Heading >
384
+ < DetailedBetaBanner />
385
+ < Description >
386
+ The following example shows how to enable rich text editor for message editing by providing the
387
+ `richTextEditor`` property.
388
+ </ Description >
389
+ < Canvas mdxSource = { MessageThreadWithRichTextEditorText } >
390
+ < MessageThreadWithRichTextEditorExample />
391
+ </ Canvas >
392
+ </ div >
393
+
371
394
< div ref = { refProps } >
372
395
< Heading > Props</ Heading >
373
396
< Props of = { MessageThreadComponent } />
@@ -452,6 +475,9 @@ const MessageThreadStory = (args): JSX.Element => {
452
475
if ( message . messageType === 'chat' ) {
453
476
message . content = content ;
454
477
message . editedOn = new Date ( Date . now ( ) ) ;
478
+ if ( args . richTextEditor === true ) {
479
+ message . contentType = 'html' ;
480
+ }
455
481
}
456
482
updatedChatMessages [ msgIdx ] = message ;
457
483
setChatMessages ( updatedChatMessages ) ;
@@ -553,6 +579,7 @@ const MessageThreadStory = (args): JSX.Element => {
553
579
onRenderMessage = { onRenderMessage }
554
580
inlineImageOptions = { inlineImageOptions }
555
581
onUpdateMessage = { onUpdateMessageCallback }
582
+ richTextEditor = { args . richTextEditor }
556
583
onRenderAvatar = { ( userId ?: string ) => {
557
584
return (
558
585
< Persona
@@ -608,6 +635,7 @@ export default {
608
635
showMessageDate : controlsToAdd . showMessageDate ,
609
636
showMessageStatus : controlsToAdd . showMessageStatus ,
610
637
enableJumpToNewMessageButton : controlsToAdd . enableJumpToNewMessageButton ,
638
+ richTextEditor : controlsToAdd . richTextEditor ,
611
639
// Hiding auto-generated controls
612
640
styles : hiddenControl ,
613
641
strings : hiddenControl ,
@@ -623,8 +651,7 @@ export default {
623
651
onRenderMessage : hiddenControl ,
624
652
onUpdateMessage : hiddenControl ,
625
653
onDeleteMessage : hiddenControl ,
626
- disableEditing : hiddenControl ,
627
- richTextEditor : hiddenControl
654
+ disableEditing : hiddenControl
628
655
} ,
629
656
parameters : {
630
657
docs : {
0 commit comments