feat: Import relevant slateTable settings for HTML ui-tables (#35)

* feat: Import relevant slateTable settings for HTML ui-tables * refactor: compress unneccessary two lines into single one Co-authored-by: David Glick <david@glicksoftware.com> --------- Co-authored-by: David Glick <david@glicksoftware.com>
plone · Sep 11, 2023 · 00eaea4 · 00eaea4
1 parent 931187e
commit 00eaea4
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 0 deletions.
diff --git a/src/converters/slate.js b/src/converters/slate.js
@@ -304,6 +304,22 @@ const slateTableBlock = (elem) => {
     }
   }
   block.table = createTable(rows);
+
+  const classes = elem.className.split(' ');
+  if (
+    classes.length > 0 &&
+    classes.includes('ui') &&
+    classes.includes('table')
+  ) {
+    // if table element has the classes "ui" and "table" we assume
+    // further settings-relevant classes were set (or not set) explicitly,
+    // so we set settings based on those classes, instead of using the defaults
+    const toCheck = ['basic', 'celled', 'compact', 'fixed', 'striped'];
+    for (const c of toCheck) {
+      block.table[c] = classes.includes(c);
+    }
+  }
+
   return block;
 };
 

diff --git a/src/converters/slate.test.js b/src/converters/slate.test.js
@@ -885,3 +885,45 @@ describe('slateTableBlock parsing table with line break', () => {
     expect(value['children'][0]['text']).toEqual('\n');
   });
 });
+
+describe('slateTableBlock parsing ui table with settings classes', () => {
+  const elem = elementFromString(
+    '<table class="ui celled fixed striped very basic compact table"><tbody class=""><tr class=""><th class=""><p>Vorname</p></th><th class=""><p>Nachname</p></th></tr><tr class=""><td class=""><p>Jerry</p></td><td class=""><p>Smith</p></td></tr><tr class=""><td class=""><p>Morty</p></td><td class=""><p>Smith</p></td></tr><tr class=""><td class=""><p>Rick</p></td><td class=""><p>Sanchez</p></td></tr></tbody></table>',
+  );
+  test('returns valid result with the correct settings', () => {
+    const block = slateTableBlock(elem);
+    expect(block['@type']).toEqual('slateTable');
+    const table = block['table'];
+    const rows = table['rows'];
+    expect(rows).toHaveLength(4);
+    // we do not expect the default settings
+    expect(table.basic).toBeTruthy();
+    expect(table.celled).toBeTruthy();
+    expect(table.compact).toBeTruthy();
+    expect(table.fixed).toBeTruthy();
+    expect(table.striped).toBeTruthy();
+    // should not be affected anyways
+    expect(table.inverted).toBeFalsy();
+  });
+});
+
+describe('slateTableBlock parsing non-ui table with settings classes', () => {
+  const elem = elementFromString(
+    '<table class="celled fixed striped very basic compact"><tbody class=""><tr class=""><th class=""><p>Vorname</p></th><th class=""><p>Nachname</p></th></tr><tr class=""><td class=""><p>Jerry</p></td><td class=""><p>Smith</p></td></tr><tr class=""><td class=""><p>Morty</p></td><td class=""><p>Smith</p></td></tr><tr class=""><td class=""><p>Rick</p></td><td class=""><p>Sanchez</p></td></tr></tbody></table>',
+  );
+  test('returns valid result with the correct settings', () => {
+    const block = slateTableBlock(elem);
+    expect(block['@type']).toEqual('slateTable');
+    const table = block['table'];
+    const rows = table['rows'];
+    expect(rows).toHaveLength(4);
+    // we expect the default settings
+    expect(table.basic).toBeFalsy();
+    expect(table.celled).toBeTruthy();
+    expect(table.compact).toBeFalsy();
+    expect(table.fixed).toBeTruthy();
+    expect(table.striped).toBeFalsy();
+    // should not be affected anyways
+    expect(table.inverted).toBeFalsy();
+  });
+});