externalchanges.js 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114
  1. /**
  2. * @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  4. */
  5. /* globals console:false, document, setTimeout */
  6. import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
  7. import BalloonToolbar from '../../../src/toolbar/balloon/balloontoolbar';
  8. import ArticlePluginSet from '@ckeditor/ckeditor5-core/tests/_utils/articlepluginset';
  9. // Editor for the external insert.
  10. ClassicEditor
  11. .create( document.querySelector( '#editor-insert' ), {
  12. plugins: [ ArticlePluginSet, BalloonToolbar ],
  13. toolbar: [ 'bold', 'link' ],
  14. balloonToolbar: [ 'bold', 'link' ]
  15. } )
  16. .then( editor => {
  17. const element = document.querySelector( '#button-insert' );
  18. element.addEventListener( 'click', () => {
  19. element.disabled = true;
  20. startExternalInsert( editor );
  21. } );
  22. } )
  23. .catch( err => console.error( err.stack ) );
  24. // Editor for the external delete.
  25. ClassicEditor
  26. .create( document.querySelector( '#editor-delete' ), {
  27. plugins: [ ArticlePluginSet, BalloonToolbar ],
  28. toolbar: [ 'bold', 'link' ],
  29. balloonToolbar: [ 'bold', 'link' ]
  30. } )
  31. .then( editor => {
  32. const element = document.querySelector( '#button-delete' );
  33. element.addEventListener( 'click', () => {
  34. element.disabled = true;
  35. startExternalDelete( editor );
  36. } );
  37. } )
  38. .catch( err => console.error( err.stack ) );
  39. function wait( delay ) {
  40. return new Promise( resolve => {
  41. setTimeout( () => resolve(), delay );
  42. } );
  43. }
  44. function startExternalInsert( editor ) {
  45. const model = editor.model;
  46. function type( path, text ) {
  47. return new Promise( resolve => {
  48. let position = model.createPositionFromPath( model.document.getRoot(), path );
  49. let index = 0;
  50. function typing() {
  51. wait( 40 ).then( () => {
  52. model.enqueueChange( 'transparent', writer => {
  53. writer.insertText( text[ index ], position );
  54. position = position.getShiftedBy( 1 );
  55. const nextLetter = text[ ++index ];
  56. if ( nextLetter ) {
  57. typing( nextLetter );
  58. } else {
  59. index = 0;
  60. resolve();
  61. }
  62. } );
  63. } );
  64. }
  65. typing();
  66. } );
  67. }
  68. function insertNewLine( path ) {
  69. return wait( 200 ).then( () => {
  70. model.enqueueChange( 'transparent', writer => {
  71. writer.insertElement( 'paragraph', writer.createPositionFromPath( model.document.getRoot(), path ) );
  72. } );
  73. return Promise.resolve();
  74. } );
  75. }
  76. wait( 3000 )
  77. .then( () => type( [ 0, 36 ], 'This specification defines the 5th major revision of the core language of the World Wide Web. ' ) )
  78. .then( () => insertNewLine( [ 0 ] ) )
  79. .then( () => type( [ 0, 0 ], 'a' ) )
  80. .then( () => insertNewLine( [ 1 ] ) )
  81. .then( () => type( [ 1, 0 ], 'b' ) )
  82. .then( () => insertNewLine( [ 2 ] ) )
  83. .then( () => type( [ 2, 0 ], 'c' ) )
  84. .then( () => insertNewLine( [ 0 ] ) )
  85. .then( () => type( [ 0, 0 ], 'DONE :)' ) );
  86. }
  87. function startExternalDelete( editor ) {
  88. const model = editor.model;
  89. wait( 3000 ).then( () => {
  90. model.enqueueChange( 'transparent', writer => {
  91. const start = writer.createPositionFromPath( model.document.getRoot(), [ 1 ] );
  92. writer.remove( writer.createRange( start, start.getShiftedBy( 1 ) ) );
  93. } );
  94. } );
  95. }