Merge pull request #10226 from ckeditor/ck/9918

Feature (html-support): Added General HTML Support integration for Media Embed feature. Closes #9918.

packages/ckeditor5-html-support/src/generalhtmlsupport.js

@@ -10,6 +10,7 @@
 import { Plugin } from 'ckeditor5/src/core';
 
 import DataFilter from './datafilter';
+import MediaEmbedElementSupport from './integrations/mediaembed';
 import TableElementSupport from './integrations/table';
 import CodeBlockElementSupport from './integrations/codeblock';
 import DualContentModelElementSupport from './integrations/dualcontent';
@@ -38,7 +39,8 @@ export default class GeneralHtmlSupport extends Plugin {
  DataFilter,
  TableElementSupport,
  CodeBlockElementSupport,
- DualContentModelElementSupport
+ DualContentModelElementSupport,
+ MediaEmbedElementSupport
  ];
  }
 

packages/ckeditor5-html-support/src/integrations/mediaembed.js

@@ -0,0 +1,160 @@
+/**
+ * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/**
+ * @module html-support/integrations/mediaembed
+ */
+
+import { Plugin } from 'ckeditor5/src/core';
+
+import { disallowedAttributesConverter } from '../converters';
+import { setViewAttributes } from '../conversionutils.js';
+import DataFilter from '../datafilter';
+import DataSchema from '../dataschema';
+
+/**
+ * Provides the General HTML Support integration with {@link module:media-embed/mediaembed~MediaEmbed Media Embed} feature.
+ *
+ * @extends module:core/plugin~Plugin
+ */
+export default class MediaEmbedElementSupport extends Plugin {
+ static get requires() {
+ return [ DataFilter ];
+ }
+
+ init() {
+ const editor = this.editor;
+
+ // Stop here if MediaEmbed plugin is not provided or the integrator wants to output markup with previews as
+ // we do not support filtering previews.
+ if ( !editor.plugins.has( 'MediaEmbed' ) || editor.config.get( 'mediaEmbed.previewsInData' ) ) {
+ return;
+ }
+
+ const schema = editor.model.schema;
+ const conversion = editor.conversion;
+ const dataFilter = this.editor.plugins.get( DataFilter );
+ const dataSchema = this.editor.plugins.get( DataSchema );
+ const mediaElementName = editor.config.get( 'mediaEmbed.elementName' );
+
+ // Overwrite GHS schema definition for a given elementName.
+ dataSchema.registerBlockElement( {
+ model: 'media',
+ view: mediaElementName
+ } );
+
+ dataFilter.on( `register:${ mediaElementName }`, ( evt, definition ) => {
+ if ( definition.model !== 'media' ) {
+ return;
+ }
+
+ schema.extend( 'media', {
+ allowAttributes: [
+ 'htmlAttributes',
+ 'htmlFigureAttributes'
+ ]
+ } );
+
+ conversion.for( 'upcast' ).add( disallowedAttributesConverter( definition, dataFilter ) );
+ conversion.for( 'upcast' ).add( viewToModelMediaAttributesConverter( dataFilter, mediaElementName ) );
+ conversion.for( 'dataDowncast' ).add( modelToViewMediaAttributeConverter( mediaElementName ) );
+
+ evt.stop();
+ } );
+ }
+}
+
+function viewToModelMediaAttributesConverter( dataFilter, mediaElementName ) {
+ return dispatcher => {
+ // Here we want to be the first to convert (and consume) the figure element, otherwise GHS can pick it up and
+ // convert it to generic `htmlFigure`.
+ dispatcher.on( 'element:figure', upcastFigure, { priority: 'high' } );
+
+ // Handle media elements without `<figure>` container.
+ dispatcher.on( `element:${ mediaElementName }`, upcastMedia );
+ };
+
+ function upcastFigure( evt, data, conversionApi ) {
+ const viewFigureElement = data.viewItem;
+
+ // Convert only "media figure" elements.
+ if ( !conversionApi.consumable.test( viewFigureElement, { name: true, classes: 'media' } ) ) {
+ return;
+ }
+
+ // Find media element.
+ const viewMediaElement = Array.from( viewFigureElement.getChildren() )
+ .find( item => item.is( 'element', mediaElementName ) );
+
+ // Do not convert if media element is absent.
+ if ( !viewMediaElement ) {
+ return;
+ }
+
+ // Convert just the media element.
+ Object.assign( data, conversionApi.convertItem( viewMediaElement, data.modelCursor ) );
+
+ preserveElementAttributes( viewMediaElement, 'htmlAttributes' );
+ preserveElementAttributes( viewFigureElement, 'htmlFigureAttributes' );
+
+ // Consume the figure to prevent converting it to `htmlFigure` by default GHS converters.
+ conversionApi.consumable.consume( viewFigureElement, { name: true } );
+
+ function preserveElementAttributes( viewElement, attributeName ) {
+ const viewAttributes = dataFilter._consumeAllowedAttributes( viewElement, conversionApi );
+
+ if ( viewAttributes ) {
+ conversionApi.writer.setAttribute( attributeName, viewAttributes, data.modelRange );
+ }
+ }
+ }
+
+ function upcastMedia( evt, data, conversionApi ) {
+ const viewMediaElement = data.viewItem;
+ const viewAttributes = dataFilter._consumeAllowedAttributes( viewMediaElement, conversionApi );
+
+ if ( viewAttributes ) {
+ conversionApi.writer.setAttribute( 'htmlAttributes', viewAttributes, data.modelRange );
+ }
+ }
+}
+
+function modelToViewMediaAttributeConverter( mediaElementName ) {
+ return dispatcher => {
+ addAttributeConversionDispatcherHandler( mediaElementName, 'htmlAttributes' );
+ addAttributeConversionDispatcherHandler( 'figure', 'htmlFigureAttributes' );
+
+ function addAttributeConversionDispatcherHandler( elementName, attributeName ) {
+ dispatcher.on( `attribute:${ attributeName }:media`, ( evt, data, conversionApi ) => {
+ if ( !conversionApi.consumable.consume( data.item, evt.name ) ) {
+ return;
+ }
+
+ const containerElement = conversionApi.mapper.toViewElement( data.item );
+ const viewElement = getDescendantElement( conversionApi, containerElement, elementName );
+
+ setViewAttributes( conversionApi.writer, data.attributeNewValue, viewElement );
+ } );
+ }
+ };
+}
+
+// Returns the first view element descendant matching the given view name.
+// Includes view element itself.
+//
+// @private
+// @param {module:engine/conversion/downcastdispatcher~DowncastConversionApi} conversionApi
+// @param {module:engine/view/element~Element} containerElement
+// @param {String} elementName
+// @returns {module:engine/view/element~Element|null}
+function getDescendantElement( conversionApi, containerElement, elementName ) {
+ const range = conversionApi.writer.createRangeOn( containerElement );
+
+ for ( const { item } of range.getWalker() ) {
+ if ( item.is( 'element', elementName ) ) {
+ return item;
+ }
+ }
+}

packages/ckeditor5-html-support/src/schemadefinitions.js

@@ -788,6 +788,14 @@ export default {
  inheritAllFrom: '$htmlObjectInline'
  }
  },
+ {
+ model: 'htmlOembed',
+ view: 'oembed',
+ isObject: true,
+ modelSchema: {
+ inheritAllFrom: '$htmlObjectInline'
+ }
+ },
  {
  model: 'htmlAudio',
  view: 'audio',

packages/ckeditor5-html-support/tests/manual/mediaembed.html

@@ -0,0 +1,57 @@
+<head>
+ <!--
+ For a totally unknown reason, Travis and Vimeo do not like each other and the test fail on CI.
+ Additionally, the embedded Spotify player has started to throw an uncaught exception, but only on CI. See #9678.
+ -->
+ <meta name="x-cke-crawler-ignore-patterns" content='{
+ "request-failure": "vimeo.com",
+ "response-failure": "vimeo.com",
+ "console-error": [ "<svg> attribute preserveAspectRatio", "vimeo.com" ],
+ "uncaught-exception": "retargetingPixels is not defined"
+ }'>
+</head>
+
+<div style="display: flex; justify-content: space-between;">
+ <div style="flex: 0 1 49%">
+ <h4>The default <code>oembed</code> element</h4>
+
+ <div id="editor">
+ <figure class="media allowed-class disallowed-class" data-validation-allow="Allowed attribute"
+ data-validation-disallow="Disallowed attribute" style="color: blue;">
+ <oembed class="allowed-class disallowed-class" url="https://www.youtube.com/watch?v=ZVv7UMQPEWk"
+ data-validation-allow="Allowed attribute" data-validation-disallow="Disallowed attribute"
+ style="color: blue;"></oembed>
+ </figure>
+ </div>
+
+ <h4>Expected output</h4>
+
+ <textarea style="width: 100%; height: 200px; line-height: 1.8em;">
+<figure class="media allowed-class" style="color:blue;" data-validation-allow="Allowed attribute">
+ <oembed class="allowed-class" style="color:blue;" url="https://www.youtube.com/watch?v=ZVv7UMQPEWk" data-validation-allow="Allowed attribute"></oembed>
+</figure>
+ </textarea>
+
+ </div>
+ <div style="flex: 0 1 49%;">
+ <h4>Custom media element</h4>
+
+ <div id="editor-custom-element-name">
+ <figure class="media allowed-class disallowed-class" data-validation-allow="Allowed attribute"
+ data-validation-disallow="Disallowed attribute" style="color: blue;">
+ <custom-oembed class="allowed-class disallowed-class" url="https://vimeo.com/1084537"
+ data-validation-allow="Allowed attribute" data-validation-disallow="Disallowed attribute"
+ style="color: blue;"></custom-oembed>
+ </figure>
+ </div>
+
+ <h4>Expected output</h4>
+
+ <textarea style="width: 100%; height: 200px; line-height: 1.8em;">
+<figure class="media allowed-class" style="color:blue;" data-validation-allow="Allowed attribute">
+ <custom-oembed class="allowed-class" style="color:blue;" url="https://vimeo.com/1084537" data-validation-allow="Allowed attribute"></custom-oembed>
+</figure>
+ </textarea>
+
+ </div>
+</div>

packages/ckeditor5-html-support/tests/manual/mediaembed.js

@@ -0,0 +1,106 @@
+/**
+ * @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/* globals console:false, window, document */
+
+import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
+import MediaEmbed from '@ckeditor/ckeditor5-media-embed/src/mediaembed';
+import MediaEmbedToolbar from '@ckeditor/ckeditor5-media-embed/src/mediaembedtoolbar';
+import SourceEditing from '@ckeditor/ckeditor5-source-editing/src/sourceediting';
+import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
+import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
+
+import GeneralHtmlSupport from '../../src/generalhtmlsupport';
+
+ClassicEditor
+ .create( document.querySelector( '#editor' ), {
+ plugins: [
+ GeneralHtmlSupport,
+ Essentials,
+ Paragraph,
+ SourceEditing,
+ MediaEmbed,
+ MediaEmbedToolbar
+ ],
+ image: { toolbar: [ 'toggleImageCaption', 'imageTextAlternative' ] },
+ toolbar: [ 'mediaEmbed', '|', 'sourceEditing' ],
+ mediaEmbed: {
+ toolbar: [ 'mediaEmbed' ]
+ },
+ htmlSupport: {
+ allow: [
+ {
+ name: /^(figure|oembed)$/,
+ attributes: [ 'data-validation-allow' ],
+ classes: [ 'allowed-class' ],
+ styles: {
+ color: 'blue'
+ }
+ }
+ ],
+ disallow: [
+ {
+ name: /^(figure|oembed)$/,
+ attributes: 'data-validation-disallow',
+ classes: [ 'disallowed-class' ],
+ styles: {
+ color: 'red'
+ }
+ }
+ ]
+ }
+ } )
+ .then( editor => {
+ window.editor = editor;
+ } )
+ .catch( err => {
+ console.error( err.stack );
+ } );
+
+ClassicEditor
+ .create( document.querySelector( '#editor-custom-element-name' ), {
+ plugins: [
+ GeneralHtmlSupport,
+ Essentials,
+ Paragraph,
+ SourceEditing,
+ MediaEmbed,
+ MediaEmbedToolbar
+ ],
+ image: { toolbar: [ 'toggleImageCaption', 'imageTextAlternative' ] },
+ toolbar: [ 'mediaEmbed', '|', 'sourceEditing' ],
+ mediaEmbed: {
+ elementName: 'custom-oembed',
+ toolbar: [ 'mediaEmbed' ]
+ },
+ htmlSupport: {
+ allow: [
+ {
+ name: /^(figure|custom-oembed)$/,
+ attributes: [ 'data-validation-allow' ],
+ classes: [ 'allowed-class' ],
+ styles: {
+ color: 'blue'
+ }
+ }
+ ],
+ disallow: [
+ {
+ name: /^(figure|custom-oembed)$/,
+ attributes: 'data-validation-disallow',
+ classes: [ 'disallowed-class' ],
+ styles: {
+ color: 'red'
+ }
+ }
+ ]
+ }
+ } )
+ .then( editor => {
+ window.editor = editor;
+ } )
+ .catch( err => {
+ console.error( err.stack );
+ } );

packages/ckeditor5-html-support/tests/manual/mediaembed.md

@@ -0,0 +1,3 @@
+## Media Embed
+
+Compare the output (using e.g. Source Editing plugin) with the expected result below the editor.