Meta の新しいリッチテキストエディターフレームワーク Lexical を調べる(実践編)
Lexical で簡単なリッチテキストエディターを作ってみよう Lexical は Meta が開発したリッチテキストエディターフレームワークです。以前 Lexical のアーキテクチャを調べてまとめた記事を執筆したので、概要や設計についてはそちらをご覧ください。 Lexical のコアライブラリは EditorState の差分から最も効率のいい方法で DOM を更新する Reconciler がメインで、エディターの機能やビューはプラグインという形で各々実装する必要があります。 ただ、コアライブラリだけ提供しても使う側が戸惑ってしまうので、すでに多くの公式プラグインが同じリポジトリで提供されています。 そして注目すべきは Playground の充実度です。 もはや Playground をそのまま使っても十分なほど多機能なエディターが実装されています。もちろんソースコードは同じリポジ
Meta の新しいリッチテキストエディターフレームワーク Lexical を調べる
Brand-new Rich Text Editor Framework! 先日 Meta から新しいリッチテキストエディターのフレームワーク Lexical の OSS 化が発表されました。 一方で、 Meta が開発していた既存の React 用リッチテキストエディターフレームワーク Draft.js はアーカイブが決定されました。 実は自分は業務で Draft.js をめちゃくちゃ使っていて、発展に期待しつつウォッチしていたので開発が終了してしまうのが非常に残念ではあるのですが、代わりにより高度に抽象化されたフレームワークが公開されたのでこれはマスターするしかありません。 ということで調べたことをまとめていこうと思います。 執筆時点(2022 年 4 月)では正式リリースされていないので、本稿のサンプルコードは参考にならなくなる可能性があります。 概要 エディターを作るためのフレーム
Meta（旧Facebook）、テキストエディタ用のUIコンポーネント「Lexical」をオープンソースで公開。Reactなどフレームワークの依存性なく軽量で高速、機能拡張も容易に
Reactなどを始めとする特定のJavaScriptフレームワークやライブラリには依存していないため、基本的にどんなフレームワークとも組み合わせて利用することが可能。 Lexicalは信頼性、アクセシビリティ、実行速度にフォーカスして開発されていると説明されており、W3Cのアクセシビリティ標準となる「Web Content Accessibility Guidelines」（WCAG）にも準拠しており、Webブラウザの読み上げ機能などを始めとするアクセシビリティ機能に対応。 圧縮後のサイズは22kbと比較的小さく、性能に関しては同社が以前から公開していたエディタ用UIコンポーネントのDraft.jsと比較してタイピング性能が20％から70％向上したと説明されています。これは特に性能の低いデバイスで利用するときに有利に働くとのこと。 拡張が容易になるようにAPIが容易されており、すでにRea
Atom の 共同編集機能 を支える技術について調べてみた - Qiita
キーワード 分散システム、一貫性モデル、CRDT、結果整合性 はじめに Atomエディタの共同編集機能を支える技術に関する論文1 2を読んでみました ざっくりメモを残そうと思います 理解が不十分な部分や省略があり、詳細は元ネタ要参照です Teletype (beta) for Atomとは Atom用の共同編集用プラグインです Google Docsのように、複数ユーザーが1つの文書をリアルタイムで編集できるようになります オンラインエディタの動作 オンラインエディタは内部的に下記のフェイズからなると思います 編集フェイズ ローカルでの挿入・削除 反映フェイズ リモート（別編集者のエディタ）へ反映 編集フェイズ Site1: 1が挿入され a1b に。 Site2: 2が挿入され a2b に。 各編集内容がネットワーク経由でやり取りされます 反映フェイズ Site1: 2 の挿入が反映され
Building real-time collaboration applications: OT vs CRDT
From January 2023, TinyMCE no longer offers Real-Time Collaboration (RTC) for new customers. For Existing customers, we'll be in contact to discuss options. Please reach out to your Account Manager if you are a customer using RTC, and you have any questions about the plugin. This is the first in a series of blog posts documenting the TinyMCE RTC journey and decisions along the way. Next post: Coll
共同編集を支える技術とライブラリの活用 - ICS MEDIA
『Google Docs』や『Figma』といったリアルタイムな共同編集ツールの恩恵を受けている人は数多くいるでしょう。『Visual Studio Live Share』のようなエンジニアに嬉しいツールも生まれ、今日ではオンライン上でも円滑なコミュニケーションが可能になっています。 これらのツールの基礎にあるのが「共同編集」のテクノロジーです。本記事ではこの技術に焦点を当て、その仕組みと主にフロントエンドでの実用例について紹介します。 記事の前半では、リアルタイムな共同編集に用いられる技術やアルゴリズムについて、発展の歴史とあわせて紹介します。解説用のコードにはJavaScriptおよびTypeScriptを使用しますが、フロントエンドエンジニアに限らず共同編集の仕組みについて気になる読者が知識を深めるきっかけとなるはずです。 さらに後半ではフロントエンドの開発者目線で、前半で紹介した技
リアルタイム共同編集エディタを作れるyjsを触ってみた - Qiita
この記事はエンジニアと人生コミュニティのAdvent Calender2021 #2 の16日目の記事です。 マーケット・マイニング株式会社の案件でリアルタイム共同編集エディタを開発するため、技術調査として yjs を試しました。 ただ、yjsの日本語リソースが少なく、公式ドキュメントも執筆中のため、全体像の把握が難しかったり、私が欲しかったデータ保存関係のチュートリアルが作成中であったりと、必要な情報はコードやGitter等を追う必要がありました。 そこで本記事では、調査時に私が欲しかった以下の項目についてまとめます。 yjsの全体像・利用しているデータ構造 デモアプリの利用方法・アーキテクチャ yjsでのデータ保存の仕組み（サーバサイド、クライアントサイド) 今後yjsを利用される方の助けになれば幸いです。 ドキュメントが充実している箇所については概要説明にとどめ、ドキュメントへのリン
テキストエディタで使われがちなデータ構造 Piece Table の概要と実装 - A Memorandum
テキストエディタのデータ構造 Gap method Piece Table method Piece Table の構造 Piece Table の実装 Piece Table のメソッド まとめ テキストエディタのデータ構造 テキストエディタで採用されているデータ構造にはいろいろあります。 こちらの論文 Data Structures for Text Sequences では各種データ構造について比較検討されています。 多くは、Gap method や Piece table method をベースにしたものが多いのではないでしょうか(図で言う最下部の中心の丸印に当たります)。最近では Rope なども有名ですね。 Gap method Gap method では、現在のカーソル位置で、テキストバッファを2つに分割し Gap を間に挟み、カーソル位置に対する編集(テキスト追加/削除)を
I was wrong. CRDTs are the future
I saw Martin Kleppmann’s talk a few weeks ago about his approach to realtime editing with CRDTs, and I felt a deep sense of despair. Maybe all the work I’ve been doing for the past decade won’t be part of the future after all, because Martin’s work will supersede it. Its really good. Lets back up a little. Around 2010 I worked on Google Wave. Wave was an attempt to make collaboratively editable sp
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
