typing.html 926 B

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