From 2a8bc0fe796509440d0b6672ac7c14179992cafc Mon Sep 17 00:00:00 2001
From: d3m1d0v <d3m1d0v@yandex-team.ru>
Date: Thu, 18 Aug 2022 22:11:42 +0300
Subject: [PATCH] feat(note): allow inline formatting in note title

---
 src/scss/_note.scss            |  4 ++
 src/transform/plugins/notes.ts | 19 +++++----
 test/data/alerts.ts            | 74 ++++++++++++----------------------
 test/notes.test.ts             | 29 ++++++++++---
 4 files changed, 64 insertions(+), 62 deletions(-)

diff --git a/src/scss/_note.scss b/src/scss/_note.scss
index a24e5aff..e499c248 100644
--- a/src/scss/_note.scss
+++ b/src/scss/_note.scss
@@ -16,6 +16,10 @@ $importantBackgroundColor: rgba(235, 50, 38, 0.08);
     padding: 20px 20px 20px 64px;
     border-radius: 10px;
 
+    .yfm-note-title {
+        font-weight: 700;
+    }
+
     & > p {
         margin: 0 0 10px 0;
 
diff --git a/src/transform/plugins/notes.ts b/src/transform/plugins/notes.ts
index 8e981e2a..88f2fc12 100644
--- a/src/transform/plugins/notes.ts
+++ b/src/transform/plugins/notes.ts
@@ -83,22 +83,27 @@ const notes: MarkdownItPluginCb = (md, {lang, path: optPath, log}) => {
 
                 // Add extra paragraph
                 const titleOpen = new state.Token('yfm_note_title_open', 'p', 1);
-                const inline = new state.Token('inline', '', 0);
-                const strongOpen = new state.Token('strong_open', 'strong', 1);
-                const inlineText = new state.Token('text', '', 0);
-                const strongClose = new state.Token('strong_close', 'strong', -1);
+                titleOpen.attrSet('class', 'yfm-note-title');
+                const titleInline = new state.Token('inline', '', 0);
                 const titleClose = new state.Token('yfm_note_title_close', 'p', -1);
 
                 if (match[2]) titleOpen.attrSet('yfm2xliff-explicit', 'true');
                 titleOpen.block = true;
                 titleClose.block = true;
-                inlineText.content = match[2] === undefined ? getTitle(type, lang) : match[2];
-                inline.children = [strongOpen, inlineText, strongClose];
+
+                titleInline.content = match[2] === undefined ? getTitle(type, lang) : match[2];
+                titleInline.children = [];
+                state.md.inline.parse(
+                    titleInline.content,
+                    state.md,
+                    state.env,
+                    titleInline.children,
+                );
 
                 const insideTokens = [
                     newOpenToken,
                     titleOpen,
-                    inline,
+                    titleInline,
                     titleClose,
                     ...tokens.slice(i + 3, closeTokenIdx),
                     newCloseToken,
diff --git a/test/data/alerts.ts b/test/data/alerts.ts
index 3b2db987..90eba336 100644
--- a/test/data/alerts.ts
+++ b/test/data/alerts.ts
@@ -82,7 +82,10 @@ const getTokens = (title: string) => {
         {
             type: 'yfm_note_title_open',
             tag: 'p',
-            attrs: title === 'Custom title' ? [['yfm2xliff-explicit', 'true']] : null,
+            attrs: [
+                ['class', 'yfm-note-title'],
+                ...(title === 'Custom title' ? [['yfm2xliff-explicit', 'true']] : []),
+            ],
             map: null,
             nesting: 1,
             level: 0,
@@ -101,54 +104,27 @@ const getTokens = (title: string) => {
             map: null,
             nesting: 0,
             level: 0,
-            children: [
-                {
-                    type: 'strong_open',
-                    tag: 'strong',
-                    attrs: null,
-                    map: null,
-                    nesting: 1,
-                    level: 0,
-                    children: null,
-                    content: '',
-                    markup: '',
-                    info: '',
-                    meta: null,
-                    block: false,
-                    hidden: false,
-                },
-                {
-                    type: 'text',
-                    tag: '',
-                    attrs: null,
-                    map: null,
-                    nesting: 0,
-                    level: 0,
-                    children: null,
-                    content: title,
-                    markup: '',
-                    info: '',
-                    meta: null,
-                    block: false,
-                    hidden: false,
-                },
-                {
-                    type: 'strong_close',
-                    tag: 'strong',
-                    attrs: null,
-                    map: null,
-                    nesting: -1,
-                    level: 0,
-                    children: null,
-                    content: '',
-                    markup: '',
-                    info: '',
-                    meta: null,
-                    block: false,
-                    hidden: false,
-                },
-            ],
-            content: '',
+            children:
+                title === ''
+                    ? []
+                    : [
+                          {
+                              type: 'text',
+                              tag: '',
+                              attrs: null,
+                              map: null,
+                              nesting: 0,
+                              level: 0,
+                              children: null,
+                              content: title,
+                              markup: '',
+                              info: '',
+                              meta: null,
+                              block: false,
+                              hidden: false,
+                          },
+                      ],
+            content: title,
             markup: '',
             info: '',
             meta: null,
diff --git a/test/notes.test.ts b/test/notes.test.ts
index 3cb93761..83a529ed 100644
--- a/test/notes.test.ts
+++ b/test/notes.test.ts
@@ -47,7 +47,7 @@ describe('Alerts', () => {
                 );
 
                 expect(result[0].attrs?.[0][1]).toEqual(`yfm-note yfm-accent-${type}`);
-                expect(result[2].children?.[1].content).toEqual(title);
+                expect(result[2].children?.[0].content).toEqual(title);
             });
         });
     });
@@ -96,7 +96,7 @@ describe('Alerts', () => {
                 '{% note info "Note title" %}\n' + '\n' + 'Note content\n' + '\n' + '{% endnote %}',
             ),
         ).toBe(
-            '<div class="yfm-note yfm-accent-info" note-type="info"><p yfm2xliff-explicit="true"><strong>Note title</strong></p>\n' +
+            '<div class="yfm-note yfm-accent-info" note-type="info"><p class="yfm-note-title" yfm2xliff-explicit="true">Note title</p>\n' +
                 '<p>Note content</p>\n' +
                 '</div>',
         );
@@ -118,9 +118,9 @@ describe('Alerts', () => {
                     '{% endnote %}',
             ),
         ).toBe(
-            '<div class="yfm-note yfm-accent-info" note-type="info"><p yfm2xliff-explicit="true"><strong>Note title 1</strong></p>\n' +
+            '<div class="yfm-note yfm-accent-info" note-type="info"><p class="yfm-note-title" yfm2xliff-explicit="true">Note title 1</p>\n' +
                 '<p>Note content 1</p>\n' +
-                '</div><div class="yfm-note yfm-accent-info" note-type="info"><p yfm2xliff-explicit="true"><strong>Note title 2</strong></p>\n' +
+                '</div><div class="yfm-note yfm-accent-info" note-type="info"><p class="yfm-note-title" yfm2xliff-explicit="true">Note title 2</p>\n' +
                 '<p>Note content 2</p>\n' +
                 '</div>',
         );
@@ -142,11 +142,28 @@ describe('Alerts', () => {
                     '{% endnote %}',
             ),
         ).toBe(
-            '<div class="yfm-note yfm-accent-info" note-type="info"><p yfm2xliff-explicit="true"><strong>Outer title</strong></p>\n' +
+            '<div class="yfm-note yfm-accent-info" note-type="info"><p class="yfm-note-title" yfm2xliff-explicit="true">Outer title</p>\n' +
                 '<p>Outer content</p>\n' +
-                '<div class="yfm-note yfm-accent-info" note-type="info"><p yfm2xliff-explicit="true"><strong>Inner title</strong></p>\n' +
+                '<div class="yfm-note yfm-accent-info" note-type="info"><p class="yfm-note-title" yfm2xliff-explicit="true">Inner title</p>\n' +
                 '<p>Inner content</p>\n' +
                 '</div></div>',
         );
     });
+
+    test('should render title with format', () => {
+        expect(
+            transformYfm(
+                '{% note info "_Italic note title_" %}\n' +
+                    '\n' +
+                    'Content\n' +
+                    '\n' +
+                    '{% endnote %}',
+            ),
+        ).toBe(
+            '<div class="yfm-note yfm-accent-info" note-type="info">' +
+                '<p class="yfm-note-title" yfm2xliff-explicit="true"><em>Italic note title</em></p>\n' +
+                '<p>Content</p>\n' +
+                '</div>',
+        );
+    });
 });