@umbraco-cms/backoffice 15.3.1 → 15.4.0-rc

package/dist-cms/packages/tiptap/components/character-map/character-map-modal.element.js

@@ -0,0 +1,466 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { css, customElement, html, repeat, state, when } from '../../../../external/lit/index.js';
+import { umbFocus } from '../../../core/lit-element/index.js';
+import { UmbModalBaseElement } from '../../../core/modal/index.js';
+let UmbCharacterMapModalElement = class UmbCharacterMapModalElement extends UmbModalBaseElement {
+    constructor() {
+        super(...arguments);
+        /* The character mapping code has been derived from TinyMCE.
+         * https://github.com/tinymce/tinymce/blob/6.8.5/modules/tinymce/src/plugins/charmap/main/ts/core/CharMap.ts#L20-L362
+         * SPDX-License-Identifier: MIT
+         * Copyright © 2022 Ephox Corporation DBA Tiny Technologies, Inc.
+         * Modifications are licensed under the MIT License. */
+        this.#characterMap = {
+            '#general_all': [],
+            '#tiptap_charmap_currency': [
+                [36, 'dollar sign'],
+                [162, 'cent sign'],
+                [8364, 'euro sign'],
+                [163, 'pound sign'],
+                [165, 'yen sign'],
+                [164, 'currency sign'],
+                [8352, 'euro-currency sign'],
+                [8353, 'colon sign'],
+                [8354, 'cruzeiro sign'],
+                [8355, 'french franc sign'],
+                [8356, 'lira sign'],
+                [8357, 'mill sign'],
+                [8358, 'naira sign'],
+                [8359, 'peseta sign'],
+                [8360, 'rupee sign'],
+                [8361, 'won sign'],
+                [8362, 'new sheqel sign'],
+                [8363, 'dong sign'],
+                [8365, 'kip sign'],
+                [8366, 'tugrik sign'],
+                [8367, 'drachma sign'],
+                [8368, 'german penny symbol'],
+                [8369, 'peso sign'],
+                [8370, 'guarani sign'],
+                [8371, 'austral sign'],
+                [8372, 'hryvnia sign'],
+                [8373, 'cedi sign'],
+                [8374, 'livre tournois sign'],
+                [8375, 'spesmilo sign'],
+                [8376, 'tenge sign'],
+                [8377, 'indian rupee sign'],
+                [8378, 'turkish lira sign'],
+                [8379, 'nordic mark sign'],
+                [8380, 'manat sign'],
+                [8381, 'ruble sign'],
+                [20870, 'yen character'],
+                [20803, 'yuan character'],
+                [22291, 'yuan character, in hong kong and taiwan'],
+                [22278, 'yen/yuan character variant one'],
+            ],
+            '#tiptap_charmap_text': [
+                [169, 'copyright sign'],
+                [174, 'registered sign'],
+                [8482, 'trade mark sign'],
+                [8240, 'per mille sign'],
+                [181, 'micro sign'],
+                [183, 'middle dot'],
+                [8226, 'bullet'],
+                [8230, 'three dot leader'],
+                [8242, 'minutes / feet'],
+                [8243, 'seconds / inches'],
+                [167, 'section sign'],
+                [182, 'paragraph sign'],
+                [223, 'sharp s / ess-zed'],
+            ],
+            '#tiptap_charmap_quotations': [
+                [8249, 'single left-pointing angle quotation mark'],
+                [8250, 'single right-pointing angle quotation mark'],
+                [171, 'left pointing guillemet'],
+                [187, 'right pointing guillemet'],
+                [8216, 'left single quotation mark'],
+                [8217, 'right single quotation mark'],
+                [8220, 'left double quotation mark'],
+                [8221, 'right double quotation mark'],
+                [8218, 'single low-9 quotation mark'],
+                [8222, 'double low-9 quotation mark'],
+                [60, 'less-than sign'],
+                [62, 'greater-than sign'],
+                [8804, 'less-than or equal to'],
+                [8805, 'greater-than or equal to'],
+                [8211, 'en dash'],
+                [8212, 'em dash'],
+                [175, 'macron'],
+                [8254, 'overline'],
+                [164, 'currency sign'],
+                [166, 'broken bar'],
+                [168, 'diaeresis'],
+                [161, 'inverted exclamation mark'],
+                [191, 'turned question mark'],
+                [710, 'circumflex accent'],
+                [732, 'small tilde'],
+                [176, 'degree sign'],
+                [8722, 'minus sign'],
+                [177, 'plus-minus sign'],
+                [247, 'division sign'],
+                [8260, 'fraction slash'],
+                [215, 'multiplication sign'],
+                [185, 'superscript one'],
+                [178, 'superscript two'],
+                [179, 'superscript three'],
+                [188, 'fraction one quarter'],
+                [189, 'fraction one half'],
+                [190, 'fraction three quarters'],
+            ],
+            '#tiptap_charmap_maths': [
+                [402, 'function / florin'],
+                [8747, 'integral'],
+                [8721, 'n-ary sumation'],
+                [8734, 'infinity'],
+                [8730, 'square root'],
+                [8764, 'similar to'],
+                [8773, 'approximately equal to'],
+                [8776, 'almost equal to'],
+                [8800, 'not equal to'],
+                [8801, 'identical to'],
+                [8712, 'element of'],
+                [8713, 'not an element of'],
+                [8715, 'contains as member'],
+                [8719, 'n-ary product'],
+                [8743, 'logical and'],
+                [8744, 'logical or'],
+                [172, 'not sign'],
+                [8745, 'intersection'],
+                [8746, 'union'],
+                [8706, 'partial differential'],
+                [8704, 'for all'],
+                [8707, 'there exists'],
+                [8709, 'diameter'],
+                [8711, 'backward difference'],
+                [8727, 'asterisk operator'],
+                [8733, 'proportional to'],
+                [8736, 'angle'],
+            ],
+            '#tiptap_charmap_extlatin': [
+                [192, 'A - grave'],
+                [193, 'A - acute'],
+                [194, 'A - circumflex'],
+                [195, 'A - tilde'],
+                [196, 'A - diaeresis'],
+                [197, 'A - ring above'],
+                [256, 'A - macron'],
+                [198, 'ligature AE'],
+                [199, 'C - cedilla'],
+                [200, 'E - grave'],
+                [201, 'E - acute'],
+                [202, 'E - circumflex'],
+                [203, 'E - diaeresis'],
+                [274, 'E - macron'],
+                [204, 'I - grave'],
+                [205, 'I - acute'],
+                [206, 'I - circumflex'],
+                [207, 'I - diaeresis'],
+                [298, 'I - macron'],
+                [208, 'ETH'],
+                [209, 'N - tilde'],
+                [210, 'O - grave'],
+                [211, 'O - acute'],
+                [212, 'O - circumflex'],
+                [213, 'O - tilde'],
+                [214, 'O - diaeresis'],
+                [216, 'O - slash'],
+                [332, 'O - macron'],
+                [338, 'ligature OE'],
+                [352, 'S - caron'],
+                [217, 'U - grave'],
+                [218, 'U - acute'],
+                [219, 'U - circumflex'],
+                [220, 'U - diaeresis'],
+                [362, 'U - macron'],
+                [221, 'Y - acute'],
+                [376, 'Y - diaeresis'],
+                [562, 'Y - macron'],
+                [222, 'THORN'],
+                [224, 'a - grave'],
+                [225, 'a - acute'],
+                [226, 'a - circumflex'],
+                [227, 'a - tilde'],
+                [228, 'a - diaeresis'],
+                [229, 'a - ring above'],
+                [257, 'a - macron'],
+                [230, 'ligature ae'],
+                [231, 'c - cedilla'],
+                [232, 'e - grave'],
+                [233, 'e - acute'],
+                [234, 'e - circumflex'],
+                [235, 'e - diaeresis'],
+                [275, 'e - macron'],
+                [236, 'i - grave'],
+                [237, 'i - acute'],
+                [238, 'i - circumflex'],
+                [239, 'i - diaeresis'],
+                [299, 'i - macron'],
+                [240, 'eth'],
+                [241, 'n - tilde'],
+                [242, 'o - grave'],
+                [243, 'o - acute'],
+                [244, 'o - circumflex'],
+                [245, 'o - tilde'],
+                [246, 'o - diaeresis'],
+                [248, 'o slash'],
+                [333, 'o macron'],
+                [339, 'ligature oe'],
+                [353, 's - caron'],
+                [249, 'u - grave'],
+                [250, 'u - acute'],
+                [251, 'u - circumflex'],
+                [252, 'u - diaeresis'],
+                [363, 'u - macron'],
+                [253, 'y - acute'],
+                [254, 'thorn'],
+                [255, 'y - diaeresis'],
+                [563, 'y - macron'],
+                [913, 'Alpha'],
+                [914, 'Beta'],
+                [915, 'Gamma'],
+                [916, 'Delta'],
+                [917, 'Epsilon'],
+                [918, 'Zeta'],
+                [919, 'Eta'],
+                [920, 'Theta'],
+                [921, 'Iota'],
+                [922, 'Kappa'],
+                [923, 'Lambda'],
+                [924, 'Mu'],
+                [925, 'Nu'],
+                [926, 'Xi'],
+                [927, 'Omicron'],
+                [928, 'Pi'],
+                [929, 'Rho'],
+                [931, 'Sigma'],
+                [932, 'Tau'],
+                [933, 'Upsilon'],
+                [934, 'Phi'],
+                [935, 'Chi'],
+                [936, 'Psi'],
+                [937, 'Omega'],
+                [945, 'alpha'],
+                [946, 'beta'],
+                [947, 'gamma'],
+                [948, 'delta'],
+                [949, 'epsilon'],
+                [950, 'zeta'],
+                [951, 'eta'],
+                [952, 'theta'],
+                [953, 'iota'],
+                [954, 'kappa'],
+                [955, 'lambda'],
+                [956, 'mu'],
+                [957, 'nu'],
+                [958, 'xi'],
+                [959, 'omicron'],
+                [960, 'pi'],
+                [961, 'rho'],
+                [962, 'final sigma'],
+                [963, 'sigma'],
+                [964, 'tau'],
+                [965, 'upsilon'],
+                [966, 'phi'],
+                [967, 'chi'],
+                [968, 'psi'],
+                [969, 'omega'],
+            ],
+            '#tiptap_charmap_symbols': [
+                [8501, 'alef symbol'],
+                [982, 'pi symbol'],
+                [8476, 'real part symbol'],
+                [978, 'upsilon - hook symbol'],
+                [8472, 'Weierstrass p'],
+                [8465, 'imaginary part'],
+            ],
+            '#tiptap_charmap_arrows': [
+                [8592, 'leftwards arrow'],
+                [8593, 'upwards arrow'],
+                [8594, 'rightwards arrow'],
+                [8595, 'downwards arrow'],
+                [8596, 'left right arrow'],
+                [8629, 'carriage return'],
+                [8656, 'leftwards double arrow'],
+                [8657, 'upwards double arrow'],
+                [8658, 'rightwards double arrow'],
+                [8659, 'downwards double arrow'],
+                [8660, 'left right double arrow'],
+                [8756, 'therefore'],
+                [8834, 'subset of'],
+                [8835, 'superset of'],
+                [8836, 'not a subset of'],
+                [8838, 'subset of or equal to'],
+                [8839, 'superset of or equal to'],
+                [8853, 'circled plus'],
+                [8855, 'circled times'],
+                [8869, 'perpendicular'],
+                [8901, 'dot operator'],
+                [8968, 'left ceiling'],
+                [8969, 'right ceiling'],
+                [8970, 'left floor'],
+                [8971, 'right floor'],
+                [9001, 'left-pointing angle bracket'],
+                [9002, 'right-pointing angle bracket'],
+                [9674, 'lozenge'],
+                [9824, 'black spade suit'],
+                [9827, 'black club suit'],
+                [9829, 'black heart suit'],
+                [9830, 'black diamond suit'],
+                [8194, 'en space'],
+                [8195, 'em space'],
+                [8201, 'thin space'],
+                [8204, 'zero width non-joiner'],
+                [8205, 'zero width joiner'],
+                [8206, 'left-to-right mark'],
+                [8207, 'right-to-left mark'],
+            ],
+        };
+        this._filterQuery = '';
+        this._hoverLabel = '';
+        this._selectedGroup = '#general_all';
+        this.#filterHandler = ([, label]) => !this._filterQuery || label.toLocaleLowerCase().includes(this._filterQuery);
+    }
+    /* The character mapping code has been derived from TinyMCE.
+     * https://github.com/tinymce/tinymce/blob/6.8.5/modules/tinymce/src/plugins/charmap/main/ts/core/CharMap.ts#L20-L362
+     * SPDX-License-Identifier: MIT
+     * Copyright © 2022 Ephox Corporation DBA Tiny Technologies, Inc.
+     * Modifications are licensed under the MIT License. */
+    #characterMap;
+    #onClickCharacter(code) {
+        this.value = String.fromCharCode(code);
+        this._submitModal();
+    }
+    #onFilterInput(event) {
+        this._filterQuery = (event.target.value ?? '').toLocaleLowerCase();
+    }
+    render() {
+        return html `
+			<umb-body-layout headline=${this.localize.term('tiptap_charmap_headline')}>
+				${this.#renderCharacterMap()}
+				<uui-button
+					slot="actions"
+					label=${this.localize.term('general_close')}
+					@click=${this._rejectModal}></uui-button>
+			</umb-body-layout>
+		`;
+    }
+    #filterHandler;
+    #renderCharacterMap() {
+        const characters = this._selectedGroup && this._selectedGroup !== '#general_all'
+            ? this.#characterMap[this._selectedGroup].filter(this.#filterHandler)
+            : Object.values(this.#characterMap).flat().filter(this.#filterHandler);
+        return html `
+			<div id="container">
+				<div>
+					${repeat(Object.keys(this.#characterMap), (group) => group, (group) => html `
+							<uui-menu-item
+								label=${this.localize.string(group)}
+								?active=${this._selectedGroup === group}
+								@click-label=${() => (this._selectedGroup = group)}></uui-menu-item>
+						`)}
+				</div>
+				<div id="main">
+					<uui-input
+						type="search"
+						autocomplete="off"
+						placeholder=${this.localize.term('placeholders_filter')}
+						@input=${this.#onFilterInput}
+						${umbFocus()}>
+						<div slot="prepend">
+							<uui-icon name="search"></uui-icon>
+						</div>
+					</uui-input>
+					<uui-scroll-container>
+						${when(characters?.length, () => html `
+								<div id="characters">
+									${repeat(characters, ([code]) => code, ([code, label]) => html `
+											<uui-button
+												label=${label}
+												title=${label}
+												@click=${() => this.#onClickCharacter(code)}
+												@mouseover=${() => (this._hoverLabel = label)}
+												@mouseleave=${() => (this._hoverLabel = '')}>
+												<span>${String.fromCharCode(code)}</span>
+											</uui-button>
+										`)}
+								</div>
+							`, () => html `<p><umb-localize key="content_noItemsToShow">There are no items to show</umb-localize></p>`)}
+					</uui-scroll-container>
+				</div>
+			</div>
+			<div slot="footer-info">${this._hoverLabel}</div>
+		`;
+    }
+    static { this.styles = [
+        css `
+			:host {
+				--umb-body-layout-color-background: var(--uui-color-surface);
+				--uui-menu-item-flat-structure: 1;
+			}
+
+			#container {
+				display: grid;
+				grid-template-columns: var(--uui-size-48) 1fr;
+				gap: var(--uui-size-layout-1);
+			}
+
+			#main {
+				display: flex;
+				flex-direction: column;
+				gap: var(--uui-size-space-4);
+			}
+
+			uui-input {
+				align-items: baseline;
+			}
+
+			uui-scroll-container {
+				height: 300px;
+				width: calc(450px + var(--uui-size-layout-1));
+			}
+
+			#characters {
+				display: grid;
+				grid-template-columns: repeat(auto-fill, var(--uui-size-14));
+				gap: var(--uui-size-5);
+				padding: var(--uui-size-1);
+
+				uui-button {
+					--uui-button-font-weight: normal;
+
+					border-radius: var(--uui-border-radius);
+					font-size: 1.5rem;
+
+					&:focus,
+					&:hover {
+						outline: 2px solid var(--uui-color-selected);
+					}
+				}
+			}
+
+			div[slot='footer-info'] {
+				margin-left: var(--uui-size-layout-1);
+				text-transform: capitalize;
+			}
+		`,
+    ]; }
+};
+__decorate([
+    state()
+], UmbCharacterMapModalElement.prototype, "_filterQuery", void 0);
+__decorate([
+    state()
+], UmbCharacterMapModalElement.prototype, "_hoverLabel", void 0);
+__decorate([
+    state()
+], UmbCharacterMapModalElement.prototype, "_selectedGroup", void 0);
+UmbCharacterMapModalElement = __decorate([
+    customElement('umb-character-map-modal')
+], UmbCharacterMapModalElement);
+export { UmbCharacterMapModalElement };
+export { UmbCharacterMapModalElement as element };

package/dist-cms/packages/tiptap/components/character-map/character-map-modal.token.d.ts

@@ -0,0 +1,4 @@
+import { UmbModalToken } from '../../../core/modal/index.js';
+export type UmbTiptapCharacterMapModalData = never;
+export type UmbTiptapCharacterMapModalValue = string;
+export declare const UMB_TIPTAP_CHARACTER_MAP_MODAL: UmbModalToken<never, string>;

package/dist-cms/packages/tiptap/components/character-map/character-map-modal.token.js

@@ -0,0 +1,5 @@
+import { UMB_TIPTAP_CHARACTER_MAP_MODAL_ALIAS } from './constants.js';
+import { UmbModalToken } from '../../../core/modal/index.js';
+export const UMB_TIPTAP_CHARACTER_MAP_MODAL = new UmbModalToken(UMB_TIPTAP_CHARACTER_MAP_MODAL_ALIAS, {
+    modal: { type: 'dialog' },
+});

package/dist-cms/packages/tiptap/components/character-map/constants.d.ts

@@ -0,0 +1 @@
+export declare const UMB_TIPTAP_CHARACTER_MAP_MODAL_ALIAS = "Umb.Modal.Tiptap.CharacterMap";

package/dist-cms/packages/tiptap/components/character-map/constants.js

@@ -0,0 +1 @@
+export const UMB_TIPTAP_CHARACTER_MAP_MODAL_ALIAS = 'Umb.Modal.Tiptap.CharacterMap';

package/dist-cms/packages/tiptap/components/character-map/index.d.ts

@@ -0,0 +1 @@
+export * from './character-map-modal.token.js';

package/dist-cms/packages/tiptap/components/character-map/index.js

@@ -0,0 +1 @@
+export * from './character-map-modal.token.js';

package/dist-cms/packages/tiptap/components/character-map/manifests.d.ts

@@ -0,0 +1,2 @@
+import type { ManifestModal } from '../../../core/modal/index.js';
+export declare const manifests: Array<ManifestModal>;

package/dist-cms/packages/tiptap/components/character-map/manifests.js

@@ -0,0 +1,9 @@
+import { UMB_TIPTAP_CHARACTER_MAP_MODAL_ALIAS } from './constants.js';
+export const manifests = [
+    {
+        type: 'modal',
+        alias: UMB_TIPTAP_CHARACTER_MAP_MODAL_ALIAS,
+        name: 'Character Map Modal',
+        element: () => import('./character-map-modal.element.js'),
+    },
+];

package/dist-cms/packages/tiptap/components/index.d.ts

@@ -1,2 +1,4 @@
 export * from './input-tiptap/index.js';
+export * from './anchor-modal/index.js';
 export * from './cascading-menu-popover/cascading-menu-popover.element.js';
+export * from './character-map/index.js';

package/dist-cms/packages/tiptap/components/index.js

@@ -1,2 +1,4 @@
 export * from './input-tiptap/index.js';
+export * from './anchor-modal/index.js';
 export * from './cascading-menu-popover/cascading-menu-popover.element.js';
+export * from './character-map/index.js';

package/dist-cms/packages/tiptap/components/input-tiptap/input-tiptap.element.d.ts

@@ -1,7 +1,7 @@
-import type { UmbTiptapToolbarValue } from '../types.js';
 import { UmbLitElement } from '../../../core/lit-element/index.js';
 import type { UmbPropertyEditorConfigCollection } from '../../../core/property-editor/index.js';
 import './tiptap-toolbar.element.js';
+import './tiptap-statusbar.element.js';
 declare const UmbInputTiptapElement_base: import("../../../../libs/extension-api/index.js").HTMLElementConstructor<import("../../../core/validation/index.js").UmbFormControlMixinElement<string>> & typeof UmbLitElement;
 export declare class UmbInputTiptapElement extends UmbInputTiptapElement_base {
     #private;
@@ -21,7 +21,8 @@ export declare class UmbInputTiptapElement extends UmbInputTiptapElement_base {
     private _editor?;
     private readonly _extensions;
     private _styles;
-    _toolbar: UmbTiptapToolbarValue;
+    private _toolbar;
+    private _statusbar;
     constructor();
     protected firstUpdated(): Promise<void>;
     /**