|
|
@@ -0,0 +1,33 @@
|
|
|
+<div contenteditable="true" id="editor"></div>
|
|
|
+<script>
|
|
|
+ 'use strict';
|
|
|
+
|
|
|
+ bender.amd.manualRequire( [
|
|
|
+ 'core/treeview/treeview',
|
|
|
+ 'core/treeview/observer/mutationobserver',
|
|
|
+ 'core/treeview/element',
|
|
|
+ 'core/treeview/text'
|
|
|
+ ], function( TreeView, MutationObserver, Element, Text ) {
|
|
|
+ const treeView = new TreeView( document.getElementById( 'editor' ) );
|
|
|
+ const mutationObserver = new MutationObserver();
|
|
|
+
|
|
|
+ mutationObserver.on( 'mutations', ( evt, mutations ) => console.log( mutations ) );
|
|
|
+ mutationObserver.on( 'mutations', handleTyping );
|
|
|
+
|
|
|
+ treeView.addObserver( mutationObserver );
|
|
|
+
|
|
|
+ treeView.viewRoot.insertChildren( 0, [ new Element( 'p', [], [ new Text( 'foo' ) ] ) ] );
|
|
|
+
|
|
|
+ treeView.render();
|
|
|
+ } );
|
|
|
+
|
|
|
+ function handleTyping( evt, mutations ) {
|
|
|
+ const mutation = mutations[ 0 ];
|
|
|
+
|
|
|
+ if( mutations.length > 1 || mutation.type !== 'text' ) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ mutation.node.setText( mutation.newText );
|
|
|
+ }
|
|
|
+</script>
|