feat: markdown widget docs and basic editor stylings (#226)

core/dev-test/config.yml

@@ -56,7 +56,7 @@ collections:
         required: false
       - label: Body
         name: body
-        widget: mdx
+        widget: markdown
         hint: Main content goes here.
   - name: faq
     label: FAQ

core/src/widgets/markdown/plate/PlateEditor.tsx

@@ -77,7 +77,12 @@ import {
   UnorderedListElement,
 } from './components/nodes/list';
 import ParagraphElement from './components/nodes/paragraph/ParagraphElement';
-import { TableCellElement, TableElement, TableRowElement } from './components/nodes/table';
+import {
+  TableCellElement,
+  TableElement,
+  TableHeaderCellElement,
+  TableRowElement,
+} from './components/nodes/table';
 import { Toolbar } from './components/toolbar';
 import editableProps from './editableProps';
 import { createMdPlugins, ELEMENT_SHORTCODE } from './plateTypes';
@@ -152,7 +157,7 @@ const PlateEditor: FC<PlateEditorProps> = ({
       [ELEMENT_PARAGRAPH]: ParagraphElement,
       [ELEMENT_TABLE]: TableElement,
       [ELEMENT_TR]: TableRowElement,
-      [ELEMENT_TH]: TableCellElement,
+      [ELEMENT_TH]: TableHeaderCellElement,
       [ELEMENT_TD]: TableCellElement,
       [ELEMENT_BLOCKQUOTE]: BlockquoteElement,
       [ELEMENT_CODE_BLOCK]: CodeBlockElement,

core/src/widgets/markdown/plate/components/nodes/blockquote/BlockquoteElement.tsx

@@ -1,3 +1,4 @@
+import Box from '@mui/system/Box';
 import React from 'react';
 
 import type { MdBlockquoteElement, MdValue } from '@staticcms/markdown';
@@ -7,7 +8,14 @@ import type { FC } from 'react';
 const BlockquoteElement: FC<PlateRenderElementProps<MdValue, MdBlockquoteElement>> = ({
   children,
 }) => {
-  return <blockquote>{children}</blockquote>;
+  return (
+    <Box
+      component="blockquote"
+      sx={{ borderLeft: '2px solid rgba(209,213,219,0.5)', marginLeft: '8px', paddingLeft: '8px' }}
+    >
+      {children}
+    </Box>
+  );
 };
 
 export default BlockquoteElement;

core/src/widgets/markdown/plate/components/nodes/table/TableCellElement/TableCellElement.tsx

@@ -1,19 +1,30 @@
+import Box from '@mui/material/Box';
 import React from 'react';
 
 import type { MdTableCellElement, MdValue } from '@staticcms/markdown';
 import type { PlateRenderElementProps } from '@udecode/plate';
 import type { FC } from 'react';
 
-const TableCellElement: FC<PlateRenderElementProps<MdValue, MdTableCellElement>> = ({
+const TableHeaderCellElement: FC<PlateRenderElementProps<MdValue, MdTableCellElement>> = ({
   attributes,
   children,
   nodeProps,
 }) => {
   return (
-    <td {...attributes} {...nodeProps}>
+    <Box
+      component="td"
+      {...attributes}
+      {...nodeProps}
+      sx={{
+        padding: '8px',
+        '&:not(:last-of-type)': {
+          borderRight: '1px solid rgba(209,213,219,0.5)',
+        },
+      }}
+    >
       <div>{children}</div>
-    </td>
+    </Box>
   );
 };
 
-export default TableCellElement;
+export default TableHeaderCellElement;

core/src/widgets/markdown/plate/components/nodes/table/TableCellElement/TableHeaderCellElement.tsx

@@ -0,0 +1,32 @@
+import Box from '@mui/material/Box';
+import React from 'react';
+
+import type { MdTableCellElement, MdValue } from '@staticcms/markdown';
+import type { PlateRenderElementProps } from '@udecode/plate';
+import type { FC } from 'react';
+
+const TableHeaderCellElement: FC<PlateRenderElementProps<MdValue, MdTableCellElement>> = ({
+  attributes,
+  children,
+  nodeProps,
+}) => {
+  return (
+    <Box
+      component="th"
+      {...attributes}
+      {...nodeProps}
+      sx={{
+        padding: '8px',
+        background: 'rgb(244,245,247)',
+        textAlign: 'left',
+        '&:not(:last-of-type)': {
+          borderRight: '1px solid rgba(209,213,219,0.5)',
+        },
+      }}
+    >
+      <div>{children}</div>
+    </Box>
+  );
+};
+
+export default TableHeaderCellElement;

core/src/widgets/markdown/plate/components/nodes/table/TableCellElement/index.ts

@@ -1,2 +1,2 @@
-// eslint-disable-next-line import/prefer-default-export
 export { default as TableCellElement } from './TableCellElement';
+export { default as TableHeaderCellElement } from './TableHeaderCellElement';

core/src/widgets/markdown/plate/components/nodes/table/TableElement/TableElement.tsx

@@ -1,3 +1,4 @@
+import Box from '@mui/system/Box';
 import { useSelectedCells } from '@udecode/plate';
 import React from 'react';
 
@@ -13,9 +14,19 @@ const TableElement: FC<PlateRenderElementProps<MdValue, MdTableElement>> = ({
   useSelectedCells();
 
   return (
-    <table {...attributes} {...nodeProps}>
-      <tbody>{children}</tbody>
-    </table>
+    <Box
+      component="table"
+      {...attributes}
+      {...nodeProps}
+      sx={{ border: '1px solid rgba(209,213,219,0.75)', borderCollapse: 'collapse' }}
+    >
+      {children ? (
+        <>
+          <thead key="thead">{children[0]}</thead>
+          <tbody key="tbody">{children.slice(1)}</tbody>
+        </>
+      ) : null}
+    </Box>
   );
 };
 

core/src/widgets/markdown/plate/components/nodes/table/TableRowElement/TableRowElement.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import Box from '@mui/system/Box';
 
 import type { PlateRenderElementProps } from '@udecode/plate';
 import type { FC } from 'react';
@@ -10,9 +11,18 @@ const TableRowElement: FC<PlateRenderElementProps<MdValue, MdTableRowElement>> =
   nodeProps,
 }) => {
   return (
-    <tr {...attributes} {...nodeProps}>
+    <Box
+      component="tr"
+      {...attributes}
+      {...nodeProps}
+      sx={{
+        '&:only-of-type, &:not(:last-of-type)': {
+          borderBottom: '1px solid rgba(209,213,219,0.5)',
+        },
+      }}
+    >
       {children}
-    </tr>
+    </Box>
   );
 };