817 lines
		
	
	
		
			24 KiB
		
	
	
	
		
			Plaintext
		
	
	
			
		
		
	
	
			817 lines
		
	
	
		
			24 KiB
		
	
	
	
		
			Plaintext
		
	
	
| // Jest Snapshot v1, https://goo.gl/fbAQLP
 | |
| 
 | |
| exports[`RoomView for a local room in state CREATING should match the snapshot 1`] = `
 | |
| <div>
 | |
|   <div
 | |
|     class="mx_RoomView mx_RoomView--local"
 | |
|   >
 | |
|     <header
 | |
|       class="mx_RoomHeader light-panel"
 | |
|     >
 | |
|       <div
 | |
|         class="mx_RoomHeader_wrapper"
 | |
|       >
 | |
|         <div
 | |
|           class="mx_RoomHeader_avatar"
 | |
|         >
 | |
|           <div
 | |
|             class="mx_DecoratedRoomAvatar"
 | |
|           >
 | |
|             <span
 | |
|               class="mx_BaseAvatar"
 | |
|               role="presentation"
 | |
|             >
 | |
|               <span
 | |
|                 aria-hidden="true"
 | |
|                 class="mx_BaseAvatar_initial"
 | |
|                 style="font-size: 15.600000000000001px; width: 24px; line-height: 24px;"
 | |
|               >
 | |
|                 U
 | |
|               </span>
 | |
|               <img
 | |
|                 alt=""
 | |
|                 aria-hidden="true"
 | |
|                 class="mx_BaseAvatar_image"
 | |
|                 data-testid="avatar-img"
 | |
|                 src="data:image/png;base64,00"
 | |
|                 style="width: 24px; height: 24px;"
 | |
|               />
 | |
|             </span>
 | |
|           </div>
 | |
|         </div>
 | |
|         <div
 | |
|           class="mx_E2EIcon mx_E2EIcon_normal mx_RoomHeader_icon"
 | |
|         />
 | |
|         <div
 | |
|           class="mx_RoomHeader_name mx_RoomHeader_name--textonly"
 | |
|         >
 | |
|           <div
 | |
|             aria-level="1"
 | |
|             class="mx_RoomHeader_nametext"
 | |
|             dir="auto"
 | |
|             role="heading"
 | |
|             title="@user:example.com"
 | |
|           >
 | |
|             @user:example.com
 | |
|           </div>
 | |
|         </div>
 | |
|         <div
 | |
|           class="mx_RoomHeader_topic mx_RoomTopic"
 | |
|           dir="auto"
 | |
|         >
 | |
|           <div
 | |
|             tabindex="0"
 | |
|           >
 | |
|             <span
 | |
|               dir="auto"
 | |
|             />
 | |
|           </div>
 | |
|         </div>
 | |
|       </div>
 | |
|     </header>
 | |
|     <div
 | |
|       class="mx_RoomView_body"
 | |
|     >
 | |
|       <div
 | |
|         class="mx_LargeLoader"
 | |
|       >
 | |
|         <div
 | |
|           class="mx_Spinner"
 | |
|         >
 | |
|           <div
 | |
|             aria-label="Loading..."
 | |
|             class="mx_Spinner_icon"
 | |
|             data-testid="spinner"
 | |
|             role="progressbar"
 | |
|             style="width: 45px; height: 45px;"
 | |
|           />
 | |
|         </div>
 | |
|         <div
 | |
|           class="mx_LargeLoader_text"
 | |
|         >
 | |
|           We're creating a room with @user:example.com
 | |
|         </div>
 | |
|       </div>
 | |
|     </div>
 | |
|   </div>
 | |
| </div>
 | |
| `;
 | |
| 
 | |
| exports[`RoomView for a local room in state ERROR should match the snapshot 1`] = `
 | |
| <div>
 | |
|   <div
 | |
|     class="mx_RoomView mx_RoomView--local"
 | |
|   >
 | |
|     <header
 | |
|       class="mx_RoomHeader light-panel"
 | |
|     >
 | |
|       <div
 | |
|         class="mx_RoomHeader_wrapper"
 | |
|       >
 | |
|         <div
 | |
|           class="mx_RoomHeader_avatar"
 | |
|         >
 | |
|           <div
 | |
|             class="mx_DecoratedRoomAvatar"
 | |
|           >
 | |
|             <span
 | |
|               class="mx_BaseAvatar"
 | |
|               role="presentation"
 | |
|             >
 | |
|               <span
 | |
|                 aria-hidden="true"
 | |
|                 class="mx_BaseAvatar_initial"
 | |
|                 style="font-size: 15.600000000000001px; width: 24px; line-height: 24px;"
 | |
|               >
 | |
|                 U
 | |
|               </span>
 | |
|               <img
 | |
|                 alt=""
 | |
|                 aria-hidden="true"
 | |
|                 class="mx_BaseAvatar_image"
 | |
|                 data-testid="avatar-img"
 | |
|                 src="data:image/png;base64,00"
 | |
|                 style="width: 24px; height: 24px;"
 | |
|               />
 | |
|             </span>
 | |
|           </div>
 | |
|         </div>
 | |
|         <div
 | |
|           class="mx_E2EIcon mx_E2EIcon_normal mx_RoomHeader_icon"
 | |
|         />
 | |
|         <div
 | |
|           class="mx_RoomHeader_name mx_RoomHeader_name--textonly"
 | |
|         >
 | |
|           <div
 | |
|             aria-level="1"
 | |
|             class="mx_RoomHeader_nametext"
 | |
|             dir="auto"
 | |
|             role="heading"
 | |
|             title="@user:example.com"
 | |
|           >
 | |
|             @user:example.com
 | |
|           </div>
 | |
|         </div>
 | |
|         <div
 | |
|           class="mx_RoomHeader_topic mx_RoomTopic"
 | |
|           dir="auto"
 | |
|         >
 | |
|           <div
 | |
|             tabindex="0"
 | |
|           >
 | |
|             <span
 | |
|               dir="auto"
 | |
|             />
 | |
|           </div>
 | |
|         </div>
 | |
|       </div>
 | |
|     </header>
 | |
|     <main
 | |
|       class="mx_RoomView_body"
 | |
|     >
 | |
|       <div
 | |
|         class="mx_RoomView_timeline"
 | |
|       >
 | |
|         <div
 | |
|           class="mx_AutoHideScrollbar mx_ScrollPanel mx_RoomView_messagePanel"
 | |
|           tabindex="-1"
 | |
|         >
 | |
|           <div
 | |
|             class="mx_RoomView_messageListWrapper"
 | |
|           >
 | |
|             <ol
 | |
|               aria-live="polite"
 | |
|               class="mx_RoomView_MessageList"
 | |
|               style="height: 400px;"
 | |
|             >
 | |
|               <li
 | |
|                 class="mx_NewRoomIntro"
 | |
|               >
 | |
|                 <div
 | |
|                   class="mx_EventTileBubble mx_cryptoEvent mx_cryptoEvent_icon_warning"
 | |
|                 >
 | |
|                   <div
 | |
|                     class="mx_EventTileBubble_title"
 | |
|                   >
 | |
|                     End-to-end encryption isn't enabled
 | |
|                   </div>
 | |
|                   <div
 | |
|                     class="mx_EventTileBubble_subtitle"
 | |
|                   >
 | |
|                     <span>
 | |
|                        
 | |
|                       Your private messages are normally encrypted, but this room isn't. Usually this is due to an unsupported device or method being used, like email invites.
 | |
|                        
 | |
|                        
 | |
|                     </span>
 | |
|                   </div>
 | |
|                 </div>
 | |
|                 <span
 | |
|                   aria-label="Avatar"
 | |
|                   aria-live="off"
 | |
|                   class="mx_AccessibleButton mx_BaseAvatar"
 | |
|                   role="button"
 | |
|                   tabindex="0"
 | |
|                 >
 | |
|                   <span
 | |
|                     aria-hidden="true"
 | |
|                     class="mx_BaseAvatar_initial"
 | |
|                     style="font-size: 33.800000000000004px; width: 52px; line-height: 52px;"
 | |
|                   >
 | |
|                     U
 | |
|                   </span>
 | |
|                   <img
 | |
|                     alt=""
 | |
|                     aria-hidden="true"
 | |
|                     class="mx_BaseAvatar_image"
 | |
|                     data-testid="avatar-img"
 | |
|                     src="data:image/png;base64,00"
 | |
|                     style="width: 52px; height: 52px;"
 | |
|                   />
 | |
|                 </span>
 | |
|                 <h2>
 | |
|                   @user:example.com
 | |
|                 </h2>
 | |
|                 <p>
 | |
|                   <span>
 | |
|                     Send your first message to invite 
 | |
|                     <b>
 | |
|                       @user:example.com
 | |
|                     </b>
 | |
|                      to chat
 | |
|                   </span>
 | |
|                 </p>
 | |
|               </li>
 | |
|             </ol>
 | |
|           </div>
 | |
|         </div>
 | |
|       </div>
 | |
|       <div
 | |
|         class="mx_RoomStatusBar mx_RoomStatusBar_unsentMessages"
 | |
|       >
 | |
|         <div
 | |
|           role="alert"
 | |
|         >
 | |
|           <div
 | |
|             class="mx_RoomStatusBar_unsentBadge"
 | |
|           >
 | |
|             <div
 | |
|               class="mx_NotificationBadge mx_NotificationBadge_visible mx_NotificationBadge_highlighted mx_NotificationBadge_2char"
 | |
|             >
 | |
|               <span
 | |
|                 class="mx_NotificationBadge_count"
 | |
|               >
 | |
|                 !
 | |
|               </span>
 | |
|             </div>
 | |
|           </div>
 | |
|           <div>
 | |
|             <div
 | |
|               class="mx_RoomStatusBar_unsentTitle"
 | |
|             >
 | |
|               Some of your messages have not been sent
 | |
|             </div>
 | |
|           </div>
 | |
|           <div
 | |
|             class="mx_RoomStatusBar_unsentButtonBar"
 | |
|           >
 | |
|             <div
 | |
|               class="mx_AccessibleButton mx_RoomStatusBar_unsentRetry"
 | |
|               role="button"
 | |
|               tabindex="0"
 | |
|             >
 | |
|               Retry
 | |
|             </div>
 | |
|           </div>
 | |
|         </div>
 | |
|       </div>
 | |
|     </main>
 | |
|   </div>
 | |
| </div>
 | |
| `;
 | |
| 
 | |
| exports[`RoomView for a local room in state NEW should match the snapshot 1`] = `
 | |
| <div>
 | |
|   <div
 | |
|     class="mx_RoomView mx_RoomView--local"
 | |
|   >
 | |
|     <header
 | |
|       class="mx_RoomHeader light-panel"
 | |
|     >
 | |
|       <div
 | |
|         class="mx_RoomHeader_wrapper"
 | |
|       >
 | |
|         <div
 | |
|           class="mx_RoomHeader_avatar"
 | |
|         >
 | |
|           <div
 | |
|             class="mx_DecoratedRoomAvatar"
 | |
|           >
 | |
|             <span
 | |
|               class="mx_BaseAvatar"
 | |
|               role="presentation"
 | |
|             >
 | |
|               <span
 | |
|                 aria-hidden="true"
 | |
|                 class="mx_BaseAvatar_initial"
 | |
|                 style="font-size: 15.600000000000001px; width: 24px; line-height: 24px;"
 | |
|               >
 | |
|                 U
 | |
|               </span>
 | |
|               <img
 | |
|                 alt=""
 | |
|                 aria-hidden="true"
 | |
|                 class="mx_BaseAvatar_image"
 | |
|                 data-testid="avatar-img"
 | |
|                 src="data:image/png;base64,00"
 | |
|                 style="width: 24px; height: 24px;"
 | |
|               />
 | |
|             </span>
 | |
|           </div>
 | |
|         </div>
 | |
|         <div
 | |
|           class="mx_E2EIcon mx_E2EIcon_normal mx_RoomHeader_icon"
 | |
|         />
 | |
|         <div
 | |
|           class="mx_RoomHeader_name mx_RoomHeader_name--textonly"
 | |
|         >
 | |
|           <div
 | |
|             aria-level="1"
 | |
|             class="mx_RoomHeader_nametext"
 | |
|             dir="auto"
 | |
|             role="heading"
 | |
|             title="@user:example.com"
 | |
|           >
 | |
|             @user:example.com
 | |
|           </div>
 | |
|         </div>
 | |
|         <div
 | |
|           class="mx_RoomHeader_topic mx_RoomTopic"
 | |
|           dir="auto"
 | |
|         >
 | |
|           <div
 | |
|             tabindex="0"
 | |
|           >
 | |
|             <span
 | |
|               dir="auto"
 | |
|             />
 | |
|           </div>
 | |
|         </div>
 | |
|       </div>
 | |
|     </header>
 | |
|     <main
 | |
|       class="mx_RoomView_body"
 | |
|     >
 | |
|       <div
 | |
|         class="mx_RoomView_timeline"
 | |
|       >
 | |
|         <div
 | |
|           class="mx_AutoHideScrollbar mx_ScrollPanel mx_RoomView_messagePanel"
 | |
|           tabindex="-1"
 | |
|         >
 | |
|           <div
 | |
|             class="mx_RoomView_messageListWrapper"
 | |
|           >
 | |
|             <ol
 | |
|               aria-live="polite"
 | |
|               class="mx_RoomView_MessageList"
 | |
|               style="height: 400px;"
 | |
|             >
 | |
|               <li
 | |
|                 class="mx_NewRoomIntro"
 | |
|               >
 | |
|                 <div
 | |
|                   class="mx_EventTileBubble mx_cryptoEvent mx_cryptoEvent_icon_warning"
 | |
|                 >
 | |
|                   <div
 | |
|                     class="mx_EventTileBubble_title"
 | |
|                   >
 | |
|                     End-to-end encryption isn't enabled
 | |
|                   </div>
 | |
|                   <div
 | |
|                     class="mx_EventTileBubble_subtitle"
 | |
|                   >
 | |
|                     <span>
 | |
|                        
 | |
|                       Your private messages are normally encrypted, but this room isn't. Usually this is due to an unsupported device or method being used, like email invites.
 | |
|                        
 | |
|                        
 | |
|                     </span>
 | |
|                   </div>
 | |
|                 </div>
 | |
|                 <span
 | |
|                   aria-label="Avatar"
 | |
|                   aria-live="off"
 | |
|                   class="mx_AccessibleButton mx_BaseAvatar"
 | |
|                   role="button"
 | |
|                   tabindex="0"
 | |
|                 >
 | |
|                   <span
 | |
|                     aria-hidden="true"
 | |
|                     class="mx_BaseAvatar_initial"
 | |
|                     style="font-size: 33.800000000000004px; width: 52px; line-height: 52px;"
 | |
|                   >
 | |
|                     U
 | |
|                   </span>
 | |
|                   <img
 | |
|                     alt=""
 | |
|                     aria-hidden="true"
 | |
|                     class="mx_BaseAvatar_image"
 | |
|                     data-testid="avatar-img"
 | |
|                     src="data:image/png;base64,00"
 | |
|                     style="width: 52px; height: 52px;"
 | |
|                   />
 | |
|                 </span>
 | |
|                 <h2>
 | |
|                   @user:example.com
 | |
|                 </h2>
 | |
|                 <p>
 | |
|                   <span>
 | |
|                     Send your first message to invite 
 | |
|                     <b>
 | |
|                       @user:example.com
 | |
|                     </b>
 | |
|                      to chat
 | |
|                   </span>
 | |
|                 </p>
 | |
|               </li>
 | |
|             </ol>
 | |
|           </div>
 | |
|         </div>
 | |
|       </div>
 | |
|       <div
 | |
|         class="mx_MessageComposer"
 | |
|       >
 | |
|         <div
 | |
|           class="mx_MessageComposer_wrapper"
 | |
|         >
 | |
|           <div
 | |
|             class="mx_MessageComposer_row"
 | |
|           >
 | |
|             <div
 | |
|               class="mx_SendMessageComposer"
 | |
|             >
 | |
|               <div
 | |
|                 class="mx_BasicMessageComposer"
 | |
|               >
 | |
|                 <div
 | |
|                   class="mx_MessageComposerFormatBar"
 | |
|                 >
 | |
|                   <button
 | |
|                     aria-label="Bold"
 | |
|                     class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconBold"
 | |
|                     role="button"
 | |
|                     tabindex="0"
 | |
|                     type="button"
 | |
|                   />
 | |
|                   <button
 | |
|                     aria-label="Italics"
 | |
|                     class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconItalic"
 | |
|                     role="button"
 | |
|                     tabindex="0"
 | |
|                     type="button"
 | |
|                   />
 | |
|                   <button
 | |
|                     aria-label="Strikethrough"
 | |
|                     class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconStrikethrough"
 | |
|                     role="button"
 | |
|                     tabindex="0"
 | |
|                     type="button"
 | |
|                   />
 | |
|                   <button
 | |
|                     aria-label="Code block"
 | |
|                     class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconCode"
 | |
|                     role="button"
 | |
|                     tabindex="0"
 | |
|                     type="button"
 | |
|                   />
 | |
|                   <button
 | |
|                     aria-label="Quote"
 | |
|                     class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconQuote"
 | |
|                     role="button"
 | |
|                     tabindex="0"
 | |
|                     type="button"
 | |
|                   />
 | |
|                   <button
 | |
|                     aria-label="Insert link"
 | |
|                     class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconInsertLink"
 | |
|                     role="button"
 | |
|                     tabindex="0"
 | |
|                     type="button"
 | |
|                   />
 | |
|                 </div>
 | |
|                 <div
 | |
|                   aria-autocomplete="list"
 | |
|                   aria-disabled="false"
 | |
|                   aria-haspopup="listbox"
 | |
|                   aria-label="Send a message…"
 | |
|                   aria-multiline="true"
 | |
|                   class="mx_BasicMessageComposer_input mx_BasicMessageComposer_input_shouldShowPillAvatar mx_BasicMessageComposer_inputEmpty"
 | |
|                   contenteditable="true"
 | |
|                   data-testid="basicmessagecomposer"
 | |
|                   dir="auto"
 | |
|                   role="textbox"
 | |
|                   style="--placeholder: 'Send a message…';"
 | |
|                   tabindex="0"
 | |
|                 >
 | |
|                   <div>
 | |
|                     <br />
 | |
|                   </div>
 | |
|                 </div>
 | |
|               </div>
 | |
|             </div>
 | |
|             <div
 | |
|               class="mx_MessageComposer_actions"
 | |
|             >
 | |
|               <div
 | |
|                 aria-label="Emoji"
 | |
|                 class="mx_AccessibleButton mx_EmojiButton mx_MessageComposer_button mx_EmojiButton_icon"
 | |
|                 role="button"
 | |
|                 tabindex="0"
 | |
|               />
 | |
|               <div
 | |
|                 aria-label="Attachment"
 | |
|                 class="mx_AccessibleButton mx_MessageComposer_button mx_MessageComposer_upload"
 | |
|                 role="button"
 | |
|                 tabindex="0"
 | |
|               />
 | |
|               <div
 | |
|                 aria-label="More options"
 | |
|                 class="mx_AccessibleButton mx_MessageComposer_button mx_MessageComposer_buttonMenu"
 | |
|                 role="button"
 | |
|                 tabindex="0"
 | |
|               />
 | |
|               <input
 | |
|                 multiple=""
 | |
|                 style="display: none;"
 | |
|                 type="file"
 | |
|               />
 | |
|             </div>
 | |
|           </div>
 | |
|         </div>
 | |
|       </div>
 | |
|     </main>
 | |
|   </div>
 | |
| </div>
 | |
| `;
 | |
| 
 | |
| exports[`RoomView for a local room in state NEW that is encrypted should match the snapshot 1`] = `
 | |
| <div>
 | |
|   <div
 | |
|     class="mx_RoomView mx_RoomView--local"
 | |
|   >
 | |
|     <header
 | |
|       class="mx_RoomHeader light-panel"
 | |
|     >
 | |
|       <div
 | |
|         class="mx_RoomHeader_wrapper"
 | |
|       >
 | |
|         <div
 | |
|           class="mx_RoomHeader_avatar"
 | |
|         >
 | |
|           <div
 | |
|             class="mx_DecoratedRoomAvatar"
 | |
|           >
 | |
|             <span
 | |
|               class="mx_BaseAvatar"
 | |
|               role="presentation"
 | |
|             >
 | |
|               <span
 | |
|                 aria-hidden="true"
 | |
|                 class="mx_BaseAvatar_initial"
 | |
|                 style="font-size: 15.600000000000001px; width: 24px; line-height: 24px;"
 | |
|               >
 | |
|                 U
 | |
|               </span>
 | |
|               <img
 | |
|                 alt=""
 | |
|                 aria-hidden="true"
 | |
|                 class="mx_BaseAvatar_image"
 | |
|                 data-testid="avatar-img"
 | |
|                 src="data:image/png;base64,00"
 | |
|                 style="width: 24px; height: 24px;"
 | |
|               />
 | |
|             </span>
 | |
|           </div>
 | |
|         </div>
 | |
|         <div
 | |
|           class="mx_E2EIcon mx_E2EIcon_normal mx_RoomHeader_icon"
 | |
|         />
 | |
|         <div
 | |
|           class="mx_RoomHeader_name mx_RoomHeader_name--textonly"
 | |
|         >
 | |
|           <div
 | |
|             aria-level="1"
 | |
|             class="mx_RoomHeader_nametext"
 | |
|             dir="auto"
 | |
|             role="heading"
 | |
|             title="@user:example.com"
 | |
|           >
 | |
|             @user:example.com
 | |
|           </div>
 | |
|         </div>
 | |
|         <div
 | |
|           class="mx_RoomHeader_topic mx_RoomTopic"
 | |
|           dir="auto"
 | |
|         >
 | |
|           <div
 | |
|             tabindex="0"
 | |
|           >
 | |
|             <span
 | |
|               dir="auto"
 | |
|             />
 | |
|           </div>
 | |
|         </div>
 | |
|       </div>
 | |
|     </header>
 | |
|     <main
 | |
|       class="mx_RoomView_body"
 | |
|     >
 | |
|       <div
 | |
|         class="mx_RoomView_timeline"
 | |
|       >
 | |
|         <div
 | |
|           class="mx_AutoHideScrollbar mx_ScrollPanel mx_RoomView_messagePanel"
 | |
|           tabindex="-1"
 | |
|         >
 | |
|           <div
 | |
|             class="mx_RoomView_messageListWrapper"
 | |
|           >
 | |
|             <ol
 | |
|               aria-live="polite"
 | |
|               class="mx_RoomView_MessageList"
 | |
|               style="height: 400px;"
 | |
|             >
 | |
|               <div
 | |
|                 class="mx_EventTileBubble mx_cryptoEvent mx_cryptoEvent_icon"
 | |
|               >
 | |
|                 <div
 | |
|                   class="mx_EventTileBubble_title"
 | |
|                 >
 | |
|                   Encryption enabled
 | |
|                 </div>
 | |
|                 <div
 | |
|                   class="mx_EventTileBubble_subtitle"
 | |
|                 >
 | |
|                   Messages in this chat will be end-to-end encrypted.
 | |
|                 </div>
 | |
|               </div>
 | |
|               <li
 | |
|                 class="mx_NewRoomIntro"
 | |
|               >
 | |
|                 <span
 | |
|                   aria-label="Avatar"
 | |
|                   aria-live="off"
 | |
|                   class="mx_AccessibleButton mx_BaseAvatar"
 | |
|                   role="button"
 | |
|                   tabindex="0"
 | |
|                 >
 | |
|                   <span
 | |
|                     aria-hidden="true"
 | |
|                     class="mx_BaseAvatar_initial"
 | |
|                     style="font-size: 33.800000000000004px; width: 52px; line-height: 52px;"
 | |
|                   >
 | |
|                     U
 | |
|                   </span>
 | |
|                   <img
 | |
|                     alt=""
 | |
|                     aria-hidden="true"
 | |
|                     class="mx_BaseAvatar_image"
 | |
|                     data-testid="avatar-img"
 | |
|                     src="data:image/png;base64,00"
 | |
|                     style="width: 52px; height: 52px;"
 | |
|                   />
 | |
|                 </span>
 | |
|                 <h2>
 | |
|                   @user:example.com
 | |
|                 </h2>
 | |
|                 <p>
 | |
|                   <span>
 | |
|                     Send your first message to invite 
 | |
|                     <b>
 | |
|                       @user:example.com
 | |
|                     </b>
 | |
|                      to chat
 | |
|                   </span>
 | |
|                 </p>
 | |
|               </li>
 | |
|             </ol>
 | |
|           </div>
 | |
|         </div>
 | |
|       </div>
 | |
|       <div
 | |
|         class="mx_MessageComposer"
 | |
|       >
 | |
|         <div
 | |
|           class="mx_MessageComposer_wrapper"
 | |
|         >
 | |
|           <div
 | |
|             class="mx_MessageComposer_row"
 | |
|           >
 | |
|             <div
 | |
|               class="mx_SendMessageComposer"
 | |
|             >
 | |
|               <div
 | |
|                 class="mx_BasicMessageComposer"
 | |
|               >
 | |
|                 <div
 | |
|                   class="mx_MessageComposerFormatBar"
 | |
|                 >
 | |
|                   <button
 | |
|                     aria-label="Bold"
 | |
|                     class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconBold"
 | |
|                     role="button"
 | |
|                     tabindex="0"
 | |
|                     type="button"
 | |
|                   />
 | |
|                   <button
 | |
|                     aria-label="Italics"
 | |
|                     class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconItalic"
 | |
|                     role="button"
 | |
|                     tabindex="0"
 | |
|                     type="button"
 | |
|                   />
 | |
|                   <button
 | |
|                     aria-label="Strikethrough"
 | |
|                     class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconStrikethrough"
 | |
|                     role="button"
 | |
|                     tabindex="0"
 | |
|                     type="button"
 | |
|                   />
 | |
|                   <button
 | |
|                     aria-label="Code block"
 | |
|                     class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconCode"
 | |
|                     role="button"
 | |
|                     tabindex="0"
 | |
|                     type="button"
 | |
|                   />
 | |
|                   <button
 | |
|                     aria-label="Quote"
 | |
|                     class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconQuote"
 | |
|                     role="button"
 | |
|                     tabindex="0"
 | |
|                     type="button"
 | |
|                   />
 | |
|                   <button
 | |
|                     aria-label="Insert link"
 | |
|                     class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconInsertLink"
 | |
|                     role="button"
 | |
|                     tabindex="0"
 | |
|                     type="button"
 | |
|                   />
 | |
|                 </div>
 | |
|                 <div
 | |
|                   aria-autocomplete="list"
 | |
|                   aria-disabled="false"
 | |
|                   aria-haspopup="listbox"
 | |
|                   aria-label="Send a message…"
 | |
|                   aria-multiline="true"
 | |
|                   class="mx_BasicMessageComposer_input mx_BasicMessageComposer_input_shouldShowPillAvatar mx_BasicMessageComposer_inputEmpty"
 | |
|                   contenteditable="true"
 | |
|                   data-testid="basicmessagecomposer"
 | |
|                   dir="auto"
 | |
|                   role="textbox"
 | |
|                   style="--placeholder: 'Send a message…';"
 | |
|                   tabindex="0"
 | |
|                 >
 | |
|                   <div>
 | |
|                     <br />
 | |
|                   </div>
 | |
|                 </div>
 | |
|               </div>
 | |
|             </div>
 | |
|             <div
 | |
|               class="mx_MessageComposer_actions"
 | |
|             >
 | |
|               <div
 | |
|                 aria-label="Emoji"
 | |
|                 class="mx_AccessibleButton mx_EmojiButton mx_MessageComposer_button mx_EmojiButton_icon"
 | |
|                 role="button"
 | |
|                 tabindex="0"
 | |
|               />
 | |
|               <div
 | |
|                 aria-label="Attachment"
 | |
|                 class="mx_AccessibleButton mx_MessageComposer_button mx_MessageComposer_upload"
 | |
|                 role="button"
 | |
|                 tabindex="0"
 | |
|               />
 | |
|               <div
 | |
|                 aria-label="More options"
 | |
|                 class="mx_AccessibleButton mx_MessageComposer_button mx_MessageComposer_buttonMenu"
 | |
|                 role="button"
 | |
|                 tabindex="0"
 | |
|               />
 | |
|               <input
 | |
|                 multiple=""
 | |
|                 style="display: none;"
 | |
|                 type="file"
 | |
|               />
 | |
|             </div>
 | |
|           </div>
 | |
|         </div>
 | |
|       </div>
 | |
|     </main>
 | |
|   </div>
 | |
| </div>
 | |
| `;
 |