utils.js 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125
  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 window, console */
  6. import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
  7. import ArticlePluginSet from '@ckeditor/ckeditor5-core/tests/_utils/articlepluginset';
  8. import FontColor from '@ckeditor/ckeditor5-font/src/fontcolor';
  9. import FontBackgroundColor from '@ckeditor/ckeditor5-font/src/fontbackgroundcolor';
  10. import FontFamily from '@ckeditor/ckeditor5-font/src/fontfamily';
  11. import FontSize from '@ckeditor/ckeditor5-font/src/fontsize';
  12. import Underline from '@ckeditor/ckeditor5-basic-styles/src/underline';
  13. import StrikeThrough from '@ckeditor/ckeditor5-basic-styles/src/strikethrough';
  14. const predefinedFiles = [
  15. 'small',
  16. 'medium',
  17. 'large',
  18. 'small-inline-css',
  19. 'full-websites-styled'
  20. ];
  21. /**
  22. * Renders a button for each performance fixture in a given `container`.
  23. *
  24. * @param {HTMLElement} container
  25. */
  26. export function renderPerformanceDataButtons( container ) {
  27. let html = '';
  28. const labels = {
  29. 'small': 'small (semantic)',
  30. 'medium': 'medium (semantic)',
  31. 'large': 'large (semantic)',
  32. 'small-inline-css': 'Small inline styled',
  33. 'full-websites-styled': 'Full websites (styled)',
  34. };
  35. for ( const fixtureName of predefinedFiles ) {
  36. html += `<button id="${ fixtureName }-content" data-file-name="${ fixtureName }" disabled>${ labels[ fixtureName ] }</button>`;
  37. }
  38. container.innerHTML = html;
  39. }
  40. /**
  41. * Loads a predefined set of performance markup files.
  42. *
  43. * loadPerformanceData()
  44. * .then( fixtures => {
  45. * window.editor.setData( fixtures.small );
  46. * console.log( fixtures.medium );
  47. * } );
  48. *
  49. * @returns {Promise.<Object.<String, String>>}
  50. */
  51. export function loadPerformanceData() {
  52. return Promise.all( predefinedFiles.map( fileName => getFileContents( fileName ) ) )
  53. .then( responses => {
  54. const returnValue = {};
  55. for ( let i = 0; i < predefinedFiles.length; i++ ) {
  56. returnValue[ predefinedFiles[ i ] ] = responses[ i ];
  57. }
  58. return returnValue;
  59. } );
  60. function getFileContents( fileName ) {
  61. return window.fetch( `_utils/${ fileName }.txt` )
  62. .then( resp => resp.text() );
  63. }
  64. }
  65. /**
  66. * Creates a manual performance test editor instance.
  67. *
  68. * @param {HTMLElement} domElement
  69. * @returns {Promise.<module:core/editor/editor~Editor>}
  70. */
  71. export function createPerformanceEditor( domElement ) {
  72. const config = {
  73. plugins: [ ArticlePluginSet, FontColor, FontBackgroundColor, FontFamily, FontSize, Underline, StrikeThrough ],
  74. toolbar: [
  75. 'heading',
  76. '|',
  77. 'bold',
  78. 'italic',
  79. 'link',
  80. 'fontColor',
  81. 'fontBackgroundColor',
  82. 'fontFamily',
  83. 'fontSize',
  84. 'underline',
  85. 'strikeThrough',
  86. 'bulletedList',
  87. 'numberedList',
  88. '|',
  89. 'outdent',
  90. 'indent',
  91. '|',
  92. 'blockQuote',
  93. 'insertTable',
  94. 'mediaEmbed',
  95. 'undo',
  96. 'redo'
  97. ],
  98. fontSize: {
  99. options: [
  100. 11,
  101. 19,
  102. 32
  103. ]
  104. }
  105. };
  106. return ClassicEditor.create( domElement, config )
  107. .then( editor => {
  108. window.editor = editor;
  109. } )
  110. .catch( err => {
  111. console.error( err.stack );
  112. } );
  113. }