fix: inline code styles (#880)

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

@@ -40,6 +40,7 @@ import {
   ELEMENT_TR,
   ELEMENT_UL,
   MARK_BOLD,
+  MARK_CODE,
   MARK_ITALIC,
   MARK_STRIKETHROUGH,
   MARK_SUBSCRIPT,
@@ -83,6 +84,7 @@ import {
   TableHeaderCellElement,
   TableRowElement,
 } from './components/nodes/table';
+import CodeElement from './components/nodes/code/Code';
 import { Toolbar } from './components/toolbar';
 import editableProps from './editableProps';
 import { createMdPlugins, ELEMENT_SHORTCODE } from './plateTypes';
@@ -171,6 +173,7 @@ const PlateEditor: FC<PlateEditorProps> = ({
       [MARK_BOLD]: withProps(PlateLeaf, { as: 'strong' }),
       [MARK_ITALIC]: withProps(PlateLeaf, { as: 'em' }),
       [MARK_STRIKETHROUGH]: withProps(PlateLeaf, { as: 's' }),
+      [MARK_CODE]: CodeElement,
     };
 
     if (useMdx) {

packages/core/src/widgets/markdown/plate/components/nodes/code/Code.css

@@ -0,0 +1,13 @@
+.CMS_WidgetMarkdown_Code_root {
+  @apply py-[0.2em]
+    px-[0.4em]
+    m-0
+    text-sm
+    whitespace-break-spaces
+    text-gray-700
+    dark:text-gray-200
+    bg-gray-200
+    dark:bg-gray-700
+    rounded-md
+    font-mono;
+}

packages/core/src/widgets/markdown/plate/components/nodes/code/Code.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+import { generateClassNames } from '@staticcms/core/lib/util/theming.util';
+
+import type { MdValue } from '@staticcms/markdown';
+import type { PlateRenderElementProps } from '@udecode/plate';
+import type { FC } from 'react';
+
+import './Code.css';
+
+const classes = generateClassNames('WidgetMarkdown_Code', ['root']);
+
+const CodeElement: FC<PlateRenderElementProps<MdValue>> = ({ attributes, children, nodeProps }) => {
+  return (
+    <code {...attributes} {...nodeProps} className={classes.root}>
+      {children}
+    </code>
+  );
+};
+
+export default CodeElement;