Ver.2.11から搭載予定の新しいEditorです。私(steelydylan)が主に開発しています。PaperやNoteなどをイメージしてもらえればわかりやすいと思います。Ver.2.8から導入された、LiteEditorが、インライン要素に対してのみのEditorなのに対して、SmartBlockはブロックとインライン両方を定義して使うことができます。Editorに定義した要素以外が入り込まないようにペースト時や編集時に常にサニタイズされるため、誰が書いても決められたフォーマットで記事を書くことができます。実はこの記事自体もPaperEditorで書いています!PaperEditorにはあらかじめ以下のように利用できるブロックがあります。ParagraphH1H2H3H4H5UlOlBlockquoteCodeTable以下のようなイメージで編集できます。用意されたブロックの中にないブロックでも、自分で定義して追加することも可能です。SmartBlockはすべてがExtensionという考え方で構築されていて、Extensionの設定をからにすると、先ほど紹介したブロックはおろか、インライン装飾や、ブロック削除機能、ブロックの前後移動などもできなくなります。PaperEditorにまだない機能は、Extensionという形でどんどん追加していける設計になっています。体験しよう最新版のPaperEditorはこちらから体験できます。https://competent-einstein-976429.netlify.com/SmartBlockの強みPaperEditorの強みはざっとこんなところです。Guthenbergと比べて初心者でも独自ブロックを作りやすい記事を全てコピーして貼り付けることができる。Facebookが出している、Draft.jsでもスマートフォンでは編集できないですし、Guthenbergはかろうじてスマートフォンで記事が書けますが決して書きやすいとは言えません。その点、PaperEditorはスマートフォンファーストで開発されているので、AndroidでもiPhoneでもiPadでも非常に書き心地がいいです。cmsにVer.2.11から標準搭載されます。SmartBlockは組み込みJSとしてカスタムフィールドに利用でき、カスタムフィールドメーカーでもVer.2.11からPaperEditorを選択できるようになりますのでソースコードの生成は簡単です。HTMLとして値を取り出すことができます。PaperEditorユニットも新たに追加されます。SmartBlockの技術スタックPaperEditorは以下の技術で構成されています。ReactReduxTypeScriptProseMirrorProseMirrorはすごく優秀なエディターを作るためのライブラリでこれには本当にお世話になりました。H3などの選択メニューや上下移動ボタンなどはReactで作っています。このように全てをReactにせず、入力にあたる部分をそれに特化した技術で作ることでより書き心地のよいUIを提供することができました。SmartBlockのカスタマイズ方法ではSmartBlockのカスタマイズ方法です。SmartBlockには、CustomBlockとCustomMarkというSmartBlockに項目を増やすためのブロックが用意されています。CustomBlockがブロック要素を追加するためのボタンを作るためのクラスで、CustomMarkがインライン要素を追加するためのクラスになっていて以下のようなカスタマイズで簡単にボタンを作ることができます。]};この二つのクラスにより、基本的なブロック追加はGuthenbergと比べて用意に行うことができます。Reactを使ったより高度なカスタマイズここからはReactを使ったより高度なカスタマイズになります。ここから先は、本気でカスタマイズしたい人だけみていただければと思います。本格的なカスタマイズになるのでこういう感じで拡張できるんだという雰囲気だけつかんでいただければ!カスタマイズ例(ハイライトブロックを作る)ここでは、入力されるたびにハイライトがされるブロックを作ってみましょう。ブロックを作るにはこのようなインターフェースでクラスを作る必要があります。依存するProseMirrorのプラグイン}そして、作ったクラスを以下のように、ACMS.Config.SmartBlockAddsの中で配列に渡してあげます。Code()];}最終的にコードをハイライトするブロックはこんな感じになります。}}以上です!以上です!現在、オープンソースにもしたいなと思っていて社内で許可を待っている状態です。PaperEditorの応援、また問題点などがあったら個人的に教えていただけたらと思います!公開したらきっとSmartPhotoを超えるOSSになるはずです!よろしくお願いします。フロントエンドエンジニア。HTML5のCanvas要素を使ってゲームを作っていたことでWeb全般に興味をもつ。cmsを便利に使うための機能の実装や、HTML5の技術を使ったデジタルサイネージの実装を行う。読むことも話すことも好き。