@ckeditor/ckeditor5-html-embed 30.0.0

package/src/htmlembedui.js

@@ -0,0 +1,61 @@
+/**
+ * @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-embed/htmlembedui
+ */
+
+import { Plugin } from 'ckeditor5/src/core';
+import { ButtonView } from 'ckeditor5/src/ui';
+
+import htmlEmbedIcon from '../theme/icons/html.svg';
+
+/**
+ * The HTML embed UI plugin.
+ *
+ * @extends module:core/plugin~Plugin
+ */
+export default class HtmlEmbedUI extends Plugin {
+	/**
+	 * @inheritDoc
+	 */
+	static get pluginName() {
+		return 'HtmlEmbedUI';
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	init() {
+		const editor = this.editor;
+		const t = editor.t;
+
+		// Add the `htmlEmbed` button to feature components.
+		editor.ui.componentFactory.add( 'htmlEmbed', locale => {
+			const command = editor.commands.get( 'insertHtmlEmbed' );
+			const view = new ButtonView( locale );
+
+			view.set( {
+				label: t( 'Insert HTML' ),
+				icon: htmlEmbedIcon,
+				tooltip: true
+			} );
+
+			view.bind( 'isEnabled' ).to( command, 'isEnabled' );
+
+			// Execute the command.
+			this.listenTo( view, 'execute', () => {
+				editor.execute( 'insertHtmlEmbed' );
+				editor.editing.view.focus();
+
+				const widgetWrapper = editor.editing.view.document.selection.getSelectedElement();
+
+				widgetWrapper.getCustomProperty( 'rawHtmlApi' ).makeEditable();
+			} );
+
+			return view;
+		} );
+	}
+}

package/src/index.js

@@ -0,0 +1,12 @@
+/**
+ * @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-embed
+ */
+
+export { default as HtmlEmbed } from './htmlembed';
+export { default as HtmlEmbedEditing } from './htmlembedediting';
+export { default as HtmlEmbedUI } from './htmlembedui';

package/src/inserthtmlembedcommand.js

@@ -0,0 +1,79 @@
+/**
+ * @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-embed/inserthtmlembedcommand
+ */
+
+import { Command } from 'ckeditor5/src/core';
+import { findOptimalInsertionRange } from 'ckeditor5/src/widget';
+
+/**
+ * The insert HTML embed element command.
+ *
+ * The command is registered by {@link module:html-embed/htmlembedediting~HtmlEmbedEditing} as `'insertHtmlEmbed'`.
+ *
+ * To insert the HTML embed element at the current selection, execute the command:
+ *
+ *		editor.execute( 'insertHtmlEmbed' );
+ *
+ * @extends module:core/command~Command
+ */
+export default class InsertHtmlEmbedCommand extends Command {
+	/**
+	 * @inheritDoc
+	 */
+	refresh() {
+		const model = this.editor.model;
+		const schema = model.schema;
+		const selection = model.document.selection;
+
+		this.isEnabled = isHtmlEmbedAllowedInParent( selection, schema, model );
+	}
+
+	/**
+	 * Executes the command, which creates and inserts a new HTML embed element.
+	 *
+	 * @fires execute
+	 */
+	execute() {
+		const model = this.editor.model;
+
+		model.change( writer => {
+			const rawHtmlElement = writer.createElement( 'rawHtml' );
+
+			model.insertContent( rawHtmlElement );
+			writer.setSelection( rawHtmlElement, 'on' );
+		} );
+	}
+}
+
+// Checks if an HTML embed is allowed by the schema in the optimal insertion parent.
+//
+// @param {module:engine/model/selection~Selection|module:engine/model/documentselection~DocumentSelection} selection
+// @param {module:engine/model/schema~Schema} schema
+// @param {module:engine/model/model~Model} model Model instance.
+// @returns {Boolean}
+function isHtmlEmbedAllowedInParent( selection, schema, model ) {
+	const parent = getInsertHtmlEmbedParent( selection, model );
+
+	return schema.checkChild( parent, 'rawHtml' );
+}
+
+// Returns a node that will be used to insert a html embed with `model.insertContent` to check if a html embed element can be placed there.
+//
+// @param {module:engine/model/selection~Selection|module:engine/model/documentselection~DocumentSelection} selection
+// @param {module:engine/model/model~Model} model Model instance.
+// @returns {module:engine/model/element~Element}
+function getInsertHtmlEmbedParent( selection, model ) {
+	const insertionRange = findOptimalInsertionRange( selection, model );
+	const parent = insertionRange.start.parent;
+
+	if ( parent.isEmpty && !parent.is( 'element', '$root' ) ) {
+		return parent.parent;
+	}
+
+	return parent;
+}

package/src/updatehtmlembedcommand.js

@@ -0,0 +1,64 @@
+/**
+ * @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-embed/updatehtmlembedcommand
+ */
+
+import { Command } from 'ckeditor5/src/core';
+
+/**
+ * The update HTML embed value command.
+ *
+ * The command is registered by {@link module:html-embed/htmlembedediting~HtmlEmbedEditing} as `'updateHtmlEmbed'`.
+ *
+ * To update the value of the HTML embed element at the current selection, execute the command:
+ *
+ *		editor.execute( 'updateHtmlEmbed', '<b>HTML.</b>' );
+ *
+ * @extends module:core/command~Command
+ */
+export default class UpdateHtmlEmbedCommand extends Command {
+	/**
+	 * @inheritDoc
+	 */
+	refresh() {
+		const model = this.editor.model;
+		const selection = model.document.selection;
+		const rawHtmlElement = getSelectedRawHtmlModelWidget( selection );
+
+		this.isEnabled = !!rawHtmlElement;
+	}
+
+	/**
+	 * Executes the command, which updates the `value` attribute of the embedded HTML element:
+	 *
+	 * @fires execute
+	 * @param {String} value HTML as a string.
+	 */
+	execute( value ) {
+		const model = this.editor.model;
+		const selection = model.document.selection;
+		const selectedRawHtmlElement = getSelectedRawHtmlModelWidget( selection );
+
+		model.change( writer => {
+			writer.setAttribute( 'value', value, selectedRawHtmlElement );
+		} );
+	}
+}
+
+// Returns the selected HTML embed element in the model, if any.
+//
+// @param {module:engine/model/selection~Selection} selection
+// @returns {module:engine/model/element~Element|null}
+function getSelectedRawHtmlModelWidget( selection ) {
+	const selectedElement = selection.getSelectedElement();
+
+	if ( selectedElement && selectedElement.is( 'element', 'rawHtml' ) ) {
+		return selectedElement;
+	}
+
+	return null;
+}

package/theme/htmlembed.css

@@ -0,0 +1,68 @@
+/*
+ * Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/* The feature container. */
+.ck-widget.raw-html-embed {
+	/* Give the embed some air. */
+	/* 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 auto;
+	position: relative;
+	display: flow-root;
+
+	/* Give the html embed some minimal width in the content to prevent them
+	from being "squashed" in tight spaces, e.g. in table cells (https://github.com/ckeditor/ckeditor5/issues/8331) */
+	min-width: 15em;
+
+	/* Don't inherit the style, e.g. when in a block quote. */
+	font-style: normal;
+
+	/* ----- Emebed label in the upper left corner ----------------------------------------------- */
+
+	&::before {
+		position: absolute;
+
+		/* Make sure the content does not cover the label. */
+		z-index: 1;
+	}
+
+	/* ----- Emebed internals --------------------------------------------------------------------- */
+
+	/* The switch mode button wrapper. */
+	& .raw-html-embed__buttons-wrapper {
+		position: absolute;
+		display: flex;
+		flex-direction: column;
+	}
+
+	& .raw-html-embed__preview {
+		position: relative;
+		overflow: hidden;
+		display: flex;
+	}
+
+	& .raw-html-embed__preview-content {
+		width: 100%;
+		position: relative;
+		margin: auto;
+
+		/* Gives spacing to the small renderable elements, so they always cover the placeholder. */
+		display: table;
+		border-collapse: separate;
+		border-spacing: 7px;
+	}
+
+	& .raw-html-embed__preview-placeholder {
+		position: absolute;
+		left: 0;
+		top: 0;
+		right: 0;
+		bottom: 0;
+
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+}

package/theme/icons/html.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M17 0a2 2 0 0 1 2 2v7a1 1 0 0 1 1 1v5a1 1 0 0 1-.883.993l-.118.006L19 17a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2l-.001-1.001-.116-.006A1 1 0 0 1 0 15v-5a1 1 0 0 1 .999-1L1 2a2 2 0 0 1 2-2h14zm.499 15.999h-15L2.5 17a.5.5 0 0 0 .5.5h14a.5.5 0 0 0 .5-.5l-.001-1.001zm-3.478-6.013-.014.014H14v.007l-1.525 1.525-1.46-1.46-.015.013V10h-1v5h1v-3.53l1.428 1.43.048.043.131-.129L14 11.421V15h1v-5h-.965l-.014-.014zM2 10H1v5h1v-2h2v2h1v-5H4v2H2v-2zm7 0H6v1h1v4h1v-4h1v-1zm8 0h-1v5h3v-1h-2v-4zm0-8.5H3a.5.5 0 0 0-.5.5l-.001 6.999h15L17.5 2a.5.5 0 0 0-.5-.5zM10 7v1H4V7h6zm3-2v1H4V5h9zm-3-2v1H4V3h6z"/></svg>