indentblock.js 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114
  1. /**
  2. * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  4. */
  5. /**
  6. * @module indent-block/indentblock
  7. */
  8. import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
  9. import IndentBlockCommand from './indentblockcommand';
  10. /**
  11. * The block indentation feature.
  12. *
  13. * @extends module:core/plugin~Plugin
  14. */
  15. export default class IndentBlock extends Plugin {
  16. /**
  17. * @inheritDoc
  18. */
  19. constructor( editor ) {
  20. super( editor );
  21. editor.config.define( 'indentBlock', {
  22. classes: [],
  23. offset: 1,
  24. unit: 'em'
  25. } );
  26. }
  27. /**
  28. * @inheritDoc
  29. */
  30. static get pluginName() {
  31. return 'IndentBlock';
  32. }
  33. /**
  34. * @inheritDoc
  35. */
  36. init() {
  37. const editor = this.editor;
  38. const schema = editor.model.schema;
  39. const conversion = editor.conversion;
  40. const config = editor.config.get( 'indentBlock' );
  41. // TODO: better features inclusion
  42. schema.extend( 'paragraph', { allowAttributes: 'indent' } );
  43. schema.extend( 'heading1', { allowAttributes: 'indent' } );
  44. const classes = config.classes;
  45. const usingClasses = !!classes.length;
  46. if ( usingClasses ) {
  47. const definition = {
  48. model: {
  49. key: 'indent',
  50. values: []
  51. },
  52. view: {}
  53. };
  54. for ( const className of classes ) {
  55. definition.model.values.push( className );
  56. definition.view[ className ] = {
  57. key: 'class',
  58. value: [ className ]
  59. };
  60. }
  61. editor.conversion.attributeToAttribute( definition );
  62. } else {
  63. conversion.for( 'upcast' ).attributeToAttribute( {
  64. view: {
  65. styles: {
  66. 'margin-left': /[\s\S]+/
  67. }
  68. },
  69. model: {
  70. key: 'indent',
  71. value: viewElement => {
  72. return viewElement.getStyle( 'margin-left' );
  73. }
  74. }
  75. } );
  76. conversion.for( 'downcast' ).attributeToAttribute( {
  77. model: 'indent',
  78. view: modelAttributeValue => {
  79. return {
  80. key: 'style',
  81. value: {
  82. 'margin-left': modelAttributeValue
  83. }
  84. };
  85. }
  86. } );
  87. }
  88. editor.commands.add( 'indentBlock', new IndentBlockCommand( editor, Object.assign( { direction: 'forward' }, config ) ) );
  89. editor.commands.add( 'outdentBlock', new IndentBlockCommand( editor, Object.assign( { direction: 'backward' }, config ) ) );
  90. }
  91. afterInit() {
  92. const editor = this.editor;
  93. const indentCommand = editor.commands.get( 'indent' );
  94. const outdentCommand = editor.commands.get( 'outdent' );
  95. indentCommand.registerChildCommand( editor.commands.get( 'indentBlock' ) );
  96. outdentCommand.registerChildCommand( editor.commands.get( 'outdentBlock' ) );
  97. }
  98. }