From 68c7eb5e4e7aed0a21932efb41db6da20483d3c0 Mon Sep 17 00:00:00 2001
From: whiteformed <whiteformed@gmail.com>
Date: Fri, 31 Jan 2025 15:26:27 +0300
Subject: [PATCH 1/2] refactor(nodes): add yfm-nodes containers

---
 src/transform/plugins/notes/index.ts        |  17 ++
 src/transform/plugins/table/index.ts        |  17 ++
 test/__snapshots__/notes.test.ts.snap       | 176 +++++++++++---------
 test/table/__snapshots__/table.test.ts.snap |  58 +++----
 test/table/table.test.ts                    | 164 ++++++++++++------
 test/utils.ts                               |   3 +
 6 files changed, 276 insertions(+), 159 deletions(-)

diff --git a/src/transform/plugins/notes/index.ts b/src/transform/plugins/notes/index.ts
index 12540b6b..02d0ba71 100644
--- a/src/transform/plugins/notes/index.ts
+++ b/src/transform/plugins/notes/index.ts
@@ -138,6 +138,23 @@ const index: MarkdownItPluginCb = (md, {lang, notesAutotitle, path: optPath, log
     } catch (e) {
         md.core.ruler.push('notes', plugin);
     }
+
+    md.renderer.rules['yfm_note_open'] = (tokens, idx, _opts, _env, self) => {
+        const token = tokens[idx];
+
+        const containerClassName = 'yfm-note-container';
+
+        return [
+            `<div class="${containerClassName}">`,
+            `<${token.tag}${self.renderAttrs(token)}>`,
+        ].join('\n');
+    };
+
+    md.renderer.rules['yfm_note_close'] = (tokens, idx) => {
+        const token = tokens[idx];
+
+        return [`</${token.tag}>`, '</div>'].join('\n');
+    };
 };
 
 export = index;
diff --git a/src/transform/plugins/table/index.ts b/src/transform/plugins/table/index.ts
index 1e00a94e..c9d758fb 100644
--- a/src/transform/plugins/table/index.ts
+++ b/src/transform/plugins/table/index.ts
@@ -500,6 +500,23 @@ const yfmTable: MarkdownItPluginCb = (md) => {
             return true;
         },
     );
+
+    md.renderer.rules['yfm_table_open'] = (tokens, idx, _opts, _env, self) => {
+        const token = tokens[idx];
+
+        const containerClassName = 'yfm-table-container';
+
+        return [
+            `<div class="${containerClassName}">`,
+            `<${token.tag}${self.renderAttrs(token)}>\n`,
+        ].join('\n');
+    };
+
+    md.renderer.rules['yfm_table_close'] = (tokens, idx) => {
+        const token = tokens[idx];
+
+        return [`</${token.tag}>`, '</div>\n'].join('\n');
+    };
 };
 
 export = yfmTable;
diff --git a/test/__snapshots__/notes.test.ts.snap b/test/__snapshots__/notes.test.ts.snap
index 59a3f7fa..9012c783 100644
--- a/test/__snapshots__/notes.test.ts.snap
+++ b/test/__snapshots__/notes.test.ts.snap
@@ -1,26 +1,30 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Alerts should render nested notes 1`] = `
-<div class="yfm-note yfm-accent-info"
-     note-type="info"
->
-  <p class="yfm-note-title">
-    Outer title
-  </p>
-  <div class="yfm-note-content">
-    <p>
-      Outer content
+<div class="yfm-note-container">
+  <div class="yfm-note yfm-accent-info"
+       note-type="info"
+  >
+    <p class="yfm-note-title">
+      Outer title
     </p>
-    <div class="yfm-note yfm-accent-info"
-         note-type="info"
-    >
-      <p class="yfm-note-title">
-        Inner title
+    <div class="yfm-note-content">
+      <p>
+        Outer content
       </p>
-      <div class="yfm-note-content">
-        <p>
-          Inner content
-        </p>
+      <div class="yfm-note-container">
+        <div class="yfm-note yfm-accent-info"
+             note-type="info"
+        >
+          <p class="yfm-note-title">
+            Inner title
+          </p>
+          <div class="yfm-note-content">
+            <p>
+              Inner content
+            </p>
+          </div>
+        </div>
       </div>
     </div>
   </div>
@@ -28,99 +32,113 @@ exports[`Alerts should render nested notes 1`] = `
 `;
 
 exports[`Alerts should render note with empty string title 1`] = `
-<div class="yfm-note yfm-accent-info"
-     note-type="info"
->
-  <div class="yfm-note-content">
-    <p>
-      Note content with empty string title
-    </p>
+<div class="yfm-note-container">
+  <div class="yfm-note yfm-accent-info"
+       note-type="info"
+  >
+    <div class="yfm-note-content">
+      <p>
+        Note content with empty string title
+      </p>
+    </div>
   </div>
 </div>
 `;
 
 exports[`Alerts should render note without title (notesAutotitle: false) 1`] = `
-<div class="yfm-note yfm-accent-info"
-     note-type="info"
->
-  <div class="yfm-note-content">
-    <p>
-      Note content without title
-    </p>
+<div class="yfm-note-container">
+  <div class="yfm-note yfm-accent-info"
+       note-type="info"
+  >
+    <div class="yfm-note-content">
+      <p>
+        Note content without title
+      </p>
+    </div>
   </div>
 </div>
 `;
 
 exports[`Alerts should render note without title (notesAutotitle: true) 1`] = `
-<div class="yfm-note yfm-accent-info"
-     note-type="info"
->
-  <p class="yfm-note-title">
-    Примечание
-  </p>
-  <div class="yfm-note-content">
-    <p>
-      Note content without title
+<div class="yfm-note-container">
+  <div class="yfm-note yfm-accent-info"
+       note-type="info"
+  >
+    <p class="yfm-note-title">
+      Примечание
     </p>
+    <div class="yfm-note-content">
+      <p>
+        Note content without title
+      </p>
+    </div>
   </div>
 </div>
 `;
 
 exports[`Alerts should render siblings notes 1`] = `
-<div class="yfm-note yfm-accent-info"
-     note-type="info"
->
-  <p class="yfm-note-title">
-    Note title 1
-  </p>
-  <div class="yfm-note-content">
-    <p>
-      Note content 1
+<div class="yfm-note-container">
+  <div class="yfm-note yfm-accent-info"
+       note-type="info"
+  >
+    <p class="yfm-note-title">
+      Note title 1
     </p>
+    <div class="yfm-note-content">
+      <p>
+        Note content 1
+      </p>
+    </div>
   </div>
 </div>
-<div class="yfm-note yfm-accent-info"
-     note-type="info"
->
-  <p class="yfm-note-title">
-    Note title 2
-  </p>
-  <div class="yfm-note-content">
-    <p>
-      Note content 2
+<div class="yfm-note-container">
+  <div class="yfm-note yfm-accent-info"
+       note-type="info"
+  >
+    <p class="yfm-note-title">
+      Note title 2
     </p>
+    <div class="yfm-note-content">
+      <p>
+        Note content 2
+      </p>
+    </div>
   </div>
 </div>
 `;
 
 exports[`Alerts should render simple note 1`] = `
-<div class="yfm-note yfm-accent-info"
-     note-type="info"
->
-  <p class="yfm-note-title">
-    Note title
-  </p>
-  <div class="yfm-note-content">
-    <p>
-      Note content
+<div class="yfm-note-container">
+  <div class="yfm-note yfm-accent-info"
+       note-type="info"
+  >
+    <p class="yfm-note-title">
+      Note title
     </p>
+    <div class="yfm-note-content">
+      <p>
+        Note content
+      </p>
+    </div>
   </div>
 </div>
 `;
 
 exports[`Alerts should render title with format 1`] = `
-<div class="yfm-note yfm-accent-info"
-     note-type="info"
->
-  <p class="yfm-note-title">
-    <em>
-      Italic note title
-    </em>
-  </p>
-  <div class="yfm-note-content">
-    <p>
-      Content
+<div class="yfm-note-container">
+  <div class="yfm-note yfm-accent-info"
+       note-type="info"
+  >
+    <p class="yfm-note-title">
+      <em>
+        Italic note title
+      </em>
     </p>
+    <div class="yfm-note-content">
+      <p>
+        Content
+      </p>
+    </div>
   </div>
 </div>
 `;
diff --git a/test/table/__snapshots__/table.test.ts.snap b/test/table/__snapshots__/table.test.ts.snap
index 92b15cf5..d321d9a9 100644
--- a/test/table/__snapshots__/table.test.ts.snap
+++ b/test/table/__snapshots__/table.test.ts.snap
@@ -1,32 +1,34 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Table plugin parses table with liquid variables inside 1`] = `
-<table>
-  <tbody>
-    <tr>
-      <td>
-        <p>
-          {{variable | length}} column 1, row 1
-        </p>
-      </td>
-      <td>
-        <p>
-          Cell in column 2, row 1
-        </p>
-      </td>
-    </tr>
-    <tr>
-      <td>
-        <p>
-          Cell in column 1, row 2
-        </p>
-      </td>
-      <td>
-        <p>
-          Cell in column 2, row 2
-        </p>
-      </td>
-    </tr>
-  </tbody>
-</table>
+<div class="yfm-table-container">
+  <table>
+    <tbody>
+      <tr>
+        <td>
+          <p>
+            {{variable | length}} column 1, row 1
+          </p>
+        </td>
+        <td>
+          <p>
+            Cell in column 2, row 1
+          </p>
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <p>
+            Cell in column 1, row 2
+          </p>
+        </td>
+        <td>
+          <p>
+            Cell in column 2, row 2
+          </p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
 `;
diff --git a/test/table/table.test.ts b/test/table/table.test.ts
index c09901b6..332929f2 100644
--- a/test/table/table.test.ts
+++ b/test/table/table.test.ts
@@ -14,7 +14,8 @@ const transformYfm = (text: string) => {
 describe('Table plugin', () => {
     it('should render simple inline table', () => {
         expect(transformYfm('#|\n||1|2||\n||3|4||\n|#')).toBe(
-            '<table>\n' +
+            '<div class="yfm-table-container">\n' +
+                '<table>\n' +
                 '<tbody>\n' +
                 '<tr>\n' +
                 '<td>\n' +
@@ -33,7 +34,8 @@ describe('Table plugin', () => {
                 '</td>\n' +
                 '</tr>\n' +
                 '</tbody>\n' +
-                '</table>\n',
+                '</table>\n' +
+                '</div>\n',
         );
     });
     it('should render simple table', () => {
@@ -49,7 +51,8 @@ describe('Table plugin', () => {
                     '|#',
             ),
         ).toBe(
-            '<table>\n' +
+            '<div class="yfm-table-container">\n' +
+                '<table>\n' +
                 '<tbody>\n' +
                 '<tr>\n' +
                 '<td>\n' +
@@ -76,7 +79,8 @@ describe('Table plugin', () => {
                 '</td>\n' +
                 '</tr>\n' +
                 '</tbody>\n' +
-                '</table>\n',
+                '</table>\n' +
+                '</div>\n',
         );
     });
     it('should render simple table with attrs', () => {
@@ -92,7 +96,8 @@ describe('Table plugin', () => {
                     '|# {.test .name #id data-diplodoc-large-table data-wide-preview="true"}',
             ),
         ).toBe(
-            '<table class="test name" id="id" data-wide-preview="true" data-diplodoc-large-table="true">\n' +
+            '<div class="yfm-table-container">\n' +
+                '<table class="test name" id="id" data-wide-preview="true" data-diplodoc-large-table="true">\n' +
                 '<tbody>\n' +
                 '<tr>\n' +
                 '<td>\n' +
@@ -119,7 +124,8 @@ describe('Table plugin', () => {
                 '</td>\n' +
                 '</tr>\n' +
                 '</tbody>\n' +
-                '</table>\n',
+                '</table>\n' +
+                '</div>\n',
         );
     });
     it('should render table between paragraphs', () => {
@@ -138,6 +144,7 @@ describe('Table plugin', () => {
             ),
         ).toBe(
             '<p>Text</p>\n' +
+                '<div class="yfm-table-container">\n' +
                 '<table>\n' +
                 '<tbody>\n' +
                 '<tr>\n' +
@@ -158,6 +165,7 @@ describe('Table plugin', () => {
                 '</tr>\n' +
                 '</tbody>\n' +
                 '</table>\n' +
+                '</div>\n' +
                 '<p>Text</p>\n',
         );
     });
@@ -174,7 +182,8 @@ describe('Table plugin', () => {
                     '|#',
             ),
         ).toBe(
-            '<table>\n' +
+            '<div class="yfm-table-container">\n' +
+                '<table>\n' +
                 '<tbody>\n' +
                 '<tr>\n' +
                 '<td>\n' +
@@ -201,7 +210,8 @@ describe('Table plugin', () => {
                 '</td>\n' +
                 '</tr>\n' +
                 '</tbody>\n' +
-                '</table>\n',
+                '</table>\n' +
+                '</div>\n',
         );
     });
     it('should render table with block elements', () => {
@@ -227,7 +237,8 @@ describe('Table plugin', () => {
                     '|#\n',
             ),
         ).toBe(
-            '<table>\n' +
+            '<div class="yfm-table-container">\n' +
+                '<table>\n' +
                 '<tbody>\n' +
                 '<tr>\n' +
                 '<td>\n' +
@@ -269,7 +280,8 @@ describe('Table plugin', () => {
                 '</td>\n' +
                 '</tr>\n' +
                 '</tbody>\n' +
-                '</table>\n',
+                '</table>\n' +
+                '</div>\n',
         );
     });
     it('should render two tables', () => {
@@ -290,7 +302,8 @@ describe('Table plugin', () => {
                     '|#',
             ),
         ).toBe(
-            '<table>\n' +
+            '<div class="yfm-table-container">\n' +
+                '<table>\n' +
                 '<tbody>\n' +
                 '<tr>\n' +
                 '<td>\n' +
@@ -310,6 +323,8 @@ describe('Table plugin', () => {
                 '</tr>\n' +
                 '</tbody>\n' +
                 '</table>\n' +
+                '</div>\n' +
+                '<div class="yfm-table-container">\n' +
                 '<table>\n' +
                 '<tbody>\n' +
                 '<tr>\n' +
@@ -329,7 +344,8 @@ describe('Table plugin', () => {
                 '</td>\n' +
                 '</tr>\n' +
                 '</tbody>\n' +
-                '</table>\n',
+                '</table>\n' +
+                '</div>\n',
         );
     });
     it('should not render table inside code', () => {
@@ -352,7 +368,8 @@ describe('Table plugin', () => {
                     '|#',
             ),
         ).toBe(
-            '<table>\n' +
+            '<div class="yfm-table-container">\n' +
+                '<table>\n' +
                 '<tbody>\n' +
                 '<tr>\n' +
                 '<td>\n' +
@@ -378,7 +395,8 @@ describe('Table plugin', () => {
                 '</td>\n' +
                 '</tr>\n' +
                 '</tbody>\n' +
-                '</table>\n',
+                '</table>\n' +
+                '</div>\n',
         );
     });
     it('should not render table without close token', () => {
@@ -466,7 +484,8 @@ describe('Table plugin', () => {
                     '|#',
             ),
         ).toBe(
-            '<table>\n' +
+            '<div class="yfm-table-container">\n' +
+                '<table>\n' +
                 '<tbody>\n' +
                 '<tr>\n' +
                 '<td>\n' +
@@ -474,6 +493,7 @@ describe('Table plugin', () => {
                 '</td>\n' +
                 '<td>\n' +
                 '<p>test</p>\n' +
+                '<div class="yfm-table-container">\n' +
                 '<table>\n' +
                 '<tbody>\n' +
                 '<tr>\n' +
@@ -494,6 +514,7 @@ describe('Table plugin', () => {
                 '</tr>\n' +
                 '</tbody>\n' +
                 '</table>\n' +
+                '</div>\n' +
                 '<p>test</p>\n' +
                 '</td>\n' +
                 '</tr>\n' +
@@ -506,7 +527,8 @@ describe('Table plugin', () => {
                 '</td>\n' +
                 '</tr>\n' +
                 '</tbody>\n' +
-                '</table>\n',
+                '</table>\n' +
+                '</div>\n',
         );
     });
     it('should render table with spaces after new line', () => {
@@ -520,7 +542,8 @@ describe('Table plugin', () => {
                     '    |#',
             ),
         ).toBe(
-            '<table>\n' +
+            '<div class="yfm-table-container">\n' +
+                '<table>\n' +
                 '<tbody>\n' +
                 '<tr>\n' +
                 '<td>\n' +
@@ -539,7 +562,8 @@ describe('Table plugin', () => {
                 '</td>\n' +
                 '</tr>\n' +
                 '</tbody>\n' +
-                '</table>\n',
+                '</table>\n' +
+                '</div>\n',
         );
     });
     it('should add empty cells', () => {
@@ -556,7 +580,8 @@ describe('Table plugin', () => {
                     '|#',
             ),
         ).toBe(
-            '<table>\n' +
+            '<div class="yfm-table-container">\n' +
+                '<table>\n' +
                 '<tbody>\n' +
                 '<tr>\n' +
                 '<td>\n' +
@@ -588,7 +613,8 @@ describe('Table plugin', () => {
                 '</td>\n' +
                 '</tr>\n' +
                 '</tbody>\n' +
-                '</table>\n',
+                '</table>\n' +
+                '</div>\n',
         );
     });
     it('should render table inside quote on each line', () => {
@@ -605,6 +631,7 @@ describe('Table plugin', () => {
             ),
         ).toBe(
             '<blockquote>\n' +
+                '<div class="yfm-table-container">\n' +
                 '<table>\n' +
                 '<tbody>\n' +
                 '<tr>\n' +
@@ -633,12 +660,14 @@ describe('Table plugin', () => {
                 '</tr>\n' +
                 '</tbody>\n' +
                 '</table>\n' +
+                '</div>\n' +
                 '</blockquote>\n',
         );
     });
     it('should correct render escaped cells', () => {
         expect(transformYfm('#|\n||1 \\| 1.1|2||\n||3|4||\n|#')).toBe(
-            '<table>\n' +
+            '<div class="yfm-table-container">\n' +
+                '<table>\n' +
                 '<tbody>\n' +
                 '<tr>\n' +
                 '<td>\n' +
@@ -657,7 +686,8 @@ describe('Table plugin', () => {
                 '</td>\n' +
                 '</tr>\n' +
                 '</tbody>\n' +
-                '</table>\n',
+                '</table>\n' +
+                '</div>\n',
         );
     });
     it('should correct render escaped rows', () => {
@@ -669,7 +699,8 @@ describe('Table plugin', () => {
                     '|#',
             ),
         ).toBe(
-            '<table>\n' +
+            '<div class="yfm-table-container">\n' +
+                '<table>\n' +
                 '<tbody>\n' +
                 '<tr>\n' +
                 '<td>\n' +
@@ -688,7 +719,8 @@ describe('Table plugin', () => {
                 '</td>\n' +
                 '</tr>\n' +
                 '</tbody>\n' +
-                '</table>\n',
+                '</table>\n' +
+                '</div>\n',
         );
     });
 
@@ -715,7 +747,8 @@ describe('Table plugin', () => {
                         '|#',
                 ),
             ).toEqual(
-                '<table>\n' +
+                '<div class="yfm-table-container">\n' +
+                    '<table>\n' +
                     '<tbody>\n' +
                     '<tr>\n' +
                     '<td>\n' +
@@ -739,7 +772,8 @@ describe('Table plugin', () => {
                     '</td>\n' +
                     '</tr>\n' +
                     '</tbody>\n' +
-                    '</table>\n',
+                    '</table>\n' +
+                    '</div>\n',
             );
         });
 
@@ -753,7 +787,8 @@ describe('Table plugin', () => {
                         '|#',
                 ),
             ).toEqual(
-                '<table>\n' +
+                '<div class="yfm-table-container">\n' +
+                    '<table>\n' +
                     '<tbody>\n' +
                     '<tr>\n' +
                     '<td>\n' +
@@ -777,7 +812,8 @@ describe('Table plugin', () => {
                     '</td>\n' +
                     '</tr>\n' +
                     '</tbody>\n' +
-                    '</table>\n',
+                    '</table>\n' +
+                    '</div>\n',
             );
         });
 
@@ -793,7 +829,8 @@ describe('Table plugin', () => {
                         '|#',
                 ),
             ).toEqual(
-                '<table>\n' +
+                '<div class="yfm-table-container">\n' +
+                    '<table>\n' +
                     '<tbody>\n' +
                     '<tr>\n' +
                     '<td>\n' +
@@ -827,7 +864,8 @@ describe('Table plugin', () => {
                     '</td>\n' +
                     '</tr>\n' +
                     '</tbody>\n' +
-                    '</table>\n',
+                    '</table>\n' +
+                    '</div>\n',
             );
         });
 
@@ -843,7 +881,8 @@ describe('Table plugin', () => {
                         '|#',
                 ),
             ).toEqual(
-                '<table>\n' +
+                '<div class="yfm-table-container">\n' +
+                    '<table>\n' +
                     '<tbody>\n' +
                     '<tr>\n' +
                     '<td>\n' +
@@ -892,7 +931,8 @@ describe('Table plugin', () => {
                     '</td>\n' +
                     '</tr>\n' +
                     '</tbody>\n' +
-                    '</table>\n',
+                    '</table>\n' +
+                    '</div>\n',
             );
         });
     });
@@ -908,7 +948,8 @@ describe('Table plugin', () => {
                         '|#',
                 ),
             ).toEqual(
-                '<table>\n' +
+                '<div class="yfm-table-container">\n' +
+                    '<table>\n' +
                     '<tbody>\n' +
                     '<tr>\n' +
                     '<td>\n' +
@@ -932,7 +973,8 @@ describe('Table plugin', () => {
                     '</td>\n' +
                     '</tr>\n' +
                     '</tbody>\n' +
-                    '</table>\n',
+                    '</table>\n' +
+                    '</div>\n',
             );
         });
 
@@ -946,7 +988,8 @@ describe('Table plugin', () => {
                         '|#',
                 ),
             ).toEqual(
-                '<table>\n' +
+                '<div class="yfm-table-container">\n' +
+                    '<table>\n' +
                     '<tbody>\n' +
                     '<tr>\n' +
                     '<td>\n' +
@@ -970,7 +1013,8 @@ describe('Table plugin', () => {
                     '</td>\n' +
                     '</tr>\n' +
                     '</tbody>\n' +
-                    '</table>\n',
+                    '</table>\n' +
+                    '</div>\n',
             );
         });
 
@@ -984,7 +1028,8 @@ describe('Table plugin', () => {
                         '|#',
                 ),
             ).toEqual(
-                '<table>\n' +
+                '<div class="yfm-table-container">\n' +
+                    '<table>\n' +
                     '<tbody>\n' +
                     '<tr>\n' +
                     '<td>\n' +
@@ -1014,7 +1059,8 @@ describe('Table plugin', () => {
                     '</td>\n' +
                     '</tr>\n' +
                     '</tbody>\n' +
-                    '</table>\n',
+                    '</table>\n' +
+                    '</div>\n',
             );
         });
     });
@@ -1030,7 +1076,8 @@ describe('Table plugin', () => {
                         '|#',
                 ),
             ).toEqual(
-                '<table>\n' +
+                '<div class="yfm-table-container">\n' +
+                    '<table>\n' +
                     '<tbody>\n' +
                     '<tr>\n' +
                     '<td>\n' +
@@ -1057,7 +1104,8 @@ describe('Table plugin', () => {
                     '</td>\n' +
                     '</tr>\n' +
                     '</tbody>\n' +
-                    '</table>\n',
+                    '</table>\n' +
+                    '</div>\n',
             );
         });
 
@@ -1083,7 +1131,8 @@ describe('Table plugin', () => {
                         '|#',
                 ),
             ).toEqual(
-                '<table>\n' +
+                '<div class="yfm-table-container">\n' +
+                    '<table>\n' +
                     '<tbody>\n' +
                     '<tr>\n' +
                     '<td>\n' +
@@ -1119,7 +1168,8 @@ describe('Table plugin', () => {
                     '</td>\n' +
                     '</tr>\n' +
                     '</tbody>\n' +
-                    '</table>\n',
+                    '</table>\n' +
+                    '</div>\n',
             );
         });
 
@@ -1131,7 +1181,8 @@ describe('Table plugin', () => {
 || ^ | > | ^ ||
 |#`),
             ).toEqual(
-                '<table>\n' +
+                '<div class="yfm-table-container">\n' +
+                    '<table>\n' +
                     '<tbody>\n' +
                     '<tr>\n' +
                     '<td>\n' +
@@ -1154,7 +1205,8 @@ describe('Table plugin', () => {
                     '</tr>\n' +
                     '<tr></tr>\n' +
                     '</tbody>\n' +
-                    '</table>\n',
+                    '</table>\n' +
+                    '</div>\n',
             );
         });
     });
@@ -1166,7 +1218,8 @@ describe('Table plugin', () => {
 || \\> | \\^  ||
 |#`),
         ).toEqual(
-            '<table>\n' +
+            '<div class="yfm-table-container">\n' +
+                '<table>\n' +
                 '<tbody>\n' +
                 '<tr>\n' +
                 '<td>\n' +
@@ -1185,7 +1238,8 @@ describe('Table plugin', () => {
                 '</td>\n' +
                 '</tr>\n' +
                 '</tbody>\n' +
-                '</table>\n',
+                '</table>\n' +
+                '</div>\n',
         );
     });
 
@@ -1243,7 +1297,8 @@ describe('Table plugin', () => {
 || Text | Text {.cell-align-center} | > | More text ||
 |#`),
             ).toEqual(
-                '<table>\n' +
+                '<div class="yfm-table-container">\n' +
+                    '<table>\n' +
                     '<tbody>\n' +
                     '<tr>\n' +
                     '<td>\n' +
@@ -1271,7 +1326,8 @@ describe('Table plugin', () => {
                     '</td>\n' +
                     '</tr>\n' +
                     '</tbody>\n' +
-                    '</table>\n',
+                    '</table>\n' +
+                    '</div>\n',
             );
         });
 
@@ -1282,7 +1338,8 @@ describe('Table plugin', () => {
 || Text {.cell-align-center} | > ||
 |#`),
             ).toEqual(
-                '<table>\n' +
+                '<div class="yfm-table-container">\n' +
+                    '<table>\n' +
                     '<tbody>\n' +
                     '<tr>\n' +
                     '<td>\n' +
@@ -1298,7 +1355,8 @@ describe('Table plugin', () => {
                     '</td>\n' +
                     '</tr>\n' +
                     '</tbody>\n' +
-                    '</table>\n',
+                    '</table>\n' +
+                    '</div>\n',
             );
         });
     });
@@ -1335,7 +1393,8 @@ describe('table with includes', () => {
                     '|#',
             ),
         ).toEqual(
-            '<table>\n' +
+            '<div class="yfm-table-container">\n' +
+                '<table>\n' +
                 '<tbody>\n' +
                 '<tr>\n' +
                 '<td>\n' +
@@ -1354,7 +1413,8 @@ describe('table with includes', () => {
                 '</td>\n' +
                 '</tr>\n' +
                 '</tbody>\n' +
-                '</table>\n',
+                '</table>\n' +
+                '</div>\n',
         );
     });
 });
diff --git a/test/utils.ts b/test/utils.ts
index c3840cff..b56ba2b0 100644
--- a/test/utils.ts
+++ b/test/utils.ts
@@ -38,6 +38,9 @@ export function callPlugin<T extends {} = {}>(
                     cb(state),
             },
         },
+        renderer: {
+            rules: {},
+        },
     } as MarkdownIt;
 
     plugin(

From ee80794b9ebba5d99d955d3852bec2db08061c89 Mon Sep 17 00:00:00 2001
From: whiteformed <whiteformed@gmail.com>
Date: Fri, 28 Feb 2025 14:06:13 +0300
Subject: [PATCH 2/2] refactor(nodes): add nodes containers

---
 src/transform/plugins/code.ts        | 2 +-
 test/__snapshots__/term.test.ts.snap | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/transform/plugins/code.ts b/src/transform/plugins/code.ts
index 16c4e186..88515402 100644
--- a/src/transform/plugins/code.ts
+++ b/src/transform/plugins/code.ts
@@ -5,7 +5,7 @@ import {generateID} from './utils';
 
 const wrapInClipboard = (element: string | undefined, id: number) => {
     return `
-    <div class="yfm-clipboard">
+    <div class="code-block-container yfm-clipboard">
         ${element}
         <button class="yfm-clipboard-button" aria-label="Copy">
             <svg width="16" height="16" viewBox="0 0 24 24" class="yfm-clipboard-icon" data-animation="${id}">
diff --git a/test/__snapshots__/term.test.ts.snap b/test/__snapshots__/term.test.ts.snap
index 7597df1d..343d4149 100644
--- a/test/__snapshots__/term.test.ts.snap
+++ b/test/__snapshots__/term.test.ts.snap
@@ -20,7 +20,7 @@ exports[`Terms Should create term in code with definition template 1`] = `
 <h1>
   Web
 </h1>
-<div class="yfm-clipboard">
+<div class="code-block-container yfm-clipboard">
   <pre>
     <code class="hljs">
       <i class="yfm yfm-term_title"