Merge branch 'feat/ui-1.0.3' into 'test'

Feat/ui 1.0.3

See merge request opensource/answer!411

ui/src/components/Editor/toolItem.tsx

@@ -52,10 +52,11 @@ const ToolItem: FC<IProps> = (props) => {
     <OverlayTrigger placement="bottom" overlay={<Tooltip>{tip}</Tooltip>}>
       <Button
         variant="link"
-        className={`p-0 b-0 btn-no-border btn-no-focus toolbar icon-${label} ${
+        className={`p-0 b-0 btn-no-border toolbar icon-${label} ${
           disable ? 'disabled' : ''
         } `}
         disabled={disable}
+        tabIndex={-1}
         onClick={(e) => {
           e.preventDefault();
           if (typeof onClick === 'function') {

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

@@ -119,9 +119,6 @@ a {
   border: none;
   box-shadow: none;
 }
-.btn-no-focus:focus {
-  background-color: unset !important;
-}
 
 .pointer:hover {
   cursor: pointer;
@@ -242,6 +239,12 @@ a {
       margin-bottom: 0;
     }
   }
+  table {
+    td,
+    th {
+      word-break: initial;
+    }
+  }
 }
 
 .upload-img-wrap {
@@ -288,8 +291,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;