react-draft-wysiwyg로 텍스트 에디터 구현하기

Draft.js의 state

useState hook을 이용해서 구현

ContentState

• text editor의 본문 (editor)

EditorState

• 전체 text editor (toolbar, 옵션 등 포함)

react-draft-wysiwyg의 hashtag decorator

1. react-draft-wysiwyg/src/Editor/index.js

• this.props.hashtag : Wysiwyg 컴포넌트에 전달하는 Props 중 hashtag 속성에 객체 전달

getCompositeDecorator = toolbar => {
    const decorators = [
      ...this.props.customDecorators,
      getLinkDecorator({
        showOpenOptionOnHover: toolbar.link.showOpenOptionOnHover,
      }),
    ];
    if (this.props.mention) {
      decorators.push(
        ...getMentionDecorators({
          ...this.props.mention,
          onChange: this.onChange,
          getEditorState: this.getEditorState,
          getSuggestions: this.getSuggestions,
          getWrapperRef: this.getWrapperRef,
          modalHandler: this.modalHandler,
        })
      );
    }
    if (this.props.hashtag) {
      decorators.push(getHashtagDecorator(this.props.hashtag));
    }
    return new CompositeDecorator(decorators);
  };

2. react-draft-wysiwyg/src/decorators/HashTag/index.js

• hashCharacter: trigger로 작용
• separator: endpoint로 작용

constructor(config) {
    this.className = config.className;
    this.hashCharacter = config.hashCharacter || "#";
    this.separator = config.separator || " ";
  }