feat(ui): add border and responsive on table

ui/src/components/Editor/utils/index.ts

@@ -113,4 +113,20 @@ export function htmlRender(el: HTMLElement | null) {
       });
     },
   );
+
+  el.querySelectorAll('table').forEach((table) => {
+    if (
+      (table.parentNode as HTMLDivElement)?.classList.contains(
+        'table-responsive',
+      )
+    ) {
+      return;
+    }
+
+    table.classList.add('table', 'table-bordered');
+    const div = document.createElement('div');
+    div.className = 'table-responsive';
+    table.parentNode?.replaceChild(div, table);
+    div.appendChild(table);
+  });
 }

ui/src/index.scss

@@ -242,6 +242,12 @@ a {
       margin-bottom: 0;
     }
   }
+  table {
+    td,
+    th {
+      word-break: initial;
+    }
+  }
 }
 
 .upload-img-wrap {
@@ -288,8 +294,13 @@ a {
 }
 
 @keyframes bg-fade-out {
-  0%, 25% {background-color: var(--bs-highlight-bg)}
-  100% { background-color: transparent }
+  0%,
+  25% {
+    background-color: var(--bs-highlight-bg);
+  }
+  100% {
+    background-color: transparent;
+  }
 }
 .bg-fade-out {
   animation: bg-fade-out 2s ease 0.3s;