|
| 1 | +/** |
| 2 | + * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved. |
| 3 | + * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license |
| 4 | + */ |
| 5 | + |
| 6 | +/** |
| 7 | + * @module html-support/integrations/mediaembed |
| 8 | + */ |
| 9 | + |
| 10 | +import { Plugin } from 'ckeditor5/src/core'; |
| 11 | + |
| 12 | +import { disallowedAttributesConverter } from '../converters'; |
| 13 | +import { setViewAttributes } from '../conversionutils.js'; |
| 14 | +import DataFilter from '../datafilter'; |
| 15 | +import DataSchema from '../dataschema'; |
| 16 | + |
| 17 | +/** |
| 18 | + * Provides the General HTML Support integration with {@link module:media-embed/mediaembed~MediaEmbed Media Embed} feature. |
| 19 | + * |
| 20 | + * @extends module:core/plugin~Plugin |
| 21 | + */ |
| 22 | +export default class MediaEmbedElementSupport extends Plugin { |
| 23 | + static get requires() { |
| 24 | + return [ DataFilter ]; |
| 25 | + } |
| 26 | + |
| 27 | + init() { |
| 28 | + const editor = this.editor; |
| 29 | + |
| 30 | + // Stop here if MediaEmbed plugin is not provided or the integrator wants to output markup with previews as |
| 31 | + // we do not support filtering previews. |
| 32 | + if ( !editor.plugins.has( 'MediaEmbed' ) || editor.config.get( 'mediaEmbed.previewsInData' ) ) { |
| 33 | + return; |
| 34 | + } |
| 35 | + |
| 36 | + const schema = editor.model.schema; |
| 37 | + const conversion = editor.conversion; |
| 38 | + const dataFilter = this.editor.plugins.get( DataFilter ); |
| 39 | + const dataSchema = this.editor.plugins.get( DataSchema ); |
| 40 | + const mediaElementName = editor.config.get( 'mediaEmbed.elementName' ); |
| 41 | + |
| 42 | + // Overwrite GHS schema definition for a given elementName. |
| 43 | + dataSchema.registerBlockElement( { |
| 44 | + model: 'media', |
| 45 | + view: mediaElementName |
| 46 | + } ); |
| 47 | + |
| 48 | + dataFilter.on( `register:${ mediaElementName }`, ( evt, definition ) => { |
| 49 | + if ( definition.model !== 'media' ) { |
| 50 | + return; |
| 51 | + } |
| 52 | + |
| 53 | + schema.extend( 'media', { |
| 54 | + allowAttributes: [ |
| 55 | + 'htmlAttributes', |
| 56 | + 'htmlFigureAttributes' |
| 57 | + ] |
| 58 | + } ); |
| 59 | + |
| 60 | + conversion.for( 'upcast' ).add( disallowedAttributesConverter( definition, dataFilter ) ); |
| 61 | + conversion.for( 'upcast' ).add( viewToModelMediaAttributesConverter( dataFilter, mediaElementName ) ); |
| 62 | + conversion.for( 'dataDowncast' ).add( modelToViewMediaAttributeConverter( mediaElementName ) ); |
| 63 | + |
| 64 | + evt.stop(); |
| 65 | + } ); |
| 66 | + } |
| 67 | +} |
| 68 | + |
| 69 | +function viewToModelMediaAttributesConverter( dataFilter, mediaElementName ) { |
| 70 | + return dispatcher => { |
| 71 | + // Here we want to be the first to convert (and consume) the figure element, otherwise GHS can pick it up and |
| 72 | + // convert it to generic `htmlFigure`. |
| 73 | + dispatcher.on( 'element:figure', upcastFigure, { priority: 'high' } ); |
| 74 | + |
| 75 | + // Handle media elements without `<figure>` container. |
| 76 | + dispatcher.on( `element:${ mediaElementName }`, upcastMedia ); |
| 77 | + }; |
| 78 | + |
| 79 | + function upcastFigure( evt, data, conversionApi ) { |
| 80 | + const viewFigureElement = data.viewItem; |
| 81 | + |
| 82 | + // Convert only "media figure" elements. |
| 83 | + if ( !conversionApi.consumable.test( viewFigureElement, { name: true, classes: 'media' } ) ) { |
| 84 | + return; |
| 85 | + } |
| 86 | + |
| 87 | + // Find media element. |
| 88 | + const viewMediaElement = Array.from( viewFigureElement.getChildren() ) |
| 89 | + .find( item => item.is( 'element', mediaElementName ) ); |
| 90 | + |
| 91 | + // Do not convert if media element is absent. |
| 92 | + if ( !viewMediaElement ) { |
| 93 | + return; |
| 94 | + } |
| 95 | + |
| 96 | + // Convert just the media element. |
| 97 | + Object.assign( data, conversionApi.convertItem( viewMediaElement, data.modelCursor ) ); |
| 98 | + |
| 99 | + preserveElementAttributes( viewMediaElement, 'htmlAttributes' ); |
| 100 | + preserveElementAttributes( viewFigureElement, 'htmlFigureAttributes' ); |
| 101 | + |
| 102 | + // Consume the figure to prevent converting it to `htmlFigure` by default GHS converters. |
| 103 | + conversionApi.consumable.consume( viewFigureElement, { name: true } ); |
| 104 | + |
| 105 | + function preserveElementAttributes( viewElement, attributeName ) { |
| 106 | + const viewAttributes = dataFilter._consumeAllowedAttributes( viewElement, conversionApi ); |
| 107 | + |
| 108 | + if ( viewAttributes ) { |
| 109 | + conversionApi.writer.setAttribute( attributeName, viewAttributes, data.modelRange ); |
| 110 | + } |
| 111 | + } |
| 112 | + } |
| 113 | + |
| 114 | + function upcastMedia( evt, data, conversionApi ) { |
| 115 | + const viewMediaElement = data.viewItem; |
| 116 | + const viewAttributes = dataFilter._consumeAllowedAttributes( viewMediaElement, conversionApi ); |
| 117 | + |
| 118 | + if ( viewAttributes ) { |
| 119 | + conversionApi.writer.setAttribute( 'htmlAttributes', viewAttributes, data.modelRange ); |
| 120 | + } |
| 121 | + } |
| 122 | +} |
| 123 | + |
| 124 | +function modelToViewMediaAttributeConverter( mediaElementName ) { |
| 125 | + return dispatcher => { |
| 126 | + addAttributeConversionDispatcherHandler( mediaElementName, 'htmlAttributes' ); |
| 127 | + addAttributeConversionDispatcherHandler( 'figure', 'htmlFigureAttributes' ); |
| 128 | + |
| 129 | + function addAttributeConversionDispatcherHandler( elementName, attributeName ) { |
| 130 | + dispatcher.on( `attribute:${ attributeName }:media`, ( evt, data, conversionApi ) => { |
| 131 | + if ( !conversionApi.consumable.consume( data.item, evt.name ) ) { |
| 132 | + return; |
| 133 | + } |
| 134 | + |
| 135 | + const containerElement = conversionApi.mapper.toViewElement( data.item ); |
| 136 | + const viewElement = getDescendantElement( conversionApi, containerElement, elementName ); |
| 137 | + |
| 138 | + setViewAttributes( conversionApi.writer, data.attributeNewValue, viewElement ); |
| 139 | + } ); |
| 140 | + } |
| 141 | + }; |
| 142 | +} |
| 143 | + |
| 144 | +// Returns the first view element descendant matching the given view name. |
| 145 | +// Includes view element itself. |
| 146 | +// |
| 147 | +// @private |
| 148 | +// @param {module:engine/conversion/downcastdispatcher~DowncastConversionApi} conversionApi |
| 149 | +// @param {module:engine/view/element~Element} containerElement |
| 150 | +// @param {String} elementName |
| 151 | +// @returns {module:engine/view/element~Element|null} |
| 152 | +function getDescendantElement( conversionApi, containerElement, elementName ) { |
| 153 | + const range = conversionApi.writer.createRangeOn( containerElement ); |
| 154 | + |
| 155 | + for ( const { item } of range.getWalker() ) { |
| 156 | + if ( item.is( 'element', elementName ) ) { |
| 157 | + return item; |
| 158 | + } |
| 159 | + } |
| 160 | +} |
0 commit comments