11'use client' ;
2- import React from "react" ;
3-
4- import { MarkdownPlugin } from "@platejs/markdown" ;
5- import { ElementApi , TextApi } from "platejs" ;
6- import { createTPlatePlugin , Plate , usePlateEditor } from "platejs/react" ;
7- import { useFilePicker } from "use-file-picker" ;
8-
9- import { Button } from "@/components/ui/button" ;
10- import { EditorKit } from "@/registry/components/editor/editor-kit" ;
11- import { BlockPlaceholderKit } from "@/registry/components/editor/plugins/block-placeholder-kit" ;
12- import { CopilotKit } from "@/registry/components/editor/plugins/copilot-kit" ;
13- import { MarkdownKit } from "@/registry/components/editor/plugins/markdown-kit" ;
14- import { basicBlocksValue } from "@/registry/examples/values/basic-blocks-value" ;
15- import { AIChatEditor } from "@/registry/ui/ai-chat-editor" ;
16- import { Editor , EditorContainer } from "@/registry/ui/editor" ;
17-
18-
2+ import React from 'react' ;
3+
4+ import { MarkdownPlugin } from '@platejs/markdown' ;
5+ import { ElementApi , TextApi } from 'platejs' ;
6+ import { createTPlatePlugin , Plate , usePlateEditor } from 'platejs/react' ;
7+ import { useFilePicker } from 'use-file-picker' ;
8+
9+ import { Button } from '@/components/ui/button' ;
10+ import { EditorKit } from '@/registry/components/editor/editor-kit' ;
11+ import { BlockPlaceholderKit } from '@/registry/components/editor/plugins/block-placeholder-kit' ;
12+ import { CopilotKit } from '@/registry/components/editor/plugins/copilot-kit' ;
13+ import { MarkdownKit } from '@/registry/components/editor/plugins/markdown-kit' ;
14+ import { basicBlocksValue } from '@/registry/examples/values/basic-blocks-value' ;
15+ import { AIChatEditor } from '@/registry/ui/ai-chat-editor' ;
16+ import { Editor , EditorContainer } from '@/registry/ui/editor' ;
1917
2018const withCustomType = ( value : any ) => {
2119 const addCustomType = ( item : any ) : any => {
2220 if ( ElementApi . isElement ( item ) ) {
23- const { children, type, ...rest } = item
21+ const { children, type, ...rest } = item ;
2422 return {
2523 children : children . map ( addCustomType ) ,
2624 type : 'custom-' + type ,
27- ...rest
28- }
25+ ...rest ,
26+ } ;
2927 }
3028 if ( TextApi . isText ( item ) ) {
31- const { text, ...rest } = item
32- const props : any = { }
29+ const { text, ...rest } = item ;
30+ const props : any = { } ;
3331 for ( const key in rest ) {
34- const value = rest [ key ]
35- const newKey = 'custom-' + key
36- props [ newKey ] = value
32+ const value = rest [ key ] ;
33+ const newKey = 'custom-' + key ;
34+ props [ newKey ] = value ;
3735 }
3836
3937 return {
4038 ...props ,
41- text : text . replace ( / ^ c u s t o m - / , '' )
42- }
39+ text : text . replace ( / ^ c u s t o m - / , '' ) ,
40+ } ;
4341 }
4442 } ;
4543
46- return value . map ( addCustomType )
47- }
44+ return value . map ( addCustomType ) ;
45+ } ;
4846
4947const withCustomPlugins = ( plugins : any [ ] ) : any [ ] => {
50- const newPlugins : any [ ] = [ ]
51-
52- plugins . forEach ( plugin => {
53- newPlugins . push ( plugin . extend ( {
54- node : {
55- type : 'custom-' + plugin . key
56- }
57- } ) )
58- } )
59-
60- return newPlugins
61- }
62-
48+ const newPlugins : any [ ] = [ ] ;
49+
50+ plugins . forEach ( ( plugin ) => {
51+ newPlugins . push (
52+ plugin . extend ( {
53+ node : {
54+ type : 'custom-' + plugin . key ,
55+ } ,
56+ } )
57+ ) ;
58+ } ) ;
6359
60+ return newPlugins ;
61+ } ;
6462
6563const value = [
6664 ...withCustomType ( basicBlocksValue ) ,
@@ -69,38 +67,38 @@ const value = [
6967 // ...withCustomType(codeBlockValue),
7068 // ...withCustomType(listValue),
7169 // ...listValue,
72- ]
73-
74-
70+ ] ;
7571
7672export const EditorViewClient = ( ) => {
77-
78- const editor = usePlateEditor ( {
79- plugins : [
80- ...withCustomPlugins ( [
81- ...CopilotKit ,
82- ...EditorKit ,
83- ] ) ,
84- ...BlockPlaceholderKit ,
85-
86- createTPlatePlugin ( {
87- key : 'ai-test' ,
88- render : {
89- afterEditable : ( ) => < AIChatEditor content = { `| Element | Description |
73+ const editor = usePlateEditor (
74+ {
75+ plugins : [
76+ ...withCustomPlugins ( [ ...CopilotKit , ...EditorKit ] ) ,
77+ ...BlockPlaceholderKit ,
78+
79+ createTPlatePlugin ( {
80+ key : 'ai-test' ,
81+ render : {
82+ afterEditable : ( ) => (
83+ < AIChatEditor
84+ content = { `| Element | Description |
9085|------------------|-----------------------------------------------------------------------------|
9186| Third-level Headings | Provide further content structure and hierarchy. |
9287| Blockquotes | Perfect for highlighting important information, quotes from external sources, or emphasizing key points in your content. |
9388| Headings | Create a clear document structure that helps readers navigate your content effectively. |
94- | Combination | Use headings with blockquotes to emphasize important information. |` } />
95- }
96- } ) ,
97- ...MarkdownKit
98- ] ,
99- value : value ,
100- } , [ ] ) ;
101-
102- const getFileNodes = ( text : string , ) => {
89+ | Combination | Use headings with blockquotes to emphasize important information. |` }
90+ />
91+ ) ,
92+ } ,
93+ } ) ,
94+ ...MarkdownKit ,
95+ ] ,
96+ value : value ,
97+ } ,
98+ [ ]
99+ ) ;
103100
101+ const getFileNodes = ( text : string ) => {
104102 return editor . getApi ( MarkdownPlugin ) . markdown . deserialize ( text ) ;
105103 } ;
106104
@@ -111,38 +109,42 @@ export const EditorViewClient = () => {
111109 const text = await plainFiles [ 0 ] . text ( ) ;
112110
113111 const nodes = getFileNodes ( text ) ;
114- console . log ( " 🚀 ~ onFilesSelected: ~ nodes:" , nodes )
112+ console . log ( ' 🚀 ~ onFilesSelected: ~ nodes:' , nodes ) ;
115113 } ,
116114 } ) ;
117115
118-
119- return < >
120-
121- < Plate editor = { editor } >
122- < EditorContainer >
123- < Editor
124- variant = "demo"
125- className = "pb-[20vh]"
126- placeholder = "Type something..."
127- spellCheck = { false }
128- />
129- </ EditorContainer >
130- </ Plate >
131-
132-
133- < div className = "mt-10 px-10 gap-10 flex" >
134- < Button onClick = {
135- ( ) => {
136- console . log ( editor . getApi ( MarkdownPlugin ) . markdown . serialize ( ) ) ;
137- }
138- } > Serialize</ Button >
139-
140-
141- < Button onClick = { openMdFilePicker } > Deserialize</ Button >
142-
143- < Button onClick = { ( ) => {
144- console . log ( editor . children )
145- } } > Current Value</ Button >
146- </ div >
147- </ >
116+ return (
117+ < >
118+ < Plate editor = { editor } >
119+ < EditorContainer >
120+ < Editor
121+ variant = "demo"
122+ className = "pb-[20vh]"
123+ placeholder = "Type something..."
124+ spellCheck = { false }
125+ />
126+ </ EditorContainer >
127+ </ Plate >
128+
129+ < div className = "mt-10 flex gap-10 px-10" >
130+ < Button
131+ onClick = { ( ) => {
132+ console . log ( editor . getApi ( MarkdownPlugin ) . markdown . serialize ( ) ) ;
133+ } }
134+ >
135+ Serialize
136+ </ Button >
137+
138+ < Button onClick = { openMdFilePicker } > Deserialize</ Button >
139+
140+ < Button
141+ onClick = { ( ) => {
142+ console . log ( editor . children ) ;
143+ } }
144+ >
145+ Current Value
146+ </ Button >
147+ </ div >
148+ </ >
149+ ) ;
148150} ;
0 commit comments