@umbraco-cms/backoffice 15.2.2 → 15.3.0-rc

package/dist-cms/packages/templating/modals/templating-page-field-builder/templating-page-field-builder-modal.element.js

@@ -73,7 +73,7 @@ let UmbTemplatingPageFieldBuilderModalElement = class UmbTemplatingPageFieldBuil
 							?disabled=${this._field ? false : true}></uui-checkbox>
 
 						<uui-label><umb-localize key="templateEditor_outputSample">Output sample</umb-localize></uui-label>
-						<umb-code-block language="C#" copy
+						<umb-code-block style="max-height:500px;" language="C#" copy
 							>${this._field ? getUmbracoFieldSnippet(this._field, this._default, this._recursive) : ''}</umb-code-block
 						>
 					</div>

package/dist-cms/packages/templating/templates/modals/query-builder/query-builder-modal.element.js

@@ -200,7 +200,9 @@ let UmbTemplateQueryBuilderModalElement = class UmbTemplateQueryBuilderModalElem
 							</span>
 							${this._templateQuery?.sampleResults.map((sample) => html `<span><umb-icon name=${sample.icon}></umb-icon>${sample.name}</span>`) ?? ''}
 						</div>
-						<umb-code-block language="C#" copy>${this._templateQuery?.queryExpression ?? ''}</umb-code-block>
+						<umb-code-block style="max-height:500px;" language="C#" copy
+							>${this._templateQuery?.queryExpression ?? ''}</umb-code-block
+						>
 					</uui-box>
 				</div>
 

package/dist-cms/packages/templating/utils/index.js

@@ -35,6 +35,6 @@ export const getUmbracoFieldSnippet = (field, defaultValue = null, recursive = f
     else if (defaultValue !== null) {
         fallback = 'Fallback.ToDefaultValue';
     }
-    const value = `${field !== null ? `@Model.Value("${field}"` : ''}${fallback !== null ? `, fallback: ${fallback}` : ''}${defaultValue !== null ? `, defaultValue: new HtmlString("${defaultValue}")` : ''}${field ? ')' : ')'}`;
+    const value = `${field !== null ? `@Model.Value("${field}"` : ''}${fallback !== null ? `, fallback: ${fallback}` : ''}${defaultValue !== null ? `, defaultValue: (object)"${defaultValue}"` : ''}${field ? ')' : ')'}`;
     return value;
 };

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

@@ -1,5 +1,5 @@
 import { UmbLitElement } from '../../../core/lit-element/index.js';
-import { type Editor } from '../../../../external/tinymce/index.js';
+import type { Editor } from '../../../../external/tinymce/index.js';
 import type { UmbPropertyEditorConfigCollection } from '../../../core/property-editor/index.js';
 declare const UmbInputTinyMceElement_base: (new (...args: any[]) => import("@umbraco-ui/uui-base").UUIFormControlMixinElement<FormData | FormDataEntryValue>) & typeof UmbLitElement;
 export declare class UmbInputTinyMceElement extends UmbInputTinyMceElement_base {

package/dist-cms/packages/tiny-mce/components/input-tiny-mce/input-tiny-mce.element.js

@@ -8,16 +8,16 @@ import { availableLanguages } from './input-tiny-mce.languages.js';
 import { defaultFallbackConfig } from './input-tiny-mce.defaults.js';
 import { pastePreProcessHandler } from './input-tiny-mce.handlers.js';
 import { uriAttributeSanitizer } from './input-tiny-mce.sanitizer.js';
-import { loadManifestApi } from '../../../../libs/extension-api/index.js';
 import { css, customElement, html, property, query } from '../../../../external/lit/index.js';
+import { loadManifestApi } from '../../../../libs/extension-api/index.js';
 import { getProcessedImageUrl, umbDeepMerge } from '../../../core/utils/index.js';
+import { renderEditor } from '../../../../external/tinymce/index.js';
 import { umbExtensionsRegistry } from '../../../core/extension-registry/index.js';
+import { ImageCropModeModel } from '../../../../external/backend-api/index.js';
 import { UmbChangeEvent } from '../../../core/event/index.js';
 import { UmbLitElement } from '../../../core/lit-element/index.js';
 import { UmbStylesheetDetailRepository, UmbStylesheetRuleManager } from '../../../templating/stylesheets/index.js';
 import { UUIFormControlMixin } from '../../../../external/uui/index.js';
-import { renderEditor, } from '../../../../external/tinymce/index.js';
-import { ImageCropModeModel } from '../../../../external/backend-api/index.js';
 /**
  * Handles the resize event
  * @param e
@@ -44,6 +44,8 @@ let UmbInputTinyMceElement = class UmbInputTinyMceElement extends UUIFormControl
         return this._editorElement?.querySelector('iframe') ?? undefined;
     }
     set value(newValue) {
+        if (newValue === this.value)
+            return;
         super.value = newValue;
         const newContent = typeof newValue === 'string' ? newValue : '';
         if (this.#editorRef && this.#editorRef.getContent() != newContent) {
@@ -292,6 +294,8 @@ let UmbInputTinyMceElement = class UmbInputTinyMceElement extends UUIFormControl
         editor.setContent(typeof this.value === 'string' ? this.value : '');
     }
     #onChange(value) {
+        if (this.value === value)
+            return;
         this.value = value;
         this.dispatchEvent(new UmbChangeEvent());
     }

package/dist-cms/packages/tiny-mce/plugins/tiny-mce-mediapicker.plugin.js

@@ -182,15 +182,15 @@ export default class UmbTinyMceMediaPickerPlugin extends UmbTinyMcePluginBase {
     }
     #uploadImageHandler = (blobInfo, progress) => {
         return new Promise((resolve, reject) => {
-            // Fetch does not support progress, so we need to fake it.
             progress(0);
             const id = UmbId.new();
             const fileBlob = blobInfo.blob();
             const file = new File([fileBlob], blobInfo.filename(), { type: fileBlob.type });
-            progress(50);
             document.dispatchEvent(new CustomEvent('rte.file.uploading', { composed: true, bubbles: true }));
             this.#temporaryFileRepository
-                .upload(id, file)
+                .upload(id, file, (evt) => {
+                progress((evt.loaded / evt.total) * 100);
+            })
                 .then((response) => {
                 if (response.error) {
                     reject(response.error);

package/dist-cms/packages/tiny-mce/property-editors/tiny-mce/manifests.js

@@ -63,22 +63,22 @@ export const manifests = [
                     },
                     {
                         alias: 'stylesheets',
-                        label: 'Stylesheets',
+                        label: '#treeHeaders_stylesheets',
                         description: 'Pick the stylesheets whose editor styles should be available when editing',
                         propertyEditorUiAlias: 'Umb.PropertyEditorUI.TinyMCE.StylesheetsConfiguration',
                         weight: 20,
                     },
                     {
                         alias: 'dimensions',
-                        label: 'Dimensions',
+                        label: '#general_dimensions',
                         description: 'Set the editor dimensions',
                         propertyEditorUiAlias: 'Umb.PropertyEditorUI.TinyMCE.DimensionsConfiguration',
                         weight: 30,
                     },
                     {
                         alias: 'maxImageSize',
-                        label: 'Maximum size for inserted images',
-                        description: 'Maximum width or height - enter 0 to disable resizing',
+                        label: '#rte_config_maxImageSize',
+                        description: '{#rte_config_maxImageSize_description}',
                         propertyEditorUiAlias: 'Umb.PropertyEditorUI.TinyMCE.MaxImageSizeConfiguration',
                         weight: 40,
                     },
@@ -92,8 +92,8 @@ export const manifests = [
                     },
                     {
                         alias: 'overlaySize',
-                        label: 'Overlay Size',
-                        description: 'Select the width of the overlay (link picker)',
+                        label: '#rte_config_overlaySize',
+                        description: '{#rte_config_overlaySize_description}',
                         propertyEditorUiAlias: 'Umb.PropertyEditorUi.OverlaySize',
                         weight: 81,
                     },

package/dist-cms/packages/tiny-mce/property-editors/tiny-mce/property-editor-ui-tiny-mce.element.js

@@ -4,8 +4,8 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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 { UmbPropertyEditorUiRteElementBase, UMB_BLOCK_RTE_DATA_CONTENT_KEY } from '../../../rte/index.js';
 import { customElement, html } from '../../../../external/lit/index.js';
+import { UmbPropertyEditorUiRteElementBase, UMB_BLOCK_RTE_DATA_CONTENT_KEY } from '../../../rte/index.js';
 import '../../components/input-tiny-mce/input-tiny-mce.element.js';
 /**
  * @element umb-property-editor-ui-tiny-mce
@@ -32,19 +32,15 @@ let UmbPropertyEditorUITinyMceElement = class UmbPropertyEditorUITinyMceElement
         // Remove unused Blocks of Blocks Layout. Leaving only the Blocks that are present in Markup.
         //const blockElements = editor.dom.select(`umb-rte-block, umb-rte-block-inline`);
         const usedContentKeys = Array.from(blockEls).map((blockElement) => blockElement.getAttribute(UMB_BLOCK_RTE_DATA_CONTENT_KEY));
-        this._filterUnusedBlocks(usedContentKeys);
-        // Then get the content of the editor and update the value.
-        // maybe in this way doc.body.innerHTML;
-        this._latestMarkup = markup;
-        if (this.value) {
-            this.value = {
-                ...this.value,
-                markup: this._latestMarkup,
+        if (super.value) {
+            super.value = {
+                ...super.value,
+                markup: markup,
             };
         }
         else {
             this.value = {
-                markup: this._latestMarkup,
+                markup: markup,
                 blocks: {
                     layout: {},
                     contentData: [],
@@ -53,6 +49,8 @@ let UmbPropertyEditorUITinyMceElement = class UmbPropertyEditorUITinyMceElement
                 },
             };
         }
+        // lets run this one after we set the value, to make sure we don't reset the value.
+        this._filterUnusedBlocks(usedContentKeys);
         this._fireChangeEvent();
     }
     render() {

package/dist-cms/packages/tiptap/components/cascading-menu-popover/cascading-menu-popover.element.d.ts

@@ -0,0 +1,23 @@
+import { UUIPopoverContainerElement } from '../../../../external/uui/index.js';
+export type UmbCascadingMenuItem = {
+    unique: string;
+    label: string;
+    icon?: string;
+    items?: Array<UmbCascadingMenuItem>;
+    element?: HTMLElement;
+    separatorAfter?: boolean;
+    execute?: () => void;
+    isActive?: () => boolean;
+};
+export declare class UmbCascadingMenuPopoverElement extends UUIPopoverContainerElement {
+    #private;
+    items?: Array<UmbCascadingMenuItem>;
+    render(): import("lit-html").TemplateResult<1>;
+    static readonly styles: import("lit").CSSResult[];
+}
+export default UmbCascadingMenuPopoverElement;
+declare global {
+    interface HTMLElementTagNameMap {
+        'umb-cascading-menu-popover': UmbCascadingMenuPopoverElement;
+    }
+}

package/dist-cms/packages/tiptap/components/cascading-menu-popover/cascading-menu-popover.element.js

@@ -0,0 +1,113 @@
+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, property, repeat, when } from '../../../../external/lit/index.js';
+import { UUIPopoverContainerElement } from '../../../../external/uui/index.js';
+let UmbCascadingMenuPopoverElement = class UmbCascadingMenuPopoverElement extends UUIPopoverContainerElement {
+    #getPopoverById(popoverId) {
+        return this.shadowRoot?.querySelector(`#${popoverId}`);
+    }
+    #onMouseEnter(item) {
+        if (!item.items?.length)
+            return;
+        const popover = this.#getPopoverById(item.unique);
+        if (!popover)
+            return;
+        // TODO: This ignorer is just neede for JSON SCHEMA TO WORK, As its not updated with latest TS jet.
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        popover.showPopover();
+    }
+    #onMouseLeave(item) {
+        const popover = this.#getPopoverById(item.unique);
+        if (!popover)
+            return;
+        // TODO: This ignorer is just neede for JSON SCHEMA TO WORK, As its not updated with latest TS jet.
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        popover.hidePopover();
+    }
+    #onClick(item) {
+        item.execute?.();
+        setTimeout(() => {
+            this.#onMouseLeave(item);
+        }, 100);
+    }
+    render() {
+        return html `
+			<uui-scroll-container>
+				${when(this.items?.length, () => html `
+						${repeat(this.items, (item) => item.unique, (item) => this.#renderItem(item))}
+						${super.render()}
+					`, () => super.render())}
+			</uui-scroll-container>
+		`;
+    }
+    #renderItem(item) {
+        const element = item.element;
+        if (element) {
+            element.setAttribute('popovertarget', item.unique);
+        }
+        return html `
+			<div @mouseenter=${() => this.#onMouseEnter(item)} @mouseleave=${() => this.#onMouseLeave(item)}>
+				${when(element, () => element, () => html `
+						<uui-menu-item
+							class=${item.separatorAfter ? 'separator' : ''}
+							popovertarget=${item.unique}
+							@click-label=${() => this.#onClick(item)}>
+							${when(item.icon, (icon) => html `<uui-icon slot="icon" name=${icon}></uui-icon>`)}
+							<div slot="label" class="menu-item">
+								<span>${item.label}</span>
+								${when(item.items, () => html `<uui-symbol-expand></uui-symbol-expand>`)}
+							</div>
+						</uui-menu-item>
+					`)}
+				<umb-cascading-menu-popover id=${item.unique} placement="right-start" .items=${item.items}>
+				</umb-cascading-menu-popover>
+			</div>
+		`;
+    }
+    static { this.styles = [
+        ...UUIPopoverContainerElement.styles,
+        css `
+			:host {
+				--uui-menu-item-flat-structure: 1;
+
+				background: var(--uui-color-surface);
+				border-radius: var(--uui-border-radius);
+				box-shadow: var(--uui-shadow-depth-3);
+				padding: var(--uui-size-space-1);
+			}
+
+			.menu-item {
+				flex: 1;
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+				gap: var(--uui-size-space-4);
+			}
+
+			.separator::after {
+				content: '';
+				position: absolute;
+				border-bottom: 1px solid var(--uui-color-border);
+				width: 100%;
+			}
+
+			uui-scroll-container {
+				max-height: 500px;
+			}
+		`,
+    ]; }
+};
+__decorate([
+    property({ type: Array })
+], UmbCascadingMenuPopoverElement.prototype, "items", void 0);
+UmbCascadingMenuPopoverElement = __decorate([
+    customElement('umb-cascading-menu-popover')
+], UmbCascadingMenuPopoverElement);
+export { UmbCascadingMenuPopoverElement };
+export default UmbCascadingMenuPopoverElement;

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

@@ -1,2 +1,2 @@
 export * from './input-tiptap/index.js';
-export * from './toolbar/tiptap-toolbar-dropdown-base.element.js';
+export * from './cascading-menu-popover/cascading-menu-popover.element.js';

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

@@ -1,2 +1,2 @@
 export * from './input-tiptap/index.js';
-export * from './toolbar/tiptap-toolbar-dropdown-base.element.js';
+export * from './cascading-menu-popover/cascading-menu-popover.element.js';

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

@@ -1,21 +1,28 @@
 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-hover-menu.element.js';
 import './tiptap-toolbar.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;
-    private readonly _extensions;
     set value(value: string);
     get value(): string;
     configuration?: UmbPropertyEditorConfigCollection;
+    /**
+     * Sets the input to required, meaning validation will fail if the value is empty.
+     * @type {boolean}
+     */
+    required?: boolean;
+    requiredMessage?: string;
     /**
      * Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content.
      */
     readonly: boolean;
     private _editor?;
+    private readonly _extensions;
+    private _styles;
     _toolbar: UmbTiptapToolbarValue;
+    constructor();
     protected firstUpdated(): Promise<void>;
     /**
      * Checks if the editor is empty.