From c4ad6e8ac9671b500cf6359ef5c956e1959630a0 Mon Sep 17 00:00:00 2001
From: NguyenND <ngodanguyen@gmail.com>
Date: Fri, 24 Jul 2026 11:32:03 -0400
Subject: [PATCH] Jul 24 - Update Rich-text editor to enhance table editor 4

---
 .claude/settings.json           | 4 +++-
 app.py                          | 2 ++
 templates/admin/topic_form.html | 5 +++++
 3 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/.claude/settings.json b/.claude/settings.json
index df26673..55efff3 100644
--- a/.claude/settings.json
+++ b/.claude/settings.json
@@ -30,7 +30,9 @@
       "Bash(python -m py_compile app.py admin.py)",
       "Bash(cd /tmp *)",
       "Read(//tmp/**)",
-      "Bash(curl -sSL https://raw.githubusercontent.com/attoae/quill-table-better/main/src/utils/clipboard-matchers.ts -o cm.ts -w \"cm %{http_code}\\\\n\")"
+      "Bash(curl -sSL https://raw.githubusercontent.com/attoae/quill-table-better/main/src/utils/clipboard-matchers.ts -o cm.ts -w \"cm %{http_code}\\\\n\")",
+      "Bash(curl -sSL https://raw.githubusercontent.com/attoae/quill-table-better/main/src/ui/table-menus.ts -o tm.ts -w \"tm %{http_code}\\\\n\")",
+      "Bash(curl -sSL https://raw.githubusercontent.com/attoae/quill-table-better/main/src/ui/table-properties-form.ts -o tpf.ts -w \"tpf %{http_code}\\\\n\")"
     ]
   }
 }
diff --git a/app.py b/app.py
index fa142f8..30f7178 100644
--- a/app.py
+++ b/app.py
@@ -106,6 +106,8 @@ _TABLE_CELL_ATTRS = [
 ALLOWED_ATTRS = {
     "a": ["href", "title", "target", "rel"],
     "img": ["src", "alt", "width", "height"],
+    # cell alignment lives as inline `text-align` on the cell's <p> block
+    "p": ["style"],
     "table": ["class", "style", "align", "width", "height", "data-class"],
     "colgroup": ["style"],
     "col": ["width", "span", "style"],
diff --git a/templates/admin/topic_form.html b/templates/admin/topic_form.html
index a8a52a9..3113c11 100644
--- a/templates/admin/topic_form.html
+++ b/templates/admin/topic_form.html
@@ -149,6 +149,11 @@
     var toolbarEl = document.getElementById('editor-toolbar');
     var editorEl = document.getElementById('editor');
 
+    // Persist alignment as inline `text-align` (style) rather than a Quill CSS
+    // class, so cell alignment survives the HTML sanitizer and renders on the
+    // public page with no extra CSS. Must run before the editor is created.
+    Quill.register(Quill.import('attributors/style/align'), true);
+
     // quill-table-better: resizable columns/rows + a cell menu for alignment,
     // borders and background. Registered only if the vendor script loaded.
     var hasTables = typeof QuillTableBetter !== 'undefined';