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

package/src/index.js

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

package/theme/htmlembed.css

@@ -0,0 +1,68 @@
+/*
+ * 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
+ */
+
+/* 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;
+	}
+}