8
0

externalchanges.js 3.4 KB

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