Draftail extensions – custom entities tutorial
To end my first month on Patreon ( / thibaud_colas ) nicely, I go through a step-by-step tutorial to make extensions for Draftail.
---
Start tutorial: 3:09
Draftail vs StreamField disclaimer: 7:18
What we're building today: 10:03
Registering rich text features: 18:05
The Draft.js content model: "contentstate": 22:50
Converting data from Draft.js to Wagtail HTML: 27:20
Configuring the new feature for the editor: 38:30
Using icons in the Draftail toolbar: 46:48
Loading the JS for the extension: 1:02:25
Closures and IIFEs in JS: 1:07:11
Quick demo! 1:08:59
Registering the client-side extensions: 1:22:59
Stock decorator component: 1:26:40
React DevTools: 1:32:47
Stock source component: 1:38:50
Client-side dependencies for extensions: 1:44:53
Extending the Draftail Editor – Creating new entities,
http://docs.wagtail.io/en/v2.1/advanc...
Draftail docs: https://www.draftail.org/
Draftail Playground: http://playground.draftail.org/
The Noun Project: https://thenounproject.com/
UI for SVGO: https://jakearchibald.github.io/svgomg/
Sketch plugin for SVGO: https://sketchapp.com/extensions/plug...
IcoMoon: https://icomoon.io/
The type of rich text this tutorial is inspired from: https://www.forbes.com/sites/jasonblo...
Draft.js docs: https://draftjs.org/
Finally, the commit with all of the changes: https://github.com/thibaudcolas/wagta...