@ckeditor/ckeditor5-widget 0.0.0-internal-20241017.0

package/theme/icons/drag-handle.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M4 0v1H1v3H0V.5A.5.5 0 0 1 .5 0H4zm8 0h3.5a.5.5 0 0 1 .5.5V4h-1V1h-3V0zM4 16H.5a.5.5 0 0 1-.5-.5V12h1v3h3v1zm8 0v-1h3v-3h1v3.5a.5.5 0 0 1-.5.5H12z"/><path fill-opacity=".256" d="M1 1h14v14H1z"/><g class="ck-icon__selected-indicator"><path d="M7 0h2v1H7V0zM0 7h1v2H0V7zm15 0h1v2h-1V7zm-8 8h2v1H7v-1z"/><path fill-opacity=".254" d="M1 1h14v14H1z"/></g></svg>

package/theme/icons/return-arrow.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 10 8" xmlns="http://www.w3.org/2000/svg"><path d="M9.055.263v3.972h-6.77M1 4.216l2-2.038m-2 2 2 2.038"/></svg>

package/theme/widget.css

@@ -0,0 +1,91 @@
+/*
+ * 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
+ */
+
+:root {
+	--ck-color-resizer: var(--ck-color-focus-border);
+	--ck-color-resizer-tooltip-background: hsl(0, 0%, 15%);
+	--ck-color-resizer-tooltip-text: hsl(0, 0%, 95%);
+
+	--ck-resizer-border-radius: var(--ck-border-radius);
+	--ck-resizer-tooltip-offset: 10px;
+	--ck-resizer-tooltip-height: calc(var(--ck-spacing-small) * 2 + 10px);
+}
+
+.ck .ck-widget {
+	/* This is neccessary for type around UI to be positioned properly. */
+	position: relative;
+}
+
+.ck .ck-widget.ck-widget_with-selection-handle {
+	/* Make the widget wrapper a relative positioning container for the drag handle. */
+	position: relative;
+
+	& .ck-widget__selection-handle {
+		position: absolute;
+
+		& .ck-icon {
+			/* Make sure the icon in not a subject to font-size or line-height to avoid
+			unnecessary spacing around it. */
+			display: block;
+		}
+	}
+
+	/* Show the selection handle on mouse hover over the widget, but not for nested widgets. */
+	&:hover > .ck-widget__selection-handle {
+		visibility: visible;
+	}
+
+	/* Show the selection handle when the widget is selected, but not for nested widgets. */
+	&.ck-widget_selected > .ck-widget__selection-handle {
+		visibility: visible;
+	}
+}
+
+.ck .ck-size-view {
+	background: var(--ck-color-resizer-tooltip-background);
+	color: var(--ck-color-resizer-tooltip-text);
+	border: 1px solid var(--ck-color-resizer-tooltip-text);
+	border-radius: var(--ck-resizer-border-radius);
+	font-size: var(--ck-font-size-tiny);
+	display: block;
+	padding: 0 var(--ck-spacing-small);
+	height: var(--ck-resizer-tooltip-height);
+	line-height: var(--ck-resizer-tooltip-height);
+
+	&.ck-orientation-top-left,
+	&.ck-orientation-top-right,
+	&.ck-orientation-bottom-right,
+	&.ck-orientation-bottom-left,
+	&.ck-orientation-above-center {
+		position: absolute;
+	}
+
+	&.ck-orientation-top-left {
+		top: var(--ck-resizer-tooltip-offset);
+		left: var(--ck-resizer-tooltip-offset);
+	}
+
+	&.ck-orientation-top-right {
+		top: var(--ck-resizer-tooltip-offset);
+		right: var(--ck-resizer-tooltip-offset);
+	}
+
+	&.ck-orientation-bottom-right {
+		bottom: var(--ck-resizer-tooltip-offset);
+		right: var(--ck-resizer-tooltip-offset);
+	}
+
+	&.ck-orientation-bottom-left {
+		bottom: var(--ck-resizer-tooltip-offset);
+		left: var(--ck-resizer-tooltip-offset);
+	}
+
+	/* Class applied if the widget is too small to contain the size label */
+	&.ck-orientation-above-center {
+		top: calc(var(--ck-resizer-tooltip-height) * -1);
+		left: 50%;
+		transform: translate(-50%);
+	}
+}

package/theme/widgetresize.css

@@ -0,0 +1,43 @@
+/*
+ * 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 .ck-widget_with-resizer {
+	/* Make the widget wrapper a relative positioning container for the drag handle. */
+	position: relative;
+}
+
+.ck .ck-widget__resizer {
+	display: none;
+	position: absolute;
+
+	/* The wrapper itself should not interfere with the pointer device, only the handles should. */
+	pointer-events: none;
+
+	left: 0;
+	top: 0;
+}
+
+.ck-focused .ck-widget_with-resizer.ck-widget_selected {
+	& > .ck-widget__resizer {
+		display: block;
+	}
+}
+
+.ck .ck-widget__resizer__handle {
+	position: absolute;
+
+	/* Resizers are the only UI elements that should interfere with a pointer device. */
+	pointer-events: all;
+
+	&.ck-widget__resizer__handle-top-left,
+	&.ck-widget__resizer__handle-bottom-right {
+		cursor: nwse-resize;
+	}
+
+	&.ck-widget__resizer__handle-top-right,
+	&.ck-widget__resizer__handle-bottom-left {
+		cursor: nesw-resize;
+	}
+}

package/theme/widgettypearound.css

@@ -0,0 +1,113 @@
+/*
+ * 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 .ck-widget {
+	/*
+	 * Styles of the type around buttons
+	 */
+	& .ck-widget__type-around__button {
+		display: block;
+		position: absolute;
+		overflow: hidden;
+		z-index: var(--ck-z-default);
+
+		& svg {
+			position: absolute;
+			top: 50%;
+			left: 50%;
+			z-index: calc(var(--ck-z-default) + 2);
+		}
+
+		&.ck-widget__type-around__button_before {
+			/* Place it in the middle of the outline */
+			top: calc(-0.5 * var(--ck-widget-outline-thickness));
+			left: min(10%, 30px);
+
+			transform: translateY(-50%);
+		}
+
+		&.ck-widget__type-around__button_after {
+			/* Place it in the middle of the outline */
+			bottom: calc(-0.5 * var(--ck-widget-outline-thickness));
+			right: min(10%, 30px);
+
+			transform: translateY(50%);
+		}
+	}
+
+	/*
+	 * Styles for the buttons when:
+	 * - the widget is selected,
+	 * - or the button is being hovered (regardless of the widget state).
+	 */
+	&.ck-widget_selected > .ck-widget__type-around > .ck-widget__type-around__button,
+	& > .ck-widget__type-around > .ck-widget__type-around__button:hover {
+		&::after {
+			content: "";
+			display: block;
+			position: absolute;
+			top: 1px;
+			left: 1px;
+			z-index: calc(var(--ck-z-default) + 1);
+		}
+	}
+
+	/*
+	 * Styles for the horizontal "fake caret" which is displayed when the user navigates using the keyboard.
+	 */
+	& > .ck-widget__type-around > .ck-widget__type-around__fake-caret {
+		display: none;
+		position: absolute;
+		left: 0;
+		right: 0;
+	}
+
+	/*
+	 * When the widget is hovered the "fake caret" would normally be narrower than the
+	 * extra outline displayed around the widget. Let's extend the "fake caret" to match
+	 * the full width of the widget.
+	 */
+	&:hover > .ck-widget__type-around > .ck-widget__type-around__fake-caret {
+		left: calc( -1 * var(--ck-widget-outline-thickness) );
+		right: calc( -1 * var(--ck-widget-outline-thickness) );
+	}
+
+	/*
+	 * Styles for the horizontal "fake caret" when it should be displayed before the widget (backward keyboard navigation).
+	 */
+	&.ck-widget_type-around_show-fake-caret_before > .ck-widget__type-around > .ck-widget__type-around__fake-caret {
+		top: calc( -1 * var(--ck-widget-outline-thickness) - 1px );
+		display: block;
+	}
+
+	/*
+	 * Styles for the horizontal "fake caret" when it should be displayed after the widget (forward keyboard navigation).
+	 */
+	&.ck-widget_type-around_show-fake-caret_after > .ck-widget__type-around > .ck-widget__type-around__fake-caret {
+		bottom: calc( -1 * var(--ck-widget-outline-thickness) - 1px );
+		display: block;
+	}
+}
+
+/*
+ * Integration with the read-only mode of the editor.
+ */
+.ck.ck-editor__editable.ck-read-only .ck-widget__type-around {
+	display: none;
+}
+
+/*
+ * Integration with the restricted editing mode (feature) of the editor.
+ */
+.ck.ck-editor__editable.ck-restricted-editing_mode_restricted .ck-widget__type-around {
+	display: none;
+}
+
+/*
+ * Integration with the #isEnabled property of the WidgetTypeAround plugin.
+ */
+.ck.ck-editor__editable.ck-widget__type-around_disabled .ck-widget__type-around {
+	display: none;
+}