Draft.js는 텍스트 에디터를 구현하기 위한 강력한 라이브러리입니다. 이 라이브러리를 사용하면 사용자가 입력한 텍스트 데이터를 다양한 형식과 스타일로 표현할 수 있습니다. 하지만 기본적으로 Draft.js에는 자동 줄바꿈 기능이 없으므로 이 기능을 직접 구현해야 합니다.

줄바꿈 처리를 위한 인라인 스타일 적용

Draft.js에서 텍스트 에디터의 줄바꿈을 처리하기 위해서는 인라인 스타일을 적용해야 합니다. 먼저, 줄바꿈을 적용할 텍스트에 대한 인라인 스타일을 정의하겠습니다.

const multilineStyle = {
  whiteSpace: 'pre-wrap',
  wordBreak: 'break-word',
};

위의 코드는 whiteSpace 속성을 pre-wrap으로 설정하여 공백과 줄바꿈을 유지하도록 하고, wordBreak 속성을 break-word로 설정하여 긴 단어의 줄바꿈을 처리합니다.

줄바꿈을 적용할 텍스트 블록 컴포넌트 생성

이제 줄바꿈을 적용할 텍스트 블록 컴포넌트를 생성하겠습니다. 해당 컴포넌트는 Draft.js의 ContentBlock 컴포넌트를 상속받아 구현됩니다.

class LineBreakBlock extends ContentBlock {
  render() {
    const { children, ...otherProps } = this.props;

    return (
      <div style={multilineStyle} {...otherProps}>
        {children}
      </div>
    );
  }
}

위의 코드에서 children은 텍스트 블록 안에 있는 내용을 나타내며, multilineStyle을 적용하여 줄바꿈 처리된 텍스트를 렌더링합니다.

줄바꿈 처리 기능 추가

이제 줄바꿈 처리 기능을 추가하기 위해 Draft.js의 에디터 컴포넌트에 blockRendererFn 속성을 설정하겠습니다.

const blockRendererFn = (contentBlock) => {
  if (contentBlock.getType() === 'unstyled') {
    return {
      component: LineBreakBlock,
      editable: true,
    };
  }
};

class CustomEditor extends React.Component {
  render() {
    return(
      <Editor
        blockRendererFn={blockRendererFn}
      />
    );
  }
}

위의 코드에서 blockRendererFn 함수는 에디터의 블록 타입이 unstyled인 경우에만 LineBreakBlock 컴포넌트를 렌더링하도록 설정합니다. 이렇게 하면 줄바꿈을 적용하기 위해 unstyled 타입의 텍스트 블록을 사용할 수 있습니다.

결론

Draft.js에서 텍스트 에디터의 자동 줄바꿈 기능을 구현하기 위해서는 줄바꿈을 처리할 인라인 스타일을 적용하고, 텍스트 블록 컴포넌트를 생성하여 해당 스타일을 적용해야 합니다. 이후, 에디터 컴포넌트에 blockRendererFn 속성을 설정하여 줄바꿈 처리를 적용할 수 있습니다.

참고: Draft.js 공식 문서