8
0

converters.js 3.4 KB

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