feat: add table preview in visual editor (#8)

* feat: add table preview in visual editor

* fix: format

Author: martinjagodic

packages/decap-cms-widget-markdown/src/MarkdownControl/renderers.js

@@ -97,7 +97,7 @@ const StyledTable = styled.table`
 `;
 
 const StyledTd = styled.td`
-  border: 2px solid black;
+  border: 1px solid black;
   padding: 8px;
   text-align: left;
 `;

packages/decap-cms-widget-richtext/src/RichtextControl/VisualEditor.js

@@ -27,6 +27,7 @@ import BlockquoteElement from './components/Element/BlockquoteElement';
 import LinkElement from './components/Element/LinkElement';
 import ExtendedBlockquotePlugin from './plugins/ExtendedBlockquotePlugin';
 import ShortcodePlugin from './plugins/ShortcodePlugin';
+import { TablePlugin, TableRowPlugin, TableCellPlugin } from './plugins/TablePlugin';
 import defaultEmptyBlock from './defaultEmptyBlock';
 import { mergeMediaConfig } from './mergeMediaConfig';
 import { handleLinkClick } from './linkHandler';
@@ -146,6 +147,9 @@ export default function VisualEditor(props) {
         node: { component: BlockquoteElement },
       }),
       ShortcodePlugin,
+      TablePlugin,
+      TableRowPlugin,
+      TableCellPlugin,
     ],
     value: initialValue,
   });

packages/decap-cms-widget-richtext/src/RichtextControl/components/Element/TableCellElement.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import styled from '@emotion/styled';
+
+const StyledTd = styled.td`
+  border: 1px solid black;
+  padding: 8px;
+  text-align: left;
+`;
+
+function TableCellElement({ children, attributes, nodeProps }) {
+  return (
+    <StyledTd {...attributes} {...nodeProps}>
+      {children}
+    </StyledTd>
+  );
+}
+
+export default TableCellElement;

packages/decap-cms-widget-richtext/src/RichtextControl/components/Element/TableElement.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import styled from '@emotion/styled';
+
+const StyledTable = styled.table`
+  border-collapse: collapse;
+  margin-bottom: 16px;
+  width: 100%;
+`;
+
+function TableElement({ children, attributes, nodeProps }) {
+  return (
+    <StyledTable {...attributes} {...nodeProps}>
+      <tbody>{children}</tbody>
+    </StyledTable>
+  );
+}
+
+export default TableElement;

packages/decap-cms-widget-richtext/src/RichtextControl/components/Element/TableRowElement.js

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function TableRowElement({ children, attributes, nodeProps }) {
+  return (
+    <tr {...attributes} {...nodeProps}>
+      {children}
+    </tr>
+  );
+}
+
+export default TableRowElement;

packages/decap-cms-widget-richtext/src/RichtextControl/plugins/TablePlugin.js

@@ -0,0 +1,36 @@
+import { createSlatePlugin } from 'platejs';
+import { toPlatePlugin } from 'platejs/react';
+
+import TableElement from '../components/Element/TableElement';
+import TableRowElement from '../components/Element/TableRowElement';
+import TableCellElement from '../components/Element/TableCellElement';
+
+const tablePlugin = createSlatePlugin({
+  key: 'table',
+  node: {
+    isElement: true,
+    component: TableElement,
+  },
+});
+
+const tableRowPlugin = createSlatePlugin({
+  key: 'table-row',
+  node: {
+    isElement: true,
+    component: TableRowElement,
+  },
+});
+
+const tableCellPlugin = createSlatePlugin({
+  key: 'table-cell',
+  node: {
+    isElement: true,
+    component: TableCellElement,
+  },
+});
+
+const TablePlugin = toPlatePlugin(tablePlugin);
+const TableRowPlugin = toPlatePlugin(tableRowPlugin);
+const TableCellPlugin = toPlatePlugin(tableCellPlugin);
+
+export { TablePlugin, TableRowPlugin, TableCellPlugin };