@ckeditor/ckeditor5-template 0.0.1 → 38.0.0-rc.0

package/src/ui/templatelistbuttonview.d.ts

@@ -0,0 +1,104 @@
+/**
+ * @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/templatelistbuttonview
+ */
+import type { Locale } from 'ckeditor5/src/utils';
+import { ButtonView, View } from 'ckeditor5/src/ui';
+import type { TemplateDefinition } from '../template';
+/**
+ * A class representing an individual button (template) in the list. Renders a rich preview of the template option.
+ *
+ * @protected
+ */
+export default class TemplateListButtonView extends ButtonView {
+    /**
+     * The definition of the template that the button will apply when executed.
+     *
+     * @readonly
+     */
+    templateDefinition: TemplateDefinition;
+    /**
+     * The view rendering the text part of the template definition.
+     *
+     * @protected
+     * @readonly
+     */
+    textPartView: TextPartView | null;
+    /**
+     * Creates an instance of the {@link module:template/ui/templatelistbuttonview~TemplateListButtonView} class.
+     *
+     * @param locale The localization services instance.
+     * @param templateDefinition The definition of the template.
+     */
+    constructor(locale: Locale, templateDefinition: TemplateDefinition);
+    /**
+     * @inheritDoc
+     */
+    render(): void;
+    destroy(): void;
+    /**
+     * Tells whether the `title` or `description` of the {@link #templateDefinition} match against the provided regular expression.
+     *
+     * @param regExp A regular expression to match the definition against.
+     * @returns When the match is positive, an object with the `title` and `description` keys is returned that describes
+     * the match. Otherwise, this method returns `null`.
+     */
+    isMatching(regExp: RegExp): object | null;
+    /**
+     * Highlights a subset of the {@link #textPartView} text according to a specified regular expression. When `null` is passed,
+     * the highlighting is turned off.
+     *
+     * @param regExp A regular expression used to highlight the matching text in the {@link #textPartView}.
+     */
+    highlightText(regExp: RegExp | null): void;
+}
+/**
+ * A view representing the title and the description of the template.
+ *
+ * @protected
+ */
+export declare class TextPartView extends View {
+    /**
+     * The title text of the template.
+     *
+     * @readonly
+     */
+    title: string;
+    /**
+     * The description text of the template.
+     *
+     * @readonly
+     */
+    description: string | undefined;
+    /**
+     * A regular expression used to highlight the matching text in the {@link #titleView} and {@link #descriptionView}.
+     *
+     * **Note**: When set to `null`, no text gets highlighted.
+     */
+    highlightRegExp: RegExp | null;
+    /**
+     * Renders the title text of a template.
+     *
+     * **Note**: It acts as a label of the entire button in the context of accessibility.
+     *
+     * @readonly
+     */
+    titleView: View;
+    /**
+     * Renders the description text of a template.
+     *
+     * @readonly
+     */
+    descriptionView: View;
+    /**
+     * Creates an instance of the text part view.
+     *
+     * @param locale The {@link module:core/editor/editor~Editor#locale} instance.
+     * @param templateDefinition The definition of the template.
+     * @param labelId A unique ID that connects the entire button with the {@link #titleView} in the context of accessibility.
+     */
+    constructor(locale: Locale, templateDefinition: TemplateDefinition, labelId: string);
+}

package/src/ui/templatelistbuttonview.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.              |
+ *          |                                                                                 |
+ *          |                                                                                 |
+ *          +---------------------------------------------------------------------------------+
+ *
+ *
+ *
+ *
+ */
+const _0x2405=['div','extendTemplate','templateDefinition','textPartView','text','isMatch','locale','match','exec','render','<mark>','setTemplate','ck-template-form__description','set','element','_setupTextContentRendering','push','ck-template-form__text-part','destroy','iconView','description','innerHTML','title','descriptionView','highlightRegExp','change:highlightRegExp','map','substring','labelView','index','add','span','length','titleView','join','children'];(function(_0x3540e3,_0x24053e){const _0x329e47=function(_0x17fa07){while(--_0x17fa07){_0x3540e3['push'](_0x3540e3['shift']());}};_0x329e47(++_0x24053e);}(_0x2405,0x143));const _0x329e=function(_0x3540e3,_0x24053e){_0x3540e3=_0x3540e3-0x0;let _0x329e47=_0x2405[_0x3540e3];return _0x329e47;};import{ButtonView as _0x1d25e3,View as _0x56658e}from'ckeditor5/src/ui';import{escape as _0x488754}from'lodash-es';import _0x492559 from'../../theme/icons/template-generic.svg';export default class E extends _0x1d25e3{constructor(_0x515621,_0x43c24b){super(_0x515621),this[_0x329e('0x3')]=_0x43c24b,this['textPartView']=null;const {icon:_0x53d08c=_0x492559}=_0x43c24b;this[_0x329e('0xe')]({'withText':!0x0,'icon':_0x53d08c}),this[_0x329e('0x2')]({'attributes':{'role':'option'}}),this[_0x329e('0x14')]['isColorInherited']=!0x1;}[_0x329e('0xa')](){super[_0x329e('0xa')](),this[_0x329e('0x4')]=new TextPartView(this[_0x329e('0x7')],this[_0x329e('0x3')],this[_0x329e('0x1d')][_0x329e('0xf')]['id']),this[_0x329e('0x0')]['remove'](this[_0x329e('0x1d')]),this[_0x329e('0x0')][_0x329e('0x1f')](this[_0x329e('0x4')]);}['destroy'](){super[_0x329e('0x13')](),this['labelView']['destroy']();}['isMatching'](_0x148d94){const {title:_0x6f6113,description:_0x222592}=this[_0x329e('0x3')],_0x48f2e5=!!_0x6f6113[_0x329e('0x8')](_0x148d94),_0x2f716e=!(!_0x222592||!_0x222592['match'](_0x148d94));return _0x48f2e5||_0x2f716e?{'title':_0x48f2e5,'description':_0x2f716e}:null;}['highlightText'](_0x44baf3){this[_0x329e('0x4')][_0x329e('0x19')]=_0x44baf3;}}export class TextPartView extends _0x56658e{constructor(_0xe8b52c,_0x29f63c,_0x1ee2d7){super(_0xe8b52c),this[_0x329e('0x17')]=_0x29f63c['title'],this['description']=_0x29f63c[_0x329e('0x15')],this[_0x329e('0xe')](_0x329e('0x19'),null),this[_0x329e('0x22')]=new _0x56658e(_0xe8b52c),this[_0x329e('0x22')][_0x329e('0xc')]({'tag':_0x329e('0x20'),'attributes':{'class':['ck','ck-button__label'],'id':_0x1ee2d7}});const _0x263666=[this[_0x329e('0x22')]];this[_0x329e('0x15')]&&(this[_0x329e('0x18')]=new _0x56658e(_0xe8b52c),this[_0x329e('0x18')][_0x329e('0xc')]({'tag':'p','attributes':{'class':['ck',_0x329e('0xd')]}}),_0x263666[_0x329e('0x11')](this[_0x329e('0x18')])),this[_0x329e('0xc')]({'tag':_0x329e('0x1'),'attributes':{'class':['ck',_0x329e('0x12')]},'children':_0x263666}),this['_setupTextContentRendering']();}[_0x329e('0x10')](){const {title:_0x316977,description:_0x30e758,titleView:_0x3fefbf,descriptionView:_0xace585}=this,_0x1cabef=()=>{_0x3fefbf[_0x329e('0xf')]['innerHTML']=C(_0x316977,this[_0x329e('0x19')]),_0x30e758&&(_0xace585[_0x329e('0xf')][_0x329e('0x16')]=C(_0x30e758,this[_0x329e('0x19')]));};this['on']('render',()=>{_0x1cabef(),this['on'](_0x329e('0x1a'),_0x1cabef);});}}function C(_0x12e486,_0x178da6){if(!_0x178da6)return _0x488754(_0x12e486);const _0x228468=[];let _0x456d68,_0x1252a2=0x0;for(;null!==(_0x456d68=_0x178da6[_0x329e('0x9')](_0x12e486));){const _0x5baaf2=_0x456d68[_0x329e('0x1e')];_0x5baaf2!==_0x1252a2&&_0x228468[_0x329e('0x11')]({'text':_0x12e486['substring'](_0x1252a2,_0x5baaf2),'isMatch':!0x1}),_0x228468['push']({'text':_0x456d68[0x0],'isMatch':!0x0}),_0x1252a2=_0x178da6['lastIndex'];}return _0x1252a2!==_0x12e486[_0x329e('0x21')]&&_0x228468['push']({'text':_0x12e486[_0x329e('0x1c')](_0x1252a2),'isMatch':!0x1}),_0x228468[_0x329e('0x1b')](_0x52ec5b=>(_0x52ec5b['text']=_0x488754(_0x52ec5b[_0x329e('0x5')]),_0x52ec5b))[_0x329e('0x1b')](_0x3b9143=>_0x3b9143[_0x329e('0x6')]?_0x329e('0xb')+_0x3b9143[_0x329e('0x5')]+'</mark>':_0x3b9143[_0x329e('0x5')])[_0x329e('0x23')]('');}

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 _0x5545=['buttonView','originalIndex'];(function(_0x2bbf54,_0x5545e2){var _0x264690=function(_0x5816f5){while(--_0x5816f5){_0x2bbf54['push'](_0x2bbf54['shift']());}};_0x264690(++_0x5545e2);}(_0x5545,0x11b));var _0x2646=function(_0x2bbf54,_0x5545e2){_0x2bbf54=_0x2bbf54-0x0;var _0x264690=_0x5545[_0x2bbf54];return _0x264690;};import{ListItemView as _0xa4d1d6}from'ckeditor5/src/ui';export default class H extends _0xa4d1d6{constructor(_0x3dee63,_0x3a6b5b){super(_0x3dee63),this[_0x2646('0x0')]=_0x3a6b5b,this[_0x2646('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);
+	}
+}