Building a Block Based Editor in Phoenix LiveView
summary
A Notion‑style block editor built on Phoenix LiveView that stores blocks as a list of cells on the backend and uses a frontend JS hook to parse DOM, send selection and restore caret reliably; text updates are debounced 300ms debounce to avoid latency jumble. Code blocks use prism.js highlight with an overlay textarea plus phx-update ignore for input. End‑to‑end testing runs via Cypress E2E against a tiny playground Phoenix app, saves content as JSON, and supports undo/redo; tables and image blocks are experimental.
AI-written summary · about
chapters (8)
- 0:0004:10 - Intro
- 6:1305:26 - Demo
- 11:3412:50 - Problem 1 - Content Editable + Attempts
- 16:1917:54 - Problem 2 - Score Creep
- 20:4823:25 - Problem 3 - Polish
- 23:2526:50 - Problem 4 - Dev Story
- 28:3828:44 - Problem 5 - Solved
- 33:4233:39 - Problem 6 - Release & Usage
related talks
01h 13mKeynote: Phoenix LiveView - Interactive Apps without Javascript
23mBuilding a real-time collaborative editor with Phoenix
12mBuilding a rich text editor with Svelte 5
35mKeynote: Fireside Chat on LiveView, (...)
19mUpdate from the Phoenix Team
08mDraft.js, Editor.js, Slate.js: Choosing Text Editor
24mBuilding an Interview Scheduler in LiveView: A Newcomer's Journey.
26mExploring State Management in Phoenix LiveView