quill-emojiの使い方について

[h-yabi2]

• 極論、以下の設定を追加するだけで表示は可能となる
• サンプルコンポーネント： https://github.com/h-yabi2/react-quill/blob/main/app/components/Component06.tsx

• 公式ドキュメント：

  • https://github.com/contentco/quill-emoji?tab=readme-ov-file

  • https://www.npmjs.com/package/quill-emoji

    import "quill-emoji/dist/quill-emoji.css";

    const modules = useMemo(() => {
    return {
    toolbar: {
      container: "#toolbar",
      handlers: {
        popup: () => {},
        emoji: () => {}
      },
    },
    ~
    // ↓以下が入っていればひとまず表示は可能
    "emoji-toolbar": true,
    "emoji-textarea": true,
    "emoji-shortname": true,
    };
    }, []);

    return (
    <div>
    <div
      id="toolbar"
      className="fixed bottom-[100px] left-0 w-full bg-white z-20"
    >
      <span className="ql-formats">
        <button className="ql-emoji">
          <img src={qlEmoji.src} alt="" />
        </button>
      </span>
    </div>
    
    <ReactQuill
      ref={quillRef}
      modules={modules}
      readOnly={true}
      theme="snow"
      onChange={handleOnChange}
      scrollingContainer="html"
    />
    </div>
    );

動作画面

https://www.awesomescreenshot.com/video/29120866?key=36fd7fc7ecdc77ff9a6c959a14b656c8