Skip to content

Commit 05216fb

Browse files
zbeyenszbeyens
committed
docs
1 parent d83e1fe commit 05216fb

File tree

11 files changed

+392
-20
lines changed

11 files changed

+392
-20
lines changed

‎apps/www/content/docs/markdown.mdx

+7-7
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
---
22
title: Serializing Markdown
33
description: Copy paste from Markdown to Slate.
4+
toc: false
45
---
56

67
<ComponentPreview name="playground-demo" id="markdown" />
@@ -9,11 +10,8 @@ description: Copy paste from Markdown to Slate.
910

1011
## Features
1112

12-
- Convert Markdown content to a Slate value.
13-
14-
<Callout className="my-4">
15-
**Note**: Converting a Slate value to Markdown is not yet supported.
16-
</Callout>
13+
- Convert Markdown string to Slate JSON.
14+
- Convert Slate JSON to Markdown string.
1715

1816
</PackageInfo>
1917

@@ -25,7 +23,7 @@ npm install @udecode/plate-markdown
2523

2624
## Usage
2725

28-
### Markdown -> Slate
26+
### Markdown to Slate
2927

3028
```tsx
3129
import { MarkdownPlugin } from '@udecode/plate-markdown';
@@ -40,7 +38,9 @@ const editor = createPlateEditor({
4038
const value = editor.api.markdown.deserialize('**Hello world!**');
4139
```
4240

43-
### Slate -> Markdown
41+
<ComponentPreview name="markdown-demo" />
42+
43+
### Slate to Markdown
4444

4545
Currently supported plugins: paragraph, link, list, heading, italic, bold and code.
4646

‎apps/www/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -157,6 +157,7 @@
157157
"react-syntax-highlighter": "^15.5.0",
158158
"react-tweet": "^3.2.1",
159159
"react-wrap-balancer": "^1.1.1",
160+
"remark-emoji": "5.0.1",
160161
"sass": "^1.78.0",
161162
"slate": "0.110.2",
162163
"slate-dom": "0.111.0",

‎apps/www/public/r/styles/default/markdown-demo.json

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
{
2+
"doc": {
3+
"description": "Live preview of Slate content as Markdown."
4+
},
5+
"files": [
6+
{
7+
"content": "import React, { useCallback, useState } from 'react';\n\nimport { Plate, PlateContent, createPlateEditor } from '@udecode/plate-common';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\n\nimport { basicMarksPlugins, basicNodesPlugins } from '../plate/demo/plugins';\n\nconst editor = createPlateEditor({\n plugins: [...basicNodesPlugins, ...basicMarksPlugins, MarkdownPlugin],\n});\n\nexport function MarkdownDemo() {\n const [markdown, setMarkdown] = useState('');\n\n const onChange = useCallback((value: any) => {\n // Convert the Slate value to Markdown\n const markdownString = editor.api.markdown.serialize({ nodes: value });\n setMarkdown(markdownString);\n }, []);\n\n return (\n <div className=\"grid grid-cols-2 gap-4\">\n <div className=\"rounded-lg border p-4\">\n <Plate onChange={onChange} editor={editor}>\n <PlateContent className=\"min-h-[150px]\" />\n </Plate>\n </div>\n <div className=\"whitespace-pre-wrap rounded-lg border p-4 font-mono text-sm\">\n {markdown}\n </div>\n </div>\n );\n}\n",
8+
"path": "example/markdown-demo.tsx",
9+
"target": "components/markdown-demo.tsx",
10+
"type": "registry:example"
11+
}
12+
],
13+
"name": "markdown-demo",
14+
"registryDependencies": [],
15+
"type": "registry:example"
16+
}

‎apps/www/src/__registry__/index.tsx

+12
Original file line numberDiff line numberDiff line change
@@ -2129,6 +2129,18 @@ export const Index: Record<string, any> = {
21292129
subcategory: "",
21302130
chunks: []
21312131
},
2132+
"markdown-demo": {
2133+
name: "markdown-demo",
2134+
description: "",
2135+
type: "registry:example",
2136+
registryDependencies: [],
2137+
files: ["registry/default/example/markdown-demo.tsx"],
2138+
component: React.lazy(() => import("@/registry/default/example/markdown-demo.tsx")),
2139+
source: "",
2140+
category: "",
2141+
subcategory: "",
2142+
chunks: []
2143+
},
21322144
"editor-ai": {
21332145
name: "editor-ai",
21342146
description: "An AI editor",

‎apps/www/src/app/(app)/docs/[[...slug]]/doc-content.tsx

+4-2
Original file line numberDiff line numberDiff line change
@@ -49,11 +49,13 @@ export function DocContent({
4949
} & Partial<RegistryEntry>) {
5050
const title = doc?.title ?? getRegistryTitle(file);
5151

52+
const hasToc = doc?.toc && toc;
53+
5254
return (
5355
<main
5456
className={cn(
5557
'relative py-6 lg:gap-10 lg:py-8',
56-
'lg:grid lg:grid-cols-[1fr_230px]'
58+
hasToc && 'lg:grid lg:grid-cols-[1fr_230px]'
5759
)}
5860
>
5961
<div className="mx-auto w-full min-w-0">
@@ -124,7 +126,7 @@ export function DocContent({
124126
{doc && <DocsPager doc={doc as any} />}
125127
</div>
126128

127-
{doc?.toc && toc && (
129+
{hasToc && (
128130
<div className="hidden text-sm lg:block">
129131
<div className="sticky top-16 -mt-10 flex h-[calc(100vh-84px)] flex-col pt-4">
130132
<ScrollArea className="grow pb-2">

‎apps/www/src/registry/default/components/editor/plugins/editor-plugins.tsx

+2-6
Original file line numberDiff line numberDiff line change
@@ -20,19 +20,17 @@ import {
2020
EquationPlugin,
2121
InlineEquationPlugin,
2222
} from '@udecode/plate-math/react';
23-
import { CursorOverlayPlugin } from '@udecode/plate-selection/react';
2423
import { SlashPlugin } from '@udecode/plate-slash-command/react';
2524
import { TogglePlugin } from '@udecode/plate-toggle/react';
2625
import { TrailingBlockPlugin } from '@udecode/plate-trailing-block';
2726

28-
import { CursorOverlay } from '@/registry/default/plate-ui/cursor-overlay';
29-
3027
import { aiPlugins } from './ai-plugins';
3128
import { alignPlugin } from './align-plugin';
3229
import { autoformatPlugin } from './autoformat-plugin';
3330
import { basicNodesPlugins } from './basic-nodes-plugins';
3431
import { blockMenuPlugins } from './block-menu-plugins';
3532
import { commentsPlugin } from './comments-plugin';
33+
import { cursorOverlayPlugin } from './cursor-overlay-plugin';
3634
import { deletePlugins } from './delete-plugins';
3735
import { dndPlugins } from './dnd-plugins';
3836
import { exitBreakPlugin } from './exit-break-plugin';
@@ -80,9 +78,7 @@ export const editorPlugins = [
8078

8179
// Functionality
8280
autoformatPlugin,
83-
CursorOverlayPlugin.configure({
84-
render: { afterEditable: () => <CursorOverlay /> },
85-
}),
81+
cursorOverlayPlugin,
8682
...blockMenuPlugins,
8783
...dndPlugins,
8884
EmojiPlugin,

0 commit comments

Comments
 (0)