Awesome Draft.js

Draft.jsを扱う資料や関連プロジェクトをまとめたAwesomeリストです。

コミュニティ

• Slack チャンネル

発表

• Isaac Salier-Hellendag による Rich Text Editing with React @ React.js Conf 2016
• Nik Graf による Draft.js と DraftJS Plugins を使った Rich Text 編集
• React 第37回：What I Learned Today – Atomic Jolt による Draft.js
• 008 - Draft.js Plugins @ React30
• Ben Briggs による HubSpot の Draft.js
• Draft.js の内部 - React Melbourne Meetup

Draft.js 上に構築されたスタンドアロンエディター

• Draft WYSIWYG - Drag & Drop、Resize、Tooltip を備えた WYSIWYG Editor です。
• Draft.js Editor - Medium と Facebook Notes に着想を得た Rich Text Editor です。
• React-RTE - CKEditor や TinyMCE に似た高機能な Textarea 代替です。
• Facebook Notes Clone(ish) - Facebook Notes に似た Rich Text Editor です。
• Megadraft - 使いやすい標準 Plugin 群と拡張性を備えた Rich Text Editor です。
• Medium Draft - Keyboard Shortcut に重点を置いた Medium 風 Rich Text Editor です。
• React-Draft-Wyiswyg - さまざまなテキスト編集オプションと、それに対応する HTML 生成を備えた WYSIWYG Editor です。
• Dante 2 - Draft.js 上に構築された、もう1つの Medium Clone です。
• Last Draft - Draft.js Plugin で構築された Draft Editor です。
• Z-Editor - オンライン Z 記法エディターです。
• Draftail - Wagtail 用に構築された、Draft.js ベースの設定可能な Rich Text Editor です。
• Braft - 拡張可能な Draft.js Editor です。

Draft.js 向けに構築されたプラグインとデコレーター

• Draft.js Plugins - Draft.js 上の Plugin Architecture です。
  • 配置
  • Block Breakout - 入力しながら Block Type から抜けます。
  • ボタン
  • Color Picker
  • カウンター - 文字数、単語数、行数を数えます。
  • 区切り
  • Drag and Drop
  • 埋め込み
  • 絵文字 - Slack 風の絵文字対応です。
  • EmojiPicker
  • Focus
  • GifPicker
  • Hashtag - Twitter 風の Hashtag 対応です。
  • 画像
  • Inline Toolbar
  • KaTeX - KaTeX で LaTeX を挿入・レンダリングします。
  • Link
  • Linkify - Link を自動的に Anchor Tag へ変換します。
  • List - List の自動作成と入れ子 List に対応します。
  • Markdown Shortcut - Markdown 構文の Shortcut です。
  • MathJax - MathJax がレンダリングする (La)TeX で数式を編集します。
  • Mention - Twitter 風の Mention 対応です。
  • Modal
  • Prism - Prism で Code Block を構文強調表示します。
  • Resizeable
  • RichButtons - Rich Formatting Button を追加・カスタマイズします。
  • Side Toolbar
  • Sidebar
  • Single Line - 入力を1行に制限します。
  • Sticker - Facebook 風の Sticker 対応です。
  • Toolbar
  • Undo - Undo と Redo の Button です。
  • 動画
• Draft.js Gutter - 行番号 Gutter を補完します。
• Draft.js Basic HTML Editor - HTML を入力形式として受け取り、onChange へ HTML を返します。
• Draft.js Prism- Prism で Code Block を強調表示します。
• Draft.js Typeahead - Typeahead 機能に対応します。
• Draft Extend - 設定可能な Plugin と統合 Serialization を備えた、拡張可能な Draft.js Editor を構築します。
• Draft.js Code - より快適なコード編集のための低レベルユーティリティ集です。
• Draft.js Annotatable - ユーザー作成 Annotation に対応した、すぐに使える Draft.js Annotation System です。
• Draft.js Regex - Regex、空行の防止、貼り付けた HTML の消去など、柔軟な Helper 群です。

共通ユーティリティ

• BackDraft.js - rawContentBlock を Markup 付き文字列へ変換する関数です。
• Draft.js Exporter - Draft.js のコンテンツをエクスポート・整形します。
• Draft.js：ContentState を HTML へエクスポート - ContentState を HTML へエクスポートします。
• Draft.js：ContentState を PDFMake へエクスポート - ContentState を PDFMake へエクスポートします。
• Redraft - 指定した Callback で Draft.js の convertToRaw の結果をレンダリングし、React と適切に連携します。
• Draft.js Exporter（Ruby） - Draft.js の Content State を HTML へエクスポートします。
• Draft.js Exporter（Python） - Draft.js の Raw ContentState を HTML へ変換するライブラリです。
• Draft.js AST Exporter - コンテンツを抽象構文木（AST）へエクスポートします。
• Draft.js AST Importer- 対になる draft-js-ast-exporter が出力した抽象構文木（AST）をインポートします。
• Draft.js Multidecorators - 複数の Decorator を組み合わせます。
• Draft.js SimpleDecorator - 柔軟な Decorator を簡単に作成します。
• DraftJS Utils - DraftJS 用 Utility Function 群です。
• DraftJs to HTML - DraftJS Editor のコンテンツから HTML を生成するライブラリです。
• Draft Convert - Draft.js ContentState と HTML の間を拡張可能な方法で Serialize・Deserialize します。
• HTML to DraftJS - プレーン HTML を DraftJS Editor のコンテンツへ変換します。
• Draft.js Exporter（Go） - Draft.js の Content State を HTML へエクスポートします。
• React Native Draft.js Render - Draft.js Model 用の React Native Renderer です。
• Draft.js Filters - 許可した Formatting だけを保持するよう Draft.js コンテンツを Filter します。
• Sticky - シンプルなメモ作成・Clipboard 管理 Desktop Application です。

ブログ記事

• Facebook が Rich Text Editor Framework Draft.js をオープンソース化
• このブログ記事は Draft.js で書かれました
• Draft.js が Rich Text Data を表現する方法
• 初心者向け Draft.js ガイド
• Draft.js で Todo List を実装する
• Draft.js の部品
• Draft.js を学ぶ - Draft.js で開発する方法を扱うブログ記事シリーズです。
• Wagtail の新しい Editor が Draft.js で構築されている理由
• Draft.js で Rich Text Pipeline を再考する

ライブデモ

• Draft-js Samples - サンプルとコード解説を備えたアプリ
• Draftail Playground – Wagtail の Draft.js 依存関係をスタンドアロンデモにしたものです。
• モバイルブラウザー用 Draft Drag and Drop デモ

公式リポジトリのサンプル用 Playground（v0.10.0）

• Rich Text Editor
• Color Editor
• HTML から変換する Editor
• Entity Editor
• Link Editor
• Media Editor
• Plain Text Editor
• Decorator Editor - Tweet の例

本番環境での利用

• StoryChief
• HKW Technosphere Magazine
• Douban Read
• Dooly
• Wagtail
• Patreon

ライセンス

法律で認められる範囲で、Nikolaus Graf はこの作品に関するすべての著作権および関連する権利または隣接する権利を放棄しています。