スレートです.JS、そして、それは、Quillとドラフトを交換します.JS ?

執筆Ekekenta Odionyenfe ✏️
Slate .js リッチテキストエディタを作成するための高度にカスタマイズ可能なプラットフォームです.それはあなたがおそらく媒体、dropboxの紙、またはGoogleドキュメントで使用してきたものに類似した強力な、直感的なエディタを作成することができます.これらはすぐに多くのWebアプリケーションの標準機能になっているとスレートのようなツールは、それらを簡単に実装するには、プログラムを確実に複雑になることはありません.
スレートはまだ書き込み時にベータ版ではありますが、それが自然に置き換える可能性があるかどうかを尋ねるのは当然ですmature platforms like Quill and Draft.js . 短い答えは、それがあまりにも早く話すことですが、ここでいくつかの事実はなぜ可能性がサポートされます.

スレートの新機能JS ?
あなたの反応アプリケーションのためのリッチテキストエディタを構築することは容易ではない.アプリケーションがサイズで成長するにつれて、より生産的でサポート豊富なツールが必要です.Quillのようなフレームワークでは、開発者は性能問題を解決するために実質的なハックを通過しなければならない.でもスレート.JSは以下の機能をより簡単にするように設計されています.

ファーストクラスプラグイン
その他の反応は、追加機能を持つユーザーを提供するブリュレとドラフト提供プラグインのようなリッチテキストエディタをベース.一方、スレートは、最初のクラス実体としてプラグインを認識します基本的な編集機能も、明確なプラグインとして設計されています.それはあなたが完全に編集経験を変えることができることを意味します.そして、あなたが図書館の標準仮定と戦うことなく、媒体またはDropboxのような複雑なエディタを開発することができます.

DOMと平行
DOMはスレートのデータモデルの基礎となる.ドキュメントは、選択と範囲を使用し、通常のイベントハンドラのすべてを公開する階層ツリーです.これは、テーブルやネストされたブロックの引用などの洗練された機能が可能であることを意味します.スレートは、DOMでできることは何でもかなり実行できます.

入れ子型文書モデル
スレートのドキュメントモデルは、DOM自体のように、階層的で再帰的なツリーです.お使いのユースケースに応じて、上記のように、テーブルやネストされたブロックの引用符のような複雑なコンポーネントを組み込むことができます、または単に階層の1つのレベルを採用することで物事をシンプルに保つことができます.

ステートレスビューと不変データ
スレートエディタは無反応で、不変のデータ構造を反応を通して不変にします.JSは、コードと書き込みプラグインの理由をより簡単にします.比較のために、Quillは独自の変更を処理して、ユーザーに編集を防ぐことを許しません.Quillは変更を防ぐことはできませんが、いつでも値が既存の状態から変化するコンテンツをオーバーライドします.

スキーマレスコア
スレートのコアロジックは、あなたが変更されるデータの構造についての仮定を行いませんので、前提条件は、あなたが最も基本的なユースケースを超えて移動する必要がガードをキャッチするライブラリに焼かれていません.これは、深刻なパフォーマンスの問題が発生する可能性がありますクワールとドラフトでの作業.js

クリアコア境界
プラグインの最初のデザインとスキーマレスコアでは、“コア”と“カスタム”の間のラインは、はるかに明らかであり、これはコアの経験はエッジケースで詰まっていないことを意味します.

直感的な変更
スレートのテキストは、“変更”は、高レベルかつ簡単に作成し、理解するために意図されて編集され、カスタム機能を可能な限り表現することができます.これは劇的にコードについての理由をあなたの能力を向上させます.

共同準備データモデル
スレートのデータ形式は、共同編集を上に構築できるように意図されているので、開発者はあなたのエディタを共同作業することを決定する場合は、すべてを再考する必要はありません.

スレート.インアクション
今、簡単なリッチテキストエディタを構築することによってアクションのスレートを見てみましょう.開始するには、我々は新しい反応プロジェクトを作成する必要があります我々は、そのために作成反応アプリを使用します.以下のコマンドを実行します.

>npx create-react-app rich-text-editor

必要なパッケージがインストールされている間、コーヒーを1杯作ることができます.インストールが完了すると、次の3つのパッケージをインストールします.

npm i --save slate slate-react slate-history

次に、アプリケーションを起動します.

npm start

次は開くApp.js コンポーネントのインストールとインストール

import React, { useMemo, useState } from 'react'
import { createEditor } from 'slate'
import { Slate, Editable, withReact } from 'slate-react'

次のステップは新しいEditor オブジェクト.私たちはuseEditor 我々のエディタを貸し手に安定させるフック.次に、段落といくつかのダミーテキストを使用してエディタで入力を処理する状態を作成します.

const editor = useMemo(() => withReact(createEditor()), [])
const [value, setValue] = useState([
    {
      type: 'paragraph',
      children: [{ text: 'I am a Slate rich editor.' }],
    },
  ])

今、私たちのスレートエディタ、そのプラグイン、その値、その選択、およびすべての変更は、エディタには、スレートコンテキストプロバイダをレンダリングすることによって行わ追跡してみましょう.次に、<Editable> 我々の反応文脈の中の構成要素.
The <Editable> コンポーネントはcontentEditable コンポーネントの反応.これは、最寄りのための編集可能なリッチテキスト文書をレンダリングしますeditor レンダリングされるたびにコンテキスト.次のコードを使用してレンダリングメソッドを変更します

return (
    <Slate
      editor={editor}
      value={value}
      onChange={newValue => setValue(newValue)}
    >
      <Editable />
    </Slate>
  )

テキストエディタを持っているので、アプリケーションをテストしますlocalhost:3000 お気に入りのブラウザで.

スレート.JS ?
スレートは、開発者は、クエイルとドラフトと大規模なアプリケーションを構築するときに発生する可能性があります挑戦に対処するために作成されました.jsこれは、高度な動作を開発するために必要な調整を行うことによって、ドキュメントの作成を変換するように設計されました.それはしばしばクィルやドラフトで複雑に証明された.
クエイルは、間違いなく、エディタのドロップです何も変更せずに始めることができます.しかし、最も基本的なユースケースを超えた場合、特定のパフォーマンス問題に遭遇する可能性がありますa recognized defect .
一方、スレートは、あなたが選択したものを行うために柔軟性を提供することによって実際の生産性を容易にするように設計されました.スレートは、チームメイトとのシームレスなコラボレーションを可能にするためにボックスの中から、Markdown、Googleドキュメント、および媒体と洗練された統合を提供しています.
これは、テーブルを追加するような複雑な操作を実行し、それらのテーブルに画像と箇条書きのリストを挿入することができます.スレート.JSはHTML、Markdown、その他の形式にシリアル化することができます.HTMLまたはMarkdownにドキュメントを変換するような単純なタスクは、より少ないboilerplateコードでより簡単になります.
すべてを言って、それは間違いなくスレートを与える価値がある.試してみて.

スレートは、ブリキとドラフトを交換します.JS ?
正直に言うと、これはそうではないかもしれない.スレート.JSはまだベータ版で、安定版はまだリリースされていない.あなたのアプリケーションがクラッシュするか、いくつかの機能が正常に動作しない場合があります.
再び、彼らの不完全さ、悪臭とドラフトにもかかわらず.JSは現在、長い間生産されています.そうでなければ、プログラミング言語に関しては完璧なものはない.その上、Orgがシステムを短い期間内に全く新しい何かに変えるのは簡単ではありません.
最終的に、スレートは生産等級アプリケーションのために厳密に使用されませんでした、そして、それは非効率的であるとしてクワールとドラフトを露出するそれらのあいまいな仕事を取り扱うことが証明されませんでした.
多分、1年かそこらで、我々はスレートと彼らの経験について会社と開発者から聞いています-彼らがQuillとドラフトの既知の欠陥を克服した方法.おそらくその背後のコミュニティは、それが本当に実行可能な解決策である点にそれを変更します.それは、Quillとドラフトを取り替えますか?我々は今のところはわかりません.

あなたはパフォーマンスを向上させるために新しいJSライブラリを追加したり、新機能を構築するか?彼らが反対をしているならば、どうですか?
フロントエンドがより複雑になっていることは疑いありません.あなたのアプリケーションに新しいJavaScriptライブラリと他の依存関係を追加すると、あなたのユーザーが未知の問題に実行されないように、より多くの可視性が必要になります.
LogRocket あなたがより効果的にバグに反応することができるように、彼らがあなた自身のブラウザーで起こったかのようにあなたがJavaScript誤りを再生させるフロントエンドアプリケーションモニタリングソリューションです.

LogRocket フレームワークに関係なく、任意のアプリケーションで完全に動作し、RedUx、VUEX、および@ NGRX/ストアからの追加のコンテキストを記録するプラグインがあります.問題が発生した理由を推測する代わりに、問題が発生したときにアプリケーションがどのような状態になったかを集計およびレポートできます.また、クライアントのCPU負荷、クライアントのメモリ使用量などのメトリクスを報告する、あなたのアプリケーションのパフォーマンスを監視し、より多くの.
自信を持ってビルド-Start monitoring for free .