paragraph.js 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118
  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. /**
  6. * @module paragraph/paragraph
  7. */
  8. import ParagraphCommand from './paragraphcommand';
  9. import InsertParagraphCommand from './insertparagraphcommand';
  10. import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
  11. /**
  12. * The paragraph feature for the editor.
  13. *
  14. * It introduces the `<paragraph>` element in the model which renders as a `<p>` element in the DOM and data.
  15. *
  16. * It also brings two editors commands:
  17. *
  18. * * The {@link module:paragraph/paragraphcommand~ParagraphCommand `'paragraph'`} command that converts all
  19. * blocks in the model selection into paragraphs.
  20. * * The {@link module:paragraph/insertparagraphcommand~InsertParagraphCommand `'insertParagraph'`} command
  21. * that inserts a new paragraph at a specified location in the model.
  22. *
  23. * @extends module:core/plugin~Plugin
  24. */
  25. export default class Paragraph extends Plugin {
  26. /**
  27. * @inheritDoc
  28. */
  29. static get pluginName() {
  30. return 'Paragraph';
  31. }
  32. /**
  33. * @inheritDoc
  34. */
  35. init() {
  36. const editor = this.editor;
  37. const model = editor.model;
  38. editor.commands.add( 'paragraph', new ParagraphCommand( editor ) );
  39. editor.commands.add( 'insertParagraph', new InsertParagraphCommand( editor ) );
  40. // Schema.
  41. model.schema.register( 'paragraph', { inheritAllFrom: '$block' } );
  42. editor.conversion.elementToElement( { model: 'paragraph', view: 'p' } );
  43. // Conversion for paragraph-like elements which has not been converted by any plugin.
  44. editor.conversion.for( 'upcast' ).elementToElement( {
  45. model: ( viewElement, { writer } ) => {
  46. if ( !Paragraph.paragraphLikeElements.has( viewElement.name ) ) {
  47. return null;
  48. }
  49. // Do not auto-paragraph empty elements.
  50. if ( viewElement.isEmpty ) {
  51. return null;
  52. }
  53. return writer.createElement( 'paragraph' );
  54. },
  55. view: /.+/,
  56. converterPriority: 'low'
  57. } );
  58. }
  59. }
  60. /**
  61. * A list of element names which should be treated by the autoparagraphing algorithms as
  62. * paragraph-like. This means that e.g. the following content:
  63. *
  64. * <h1>Foo</h1>
  65. * <table>
  66. * <tr>
  67. * <td>X</td>
  68. * <td>
  69. * <ul>
  70. * <li>Y</li>
  71. * <li>Z</li>
  72. * </ul>
  73. * </td>
  74. * </tr>
  75. * </table>
  76. *
  77. * contains five paragraph-like elements: `<h1>`, two `<td>`s and two `<li>`s.
  78. * Hence, if none of the features is going to convert those elements the above content will be automatically handled
  79. * by the paragraph feature and converted to:
  80. *
  81. * <p>Foo</p>
  82. * <p>X</p>
  83. * <p>Y</p>
  84. * <p>Z</p>
  85. *
  86. * Note: The `<td>` containing two `<li>` elements was ignored as the innermost paragraph-like elements
  87. * have a priority upon conversion.
  88. *
  89. * @member {Set.<String>} module:paragraph/paragraph~Paragraph.paragraphLikeElements
  90. */
  91. Paragraph.paragraphLikeElements = new Set( [
  92. 'blockquote',
  93. 'dd',
  94. 'div',
  95. 'dt',
  96. 'h1',
  97. 'h2',
  98. 'h3',
  99. 'h4',
  100. 'h5',
  101. 'h6',
  102. 'li',
  103. 'p',
  104. 'td',
  105. 'th'
  106. ] );