Live demo: Customizing the editor interface with open-source field editors

Transcript

1. 1 Live demo: Customizing the editor interface with open-source field editors Tuesday 30th June, 2020 1
2. Housekeeping • This webinar is being recorded; we will share the recording and slide deck with all registrants shortly -- keep an eye on your inbox! • Please add your questions in the Q&A box, we will answer them after the presentation during the live Q&A session at the end • To get in touch, write to us at team@contentfulmail.com Before we dive in...
3. Introductions 3 Aleksandr Suevalov Staff Engineer at Contentful Shy Ruparel Developer Evangelist at Contentful
4. 4 1. Introduction to open-source field editors 2. Demo: Aleksandr teaches Shy 3. Audience Q&A Agenda 4
5. Context
6. 6 Content types have fields
7. 7 Fields have data types
8. 8 Fields have data types
9. 9 Field editors make fields editable by humans
10. 10 There is built-in editors
11. 11 As well as custom Apps and UI Extensions
12. 12 + =
13. 13 + =
14. 14 Field editors define the user interaction with content
15. Problems
16. 16 Why did we bother open sourcing them?
18. “We don’t use h3, could we please hide that?” 18
19. “Can we link our internal markdown cheatsheet in here?” 19
21. “We never want to link existing entries as that broke our site in the past. Can we remove that link?” 21
22. “We would like to change the fields used for the reference card, can we change that?” 22
23. 23 And so on. . .
24. Let’s write some code. 24 Scenario 1: Implementing custom behaviour into a field editor without recreating the entire component from scratch Scenario 2 Creating new fields using existing Contentful fields as a starting point 24
25. Where to learn more
26. 26 All 18 Field Editors on GitHub and NPM
27. 27 Developer docs and playground to explore the field editors
28. 28 Examples how to use them within apps or extensions
29. 29 Highlight: Example for grouping fields
30. 30 https://www.contentful.com/developers/docs/extensibility/field-editors/example-grouping-fields/ https://www.contentful.com/developers/docs/extensibility/field-editors/example-customize-field-editor/
31. 31 Alex.js enriched Contentful Markdown editor https://www.contentful.com/blog/2020/06/23/apps-and -open-source-guide-to-making-contentful-truly-yours/
32. Share with us what you build! • Join us for real time chat on the Contentful Community Slack (https://www.contentful.com/slack/) • Tweet us @Contentful • To get in touch, write to us at team@contentfulmail.com
33. 33 Questions? Please type your questions in the Q&A box. If we don’t have time to get to your question, please follow up with us at team@contentfulmail.com
34. Thank you! Keep an eye on your inbox for the slides and video