1.js 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109
  1. /**
  2. * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  4. */
  5. /* globals console:false, document, setTimeout */
  6. import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classic';
  7. import ArticlePresets from '@ckeditor/ckeditor5-presets/src/article';
  8. import ContextualToolbar from '../../../../src/toolbar/contextual/contextualtoolbar';
  9. import Element from '@ckeditor/ckeditor5-engine/src/model/element';
  10. import Text from '@ckeditor/ckeditor5-engine/src/model/text';
  11. import Position from '@ckeditor/ckeditor5-engine/src/model/position';
  12. // Editor for the ContextualToolbar plugin.
  13. ClassicEditor.create( document.querySelector( '#editor-ct' ), {
  14. plugins: [ ArticlePresets, ContextualToolbar ],
  15. toolbar: [ 'undo', 'redo' ],
  16. contextualToolbar: [ 'bold', 'italic' ]
  17. } )
  18. .then( editor => initExternalChangesHandler( editor, document.querySelector( '#button-ct' ) ) )
  19. .catch( err => console.error( err.stack ) );
  20. // Editor for the Link plugin.
  21. ClassicEditor.create( document.querySelector( '#editor-link' ), {
  22. plugins: [ ArticlePresets ],
  23. toolbar: [ 'undo', 'redo', 'link' ],
  24. contextualToolbar: [ 'bold', 'italic' ]
  25. } )
  26. .then( editor => initExternalChangesHandler( editor, document.querySelector( '#button-link' ) ) )
  27. .catch( err => console.error( err.stack ) );
  28. // Editor for the Link plugin.
  29. ClassicEditor.create( document.querySelector( '#editor-image-toolbar' ), {
  30. plugins: [ ArticlePresets ],
  31. toolbar: [ 'undo', 'redo' ],
  32. contextualToolbar: [ 'bold', 'italic' ]
  33. } )
  34. .then( editor => initExternalChangesHandler( editor, document.querySelector( '#button-image-toolbar' ) ) )
  35. .catch( err => console.error( err.stack ) );
  36. // Handles button click and starts external changes for the specified editor.
  37. function initExternalChangesHandler( editor, element ) {
  38. element.addEventListener( 'click', () => {
  39. element.disabled = true;
  40. startExternalChanges( editor ).then( () => element.disabled = false );
  41. } );
  42. }
  43. function startExternalChanges( editor ) {
  44. const document = editor.document;
  45. const bath = document.batch( 'transparent' );
  46. function type( path, text ) {
  47. return new Promise( ( resolve ) => {
  48. let position = new Position( document.getRoot(), path );
  49. let index = 0;
  50. function typing() {
  51. setTimeout( () => {
  52. document.enqueueChanges( () => {
  53. bath.insert( position, new Text( text[ index ] ) );
  54. position = position.getShiftedBy( 1 );
  55. let nextLetter = text[ ++index ];
  56. if ( nextLetter ) {
  57. typing( nextLetter );
  58. } else {
  59. index = 0;
  60. resolve();
  61. }
  62. } );
  63. }, 40 );
  64. }
  65. typing();
  66. } );
  67. }
  68. function insertNewLine( path ) {
  69. return new Promise( ( resolve ) => {
  70. setTimeout( () => {
  71. document.enqueueChanges( () => {
  72. bath.insert( new Position( document.getRoot(), path ), new Element( 'paragraph' ) );
  73. resolve();
  74. } );
  75. }, 200 );
  76. } );
  77. }
  78. function wait( delay ) {
  79. return new Promise( ( resolve ) => {
  80. setTimeout( () => resolve(), delay );
  81. } );
  82. }
  83. return wait( 3000 )
  84. .then( () => type( [ 0, 36 ], `It's a hug, Michael. I'm hugging you. Guy's a pro. There's only one man I've ever called a coward` ) )
  85. .then( () => insertNewLine( [ 0 ] ) )
  86. .then( () => type( [ 0, 0 ], 'a' ) )
  87. .then( () => insertNewLine( [ 1 ] ) )
  88. .then( () => type( [ 1, 0 ], 'b' ) )
  89. .then( () => insertNewLine( [ 2 ] ) )
  90. .then( () => type( [ 2, 0 ], 'c' ) )
  91. .then( () => insertNewLine( [ 0 ] ) )
  92. .then( () => type( [ 0, 0 ], 'EXTERNAL CHANGES WILL START FROM HERE -> ' ) );
  93. }