【執筆中】Reactでブロックエディタを作るフルスクラッチコンポーネントツアー

【執筆中】Reactでブロックエディタを作るフルスクラッチコンポーネントツアー

01Introduction 02環境構築 - Viteプロジェクトのセットアップ 03環境構築 - styled-componentsの導入 04環境構築 - ESlintとPrettier導入 05環境構築 - storybook導入 06ブロックエディタの雛形をつくる 07ブロックの型を定義する 08Paragraphブロック ~定義~09コンポーネントの分類を考える 10Toolbar ~Addボタンの組み込み~11HTML要素をラップして基盤をつくる ~ Button ~12アイコンのアクセシビリティ対応を考える ~ IconButton ~13目には見えないが聞くことができる ~ VisuallyHidden ~14聞くことはできないが目には見える ~ aria-hidden ~15雫風のスタイリング ~ AddButton ~16このChapter以降は下書きです。予告編としてお楽しみください。17HOCでtooltipを追加する ~ AddButton ~18ADDアクションによる編集ブロック追加 19UPDATEアクションによるリアルタイムプレビュー 20レスポンシブレイアウトをコンポーネント化する 21自動的に高さが伸びるテキストエリアをつくる 22Drag & Dropによるブロックの並び替え 23ブロックを一つ上or下に移動するMOVEボタン 24ブロック削除ボタン 25入力時にラベルが浮き上がる編集欄コンポーネント 26Linkブロックの実装 27Prism.jsによるハイライトコードコンポーネント 28Codeブロックの実装 29区切り線ブロックの実装 30Hamburger Menu風のオプションボタン 31inlineモードとblockモードの切り替え 32アクセシブルなPopup Menuコンポーネント 33Codeブロックの言語選択 34KaTeXによるMathFormulaブロックの実装 35「さらに追加」を実現するAddMoreコンポーネント 36コンポーネント配列のjoinを行うコンポーネント 37Keyboardブロックの実装 38キーボード操作に対応したComboBoxコンポーネント 39Headingブロックの実装とlevel選択 40Listブロックの実装 41数字入力を強力で安全にするStepperコンポーネント 42Ordered Listの開始番号を編集可能にする 43引用文ブロックの実装 44Toggleコンテンツブロックの実装 45FileDropzone 46アップロード画像の一時previewとcancel 47Tabコンポーネント 48URL入力による画像指定に対応する 49lightboxコンポーネント 50Terminalブロック 51UndoとRedo

Chapter 28

Codeブロックの実装

2022.09.18に更新