t_wの輪郭

Feedlyでフォローするボタン
//Editor.tsx
import React, { useState, useEffect } from 'react';
import Quill from 'quill';

let quill:Quill | null = null

export default function Editor({style}:any) {
    useEffect(() => {
        if(!quill) {
            quill = new Quill('#editor', {
                modules: {
                    toolbar: [
                        [{ header: [1, 2, 3, false] }],
                        [{ 'list': 'ordered'}, { 'list': 'bullet' }],
                        [{ 'size': ['small', false, 'large', 'huge'] }],
                        ['bold', 'italic', 'underline'],
                        ['image', 'code-block', 'blockquote']
                    ]
                },
                placeholder: 'Type your text here...',
                theme: 'snow' // or 'bubble'
            });
        }
    });
    return (
        <div style={style}>
            <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet" />
            <div id="editor">
            </div>
        </div>
    );
}

//App.tsx
import Editor from "./Editor";

function App() {
  return (
    <div className="App" style={{display:"flex", alignItems:"center", flexDirection:"column"}}>
      <br/>
      <Editor style={{width:"80vw", height:"300px"}} />
    </div>
  );
}

export default App;


Reactよく分かってないので間違った作りしてそう。