toast... react toast ui editor 사용하기 도전 약 4시간째

토스트 먹고 싶다.
버터에 강불로 짧게 구워서 딸기쨈 얹어먹는 별거아닌 것 같은데 별거인 토스트

0615 일지의 토스트와 다툰 기록에서 이어짐

TextEditor.tsx가 원래 이랬는데,

import Editor from "@toast-ui/editor";
// import dynamic from "next/dynamic";
import "@toast-ui/editor/dist/toastui-editor.css"; // Editor's Style
import "tui-color-picker/dist/tui-color-picker.css";
import "@toast-ui/editor-plugin-color-syntax/dist/toastui-editor-plugin-color-syntax.css";

import colorSyntax from "@toast-ui/editor-plugin-color-syntax";
// const Editor = dynamic(() => import("@toast-ui/editor"), { ssr: false });

export default function TextEditor() {
  const editor = new Editor({
    el: document.querySelector("#editor"),
    height: "500px",
    initialEditType: "markdown",
    previewStyle: "vertical",
    plugins: [colorSyntax],
  });

  editor.getMarkdown();

  return (
    <div>
      <div id="editor"></div>
    </div>
  );
}

id가 editor인... div쪼가리를 내보내서 오류가 났던걸까...? ? ? ? ? ? ? ?

그리고 내가 하고 있던 건 리액트 방식이 아니었다... 헉^^...... ......

yarn add @toast-ui/react-editor

근데 Editor를 가져오려고 하면 자꾸 이렇게 뜬다.

독스를 찾아서 그냥 다 복붙했다

import '@toast-ui/editor/dist/toastui-editor.css';

import { Editor } from '@toast-ui/react-editor';

const MyComponent = () => (
  <Editor
    initialValue="hello react editor world!"
    previewStyle="vertical"
    height="600px"
    initialEditType="markdown"
    useCommandShortcut={true}
  />
);

Editor에 빨간 밑줄이 사라졌다. 왜...?왜지? 내가 뭔갈 잘못했겠지...?근데 뭘 잘못했던걸까 아직도 모르겠어


이름도 새로운 마음으로 텍스트 에디터에서 토스트 에디터로 바꿨다.
근데 안돼서 진짜 멘붕이었는데 return 쓰는 걸 까먹어서 그런거였다. 하하하
그리고 된다 진짜 오바 조금 보태서 눈물날 것 같다. 이거에 4시부턴가 계속 매달려서...
그리고 확인하려면 로그인 해야해서 로그인하세요! 팝업보고 로그인하면 로그인 완료! 팝업보고 다시 작성하기 눌렀는데,
오류 뜨는 슬픔을 맛봐야했다.
난 에러를 그렇게 싫어하진...않고... 사실 어느정도 받아들이는 편인데, 이번엔 진짜 너무너무..^^ 이게 문제라고 생각했는데 저거 터지고 저거 막으면 이거 터지고,,,, 수업시간에 배웠던 리액트 퀼 쓸까 하다가 오기가 생겨가지구.....
혹시나 나처럼 헤맬 사람,,,(to 미래의 나...) 를 위해 코드를 올려놓겠다.

// 따로 분리한 toastEditor 컴포넌트
import "@toast-ui/editor/dist/toastui-editor.css";

import { Editor } from "@toast-ui/react-editor";

export default function ToastEditor() {
  return (
    <Editor
      initialValue="hello react editor world!"
      previewStyle="vertical"
      height="600px"
      initialEditType="markdown"
      useCommandShortcut={true}
    />
  );
}

// 에디터를 사용할 presenter 컴포넌트

import dynamic from "next/dynamic";

export default function WriteUI(props) {

  const ToastEditor = dynamic(() => import("../../toasteditor/ToastEditor"), {
    ssr: false,
  }); // dynamic import 해야 self를 찾을 수 없다는 오류가 뜨지 않는다(프리렌더링 문제)
	  // +나중에 추가+ WriteUI밖에서 import 해야 한다. 이러면 리렌더될 때마다 import됨 
	// ...

  return (
      <div>
        <ToastEditor />
      </div>
        )
        
 }

++ 나중에 추가 🥕🥕🥕🥕리렌더 될때마다 import 해오기 때문에 함수 밖에다가 써줘야 한다. 틀린 코드 ⚡⚡⚡⚡

https://github.com/nhn/tui.editor/tree/master/apps/react-editor

GitHub - nhn/tui.editor: 🍞📝 Markdown WYSIWYG Editor. GFM Standard + Chart & UML Extensible.

https://nhn.github.io/tui.editor/latest/ToastUIEditorCore

https://nhn.github.io/tui.editor/latest/ToastUIEditorCore/