Merge branch 'master' into production

src/components/common/messaging/embed/Embed.module.scss

@@ -13,7 +13,6 @@
 
     &.website {
         gap: 6px;
-        display: flex;
         flex-direction: row;
 
         > div:nth-child(1) {

src/components/common/messaging/embed/EmbedMedia.tsx

@@ -114,7 +114,7 @@ export default function EmbedMedia({ embed, width, height }: Props) {
                         className={styles.image}
                         src={client.proxyFile(url)}
                         loading="lazy"
-                        style={{ width, height }}
+                        style={{ width: "100%", height: "100%" }}
                         onClick={() =>
                             modalController.push({
                                 type: "image_viewer",

src/components/markdown/RemarkRenderer.tsx

@@ -184,6 +184,11 @@ const Container = styled.div<{ largeEmoji: boolean }>`
  */
 const RE_QUOTE = /(^(?:>\s?){5})[>\s?]+(.*$)/gm;
 
+/**
+ * Regex for matching HTML tags
+ */
+const RE_HTML_TAGS = /^(<\/?[a-zA-Z0-9]+>)(.*$)/gm;
+
 /**
  * Sanitise Markdown input before rendering
  * @param content Input string
@@ -194,6 +199,11 @@ function sanitise(content: string) {
         content
             // Strip excessive blockquote indentation
             .replace(RE_QUOTE, (_, m0, m1) => m0 + m1)
+
+            // Append empty character if string starts with html tag
+            // This is to avoid inconsistencies in rendering Markdown inside/after HTML tags
+            // https://github.com/revoltchat/revite/issues/733
+            .replace(RE_HTML_TAGS, (match) => `\u200E${match}`)
     );
 }
 

src/components/settings/roles/PermissionSelect.tsx

@@ -24,7 +24,6 @@ const PermissionEntry = styled.label<{ disabled?: boolean }>`
     width: 100%;
     margin: 8px 0;
     display: flex;
-    font-size: 1.1em;
     align-items: center;
 
     .title {

src/lib/ErrorBoundary.tsx

@@ -5,19 +5,33 @@ import styled from "styled-components/macro";
 
 import { useEffect, useErrorBoundary, useState } from "preact/hooks";
 
+import { Button } from "@revoltchat/ui";
+
 import { GIT_REVISION } from "../revision";
 
 const CrashContainer = styled.div`
+    // defined for the Button component
+    --error: #ed4245;
+    --primary-background: #2d2d2d;
+
     height: 100%;
     padding: 12px;
 
-    background: black;
+    background: #191919;
     color: white;
 
     h3 {
         margin: 0;
         margin-bottom: 12px;
     }
+
+    code {
+        font-size: 1.1em;
+    }
+
+    .buttonDivider {
+        margin: 8px;
+    }
 `;
 
 interface Props {
@@ -65,15 +79,17 @@ export default function ErrorBoundary({ children, section }: Props) {
                 {section === "client" ? (
                     <>
                         <h3>Client Crash Report</h3>
-                        <button onClick={ignoreError}>
+                        <Button onClick={ignoreError}>
                             Ignore error and try to reload app
-                        </button>
+                        </Button>
-                        <button onClick={reset}>
+                        <div class="buttonDivider" />
-                            {confirm ? "Are you sure?" : "Reset all app data"}
+                        <Button onClick={() => location.reload()}>
-                        </button>
-                        <button onClick={() => location.reload()}>
                             Refresh page
-                        </button>
+                        </Button>
+                        <div class="buttonDivider" />
+                        <Button palette="error" onClick={reset}>
+                            {confirm ? "Are you sure?" : "Reset all app data"}
+                        </Button>
                     </>
                 ) : (
                     <>
@@ -83,6 +99,9 @@ export default function ErrorBoundary({ children, section }: Props) {
                         </button>
                     </>
                 )}
+                <br />
+                <br />
+                <div>Revolt has crashed. Here's the error:</div>
                 <pre>
                     <code>{error?.stack}</code>
                 </pre>

src/pages/developer/Developer.tsx

@@ -45,7 +45,7 @@ export default function Developer() {
             </div>
 
             <div style={{ padding: "16px" }}>
-                <a onClick={() => setCrash(true)}>click to crash app</a>
+                <a style={"cursor: pointer;"} onClick={() => setCrash(true)}>click to crash app</a>
                 {crash && (window as any).sus.sus()}
                 {/*<span>
                     <b>Voice Status:</b> {VoiceStatus[voice.status]}