/** * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved. * For licensing, see LICENSE.md. */ /** * @module image/converters */ import ViewContainerElement from '@ckeditor/ckeditor5-engine/src/view/containerelement'; import ViewEmptyElement from '@ckeditor/ckeditor5-engine/src/view/emptyelement'; import ModelElement from '@ckeditor/ckeditor5-engine/src/model/element'; import { isImageWidget } from './utils'; /** * Returns function that converts image view representation: * *
...
* * to model representation: * * ... * * @returns {Function} */ export function viewToModelImage() { return ( evt, data, consumable, conversionApi ) => { const viewFigureElement = data.input; // *** Step 1: Validate conversion. // Check if figure element can be consumed. if ( !consumable.test( viewFigureElement, { name: true, class: 'image' } ) ) { return; } // Check if image element can be converted in current context. if ( !conversionApi.schema.check( { name: 'image', inside: data.context, attributes: 'src' } ) ) { return; } // Check if img element is placed inside figure element and can be consumed with `src` attribute. const viewImg = viewFigureElement.getChild( 0 ); if ( !viewImg || viewImg.name != 'img' || !consumable.test( viewImg, { name: true, attribute: 'src' } ) ) { return; } // *** Step2: Convert to model. consumable.consume( viewFigureElement, { name: true, class: 'image' } ); consumable.consume( viewImg, { name: true, attribute: 'src' } ); // Create model element. const modelImage = new ModelElement( 'image', { src: viewImg.getAttribute( 'src' ) } ); // Convert `alt` attribute if present. if ( consumable.consume( viewImg, { attribute: [ 'alt' ] } ) ) { modelImage.setAttribute( 'alt', viewImg.getAttribute( 'alt' ) ); } data.output = modelImage; }; } /** * Returns model to view selection converter. This converter is applied after default selection conversion is made. * It creates fake view selection when {@link module:engine/view/selection~Selection#getSelectedElement} returns instance * of image widget. * * @param {Function} t {@link module:utils/locale~Locale#t Locale#t function} used to translate default fake selection's label. * @returns {Function} */ export function modelToViewSelection( t ) { return ( evt, data, consumable, conversionApi ) => { const viewSelection = conversionApi.viewSelection; const selectedElement = viewSelection.getSelectedElement(); if ( !selectedElement || !isImageWidget( selectedElement ) ) { return; } let fakeSelectionLabel = t( 'image widget' ); const imgElement = selectedElement.getChild( 0 ); const altText = imgElement.getAttribute( 'alt' ); if ( altText ) { fakeSelectionLabel = `${ altText } ${ fakeSelectionLabel }`; } viewSelection.setFake( true, { label: fakeSelectionLabel } ); }; } /** * Converts model `image` element to view representation: * *
...
* * @param {module:engine/model/element~Element} modelElement * @return {module:engine/view/containerelement~ContainerElement} */ export function modelToViewImage( modelElement ) { const viewImg = new ViewEmptyElement( 'img', { src: modelElement.getAttribute( 'src' ) } ); if ( modelElement.hasAttribute( 'alt' ) ) { viewImg.setAttribute( 'alt', modelElement.getAttribute( 'alt' ) ); } return new ViewContainerElement( 'figure', { class: 'image' }, viewImg ); }