converters.js 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113
  1. /**
  2. * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  4. */
  5. /**
  6. * @module image/converters
  7. */
  8. import ViewContainerElement from '@ckeditor/ckeditor5-engine/src/view/containerelement';
  9. import ViewEmptyElement from '@ckeditor/ckeditor5-engine/src/view/emptyelement';
  10. import ModelElement from '@ckeditor/ckeditor5-engine/src/model/element';
  11. import { isImageWidget } from './utils';
  12. /**
  13. * Returns function that converts image view representation:
  14. *
  15. * <figure class="image"><img src="..." alt="..."></img></figure>
  16. *
  17. * to model representation:
  18. *
  19. * <image src="..." alt="..."></image>
  20. *
  21. * @returns {Function}
  22. */
  23. export function viewToModelImage() {
  24. return ( evt, data, consumable, conversionApi ) => {
  25. const viewFigureElement = data.input;
  26. // *** Step 1: Validate conversion.
  27. // Check if figure element can be consumed.
  28. if ( !consumable.test( viewFigureElement, { name: true, class: 'image' } ) ) {
  29. return;
  30. }
  31. // Check if image element can be converted in current context.
  32. if ( !conversionApi.schema.check( { name: 'image', inside: data.context, attributes: 'src' } ) ) {
  33. return;
  34. }
  35. // Check if img element is placed inside figure element and can be consumed with `src` attribute.
  36. const viewImg = viewFigureElement.getChild( 0 );
  37. if ( !viewImg || viewImg.name != 'img' || !consumable.test( viewImg, { name: true, attribute: 'src' } ) ) {
  38. return;
  39. }
  40. // *** Step2: Convert to model.
  41. consumable.consume( viewFigureElement, { name: true, class: 'image' } );
  42. consumable.consume( viewImg, { name: true, attribute: 'src' } );
  43. // Create model element.
  44. const modelImage = new ModelElement( 'image', {
  45. src: viewImg.getAttribute( 'src' )
  46. } );
  47. // Convert `alt` attribute if present.
  48. if ( consumable.consume( viewImg, { attribute: [ 'alt' ] } ) ) {
  49. modelImage.setAttribute( 'alt', viewImg.getAttribute( 'alt' ) );
  50. }
  51. data.output = modelImage;
  52. };
  53. }
  54. /**
  55. * Returns model to view selection converter. This converter is applied after default selection conversion is made.
  56. * It creates fake view selection when {@link module:engine/view/selection~Selection#getSelectedElement} returns instance
  57. * of image widget.
  58. *
  59. * @param {Function} t {@link module:utils/locale~Locale#t Locale#t function} used to translate default fake selection's label.
  60. * @returns {Function}
  61. */
  62. export function modelToViewSelection( t ) {
  63. return ( evt, data, consumable, conversionApi ) => {
  64. const viewSelection = conversionApi.viewSelection;
  65. const selectedElement = viewSelection.getSelectedElement();
  66. if ( !selectedElement || !isImageWidget( selectedElement ) ) {
  67. return;
  68. }
  69. let fakeSelectionLabel = t( 'image widget' );
  70. const imgElement = selectedElement.getChild( 0 );
  71. const altText = imgElement.getAttribute( 'alt' );
  72. if ( altText ) {
  73. fakeSelectionLabel = `${ altText } ${ fakeSelectionLabel }`;
  74. }
  75. viewSelection.setFake( true, { label: fakeSelectionLabel } );
  76. };
  77. }
  78. /**
  79. * Converts model `image` element to view representation:
  80. *
  81. * <figure class="image"><img src="..." alt="..."></img></figure>
  82. *
  83. * @param {module:engine/model/element~Element} modelElement
  84. * @return {module:engine/view/containerelement~ContainerElement}
  85. */
  86. export function modelToViewImage( modelElement ) {
  87. const viewImg = new ViewEmptyElement( 'img', {
  88. src: modelElement.getAttribute( 'src' )
  89. } );
  90. if ( modelElement.hasAttribute( 'alt' ) ) {
  91. viewImg.setAttribute( 'alt', modelElement.getAttribute( 'alt' ) );
  92. }
  93. return new ViewContainerElement( 'figure', { class: 'image' }, viewImg );
  94. }