@umbraco-cms/backoffice 17.0.2 → 17.1.0

package/dist-cms/packages/sysinfo/manifests.js

@@ -5,10 +5,4 @@ export const manifests = [
         name: 'Sysinfo Modal',
         js: () => import('./components/sysinfo.element.js'),
     },
-    {
-        type: 'modal',
-        alias: 'Umb.Modal.NewVersion',
-        name: 'New Version Modal',
-        js: () => import('./components/new-version.element.js'),
-    },
 ];

package/dist-cms/packages/sysinfo/modals/index.d.ts

@@ -1,2 +1 @@
-export * from './new-version-modal.token.js';
 export * from './sysinfo-modal.token.js';

package/dist-cms/packages/sysinfo/modals/index.js

@@ -1,2 +1 @@
-export * from './new-version-modal.token.js';
 export * from './sysinfo-modal.token.js';

package/dist-cms/packages/sysinfo/repository/sysinfo.repository.d.ts

@@ -2,7 +2,6 @@ import type { UmbServerUpgradeCheck } from '../types.js';
 import type { UmbControllerHost } from '../../../libs/controller-api/index.js';
 import { UmbRepositoryBase } from '../../core/repository/index.js';
 export declare class UmbSysinfoRepository extends UmbRepositoryBase {
-    #private;
     constructor(host: UmbControllerHost);
     requestTroubleShooting(): Promise<import("../../core/backend-api/index.js").ServerTroubleshootingResponseModel>;
     requestServerInformation(): Promise<import("../../core/backend-api/index.js").ServerInformationResponseModel>;
@@ -10,11 +9,11 @@ export declare class UmbSysinfoRepository extends UmbRepositoryBase {
         version: string;
     }>;
     /**
-     * Check if the server has an upgrade available and return the result.
-     * If the server has an upgrade available, the result will be stored in local storage.
-     * If the server does not have an upgrade available, the result will be stored in local storage as well.
-     * @param {string} currentVersion The current version of the server.
+     * This method used to check for server upgrades by comparing the current version with the latest available version.
+     * However, the upgrade check functionality is now defunct and this method will always return null.
+     * @param {string} _currentVersion The current version of the server.
      * @returns {Promise<UmbServerUpgradeCheck | null>} The server upgrade check result or null if the check is not allowed or if the check failed.
+     * @deprecated This method is deprecated and will be removed in Umbraco 19. It is no longer possible to check for updates from the backoffice.
      */
-    serverUpgradeCheck(currentVersion: string): Promise<UmbServerUpgradeCheck | null>;
+    serverUpgradeCheck(_currentVersion: string): Promise<UmbServerUpgradeCheck | null>;
 }

package/dist-cms/packages/sysinfo/repository/sysinfo.repository.js

@@ -2,7 +2,6 @@ import packageJson from '../../../../package.json';
 import { UmbRepositoryBase } from '../../core/repository/index.js';
 import { tryExecute } from '../../core/resources/index.js';
 import { ServerService } from '../../core/backend-api/index.js';
-import { UMB_SERVER_CONTEXT } from '../../core/server/index.js';
 export class UmbSysinfoRepository extends UmbRepositoryBase {
     constructor(host) {
         super(host, 'Umb.Repository.Sysinfo');
@@ -23,96 +22,13 @@ export class UmbSysinfoRepository extends UmbRepositoryBase {
         return clientInformation;
     }
     /**
-     * Check if the server has an upgrade available and return the result.
-     * If the server has an upgrade available, the result will be stored in local storage.
-     * If the server does not have an upgrade available, the result will be stored in local storage as well.
-     * @param {string} currentVersion The current version of the server.
+     * This method used to check for server upgrades by comparing the current version with the latest available version.
+     * However, the upgrade check functionality is now defunct and this method will always return null.
+     * @param {string} _currentVersion The current version of the server.
      * @returns {Promise<UmbServerUpgradeCheck | null>} The server upgrade check result or null if the check is not allowed or if the check failed.
+     * @deprecated This method is deprecated and will be removed in Umbraco 19. It is no longer possible to check for updates from the backoffice.
      */
-    async serverUpgradeCheck(currentVersion) {
-        // Check if we are allowed to check again
-        const serverContext = await this.getContext(UMB_SERVER_CONTEXT);
-        if (!serverContext) {
-            throw new Error('Could not get the server context.');
-        }
-        // TODO: Provide a get method, so we do not need to observe in this case:
-        const versionCheckPeriod = await this.observe(serverContext.getServerConnection().versionCheckPeriod).asPromise();
-        if (versionCheckPeriod <= 0) {
-            // We do not need to check the server for an upgrade
-            return null;
-        }
-        const lastUpgradeCheck = this.#getStoredServerUpgradeCheck(currentVersion);
-        // If we have a stored check, then return it if it is still valid
-        if (lastUpgradeCheck !== null) {
-            // If we have a stored check, then check if we should check again based on the period
-            if (lastUpgradeCheck.createdAt) {
-                const lastCheckDate = new Date(lastUpgradeCheck.createdAt);
-                const diff = new Date().getTime() - lastCheckDate.getTime();
-                const diffDays = diff / (1000 * 3600 * 24);
-                if (diffDays < versionCheckPeriod) {
-                    // If we should not check, then return what we have stored if it is still valid
-                    if (lastUpgradeCheck.type.toLowerCase() !== 'none') {
-                        return lastUpgradeCheck;
-                    }
-                    return null; // no upgrade available
-                }
-            }
-        }
-        // Check the server for an upgrade because we have no stored check or the stored check is invalid
-        return this.#fetchServerUpgradeCheck(versionCheckPeriod, currentVersion);
-    }
-    /**
-     * Get the stored server upgrade check if it is still valid, otherwise return null and remove the stored check.
-     * @param {string} currentVersion The current version of the server.
-     * @returns {UmbServerUpgradeCheck | null} The stored server upgrade check or null if it is not valid.
-     */
-    #getStoredServerUpgradeCheck(currentVersion) {
-        const storedCheck = localStorage.getItem('umb:serverUpgradeCheck');
-        if (!storedCheck) {
-            return null;
-        }
-        const upgradeCheck = JSON.parse(storedCheck);
-        // Check that the stored check is for the same version
-        if (upgradeCheck.version !== currentVersion) {
-            localStorage.removeItem('umb:serverUpgradeCheck');
-            return null;
-        }
-        // Check that the stored check is not older than the last check
-        if (upgradeCheck.createdAt) {
-            const createdAt = new Date(upgradeCheck.createdAt);
-            const expiresAt = new Date(upgradeCheck.expires);
-            if (expiresAt.getTime() <= createdAt.getTime()) {
-                localStorage.removeItem('umb:serverUpgradeCheck');
-                return null;
-            }
-        }
-        return upgradeCheck;
-    }
-    /**
-     * Fetch the server upgrade check from the server and store the result in local storage.
-     * @param {number} versionCheckPeriod A period in days to wait before checking the server again.
-     * @param {string} currentVersion The current version of the server.
-     * @returns {Promise<UmbServerUpgradeCheck | null>} The server upgrade check result or null if the check failed.
-     */
-    async #fetchServerUpgradeCheck(versionCheckPeriod, currentVersion) {
-        // Check the server for an upgrade because we have no stored check or the stored check is invalid
-        const { data } = await tryExecute(this, ServerService.getServerUpgradeCheck(), { disableNotifications: true });
-        if (data) {
-            // Save the last check date including the data received
-            const expiresAt = new Date();
-            expiresAt.setDate(expiresAt.getDate() + versionCheckPeriod);
-            const upgradeCheck = {
-                ...data,
-                expires: expiresAt.toISOString(),
-                version: currentVersion,
-                createdAt: new Date().toISOString(),
-            };
-            localStorage.setItem('umb:serverUpgradeCheck', JSON.stringify(upgradeCheck));
-            // Only return if we have a valid type
-            if (data.type.toLowerCase() !== 'none') {
-                return upgradeCheck;
-            }
-        }
-        return null; // no upgrade available
+    async serverUpgradeCheck(_currentVersion) {
+        return null;
     }
 }

package/dist-cms/packages/sysinfo/types.d.ts

@@ -1,4 +1,7 @@
 import type { UpgradeCheckResponseModel } from '../core/backend-api/index.js';
+/**
+ * @deprecated This type is deprecated and will be removed in Umbraco 19. It is no longer possible to check for updates from the backoffice.
+ */
 export type UmbServerUpgradeCheck = UpgradeCheckResponseModel & {
     expires: string;
     version?: string;

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

@@ -4,6 +4,8 @@ export declare class UmbTagsInputElement extends UmbTagsInputElement_base {
     #private;
     group?: string;
     culture?: string | null;
+    required: boolean;
+    requiredMessage: string;
     set items(newTags: string[]);
     get items(): string[];
     /**

package/dist-cms/packages/tags/components/tags-input/tags-input.element.js

@@ -12,6 +12,8 @@ import { UUIFormControlMixin } from '../../../../external/uui/index.js';
 let UmbTagsInputElement = class UmbTagsInputElement extends UUIFormControlMixin(UmbLitElement, '') {
     constructor() {
         super(...arguments);
+        this.required = false;
+        this.requiredMessage = 'This field is required';
         this.#items = [];
         /**
          * Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content.
@@ -25,7 +27,7 @@ let UmbTagsInputElement = class UmbTagsInputElement extends UUIFormControlMixin(
         this.#repository = new UmbTagRepository(this);
     }
     set items(newTags) {
-        const newItems = newTags.filter((x) => x !== '');
+        const newItems = newTags?.filter((x) => x !== '') || [];
         this.#items = newItems;
         super.value = this.#items.join(',');
     }
@@ -462,6 +464,12 @@ __decorate([
 __decorate([
     property({ type: String })
 ], UmbTagsInputElement.prototype, "culture", void 0);
+__decorate([
+    property({ type: Boolean })
+], UmbTagsInputElement.prototype, "required", void 0);
+__decorate([
+    property({ type: String })
+], UmbTagsInputElement.prototype, "requiredMessage", void 0);
 __decorate([
     property({ type: Array })
 ], UmbTagsInputElement.prototype, "items", null);

package/dist-cms/packages/tags/property-editors/tags/property-editor-ui-tags.element.d.ts

@@ -1,12 +1,12 @@
 import type { UmbPropertyEditorUiElement, UmbPropertyEditorConfigCollection } from '../../../core/property-editor/index.js';
 import { UmbLitElement } from '../../../core/lit-element/index.js';
 import '../../components/tags-input/tags-input.element.js';
+declare const UmbPropertyEditorUITagsElement_base: import("../../../../libs/extension-api/index.js").HTMLElementConstructor<import("../../../core/validation/index.js").UmbFormControlMixinElement<string[] | undefined>> & typeof UmbLitElement;
 /**
  * @element umb-property-editor-ui-tags
  */
-export declare class UmbPropertyEditorUITagsElement extends UmbLitElement implements UmbPropertyEditorUiElement {
+export declare class UmbPropertyEditorUITagsElement extends UmbPropertyEditorUITagsElement_base implements UmbPropertyEditorUiElement {
     #private;
-    private _value;
     set value(value: Array<string>);
     get value(): Array<string>;
     /**
@@ -16,11 +16,14 @@ export declare class UmbPropertyEditorUITagsElement extends UmbLitElement implem
      * @default false
      */
     readonly: boolean;
+    mandatory?: boolean;
+    mandatoryMessage: string;
     private _group?;
     private _storageType?;
     private _culture?;
     set config(config: UmbPropertyEditorConfigCollection | undefined);
     constructor();
+    protected firstUpdated(): void;
     render(): import("lit-html").TemplateResult<1>;
 }
 export default UmbPropertyEditorUITagsElement;

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

@@ -9,15 +9,16 @@ import { html, customElement, property, state, ifDefined } from '../../../../ext
 import { UmbLitElement } from '../../../core/lit-element/index.js';
 import '../../components/tags-input/tags-input.element.js';
 import { UmbChangeEvent } from '../../../core/event/index.js';
+import { UMB_VALIDATION_EMPTY_LOCALIZATION_KEY, UmbFormControlMixin } from '../../../core/validation/index.js';
 /**
  * @element umb-property-editor-ui-tags
  */
-let UmbPropertyEditorUITagsElement = class UmbPropertyEditorUITagsElement extends UmbLitElement {
+let UmbPropertyEditorUITagsElement = class UmbPropertyEditorUITagsElement extends UmbFormControlMixin(UmbLitElement, undefined) {
     set value(value) {
-        this._value = value || [];
+        super.value = value || [];
     }
     get value() {
-        return this._value;
+        return super.value;
     }
     //TODO: Use type from VariantID
     set config(config) {
@@ -26,7 +27,6 @@ let UmbPropertyEditorUITagsElement = class UmbPropertyEditorUITagsElement extend
     }
     constructor() {
         super();
-        this._value = [];
         /**
          * Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content.
          * @type {boolean}
@@ -34,6 +34,7 @@ let UmbPropertyEditorUITagsElement = class UmbPropertyEditorUITagsElement extend
          * @default false
          */
         this.readonly = false;
+        this.mandatoryMessage = UMB_VALIDATION_EMPTY_LOCALIZATION_KEY;
         this.consumeContext(UMB_PROPERTY_CONTEXT, (context) => {
             this.observe(context?.variantId, (id) => {
                 if (id && id.culture !== undefined) {
@@ -42,6 +43,9 @@ let UmbPropertyEditorUITagsElement = class UmbPropertyEditorUITagsElement extend
             });
         });
     }
+    firstUpdated() {
+        this.addFormControlElement(this.shadowRoot.querySelector('umb-tags-input'));
+    }
     #onChange(event) {
         this.value = event.target.value.split(',');
         this.dispatchEvent(new UmbChangeEvent());
@@ -52,6 +56,8 @@ let UmbPropertyEditorUITagsElement = class UmbPropertyEditorUITagsElement extend
 			.culture=${this._culture}
 			.items=${this.value}
 			@change=${this.#onChange}
+			?required=${!!this.mandatory}
+			.requiredMessage=${this.mandatoryMessage}
 			?readonly=${this.readonly}></umb-tags-input>`;
     }
 };
@@ -61,6 +67,12 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true })
 ], UmbPropertyEditorUITagsElement.prototype, "readonly", void 0);
+__decorate([
+    property({ type: Boolean })
+], UmbPropertyEditorUITagsElement.prototype, "mandatory", void 0);
+__decorate([
+    property({ type: String })
+], UmbPropertyEditorUITagsElement.prototype, "mandatoryMessage", void 0);
 __decorate([
     state()
 ], UmbPropertyEditorUITagsElement.prototype, "_group", void 0);

package/dist-cms/packages/templating/partial-views/entity-actions/create/manifests.js

@@ -10,7 +10,7 @@ export const manifests = [
         forEntityTypes: [UMB_PARTIAL_VIEW_ROOT_ENTITY_TYPE, UMB_PARTIAL_VIEW_FOLDER_ENTITY_TYPE],
         meta: {
             icon: 'icon-add',
-            label: '#actions_create',
+            label: '#actions_createFor',
             additionalOptions: true,
         },
     },

package/dist-cms/packages/templating/partial-views/menu/manifests.js

@@ -1,4 +1,5 @@
-import { UMB_PARTIAL_VIEW_TREE_ALIAS } from '../tree/index.js';
+import { UMB_PARTIAL_VIEW_WORKSPACE_ALIAS } from '../workspace/constants.js';
+import { UMB_PARTIAL_VIEW_FOLDER_WORKSPACE_ALIAS, UMB_PARTIAL_VIEW_TREE_ALIAS } from '../tree/constants.js';
 import { UMB_PARTIAL_VIEW_MENU_ITEM_ALIAS } from './constants.js';
 import { UMB_WORKSPACE_CONDITION_ALIAS } from '../../../core/workspace/index.js';
 export const manifests = [
@@ -26,7 +27,7 @@ export const manifests = [
         conditions: [
             {
                 alias: UMB_WORKSPACE_CONDITION_ALIAS,
-                match: 'Umb.Workspace.PartialView',
+                match: UMB_PARTIAL_VIEW_WORKSPACE_ALIAS,
             },
         ],
     },
@@ -38,7 +39,35 @@ export const manifests = [
         conditions: [
             {
                 alias: UMB_WORKSPACE_CONDITION_ALIAS,
-                match: 'Umb.Workspace.PartialView',
+                match: UMB_PARTIAL_VIEW_WORKSPACE_ALIAS,
+            },
+        ],
+    },
+    {
+        type: 'workspaceContext',
+        kind: 'menuStructure',
+        name: 'Partial View Folder Menu Structure Workspace Context',
+        alias: 'Umb.Context.PartialViewFolder.Menu.Structure',
+        api: () => import('./partial-view-menu-structure.context.js'),
+        meta: {
+            menuItemAlias: UMB_PARTIAL_VIEW_MENU_ITEM_ALIAS,
+        },
+        conditions: [
+            {
+                alias: UMB_WORKSPACE_CONDITION_ALIAS,
+                match: UMB_PARTIAL_VIEW_FOLDER_WORKSPACE_ALIAS,
+            },
+        ],
+    },
+    {
+        type: 'workspaceFooterApp',
+        kind: 'menuBreadcrumb',
+        alias: 'Umb.WorkspaceFooterApp.PartialViewFolder.Breadcrumb',
+        name: 'Partial View Folder Breadcrumb Workspace Footer App',
+        conditions: [
+            {
+                alias: UMB_WORKSPACE_CONDITION_ALIAS,
+                match: UMB_PARTIAL_VIEW_FOLDER_WORKSPACE_ALIAS,
             },
         ],
     },

package/dist-cms/packages/templating/scripts/entity-actions/create/manifests.js

@@ -10,7 +10,7 @@ export const manifests = [
         forEntityTypes: [UMB_SCRIPT_ROOT_ENTITY_TYPE, UMB_SCRIPT_FOLDER_ENTITY_TYPE],
         meta: {
             icon: 'icon-add',
-            label: '#actions_create',
+            label: '#actions_createFor',
             additionalOptions: true,
         },
     },

package/dist-cms/packages/templating/scripts/menu/manifests.js

@@ -1,4 +1,6 @@
+import { UMB_SCRIPT_WORKSPACE_ALIAS } from '../workspace/constants.js';
 import { UMB_SCRIPT_TREE_ALIAS } from '../tree/index.js';
+import { UMB_SCRIPT_FOLDER_WORKSPACE_ALIAS } from '../tree/constants.js';
 import { UMB_SCRIPT_MENU_ITEM_ALIAS } from './constants.js';
 import { UMB_WORKSPACE_CONDITION_ALIAS } from '../../../core/workspace/index.js';
 export const manifests = [
@@ -26,7 +28,7 @@ export const manifests = [
         conditions: [
             {
                 alias: UMB_WORKSPACE_CONDITION_ALIAS,
-                match: 'Umb.Workspace.Script',
+                match: UMB_SCRIPT_WORKSPACE_ALIAS,
             },
         ],
     },
@@ -38,7 +40,35 @@ export const manifests = [
         conditions: [
             {
                 alias: UMB_WORKSPACE_CONDITION_ALIAS,
-                match: 'Umb.Workspace.Script',
+                match: UMB_SCRIPT_WORKSPACE_ALIAS,
+            },
+        ],
+    },
+    {
+        type: 'workspaceContext',
+        kind: 'menuStructure',
+        name: 'Script Folder Menu Structure Workspace Context',
+        alias: 'Umb.Context.ScriptFolder.Menu.Structure',
+        api: () => import('./script-menu-structure.context.js'),
+        meta: {
+            menuItemAlias: UMB_SCRIPT_MENU_ITEM_ALIAS,
+        },
+        conditions: [
+            {
+                alias: UMB_WORKSPACE_CONDITION_ALIAS,
+                match: UMB_SCRIPT_FOLDER_WORKSPACE_ALIAS,
+            },
+        ],
+    },
+    {
+        type: 'workspaceFooterApp',
+        kind: 'menuBreadcrumb',
+        alias: 'Umb.WorkspaceFooterApp.ScriptFolder.Breadcrumb',
+        name: 'Script Folder Breadcrumb Workspace Footer App',
+        conditions: [
+            {
+                alias: UMB_WORKSPACE_CONDITION_ALIAS,
+                match: UMB_SCRIPT_FOLDER_WORKSPACE_ALIAS,
             },
         ],
     },

package/dist-cms/packages/templating/stylesheets/menu/manifests.js

@@ -1,4 +1,5 @@
-import { UMB_STYLESHEET_TREE_ALIAS } from '../constants.js';
+import { UMB_STYLESHEET_FOLDER_WORKSPACE_ALIAS, UMB_STYLESHEET_TREE_ALIAS } from '../tree/constants.js';
+import { UMB_STYLESHEET_WORKSPACE_ALIAS } from '../workspace/constants.js';
 import { UMB_STYLESHEET_MENU_ITEM_ALIAS } from './constants.js';
 import { UMB_WORKSPACE_CONDITION_ALIAS } from '../../../core/workspace/index.js';
 export const manifests = [
@@ -26,7 +27,7 @@ export const manifests = [
         conditions: [
             {
                 alias: UMB_WORKSPACE_CONDITION_ALIAS,
-                match: 'Umb.Workspace.Stylesheet',
+                match: UMB_STYLESHEET_WORKSPACE_ALIAS,
             },
         ],
     },
@@ -38,7 +39,35 @@ export const manifests = [
         conditions: [
             {
                 alias: UMB_WORKSPACE_CONDITION_ALIAS,
-                match: 'Umb.Workspace.Stylesheet',
+                match: UMB_STYLESHEET_WORKSPACE_ALIAS,
+            },
+        ],
+    },
+    {
+        type: 'workspaceContext',
+        kind: 'menuStructure',
+        name: 'Stylesheet Folder Menu Structure Workspace Context',
+        alias: 'Umb.Context.StylesheetFolder.Menu.Structure',
+        api: () => import('./stylesheet-menu-structure.context.js'),
+        meta: {
+            menuItemAlias: UMB_STYLESHEET_MENU_ITEM_ALIAS,
+        },
+        conditions: [
+            {
+                alias: UMB_WORKSPACE_CONDITION_ALIAS,
+                match: UMB_STYLESHEET_FOLDER_WORKSPACE_ALIAS,
+            },
+        ],
+    },
+    {
+        type: 'workspaceFooterApp',
+        kind: 'menuBreadcrumb',
+        alias: 'Umb.WorkspaceFooterApp.StylesheetFolder.Breadcrumb',
+        name: 'Stylesheet Folder Breadcrumb Workspace Footer App',
+        conditions: [
+            {
+                alias: UMB_WORKSPACE_CONDITION_ALIAS,
+                match: UMB_STYLESHEET_FOLDER_WORKSPACE_ALIAS,
             },
         ],
     },

package/dist-cms/packages/templating/templates/entity-actions/manifests.js

@@ -12,7 +12,7 @@ export const manifests = [
         forEntityTypes: [UMB_TEMPLATE_ENTITY_TYPE, UMB_TEMPLATE_ROOT_ENTITY_TYPE],
         meta: {
             icon: 'icon-add',
-            label: '#actions_create',
+            label: '#actions_createFor',
             additionalOptions: true,
         },
     },

package/dist-cms/packages/templating/templates/search/template-search.server.data-source.js

@@ -29,7 +29,7 @@ export class UmbTemplateSearchServerDataSource {
         if (data) {
             const mappedItems = data.items.map((item) => {
                 return {
-                    href: '/section/settings/workspace/template/edit/' + item.id,
+                    href: 'section/settings/workspace/template/edit/' + item.id,
                     entityType: UMB_TEMPLATE_ENTITY_TYPE,
                     unique: item.id,
                     name: item.name,

package/dist-cms/packages/templating/templates/workspace/template-workspace.context.js

@@ -110,8 +110,8 @@ ${currentContent}`;
         }
         if (updateLayoutBlock) {
             this.#updateMasterTemplateLayoutBlock();
+            this._data.updateCurrent({ masterTemplate: unique ? { unique } : null });
         }
-        this._data.updateCurrent({ masterTemplate: unique ? { unique } : null });
         return unique;
     }
     #updateMasterTemplateLayoutBlock;

package/dist-cms/packages/tiptap/components/input-tiptap/input-tiptap.element.js

@@ -16,13 +16,14 @@ import '../toolbar/tiptap-toolbar.element.js';
 import '../statusbar/tiptap-statusbar.element.js';
 const TIPTAP_CORE_EXTENSION_ALIAS = 'Umb.Tiptap.RichTextEssentials';
 /**
- * The root path for the stylesheets on the server.
- * This is used to load the stylesheets from the server as a workaround until the server supports virtual paths.
+ * The default root path for the stylesheets on the server.
+ * This is used as a fallback if the server configuration is not available.
  */
-const STYLESHEET_ROOT_PATH = '/css';
+const DEFAULT_STYLESHEET_ROOT_PATH = '/css';
 let UmbInputTiptapElement = class UmbInputTiptapElement extends UmbFormControlMixin(UmbLitElement) {
     #context;
     #stylesheets;
+    #stylesheetRootPath;
     set value(value) {
         if (value === this.#value)
             return;
@@ -40,6 +41,7 @@ let UmbInputTiptapElement = class UmbInputTiptapElement extends UmbFormControlMi
         super();
         this.#context = new UmbTiptapRteContext(this);
         this.#stylesheets = new Set(['/umbraco/backoffice/css/rte-content.css']);
+        this.#stylesheetRootPath = DEFAULT_STYLESHEET_ROOT_PATH;
         this.#value = '';
         /**
          * Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content.
@@ -52,7 +54,9 @@ let UmbInputTiptapElement = class UmbInputTiptapElement extends UmbFormControlMi
         this.addValidator('valueMissing', () => this.requiredMessage ?? 'Value is required', () => !!this.required && this.isEmpty());
     }
     async firstUpdated() {
-        await Promise.all([await this.#loadExtensions(), await this.#loadEditor()]);
+        await this.#loadStylesheetPath();
+        await this.#loadExtensions();
+        await this.#loadEditor();
     }
     /**
      * Checks if the editor is empty.
@@ -61,6 +65,13 @@ let UmbInputTiptapElement = class UmbInputTiptapElement extends UmbFormControlMi
     isEmpty() {
         return this._editor?.isEmpty ?? false;
     }
+    async #loadStylesheetPath() {
+        return this.observe(this.#context.stylesheetRootPath, (stylesheetRootPath) => {
+            if (stylesheetRootPath) {
+                this.#stylesheetRootPath = stylesheetRootPath;
+            }
+        }).asPromise();
+    }
     async #loadExtensions() {
         const enabledExtensions = this.configuration?.getValueByAlias('extensions') ?? [];
         // Ensures that the "Rich Text Essentials" extension is always enabled. [LK]
@@ -91,19 +102,23 @@ let UmbInputTiptapElement = class UmbInputTiptapElement extends UmbFormControlMi
         const stylesheets = this.configuration?.getValueByAlias('stylesheets');
         if (stylesheets?.length) {
             stylesheets.forEach((stylesheet) => {
-                const linkHref = stylesheet.startsWith('http') || stylesheet.startsWith(STYLESHEET_ROOT_PATH)
+                const linkHref = stylesheet.startsWith('http') || stylesheet.startsWith(this.#stylesheetRootPath)
                     ? stylesheet
-                    : `${STYLESHEET_ROOT_PATH}${stylesheet}`;
+                    : `${this.#stylesheetRootPath}${stylesheet}`;
                 this.#stylesheets.add(linkHref);
             });
         }
         this._toolbar = this.configuration?.getValueByAlias('toolbar') ?? [[[]]];
         this._statusbar = this.configuration?.getValueByAlias('statusbar') ?? [];
-        const tiptapExtensions = [];
+        const tiptapExtensions = new Map();
         this._extensions.forEach((ext) => {
             const tiptapExt = ext.getTiptapExtensions({ configuration: this.configuration });
             if (tiptapExt?.length) {
-                tiptapExtensions.push(...tiptapExt);
+                tiptapExt.forEach((extension) => {
+                    if (!tiptapExtensions.has(extension.name)) {
+                        tiptapExtensions.set(extension.name, extension);
+                    }
+                });
             }
             const styles = ext.getStyles();
             if (styles) {
@@ -119,7 +134,7 @@ let UmbInputTiptapElement = class UmbInputTiptapElement extends UmbFormControlMi
                     'aria-required': this.required ? 'true' : 'false',
                 },
             },
-            extensions: tiptapExtensions,
+            extensions: Array.from(tiptapExtensions.values()),
             content: this.#value,
             injectCSS: false, // Prevents injecting CSS into `window.document`, as it never applies to the shadow DOM. [LK]
             //enableContentCheck: true,

package/dist-cms/packages/tiptap/contexts/tiptap-rte.context.d.ts

@@ -3,6 +3,7 @@ import { UmbContextBase } from '../../../libs/class-api/index.js';
 import type { UmbControllerHost } from '../../../libs/controller-api/index.js';
 export declare class UmbTiptapRteContext extends UmbContextBase {
     #private;
+    stylesheetRootPath: import("rxjs").Observable<string | undefined>;
     constructor(host: UmbControllerHost);
     getEditor(): Editor | undefined;
     setEditor(editor?: Editor): void;

package/dist-cms/packages/tiptap/contexts/tiptap-rte.context.js

@@ -1,9 +1,20 @@
 import { UMB_TIPTAP_RTE_CONTEXT } from './tiptap-rte.context-token.js';
 import { UmbContextBase } from '../../../libs/class-api/index.js';
+import { UmbStringState } from '../../../libs/observable-api/index.js';
+import { UMB_SERVER_CONTEXT } from '../../core/server/index.js';
 export class UmbTiptapRteContext extends UmbContextBase {
     #editor;
+    #stylesheetRootPath;
     constructor(host) {
         super(host, UMB_TIPTAP_RTE_CONTEXT);
+        this.#stylesheetRootPath = new UmbStringState(undefined);
+        this.stylesheetRootPath = this.#stylesheetRootPath.asObservable();
+        this.consumeContext(UMB_SERVER_CONTEXT, (serverContext) => {
+            const serverConnection = serverContext?.getServerConnection();
+            this.observe(serverConnection?.umbracoCssPath, (umbracoCssPath) => {
+                this.#stylesheetRootPath.setValue(umbracoCssPath);
+            });
+        });
     }
     getEditor() {
         return this.#editor;