1.js 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117
  1. /**
  2. * @license Copyright (c) 2003-2018, 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/classiceditor';
  7. import ArticlePluginSet from '@ckeditor/ckeditor5-core/tests/_utils/articlepluginset';
  8. import Position from '@ckeditor/ckeditor5-engine/src/model/position';
  9. import Range from '@ckeditor/ckeditor5-engine/src/model/range';
  10. const config = {
  11. plugins: [ ArticlePluginSet ],
  12. toolbar: [ 'undo', 'redo', 'link' ],
  13. image: {
  14. toolbar: [ 'imageTextAlternative' ]
  15. }
  16. };
  17. // Editor for the external insert.
  18. ClassicEditor.create( document.querySelector( '#editor-insert' ), config )
  19. .then( editor => {
  20. const element = document.querySelector( '#button-insert' );
  21. element.addEventListener( 'click', () => {
  22. element.disabled = true;
  23. startExternalInsert( editor );
  24. } );
  25. } )
  26. .catch( err => console.error( err.stack ) );
  27. // Editor for the external delete.
  28. ClassicEditor.create( document.querySelector( '#editor-delete' ), config )
  29. .then( editor => {
  30. const element = document.querySelector( '#button-delete' );
  31. element.addEventListener( 'click', () => {
  32. element.disabled = true;
  33. startExternalDelete( editor );
  34. } );
  35. } )
  36. .catch( err => console.error( err.stack ) );
  37. function wait( delay ) {
  38. return new Promise( resolve => {
  39. setTimeout( () => resolve(), delay );
  40. } );
  41. }
  42. function startExternalInsert( editor ) {
  43. const model = editor.model;
  44. function type( path, text ) {
  45. return new Promise( resolve => {
  46. let position = new Position( model.document.getRoot(), path );
  47. let index = 0;
  48. function typing() {
  49. wait( 40 ).then( () => {
  50. model.enqueueChange( 'transparent', writer => {
  51. writer.insertText( text[ index ], position );
  52. position = position.getShiftedBy( 1 );
  53. const nextLetter = text[ ++index ];
  54. if ( nextLetter ) {
  55. typing( nextLetter );
  56. } else {
  57. index = 0;
  58. resolve();
  59. }
  60. } );
  61. } );
  62. }
  63. typing();
  64. } );
  65. }
  66. function insertNewLine( path ) {
  67. return wait( 200 ).then( () => {
  68. model.enqueueChange( 'transparent', writer => {
  69. writer.insertElement( 'paragraph', new Position( model.document.getRoot(), path ) );
  70. } );
  71. return Promise.resolve();
  72. } );
  73. }
  74. wait( 3000 )
  75. .then( () => type( [ 0, 36 ], 'This specification defines the 5th major revision of the core language of the World Wide Web. ' ) )
  76. .then( () => insertNewLine( [ 0 ] ) )
  77. .then( () => type( [ 0, 0 ], 'a' ) )
  78. .then( () => insertNewLine( [ 1 ] ) )
  79. .then( () => type( [ 1, 0 ], 'b' ) )
  80. .then( () => insertNewLine( [ 2 ] ) )
  81. .then( () => type( [ 2, 0 ], 'c' ) )
  82. .then( () => insertNewLine( [ 0 ] ) )
  83. .then( () => type( [ 0, 0 ], 'DONE :)' ) );
  84. }
  85. function startExternalDelete( editor ) {
  86. const model = editor.model;
  87. function removeSecondBlock() {
  88. model.enqueueChange( 'transparent', writer => {
  89. writer.remove( Range.createFromPositionAndShift( new Position( model.document.getRoot(), [ 1 ] ), 1 ) );
  90. } );
  91. }
  92. wait( 3000 )
  93. .then( () => removeSecondBlock() )
  94. .then( () => wait( 3000 ) )
  95. .then( () => removeSecondBlock() );
  96. }