Phase 2 : Refactor TextualBody to MVVM and remove legacy component (#33165)

* Refactor TextualBody to MVVM and remove legacy component

* Update snapshot + fix eslint warning

* update css to fix playwright tests failure

* return i18n into the MVVM

* Update snapshots

* Update tests to reflect the css changes

* Update snapshot

* Update css to correct letter-spacing

* Update css to fix playwright issues.

* Preserve inline emote sender rendering in TextualBodyView

* Update snapshot to reflect html change

* Update back to span instead of button, the default button css fails tests

* Extract TextualBodyFactory from MBodyFactory

* Update snapshot

* Update HTML snapshot to pass tests

* Update Snapshots

* Added several tests for coverage

* Remove double checks, merge function already checks.

* Remove unessecery comment

* revert to button

* Update snapshots because of the revert

* added Math.min() to simplify ternary expressions.

* Update playwright screenshots for accessibility

* Update playwright screenshots

* Update css to fix playwright fail

* Update screenshot + snapshots

* Add comments to props

apps/web/res/css/_components.pcss

@@ -225,16 +225,13 @@
 @import "./views/messages/_HiddenBody.pcss";
 @import "./views/messages/_HiddenMediaPlaceholder.pcss";
 @import "./views/messages/_LegacyCallEvent.pcss";
-@import "./views/messages/_MEmoteBody.pcss";
 @import "./views/messages/_MFileBody.pcss";
 @import "./views/messages/_MImageBody.pcss";
 @import "./views/messages/_MImageReplyBody.pcss";
 @import "./views/messages/_MJitsiWidgetEvent.pcss";
 @import "./views/messages/_MLocationBody.pcss";
-@import "./views/messages/_MNoticeBody.pcss";
 @import "./views/messages/_MPollBody.pcss";
 @import "./views/messages/_MStickerBody.pcss";
-@import "./views/messages/_MTextBody.pcss";
 @import "./views/messages/_MediaBody.pcss";
 @import "./views/messages/_MessageActionBar.pcss";
 @import "./views/messages/_MjolnirBody.pcss";

apps/web/res/css/views/dialogs/_MessageEditHistoryDialog.pcss

@@ -27,6 +27,10 @@ Please see LICENSE files in the repository root for full details.
     padding: 0;
     color: $primary-content;
 
+    .mx_EditHistoryMessage_emoteSender {
+        cursor: pointer;
+    }
+
     span.mx_EditHistoryMessage_deletion,
     span.mx_EditHistoryMessage_insertion {
         padding: 0px 2px;

apps/web/res/css/views/messages/_MEmoteBody.pcss

@@ -1,16 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2017 Vector Creations Ltd.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-.mx_MEmoteBody {
-    white-space: pre-wrap;
-    text-align: start;
-}
-
-.mx_MEmoteBody_sender {
-    cursor: pointer;
-}

apps/web/res/css/views/messages/_MNoticeBody.pcss

@@ -1,12 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2015, 2016 OpenMarket Ltd
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-.mx_MNoticeBody {
-    white-space: pre-wrap;
-    color: $secondary-content;
-}

apps/web/res/css/views/messages/_MTextBody.pcss

@@ -1,11 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2015, 2016 OpenMarket Ltd
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-.mx_MTextBody {
-    white-space: pre-wrap;
-}

apps/web/res/css/views/rooms/_EventTile.pcss

@@ -636,19 +636,6 @@ $left-gutter: 64px;
     overflow-x: hidden;
     margin-right: var(--EventTile_content-margin-inline-end);
 
-    .mx_EventTile_edited,
-    .mx_EventTile_pendingModeration {
-        user-select: none;
-        font-size: $font-12px;
-        color: $secondary-content;
-        display: inline-block;
-        margin-inline-start: 9px;
-    }
-
-    .mx_EventTile_edited {
-        cursor: pointer;
-    }
-
     .markdown-body {
         font: var(--cpd-font-body-md-regular) !important;
         letter-spacing: var(--cpd-font-letter-spacing-body-md);
@@ -1374,14 +1361,6 @@ $left-gutter: 64px;
     }
 }
 
-.mx_EventTile_annotated {
-    display: flex;
-}
-
-.mx_EventTile_annotatedInline {
-    display: inline-flex;
-}
-
 .mx_EventTile_footer {
     display: flex;
     gap: var(--cpd-space-2x);

apps/web/res/css/views/rooms/_ReplyTile.pcss

@@ -68,7 +68,7 @@ Please see LICENSE files in the repository root for full details.
 
         // Hide line numbers and edited indicator
         .mx_EventTile_lineNumbers,
-        .mx_EventTile_edited {
+        [data-textual-body-edited-marker] {
             display: none;
         }