gcg/static-cms
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: inline code styles (#880)

Browse Source
This commit is contained in:
Daniel Lautzenheiser 2023-09-14 11:33:22 -04:00 committed by GitHub
parent 965f8e5b18
commit 084c689ad3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 37 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
packages/core/src/widgets/markdown/plate/PlateEditor.tsx
View File

@ -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) {

13
packages/core/src/widgets/markdown/plate/components/nodes/code/Code.css Normal file
View File

@ -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;
}

21
packages/core/src/widgets/markdown/plate/components/nodes/code/Code.tsx Normal file
View File

@ -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;