Draftail extensions – Twitter-style max length UI
Channel: Thibaud Colas
Date: 16/06/2018

As a follow-up to Draftail extensions – Custom entities tutorial (https://www.youtube.com/watch?v=nCMgoTerEb4), I go through building a specific type of extension for Draftail: a "max length" counter like the one Twitter uses for its tweet creation UI.

---

Timestamps:

- What we're building today – 1:17
- Building this within the Draftail Playground – 7:14
- Starting the implementation with a simple counter – 14:46
- Decorators in Draft.js – 23:20
- Minimum Viable Product! – 38:12
- Array#reduce in JavaScript – 46:38
- IT WORKS! – 1:01:38
- Circular progress bar in SVG – 1:26:38
- Math! Geometry! Fun! – 1:43:26
- End result and recap – 1:49:04

Links:

- Counter plugins tutorial request: https://github.com/springload/awesome-wagtail/pull/75#issuecomment-396125497
- Character count improvement issue for Wagtail: https://github.com/wagtail/wagtail/issues/2268
- Draftail Playground: https://github.com/thibaudcolas/draftail-playground
- Draftail ReadingTime extension: https://github.com/springload/draftail/blob/1a582d2c1e9a803e31b99453500e3b5c6c9f0bf0/examples/components/ReadingTime.js
- Draftail Prism decorator: https://github.com/springload/draftail/blob/1a582d2c1e9a803e31b99453500e3b5c6c9f0bf0/examples/components/PrismDecorator.js
- Draft.js docs: https://draftjs.org/
- Radial Progress Meters in CSS and SVG: https://codepen.io/xgad/post/svg-radial-progress-meters
- SVG progress bar with `stroke-dasharray` and `stroke-dashoffset`: https://kimmobrunfeldt.github.io/progressbar.js/

The progress made during the stream is over at https://github.com/thibaudcolas/draftail-playground/pull/3