diff --git a/packages/core/src/widgets/markdown/plate/PlateEditor.tsx b/packages/core/src/widgets/markdown/plate/PlateEditor.tsx index 9bdaa486a..69f465f14 100644 --- a/packages/core/src/widgets/markdown/plate/PlateEditor.tsx +++ b/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 = ({ [MARK_BOLD]: withProps(PlateLeaf, { as: 'strong' }), [MARK_ITALIC]: withProps(PlateLeaf, { as: 'em' }), [MARK_STRIKETHROUGH]: withProps(PlateLeaf, { as: 's' }), + [MARK_CODE]: CodeElement, }; if (useMdx) { diff --git a/packages/core/src/widgets/markdown/plate/components/nodes/code/Code.css b/packages/core/src/widgets/markdown/plate/components/nodes/code/Code.css new file mode 100644 index 000000000..551888098 --- /dev/null +++ b/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; +} diff --git a/packages/core/src/widgets/markdown/plate/components/nodes/code/Code.tsx b/packages/core/src/widgets/markdown/plate/components/nodes/code/Code.tsx new file mode 100644 index 000000000..01ca1d008 --- /dev/null +++ b/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> = ({ attributes, children, nodeProps }) => { + return ( + + {children} + + ); +}; + +export default CodeElement;