Programmatic content capability in demo

demo/index.js

@@ -34,37 +34,32 @@ class Editor extends React.Component {
   onEditorChange = (value, delta, source, editor) => {
     this.setState({
       value: editor.getContents(),
-      events: [
-        'text-change('+this.state.value+' -> '+value+')'
-      ].concat(this.state.events)
+      events: [`[${source}] text-change`, ...this.state.events],
     });
   }
 
   onEditorChangeSelection = (range, source) => {
     this.setState({
       selection: range,
       events: [
-        'selection-change('+
-          this.formatRange(this.state.selection)
-        +' -> '+
-          this.formatRange(range)
-        +')'
-      ].concat(this.state.events)
+        `[${source}] selection-change(${this.formatRange(this.state.selection)} -> ${this.formatRange(range)})`,
+        ...this.state.events,
+      ]
     });
   }
 
   onEditorFocus = (range, source) => {
     this.setState({
       events: [
-        'focus('+this.formatRange(range)+')'
+        `[${source}] focus(${this.formatRange(range)})`
       ].concat(this.state.events)
     });
   }
 
   onEditorBlur = (previousRange, source) => {
     this.setState({
       events: [
-        'blur('+this.formatRange(previousRange)+')'
+        `[${source}] blur(${this.formatRange(previousRange)})`
       ].concat(this.state.events)
     });
   }
@@ -77,6 +72,10 @@ class Editor extends React.Component {
     this.setState({ readOnly: !this.state.readOnly });
   }
 
+  onSetContents = () => {
+    this.setState({ value: 'This is some <b>fine</b> example content' });
+  }
+
   render() {
     return (
       <div>
@@ -109,6 +108,9 @@ class Editor extends React.Component {
         <button onClick={this.onToggleReadOnly}>
           Set {readOnly? 'read/Write' : 'read-only'}
         </button>
+        <button onClick={this.onSetContents}>
+          Fill contents programmatically
+        </button>
         <button disabled={true}>
           Selection: ({selection})
         </button>