@ckeditor/ckeditor5-media-embed 0.0.0-internal-20241017.0

package/src/utils.d.ts

@@ -0,0 +1,67 @@
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module media-embed/utils
+ */
+import type { ViewContainerElement, Element, Model, Selectable, Selection, DowncastWriter, ViewDocumentSelection, ViewElement, DocumentSelection } from 'ckeditor5/src/engine.js';
+import type MediaRegistry from './mediaregistry.js';
+/**
+ * Converts a given {@link module:engine/view/element~Element} to a media embed widget:
+ * * Adds a {@link module:engine/view/element~Element#_setCustomProperty custom property} allowing to recognize the media widget element.
+ * * Calls the {@link module:widget/utils~toWidget} function with the proper element's label creator.
+ *
+ * @param writer An instance of the view writer.
+ * @param label The element's label.
+ */
+export declare function toMediaWidget(viewElement: ViewElement, writer: DowncastWriter, label: string): ViewElement;
+/**
+ * Returns a media widget editing view element if one is selected.
+ */
+export declare function getSelectedMediaViewWidget(selection: ViewDocumentSelection): ViewElement | null;
+/**
+ * Checks if a given view element is a media widget.
+ */
+export declare function isMediaWidget(viewElement: ViewElement): boolean;
+/**
+ * Creates a view element representing the media. Either a "semantic" one for the data pipeline:
+ *
+ * ```html
+ * <figure class="media">
+ * 	<oembed url="foo"></oembed>
+ * </figure>
+ * ```
+ *
+ * or a "non-semantic" (for the editing view pipeline):
+ *
+ * ```html
+ * <figure class="media">
+ * 	<div data-oembed-url="foo">[ non-semantic media preview for "foo" ]</div>
+ * </figure>
+ * ```
+ */
+export declare function createMediaFigureElement(writer: DowncastWriter, registry: MediaRegistry, url: string, options: MediaOptions): ViewContainerElement;
+/**
+ * Returns a selected media element in the model, if any.
+ */
+export declare function getSelectedMediaModelWidget(selection: Selection | DocumentSelection): Element | null;
+/**
+ * Creates a media element and inserts it into the model.
+ *
+ * **Note**: This method will use {@link module:engine/model/model~Model#insertContent `model.insertContent()`} logic of inserting content
+ * if no `insertPosition` is passed.
+ *
+ * @param url An URL of an embeddable media.
+ * @param findOptimalPosition If true it will try to find optimal position to insert media without breaking content
+ * in which a selection is.
+ */
+export declare function insertMedia(model: Model, url: string, selectable: Selectable, findOptimalPosition: boolean): void;
+/**
+ * Type for commonly grouped function parameters across this package.
+ */
+export type MediaOptions = {
+    elementName: string;
+    renderMediaPreview?: boolean;
+    renderForEditingView?: boolean;
+};

package/src/utils.js

@@ -0,0 +1,85 @@
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+import { isWidget, toWidget } from 'ckeditor5/src/widget.js';
+/**
+ * Converts a given {@link module:engine/view/element~Element} to a media embed widget:
+ * * Adds a {@link module:engine/view/element~Element#_setCustomProperty custom property} allowing to recognize the media widget element.
+ * * Calls the {@link module:widget/utils~toWidget} function with the proper element's label creator.
+ *
+ * @param writer An instance of the view writer.
+ * @param label The element's label.
+ */
+export function toMediaWidget(viewElement, writer, label) {
+    writer.setCustomProperty('media', true, viewElement);
+    return toWidget(viewElement, writer, { label });
+}
+/**
+ * Returns a media widget editing view element if one is selected.
+ */
+export function getSelectedMediaViewWidget(selection) {
+    const viewElement = selection.getSelectedElement();
+    if (viewElement && isMediaWidget(viewElement)) {
+        return viewElement;
+    }
+    return null;
+}
+/**
+ * Checks if a given view element is a media widget.
+ */
+export function isMediaWidget(viewElement) {
+    return !!viewElement.getCustomProperty('media') && isWidget(viewElement);
+}
+/**
+ * Creates a view element representing the media. Either a "semantic" one for the data pipeline:
+ *
+ * ```html
+ * <figure class="media">
+ * 	<oembed url="foo"></oembed>
+ * </figure>
+ * ```
+ *
+ * or a "non-semantic" (for the editing view pipeline):
+ *
+ * ```html
+ * <figure class="media">
+ * 	<div data-oembed-url="foo">[ non-semantic media preview for "foo" ]</div>
+ * </figure>
+ * ```
+ */
+export function createMediaFigureElement(writer, registry, url, options) {
+    return writer.createContainerElement('figure', { class: 'media' }, [
+        registry.getMediaViewElement(writer, url, options),
+        writer.createSlot()
+    ]);
+}
+/**
+ * Returns a selected media element in the model, if any.
+ */
+export function getSelectedMediaModelWidget(selection) {
+    const selectedElement = selection.getSelectedElement();
+    if (selectedElement && selectedElement.is('element', 'media')) {
+        return selectedElement;
+    }
+    return null;
+}
+/**
+ * Creates a media element and inserts it into the model.
+ *
+ * **Note**: This method will use {@link module:engine/model/model~Model#insertContent `model.insertContent()`} logic of inserting content
+ * if no `insertPosition` is passed.
+ *
+ * @param url An URL of an embeddable media.
+ * @param findOptimalPosition If true it will try to find optimal position to insert media without breaking content
+ * in which a selection is.
+ */
+export function insertMedia(model, url, selectable, findOptimalPosition) {
+    model.change(writer => {
+        const mediaElement = writer.createElement('media', { url });
+        model.insertObject(mediaElement, selectable, null, {
+            setSelection: 'on',
+            findOptimalPosition: findOptimalPosition ? 'auto' : undefined
+        });
+    });
+}

package/theme/icons/media/twitter.svg

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 20.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 400 400" style="enable-background:new 0 0 400 400;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#1DA1F2;}
+	.st1{fill:#FFFFFF;}
+</style>
+<g id="Dark_Blue">
+	<circle class="st0" cx="200" cy="200" r="200"/>
+</g>
+<g id="Logo__x2014__FIXED">
+	<path class="st1" d="M163.4,305.5c88.7,0,137.2-73.5,137.2-137.2c0-2.1,0-4.2-0.1-6.2c9.4-6.8,17.6-15.3,24.1-25
+		c-8.6,3.8-17.9,6.4-27.7,7.6c10-6,17.6-15.4,21.2-26.7c-9.3,5.5-19.6,9.5-30.6,11.7c-8.8-9.4-21.3-15.2-35.2-15.2
+		c-26.6,0-48.2,21.6-48.2,48.2c0,3.8,0.4,7.5,1.3,11c-40.1-2-75.6-21.2-99.4-50.4c-4.1,7.1-6.5,15.4-6.5,24.2
+		c0,16.7,8.5,31.5,21.5,40.1c-7.9-0.2-15.3-2.4-21.8-6c0,0.2,0,0.4,0,0.6c0,23.4,16.6,42.8,38.7,47.3c-4,1.1-8.3,1.7-12.7,1.7
+		c-3.1,0-6.1-0.3-9.1-0.9c6.1,19.2,23.9,33.1,45,33.5c-16.5,12.9-37.3,20.6-59.9,20.6c-3.9,0-7.7-0.2-11.5-0.7
+		C110.8,297.5,136.2,305.5,163.4,305.5"/>
+</g>
+</svg>

package/theme/icons/media-placeholder.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 64 42" xmlns="http://www.w3.org/2000/svg"><path d="M47.426 17V3.713L63.102 0v19.389h-.001l.001.272c0 1.595-2.032 3.43-4.538 4.098-2.506.668-4.538-.083-4.538-1.678 0-1.594 2.032-3.43 4.538-4.098.914-.244 2.032-.565 2.888-.603V4.516L49.076 7.447v9.556A1.014 1.014 0 0 0 49 17h-1.574zM29.5 17h-8.343a7.073 7.073 0 1 0-4.657 4.06v3.781H3.3a2.803 2.803 0 0 1-2.8-2.804V8.63a2.803 2.803 0 0 1 2.8-2.805h4.082L8.58 2.768A1.994 1.994 0 0 1 10.435 1.5h8.985c.773 0 1.477.448 1.805 1.149l1.488 3.177H26.7c1.546 0 2.8 1.256 2.8 2.805V17zm-11.637 0H17.5a1 1 0 0 0-1 1v.05A4.244 4.244 0 1 1 17.863 17zm29.684 2c.97 0 .953-.048.953.889v20.743c0 .953.016.905-.953.905H19.453c-.97 0-.953.048-.953-.905V19.89c0-.937-.016-.889.97-.889h28.077zm-4.701 19.338V22.183H24.154v16.155h18.692zM20.6 21.375v1.616h1.616v-1.616H20.6zm0 3.231v1.616h1.616v-1.616H20.6zm0 3.231v1.616h1.616v-1.616H20.6zm0 3.231v1.616h1.616v-1.616H20.6zm0 3.231v1.616h1.616v-1.616H20.6zm0 3.231v1.616h1.616V37.53H20.6zm24.233-16.155v1.616h1.615v-1.616h-1.615zm0 3.231v1.616h1.615v-1.616h-1.615zm0 3.231v1.616h1.615v-1.616h-1.615zm0 3.231v1.616h1.615v-1.616h-1.615zm0 3.231v1.616h1.615v-1.616h-1.615zm0 3.231v1.616h1.615V37.53h-1.615zM29.485 25.283a.4.4 0 0 1 .593-.35l9.05 4.977a.4.4 0 0 1 0 .701l-9.05 4.978a.4.4 0 0 1-.593-.35v-9.956z"/></svg>

package/theme/icons/media.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 22 20" xmlns="http://www.w3.org/2000/svg"><path d="M1.587 1.5c-.612 0-.601-.029-.601.551v14.84c0 .59-.01.559.591.559h18.846c.602 0 .591.03.591-.56V2.052c0-.58.01-.55-.591-.55H1.587Zm.701.971h1.003v1H2.288v-1Zm16.448 0h1.003v1h-1.003v-1Zm-14.24 1h13.008v12H4.467l.029-12Zm-2.208 1h1.003v1H2.288v-1Zm16.448 0h1.003v1h-1.003v-1Zm-16.448 2h1.003v1H2.288v-1Zm16.448 0h1.003v1h-1.003v-1Zm-16.448 2h1.003v1H2.288v-1Zm16.448 0h1.003v1h-1.003v-1Zm-16.448 2h1.003v1H2.288v-1Zm16.448 0h1.003v1h-1.003v-1Zm-16.448 2h1.003l-.029 1h-.974v-1Zm16.448 0h1.003v1h-1.003v-1Zm-16.448 2h.974v1h-.974v-1Zm16.448 0h1.003v1h-1.003v-1Z"/><path d="M8.374 6.648a.399.399 0 0 1 .395-.4.402.402 0 0 1 .2.049l5.148 2.824a.4.4 0 0 1 0 .7l-5.148 2.824a.403.403 0 0 1-.595-.35V6.648Z"/></svg>

package/theme/mediaembed.css

@@ -0,0 +1,23 @@
+/*
+ * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+.ck-content .media {
+	/* Don't allow floated content overlap the media.
+	https://github.com/ckeditor/ckeditor5-media-embed/issues/53 */
+	clear: both;
+
+	/* Make sure there is some space between the content and the media. */
+	/* The first value should be equal to --ck-spacing-large variable if used in the editor context
+	to avoid the content jumping (See https://github.com/ckeditor/ckeditor5/issues/9825). */
+	margin: 0.9em 0;
+
+	/* Make sure media is not overriden with Bootstrap default `flex` value.
+	See: https://github.com/ckeditor/ckeditor5/issues/1373. */
+	display: block;
+
+	/* Give the media some minimal width in the content to prevent them
+	from being "squashed" in tight spaces, e.g. in table cells (#44) */
+	min-width: 15em;
+}

package/theme/mediaembedediting.css

@@ -0,0 +1,48 @@
+/*
+ * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+.ck-media__wrapper {
+	& .ck-media__placeholder {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+
+		& .ck-media__placeholder__url {
+			/* Otherwise the URL will overflow when the content is very narrow. */
+			max-width: 100%;
+
+			position: relative;
+
+			& .ck-media__placeholder__url__text {
+				overflow: hidden;
+				display: block;
+			}
+		}
+	}
+
+	&[data-oembed-url*="twitter.com"],
+	&[data-oembed-url*="google.com/maps"],
+	&[data-oembed-url*="goo.gl/maps"],
+	&[data-oembed-url*="maps.google.com"],
+	&[data-oembed-url*="maps.app.goo.gl"],
+	&[data-oembed-url*="facebook.com"],
+	&[data-oembed-url*="instagram.com"] {
+		& .ck-media__placeholder__icon * {
+			display: none;
+		}
+	}
+}
+
+/* Disable all mouse interaction as long as the editor is not read–only.
+   https://github.com/ckeditor/ckeditor5-media-embed/issues/58 */
+.ck-editor__editable:not(.ck-read-only) .ck-media__wrapper > *:not(.ck-media__placeholder) {
+	pointer-events: none;
+}
+
+/* Disable all mouse interaction when the widget is not selected (e.g. to avoid opening links by accident).
+   https://github.com/ckeditor/ckeditor5-media-embed/issues/18 */
+.ck-editor__editable:not(.ck-read-only) .ck-widget:not(.ck-widget_selected) .ck-media__placeholder {
+	pointer-events: none;
+}

package/theme/mediaform.css

@@ -0,0 +1,39 @@
+/*
+ * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+@import "@ckeditor/ckeditor5-ui/theme/mixins/_rwd.css";
+
+.ck.ck-media-form {
+	display: flex;
+	align-items: flex-start;
+	flex-direction: row;
+	flex-wrap: nowrap;
+	width: 400px;
+
+	& .ck-labeled-field-view {
+		display: inline-block;
+		width: 100%;
+	}
+
+	& .ck-label {
+		display: none;
+	}
+
+	& .ck-input {
+		width: 100%;
+	}
+
+	@mixin ck-media-phone {
+		flex-wrap: wrap;
+
+		& .ck-labeled-field-view {
+			flex-basis: 100%;
+		}
+
+		& .ck-button {
+			flex-basis: 50%;
+		}
+	}
+}