Lexicalで自作プラグインを作りリッチテキストエディターをカスタマイズする | Tech Q Lab - 株式会社キューのテックブログ
2022.11.21[Mon][シリーズ連載] Lexicalでリッチテキストエディターを自作するLexicalで自作プラグインを作りリッチテキストエディターをカスタマイズするReactJavascript こんにちは、エンジニアチームのさらだです。 前編に続き、Lexicalについてのご紹介です。 前回はLexicalのコンセプトに触れつつ、リスト表記を切り替えるツールバーを用意するところまで行いました。 後編ではLexical既存のプラグインだけでは実装できない機能をカスタムプラグインという形で実装したり、見た目やデータの取り扱いなど実際にプロジェクトで利用できるところまでやっていきます。 カスタムプラグインの作り方Youtube動画の埋め込み(カスタムプラグインを利用する)スタイルを調整する外部で入力情報を管理する前回のコード前編で完成したコードから作業を進めます。 後編から進める方
WYSIWYGエディタライブラリをMantineのRichTextEditorに変更した話 #2：ライブラリ選定
エディタライブラリの変更について こんにちは！ テイラーワークス プロダクトチームの谷本です。 前回に引き続き、自社プロダクトで使用しているWYSIWYGエディタのライブラリを変更した際の話をまとめていきます。 本記事は連載構成になっております。 本連載の構成 #1：概要 #2：エディタライブラリ比較、選定 ←本記事です📝 #3：エディタコンポーネント実装（UIカスタマイズと機能拡張） #4：旧エディタとの互換性対応、まとめ 今回は、ライブラリ比較から選定までの話をまとめます！ ライブラリ選定 ライブラリ比較検討 前提条件 1.Next.js+TypeScript対応していること 2.機能拡張できること 3.HTMLで保存できること ライブラリ比較（各情報は2023年2月時点） ライブラリ UI提供 導入しやすさ 拡張性 日本語対応 メモ
OpenAIのChat APIの返答をストリーミングする（Node.js）
ChatGPTでは、全ての回答の生成を待たずに、回答が順次画面に表示されていきます。 実は、OpenAIのChat APIを使う場合も、同じ挙動を実現できます。 アプリの例 方法1. ブラウザで直接OpenAI APIを叩く 以下の記事で紹介されているように、ブラウザのFetch APIを使って直接OpenAIの APIを叩く方法が一番シンプルにできそうです。 注意点として、APIキーがユーザーに知られるため、ユースケースが限られそうです。 方法2. Node.jsのサーバーを介してOpenAI APIを叩く 今回は、以下のように中間にNode.jsのサーバーを挟む例を示します。 Step1. Node.jsサーバーの実装 ※注意点として、サーバーは text/event-stream 形式のレスポンスを返す必要があり、 Next.js API Routes + VercelやAWS Am
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
How To Build A Floating Menu With Lexical and React
Flowise - Low code LLM Apps Builder
GitHub - GomaGoma676/frontend-todo-nextjs: 🦁 Front end for the NestJS + Next.js Todo application
