autoformatengine.js 2.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798
  1. /**
  2. * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  4. */
  5. import Range from '../engine/model/range.js';
  6. import TextProxy from '../engine/model/textproxy.js';
  7. export default class AutoformatEngine {
  8. /**
  9. * Creates listener triggered on `change` event in document.
  10. * Calls callback when inserted text matches regular expression or command name
  11. * if provided instead of callback.
  12. *
  13. * Examples of usage:
  14. *
  15. * To convert paragraph to heading1 when `- ` is typed, using just commmand name:
  16. *
  17. * createAutoformat( editor, /^\- $/, 'heading1');
  18. *
  19. * To convert paragraph to heading1 when `- ` is typed, using just callback:
  20. *
  21. * createAutoformat( editor, /^\- $/, ( context ) => {
  22. * const { batch, match } = context;
  23. * const headingLevel = match[ 1 ].length;
  24. *
  25. * editor.execute( 'heading', {
  26. * batch,
  27. * formatId: `heading${ headingLevel }`
  28. * } );
  29. * } );
  30. *
  31. * @param {core.editor.Editor} editor Editor instance.
  32. * @param {Regex} pattern Regular expression to exec on just inserted text.
  33. * @param {Function|String} callbackOrCommand Callback to execute or command to run when text is matched.
  34. * In case of providing callback it receives following parameters:
  35. * * {engine.model.Batch} batch Newly created batch for autoformat changes.
  36. * * {Object} match RegExp.exec() result of matching pattern to inserted text.
  37. */
  38. constructor( editor, pattern, callbackOrCommand ) {
  39. let callback;
  40. if ( typeof callbackOrCommand == 'function' ) {
  41. callback = callbackOrCommand;
  42. } else {
  43. // We assume that the actual command name was provided.
  44. const command = callbackOrCommand;
  45. callback = ( context ) => {
  46. const { batch } = context;
  47. // Create new batch for removal and command execution.
  48. editor.execute( command, { batch } );
  49. };
  50. }
  51. editor.document.on( 'change', ( event, type, changes ) => {
  52. if ( type != 'insert' ) {
  53. return;
  54. }
  55. // Take the first element. Typing shouldn't add more than one element at once.
  56. // And if it is not typing (e.g. paste), Autoformat should not be fired.
  57. const value = changes.range.getItems().next().value;
  58. if ( !( value instanceof TextProxy ) ) {
  59. return;
  60. }
  61. const textNode = value.textNode;
  62. const text = textNode.data;
  63. // Run matching only on non-empty paragraphs.
  64. if ( textNode.parent.name !== 'paragraph' || !text ) {
  65. return;
  66. }
  67. const match = pattern.exec( text );
  68. if ( !match ) {
  69. return;
  70. }
  71. editor.document.enqueueChanges( () => {
  72. // Create new batch to separate typing batch from the Autoformat changes.
  73. const batch = editor.document.batch();
  74. // Matched range.
  75. const range = Range.createFromParentsAndOffsets( textNode.parent, 0, textNode.parent, match[ 0 ].length );
  76. // Remove matched text.
  77. batch.remove( range );
  78. callback( { batch, match } );
  79. } );
  80. } );
  81. }
  82. }