8
0

mutationobserver.html 922 B

12345678910111213141516171819202122232425262728293031323334353637383940
  1. <div contenteditable="true" id="editor">
  2. <p>Foo</p>
  3. <p>Bar</p>
  4. </div>
  5. <script>
  6. 'use strict';
  7. bender.amd.manualRequire( [
  8. 'core/treeview/treeview',
  9. 'core/treeview/observer/mutationobserver',
  10. 'core/treeview/text'
  11. ], function( TreeView, MutationObserver, Text ) {
  12. const treeView = new TreeView( document.getElementById( 'editor' ) );
  13. const mutationObserver = new MutationObserver();
  14. mutationObserver.on( 'mutations', ( evt, mutations ) => {
  15. console.log( mutations );
  16. } );
  17. mutationObserver.on( 'mutations', handleTyping );
  18. treeView.addObserver( mutationObserver );
  19. treeView.viewRoot.insertChildren( 0, new Text( 'bom' ) );
  20. treeView.render();
  21. console.log( treeView );
  22. } );
  23. function handleTyping( evt, mutations ) {
  24. const mutation = mutations[ 0 ];
  25. if( mutations.length > 1 || mutation.type !== 'text' ) {
  26. return;
  27. }
  28. mutation.node.setText( mutation.newText );
  29. }
  30. </script>