[2026.03.04] 수정 페이지에 에디터 적용하기 (칸반보드1,2)

작업

수정페에지에도 에디터를 적용하려고 한다. 

지금까지는 WritePostPage에서만 에디터가 적용되어 있다. 

 

WritePostPage에서는 placeholder와 setText가 적용되어 있다. 

<EditorContainer
    placeholder='내용'
    setText={(editor) => {
        const htmlContent = editor.getHTML();
        setText(htmlContent);
    }}
/>

 

EditPostPage에서는 기본적으로 세팅해줘야하는 텍스트가 백엔드에서 넘어오니

test를 전달해줘야하고, 반면 placeholder은 필요없어진다. 

setText은 WritePostPage와 동일하게 세팅해줬다. 

<EditorContainer
    text={text}
    setText={(editor) => {
        const htmlContent = editor.getHTML();
        setText(htmlContent);
    }}
/>

 

EditorContainer을 다음과 같게 생겼다

//...에디터 세팅
import FixedMenuEditor from '../FixedMenuEditor/FixedMenuEditor';

export default function EditorContainer({ placeholder, text, setText }) {
  const editor = useEditor({
    //에디터 세팅
  });

  //EditPostPage처럼 initalText(text)가 존재할 시 세팅해줌
  useEffect(() => {
    if (editor && text) {
      editor.commands.setContent(text);
    }
  }, [editor, text]);

  return (
    <>
      <FixedMenuEditor editor={editor} />
      <EditorContent editor={editor} />
    </>
  );
}

 

문제

EditPostPage에서 에디터를 사용할 시 space바를 누를 수가 없었다. 

무언가 적는건 가능했는데 whitespace는 허용하지 않는 느낌이었다. 

 

WritePostPage와 다른 점이 text필드 하나밖에 없는데,

그러면 아마도 text와 useEffect와 관련된 문제임을 추측할 수 있었다.

그래서 gemini 코드 확인을 읽어봤는데,

 

useEffect의 []에 text를 넣었기 때문에 

text가 변경될때 마다, 그니까 editor에 무언가를 타이핑할때마다 useEffect가 호출 되어서

editor.commands.setContent(text)가 계속 불러와지는 것이었다. 

 

이걸 함으로서 나는

- continuously destroying the current document and creating a new one

- this includes -> document, cursor position, history etc

 

해결책

useEffect(() => {
    if (editor && text && editor.isEmpty) {
      editor.commands.setContent(text);
    }
  }, [editor, text]);

 

 

editor.isEmpty

- boolean provided by Tiptap that checks if current ProseMirror document contain meaningful content

 

Why can text be truthy but editor.isEmpty be true?

1. React state loads from DB

text = "<p>Hello</p>"  // truthy

 

2. Editor just mounted

Tiptap always starts like this

<p></p>

 

 

editor.isEmpty === true

//So at that moment, 
text → truthy
editor.isEmpty → true

First time everything is ready

- editor exists ✅
- text exists ✅
- editor.isEmpty ✅ (true)

=> So editor.commands.setContent(text) works

 

3. Next Render

React re-runs the effect because dependencies changed or re-render hapend

- editor exists ✅
- text exists ✅
- editor.isEmpty ❌ (false)

=> useEffect does not run anymore