content: Make **bold** bolder even in spoiler headers and h1/h2/etc.

Fixes: zulip#705
chrisbobbe · May 31, 2024 · 61754f7 · 61754f7
1 parent 54fc1a0
commit 61754f7
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 2 deletions.
diff --git a/lib/widgets/content.dart b/lib/widgets/content.dart
@@ -723,6 +723,12 @@ class InlineContent extends StatelessWidget {
     required this.nodes,
   }) {
     assert(style.fontSize != null);
+    assert(
+      style.debugLabel!.contains('weightVariableTextStyle')
+      // ([ContentTheme.textStylePlainParagraph] applies [weightVariableTextStyle])
+      || style.debugLabel!.contains('ContentTheme.textStylePlainParagraph')
+      || style.debugLabel!.contains('bolderWghtTextStyle')
+    );
     _builder = _InlineContentBuilder(this);
   }
 
@@ -733,6 +739,7 @@ class InlineContent extends StatelessWidget {
   ///
   /// Must set [TextStyle.fontSize]. Some descendant spans will consume it,
   /// e.g., to make their content slightly smaller than surrounding text.
+  /// Similarly must set a font weight using [weightVariableTextStyle].
   final TextStyle style;
 
   final List<InlineContentNode> nodes;
@@ -831,8 +838,9 @@ class _InlineContentBuilder {
     }
   }
 
-  InlineSpan _buildStrong(StrongNode node) => _buildNodes(node.nodes,
-    style: weightVariableTextStyle(_context!, wght: 600));
+  InlineSpan _buildStrong(StrongNode node) =>
+    _buildNodes(style: bolderWghtTextStyle(widget.style, by: 200),
+      node.nodes);
 
   InlineSpan _buildDeleted(DeletedNode node) => _buildNodes(node.nodes,
     style: const TextStyle(decoration: TextDecoration.lineThrough));

diff --git a/test/widgets/content_test.dart b/test/widgets/content_test.dart
@@ -519,6 +519,54 @@ void main() {
       content: plainContent('<p><strong>bold</strong></p>'),
       styleFinder: findWordBold,
     );
+
+    for (final level in HeadingLevel.values) {
+      final name = level.name;
+      assert(RegExp(r'^h[1-6]$').hasMatch(name));
+      testFontWeight('in $name',
+        expectedWght: 800,
+        // # **bold**, ## **bold**, ### **bold**, etc.
+        content: plainContent('<$name><strong>bold</strong></$name>'),
+        styleFinder: findWordBold,
+      );
+    }
+
+    testFontWeight('in different kind of span in h1',
+      expectedWght: 800,
+      // # ~~**bold**~~
+      content: plainContent('<h1><del><strong>bold</strong></del></h1>'),
+      styleFinder: findWordBold,
+    );
+
+    testFontWeight('in spoiler header',
+      expectedWght: 900,
+      // ```spoiler regular **bold**
+      // content
+      // ```
+      content: plainContent(
+        '<div class="spoiler-block"><div class="spoiler-header">\n'
+          '<p>regular <strong>bold</strong></p>\n'
+          '</div><div class="spoiler-content" aria-hidden="true">\n'
+          '<p>content</p>\n'
+          '</div></div>'
+      ),
+      styleFinder: findWordBold,
+    );
+
+    testFontWeight('in different kind of span in spoiler header',
+      expectedWght: 900,
+      // ```spoiler *italic **bold***
+      // content
+      // ```
+      content: plainContent(
+        '<div class="spoiler-block"><div class="spoiler-header">\n'
+          '<p><em>italic <strong>bold</strong></em></p>\n'
+          '</div><div class="spoiler-content" aria-hidden="true">\n'
+          '<p>content</p>\n'
+          '</div></div>'
+      ),
+      styleFinder: findWordBold,
+    );
   });
 
   testContentSmoke(ContentExample.emphasis);