22
33import EditorJS , { OutputData } from '@editorjs/editorjs'
44import { stripHtml } from 'string-strip-html'
5- import React , { useEffect , useRef } from 'react'
5+ import React , { useCallback , useEffect , useRef , useState } from 'react'
66import {
77 Environment ,
88 graphql ,
@@ -74,6 +74,7 @@ type EditorProps = {
7474 body ?: string
7575 requestCookie ?: string | null
7676}
77+ let isEditorInitialized = false
7778
7879export default function StoryEditor ( {
7980 editable,
@@ -89,38 +90,42 @@ export default function StoryEditor({
8990}
9091
9192function Editor ( { editable, body } : EditorProps ) {
92- const ejInstance = useRef < EditorJS | null > ( )
93+ const editorRef = useRef < EditorJS > ( )
9394
94- const [ editorData , setEditorData ] = React . useState (
95+ const [ editorData ] = useState (
9596 ( body && JSON . parse ( body ) ) || DEFAULT_INITIAL_DATA
9697 )
97- useEffect ( ( ) => {
98- if ( ! ejInstance . current ) {
99- initEditor ( )
100- }
101- return ( ) => {
102- ejInstance ?. current ?. destroy ( )
103- ejInstance . current = null
104- }
105- } , [ ] )
10698
107- const initEditor = ( ) => {
99+ const getEditorContent = useCallback ( async ( ) => {
100+ const content = await editorRef . current ?. save ( )
101+ return content
102+ } , [ ] )
103+ const initEditor = useCallback ( ( ) => {
108104 const editor = new EditorJS ( {
109105 holder : EDITTOR_HOLDER_ID ,
110106 data : editorData ,
107+ placeholder : 'title' ,
108+ defaultBlock : 'paragraph' ,
111109 onReady : ( ) => {
112- ejInstance . current = editor
113- } ,
114- onChange : async ( ) => {
115- const content = await editor . saver . save ( )
116- setEditorData ( content )
110+ editorRef . current = editor
117111 } ,
118112 autofocus : true ,
119113 tools : EDITOR_JS_TOOLS ,
120114 inlineToolbar : true ,
121115 readOnly : ! editable ,
122116 } )
123- }
117+ } , [ editable , editorData ] )
118+ useEffect ( ( ) => {
119+ if ( ! editorRef . current && ! isEditorInitialized ) {
120+ initEditor ( )
121+ isEditorInitialized = true
122+ }
123+ return ( ) => {
124+ editorRef ?. current ?. destroy ( )
125+ editorRef . current = undefined
126+ }
127+ } , [ editorRef , initEditor ] )
128+
124129 const [ commitMutation ] = useMutation (
125130 graphql `
126131 mutation StoryEditorCreateMutation($input: StoryInput!) {
@@ -130,23 +135,26 @@ function Editor({ editable, body }: EditorProps) {
130135 }
131136 `
132137 )
133- const handleStorySubmit = ( ) => {
134- const postTitle = getTitle ( editorData )
135- commitMutation ( {
136- variables : {
137- input : {
138- title : postTitle ,
139- contentJson : JSON . stringify ( editorData ) ,
140- abstractContent : getAbstract ( editorData ) ,
141- urlSuffix : postTitle
142- . toLowerCase ( )
143- . replaceAll ( ' ' , '-' )
144- . substring ( 0 , 32 ) ,
145- thumbnail : getThubnail ( editorData ) ,
138+ const handleStorySubmit = useCallback ( async ( ) => {
139+ const editorContent = await getEditorContent ( )
140+ if ( editorContent ) {
141+ const postTitle = getTitle ( editorContent )
142+ commitMutation ( {
143+ variables : {
144+ input : {
145+ title : postTitle ,
146+ contentJson : JSON . stringify ( editorContent ) ,
147+ abstractContent : getAbstract ( editorContent ) ,
148+ urlSuffix : postTitle
149+ . toLowerCase ( )
150+ . replaceAll ( ' ' , '-' )
151+ . substring ( 0 , 32 ) ,
152+ thumbnail : getThubnail ( editorContent ) ,
153+ } ,
146154 } ,
147- } ,
148- } )
149- }
155+ } )
156+ }
157+ } , [ commitMutation , getEditorContent ] )
150158 return (
151159 < Card classes = "prose max-w-none dark:prose-invert" >
152160 < div className = "prose-code" >
0 commit comments