utils.js 2.8 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485
  1. /**
  2. * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  4. */
  5. /**
  6. * @module media-embed/utils
  7. */
  8. import ViewPosition from '@ckeditor/ckeditor5-engine/src/view/position';
  9. import { toWidget } from '@ckeditor/ckeditor5-widget/src/utils';
  10. const mediaSymbol = Symbol( 'isMedia' );
  11. /**
  12. * Converts a given {@link module:engine/view/element~Element} to a media embed widget:
  13. * * Adds a {@link module:engine/view/element~Element#_setCustomProperty custom property} allowing to recognize the media widget element.
  14. * * Calls the {@link module:widget/utils~toWidget} function with the proper element's label creator.
  15. *
  16. * @param {module:engine/view/element~Element} viewElement
  17. * @param {module:engine/view/downcastwriter~DowncastWriter} writer An instance of the view writer.
  18. * @param {String} label The element's label.
  19. * @returns {module:engine/view/element~Element}
  20. */
  21. export function toMediaWidget( viewElement, writer, label ) {
  22. writer.setCustomProperty( mediaSymbol, true, viewElement );
  23. return toWidget( viewElement, writer, { label } );
  24. }
  25. /**
  26. * Creates a view element representing the media. Either "semantic" one for the data pipeline:
  27. *
  28. * <figure class="media">
  29. * <oembed url="foo"></div>
  30. * </figure>
  31. *
  32. * or "non-semantic" (for editing view pipeline):
  33. *
  34. * <figure class="media">
  35. * <div data-oembed-url="foo">[ non-semantic media preview for "foo" ]</div>
  36. * </figure>
  37. *
  38. * @param {module:engine/view/downcastwriter~DowncastWriter} writer
  39. * @param {module:media-embed/mediaregistry~MediaRegistry} registry
  40. * @param {String} url
  41. * @param {Object} options
  42. * @param {String} [options.renderContent]
  43. * @param {String} [options.useSemanticWrapper]
  44. * @param {String} [options.renderForEditingView]
  45. * @returns {module:engine/view/containerelement~ContainerElement}
  46. */
  47. export function createMediaFigureElement( writer, registry, url, options ) {
  48. const figure = writer.createContainerElement( 'figure', { class: 'media' } );
  49. // TODO: This is a hack. Without it, the figure in the data pipeline will contain &nbsp; because
  50. // its only child is the UIElement (wrapper).
  51. //
  52. // Note: The hack is a copy&paste from widget utils; it makes the figure act like it's a widget.
  53. figure.getFillerOffset = getFillerOffset;
  54. writer.insert( ViewPosition.createAt( figure ), registry.getMediaViewElement( writer, url, options ) );
  55. return figure;
  56. }
  57. /**
  58. * Returns a selected media element in model, if any.
  59. *
  60. * @param {module:engine/model/selection~Selection} selection
  61. * @returns {module:engine/model/element~Element|null}
  62. */
  63. export function getSelectedMediaElement( selection ) {
  64. const selectedElement = selection.getSelectedElement();
  65. if ( selectedElement && selectedElement.is( 'media' ) ) {
  66. return selectedElement;
  67. }
  68. return null;
  69. }
  70. function getFillerOffset() {
  71. return null;
  72. }