fix(table): add style to text when adding background to cell

lakejs · Dec 14, 2024 · 45b609a · 45b609a
1 parent 468373d
commit 45b609a
Show file tree

Hide file tree

Showing 3 changed files with 126 additions and 2 deletions.
diff --git a/src/icons/index.ts b/src/icons/index.ts
@@ -5,6 +5,8 @@
 // - subscript.svg
 // - highlight.svg
 // - highlight-accent.svg
+// - background-color.svg
+// - background-color-accent.svg
 // - open.svg
 // - table-merge.svg
 // - table-split.svg

diff --git a/src/plugins/table/index.ts b/src/plugins/table/index.ts
@@ -110,7 +110,6 @@ function getFloatingToolbarItems(editor: Editor, tableNode: Nodes): ToolbarItem[
       menuItems: colorMenuItems,
       menuWidth: '296px',
       onSelect: (_, value) => {
-        editor.command.execute('highlight', value);
         const range = editor.selection.range;
         const cellNode = range.startNode.closest('td');
         cellNode.css('background-color', value);

diff --git a/tests/plugins/table/index.test.ts b/tests/plugins/table/index.test.ts
@@ -1,4 +1,5 @@
-import { testPlugin } from '../../utils';
+import { query } from 'lakelib/utils/query';
+import { testPlugin, click } from '../../utils';
 
 describe('plugins / table / index', () => {
 
@@ -34,4 +35,126 @@ describe('plugins / table / index', () => {
     );
   });
 
+  it('should fit table to page width', () => {
+    const content = `
+    <table>
+      <tr>
+        <td><p>a1</p></td>
+        <td><p>b1</p></td>
+      </tr>
+      <tr>
+        <td><p><focus />a2</p></td>
+        <td><p>b2</p></td>
+      </tr>
+    </table>
+    `;
+    const output = `
+    <table style="width: 600px;">
+      <tr>
+        <td><p>a1</p></td>
+        <td><p>b1</p></td>
+      </tr>
+      <tr>
+        <td><p><focus />a2</p></td>
+        <td><p>b2</p></td>
+      </tr>
+    </table>
+    `;
+    testPlugin(
+      content,
+      output,
+      editor => {
+        editor.event.emit('statechange');
+        editor.container.css({
+          border: '0',
+          padding: '0',
+          width: '602px',
+        });
+        click(query(document.body).find('.lake-floating-toolbar button[name="expand"]'));
+      },
+    );
+  });
+
+  it('should cancel fitting table to page width', () => {
+    const content = `
+    <table style="width: 600px;">
+      <tr>
+        <td><p>a1</p></td>
+        <td><p>b1</p></td>
+      </tr>
+      <tr>
+        <td><p><focus />a2</p></td>
+        <td><p>b2</p></td>
+      </tr>
+    </table>
+    `;
+    const output = `
+    <table>
+      <tr>
+        <td><p>a1</p></td>
+        <td><p>b1</p></td>
+      </tr>
+      <tr>
+        <td><p><focus />a2</p></td>
+        <td><p>b2</p></td>
+      </tr>
+    </table>
+    `;
+    testPlugin(
+      content,
+      output,
+      editor => {
+        editor.event.emit('statechange');
+        editor.container.css({
+          border: '0',
+          padding: '0',
+          width: '602px',
+        });
+        click(query(document.body).find('.lake-floating-toolbar button[name="expand"]'));
+      },
+    );
+  });
+
+  it('should set background color', () => {
+    const content = `
+    <table>
+      <tr>
+        <td><p>a1</p></td>
+        <td><p>b1</p></td>
+      </tr>
+      <tr>
+        <td><p><focus />a2</p></td>
+        <td><p>b2</p></td>
+      </tr>
+    </table>
+    `;
+    const output = `
+    <table>
+      <tr>
+        <td><p>a1</p></td>
+        <td><p>b1</p></td>
+      </tr>
+      <tr>
+        <td style="background-color: #fafafa;"><p><focus />a2</p></td>
+        <td><p>b2</p></td>
+      </tr>
+    </table>
+    `;
+    testPlugin(
+      content,
+      output,
+      editor => {
+        editor.event.emit('statechange');
+        editor.container.css({
+          border: '0',
+          padding: '0',
+          width: '602px',
+        });
+        const dropdownNode = query(document.body).find('.lake-floating-toolbar button[name="backgroundColor"]').closest('.lake-dropdown');
+        click(dropdownNode.find('.lake-dropdown-down-icon'));
+        click(dropdownNode.find('li[value="#fafafa"]'));
+      },
+    );
+  });
+
 });