N°4481 - Restore HTML tables style identical between edition and visualization

css/backoffice/_shame.scss

@@ -42,4 +42,24 @@
 // N°2847 - Recolor svg illustrations with iTop's primary color
 .ibo-svg-illustration--container > svg *[fill="#6c63ff"]{
 	fill: $ibo-svg-illustration--fill;
+}
+
+// N°4481 - Restore HTML tables style identical between edition and visualization
+// This is a hack to compensate missing variables in the bulma lib, PR has been made here: https://github.com/jgthms/bulma/pull/3455
+// The following can't be reset to it's original value (from the browser stylesheet), so we have to hardcode it even though it might change in future browser versions...
+.ibo-is-html-content table {
+  &:not(:last-child) {
+    margin-bottom: 0;
+  }
+
+  tbody {
+    tr {
+      &:last-child {
+        td,
+        th {
+          border-bottom-width: 1px;
+        }
+      }
+    }
+  }
 }

css/backoffice/utils/helpers/_misc.scss

@@ -147,6 +147,15 @@ body.ibo-has-fullscreen-descendant {
     max-width: max-content;
   }
 
+  /* For table to render like in CKEditor, works with bulma lib. overload see:
+   * - ../../vendors/_bulma-variables-overload.scss)
+   * - ../../_shame.scss
+   */
+  table {
+    border-collapse: separate;
+    border-spacing: 2px;
+  }
+
   /* Preserve original text color in code blocks, except for the Highlight.js blocks which have their own colors */
   & > code,
   :not(pre.hljs) code {

css/backoffice/vendors/_bulma-variables-overload.scss

@@ -17,8 +17,15 @@ $body-overflow-y: auto !default;
  * customize Bulma content variables
  * See https://bulma.io/documentation/elements/content/
  */
-$content-table-cell-border: 1px solid black;
-$content-table-cell-border-width: 1px;
-$content-table-head-cell-border-width: 1px;
-$content-table-foot-cell-border-width: 1px;
-$content-table-foot-cell-color: black;
+/* Table: Reset style as much as possible to match rich text editor preview, which is the browser's default stylesheet.
+ * As there is no way to avoid bulma rules, we simply make them invalid by setting an invalid variable value, the rules will then be ignored by the browser.
+ * See N°4481 for more information
+ */
+$content-table-cell-border: 'invalid on purpose';
+$content-table-cell-border-width: 'invalid on purpose';
+$content-table-cell-padding: 'invalid on purpose';
+$content-table-cell-heading-color: 'invalid on purpose';
+$content-table-head-cell-border-width: 'invalid on purpose';
+$content-table-head-cell-color: 'invalid on purpose';
+$content-table-foot-cell-border-width: 'invalid on purpose';
+$content-table-foot-cell-color: 'invalid on purpose';