feat: add "smart" class to <br> for backward compatibility

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@matters/matters-editor",
-  "version": "0.2.0-alpha.48",
+  "version": "0.2.0-alpha.50",
   "description": "Editor for matters.news",
   "author": "https://github.com/thematters",
   "homepage": "https://github.com/thematters/matters-editor",

src/editors/extensions/index.ts

@@ -56,7 +56,11 @@ export const makeArticleEditorExtensions = ({
     Code,
     CodeBlock,
     Blockquote,
-    HardBreak,
+    HardBreak.configure({
+      HTMLAttributes: {
+        class: 'smart',
+      },
+    }),
     HorizontalRule,
     OrderedList,
     ListItem,
@@ -98,7 +102,11 @@ export const makeCommentEditorExtensions = ({
     Code,
     CodeBlock,
     Blockquote,
-    HardBreak,
+    HardBreak.configure({
+      HTMLAttributes: {
+        class: 'smart',
+      },
+    }),
     HorizontalRule,
     ListItem,
     OrderedList,

src/transformers/normalize.test.ts

@@ -55,7 +55,7 @@ describe('Normalization', () => {
   test('self-closed tags', () => {
     expectNormalizeArticleHTML('<p />', '<p></p>')
 
-    expectNormalizeArticleHTML('<br></br>', '<p><br></p>')
+    expectNormalizeArticleHTML('<br></br>', '<p><br class="smart"></p>')
 
     expectNormalizeArticleHTML('<hr/>', '<hr>')
 
@@ -273,7 +273,7 @@ describe('Normalization', () => {
   test('article content from thrid-party API', () => {
     expectNormalizeArticleHTML(
       '\n<figure class="is-layout-flex wp-block-gallery-1 wp-block-gallery has-nested-images columns-default is-cropped image">\n<figure class="wp-block-image size-large image"><img width="1024" height="1024" data-id="3381" src="https://assets.matters.news/embed/cd4e0177-e146-4fa0-8f40-4fd67189f385.jpeg" alt class="wp-image-3381" data-asset-id="cd4e0177-e146-4fa0-8f40-4fd67189f385"><figcaption class="wp-element-caption">金曲樂團百合花打造新世代抓姦神曲〈掠猴之歌〉(照片：Taiwan Beats提供)</figcaption></figure>\n<figcaption><span></span></figcaption></figure>\n\n\n\n<hr class="wp-block-separator has-alpha-channel-opacity is-style-wide">\n\n\n\n<p class="has-medium-font-size"><strong>金曲樂團百合花看透現代成人愛情關係 打造新世代抓姦神曲〈掠猴之歌〉</strong></p>\n\n\n\n<p class="has-text-align-justify">榮獲<a href="https://money.udn.com/money/story/7307/6432158" target="_blank" data-type="URL" data-id="https://money.udn.com/money/story/7307/6432158" rel="noreferrer noopener">金曲獎最佳台語專輯</a>的百合花樂團，近期宣布啟動海外演出計畫，即將前進新加坡、馬來西亞演出，然而許久未跟台灣樂迷互動的他們，也特別推出全新〈<a href="https://www.youtube.com/watch?v=u7AqYDBrjBI" data-type="URL" data-id="https://www.youtube.com/watch?v=u7AqYDBrjBI" target="_blank" rel="noopener">掠猴之歌</a>〉MV，搞怪奇幻色彩，宛如前世時空記憶，卻擁有千年不變的相同錯綜複雜感情議題，糾結惱人情緒，即便經過多次輪迴依舊解不開，<strong>原來「出軌」這件事，無論哪個世紀都可能存在</strong>。百合花打趣笑說：「掠猴就是抓偷吃的意思，也是每個人感情裡最不想遇到的事情，我們用幽默手法與旋律，窺探愛情裡各種面貌。」百合花特別也為〈掠猴之歌〉打造一款線上互動遊戲「掠猴之遊戲Monkey-Catching Game」，邀請樂迷替苦主「金蕉小姐」搜集猴子老公出軌的證據！</p>\n\n\n\n<p class="has-text-align-justify">百合花從首張大碟囊括金音獎最佳搖滾專輯、最佳新人，第二張作品贏得去年金曲獎最佳台語專輯殊榮，奠定當今獨立樂壇地位，樂團不斷嘗試以傳統樂器混搭流行旋律，透過幽默與嘲諷歌詞拼貼，企圖打造千禧世代的「<strong>後台灣新歌謠</strong>」，也表現出略帶異色卻又充滿社會百態風情的生命之作。其中描繪當代成人複雜愛情觀的〈掠猴之歌〉，名符其實是一首「<strong>抓姦歌</strong>」，樂團比擬歌曲如同奧斯卡大導演「<strong><a href="https://zh.wikipedia.org/zh-tw/%E7%A7%91%E6%81%A9%E5%85%84%E5%BC%9F" target="_blank" rel="noreferrer noopener">柯恩兄弟</a></strong>」的瀟灑態度，卻又加入金馬獎導演黃信堯擅於小人物縮影觀察，濃縮成一首現代社會面對愛情出軌的直球對決。</p>\n\n\n\n<hr class="wp-block-separator has-alpha-channel-opacity is-style-wide">\n\n\n\n<figure class="wp-block-image size-large image"><img width="1024" height="573" src="https://assets.matters.news/embed/1169f99f-f0a0-43ba-ac72-731267b0dd19.jpeg" alt class="wp-image-3380" data-asset-id="1169f99f-f0a0-43ba-ac72-731267b0dd19"><figcaption><span></span></figcaption></figure>\n\n\n\n<p class="has-palette-color-3-color has-text-color has-medium-font-size"><strong>MV上演抓姦千年穿越劇 警世寓言大讚宛如百合花式「戲說台灣」！</strong></p>\n\n\n\n<p class="has-text-align-justify">也因為〈掠猴之歌〉散發一股獨特電影感氣息，百合花決定讓MV呈現樂團從未有過的影像風格，特別邀請曾入圍金曲最佳MV的導演林毛執導，攜手<a href="https://www.instagram.com/sidandgeri/" target="_blank" rel="noreferrer noopener">藝術家sid and geri</a>合力操刀，把感情裡最不想觸碰的「抓猴」議題，也能變成一場又鏗又充滿警世意味寓言遊戲。<br>MV把場景拉到西元前3000年，在千年世紀之前，同樣也有出軌問題，女主角找來專業徵信雙人組做一場交易，藉由奇異魔法與幻術，企圖找出另一半偷吃證據，導演特別跟現代時空交錯，彷彿上演一場前世今生的「抓姦輪迴」大戲，他也表示：「<strong>過去華語歌曲常以哀怨節奏描繪外遇、偷吃等感情失敗關係，但百合花反其道而行，改以自嘲幽默手法，讓抓姦不再只是一場社會悲劇。」樂團成員看到MV成品後大讚導演瘋狂創意，繽紛視覺加上穿越劇方式，笑稱「我們也有屬於百合花式風格的《細說台灣》了！</strong>」</p>\n\n\n\n<hr class="wp-block-separator has-alpha-channel-opacity is-style-wide">\n\n\n\n<p class="has-medium-font-size"><strong>推出線上互動「掠猴之遊戲」 邀請樂迷一起上網協尋偷吃出軌證據</strong><br><strong>百合花宣布啟動海外巡演計畫！ 四月底前進星馬演出</strong></p>\n\n\n\n<figure class="wp-block-image aligncenter size-full image"><img width="960" height="200" src="https://assets.matters.news/embed/d9e8e43a-46be-4dd3-9c4a-7d3079144d3a.png" alt class="wp-image-3382" data-asset-id="d9e8e43a-46be-4dd3-9c4a-7d3079144d3a"><figcaption><span></span></figcaption></figure>\n\n\n\n<figure class="wp-block-image aligncenter size-full"><a href="https://liliumtaiwan.itch.io/monkey" target="_blank" rel="noreferrer noopener"><figure class="image"><img width="603" height="765" src="https://assets.matters.news/embed/c7a25d10-4820-42b3-8ec1-c56fbf8b75d7.jpeg" alt class="wp-image-3384" data-asset-id="c7a25d10-4820-42b3-8ec1-c56fbf8b75d7"><figcaption><span></span></figcaption></figure></a><figcaption><span></span></figcaption></figure>\n\n\n\n<p class="has-small-font-size"><strong><a href="https://liliumtaiwan.itch.io/monkey" target="_blank" data-type="URL" data-id="https://liliumtaiwan.itch.io/monkey" rel="noreferrer noopener">推出線上互動「掠猴之遊戲」 邀請樂迷一起上網協尋偷吃出軌證據</a></strong></p>\n\n\n\n<p class="has-text-align-justify">〈掠猴之歌〉MV還埋藏樂團先前推出的線上互動遊戲「<a href="https://liliumtaiwan.itch.io/monkey" target="_blank" rel="noreferrer noopener">掠猴之遊戲Monkey-Catching Game</a>」彩蛋，邀請樂迷一邊看MV也能從中挖掘，<strong>主唱奕碩表示：「〈掠猴之歌〉的編曲散發一股電視遊樂器復古感，所以我們打造一款8bit風格小遊戲，還讓三位團員化身三種樂器人物，包含月琴、電貝斯、北管通鼓，陪伴玩家一起闖關。」</strong>遊戲融合台灣既有街景文化特色，出現手搖杯店、小吃攤等，讓樂迷扮起偵探，協助苦主「金蕉小姐」搜集猴子老公出軌的證據。隨著MV與遊戲一併公開，<strong>百合花也宣布將啟動「2023 變猴弄」海外巡迴</strong>，將在4月底前進新加坡、馬來西亞，將台灣獨特音樂特色推廣到世界各地。</p>\n\n\n\n<figure class="wp-block-image aligncenter size-large image"><img width="1024" height="1024" src="https://assets.matters.news/embed/3ebc4a93-d887-40dc-a7bc-9f69cd728c8c.jpeg" alt class="wp-image-3385" data-asset-id="3ebc4a93-d887-40dc-a7bc-9f69cd728c8c"><figcaption class="wp-element-caption"><strong>百合花宣布啟動海外巡演計畫！ 四月底前進星馬演出</strong></figcaption></figure>\n\n\n\n<p></p>\n',
-      '<p>金曲樂團百合花打造新世代抓姦神曲〈掠猴之歌〉(照片：Taiwan Beats提供)</p><hr><p><strong>金曲樂團百合花看透現代成人愛情關係 打造新世代抓姦神曲〈掠猴之歌〉</strong></p><p>榮獲<a target="_blank" rel="noopener noreferrer nofollow" href="https://money.udn.com/money/story/7307/6432158">金曲獎最佳台語專輯</a>的百合花樂團，近期宣布啟動海外演出計畫，即將前進新加坡、馬來西亞演出，然而許久未跟台灣樂迷互動的他們，也特別推出全新〈<a target="_blank" rel="noopener noreferrer nofollow" href="https://www.youtube.com/watch?v=u7AqYDBrjBI">掠猴之歌</a>〉MV，搞怪奇幻色彩，宛如前世時空記憶，卻擁有千年不變的相同錯綜複雜感情議題，糾結惱人情緒，即便經過多次輪迴依舊解不開，<strong>原來「出軌」這件事，無論哪個世紀都可能存在</strong>。百合花打趣笑說：「掠猴就是抓偷吃的意思，也是每個人感情裡最不想遇到的事情，我們用幽默手法與旋律，窺探愛情裡各種面貌。」百合花特別也為〈掠猴之歌〉打造一款線上互動遊戲「掠猴之遊戲Monkey-Catching Game」，邀請樂迷替苦主「金蕉小姐」搜集猴子老公出軌的證據！</p><p>百合花從首張大碟囊括金音獎最佳搖滾專輯、最佳新人，第二張作品贏得去年金曲獎最佳台語專輯殊榮，奠定當今獨立樂壇地位，樂團不斷嘗試以傳統樂器混搭流行旋律，透過幽默與嘲諷歌詞拼貼，企圖打造千禧世代的「<strong>後台灣新歌謠</strong>」，也表現出略帶異色卻又充滿社會百態風情的生命之作。其中描繪當代成人複雜愛情觀的〈掠猴之歌〉，名符其實是一首「<strong>抓姦歌</strong>」，樂團比擬歌曲如同奧斯卡大導演「<strong><a target="_blank" rel="noopener noreferrer nofollow" href="https://zh.wikipedia.org/zh-tw/%E7%A7%91%E6%81%A9%E5%85%84%E5%BC%9F">柯恩兄弟</a></strong>」的瀟灑態度，卻又加入金馬獎導演黃信堯擅於小人物縮影觀察，濃縮成一首現代社會面對愛情出軌的直球對決。</p><hr><p><strong>MV上演抓姦千年穿越劇 警世寓言大讚宛如百合花式「戲說台灣」！</strong></p><p>也因為〈掠猴之歌〉散發一股獨特電影感氣息，百合花決定讓MV呈現樂團從未有過的影像風格，特別邀請曾入圍金曲最佳MV的導演林毛執導，攜手<a target="_blank" rel="noopener noreferrer nofollow" href="https://www.instagram.com/sidandgeri/">藝術家sid and geri</a>合力操刀，把感情裡最不想觸碰的「抓猴」議題，也能變成一場又鏗又充滿警世意味寓言遊戲。<br>MV把場景拉到西元前3000年，在千年世紀之前，同樣也有出軌問題，女主角找來專業徵信雙人組做一場交易，藉由奇異魔法與幻術，企圖找出另一半偷吃證據，導演特別跟現代時空交錯，彷彿上演一場前世今生的「抓姦輪迴」大戲，他也表示：「<strong>過去華語歌曲常以哀怨節奏描繪外遇、偷吃等感情失敗關係，但百合花反其道而行，改以自嘲幽默手法，讓抓姦不再只是一場社會悲劇。」樂團成員看到MV成品後大讚導演瘋狂創意，繽紛視覺加上穿越劇方式，笑稱「我們也有屬於百合花式風格的《細說台灣》了！</strong>」</p><hr><p><strong>推出線上互動「掠猴之遊戲」 邀請樂迷一起上網協尋偷吃出軌證據</strong><br><strong>百合花宣布啟動海外巡演計畫！ 四月底前進星馬演出</strong></p><figure class="image"><img src="https://assets.matters.news/embed/c7a25d10-4820-42b3-8ec1-c56fbf8b75d7.jpeg"><figcaption></figcaption></figure><p><strong><a target="_blank" rel="noopener noreferrer nofollow" href="https://liliumtaiwan.itch.io/monkey">推出線上互動「掠猴之遊戲」 邀請樂迷一起上網協尋偷吃出軌證據</a></strong></p><p>〈掠猴之歌〉MV還埋藏樂團先前推出的線上互動遊戲「<a target="_blank" rel="noopener noreferrer nofollow" href="https://liliumtaiwan.itch.io/monkey">掠猴之遊戲Monkey-Catching Game</a>」彩蛋，邀請樂迷一邊看MV也能從中挖掘，<strong>主唱奕碩表示：「〈掠猴之歌〉的編曲散發一股電視遊樂器復古感，所以我們打造一款8bit風格小遊戲，還讓三位團員化身三種樂器人物，包含月琴、電貝斯、北管通鼓，陪伴玩家一起闖關。」</strong>遊戲融合台灣既有街景文化特色，出現手搖杯店、小吃攤等，讓樂迷扮起偵探，協助苦主「金蕉小姐」搜集猴子老公出軌的證據。隨著MV與遊戲一併公開，<strong>百合花也宣布將啟動「2023 變猴弄」海外巡迴</strong>，將在4月底前進新加坡、馬來西亞，將台灣獨特音樂特色推廣到世界各地。</p><p><strong>百合花宣布啟動海外巡演計畫！ 四月底前進星馬演出</strong></p><p></p>'
+      '<p>金曲樂團百合花打造新世代抓姦神曲〈掠猴之歌〉(照片：Taiwan Beats提供)</p><hr><p><strong>金曲樂團百合花看透現代成人愛情關係 打造新世代抓姦神曲〈掠猴之歌〉</strong></p><p>榮獲<a target="_blank" rel="noopener noreferrer nofollow" href="https://money.udn.com/money/story/7307/6432158">金曲獎最佳台語專輯</a>的百合花樂團，近期宣布啟動海外演出計畫，即將前進新加坡、馬來西亞演出，然而許久未跟台灣樂迷互動的他們，也特別推出全新〈<a target="_blank" rel="noopener noreferrer nofollow" href="https://www.youtube.com/watch?v=u7AqYDBrjBI">掠猴之歌</a>〉MV，搞怪奇幻色彩，宛如前世時空記憶，卻擁有千年不變的相同錯綜複雜感情議題，糾結惱人情緒，即便經過多次輪迴依舊解不開，<strong>原來「出軌」這件事，無論哪個世紀都可能存在</strong>。百合花打趣笑說：「掠猴就是抓偷吃的意思，也是每個人感情裡最不想遇到的事情，我們用幽默手法與旋律，窺探愛情裡各種面貌。」百合花特別也為〈掠猴之歌〉打造一款線上互動遊戲「掠猴之遊戲Monkey-Catching Game」，邀請樂迷替苦主「金蕉小姐」搜集猴子老公出軌的證據！</p><p>百合花從首張大碟囊括金音獎最佳搖滾專輯、最佳新人，第二張作品贏得去年金曲獎最佳台語專輯殊榮，奠定當今獨立樂壇地位，樂團不斷嘗試以傳統樂器混搭流行旋律，透過幽默與嘲諷歌詞拼貼，企圖打造千禧世代的「<strong>後台灣新歌謠</strong>」，也表現出略帶異色卻又充滿社會百態風情的生命之作。其中描繪當代成人複雜愛情觀的〈掠猴之歌〉，名符其實是一首「<strong>抓姦歌</strong>」，樂團比擬歌曲如同奧斯卡大導演「<strong><a target="_blank" rel="noopener noreferrer nofollow" href="https://zh.wikipedia.org/zh-tw/%E7%A7%91%E6%81%A9%E5%85%84%E5%BC%9F">柯恩兄弟</a></strong>」的瀟灑態度，卻又加入金馬獎導演黃信堯擅於小人物縮影觀察，濃縮成一首現代社會面對愛情出軌的直球對決。</p><hr><p><strong>MV上演抓姦千年穿越劇 警世寓言大讚宛如百合花式「戲說台灣」！</strong></p><p>也因為〈掠猴之歌〉散發一股獨特電影感氣息，百合花決定讓MV呈現樂團從未有過的影像風格，特別邀請曾入圍金曲最佳MV的導演林毛執導，攜手<a target="_blank" rel="noopener noreferrer nofollow" href="https://www.instagram.com/sidandgeri/">藝術家sid and geri</a>合力操刀，把感情裡最不想觸碰的「抓猴」議題，也能變成一場又鏗又充滿警世意味寓言遊戲。<br class="smart">MV把場景拉到西元前3000年，在千年世紀之前，同樣也有出軌問題，女主角找來專業徵信雙人組做一場交易，藉由奇異魔法與幻術，企圖找出另一半偷吃證據，導演特別跟現代時空交錯，彷彿上演一場前世今生的「抓姦輪迴」大戲，他也表示：「<strong>過去華語歌曲常以哀怨節奏描繪外遇、偷吃等感情失敗關係，但百合花反其道而行，改以自嘲幽默手法，讓抓姦不再只是一場社會悲劇。」樂團成員看到MV成品後大讚導演瘋狂創意，繽紛視覺加上穿越劇方式，笑稱「我們也有屬於百合花式風格的《細說台灣》了！</strong>」</p><hr><p><strong>推出線上互動「掠猴之遊戲」 邀請樂迷一起上網協尋偷吃出軌證據</strong><br class="smart"><strong>百合花宣布啟動海外巡演計畫！ 四月底前進星馬演出</strong></p><figure class="image"><img src="https://assets.matters.news/embed/c7a25d10-4820-42b3-8ec1-c56fbf8b75d7.jpeg"><figcaption></figcaption></figure><p><strong><a target="_blank" rel="noopener noreferrer nofollow" href="https://liliumtaiwan.itch.io/monkey">推出線上互動「掠猴之遊戲」 邀請樂迷一起上網協尋偷吃出軌證據</a></strong></p><p>〈掠猴之歌〉MV還埋藏樂團先前推出的線上互動遊戲「<a target="_blank" rel="noopener noreferrer nofollow" href="https://liliumtaiwan.itch.io/monkey">掠猴之遊戲Monkey-Catching Game</a>」彩蛋，邀請樂迷一邊看MV也能從中挖掘，<strong>主唱奕碩表示：「〈掠猴之歌〉的編曲散發一股電視遊樂器復古感，所以我們打造一款8bit風格小遊戲，還讓三位團員化身三種樂器人物，包含月琴、電貝斯、北管通鼓，陪伴玩家一起闖關。」</strong>遊戲融合台灣既有街景文化特色，出現手搖杯店、小吃攤等，讓樂迷扮起偵探，協助苦主「金蕉小姐」搜集猴子老公出軌的證據。隨著MV與遊戲一併公開，<strong>百合花也宣布將啟動「2023 變猴弄」海外巡迴</strong>，將在4月底前進新加坡、馬來西亞，將台灣獨特音樂特色推廣到世界各地。</p><p><strong>百合花宣布啟動海外巡演計畫！ 四月底前進星馬演出</strong></p><p></p>'
     )
   })
 })

src/transformers/options.ts

@@ -96,6 +96,7 @@ export const rehypeSanitizeOptions:
   attributes: {
     ...defaultSchema.attributes,
     a: ['href', 'ref', 'target', 'className', 'data*'],
+    br: ['className'],
     img: ['src', 'srcSet', 'data*'],
     audio: ['controls', 'data*', ['preload', 'metadata']],
     source: ['src', 'type', 'data*'],