React에서 TipTap을 사용하여 RichText 편집기 구축(멘션 포함)

강력하고 사용자 정의 가능한 RichText 편집기로 React 앱을 향상시키고 싶다면 TipTap이 탁월한 선택입니다. 이 튜토리얼은 TipTap을 프로젝트에 통합하고 동적 사용자 경험을 위한 멘션 기능을 추가하는 과정을 안내합니다.

무엇을 만들 것인가

이 튜토리얼이 끝나면 다음을 얻게 됩니다.

1. TipTap으로 구축된 모든 기능을 갖춘 RichText 편집기.
2. @에 의해 실행된 멘션 지원, 동적 제안 목록 완성
3. 자리 표시자 가시성 및 커서 보존과 같은 극단적인 경우 해결에 대한 통찰력

TipTap에 대한 자세한 내용을 보려면 공식 문서를 방문하거나 GitHub 저장소를 탐색하세요.

1단계: 종속성 설치
시작하기 전에 필수 라이브러리를 설치하세요.

npm install @tiptap/react @tiptap/starter-kit @tiptap/extension-mention

2단계: 기본 RichText 편집기 만들기

RichTextEditor 구성 요소를 만드는 것부터 시작하세요. 간단한 구현은 다음과 같습니다.

import { useEditor, EditorContent } from '@tiptap/react';  

import StarterKit from '@tiptap/starter-kit';  

export const RichTextEditor = ({ content, onChange }) => {  
  const editor = useEditor({  
    extensions: [StarterKit],  
    content: content,  
    onUpdate: ({ editor }) => {  
      onChange(editor.getHTML());  
    },  
  });  
  return <editorcontent editor="{editor}"></editorcontent>;  
};

3단계: 멘션 추가

멘션은 특히 채팅이나 협업 애플리케이션에서 사용자 상호 작용을 향상시킵니다. 이를 구현하려면:

1. 멘션 확장 설치 및 구성

멘션 확장을 포함하도록 RichTextEditor 구성 요소를 수정합니다.

import Mention from '@tiptap/extension-mention';  

export const RichTextEditor = ({ content, onChange, mentions }) => {  
  const editor = useEditor({  
    extensions: [  
      StarterKit,  
      Mention.configure({  
        HTMLAttributes: { class: 'mention' },  
        suggestion: {  
          items: ({ query }) =>  
            mentions.filter(item => item.display.toLowerCase().includes(query.toLowerCase())).slice(0, 5),  
          render: () => {  
            let component;  
            let popup;  
            return {  
              onStart: (props) => {  
                popup = document.createElement('div');  
                popup.className = 'mention-popup';  
                document.body.appendChild(popup);  
                component = {  
                  updateProps: () => {  
                    popup.innerHTML = `  
                      <div>



<h3>
  
  
  Step 4: Style the Mentions Popup
</h3>

<p>Mentions should be visually distinct. Add the following styles to enhance usability:<br>
</p>

<pre class="brush:php;toolbar:false">.mention-popup {  
  background: white;  
  border-radius: 8px;  
  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);  
  padding: 8px;  
  position: absolute;  
  z-index: 1000;  
}  
.mention-popup .items {  
  display: flex;  
  flex-direction: column;  
}  
.mention-popup .item {  
  padding: 8px;  
  cursor: pointer;  
  border-radius: 4px;  
}  

.mention-popup .item:hover,  
.mention-popup .item.is-selected {  
  background: #f0f0f0;  
}

5단계: 구현 중에 직면한 극단적인 사례

1. 커서 점프: 입력하는 동안 커서 점프를 방지하려면 콘텐츠 업데이트가 커서 위치를 유지하는지 확인하세요.

const editor = useEditor({  
  extensions: [StarterKit],  
  content,  
  onUpdate: ({ editor }) => {  
    const selection = editor.state.selection;  
    onChange(editor.getHTML());  
    editor.commands.setTextSelection(selection);  
  },  
});

1. 표시되지 않는 자리표시자:

편집기가 비어 있을 때 힌트를 표시하려면 자리표시자 확장을 사용하세요.

import Placeholder from '@tiptap/extension-placeholder';  
const editor = useEditor({  
  extensions: [  
    StarterKit,  
    Placeholder.configure({ placeholder: 'Type something...' }),  
  ],  
});

1. 멘션 제안이 표시되지 않음: presents.items 메소드를 확인하여 예상 목록을 필터링하고 반환하는지 확인하세요.

6단계: 앱에 통합

모달 또는 양식 구성 요소로 편집기를 래핑하여 알림이나 댓글과 같은 더 큰 기능의 일부로 만듭니다. 예는 다음과 같습니다.

import React from 'react';  

const NotificationForm = ({ mentions, onSubmit }) => {  
  const [content, setContent] = React.useState('');  
  return (  
    

onSubmit(content)}> Send

); };

결론

TipTap을 사용하면 강력하면서도 사용자 친화적인 RichText 편집기를 구축할 수 있습니다. 멘션을 추가하면 앱의 상호작용성이 향상되어 사용자의 참여도가 높아집니다.

자세한 내용은 TipTap 공식 웹사이트를 참조하세요. 이 기사에서 새로운 것을 배웠습니까? 댓글로 알려주세요! ?