Allow text-alignment and width props, passed via the style attribute

Author: zerolab

src/wagtail_tinytableblock/static/wagtail_tinytableblock/js/tiny-table-block.js

@@ -4,9 +4,15 @@ class TinyTableBlockDefinition extends window.wagtailStreamField.blocks.FieldBlo
     const block = super.render(placeholder, prefix, initialState, initialError);
 
     let plugins = "table autoresize";
-    let toolbar = "undo redo | tablerowheader tablecolheader tablemergecells tablesplitcells tablecellprops tablerowprops| tableinsertcolbefore tableinsertcolafter tableinsertrowbefore tableinsertrowafter | tabledeletecol tabledeleterow tabledelete";
+    let toolbar = "undo redo | tablerowheader tablecolheader tablemergecells tablesplitcells tablecellprops tablerowprops | tableinsertcolbefore tableinsertcolafter tableinsertrowbefore tableinsertrowafter | tabledeletecol tabledeleterow tabledelete";
     let contextmenu = "table";
-    let valid_elements = "br,table[border|width|height|align|summary],tr[align|valign],td[align|valign|width|colspan|rowspan],th[align|valign|width|colspan|rowspan|scope],thead,tbody";
+    let valid_elements = "br,table[border|width|height|align|summary|style],tr[align|valign|style],td[align|valign|width|colspan|rowspan|style],th[align|valign|width|colspan|rowspan|scope|style],thead,tbody";
+    const valid_styles = {
+        "th": "text-align,vertical-align,width",
+        "td": "text-align,vertical-align,width",
+        "tr": "text-align,width"
+      }
+
     if (this.meta.enableLinks) {
         plugins += " link autolink";
         toolbar += " | link";
@@ -27,6 +33,7 @@ class TinyTableBlockDefinition extends window.wagtailStreamField.blocks.FieldBlo
         toolbar: toolbar,
         contextmenu: contextmenu,
         valid_elements: valid_elements,
+        valid_styles: valid_styles,
         table_toolbar: "",  // disable the floating toolbar
         table_advtab: false,
         table_appearance_options: false,

src/wagtail_tinytableblock/utils.py

@@ -1,3 +1,5 @@
+import re
+
 from html import unescape
 from typing import TYPE_CHECKING, Literal
 
@@ -16,8 +18,9 @@ def sanitise_html(content: str, *, allow_links: bool = False) -> str:
     tags: set[str] = {"table", "tr", "th", "td", "thead", "tbody", "caption"}
     attributes: dict[str, set[str]] = {
         "*": {"class"},
-        "th": {"colspan", "rowspan", "align", "scope"},
-        "td": {"colspan", "rowspan", "align", "scope"},
+        "th": {"colspan", "rowspan", "align", "scope", "style"},
+        "td": {"colspan", "rowspan", "align", "scope", "style"},
+        "tr": {"style"},
     }
     if allow_links:
         tags |= {"a"}
@@ -31,6 +34,38 @@ def sanitise_html(content: str, *, allow_links: bool = False) -> str:
     )
 
 
+STYLE_PROPS_PATTERN = re.compile(r"([^\s:;]+)\s*:\s*([^;]+)")
+
+
+def clean_style_attributes(table: "Tag") -> None:
+    """
+    TinyMCE sets align/width props in the style attribute,
+    however nh3 yet support ammonia's filter_style_attributes.
+
+    TODO: remove once https://github.com/messense/nh3/issues/78 is fixed
+    """
+    allowed_map = {
+        "th": {"text-align", "vertical-align", "width"},
+        "td": {"text-align", "vertical-align", "width"},
+        "tr": {"text-align", "width"},
+    }
+    for tag in table.find_all(["tr", "th", "td"]):
+        if "style" not in tag.attrs:
+            continue
+
+        matches = STYLE_PROPS_PATTERN.findall(tag["style"])
+        filtered_styles = []
+        for prop, value in matches:
+            prop = prop.strip()
+            if prop in allowed_map[tag.name]:
+                filtered_styles.append(f"{prop.strip()}: {value.strip()}")
+
+        if filtered_styles:
+            tag["style"] = "; ".join(filtered_styles)
+        else:
+            del tag["style"]
+
+
 def get_cell_data(cell: "Tag", forced_type: Cell | None = None) -> dict[str, str | int]:
     value = "".join(str(child) for child in cell.children)
     cell_data = {"value": value, "type": forced_type or cell.name}
@@ -44,6 +79,15 @@ def get_cell_data(cell: "Tag", forced_type: Cell | None = None) -> dict[str, str
     if align := cell.get("align"):
         cell_data["align"] = align
 
+    if style := cell.get("style"):
+        matches = dict(STYLE_PROPS_PATTERN.findall(style))
+        if width := matches.get("width"):
+            cell_data["width"] = width
+        if align := matches.get("text-align"):
+            cell_data["align"] = align
+        if valign := matches.get("vertical-align"):
+            cell_data["valign"] = valign
+
     return cell_data
 
 
@@ -74,6 +118,8 @@ def html_table_to_dict(content: str, *, allow_links: bool = False) -> dict:
             "html": "",
         }
 
+    clean_style_attributes(table)
+
     # Extract headers
     headers = []
     if thead := table.find("thead"):

tests/test_utils.py

@@ -167,6 +167,63 @@ def test_table_with_thead_no_tbody(self):
         self.assertEqual(result["headers"][0][0]["value"], "Header 1")
         self.assertEqual(result["rows"][0][0]["value"], "Cell 1")
 
+    def test_table_with_style_attributes(self):
+        """Test parsing a simple table with thead and tbody."""
+        html = """
+        <table>
+            <thead>
+                <tr>
+                    <th style="width: 50px; text-align: left; vertical-align: top; color: red;">Header 1</th>
+                    <td align="right" style="width: 10%; text-align: center; display: none;">Header 2</td>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td>Cell 1</td>
+                    <td>Cell 2</td>
+                </tr>
+            </tbody>
+        </table>
+        """
+        result = html_table_to_dict(html)
+
+        self.assertEqual(len(result["headers"]), 1)
+        self.assertListEqual(
+            result["headers"][0],
+            [
+                {
+                    "value": "Header 1",
+                    "type": "th",
+                    "align": "left",
+                    "valign": "top",
+                    "width": "50px",
+                },
+                {
+                    "value": "Header 2",
+                    "type": "th",
+                    "align": "center",
+                    "width": "10%",
+                },
+            ],
+        )
+
+        self.assertEqual(len(result["rows"]), 1)
+        self.assertListEqual(
+            result["rows"][0],
+            [
+                {
+                    "value": "Cell 1",
+                    "type": "td",
+                },
+                {
+                    "value": "Cell 2",
+                    "type": "td",
+                },
+            ],
+        )
+
+        self.assertEqual(result["html"], html)
+
     def test_multiple_headers_structure(self):
         """Test parsing a table with complex nested structure."""
         html = """
@@ -247,16 +304,16 @@ def test_sanitisation__with_links(self):
 
     def test_sanitisation__no_links(self):
         html = """
-        <table>
-            <thead class="foo">
+        <table style="width: 100%;">
+            <thead class="foo" style="width: 100%;">
                 <tr>
-                    <th data-test"foo" valign="middle" colspan="1">Header 1</th>
+                    <th data-test"foo" valign="middle" colspan="1" style="color: red;">Header 1</th>
                     <th class="highlight" align="right">Header 2</th>
                 </tr>
             </thead>
-            <tbody>
+            <tbody style="width: 100%;">
                 <tr>
-                    <td rowspan="1">Cell <strong>1</strong></td>
+                    <td rowspan="1" style="text-align: right;">Cell <strong>1</strong></td>
                     <td><a href="#" click='alert(\\'XSS\\')' rel="next">Cell 2</a></td>
                 </tr>
             </tbody>
@@ -266,13 +323,13 @@ def test_sanitisation__no_links(self):
         <table>
             <thead class="foo">
                 <tr>
-                    <th colspan="1">Header 1</th>
+                    <th colspan="1" style="color: red;">Header 1</th>
                     <th class="highlight" align="right">Header 2</th>
                 </tr>
             </thead>
             <tbody>
                 <tr>
-                    <td rowspan="1">Cell 1</td>
+                    <td rowspan="1" style="text-align: right;">Cell 1</td>
                     <td>Cell 2</td>
                 </tr>
             </tbody>