imagestylecommand.js 2.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697
  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 image/imagestyle/imagestylecommand
  7. */
  8. import Command from '@ckeditor/ckeditor5-core/src/command';
  9. import { isImage } from '../image/utils';
  10. /**
  11. * The image style command. It is used to apply different image styles.
  12. *
  13. * @extends module:core/command~Command
  14. */
  15. export default class ImageStyleCommand extends Command {
  16. /**
  17. * Creates an instance of the image style command. Each command instance is handling one style.
  18. *
  19. * @param {module:core/editor/editor~Editor} editor The editor instance.
  20. * @param {Array.<module:image/imagestyle/imagestyleediting~ImageStyleFormat>} styles The styles that this command supports.
  21. */
  22. constructor( editor, styles ) {
  23. super( editor );
  24. /**
  25. * The name of the default style, if it is present. If there is no default style, it defaults to `false`.
  26. *
  27. * @readonly
  28. * @type {Boolean|String}
  29. */
  30. this.defaultStyle = false;
  31. /**
  32. * A style handled by this command.
  33. *
  34. * @readonly
  35. * @member {Array.<module:image/imagestyle/imagestyleediting~ImageStyleFormat>} #styles
  36. */
  37. this.styles = styles.reduce( ( styles, style ) => {
  38. styles[ style.name ] = style;
  39. if ( style.isDefault ) {
  40. this.defaultStyle = style.name;
  41. }
  42. return styles;
  43. }, {} );
  44. }
  45. /**
  46. * @inheritDoc
  47. */
  48. refresh() {
  49. const element = this.editor.model.document.selection.getSelectedElement();
  50. this.isEnabled = isImage( element );
  51. if ( !element ) {
  52. this.value = false;
  53. } else if ( element.hasAttribute( 'imageStyle' ) ) {
  54. const attributeValue = element.getAttribute( 'imageStyle' );
  55. this.value = this.styles[ attributeValue ] ? attributeValue : false;
  56. } else {
  57. this.value = this.defaultStyle;
  58. }
  59. }
  60. /**
  61. * Executes the command.
  62. *
  63. * editor.execute( 'imageStyle', { value: 'side' } );
  64. *
  65. * @param {Object} options
  66. * @param {String} options.value The name of the style (based on the
  67. * {@link module:image/image~ImageConfig#styles `image.styles`} configuration option).
  68. * @fires execute
  69. */
  70. execute( options ) {
  71. const styleName = options.value;
  72. const model = this.editor.model;
  73. const imageElement = model.document.selection.getSelectedElement();
  74. model.change( writer => {
  75. // Default style means that there is no `imageStyle` attribute in the model.
  76. // https://github.com/ckeditor/ckeditor5-image/issues/147
  77. if ( this.styles[ styleName ].isDefault ) {
  78. writer.removeAttribute( 'imageStyle', imageElement );
  79. } else {
  80. writer.setAttribute( 'imageStyle', styleName, imageElement );
  81. }
  82. } );
  83. }
  84. }