@umbraco-cms/backoffice 15.0.0-rc1 → 15.0.0-rc2

package/dist-cms/packages/tiptap/property-editors/tiptap/contexts/tiptap-toolbar-configuration.context.js

@@ -0,0 +1,185 @@
+import { umbExtensionsRegistry } from '../../../../core/extension-registry/index.js';
+import { UmbArrayState, UmbBooleanState } from '../../../../../libs/observable-api/index.js';
+import { UmbContextBase } from '../../../../../libs/class-api/index.js';
+import { UmbContextToken } from '../../../../../libs/context-api/index.js';
+import { UmbId } from '../../../../core/id/index.js';
+import { UMB_PROPERTY_DATASET_CONTEXT } from '../../../../core/property/index.js';
+export class UmbTiptapToolbarConfigurationContext extends UmbContextBase {
+    #extensions;
+    #reload;
+    #extensionsEnabled;
+    #extensionsInUse;
+    #lookup;
+    #toolbar;
+    constructor(host) {
+        super(host, UMB_TIPTAP_TOOLBAR_CONFIGURATION_CONTEXT);
+        this.#extensions = new UmbArrayState([], (x) => x.alias);
+        this.extensions = this.#extensions.asObservable();
+        this.#reload = new UmbBooleanState(false);
+        this.reload = this.#reload.asObservable();
+        this.#extensionsEnabled = new Set();
+        this.#extensionsInUse = new Set();
+        this.#toolbar = new UmbArrayState([], (x) => x.unique);
+        this.toolbar = this.#toolbar.asObservable();
+        this.observe(umbExtensionsRegistry.byType('tiptapToolbarExtension'), (extensions) => {
+            const _extensions = extensions.map((ext) => ({
+                alias: ext.alias,
+                label: ext.meta.label,
+                icon: ext.meta.icon,
+                dependencies: ext.forExtensions,
+            }));
+            this.#extensions.setValue(_extensions);
+            this.#lookup = new Map(_extensions.map((ext) => [ext.alias, ext]));
+        });
+        this.consumeContext(UMB_PROPERTY_DATASET_CONTEXT, async (dataset) => {
+            this.observe(await dataset.propertyValueByAlias('extensions'), (extensions) => {
+                if (extensions) {
+                    this.#extensionsEnabled.clear();
+                    this.#reload.setValue(false);
+                    this.#extensions
+                        .getValue()
+                        .filter((x) => !x.dependencies || x.dependencies.every((z) => extensions.includes(z)))
+                        .map((x) => x.alias)
+                        .forEach((alias) => this.#extensionsEnabled.add(alias));
+                    this.#reload.setValue(true);
+                }
+            }, '_observeExtensions');
+        });
+    }
+    filterExtensions(query) {
+        return this.#extensions
+            .getValue()
+            .filter((ext) => ext.alias?.toLowerCase().includes(query) || ext.label?.toLowerCase().includes(query));
+    }
+    getExtensionByAlias(alias) {
+        return this.#lookup?.get(alias);
+    }
+    isExtensionEnabled(alias) {
+        return this.#extensionsEnabled.has(alias);
+    }
+    isExtensionInUse(alias) {
+        return this.#extensionsInUse.has(alias);
+    }
+    isValidToolbarValue(value) {
+        if (!Array.isArray(value))
+            return false;
+        for (const row of value) {
+            if (!Array.isArray(row))
+                return false;
+            for (const group of row) {
+                if (!Array.isArray(group))
+                    return false;
+                for (const alias of group) {
+                    if (typeof alias !== 'string')
+                        return false;
+                }
+            }
+        }
+        return true;
+    }
+    insertToolbarItem(alias, to) {
+        const toolbar = [...this.#toolbar.getValue()];
+        const [rowIndex, groupIndex, itemIndex] = to;
+        const row = toolbar[rowIndex];
+        const rowData = [...row.data];
+        const group = rowData[groupIndex];
+        const items = [...group.data];
+        items.splice(itemIndex, 0, alias);
+        this.#extensionsInUse.add(alias);
+        rowData[groupIndex] = { unique: group.unique, data: items };
+        toolbar[rowIndex] = { unique: row.unique, data: rowData };
+        this.#toolbar.setValue(toolbar);
+    }
+    insertToolbarGroup(rowIndex, groupIndex) {
+        const toolbar = [...this.#toolbar.getValue()];
+        const row = toolbar[rowIndex];
+        const groups = [...row.data];
+        groups.splice(groupIndex, 0, { unique: UmbId.new(), data: [] });
+        toolbar[rowIndex] = { unique: row.unique, data: groups };
+        this.#toolbar.setValue(toolbar);
+    }
+    insertToolbarRow(rowIndex) {
+        const toolbar = [...this.#toolbar.getValue()];
+        toolbar.splice(rowIndex, 0, { unique: UmbId.new(), data: [{ unique: UmbId.new(), data: [] }] });
+        this.#toolbar.setValue(toolbar);
+    }
+    moveToolbarItem(from, to) {
+        const [fromRowIndex, fromGroupIndex, fromItemIndex] = from;
+        const [toRowIndex, toGroupIndex, toItemIndex] = to;
+        const toolbar = [...this.#toolbar.getValue()];
+        const fromRow = toolbar[fromRowIndex];
+        const fromRowData = [...fromRow.data];
+        const fromGroup = fromRowData[fromGroupIndex];
+        const fromItems = [...fromGroup.data];
+        const toBeMoved = fromItems.splice(fromItemIndex, 1);
+        fromRowData[fromGroupIndex] = { unique: fromGroup.unique, data: fromItems };
+        toolbar[fromRowIndex] = { unique: fromRow.unique, data: fromRowData };
+        const toRow = toolbar[toRowIndex];
+        const toRowData = [...toRow.data];
+        const toGroup = toRowData[toGroupIndex];
+        const toItems = [...toGroup.data];
+        toItems.splice(toItemIndex, 0, toBeMoved[0]);
+        toRowData[toGroupIndex] = { unique: toGroup.unique, data: toItems };
+        toolbar[toRowIndex] = { unique: toRow.unique, data: toRowData };
+        this.#toolbar.setValue(toolbar);
+    }
+    removeToolbarItem(from) {
+        const [rowIndex, groupIndex, itemIndex] = from;
+        const toolbar = [...this.#toolbar.getValue()];
+        const row = toolbar[rowIndex];
+        const rowData = [...row.data];
+        const group = rowData[groupIndex];
+        const items = [...group.data];
+        const removed = items.splice(itemIndex, 1);
+        removed.forEach((alias) => this.#extensionsInUse.delete(alias));
+        rowData[groupIndex] = { unique: group.unique, data: items };
+        toolbar[rowIndex] = { unique: row.unique, data: rowData };
+        this.#toolbar.setValue(toolbar);
+    }
+    removeToolbarGroup(rowIndex, groupIndex) {
+        const toolbar = [...this.#toolbar.getValue()];
+        if (toolbar[rowIndex].data.length > groupIndex) {
+            const row = toolbar[rowIndex];
+            const groups = [...row.data];
+            const removed = groups.splice(groupIndex, 1);
+            removed.forEach((group) => group.data.forEach((alias) => this.#extensionsInUse.delete(alias)));
+            toolbar[rowIndex] = { unique: row.unique, data: groups };
+        }
+        // Prevent leaving an empty group
+        if (toolbar[rowIndex].data.length === 0) {
+            toolbar[rowIndex].data[0] = { unique: UmbId.new(), data: [] };
+        }
+        this.#toolbar.setValue(toolbar);
+    }
+    removeToolbarRow(rowIndex) {
+        const toolbar = [...this.#toolbar.getValue()];
+        if (toolbar.length > rowIndex) {
+            const removed = toolbar.splice(rowIndex, 1);
+            removed.forEach((row) => row.data.forEach((group) => group.data.forEach((alias) => this.#extensionsInUse.delete(alias))));
+        }
+        // Prevent leaving an empty row
+        if (toolbar.length === 0) {
+            toolbar[0] = { unique: UmbId.new(), data: [{ unique: UmbId.new(), data: [] }] };
+        }
+        this.#toolbar.setValue(toolbar);
+    }
+    setToolbar(value) {
+        if (!this.isValidToolbarValue(value)) {
+            value = [[[]]];
+        }
+        this.#extensionsInUse.clear();
+        value.forEach((row) => row.forEach((group) => group.forEach((alias) => this.#extensionsInUse.add(alias))));
+        const toolbar = value.map((row) => ({
+            unique: UmbId.new(),
+            data: row.map((group) => ({ unique: UmbId.new(), data: group })),
+        }));
+        this.#toolbar.setValue(toolbar);
+    }
+    updateToolbarRow(rowIndex, groups) {
+        const toolbar = [...this.#toolbar.getValue()];
+        const row = toolbar[rowIndex];
+        toolbar[rowIndex] = { unique: row.unique, data: groups };
+        this.#toolbar.setValue(toolbar);
+    }
+}
+export const UMB_TIPTAP_TOOLBAR_CONFIGURATION_CONTEXT = new UmbContextToken('UmbTiptapToolbarConfigurationContext');

package/dist-cms/packages/tiptap/property-editors/tiptap/manifests.js

@@ -11,20 +11,24 @@ export const manifests = [
             group: 'richContent',
             settings: {
                 properties: [
-                    {
-                        alias: 'toolbar',
-                        label: 'Toolbar',
-                        description: 'Pick the toolbar items that should be available when editing',
-                        propertyEditorUiAlias: 'Umb.PropertyEditorUi.Tiptap.ToolbarConfiguration',
-                        weight: 5,
-                    },
                     {
                         alias: 'extensions',
-                        label: 'Extensions',
-                        description: 'Extensions to enable',
+                        label: 'Capabilities',
+                        description: `Enable extensions enhance the capabilities of the Tiptap editor.
+
+_Once enabled, the extensions will be available in the toolbar._`,
                         propertyEditorUiAlias: 'Umb.PropertyEditorUi.Tiptap.ExtensionsConfiguration',
                         weight: 10,
                     },
+                    {
+                        alias: 'toolbar',
+                        label: 'Toolbar',
+                        description: `Configure the toolbar for the intended editing experience.
+
+_Drag and drop the available items onto the toolbar designer._`,
+                        propertyEditorUiAlias: 'Umb.PropertyEditorUi.Tiptap.ToolbarConfiguration',
+                        weight: 15,
+                    },
                     {
                         alias: 'dimensions',
                         label: 'Dimensions',

package/dist-cms/packages/tiptap/property-editors/tiptap/types.d.ts

@@ -0,0 +1,12 @@
+export type UmbTiptapToolbarExtension = {
+    alias: string;
+    label: string;
+    icon: string;
+    dependencies?: Array<string>;
+};
+export type UmbTiptapToolbarSortableViewModel<T> = {
+    unique: string;
+    data: T;
+};
+export type UmbTiptapToolbarRowViewModel = UmbTiptapToolbarSortableViewModel<Array<UmbTiptapToolbarGroupViewModel>>;
+export type UmbTiptapToolbarGroupViewModel = UmbTiptapToolbarSortableViewModel<Array<string>>;

package/dist-cms/packages/tiptap/property-editors/tiptap/types.js

@@ -0,0 +1 @@
+export {};

package/dist-cms/packages/user/current-user/current-user-action.extension.d.ts

@@ -17,7 +17,7 @@ export interface UmbCurrentUserAction<ArgsMetaType = never> extends UmbAction<Um
      */
     execute(): Promise<void>;
 }
-export interface ManifestCurrentUserAction<MetaType extends MetaCurrentUserAction = MetaCurrentUserAction> extends ManifestElementAndApi<UmbControllerHostElement, UmbCurrentUserAction<MetaType>>, ManifestWithDynamicConditions<UmbExtensionCondition> {
+export interface ManifestCurrentUserAction<MetaType extends MetaCurrentUserAction = MetaCurrentUserAction> extends ManifestElementAndApi<UmbControllerHostElement, UmbCurrentUserAction<MetaType>>, ManifestWithDynamicConditions<UmbExtensionConditionConfig> {
     type: 'currentUserAction';
     meta: MetaType;
 }