Skip to content

Commit

Permalink
Add RTE to the Teams Interop quickstart and update README
Browse files Browse the repository at this point in the history
  • Loading branch information
Leah-Xia-Microsoft committed Aug 20, 2024
1 parent 0593c6a commit 6d82e10
Show file tree
Hide file tree
Showing 3 changed files with 19 additions and 0 deletions.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
10 changes: 10 additions & 0 deletions ui-library-quickstart-teams-interop-meeting-chat/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -50,3 +50,13 @@ then click on the chat button to reveal the chat panel:
![Meeting Chat Lobby](../media/interop-meeting-chat.png)

Feel free to style the composites to your desired size and layout inside of your application.

## Enable Rich Text Editor
By default, this Quickstart is using the plain text editor for the SendBox component and the MessageThread component's edit function.
We also provide a Rich Text Editor which provides rich text formatting, table inserting etc.
To try it out:
- Go to the `src` folder and find the `App.tsx` file.
- Change the value for `richTextEditorEnabled` to true.

Open your browser to `http://localhost:3000`. You should see the following with the Rich Text Editor enabled:
![Meeting Chat with Rich Text Editor](../media/interop-meeting-chat-with-rich-text-editor.png)
9 changes: 9 additions & 0 deletions ui-library-quickstart-teams-interop-meeting-chat/src/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -78,13 +78,22 @@ export const CallWithChatExperience = (props: CallWithChatExampleProps): JSX.Ele
* Entry point of your application.
*/
function App(): JSX.Element {
/**
* By default, the `richTextEditorEnabled` is set to false,
* which means the plain text editor will be used for the SendBox component and the MessageThread component's edit function.
* Change this value to true to use the Rich Text Editor instead,
* which provides rich text formatting, table inserting etc.
*/
const richTextEditorEnabled = false;

return (
<CallWithChatExperience
userId = {{ communicationUserId: USER_ID }}
token={ TOKEN }
displayName = { DISPLAY_NAME }
endpointUrl={ ENDPOINT_URL }
locator = { { meetingLink: TEAMS_MEETING_LINK } }
compositeOptions={{ richTextEditor: richTextEditorEnabled }}
/>
);
}
Expand Down

0 comments on commit 6d82e10

Please sign in to comment.