From d6dab8e72ec45d7cf428cb7a7d89b5b5abe47098 Mon Sep 17 00:00:00 2001
From: Erza Bytyci <erzabytyqi17@gmail.com>
Date: Fri, 22 May 2026 09:46:54 +0000
Subject: [PATCH] fix table's borders

---
 .../api/admin/pages/[type]/[slug]/route.js    | 16 +++++++++++++++
 gradesa/src/app/globals.css                   | 20 +++++++++----------
 2 files changed, 26 insertions(+), 10 deletions(-)

diff --git a/gradesa/src/app/api/admin/pages/[type]/[slug]/route.js b/gradesa/src/app/api/admin/pages/[type]/[slug]/route.js
index f7428fe..4f4efdd 100644
--- a/gradesa/src/app/api/admin/pages/[type]/[slug]/route.js
+++ b/gradesa/src/app/api/admin/pages/[type]/[slug]/route.js
@@ -218,6 +218,14 @@ function isEffectivelyEmptyBlock(node) {
   return meaningfulChildren.length === 0;
 }
 
+function hasExplicitBorderStyle(node) {
+  if (!node || typeof node.getAttribute !== "function") {
+    return false;
+  }
+  const style = String(node.getAttribute("style") || "");
+  return /(^|;)\s*border(?:-(top|right|bottom|left))?\s*:/i.test(style);
+}
+
 function normalizeTableSpacing(html) {
   const dom = new JSDOM(`<div id="root">${String(html || "")}</div>`);
   const { document } = dom.window;
@@ -226,6 +234,14 @@ function normalizeTableSpacing(html) {
     return String(html || "");
   }
 
+  // Keep user-intended border styles, but remove implicit border attributes
+  // (for example border="1") when no explicit CSS border was set.
+  root.querySelectorAll("table, td, th").forEach((node) => {
+    if (node.hasAttribute("border") && !hasExplicitBorderStyle(node)) {
+      node.removeAttribute("border");
+    }
+  });
+
   const tables = root.querySelectorAll("table");
   tables.forEach((table) => {
     let prev = table.previousElementSibling;
diff --git a/gradesa/src/app/globals.css b/gradesa/src/app/globals.css
index 0a8e087..53899b0 100644
--- a/gradesa/src/app/globals.css
+++ b/gradesa/src/app/globals.css
@@ -617,20 +617,20 @@ label {
   max-width: 100%;
 }
 
-/* Keep published editor tables borderless unless explicitly restyled by page-specific CSS. */
-.rendered-html table,
-.rendered-html table tbody,
-.rendered-html table thead,
-.rendered-html table tr,
-.rendered-html table td,
-.rendered-html table th {
-  border: none !important;
-}
-
+/* Default to borderless tables, but keep any explicit per-cell/table border styling. */
 .rendered-html table {
   border-collapse: collapse;
 }
 
+.rendered-html table:not([style*="border"]) {
+  border: none;
+}
+
+.rendered-html table td:not([style*="border"]),
+.rendered-html table th:not([style*="border"]) {
+  border: none;
+}
+
 .rendered-html {
   display: flow-root;
   width: 100%;