React컴포넌트에서 HTMLElement contentEditable 속성 사용하기

const EditableBlock = ({ block }) => {
  return (
    <div key={block.id} contentEditable={true}>
      {block.contents}
    </div>
  );
};

export default EditableBlock;

React에서 위와 같이 사용하면 난리를 친다. 그래서 react-contenteditable 라이브러리를 활용할 수 있다. 

 

https://www.npmjs.com/package/react-contenteditable

react-contenteditable

yarn add react-contenteditable

 

 

아래와 같이 사용할 수 있다. 

import ContentEditable from "react-contenteditable";
import { useState, useRef } from "react";

const EditableBlock = ({ block }) => {
  console.log("block", block);
  const [state, setState] = useState({ html: block.contents, tagName: "div" });
  const ref = useRef();

  return (
    <ContentEditable
      innerRef={ref}
      html={state.html}
      disabled={false}
      onChange={(e) => setState((prev) => ({ ...prev, html: e.target.value }))}
    />
  );
};

export default EditableBlock;