|
1 | 1 | ---
|
2 | 2 | page_type: sample
|
3 | 3 | languages:
|
4 |
| -- javascript |
| 4 | + - javascript |
5 | 5 | products:
|
6 |
| -- azure |
7 |
| -- azure-communication-services |
| 6 | + - azure |
| 7 | + - azure-communication-services |
8 | 8 | ---
|
9 | 9 |
|
10 | 10 | # Get Started with Composites
|
11 | 11 |
|
12 |
| -For full instructions on how to build this code sample from scratch, look at [Quickstart: Get Started with Composites](https://azure.github.io/communication-ui-library/?path=/story/quickstarts-composites--page) |
| 12 | +For full instructions on how to build this code sample from scratch, look at [Quickstart: Get Started with Composites](https://azure.github.io/communication-ui-library/?path=/docs/composites-get-started--docs) |
13 | 13 |
|
14 | 14 | ## Prerequisites
|
15 | 15 |
|
16 |
| -- An Azure account with an active subscription. [Create an account for free](https://azure.microsoft.com/free/?WT.mc_id=A261C142F) . |
17 |
| -- [Node.js](https://nodejs.org/en/) Active LTS and Maintenance LTS versions (8.11.1 and 10.14.1 recommended). |
| 16 | +- An Azure account with an active subscription. [Create an account for free](https://azure.microsoft.com/free/?WT.mc_id=A261C142F) . |
| 17 | +- [Node.js](https://nodejs.org/en/) Active LTS and Maintenance LTS versions. |
18 | 18 | - An active Communication Services resource. [Create a Communication Services resource](https://docs.microsoft.com/azure/communication-services/quickstarts/create-communication-resource). You will need the endpoint value for the resource
|
19 | 19 | - An identity with both VoIP and Chat scopes. Generate an identity using the [Azure Portal](https://docs.microsoft.com/azure/communication-services/quickstarts/identity/quick-create-identity).
|
20 | 20 |
|
21 | 21 | ## Run the code
|
22 | 22 |
|
23 | 23 | 1. Run `npm i` on the directory of the project to install dependencies
|
24 | 24 | 2. Swap placeholders for identifiers in the code.
|
25 |
| - - Go to the `src` folder and find the `app.tsx` file. |
26 |
| - - There input values for the `Endpoint_URL` for your resource and the `USER_ID` and `TOKEN` for the identity you created. |
27 |
| - - Optional: You can update the display name to match a string value of your choice. |
28 |
| - - Save the file. |
29 |
| -4. Run `npm run start` |
| 25 | + - Go to the `src` folder and find the `App.tsx` file. |
| 26 | + - There input values for the `Endpoint_URL` for your resource and the `USER_ID` and `TOKEN` for the identity you created. |
| 27 | + - Optional: You can update the display name to match a string value of your choice. |
| 28 | + - Save the file. |
| 29 | +3. Run `npm run start` |
30 | 30 |
|
31 | 31 | Open your browser to ` http://localhost:3000`. You should see the following:
|
32 | 32 | 
|
33 | 33 |
|
34 | 34 | Feel free to style the composites to your desired size and layout inside of your application.
|
35 | 35 |
|
36 | 36 | ## Enable Rich Text Editor
|
37 |
| - By default, the chat composite is using the plain text editor for the SendBox component and the MessageThread component's edit function. |
38 |
| - We also provide a Rich Text Editor for rich text formatting, table inserting etc. |
39 |
| - To try it out: |
40 |
| - - Go to the `src` folder and find the `app.tsx` file. |
41 |
| - - Change the value for `richTextEditorEnabled` to true. |
42 |
| - Note that inserting inline images is not enabled for this Quickstart. |
43 |
| - Please use the [ui-library-quickstart-teams-interop-meeting-chat](https://github.com/Azure-Samples/communication-services-javascript-quickstarts/tree/main/ui-library-quickstart-teams-interop-meeting-chat) Quickstart to try out the inline image inserting function. |
| 37 | + |
| 38 | +By default, the chat composite is using the plain text editor for the SendBox component and the MessageThread component's edit function. |
| 39 | +We also provide a Rich Text Editor for rich text formatting, table inserting etc. |
| 40 | +To try it out: - Go to the `src` folder and find the `App.tsx` file. - Change the value for `richTextEditorEnabled` to true. |
| 41 | +Note that inserting inline images is not enabled for this Quickstart. |
| 42 | +Please use the [ui-library-quickstart-teams-interop-meeting-chat](https://github.com/Azure-Samples/communication-services-javascript-quickstarts/tree/main/ui-library-quickstart-teams-interop-meeting-chat) Quickstart to try out the inline image inserting function. |
44 | 43 |
|
45 | 44 | Open your browser to ` http://localhost:3000`. You should see the following with the Rich Text Editor enabled:
|
46 | 45 | 
|
0 commit comments