A rich text editor with React

Transcript

1. A rich text editor with ReactJs Peter Balazs @frikille
2. HTML contenteditable HTML Editing API - https://dvcs.w3.org/hg/editing/raw- file/tip/editing.html Why contenteditable is terrible by Nick Santos - https: //medium.com/medium-eng/why-contenteditable-is-terrible- 122d8a40e480 Browser inconsistencies - https://github. com/guardian/scribe/blob/master/BROWSERINCONSISTE NCIES.md
3. Current implementations - CKEditor - www.ckeditor.com - MediumJs - http://jakiestfu.github.io/Medium.js - Redactor - http://imperavi.com/redactor/ - Scribe - http://guardian.github.io/scribe/ - TinyMCE - www.tinymce.com - wysihtml5 - http://xing.github.io/wysihtml5/ - ZenPen - http://www.zenpen.io/
4. Why another one? - HTML + React widgets - React page with other js components
5. What is the model? HTML to JSON DOM tree - every tag element is a node and text nodes are leaves - same structure in JSON
6. Current object-model { node-type: 1 tag-name: 'p' child-nodes: [{ node-type: 3 text-content: 'Example text' }] }
7. Pros - HTML can be generated from model by React easily - HTML can be converted to json - Immutability helper
8. Cons - Constant mapping between HTML and model - Keystrokes - char, space, backspace, enter - Selection - Caret position - where caret should be after editing - Formatting - bold, italic, underline, strikethrough, etc
9. Editor - add-keys-to-tag - update-state(model, selection-node, selection-start) - render-json-to-html - convert-to-json
10. With a generated tag-key { node-type: 1 tag-name: 'p' tag-key: 'root.0' child-nodes: [{ node-type: 3 text-content: 'Example text' }] }
11. Selection model - normalize selection model API - helper properties - multiline selection - selection type - normal text selection - nodes
12. What we expect when hitting... - the enter key - the backspace (or delete) key - a character key - the keys above and there is a selection
13. Handling key events - keypress for characters and enter - keydown for backspace and delete - selection model is important
14. Editing text Selection model - simple Selection model - multiple nodes Simple text Enter | Character change Enter | Character change Formatted text Enter | Character change Enter | Character change
15. Immutability helpers - React.addons.update(object, config) - Commands: - $push, $unshift, $splice, $set, $merge, $apply
16. Examples $push var initialArray = [1, 2, 3]; var newArray = update(initialArray, {$push : [4]}); // => [1, 2, 3, 4] $splice var collection = [1, 2, {a: [12, 17, 15]}]; var newCollection = update(collection, { 2: {a: {$splice: [[1, 1, 13, 14]]}}}); // => [1, 2, {a: [12, 13, 14, 15]}] $apply and $set var obj = {a: 5, b: 3}; var newObj = update(obj, {b : {$apply: function(x) {return x * 2;}}}); // => {a: 5, b: 6} // This is equivalent, but gets verbose for deeply nested collections: var newObj2 = update(obj, {b : {$set: obj.b * 2}});
17. Editing text - Simple text - character change - enter - creating config object automatically
18. And formatted text? Simple formatted text to edit <p><span>Simple</span><b><span>formatted</span><i>text to</i><span> edit</span></b></p>
19. Formatted text editing - adding and removing text content - similar to simple text editing - handling enter - multiple nodes selection
20. Formatted text - Handling enter
21. Formatted text - Handling enter
22. Formatted text - Handling enter
23. Formatted text - Handling enter
24. Applying formats - bold - italic - underline - strikethrough
25. What’s left? - supporting more tags - ul/ol - blockquote - a - img - setting caret position - undo / redo - not so hard since after every edit operation we have a new state
26. What’s left? - copy & past - wider browser support - mobile?
27. On Github https://github.com/frikille/react-rte
28. Thanks!