8
0

horizontallineediting.js 2.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485
  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 horizontal-line/horizontallineediting
  7. */
  8. import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
  9. import HorizontalLineCommand from './horizontallinecommand';
  10. import { toWidget } from '@ckeditor/ckeditor5-widget/src/utils';
  11. import '../theme/horizontalline.css';
  12. /**
  13. * The horizontal line editing feature.
  14. *
  15. * @extends module:core/plugin~Plugin
  16. */
  17. export default class HorizontalLineEditing extends Plugin {
  18. /**
  19. * @inheritDoc
  20. */
  21. static get pluginName() {
  22. return 'HorizontalLineEditing';
  23. }
  24. /**
  25. * @inheritDoc
  26. */
  27. init() {
  28. const editor = this.editor;
  29. const schema = editor.model.schema;
  30. const t = editor.t;
  31. const conversion = editor.conversion;
  32. schema.register( 'horizontalLine', {
  33. isObject: true,
  34. allowWhere: '$block'
  35. } );
  36. conversion.for( 'dataDowncast' ).elementToElement( {
  37. model: 'horizontalLine',
  38. view: ( modelElement, viewWriter ) => {
  39. return viewWriter.createEmptyElement( 'hr' );
  40. }
  41. } );
  42. conversion.for( 'editingDowncast' ).elementToElement( {
  43. model: 'horizontalLine',
  44. view: ( modelElement, viewWriter ) => {
  45. const label = t( 'Horizontal line' );
  46. const viewWrapper = viewWriter.createContainerElement( 'div' );
  47. const viewHrElement = viewWriter.createEmptyElement( 'hr' );
  48. viewWriter.addClass( 'ck-horizontal-line', viewWrapper );
  49. viewWriter.setCustomProperty( 'hr', true, viewWrapper );
  50. viewWriter.insert( viewWriter.createPositionAt( viewWrapper, 0 ), viewHrElement );
  51. return toHorizontalLineWidget( viewWrapper, viewWriter, label );
  52. }
  53. } );
  54. conversion.for( 'upcast' ).elementToElement( { view: 'hr', model: 'horizontalLine' } );
  55. editor.commands.add( 'horizontalLine', new HorizontalLineCommand( editor ) );
  56. }
  57. }
  58. // Converts a given {@link module:engine/view/element~Element} to a horizontal line widget:
  59. // * Adds a {@link module:engine/view/element~Element#_setCustomProperty custom property} allowing to
  60. // recognize the horizontal line widget element.
  61. // * Calls the {@link module:widget/utils~toWidget} function with the proper element's label creator.
  62. //
  63. // @param {module:engine/view/element~Element} viewElement
  64. // @param {module:engine/view/downcastwriter~DowncastWriter} writer An instance of the view writer.
  65. // @param {String} label The element's label.
  66. // @returns {module:engine/view/element~Element}
  67. function toHorizontalLineWidget( viewElement, writer, label ) {
  68. writer.setCustomProperty( 'horizontalLine', true, viewElement );
  69. return toWidget( viewElement, writer, { label } );
  70. }