@ckeditor/ckeditor5-template 0.0.1 → 37.1.0

package/src/ui/templatelistitemview.d.ts

@@ -0,0 +1,34 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module template/ui/templatelistitemview
+ */
+import { type Locale } from 'ckeditor5/src/utils';
+import { ListItemView } from 'ckeditor5/src/ui';
+import type TemplateListButtonView from './templatelistbuttonview';
+/**
+ * A view representing an item in the list of tempaltes.
+ *
+ * @protected
+ */
+export default class TemplateListItemView extends ListItemView {
+    /**
+     * The initial index of the item in the list of templates.
+     * Useful while searching and sorting to reverse the list to the same order.
+     */
+    readonly originalIndex: number;
+    /**
+     * The instance of the template button view containing the title,
+     * icon, and description of the template.
+     */
+    buttonView: TemplateListButtonView | null;
+    /**
+     * Creates an instance of the {@link module:template/ui/templatelistitemview~TemplateListItemView} class.
+     *
+     * @param locale The localization services instance.
+     * @param originalIndex The initial index of the item in the list of templates.
+     */
+    constructor(locale: Locale, originalIndex: number);
+}

package/src/ui/templatelistitemview.js

@@ -0,0 +1,23 @@
+/*
+ *             Copyright (c) 2016 - 2023, CKSource Holding sp. z o.o. All rights reserved.
+ *
+ *
+ *
+ *
+ *          +---------------------------------------------------------------------------------+
+ *          |                                                                                 |
+ *          |                                 Hello stranger!                                 |
+ *          |                                                                                 |
+ *          |                                                                                 |
+ *          |   What you're currently looking at is the source code of a legally protected,   |
+ *          |    proprietary software. Any attempts to deobfuscate / disassemble this code    |
+ *          |               are forbidden and will result in legal consequences.              |
+ *          |                                                                                 |
+ *          |                                                                                 |
+ *          +---------------------------------------------------------------------------------+
+ *
+ *
+ *
+ *
+ */
+var _0xe7dc=['originalIndex','buttonView'];(function(_0x424a6a,_0xe7dc73){var _0x37b711=function(_0x3ec1f5){while(--_0x3ec1f5){_0x424a6a['push'](_0x424a6a['shift']());}};_0x37b711(++_0xe7dc73);}(_0xe7dc,0x17a));var _0x37b7=function(_0x424a6a,_0xe7dc73){_0x424a6a=_0x424a6a-0x0;var _0x37b711=_0xe7dc[_0x424a6a];return _0x37b711;};import{ListItemView as _0x3fb18e}from'ckeditor5/src/ui';export default class H extends _0x3fb18e{constructor(_0x1602b2,_0xe9a65f){super(_0x1602b2),this[_0x37b7('0x0')]=_0xe9a65f,this[_0x37b7('0x1')]=null;}}

package/theme/icons/loupe.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.68 13.74a6 6 0 1 1 1.355-1.474l4.267 4.268a1 1 0 1 1-1.414 1.414l-4.209-4.208ZM13 9a4 4 0 1 1-8 0 4 4 0 0 1 8 0Z"/></svg>

package/theme/icons/template-generic.svg

@@ -0,0 +1,6 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 45 45">
+  <path fill="#F0F0F0" d="M2 0h41s2 0 2 2v41s0 2 -2 2h-41s-2 0 -2 -2v-41s0 -2 2 -2" />
+  <path fill="#D5D5D5" d="M11 10h10s1 0 1 1v24s0 1 -1 1h-10s-1 0 -1 -1v-24s0 -1 1 -1" />
+  <path fill="#D5D5D5" d="M25 10h10s1 0 1 1v10s0 1 -1 1h-10s-1 0 -1 -1v-10s0 -1 1 -1" />
+  <path fill="#D5D5D5" d="M25 24h10s1 0 1 1v10s0 1 -1 1h-10s-1 0 -1 -1v-10s0 -1 1 -1" />
+</svg>

package/theme/icons/template.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M8 0H3a2 2 0 0 0-2 2v15a2 2 0 0 0 2 2h5a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2ZM2.5 2a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 .5.5v15a.5.5 0 0 1-.5.5H3a.5.5 0 0 1-.5-.5V2Z"/><path clip-rule="evenodd" d="M13 0h5a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-5a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2Zm0 1.5a.5.5 0 0 0-.5.5v5a.5.5 0 0 0 .5.5h5a.5.5 0 0 0 .5-.5V2a.5.5 0 0 0-.5-.5h-5Z"/><path clip-rule="evenodd" d="M13 10h5a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-5a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2Zm0 1.5a.5.5 0 0 0-.5.5v5a.5.5 0 0 0 .5.5h5a.5.5 0 0 0 .5-.5v-5a.5.5 0 0 0-.5-.5h-5Z"/></svg>

package/theme/template.css

@@ -0,0 +1,235 @@
+/*
+ * Copyright (c) 2003-2023, 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/_dir.css";
+@import "@ckeditor/ckeditor5-ui/theme/mixins/_rwd.css";
+
+:root {
+	--ck-template-dropdown-view-width: 345px;
+	--ck-template-dropdown-view-height: 300px;
+	--ck-template-list-height: 245px;
+	--ck-template-icon-size: 45px;
+	--ck-template-search-field-horizontal-spacing: calc(var(--ck-icon-size) + var(--ck-spacing-medium));
+}
+
+.ck.ck-template-form {
+	width: var(--ck-template-dropdown-view-width);
+
+	@mixin ck-media-phone {
+		--ck-template-dropdown-view-width: 260px;
+	}
+
+	& > .ck-template-form__info {
+		width: 100%;
+		padding: calc(2 * var(--ck-spacing-large)) var(--ck-spacing-large);
+		text-align: center;
+
+		& * {
+			white-space: normal;
+			text-align: center;
+		}
+
+		& > span:first-child {
+			display: block;
+			font-weight: bold;
+		}
+
+		& > span:last-child {
+			margin-top: var(--ck-spacing-medium);
+		}
+
+		/* Hide the entire list when nothing was found */
+		&:not(.ck-hidden) ~ .ck-list {
+			display: none;
+		}
+	}
+
+	& > .ck.ck-list.ck-template-list {
+		max-height: var(--ck-template-dropdown-view-height);
+		padding: var(--ck-spacing-large);
+		overflow-x: hidden;
+		overflow-y: auto;
+		overscroll-behavior: contain;
+
+		/*
+		 * This is a dirty way to increase the selector specificity and override the default rounded corners
+		 * of a list inside a dropdown panel
+		 */
+		@nest .ck-rounded-corners & {
+			border-radius: 0;
+		}
+
+		& > .ck.ck-list__item {
+			/* This is an easy way to address the problem of spacings between hidden and visible list items */
+			&:not(.ck-hidden) ~ .ck.ck-list__item {
+				margin-top: var(--ck-spacing-large);
+			}
+
+			& > .ck.ck-button {
+				width: 100%;
+				margin: 0;
+				padding: 0;
+				border-radius: var(--ck-border-radius);
+
+				/* Crop the icon when the border-radius is large */
+				overflow: hidden;
+
+				display: grid;
+				grid-template-columns: var(--ck-template-icon-size) 1fr;
+				grid-template-rows: var(--ck-template-icon-size);
+				grid-auto-columns: 1fr;
+
+				gap: var(--ck-spacing-large) var(--ck-spacing-large);
+				grid-auto-flow: column dense;
+				align-items: center;
+				grid-template-areas: "ck-template-icon ck-template-content";
+
+				&:not(:focus) {
+					border-color: var(--ck-color-dropdown-panel-background);
+				}
+
+				& > .ck.ck-icon {
+					width: var(--ck-template-icon-size);
+					height: auto;
+					grid-area: ck-template-icon;
+					margin: 0;
+
+					/* Override default rules for icons to allow any fill color. */
+					color: unset;
+
+					& * {
+						color: unset;
+
+						&:not([fill]) {
+							fill: unset;
+						}
+					}
+				}
+
+				& > .ck-template-form__text-part {
+					display: flex;
+					flex-direction: column;
+					justify-content: space-evenly;
+					height: 100%;
+					grid-area: ck-template-content;
+					min-width: 0;
+					margin: 0;
+
+					& > .ck.ck-button__label {
+						display: block;
+						font-weight: bold;
+						font-size: var(--ck-font-size-base);
+						color: var(--ck-color-text);
+						line-height: 1.1;
+
+						white-space: nowrap;
+						overflow: hidden;
+						text-overflow: ellipsis;
+					}
+
+					& .ck-template-form__description {
+						display: -webkit-box;
+						font-size: 0.85em;
+						color: var(--ck-color-text);
+						line-height: 1.1;
+
+						/* Leave some tiny spacing between title and description. */
+						margin-top: var(--ck-spacing-tiny);
+
+						white-space: normal;
+						overflow: hidden;
+						text-overflow: ellipsis;
+						-webkit-box-orient: vertical;
+						-webkit-line-clamp: 2;
+					}
+
+					& mark {
+						background: var(--ck-color-highlight-background);
+						vertical-align: initial;
+						font-weight: inherit;
+						line-height: inherit;
+						font-size: inherit;
+					}
+				}
+			}
+		}
+	}
+
+	& > .ck-labeled-field-view {
+		--ck-labeled-field-label-default-position-x: var(--ck-template-search-field-horizontal-spacing);
+		--ck-labeled-field-empty-unfocused-max-width: 100% - 2 * var(--ck-template-search-field-horizontal-spacing);
+
+		padding: var(--ck-spacing-large);
+
+		&.ck-labeled-field-view_empty {
+			--ck-labeled-field-empty-unfocused-max-width: 100% - var(--ck-template-search-field-horizontal-spacing) - var(--ck-spacing-medium);
+		}
+
+		& > .ck-labeled-field-view__input-wrapper > .ck-icon {
+			position: absolute;
+			top: 50%;
+			transform: translateY(-50%);
+			opacity: .5;
+			pointer-events: none;
+
+			@mixin ck-dir ltr {
+				left: var(--ck-spacing-medium);
+			}
+
+			@mixin ck-dir rtl {
+				right: var(--ck-spacing-medium);
+			}
+		}
+
+		& .ck-input {
+			width: 100%;
+
+			@mixin ck-dir ltr {
+				padding-left: var(--ck-template-search-field-horizontal-spacing);
+
+				&:not(.ck-input-text_empty) {
+					padding-right: var(--ck-template-search-field-horizontal-spacing);
+				}
+			}
+
+			@mixin ck-dir rtl {
+				padding-right: var(--ck-template-search-field-horizontal-spacing);
+
+				&:not(.ck-input-text_empty) {
+					padding-left: var(--ck-template-search-field-horizontal-spacing);
+				}
+			}
+		}
+
+		& .ck-template-form__clear-search {
+			position: absolute;
+			top: 50%;
+			transform: translateY(-50%);
+			min-width: auto;
+			min-height: auto;
+
+			background: none;
+			opacity: .5;
+			padding: 0;
+
+			@mixin ck-dir ltr {
+				right: var(--ck-spacing-medium);
+			}
+
+			@mixin ck-dir rtl {
+				left: var(--ck-spacing-medium);
+			}
+
+			&:hover {
+				opacity: 1;
+			}
+		}
+	}
+
+	& > .ck-template-form__info:not(:only-child),
+	& > .ck.ck-list {
+		border-top: 1px solid var(--ck-color-base-border);
+	}
+}