8
0

tablemocking.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, window, document */
  6. import { createTableAsciiArt, modelTable, prepareModelTableInput, prettyFormatModelTableInput } from '../_utils/utils';
  7. import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
  8. import { setData as setModelData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
  9. import { diffString } from 'json-diff';
  10. import ArticlePluginSet from '@ckeditor/ckeditor5-core/tests/_utils/articlepluginset';
  11. ClassicEditor
  12. .create( document.querySelector( '#editor' ), {
  13. plugins: [ ArticlePluginSet ],
  14. toolbar: [
  15. 'insertTable', 'undo', 'redo'
  16. ],
  17. table: {
  18. contentToolbar: [ 'tableColumn', 'tableRow', 'mergeTableCells' ]
  19. }
  20. } )
  21. .then( editor => {
  22. window.editor = editor;
  23. const asciiOut = document.getElementById( 'ascii-art' );
  24. const modelData = document.getElementById( 'model-data' );
  25. document.getElementById( 'clear-content' ).addEventListener( 'click', () => {
  26. editor.setData( '' );
  27. } );
  28. document.getElementById( 'set-model-data' ).addEventListener( 'click', () => {
  29. updateInputStatus();
  30. const inputModelData = parseModelData( modelData.value );
  31. setModelData( editor.model, inputModelData ? modelTable( inputModelData ) : '' );
  32. } );
  33. document.getElementById( 'get-model-data' ).addEventListener( 'click', () => {
  34. updateInputStatus();
  35. const table = findTable( editor );
  36. modelData.value = table ? prettyFormatModelTableInput( prepareModelTableInput( table ) ) : '';
  37. updateAsciiAndDiff();
  38. } );
  39. editor.model.document.on( 'change:data', updateAsciiAndDiff );
  40. updateAsciiAndDiff();
  41. function updateAsciiAndDiff() {
  42. const table = findTable( editor );
  43. if ( !table ) {
  44. asciiOut.innerText = '-- table not found --';
  45. return;
  46. }
  47. const inputModelData = parseModelData( modelData.value );
  48. const currentModelData = prepareModelTableInput( table );
  49. const diffOutput = inputModelData ? diffString( inputModelData, currentModelData, {
  50. theme: {
  51. ' ': string => string,
  52. '+': string => `<span class="diff-add">${ string }</span>`,
  53. '-': string => `<span class="diff-del">${ string }</span>`
  54. }
  55. } ) : '-- no input --';
  56. asciiOut.innerHTML = createTableAsciiArt( table ) + '\n\n' +
  57. 'Diff: input vs post-fixed model:\n' + ( diffOutput ? diffOutput : '-- no differences --' );
  58. }
  59. function findTable( editor ) {
  60. const range = editor.model.createRangeIn( editor.model.document.getRoot() );
  61. for ( const element of range.getItems() ) {
  62. if ( element.is( 'table' ) ) {
  63. return element;
  64. }
  65. }
  66. return null;
  67. }
  68. function parseModelData( string ) {
  69. if ( !string.trim() ) {
  70. return null;
  71. }
  72. const jsonString = string
  73. .replace( /'/g, '"' )
  74. .replace( /([a-z0-9$_]+)\s*:/gi, '"$1":' );
  75. try {
  76. return JSON.parse( jsonString );
  77. } catch ( error ) {
  78. updateInputStatus( error.message );
  79. }
  80. return null;
  81. }
  82. function updateInputStatus( message = '' ) {
  83. document.getElementById( 'input-status' ).innerText = message;
  84. }
  85. } )
  86. .catch( err => {
  87. console.error( err.stack );
  88. } );