Text editing & immutable data structures

What has Draft.js eaten

Talk given at Helsinki React.js Meetup in June 2017 https://www.meetup.com/ReactJS-Community/events/239875743/

Transcript

1. Text editing & immutable data structures What has Draft.js eaten Vesa Vänskä, Kisko Labs Vesa Vänskä 2017 @vesan
2. Draft.js? Vesa Vänskä 2017 @vesan
3. Rich text editor framework for React Vesa Vänskä 2017 @vesan
4. Demo Vesa Vänskä 2017 @vesan
5. Code example import {Editor, EditorState} from 'draft-js'; class BasicEditor extends React.Component { constructor(props) { super(props); this.state = {editorState: EditorState.createEmpty()}; this.onChange = (editorState) => this.setState({editorState}); } render() { return <Editor editorState={this.state.editorState} onChange={this.onChange} />; } } Vesa Vänskä 2017 @vesan
6. Why I want to talk about it? Vesa Vänskä 2017 @vesan
7. Vesa Vänskä → Software Developer & Partner at @kiskolabs → Ruby on the backend, JavaScript on the frontend → React.js as the frontend tool of choice for two-ish years Vesa Vänskä 2017 @vesan
8. Draft.js State Structure Vesa Vänskä 2017 @vesan
9. Draft.js state structure Immutable.js Vesa Vänskä 2017 @vesan
10. Draft.js state structure Immutable.js Immutable.js provides many Persistent Immutable data structures including: List, Stack, Map, OrderedMap, Set, OrderedSet and Record. Vesa Vänskä 2017 @vesan
11. // Immutable.js Map const map1 = Map({ a: 1, b: 2, c: 3 }) const map2 = map1.set('b', 50) map1.get('b') // 2 map2.get('b') // 50 // Regular Object const map1 = { a: 1, b: 2, c: 3 } const map2 = map1 map2['b'] = 50 map1['b'] // 50 map2['b'] // 50 Vesa Vänskä 2017 @vesan
12. Draft.js State Structure EditorState → The current text content state → The current selection state → The fully decorated representation of the contents → Undo/redo stacks Vesa Vänskä 2017 @vesan
13. Draft.js State Structure EditorState state tree → Editor → Content → Selection → Current inline style Vesa Vänskä 2017 @vesan
14. Draft.js State Structure ContentState → The entire contents of an editor: text, block and inline styles, and entity ranges. → Two selection states of an editor: before and after the rendering of these contents. Vesa Vänskä 2017 @vesan
15. Draft.js State Structure Block Map → Ordered map that has ContentBlocks → Single blocks of content → Information about type of content, attached entities, inline styles and depth Vesa Vänskä 2017 @vesan
16. Draft.js State Structure SelectionState Represents a selection range in the editor. Selection points: anchor & focus values which both have ContentBlock key and offset. Vesa Vänskä 2017 @vesan
17. SelectionState → anchorKey → anchorOffset → focusKey → focusOffset → isBackward → hasFocus Vesa Vänskä 2017 @vesan
18. Entities Used to annotate ranges of text with metadata. Vesa Vänskä 2017 @vesan
19. That's enough of state structure for today Vesa Vänskä 2017 @vesan
20. How to change the state (low-level) editorState.push( editorState, contentState, changeType ) Vesa Vänskä 2017 @vesan
21. How to change the state (high-level) Modifier → replaceText → insertText → moveText → applyInlineStyle → removeInlineStyle Vesa Vänskä 2017 @vesan
22. How to change the state (high-level) Modifier All return new ContentState. Vesa Vänskä 2017 @vesan
23. How to get something to the screen Vesa Vänskä 2017 @vesan
24. Converting EditorState to DOM Vesa Vänskä 2017 @vesan
25. Extending the rendering Vesa Vänskä 2017 @vesan
26. Extending the rendering For visual changes, you can change the block rendering Vesa Vänskä 2017 @vesan
27. Extending the rendering Custom block map How to map content types to components. Vesa Vänskä 2017 @vesan
28. Extending the rendering Custom block map example const blockRenderMap = Immutable.Map({ 'SectionWrapper': { element: 'section', wrapper: <SectionWrapper /> } }); Vesa Vänskä 2017 @vesan
29. Extending the rendering Custom block renderer Good for totally custom components. Vesa Vänskä 2017 @vesan
30. Extending the rendering Custom block renderer example function mediaBlockRenderer(contentBlock) { const type = contentBlock.getType(); if (type === 'atomic') { return { component: MediaComponent, editable: false, props: { foo: 'bar', }, }; } } Vesa Vänskä 2017 @vesan
31. Extending the rendering For deeper changes, you need an editor decorator Vesa Vänskä 2017 @vesan
32. Extending the rendering Editor decorator const decorator = new CompositeDecorator([{ strategy: numberedHeadingsStrategy, component: NumberedHeading, }]); EditorState.createEmpty(decorator) Vesa Vänskä 2017 @vesan
33. Extending the rendering Editor decorator strategy const numberedHeadingsStrategy = (contentBlock, callback, contentState) => { const type = contentBlock.getType(); const isHeading = ["header-one", "header-two", "header-three", "header-four", "header-five"].includes(type); if (isHeading) { callback(0, contentBlock.getText().length); } } Vesa Vänskä 2017 @vesan
34. Extending the rendering Editor decorator custom component const NumberedHeading = (props) => { let key = props.offsetKey.match(/^([^-]+)-/)[1]; const data = props.contentState.getBlockForKey(key).getData() const number = data && data.get("number"); return ( <span data-before={number !== null ? number + " " : number} className="editor-numbered-heading"> <span>{props.children}</span> </span> ); }; Vesa Vänskä 2017 @vesan
35. Demo Adding numbered headings Vesa Vänskä 2017 @vesan
36. Thanks! @vesan vesa@vesavanska.com Vesa Vänskä 2017 @vesan