autoformat.js 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118
  1. /**
  2. * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  4. */
  5. import BlockAutoformatEngine from './blockautoformatengine.js';
  6. import InlineAutoformatEngine from './inlineautoformatengine.js';
  7. import Plugin from '../core/plugin.js';
  8. import HeadingEngine from '../heading/headingengine.js';
  9. import ListEngine from '../list/listengine.js';
  10. import BoldEngine from '../basic-styles/boldengine.js';
  11. import ItalicEngine from '../basic-styles/italicengine.js';
  12. /**
  13. * Includes a set of predefined autoformatting actions.
  14. *
  15. * ## Bulleted list
  16. *
  17. * You can create a bulleted list by staring a line with:
  18. *
  19. * * `* `
  20. * * `- `
  21. *
  22. * ## Numbered list
  23. *
  24. * You can create a numbered list by staring a line with:
  25. *
  26. * * `1. `
  27. * * `1) `
  28. *
  29. * ## Headings
  30. *
  31. * You can create a heading by starting a line with:
  32. *
  33. * `# ` – will create Heading 1,
  34. * `## ` – will create Heading 2,
  35. * `### ` – will create Heading 3.
  36. *
  37. * ## Bold and italic
  38. *
  39. * You can apply bold or italic to a text by typing Markdown formatting:
  40. *
  41. * * `**foo bar**` or `__foo bar__` – will bold the text,
  42. * * `*foo bar*` or `_foo bar_` – will italicize the text,
  43. *
  44. * @memberOf autoformat
  45. * @extends core.Feature
  46. */
  47. export default class Autoformat extends Plugin {
  48. /**
  49. * @inheritDoc
  50. */
  51. static get requires() {
  52. return [ HeadingEngine, ListEngine, BoldEngine, ItalicEngine ];
  53. }
  54. /**
  55. * @inheritDoc
  56. */
  57. init() {
  58. this._addListAutoformats();
  59. this._addHeadingAutoformats();
  60. this._addInlineAutoformats();
  61. }
  62. /**
  63. * Adds autoformatting related to ListEngine commands.
  64. *
  65. * When typed:
  66. * - `* ` or `- ` - paragraph will be changed to a bulleted list,
  67. * - `1. ` or `1) ` - paragraph will be changed to a numbered list (1 can be any digit or list of digits).
  68. *
  69. * @private
  70. */
  71. _addListAutoformats() {
  72. new BlockAutoformatEngine( this.editor, /^[\*\-]\s$/, 'bulletedList' );
  73. new BlockAutoformatEngine( this.editor, /^\d+[\.|)]?\s$/, 'numberedList' );
  74. }
  75. /**
  76. * Adds autoformatting related to HeadingEngine commands.
  77. * When typed `# ` or `## ` or `### ` paragraph will be changed to a corresponding heading level.
  78. *
  79. * @private
  80. */
  81. _addHeadingAutoformats() {
  82. new BlockAutoformatEngine( this.editor, /^(#{1,3})\s$/, ( context ) => {
  83. const { batch, match } = context;
  84. const headingLevel = match[ 1 ].length;
  85. this.editor.execute( 'heading', {
  86. batch,
  87. formatId: `heading${ headingLevel }`
  88. } );
  89. } );
  90. }
  91. /**
  92. * Adds inline autoformatting capabilities to the editor.
  93. *
  94. * When typed:
  95. * - `**foobar**`: `**` characters are removed, and `foobar` is set to bold,
  96. * - `__foobar__`: `__` characters are removed, and `foobar` is set to bold,
  97. * - `*foobar*`: `*` characters are removed, and `foobar` is set to italic,
  98. * - `_foobar_`: `_` characters are removed, and `foobar` is set to italic.
  99. *
  100. * @private
  101. */
  102. _addInlineAutoformats() {
  103. new InlineAutoformatEngine( this.editor, /(\*\*)([^\*]+)(\*\*)$/g, 'bold' );
  104. new InlineAutoformatEngine( this.editor, /(__)([^_]+)(__)$/g, 'bold' );
  105. // The italic autoformatter cannot be triggered by the bold markers, so we need to check the
  106. // text before the pattern (e.g. `(?:^|[^\*])`).
  107. new InlineAutoformatEngine( this.editor, /(?:^|[^\*])(\*)([^\*_]+)(\*)$/g, 'italic' );
  108. new InlineAutoformatEngine( this.editor, /(?:^|[^_])(_)([^_]+)(_)$/g, 'italic' );
  109. }
  110. }