| 1 | /**
|
| 2 | * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
|
| 3 | * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
| 4 | */
|
| 5 | import { isWidget, toWidget } from 'ckeditor5/src/widget';
|
| 6 | /**
|
| 7 | * Converts a given {@link module:engine/view/element~Element} to a media embed widget:
|
| 8 | * * Adds a {@link module:engine/view/element~Element#_setCustomProperty custom property} allowing to recognize the media widget element.
|
| 9 | * * Calls the {@link module:widget/utils~toWidget} function with the proper element's label creator.
|
| 10 | *
|
| 11 | * @param writer An instance of the view writer.
|
| 12 | * @param label The element's label.
|
| 13 | */
|
| 14 | export function toMediaWidget(viewElement, writer, label) {
|
| 15 | writer.setCustomProperty('media', true, viewElement);
|
| 16 | return toWidget(viewElement, writer, { label });
|
| 17 | }
|
| 18 | /**
|
| 19 | * Returns a media widget editing view element if one is selected.
|
| 20 | */
|
| 21 | export function getSelectedMediaViewWidget(selection) {
|
| 22 | const viewElement = selection.getSelectedElement();
|
| 23 | if (viewElement && isMediaWidget(viewElement)) {
|
| 24 | return viewElement;
|
| 25 | }
|
| 26 | return null;
|
| 27 | }
|
| 28 | /**
|
| 29 | * Checks if a given view element is a media widget.
|
| 30 | */
|
| 31 | export function isMediaWidget(viewElement) {
|
| 32 | return !!viewElement.getCustomProperty('media') && isWidget(viewElement);
|
| 33 | }
|
| 34 | /**
|
| 35 | * Creates a view element representing the media. Either a "semantic" one for the data pipeline:
|
| 36 | *
|
| 37 | * ```html
|
| 38 | * <figure class="media">
|
| 39 | * <oembed url="foo"></oembed>
|
| 40 | * </figure>
|
| 41 | * ```
|
| 42 | *
|
| 43 | * or a "non-semantic" (for the editing view pipeline):
|
| 44 | *
|
| 45 | * ```html
|
| 46 | * <figure class="media">
|
| 47 | * <div data-oembed-url="foo">[ non-semantic media preview for "foo" ]</div>
|
| 48 | * </figure>
|
| 49 | * ```
|
| 50 | */
|
| 51 | export function createMediaFigureElement(writer, registry, url, options) {
|
| 52 | return writer.createContainerElement('figure', { class: 'media' }, [
|
| 53 | registry.getMediaViewElement(writer, url, options),
|
| 54 | writer.createSlot()
|
| 55 | ]);
|
| 56 | }
|
| 57 | /**
|
| 58 | * Returns a selected media element in the model, if any.
|
| 59 | */
|
| 60 | export function getSelectedMediaModelWidget(selection) {
|
| 61 | const selectedElement = selection.getSelectedElement();
|
| 62 | if (selectedElement && selectedElement.is('element', 'media')) {
|
| 63 | return selectedElement;
|
| 64 | }
|
| 65 | return null;
|
| 66 | }
|
| 67 | /**
|
| 68 | * Creates a media element and inserts it into the model.
|
| 69 | *
|
| 70 | * **Note**: This method will use {@link module:engine/model/model~Model#insertContent `model.insertContent()`} logic of inserting content
|
| 71 | * if no `insertPosition` is passed.
|
| 72 | *
|
| 73 | * @param url An URL of an embeddable media.
|
| 74 | * @param findOptimalPosition If true it will try to find optimal position to insert media without breaking content
|
| 75 | * in which a selection is.
|
| 76 | */
|
| 77 | export function insertMedia(model, url, selectable, findOptimalPosition) {
|
| 78 | model.change(writer => {
|
| 79 | const mediaElement = writer.createElement('media', { url });
|
| 80 | model.insertObject(mediaElement, selectable, null, {
|
| 81 | setSelection: 'on',
|
| 82 | findOptimalPosition: findOptimalPosition ? 'auto' : undefined
|
| 83 | });
|
| 84 | });
|
| 85 | }
|