8
0

blockautoformatengine.js 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113
  1. /**
  2. * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  4. */
  5. /**
  6. * @module autoformat/blockautoformatengine
  7. */
  8. import Range from '@ckeditor/ckeditor5-engine/src/model/range';
  9. import TextProxy from '@ckeditor/ckeditor5-engine/src/model/textproxy';
  10. /**
  11. * The block autoformatting engine. Allows to format various block patterns. For example,
  12. * it can be configured to make a paragraph starting with "* " a list item.
  13. *
  14. * The autoformatting operation is integrated with the undo manager,
  15. * so the autoformatting step can be undone, if the user's intention wasn't to format the text.
  16. *
  17. * See the constructors documentation to learn how to create custom inline autoformatters. You can also use
  18. * the {@link module:autoformat/autoformat~Autoformat} feature which enables a set of default autoformatters
  19. * (lists, headings, bold and italic).
  20. */
  21. export default class BlockAutoformatEngine {
  22. /**
  23. * Creates listener triggered on `change` event in document.
  24. * Calls callback when inserted text matches regular expression or command name
  25. * if provided instead of callback.
  26. *
  27. * Examples of usage:
  28. *
  29. * To convert paragraph to heading1 when `- ` is typed, using just commmand name:
  30. *
  31. * new BlockAutoformatEngine( editor, /^\- $/, 'heading1' );
  32. *
  33. * To convert paragraph to heading1 when `- ` is typed, using just callback:
  34. *
  35. * new BlockAutoformatEngine( editor, /^\- $/, ( context ) => {
  36. * const { batch, match } = context;
  37. * const headingLevel = match[ 1 ].length;
  38. *
  39. * editor.execute( 'heading', {
  40. * batch,
  41. * formatId: `heading${ headingLevel }`
  42. * } );
  43. * } );
  44. *
  45. * @param {module:core/editor/editor~Editor} editor Editor instance.
  46. * @param {RegExp} pattern Regular expression to exec on just inserted text.
  47. * @param {Function|String} callbackOrCommand Callback to execute or command to run when text is matched.
  48. * In case of providing callback it receives following parameters:
  49. * * {module:engine/model/batch~Batch} batch Newly created batch for autoformat changes.
  50. * * {Object} match RegExp.exec() result of matching pattern to inserted text.
  51. */
  52. constructor( editor, pattern, callbackOrCommand ) {
  53. let callback;
  54. if ( typeof callbackOrCommand == 'function' ) {
  55. callback = callbackOrCommand;
  56. } else {
  57. // We assume that the actual command name was provided.
  58. const command = callbackOrCommand;
  59. callback = ( context ) => {
  60. const { batch } = context;
  61. // Create new batch for removal and command execution.
  62. editor.execute( command, { batch } );
  63. };
  64. }
  65. editor.document.on( 'change', ( event, type, changes ) => {
  66. if ( type != 'insert' ) {
  67. return;
  68. }
  69. // Take the first element. Typing shouldn't add more than one element at once.
  70. // And if it is not typing (e.g. paste), Autoformat should not be fired.
  71. const value = changes.range.getItems().next().value;
  72. if ( !( value instanceof TextProxy ) ) {
  73. return;
  74. }
  75. const textNode = value.textNode;
  76. const text = textNode.data;
  77. // Run matching only on non-empty paragraphs.
  78. if ( textNode.parent.name !== 'paragraph' || !text ) {
  79. return;
  80. }
  81. const match = pattern.exec( text );
  82. if ( !match ) {
  83. return;
  84. }
  85. editor.document.enqueueChanges( () => {
  86. // Create new batch to separate typing batch from the Autoformat changes.
  87. const batch = editor.document.batch();
  88. // Matched range.
  89. const range = Range.createFromParentsAndOffsets( textNode.parent, 0, textNode.parent, match[ 0 ].length );
  90. // Remove matched text.
  91. batch.remove( range );
  92. callback( { batch, match } );
  93. } );
  94. } );
  95. }
  96. }