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

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

Browse Source
This commit is contained in:
Daniel Lautzenheiser 2022-12-13 15:31:38 -05:00 committed by GitHub
parent 6602f37495
commit e191e6d691
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 159 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
core/dev-test/config.yml
View File

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

9
core/src/widgets/markdown/plate/PlateEditor.tsx
View File

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

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

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

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

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

32
core/src/widgets/markdown/plate/components/nodes/table/TableCellElement/TableHeaderCellElement.tsx Normal file
View File

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

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

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

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

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

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

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

109
docs/content/docs/widget-markdown.mdx
View File

@ -54,62 +54,71 @@ This would render as:
_Please note:_ The markdown widget outputs a raw markdown string. Your static site generator may or may not render the markdown to HTML automatically. Consult with your static site generator's documentation for more information about rendering markdown.
## Customization
## Shortcodes
Several customization options are available for the markdown editor. You can register the options by calling `setMarkdownEditorOptions` (also available on the global `window.CMS`).
Shortcodes can be added to customize the Markdown editor via `registerShortcode`.
### Available Options
### Usage
| Name | Type | Default | Description |
| --------------- | ---------------------------- | ----------------------------------- | --------------------------------------------------------------------------- |
| initialEditType | 'markdown'<br />\| 'wysiwyg' | `'wysiwyg'` | _Optional_. Sets which editor view that is active when the editor is loaded |
| height | string | `'600px'` | _Optional_. Specify the height of the editor |
| toolbarItems | factory of list of strings | See [Toolbar Items](#toolbar-items) | _Optional_. See [Toolbar Items](#toolbar-items) |
| plugins | list of plugin factories | | _Optional_. See [Plugins](#plugins) |
### Toolbar Items
`toolbarItems` accepts a factory function that returns a list of toolbar buttons for the editor. See the [ToastUI Editor toolbar docs](https://github.com/nhn/tui.editor/blob/master/docs/en/toolbar.md).
#### Default Value
<CodeTabs>
```js
[
['heading', 'bold', 'italic', 'strike'],
['hr', 'quote'],
['ul', 'ol', 'task', 'indent', 'outdent'],
['table', imageToolbarButton, 'link'],
['code', 'codeblock'],
];
CMS.registerShortcode('youtube', {
label: 'YouTube',
openTag: '[',
closeTag: ']',
separator: '|',
toProps: args => {
if (args.length > 0) {
return { src: args[0] };
}
return { src: '' };
},
toArgs: ({ src }) => {
return [src];
},
control: ({ src, onChange }) => {
return h('span', {}, [
h('input', {
key: 'control-input',
value: src,
onChange: event => {
onChange({ src: event.target.value });
},
}),
h(
'iframe',
{
key: 'control-preview',
width: '420',
height: '315',
src: `https://www.youtube.com/embed/${src}`,
},
'',
),
]);
},
preview: ({ src }) => {
return h(
'span',
{},
h(
'iframe',
{
width: '420',
height: '315',
src: `https://www.youtube.com/embed/${src}`,
},
'',
),
);
},
});
```
#### Factory Props
| Name | Type | Description |
| ------------------ | ------------------ | ----------------------------------------------------------- |
| imageToolbarButton | ToolbarItemOptions | An image insert button tied into Static CMS's media library |
### Plugins
`plugins` accepts a list of factory functions that returns a plugin for the editor. See the [ToastUI Editor plugins docs](https://github.com/nhn/tui.editor/blob/master/docs/en/plugin.md).
#### Default Value
```js
[imagePlugin];
```markdown
[youtube|p6h-rYSVX90]
```
#### Factory Props
| Name | Type | Description |
| ------ | ----------------------- | ---------------------------------------------------------------------------------------------- |
| config | Config | The current Static CMS config. See [configuration options](/docs/configuration-options) |
| field | MarkdownField | The field configuration for the current Markdown widget. See [Widget Options](#widget-options) |
| media | MediaHolder | See [Media Holder](#media-holder) |
| mode | 'editor'<br />\| 'preview' | Specifies if your plugin is running in the markdown editor or the markdown preview |
##### Media Holder
Media holder is a javascript class that holds the loaded media assets (images or files) that are present in the markdown content. It exposes a method called `getMedia` that takes a `url` and returns the loaded image or file as an blob asset.
This is utilized by the `imagePlugin` to be able to render images present in the markdown that are currently only available in backend or are not yet persisted to the backend.
</CodeTabs>

5
docs/src/components/docs/components/CodeTabs.tsx
View File

@ -55,6 +55,11 @@ const supportedLanguages: Record<string, CodeLanguage> = {
grammar: Prism.languages.javascript,
language: 'javascript',
},
'language-markdown': {
title: 'Markdown',
grammar: Prism.languages.markdown,
language: 'markdown',
},
};
interface TabData {

4
docs/src/components/layout/search/SearchModal.tsx
View File

@ -97,7 +97,9 @@ const SearchModal: FC<SearchModalProps> = ({ open, onClose, searchablePages }) =
const handleClose = useCallback(() => {
setCanFocus(true);
onClose();
setTimeout(() => {
onClose();
});
}, [onClose]);
const handleSearchChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {

1
docs/src/pages/_app.tsx
View File

@ -24,6 +24,7 @@ require('prismjs/components/prism-json');
require('prismjs/components/prism-toml');
require('prismjs/components/prism-markup-templating');
require('prismjs/components/prism-handlebars');
require('prismjs/components/prism-markdown');
function MyApp({ Component, pageProps }: AppProps) {
const [mode, setMode] = useState<PaletteMode>('dark');