Support for receiving formatted messages

Co-authored-by: Alvaro Carrasco <alvaro@signal.org>

stylesheets/components/MessageTextRenderer.scss

@@ -0,0 +1,112 @@
+// Copyright 2023 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+.MessageTextRenderer {
+  &__formatting {
+    &--bold {
+      font-weight: 600;
+    }
+    &--italic {
+      font-style: italic;
+    }
+    &--monospace {
+      font-family: monospace;
+    }
+    &--strikethrough {
+      text-decoration: line-through;
+      bdi {
+        text-decoration: line-through;
+      }
+    }
+    &--none {
+      text-decoration: none;
+      font-weight: 400;
+      bdi {
+        text-decoration: none;
+      }
+    }
+
+    // Note: only used in the left pane for search results, not in message bubbles
+    &--keywordHighlight {
+      font-weight: 600;
+
+      // To differentiate it from bold formatting, we increase the color contrast
+      @include light-theme {
+        color: $color-black; // vs color-gray-60 normally
+      }
+      @include dark-theme {
+        color: $color-white; // vs color-gray-25 normally
+      }
+    }
+
+    // Note: Spoiler must be last to override any other formatting applied to the section
+    &--spoiler {
+      user-select: none;
+      cursor: pointer;
+
+      // make child text invisible
+      color: transparent;
+
+      // fix outline
+      outline: none;
+
+      @include keyboard-mode {
+        &:focus {
+          box-shadow: 0 0 0px 1px $color-ultramarine;
+        }
+      }
+    }
+
+    &--spoiler--noninteractive {
+      cursor: default;
+      box-shadow: none;
+    }
+
+    // The simplest; always in dark mode
+    &--spoiler-StoryViewer {
+      background-color: $color-white;
+    }
+
+    // The left pane
+    &--spoiler-ConversationList,
+    &--spoiler-SearchResult {
+      @include light-theme {
+        background-color: $color-gray-60;
+      }
+      @include dark-theme {
+        background-color: $color-gray-25;
+      }
+    }
+
+    // The timeline
+    &--spoiler-Quote {
+      @include light-theme {
+        background-color: $color-gray-90;
+      }
+      @include dark-theme {
+        background-color: $color-gray-05;
+      }
+    }
+
+    &--spoiler-Timeline--incoming {
+      @include light-theme {
+        background-color: $color-gray-90;
+      }
+      @include dark-theme {
+        background-color: $color-gray-05;
+      }
+    }
+    &--spoiler-Timeline--outgoing {
+      @include light-theme {
+        background-color: rgba(255, 255, 255, 0.9);
+      }
+      @include dark-theme {
+        background-color: rgba(255, 255, 255, 0.9);
+      }
+    }
+
+    &--invisible {
+      visibility: hidden;
+    }
+  }
+}