we got quotes 🔥

lib/widgets/chat_page/html/code_block.dart

@@ -0,0 +1,54 @@
+import "dart:math";
+
+import "package:flutter/material.dart";
+
+class CodeBlock extends StatelessWidget {
+  final String code;
+  final String lang;
+  const CodeBlock(this.code, {required this.lang, super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+    return ClipRRect(
+      borderRadius: BorderRadius.all(Radius.circular(16)),
+      child: ColoredBox(
+        color: theme.colorScheme.surfaceContainerHighest,
+        child: IntrinsicWidth(
+          child: Column(
+            children: [
+              Row(
+                mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                children: [
+                  Padding(
+                    padding: EdgeInsets.symmetric(horizontal: 8),
+                    child: Text(
+                      lang.substring(0, min(lang.length, 15)),
+                      style: TextStyle(fontFamily: "monospace"),
+                    ),
+                  ),
+                  TextButton.icon(
+                    onPressed: () {},
+                    icon: Icon(Icons.copy),
+                    label: Text("Copy"),
+                  ),
+                ],
+              ),
+              ColoredBox(
+                color: theme.colorScheme.surfaceContainerHigh,
+                child: Container(
+                  constraints: BoxConstraints(minWidth: 250),
+                  padding: EdgeInsets.all(8),
+                  child: SelectableText(
+                    code,
+                    style: TextStyle(fontFamily: "monospace"),
+                  ),
+                ),
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}

lib/widgets/chat_page/html/html.dart

@@ -0,0 +1,93 @@
+import "package:fast_immutable_collections/fast_immutable_collections.dart";
+import "package:flutter/material.dart";
+import "package:flutter_riverpod/flutter_riverpod.dart";
+import "package:flutter_widget_from_html_core/flutter_widget_from_html_core.dart";
+import "package:nexus/helpers/launch_helper.dart";
+import "package:nexus/widgets/chat_page/html/spoiler_text.dart";
+import "package:nexus/widgets/chat_page/html/code_block.dart";
+import "package:nexus/widgets/chat_page/quoted.dart";
+
+class Html extends ConsumerWidget {
+  final String html;
+  const Html(this.html, {super.key});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) => HtmlWidget(
+    html,
+    customWidgetBuilder: (element) {
+      if (element.attributes.keys.contains("data-mx-spoiler")) {
+        return SpoilerText(text: element.text);
+      }
+      return switch (element.localName) {
+        "mx-reply" => SizedBox.shrink(),
+
+        "code" => CodeBlock(
+          element.text,
+          lang: element.className.replaceAll("language-", ""),
+        ),
+
+        "blockquote" => Quoted(Html(element.innerHtml)),
+
+        ("del" ||
+            "h1" ||
+            "h2" ||
+            "h3" ||
+            "h4" ||
+            "h5" ||
+            "h6" ||
+            "p" ||
+            "a" ||
+            "ul" ||
+            "ol" ||
+            "sup" ||
+            "sub" ||
+            "li" ||
+            "b" ||
+            "i" ||
+            "u" ||
+            "strong" ||
+            "em" ||
+            "s" ||
+            "code" ||
+            "hr" ||
+            "br" ||
+            "div" ||
+            "table" ||
+            "thead" ||
+            "tbody" ||
+            "tr" ||
+            "th" ||
+            "td" ||
+            "caption" ||
+            "pre" ||
+            "span" ||
+            "img" ||
+            "details" ||
+            "summary") =>
+          null,
+
+        _ => SizedBox.shrink(),
+      };
+    },
+    customStylesBuilder: (element) => {
+      "width": "auto",
+      ...Map.fromEntries(
+        element.attributes
+            .mapTo<MapEntry<String, String>?>(
+              (key, value) => switch (key) {
+                "data-mx-color" => MapEntry("color", value),
+
+                "data-mx-bg-color" => MapEntry("background-color", value),
+
+                "edited" => MapEntry("display", "block"),
+
+                _ => null,
+              },
+            )
+            .nonNulls,
+      ),
+    },
+    onTapUrl: (url) =>
+        ref.watch(LaunchHelper.provider).launchUrl(Uri.parse(url)),
+  );
+}

lib/widgets/chat_page/html/spoiler_text.dart

@@ -0,0 +1,29 @@
+import "package:flutter/material.dart";
+import "package:flutter_hooks/flutter_hooks.dart";
+
+class SpoilerText extends HookWidget {
+  final String text;
+
+  const SpoilerText({super.key, required this.text});
+
+  @override
+  Widget build(BuildContext context) {
+    final revealed = useState(false);
+
+    return InkWell(
+      onTap: () => revealed.value = !revealed.value,
+      child: AnimatedContainer(
+        duration: const Duration(milliseconds: 100),
+        padding: const EdgeInsets.symmetric(horizontal: 4, vertical: 2),
+        decoration: BoxDecoration(
+          color: revealed.value ? Colors.transparent : Colors.blueGrey,
+          borderRadius: BorderRadius.circular(4),
+        ),
+        child: Text(
+          text,
+          style: TextStyle(color: revealed.value ? null : Colors.transparent),
+        ),
+      ),
+    );
+  }
+}