npm install draft-js

const tagData = ['HTML', 'CSS', 'JavaScript', 'React', 'Node.js', 'Angular', 'Vue.js', 'Python', 'Java', 'C++'];

import { Editor, EditorState } from 'draft-js';

// EditorState 초기화
const [editorState, setEditorState] = useState(() => EditorState.createEmpty());

// 에디터 상태 업데이트
const handleEditorChange = (newEditorState) => {
  setEditorState(newEditorState);
};

// Draft.js의 onChange 이벤트 핸들러
const handleTextChange = (editorState) => {
  const contentState = editorState.getCurrentContent();
  const selectionState = editorState.getSelection();
  const startKey = selectionState.getStartKey();
  const startOffset = selectionState.getStartOffset();
  const blockWithFocus = contentState.getBlockForKey(startKey);
  const text = blockWithFocus.getText();

  let queryText = '';
  let tagSuggestions = [];

  // 커서 위치 이전 텍스트 추출
  for (let i = startOffset - 1; i >= 0; i--) {
    const char = text[i];
    if (char === ' ' || char === '@') {
      break;
    }
    queryText = char + queryText;
  }

  // 태그 추천 목록 생성
  if (queryText.length > 0) {
    tagSuggestions = tagData.filter((tag) =>
      tag.toLowerCase().startsWith(queryText.toLowerCase())
    );
  }

  // 추가적인 로직 처리 및 상태 업데이트
  // ...

  // 태그 추천 목록을 표시하기 위해 UI 업데이트
  // ...

  // 기존 에디터 상태 업데이트
  handleEditorChange(editorState);
};

import { ContentState, Modifier } from 'draft-js';

// 태그 선택 핸들러
const handleTagSelection = (tag) => {
  const contentState = editorState.getCurrentContent();
  const selectionState = editorState.getSelection();

  // 선택된 텍스트 영역에 태그 삽입
  const newContentState = Modifier.insertText(
    contentState,
    selectionState,
    `#${tag} `
  );

  // 에디터 상태 업데이트
  handleEditorChange(EditorState.push(editorState, newContentState));
};