feat(table): remove table css override from editor

docs/documentation/plugins/index.html

@@ -1222,6 +1222,26 @@ <h4>How to use it?</h4>
  }
 });
  </code></pre>
+ <p>
+ To get a good UX, you need to have some CSS defined on your tables.
+ A good start can be something to guarantee that cell height and width
+ will not be junky, and allow to click inside. Also, ensure you have some borders
+ to distinguish cells. Here is a minimal example using CSS custom properties:
+ </p>
+ <pre><code class="css">
+:root {
+ --tbw-cell-vertical-padding: 4px;
+ --tbw-cell-horizontal-padding: 8px;
+ --tbw-cell-line-height: 1.5em;
+}
+
+td {
+ height: calc(var(--tbw-cell-vertical-padding) * 2 + var(--tbw-cell-line-height));
+ min-width: calc(var(--tbw-cell-horizontal-padding) * 2);
+ padding: var(--tbw-cell-vertical-padding) var(--tbw-cell-horizontal-padding);
+ border: 1px solid #e7eaec;
+}
+ </code></pre>
 
  <h4>Options</h4>
  <dl>

docs/scss/_base.scss

@@ -151,27 +151,17 @@ hr.clearfix {
 
 
 
-table {
- margin: 30px auto;
- text-align: left;
-
- thead {
- background: #fff;
- }
- tbody {
- tr {
- border-bottom: 1px solid #ddd;
-
- &:nth-child(2n){
- background: #fcfcfc;
- }
- }
- }
+:root {
+ --tbw-cell-vertical-padding: 4px;
+ --tbw-cell-horizontal-padding: 8px;
+ --tbw-cell-line-height: 1.5em;
+}
 
- td,
- th {
- padding: 5px 15px;
- }
+td {
+ height: calc(var(--tbw-cell-vertical-padding) * 2 + var(--tbw-cell-line-height));
+ min-width: calc(var(--tbw-cell-horizontal-padding) * 2);
+ padding: var(--tbw-cell-vertical-padding) var(--tbw-cell-horizontal-padding);
+ border: 1px solid #e7eaec;
 }
 
 

index.html

@@ -65,6 +65,19 @@
  p {
  margin-top: 0;
  }
+
+ table {
+ --tbw-cell-vertical-padding: 4px;
+ --tbw-cell-horizontal-padding: 8px;
+ --tbw-cell-line-height: 1.5em;
+ }
+
+ td {
+ height: calc(var(--tbw-cell-vertical-padding) * 2 + var(--tbw-cell-line-height));
+ min-width: calc(var(--tbw-cell-horizontal-padding) * 2);
+ padding: var(--tbw-cell-vertical-padding) var(--tbw-cell-horizontal-padding);
+ border: 1px solid #e7eaec;
+ }
  </style>
  <link rel="stylesheet" href="/dist/ui/trumbowyg.css">
  <link rel="stylesheet" href="/dist/plugins/colors/ui/trumbowyg.colors.css">

plugins/table/ui/sass/trumbowyg.table.scss

@@ -1,35 +1,26 @@
-.trumbowyg-editor table {
- width: 100%;
-
- td {
- border: 1px dotted #e7eaec;
- padding: 8px;
- }
-}
-
 .trumbowyg-dropdown-table {
- table {
- margin: 10px;
- display: inline-block;
- }
+ table {
+ margin: 10px;
+ display: inline-block;
+ border-collapse: separate;
+ border-spacing: 1px;
+ }
 
- table td {
- display: inline-block;
- height: 20px;
- width: 20px;
- margin: 1px;
- padding: 0;
- background-color: #fff;
- box-shadow: 0 0 0 1px #cecece inset;
+ table td {
+ height: 20px;
+ width: 20px;
+ padding: 0;
+ background-color: #fff;
+ box-shadow: 0 0 0 1px #cecece inset;
 
- &.active {
- background-color: #00b393;
- box-shadow: none;
- cursor: pointer;
+ &.active {
+ background-color: #00b393;
+ box-shadow: none;
+ cursor: pointer;
+ }
  }
- }
 
- .trumbowyg-table-size {
- text-align: center;
- }
+  .trumbowyg-table-size {
+  text-align: center;
+  }
 }