強(qiáng)力でカスタマイズ可能なリッチテキスト エディターで React アプリを強(qiáng)化したい場合は、TipTap が最適な選択肢です。このチュートリアルでは、TipTap をプロジェクトに統(tǒng)合し、動(dòng)的なユーザー エクスペリエンスを?qū)g現(xiàn)するメンション機(jī)能を追加する方法を説明します。

構(gòu)築するもの

このチュートリアルが終わるまでに、次のことができるようになります:

1. TipTap で構(gòu)築された完全に機(jī)能するリッチテキスト エディター。
2. @ によってトリガーされるメンションをサポートし、動(dòng)的な提案リストを完備します。
3. プレースホルダーの表示やカーソルの保存などの特殊なケースの解決に関する洞察。

TipTap の詳細(xì)については、公式ドキュメントを參照するか、GitHub リポジトリを參照してください。

ステップ 1: 依存関係をインストールする
始める前に、必要なライブラリをインストールしてください:

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

ステップ 2: 基本的なリッチテキスト エディターを作成する

まず、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} />;  
};

ステップ 3: メンションを追加する

メンションは、特にチャットや共同アプリケーションでのユーザーの対話性を高めます。実裝するには:

1. メンション拡張機(jī)能をインストールして構(gòu)成します

RichTextEditor コンポーネントを変更して Mention 拡張機(jī)能を含めます。

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. プレースホルダーが表示されません:

エディターが空の場合にヒントを表示するには、プレースホルダー拡張機(jī)能を使用します。

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

1. メンションの提案が表示されない: フィルタリングされ、期待どおりのリストが返されることを確認(rèn)するには、suggestion.items メソッドをチェックしてください。

ステップ 6: アプリに統(tǒng)合する

エディターをモーダルまたはフォーム コンポーネントでラップして、通知やコメントなどのより大きな機(jī)能の一部にします。以下に例を示します:

import React from 'react';  

const NotificationForm = ({ mentions, onSubmit }) => {  
  const [content, setContent] = React.useState('');  
  return (  
    <form onSubmit={() => onSubmit(content)}>  
      <RichTextEditor content={content} onChange={setContent} mentions={mentions} />  
      <button type="submit">Send</button>  
    </form> 
  );  
};

結(jié)論

TipTap を使用すると、強(qiáng)力で使いやすいリッチテキスト エディターを構(gòu)築できます。メンションを追加すると、アプリの対話性が強(qiáng)化され、ユーザーにとってより魅力的なものになります。

詳細(xì)については、TipTap の公式 Web サイトをご覧ください。この記事から何か新しいことを?qū)Wびましたか?コメントで知らせてください！ ?

以上がReact で TipTap を使用してリッチテキスト エディターを構(gòu)築する (メンション付き)の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。