fix(messageRenderer): differentiate heading size by its level [WPB-11…

…802] (#18421) * feat(messageRenderer): differentiate heading size by its level * fix(messageRenderer): tests
wireapp · Dec 5, 2024 · d0ad643 · d0ad643
1 parent 6794cdb
commit d0ad643
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 7 deletions.
diff --git a/src/script/util/messageRenderer.test.ts b/src/script/util/messageRenderer.test.ts
@@ -553,11 +553,11 @@ describe('Markdown for code snippets', () => {
 });
 
 describe('Markdown for headings', () => {
-  it('renders all headings the same', () => {
-    expect(renderMessage('# heading')).toBe('<div class="md-heading">heading</div>');
-    expect(renderMessage('## heading')).toBe('<div class="md-heading">heading</div>');
-    expect(renderMessage('### heading')).toBe('<div class="md-heading">heading</div>');
-    expect(renderMessage('#### heading')).toBe('<div class="md-heading">heading</div>');
+  it('differentiate heading size by its level', () => {
+    expect(renderMessage('# heading')).toBe('<div class="md-heading md-heading--1">heading</div>');
+    expect(renderMessage('## heading')).toBe('<div class="md-heading md-heading--2">heading</div>');
+    expect(renderMessage('### heading')).toBe('<div class="md-heading md-heading--3">heading</div>');
+    expect(renderMessage('#### heading')).toBe('<div class="md-heading md-heading--4">heading</div>');
   });
 });
 

diff --git a/src/script/util/messageRenderer.ts b/src/script/util/messageRenderer.ts
@@ -47,7 +47,10 @@ const markdownit = new MarkdownIt('zero', {
 
 const originalFenceRule = markdownit.renderer.rules.fence!;
 
-markdownit.renderer.rules.heading_open = () => '<div class="md-heading">';
+markdownit.renderer.rules.heading_open = (tokens, idx) => {
+  const headingLevel = tokens[idx].tag.slice(1);
+  return `<div class="md-heading md-heading--${headingLevel}">`;
+};
 markdownit.renderer.rules.heading_close = () => '</div>';
 const originalNormalizeLink = markdownit.normalizeLink!;
 

diff --git a/src/style/content/conversation/message-list.less b/src/style/content/conversation/message-list.less
@@ -340,10 +340,22 @@
 
   .md-heading {
     margin: 4px 0 8px;
-    font-size: var(--font-size-large);
+    font-size: var(--font-size-base);
     font-weight: var(--font-weight-bold);
     line-height: var(--line-height-lg);
 
+    &--1 {
+      font-size: var(--font-size-xlarge);
+    }
+
+    &--2 {
+      font-size: var(--font-size-large);
+    }
+
+    &--3 {
+      font-size: var(--font-size-base);
+    }
+
     & + br {
       display: none;
     }