会議設計サービスに Lexical を利用して同時編集機能を導入する - Qiita
こんにちは UNIBA 株式会社 の Z1チーム です。 この記事では Lexical を用いた同時編集機能を実現し、プロダクトに組み込んだという話をします。 Lexical を使うと比較的簡単に 同時編集機能ができるかと思います。 プロダクトの一部に同時編集機能を導入したい・・・と思っている方とかの参考になればと思います。 Lexical の使い心地や実装のポイントやハマりどころなどの技術詳細に対しては、別途記事を書きたいと思っています。 今回はそこまで踏み込んで書いていません。あしからず。 プロダクト紹介と宣伝 Z1 チームでは SuperGoodMeetings (以下 SGMs)という、会議を中心にプロジェクトを推進していくサービスを開発しています。 コンサルティングを専門とする Copilot の皆さまと一緒にファシリテーション・会議設計に対して正面から向き合っています。 (Co
LexixalのPlaygroundを深掘りながらデータの永続化について考えてみる
昨今のSaaSでも採用されているテキストエディタですが、その中でも今回は「サポート良し、拡張性良し、パフォーマンス良し」の三拍子揃ったライブラリ「Lexical」をご紹介します。 Lexicalとは何か？ そもそも、テキストエディタの主な目的はテキストの作成と編集です。これは文書の作成からプログラミングまで、あらゆる種類のテキスト作業に使用されます。また、コードレベルまで話を落とすと、自然言語の文章を構造化されたデータに変換すること、つまりテキストをトークン化し、それらを特定のエンティティや関連付けにマッピングすることにあります。 その中でもLexicalは、信頼性、アクセシビリティ、パフォーマンスに重点を置いた、拡張可能なJavaScriptのWebテキストエディタフレームワークです。 開発元はfacebookで今でも活発に開発が進んでいます。最新のリリースは2023年4月18日（202
Wantedlyのエディターを新しいライブラリに移行した話 | Wantedly Engineer Blog
はじめまして、WantedlyのDXチームのカルバン(@kalvin807)です。今日は、私たちのポストエディターでDraftJSからLexicalへの移行についてお話ししたいと思います。 Draft.jsからLexicalへDraft.jsは長い間テキスト編集ライブラリとして使用してきましたが、時々バグや開発の難しさといった問題がありました。2022年にDraftJSのコードがアーカイブされ、新機能の更新が終了しました。この機会に、次のエディターライブラリを検討しました。柔軟性と耐久性を兼ね備えたライブラリを探していました。 一方で、LexicalはMeta社によって開発された新しいOSSエディターで、そのツリー構造とプラグインシステムが開発の容易さと柔軟性を示しています。その結果、私たちはDraftJSをLexicalに置き換えることに決めました。 移行範囲Wantedlyでは、100
GitHub - facebook/lexical: Lexical is an extensible text editor framework that provides excellent reliability, accessibility and performance.
import {$getRoot, $getSelection} from 'lexical'; import {useEffect} from 'react'; import {LexicalComposer} from '@lexical/react/LexicalComposer'; import {PlainTextPlugin} from '@lexical/react/LexicalPlainTextPlugin'; import {ContentEditable} from '@lexical/react/LexicalContentEditable'; import {HistoryPlugin} from '@lexical/react/LexicalHistoryPlugin'; import {OnChangePlugin} from '@lexical/react/
Lexicalを使ってリッチエディタを実現する（画像編）
はじめに Lexicalを使ってリッチエディタを実現する（Link編）に引き続き、今回はMetaが開発するLexicalというライブラリを使って、リッチテキストエディタ上に画像を挿入する機能を実装したいと思います。具体的には、次のような内容を実現したいと思います。 ツールバーからエディタ上に画像を挿入できる 画像をクリップボードから、エディタ上に貼り付けることができる なお、これらの機能はLexical.playgroundの実装を参考にしています。 完成形は以下のデモページで確認が可能です。 実装方針 今回画像の挿入機能を実装するにあたり、下図の流れをとることとします。 ツールバーもしくはクリップボードからの画像挿入を検知し、Lexicalのカスタムコマンドをdispatchする コマンドのListener側でコマンドを受け付け、今回作成するカスタムノード=ImageNodeによって画像
GitHub - ozanyurtsever/verbum: Verbum is a fully flexible text editor based on lexical framework.
import { FC } from 'react'; import { EditorComposer, Editor, ToolbarPlugin, AlignDropdown, BackgroundColorPicker, BoldButton, CodeFormatButton, FloatingLinkEditor, FontFamilyDropdown, FontSizeDropdown, InsertDropdown, InsertLinkButton, ItalicButton, TextColorPicker, TextFormatDropdown, UnderlineButton, Divider, } from 'verbum'; const NoteViewer: FC = () => { return ( <EditorComposer> <Editor hasht
Meta の新しいリッチテキストエディターフレームワーク Lexical を調べる(実践編)
Lexical で簡単なリッチテキストエディターを作ってみよう Lexical は Meta が開発したリッチテキストエディターフレームワークです。以前 Lexical のアーキテクチャを調べてまとめた記事を執筆したので、概要や設計についてはそちらをご覧ください。 Lexical のコアライブラリは EditorState の差分から最も効率のいい方法で DOM を更新する Reconciler がメインで、エディターの機能やビューはプラグインという形で各々実装する必要があります。 ただ、コアライブラリだけ提供しても使う側が戸惑ってしまうので、すでに多くの公式プラグインが同じリポジトリで提供されています。 そして注目すべきは Playground の充実度です。 もはや Playground をそのまま使っても十分なほど多機能なエディターが実装されています。もちろんソースコードは同じリポジ
lexical/packages/lexical-playground/src/plugins/MaxLengthPlugin/index.tsx at main · facebook/lexical
Lexicalを使ってリッチエディタを実現する（Link編）
1. はじめに Metaが開発するLexicalというライブラリを使って、近頃のリッチエディタに備わっている機能について、実現方法を記事に残しておきたいと思います。Lexicalは機能が非常に多く、かつそれぞれの機能が非常に奥深いため、今回は特にリンクの機能にフォーカスして、次のような機能の実現を目指します。 ツールバーのボタンから、選択したテキストをリンクに変換できる URLをテキストエディタに入力（コピペ）するとリンクに自動変換できる URLはリンクカードに変換できる（今回ははてなブログカードを使用） なお、これらの機能はLexical.playgroundの実装を参考にしています。 完成形は以下のデモページで確認が可能です。 2. 事前準備 今回は、React + Next.js + Tailwind CSSを使って開発を行います（これらの説明については割愛します）。Lexicalを
Lexicalでリッチテキストエディターのベースを作る | Tech Q Lab - 株式会社キューのテックブログ
2022.11.14[Mon][シリーズ連載] Lexicalでリッチテキストエディターを自作するLexicalでリッチテキストエディターのベースを作るReactJavascript 簡単な装飾をおこなったコンテンツをGUI上で入力できるリッチテキストエディター。 Wordpressでも利用されているGutenbergなどが有名ですね。 リッチテキストエディターは数あれど、 「この装飾がない！」 「出力をカスタマイズしたいからjson形式で取り出したい！」 「エディター内とフロントアプリケーションのスタイルを合わせたい！」 など、既製ライブラリままだと要件を満たせないこともあると思います。 そこで、今回はMetaのリッチテキストエディターを作れるフレームワーク、Lexicalの使い方を紹介します。 LexicalはReact用のインターフェイスも用意してくれているので、今回はReactでの
リッチテキストエディタフレームワークLexicalの実践的な使い方 - バイセル Tech Blog
はじめに Lexicalで開発する上で躓いたこと カスタムNodeの作成 Custom Nodeの作成 (ParagraphStyleNode) ステップ１ 背景色をNodeに持たせる ステップ２ DOMへの出力設定を追加 ステップ3 エディタで操作するために必要な設定を追加 ステップ4 HTMLに変換するための設定を追加 エディタにNodeを挿入するためのCommandの作成 Selectionで置換可能かを判断 ParagraphStyleNodeに変換 priorityを付ける Nodeを挿入できるボタンUIの作成 エディタに作成したNodeを登録 ParagraphStyleNodeの完成コード 自動リンクプラグインAutoLinkの作成 Commandを使って改行を検知 リンクに変換しない条件 リンクに変換する HTMLへの変換 まとめ はじめに こんにちは。開発2部の富山です。
Lexical
概要 プラグインの組み合わせによって、エディターを構成する。 プレーンなテキストエティターはもちろん、HTML（マークダウン）で記述できるリッチエディターなども利用できる。 // エディターを作成する際の設定 const initialConfig: ComponentProps<typeof LexicalComposer>["initialConfig"] = { namespace: "MyEditor", // エディターの名前 onError: error => console.error(error), // エラー出た時 nodes: nodes, // 利用したいノード theme: theme, // スタイルを適用するためのクラス定義 }; export const Editor: FC = () => { return ( <LexicalComposer initi
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Supported Browsers | Lexical
Serialization & Deserialization | Lexical
Editor State | Lexical
Lexical — How To Use Link Plugins
Bug: `$generateHtmlFromNodes` doesn't work inside of `registerUpdateListener` and `editorState.read` · Issue #2325 · facebook/lexical
lexical-rich-text-example - CodeSandbox
@lexical/react examples - CodeSandbox
How to integrate lexical for submitting Editor as input · facebook/lexical · Discussion #3720