Wagtail Draftail experiments

🚧 Experimental Draftail extensions for Wagtail 🐦

Related projects:

• Draftail Playground
• Draftail examples

Experiments

Anchor links

See wagtail/wagtail#1049.

KaTeX block

See springload/draftail#145, and Extending Draftail: creating new entities.

Stock token

This is the official stock token tutorial from the Wagtail docs.

This got built on my Twitch stream and was recorded: https://www.twitch.tv/videos/266474479

Timestamps:

• 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