From 4af3935d45c5cd053c921fb434995951f1364f04 Mon Sep 17 00:00:00 2001 From: Rick Butterfield Date: Wed, 19 Jun 2024 15:42:07 +0100 Subject: [PATCH 1/7] Add correct block type label to block workspace editor --- .../block/context/block-manager.context.ts | 462 +++++++++--------- .../block-workspace-editor.element.ts | 35 +- .../workspace/block-workspace.context.ts | 35 +- 3 files changed, 277 insertions(+), 255 deletions(-) diff --git a/src/packages/block/block/context/block-manager.context.ts b/src/packages/block/block/context/block-manager.context.ts index ac57bd8a24..deb6391c74 100644 --- a/src/packages/block/block/context/block-manager.context.ts +++ b/src/packages/block/block/context/block-manager.context.ts @@ -13,241 +13,241 @@ import { UMB_PROPERTY_CONTEXT } from '@umbraco-cms/backoffice/property'; import type { UmbVariantId } from '@umbraco-cms/backoffice/variant'; function buildUdi(entityType: string, guid: string) { - return `umb://${entityType}/${guid.replace(/-/g, '')}`; + return `umb://${entityType}/${guid.replace(/-/g, '')}`; } export type UmbBlockDataObjectModel = { - layout: LayoutEntryType; - content: UmbBlockDataType; - settings?: UmbBlockDataType; + layout: LayoutEntryType; + content: UmbBlockDataType; + settings?: UmbBlockDataType; }; export abstract class UmbBlockManagerContext< - BlockType extends UmbBlockTypeBaseModel = UmbBlockTypeBaseModel, - BlockLayoutType extends UmbBlockLayoutBaseModel = UmbBlockLayoutBaseModel, + BlockType extends UmbBlockTypeBaseModel = UmbBlockTypeBaseModel, + BlockLayoutType extends UmbBlockLayoutBaseModel = UmbBlockLayoutBaseModel, > extends UmbContextBase { - // - get contentTypesLoaded() { - return Promise.all(this.#contentTypeRequests); - } - #contentTypeRequests: Array> = []; - #contentTypeRepository = new UmbDocumentTypeDetailRepository(this); - - #propertyAlias = new UmbStringState(undefined); - propertyAlias = this.#propertyAlias.asObservable(); - - #variantId = new UmbClassState(undefined); - variantId = this.#variantId.asObservable(); - - #contentTypes = new UmbArrayState(>[], (x) => x.unique); - public readonly contentTypes = this.#contentTypes.asObservable(); - - #blockTypes = new UmbArrayState(>[], (x) => x.contentElementTypeKey); - public readonly blockTypes = this.#blockTypes.asObservable(); - - protected _editorConfiguration = new UmbClassState(undefined); - public readonly editorConfiguration = this._editorConfiguration.asObservable(); - - protected _layouts = new UmbArrayState(>[], (x) => x.contentUdi); - public readonly layouts = this._layouts.asObservable(); - - #contents = new UmbArrayState(>[], (x) => x.udi); - public readonly contents = this.#contents.asObservable(); - - #settings = new UmbArrayState(>[], (x) => x.udi); - public readonly settings = this.#settings.asObservable(); - - // TODO: maybe its bad to consume Property Context, and instead wire this up manually in the property editor? With these: (and one for variant-id..) - /*setPropertyAlias(alias: string) { - this.#propertyAlias.setValue(alias); - this.#workspaceModal.setUniquePathValue('propertyAlias', alias); - } - getPropertyAlias() { - this.#propertyAlias.value; - }*/ - - setEditorConfiguration(configs: UmbPropertyEditorConfigCollection) { - this._editorConfiguration.setValue(configs); - } - getEditorConfiguration(): UmbPropertyEditorConfigCollection | undefined { - return this._editorConfiguration.getValue(); - } - - setBlockTypes(blockTypes: Array) { - this.#blockTypes.setValue(blockTypes); - } - getBlockTypes() { - return this.#blockTypes.value; - } - - setLayouts(layouts: Array) { - this._layouts.setValue(layouts); - } - setContents(contents: Array) { - this.#contents.setValue(contents); - } - setSettings(settings: Array) { - this.#settings.setValue(settings); - } - - constructor(host: UmbControllerHost) { - super(host, UMB_BLOCK_MANAGER_CONTEXT); - - this.consumeContext(UMB_PROPERTY_CONTEXT, (propertyContext) => { - this.observe( - propertyContext?.alias, - (alias) => { - this.#propertyAlias.setValue(alias); - }, - 'observePropertyAlias', - ); - this.observe( - propertyContext?.variantId, - (variantId) => { - this.#variantId.setValue(variantId); - }, - 'observePropertyVariantId', - ); - }); - - this.observe(this.blockTypes, (blockTypes) => { - blockTypes.forEach((x) => { - this.#ensureContentType(x.contentElementTypeKey); - if (x.settingsElementTypeKey) { - this.#ensureContentType(x.settingsElementTypeKey); - } - }); - }); - } - - async #ensureContentType(unique: string) { - if (this.#contentTypes.getValue().find((x) => x.unique === unique)) return; - - const contentTypeRequest = this.#contentTypeRepository.requestByUnique(unique); - this.#contentTypeRequests.push(contentTypeRequest); - const { data } = await contentTypeRequest; - if (!data) { - this.#contentTypes.removeOne(unique); - return; - } - - // We could have used the global store of Document Types, but to ensure we first react ones the latest is loaded then we have our own local store: - // TODO: Revisit if this is right to do. Notice this can potentially be proxied to the global store. In that way we do not need to observe and we can just use the global store for data. - this.#contentTypes.appendOne(data); - } - - contentTypeOf(contentTypeKey: string) { - return this.#contentTypes.asObservablePart((source) => source.find((x) => x.unique === contentTypeKey)); - } - contentTypeNameOf(contentTypeKey: string) { - return this.#contentTypes.asObservablePart((source) => source.find((x) => x.unique === contentTypeKey)?.name); - } - getContentTypeNameOf(contentTypeKey: string) { - return this.#contentTypes.getValue().find((x) => x.unique === contentTypeKey)?.name; - } - blockTypeOf(contentTypeKey: string) { - return this.#blockTypes.asObservablePart((source) => - source.find((x) => x.contentElementTypeKey === contentTypeKey), - ); - } - - layoutOf(contentUdi: string) { - return this._layouts.asObservablePart((source) => source.find((x) => x.contentUdi === contentUdi)); - } - contentOf(udi: string) { - return this.#contents.asObservablePart((source) => source.find((x) => x.udi === udi)); - } - settingsOf(udi: string) { - return this.#settings.asObservablePart((source) => source.find((x) => x.udi === udi)); - } - - getBlockTypeOf(contentTypeKey: string) { - return this.#blockTypes.value.find((x) => x.contentElementTypeKey === contentTypeKey); - } - getContentOf(contentUdi: string) { - return this.#contents.value.find((x) => x.udi === contentUdi); - } - - setOneLayout(layoutData: BlockLayoutType, modalData?: UmbBlockWorkspaceData) { - this._layouts.appendOne(layoutData); - } - setOneContent(contentData: UmbBlockDataType) { - this.#contents.appendOne(contentData); - } - setOneSettings(settingsData: UmbBlockDataType) { - this.#settings.appendOne(settingsData); - } - - removeOneContent(contentUdi: string) { - this.#contents.removeOne(contentUdi); - } - removeOneSettings(settingsUdi: string) { - this.#settings.removeOne(settingsUdi); - } - - abstract create( - contentElementTypeKey: string, - partialLayoutEntry?: Omit, - modalData?: UmbBlockWorkspaceData, - ): UmbBlockDataObjectModel | undefined; - - protected createBlockData(contentElementTypeKey: string, partialLayoutEntry?: Omit) { - // Find block type. - const blockType = this.#blockTypes.value.find((x) => x.contentElementTypeKey === contentElementTypeKey); - if (!blockType) { - throw new Error(`Cannot create block, missing block type for ${contentElementTypeKey}`); - } - - // Create layout entry: - const layout: BlockLayoutType = { - contentUdi: buildUdi('element', UmbId.new()), - ...(partialLayoutEntry as Partial), - } as BlockLayoutType; - - const content = { - udi: layout.contentUdi, - contentTypeKey: contentElementTypeKey, - }; - let settings: UmbBlockDataType | undefined = undefined; - - if (blockType.settingsElementTypeKey) { - layout.settingsUdi = buildUdi('element', UmbId.new()); - settings = { - udi: layout.settingsUdi, - contentTypeKey: blockType.settingsElementTypeKey, - }; - } - - return { - layout, - content, - settings, - }; - } - - abstract insert( - layoutEntry: BlockLayoutType, - content: UmbBlockDataType, - settings: UmbBlockDataType | undefined, - modalData: UmbBlockWorkspaceData, - ): boolean; - - protected insertBlockData( - layoutEntry: BlockLayoutType, - content: UmbBlockDataType, - settings: UmbBlockDataType | undefined, - modalData: ModalDataType, - ) { - // Create content entry: - if (layoutEntry.contentUdi) { - this.#contents.appendOne(content); - } else { - throw new Error('Cannot create block, missing contentUdi'); - return false; - } - - //Create settings entry: - if (settings && layoutEntry.settingsUdi) { - this.#settings.appendOne(settings); - } - } + // + get contentTypesLoaded() { + return Promise.all(this.#contentTypeRequests); + } + #contentTypeRequests: Array> = []; + #contentTypeRepository = new UmbDocumentTypeDetailRepository(this); + + #propertyAlias = new UmbStringState(undefined); + propertyAlias = this.#propertyAlias.asObservable(); + + #variantId = new UmbClassState(undefined); + variantId = this.#variantId.asObservable(); + + #contentTypes = new UmbArrayState(>[], (x) => x.unique); + public readonly contentTypes = this.#contentTypes.asObservable(); + + #blockTypes = new UmbArrayState(>[], (x) => x.contentElementTypeKey); + public readonly blockTypes = this.#blockTypes.asObservable(); + + protected _editorConfiguration = new UmbClassState(undefined); + public readonly editorConfiguration = this._editorConfiguration.asObservable(); + + protected _layouts = new UmbArrayState(>[], (x) => x.contentUdi); + public readonly layouts = this._layouts.asObservable(); + + #contents = new UmbArrayState(>[], (x) => x.udi); + public readonly contents = this.#contents.asObservable(); + + #settings = new UmbArrayState(>[], (x) => x.udi); + public readonly settings = this.#settings.asObservable(); + + // TODO: maybe its bad to consume Property Context, and instead wire this up manually in the property editor? With these: (and one for variant-id..) + /*setPropertyAlias(alias: string) { + this.#propertyAlias.setValue(alias); + this.#workspaceModal.setUniquePathValue('propertyAlias', alias); + } + getPropertyAlias() { + this.#propertyAlias.value; + }*/ + + setEditorConfiguration(configs: UmbPropertyEditorConfigCollection) { + this._editorConfiguration.setValue(configs); + } + getEditorConfiguration(): UmbPropertyEditorConfigCollection | undefined { + return this._editorConfiguration.getValue(); + } + + setBlockTypes(blockTypes: Array) { + this.#blockTypes.setValue(blockTypes); + } + getBlockTypes() { + return this.#blockTypes.value; + } + + setLayouts(layouts: Array) { + this._layouts.setValue(layouts); + } + setContents(contents: Array) { + this.#contents.setValue(contents); + } + setSettings(settings: Array) { + this.#settings.setValue(settings); + } + + constructor(host: UmbControllerHost) { + super(host, UMB_BLOCK_MANAGER_CONTEXT); + + this.consumeContext(UMB_PROPERTY_CONTEXT, (propertyContext) => { + this.observe( + propertyContext?.alias, + (alias) => { + this.#propertyAlias.setValue(alias); + }, + 'observePropertyAlias', + ); + this.observe( + propertyContext?.variantId, + (variantId) => { + this.#variantId.setValue(variantId); + }, + 'observePropertyVariantId', + ); + }); + + this.observe(this.blockTypes, (blockTypes) => { + blockTypes.forEach((x) => { + this.#ensureContentType(x.contentElementTypeKey); + if (x.settingsElementTypeKey) { + this.#ensureContentType(x.settingsElementTypeKey); + } + }); + }); + } + + async #ensureContentType(unique: string) { + if (this.#contentTypes.getValue().find((x) => x.unique === unique)) return; + + const contentTypeRequest = this.#contentTypeRepository.requestByUnique(unique); + this.#contentTypeRequests.push(contentTypeRequest); + const { data } = await contentTypeRequest; + if (!data) { + this.#contentTypes.removeOne(unique); + return; + } + + // We could have used the global store of Document Types, but to ensure we first react ones the latest is loaded then we have our own local store: + // TODO: Revisit if this is right to do. Notice this can potentially be proxied to the global store. In that way we do not need to observe and we can just use the global store for data. + this.#contentTypes.appendOne(data); + } + + contentTypeOf(contentTypeKey: string) { + return this.#contentTypes.asObservablePart((source) => source.find((x) => x.unique === contentTypeKey)); + } + contentTypeNameOf(contentTypeKey: string) { + return this.#contentTypes.asObservablePart((source) => source.find((x) => x.unique === contentTypeKey)?.name); + } + getContentTypeNameOf(contentTypeKey: string) { + return this.#contentTypes.getValue().find((x) => x.unique === contentTypeKey)?.name; + } + blockTypeOf(contentTypeKey: string) { + return this.#blockTypes.asObservablePart((source) => + source.find((x) => x.contentElementTypeKey === contentTypeKey), + ); + } + + layoutOf(contentUdi: string) { + return this._layouts.asObservablePart((source) => source.find((x) => x.contentUdi === contentUdi)); + } + contentOf(udi: string) { + return this.#contents.asObservablePart((source) => source.find((x) => x.udi === udi)); + } + settingsOf(udi: string) { + return this.#settings.asObservablePart((source) => source.find((x) => x.udi === udi)); + } + + getBlockTypeOf(contentTypeKey: string) { + return this.#blockTypes.value.find((x) => x.contentElementTypeKey === contentTypeKey); + } + getContentOf(contentUdi: string) { + return this.#contents.value.find((x) => x.udi === contentUdi); + } + + setOneLayout(layoutData: BlockLayoutType, modalData?: UmbBlockWorkspaceData) { + this._layouts.appendOne(layoutData); + } + setOneContent(contentData: UmbBlockDataType) { + this.#contents.appendOne(contentData); + } + setOneSettings(settingsData: UmbBlockDataType) { + this.#settings.appendOne(settingsData); + } + + removeOneContent(contentUdi: string) { + this.#contents.removeOne(contentUdi); + } + removeOneSettings(settingsUdi: string) { + this.#settings.removeOne(settingsUdi); + } + + abstract create( + contentElementTypeKey: string, + partialLayoutEntry?: Omit, + modalData?: UmbBlockWorkspaceData, + ): UmbBlockDataObjectModel | undefined; + + protected createBlockData(contentElementTypeKey: string, partialLayoutEntry?: Omit) { + // Find block type. + const blockType = this.#blockTypes.value.find((x) => x.contentElementTypeKey === contentElementTypeKey); + if (!blockType) { + throw new Error(`Cannot create block, missing block type for ${contentElementTypeKey}`); + } + + // Create layout entry: + const layout: BlockLayoutType = { + contentUdi: buildUdi('element', UmbId.new()), + ...(partialLayoutEntry as Partial), + } as BlockLayoutType; + + const content = { + udi: layout.contentUdi, + contentTypeKey: contentElementTypeKey, + }; + let settings: UmbBlockDataType | undefined = undefined; + + if (blockType.settingsElementTypeKey) { + layout.settingsUdi = buildUdi('element', UmbId.new()); + settings = { + udi: layout.settingsUdi, + contentTypeKey: blockType.settingsElementTypeKey, + }; + } + + return { + layout, + content, + settings, + }; + } + + abstract insert( + layoutEntry: BlockLayoutType, + content: UmbBlockDataType, + settings: UmbBlockDataType | undefined, + modalData: UmbBlockWorkspaceData, + ): boolean; + + protected insertBlockData( + layoutEntry: BlockLayoutType, + content: UmbBlockDataType, + settings: UmbBlockDataType | undefined, + modalData: ModalDataType, + ) { + // Create content entry: + if (layoutEntry.contentUdi) { + this.#contents.appendOne(content); + } else { + throw new Error('Cannot create block, missing contentUdi'); + return false; + } + + //Create settings entry: + if (settings && layoutEntry.settingsUdi) { + this.#settings.appendOne(settings); + } + } } diff --git a/src/packages/block/block/workspace/block-workspace-editor.element.ts b/src/packages/block/block/workspace/block-workspace-editor.element.ts index 1049dc8d24..002ad85de8 100644 --- a/src/packages/block/block/workspace/block-workspace-editor.element.ts +++ b/src/packages/block/block/workspace/block-workspace-editor.element.ts @@ -1,35 +1,38 @@ import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; -import { customElement, css, html, property } from '@umbraco-cms/backoffice/external/lit'; +import { customElement, css, html, property, ifDefined } from '@umbraco-cms/backoffice/external/lit'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; @customElement('umb-block-workspace-editor') export class UmbBlockWorkspaceEditorElement extends UmbLitElement { - // - @property({ type: String, attribute: false }) - workspaceAlias?: string; - render() { - return this.workspaceAlias - ? html` ` - : ''; - } + @property({ type: String, attribute: false }) + workspaceAlias?: string; - static styles = [ - UmbTextStyles, - css` + @property({ type: String, attribute: false }) + label?: string; + + render() { + return this.workspaceAlias + ? html` ` + : ''; + } + + static styles = [ + UmbTextStyles, + css` :host { display: block; width: 100%; height: 100%; } `, - ]; + ]; } export default UmbBlockWorkspaceEditorElement; declare global { - interface HTMLElementTagNameMap { - 'umb-block-workspace-editor': UmbBlockWorkspaceEditorElement; - } + interface HTMLElementTagNameMap { + 'umb-block-workspace-editor': UmbBlockWorkspaceEditorElement; + } } diff --git a/src/packages/block/block/workspace/block-workspace.context.ts b/src/packages/block/block/workspace/block-workspace.context.ts index 867bfb06d2..85f984e046 100644 --- a/src/packages/block/block/workspace/block-workspace.context.ts +++ b/src/packages/block/block/workspace/block-workspace.context.ts @@ -94,25 +94,30 @@ export class UmbBlockWorkspaceContext { - (component as UmbBlockWorkspaceEditorElement).workspaceAlias = manifest.alias; - const elementTypeKey = info.match.params.elementTypeKey; - this.create(elementTypeKey); + await this.create(elementTypeKey); new UmbWorkspaceIsNewRedirectController( this, this, this.getHostElement().shadowRoot!.querySelector('umb-router-slot')!, ); + + (component as UmbBlockWorkspaceEditorElement).workspaceAlias = manifest.alias; + const name = this.getName(); + (component as UmbBlockWorkspaceEditorElement).label = name; }, }, { path: 'edit/:udi', component: UmbBlockWorkspaceEditorElement, - setup: (component, info) => { - (component as UmbBlockWorkspaceEditorElement).workspaceAlias = manifest.alias; + setup: async (component, info) => { const udi = decodeFilePath(info.match.params.udi); - this.load(udi); + await this.load(udi); + + (component as UmbBlockWorkspaceEditorElement).workspaceAlias = manifest.alias; + const name = this.getName(); + (component as UmbBlockWorkspaceEditorElement).label = name; }, }, ]); @@ -147,7 +152,13 @@ export class UmbBlockWorkspaceContext { - this.content.setData(contentData); + if (contentData) { + this.content.setData(contentData); + const blockType = this.#blockManager!.getBlockTypeOf(contentData.contentTypeKey); + if (blockType?.label) { + this.setName(blockType.label); + } + } }, 'observeContent', ); @@ -218,6 +229,11 @@ export class UmbBlockWorkspaceContext Date: Wed, 19 Jun 2024 15:49:26 +0100 Subject: [PATCH 2/7] Remove `ifDefined` for clearer code --- .../block/block/workspace/block-workspace-editor.element.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/packages/block/block/workspace/block-workspace-editor.element.ts b/src/packages/block/block/workspace/block-workspace-editor.element.ts index 002ad85de8..d4bf1b0b96 100644 --- a/src/packages/block/block/workspace/block-workspace-editor.element.ts +++ b/src/packages/block/block/workspace/block-workspace-editor.element.ts @@ -1,5 +1,5 @@ import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; -import { customElement, css, html, property, ifDefined } from '@umbraco-cms/backoffice/external/lit'; +import { customElement, css, html, property } from '@umbraco-cms/backoffice/external/lit'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; @customElement('umb-block-workspace-editor') @@ -12,8 +12,8 @@ export class UmbBlockWorkspaceEditorElement extends UmbLitElement { label?: string; render() { - return this.workspaceAlias - ? html` ` + return this.workspaceAlias && this.label + ? html` ` : ''; } From 50470ac8178c16c1b7504f838bf918ea809c27d4 Mon Sep 17 00:00:00 2001 From: Rick Butterfield Date: Wed, 19 Jun 2024 16:24:17 +0100 Subject: [PATCH 3/7] Changes spaces back to tabs --- .../block/context/block-manager.context.ts | 462 +++++++++--------- 1 file changed, 231 insertions(+), 231 deletions(-) diff --git a/src/packages/block/block/context/block-manager.context.ts b/src/packages/block/block/context/block-manager.context.ts index deb6391c74..8f95c8b7b6 100644 --- a/src/packages/block/block/context/block-manager.context.ts +++ b/src/packages/block/block/context/block-manager.context.ts @@ -13,241 +13,241 @@ import { UMB_PROPERTY_CONTEXT } from '@umbraco-cms/backoffice/property'; import type { UmbVariantId } from '@umbraco-cms/backoffice/variant'; function buildUdi(entityType: string, guid: string) { - return `umb://${entityType}/${guid.replace(/-/g, '')}`; + return `umb://${entityType}/${guid.replace(/-/g, '')}`; } export type UmbBlockDataObjectModel = { - layout: LayoutEntryType; - content: UmbBlockDataType; - settings?: UmbBlockDataType; + layout: LayoutEntryType; + content: UmbBlockDataType; + settings?: UmbBlockDataType; }; export abstract class UmbBlockManagerContext< - BlockType extends UmbBlockTypeBaseModel = UmbBlockTypeBaseModel, - BlockLayoutType extends UmbBlockLayoutBaseModel = UmbBlockLayoutBaseModel, + BlockType extends UmbBlockTypeBaseModel = UmbBlockTypeBaseModel, + BlockLayoutType extends UmbBlockLayoutBaseModel = UmbBlockLayoutBaseModel, > extends UmbContextBase { - // - get contentTypesLoaded() { - return Promise.all(this.#contentTypeRequests); - } - #contentTypeRequests: Array> = []; - #contentTypeRepository = new UmbDocumentTypeDetailRepository(this); - - #propertyAlias = new UmbStringState(undefined); - propertyAlias = this.#propertyAlias.asObservable(); - - #variantId = new UmbClassState(undefined); - variantId = this.#variantId.asObservable(); - - #contentTypes = new UmbArrayState(>[], (x) => x.unique); - public readonly contentTypes = this.#contentTypes.asObservable(); - - #blockTypes = new UmbArrayState(>[], (x) => x.contentElementTypeKey); - public readonly blockTypes = this.#blockTypes.asObservable(); - - protected _editorConfiguration = new UmbClassState(undefined); - public readonly editorConfiguration = this._editorConfiguration.asObservable(); - - protected _layouts = new UmbArrayState(>[], (x) => x.contentUdi); - public readonly layouts = this._layouts.asObservable(); - - #contents = new UmbArrayState(>[], (x) => x.udi); - public readonly contents = this.#contents.asObservable(); - - #settings = new UmbArrayState(>[], (x) => x.udi); - public readonly settings = this.#settings.asObservable(); - - // TODO: maybe its bad to consume Property Context, and instead wire this up manually in the property editor? With these: (and one for variant-id..) - /*setPropertyAlias(alias: string) { - this.#propertyAlias.setValue(alias); - this.#workspaceModal.setUniquePathValue('propertyAlias', alias); - } - getPropertyAlias() { - this.#propertyAlias.value; - }*/ - - setEditorConfiguration(configs: UmbPropertyEditorConfigCollection) { - this._editorConfiguration.setValue(configs); - } - getEditorConfiguration(): UmbPropertyEditorConfigCollection | undefined { - return this._editorConfiguration.getValue(); - } - - setBlockTypes(blockTypes: Array) { - this.#blockTypes.setValue(blockTypes); - } - getBlockTypes() { - return this.#blockTypes.value; - } - - setLayouts(layouts: Array) { - this._layouts.setValue(layouts); - } - setContents(contents: Array) { - this.#contents.setValue(contents); - } - setSettings(settings: Array) { - this.#settings.setValue(settings); - } - - constructor(host: UmbControllerHost) { - super(host, UMB_BLOCK_MANAGER_CONTEXT); - - this.consumeContext(UMB_PROPERTY_CONTEXT, (propertyContext) => { - this.observe( - propertyContext?.alias, - (alias) => { - this.#propertyAlias.setValue(alias); - }, - 'observePropertyAlias', - ); - this.observe( - propertyContext?.variantId, - (variantId) => { - this.#variantId.setValue(variantId); - }, - 'observePropertyVariantId', - ); - }); - - this.observe(this.blockTypes, (blockTypes) => { - blockTypes.forEach((x) => { - this.#ensureContentType(x.contentElementTypeKey); - if (x.settingsElementTypeKey) { - this.#ensureContentType(x.settingsElementTypeKey); - } - }); - }); - } - - async #ensureContentType(unique: string) { - if (this.#contentTypes.getValue().find((x) => x.unique === unique)) return; - - const contentTypeRequest = this.#contentTypeRepository.requestByUnique(unique); - this.#contentTypeRequests.push(contentTypeRequest); - const { data } = await contentTypeRequest; - if (!data) { - this.#contentTypes.removeOne(unique); - return; - } - - // We could have used the global store of Document Types, but to ensure we first react ones the latest is loaded then we have our own local store: - // TODO: Revisit if this is right to do. Notice this can potentially be proxied to the global store. In that way we do not need to observe and we can just use the global store for data. - this.#contentTypes.appendOne(data); - } - - contentTypeOf(contentTypeKey: string) { - return this.#contentTypes.asObservablePart((source) => source.find((x) => x.unique === contentTypeKey)); - } - contentTypeNameOf(contentTypeKey: string) { - return this.#contentTypes.asObservablePart((source) => source.find((x) => x.unique === contentTypeKey)?.name); - } - getContentTypeNameOf(contentTypeKey: string) { - return this.#contentTypes.getValue().find((x) => x.unique === contentTypeKey)?.name; - } - blockTypeOf(contentTypeKey: string) { - return this.#blockTypes.asObservablePart((source) => - source.find((x) => x.contentElementTypeKey === contentTypeKey), - ); - } - - layoutOf(contentUdi: string) { - return this._layouts.asObservablePart((source) => source.find((x) => x.contentUdi === contentUdi)); - } - contentOf(udi: string) { - return this.#contents.asObservablePart((source) => source.find((x) => x.udi === udi)); - } - settingsOf(udi: string) { - return this.#settings.asObservablePart((source) => source.find((x) => x.udi === udi)); - } - - getBlockTypeOf(contentTypeKey: string) { - return this.#blockTypes.value.find((x) => x.contentElementTypeKey === contentTypeKey); - } - getContentOf(contentUdi: string) { - return this.#contents.value.find((x) => x.udi === contentUdi); - } - - setOneLayout(layoutData: BlockLayoutType, modalData?: UmbBlockWorkspaceData) { - this._layouts.appendOne(layoutData); - } - setOneContent(contentData: UmbBlockDataType) { - this.#contents.appendOne(contentData); - } - setOneSettings(settingsData: UmbBlockDataType) { - this.#settings.appendOne(settingsData); - } - - removeOneContent(contentUdi: string) { - this.#contents.removeOne(contentUdi); - } - removeOneSettings(settingsUdi: string) { - this.#settings.removeOne(settingsUdi); - } - - abstract create( - contentElementTypeKey: string, - partialLayoutEntry?: Omit, - modalData?: UmbBlockWorkspaceData, - ): UmbBlockDataObjectModel | undefined; - - protected createBlockData(contentElementTypeKey: string, partialLayoutEntry?: Omit) { - // Find block type. - const blockType = this.#blockTypes.value.find((x) => x.contentElementTypeKey === contentElementTypeKey); - if (!blockType) { - throw new Error(`Cannot create block, missing block type for ${contentElementTypeKey}`); - } - - // Create layout entry: - const layout: BlockLayoutType = { - contentUdi: buildUdi('element', UmbId.new()), - ...(partialLayoutEntry as Partial), - } as BlockLayoutType; - - const content = { - udi: layout.contentUdi, - contentTypeKey: contentElementTypeKey, - }; - let settings: UmbBlockDataType | undefined = undefined; - - if (blockType.settingsElementTypeKey) { - layout.settingsUdi = buildUdi('element', UmbId.new()); - settings = { - udi: layout.settingsUdi, - contentTypeKey: blockType.settingsElementTypeKey, - }; - } - - return { - layout, - content, - settings, - }; - } - - abstract insert( - layoutEntry: BlockLayoutType, - content: UmbBlockDataType, - settings: UmbBlockDataType | undefined, - modalData: UmbBlockWorkspaceData, - ): boolean; - - protected insertBlockData( - layoutEntry: BlockLayoutType, - content: UmbBlockDataType, - settings: UmbBlockDataType | undefined, - modalData: ModalDataType, - ) { - // Create content entry: - if (layoutEntry.contentUdi) { - this.#contents.appendOne(content); - } else { - throw new Error('Cannot create block, missing contentUdi'); - return false; - } - - //Create settings entry: - if (settings && layoutEntry.settingsUdi) { - this.#settings.appendOne(settings); - } - } + // + get contentTypesLoaded() { + return Promise.all(this.#contentTypeRequests); + } + #contentTypeRequests: Array> = []; + #contentTypeRepository = new UmbDocumentTypeDetailRepository(this); + + #propertyAlias = new UmbStringState(undefined); + propertyAlias = this.#propertyAlias.asObservable(); + + #variantId = new UmbClassState(undefined); + variantId = this.#variantId.asObservable(); + + #contentTypes = new UmbArrayState(>[], (x) => x.unique); + public readonly contentTypes = this.#contentTypes.asObservable(); + + #blockTypes = new UmbArrayState(>[], (x) => x.contentElementTypeKey); + public readonly blockTypes = this.#blockTypes.asObservable(); + + protected _editorConfiguration = new UmbClassState(undefined); + public readonly editorConfiguration = this._editorConfiguration.asObservable(); + + protected _layouts = new UmbArrayState(>[], (x) => x.contentUdi); + public readonly layouts = this._layouts.asObservable(); + + #contents = new UmbArrayState(>[], (x) => x.udi); + public readonly contents = this.#contents.asObservable(); + + #settings = new UmbArrayState(>[], (x) => x.udi); + public readonly settings = this.#settings.asObservable(); + + // TODO: maybe its bad to consume Property Context, and instead wire this up manually in the property editor? With these: (and one for variant-id..) + /*setPropertyAlias(alias: string) { + this.#propertyAlias.setValue(alias); + this.#workspaceModal.setUniquePathValue('propertyAlias', alias); + } + getPropertyAlias() { + this.#propertyAlias.value; + }*/ + + setEditorConfiguration(configs: UmbPropertyEditorConfigCollection) { + this._editorConfiguration.setValue(configs); + } + getEditorConfiguration(): UmbPropertyEditorConfigCollection | undefined { + return this._editorConfiguration.getValue(); + } + + setBlockTypes(blockTypes: Array) { + this.#blockTypes.setValue(blockTypes); + } + getBlockTypes() { + return this.#blockTypes.value; + } + + setLayouts(layouts: Array) { + this._layouts.setValue(layouts); + } + setContents(contents: Array) { + this.#contents.setValue(contents); + } + setSettings(settings: Array) { + this.#settings.setValue(settings); + } + + constructor(host: UmbControllerHost) { + super(host, UMB_BLOCK_MANAGER_CONTEXT); + + this.consumeContext(UMB_PROPERTY_CONTEXT, (propertyContext) => { + this.observe( + propertyContext?.alias, + (alias) => { + this.#propertyAlias.setValue(alias); + }, + 'observePropertyAlias', + ); + this.observe( + propertyContext?.variantId, + (variantId) => { + this.#variantId.setValue(variantId); + }, + 'observePropertyVariantId', + ); + }); + + this.observe(this.blockTypes, (blockTypes) => { + blockTypes.forEach((x) => { + this.#ensureContentType(x.contentElementTypeKey); + if (x.settingsElementTypeKey) { + this.#ensureContentType(x.settingsElementTypeKey); + } + }); + }); + } + + async #ensureContentType(unique: string) { + if (this.#contentTypes.getValue().find((x) => x.unique === unique)) return; + + const contentTypeRequest = this.#contentTypeRepository.requestByUnique(unique); + this.#contentTypeRequests.push(contentTypeRequest); + const { data } = await contentTypeRequest; + if (!data) { + this.#contentTypes.removeOne(unique); + return; + } + + // We could have used the global store of Document Types, but to ensure we first react ones the latest is loaded then we have our own local store: + // TODO: Revisit if this is right to do. Notice this can potentially be proxied to the global store. In that way we do not need to observe and we can just use the global store for data. + this.#contentTypes.appendOne(data); + } + + contentTypeOf(contentTypeKey: string) { + return this.#contentTypes.asObservablePart((source) => source.find((x) => x.unique === contentTypeKey)); + } + contentTypeNameOf(contentTypeKey: string) { + return this.#contentTypes.asObservablePart((source) => source.find((x) => x.unique === contentTypeKey)?.name); + } + getContentTypeNameOf(contentTypeKey: string) { + return this.#contentTypes.getValue().find((x) => x.unique === contentTypeKey)?.name; + } + blockTypeOf(contentTypeKey: string) { + return this.#blockTypes.asObservablePart((source) => + source.find((x) => x.contentElementTypeKey === contentTypeKey), + ); + } + + layoutOf(contentUdi: string) { + return this._layouts.asObservablePart((source) => source.find((x) => x.contentUdi === contentUdi)); + } + contentOf(udi: string) { + return this.#contents.asObservablePart((source) => source.find((x) => x.udi === udi)); + } + settingsOf(udi: string) { + return this.#settings.asObservablePart((source) => source.find((x) => x.udi === udi)); + } + + getBlockTypeOf(contentTypeKey: string) { + return this.#blockTypes.value.find((x) => x.contentElementTypeKey === contentTypeKey); + } + getContentOf(contentUdi: string) { + return this.#contents.value.find((x) => x.udi === contentUdi); + } + + setOneLayout(layoutData: BlockLayoutType, modalData?: UmbBlockWorkspaceData) { + this._layouts.appendOne(layoutData); + } + setOneContent(contentData: UmbBlockDataType) { + this.#contents.appendOne(contentData); + } + setOneSettings(settingsData: UmbBlockDataType) { + this.#settings.appendOne(settingsData); + } + + removeOneContent(contentUdi: string) { + this.#contents.removeOne(contentUdi); + } + removeOneSettings(settingsUdi: string) { + this.#settings.removeOne(settingsUdi); + } + + abstract create( + contentElementTypeKey: string, + partialLayoutEntry?: Omit, + modalData?: UmbBlockWorkspaceData, + ): UmbBlockDataObjectModel | undefined; + + protected createBlockData(contentElementTypeKey: string, partialLayoutEntry?: Omit) { + // Find block type. + const blockType = this.#blockTypes.value.find((x) => x.contentElementTypeKey === contentElementTypeKey); + if (!blockType) { + throw new Error(`Cannot create block, missing block type for ${contentElementTypeKey}`); + } + + // Create layout entry: + const layout: BlockLayoutType = { + contentUdi: buildUdi('element', UmbId.new()), + ...(partialLayoutEntry as Partial), + } as BlockLayoutType; + + const content = { + udi: layout.contentUdi, + contentTypeKey: contentElementTypeKey, + }; + let settings: UmbBlockDataType | undefined = undefined; + + if (blockType.settingsElementTypeKey) { + layout.settingsUdi = buildUdi('element', UmbId.new()); + settings = { + udi: layout.settingsUdi, + contentTypeKey: blockType.settingsElementTypeKey, + }; + } + + return { + layout, + content, + settings, + }; + } + + abstract insert( + layoutEntry: BlockLayoutType, + content: UmbBlockDataType, + settings: UmbBlockDataType | undefined, + modalData: UmbBlockWorkspaceData, + ): boolean; + + protected insertBlockData( + layoutEntry: BlockLayoutType, + content: UmbBlockDataType, + settings: UmbBlockDataType | undefined, + modalData: ModalDataType, + ) { + // Create content entry: + if (layoutEntry.contentUdi) { + this.#contents.appendOne(content); + } else { + throw new Error('Cannot create block, missing contentUdi'); + return false; + } + + //Create settings entry: + if (settings && layoutEntry.settingsUdi) { + this.#settings.appendOne(settings); + } + } } From 6b82f726c8bab9d052ecaf8de7e3a7146fbdce3f Mon Sep 17 00:00:00 2001 From: Rick Butterfield Date: Wed, 19 Jun 2024 16:29:35 +0100 Subject: [PATCH 4/7] Fix tabs/spaces issue --- .../block/context/block-manager.context.ts | 30 +++++++++---------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/src/packages/block/block/context/block-manager.context.ts b/src/packages/block/block/context/block-manager.context.ts index 8f95c8b7b6..ac57bd8a24 100644 --- a/src/packages/block/block/context/block-manager.context.ts +++ b/src/packages/block/block/context/block-manager.context.ts @@ -56,13 +56,13 @@ export abstract class UmbBlockManagerContext< #settings = new UmbArrayState(>[], (x) => x.udi); public readonly settings = this.#settings.asObservable(); - // TODO: maybe its bad to consume Property Context, and instead wire this up manually in the property editor? With these: (and one for variant-id..) - /*setPropertyAlias(alias: string) { - this.#propertyAlias.setValue(alias); - this.#workspaceModal.setUniquePathValue('propertyAlias', alias); + // TODO: maybe its bad to consume Property Context, and instead wire this up manually in the property editor? With these: (and one for variant-id..) + /*setPropertyAlias(alias: string) { + this.#propertyAlias.setValue(alias); + this.#workspaceModal.setUniquePathValue('propertyAlias', alias); } - getPropertyAlias() { - this.#propertyAlias.value; + getPropertyAlias() { + this.#propertyAlias.value; }*/ setEditorConfiguration(configs: UmbPropertyEditorConfigCollection) { @@ -119,7 +119,7 @@ export abstract class UmbBlockManagerContext< }); } - async #ensureContentType(unique: string) { + async #ensureContentType(unique: string) { if (this.#contentTypes.getValue().find((x) => x.unique === unique)) return; const contentTypeRequest = this.#contentTypeRepository.requestByUnique(unique); @@ -130,8 +130,8 @@ export abstract class UmbBlockManagerContext< return; } - // We could have used the global store of Document Types, but to ensure we first react ones the latest is loaded then we have our own local store: - // TODO: Revisit if this is right to do. Notice this can potentially be proxied to the global store. In that way we do not need to observe and we can just use the global store for data. + // We could have used the global store of Document Types, but to ensure we first react ones the latest is loaded then we have our own local store: + // TODO: Revisit if this is right to do. Notice this can potentially be proxied to the global store. In that way we do not need to observe and we can just use the global store for data. this.#contentTypes.appendOne(data); } @@ -191,13 +191,13 @@ export abstract class UmbBlockManagerContext< ): UmbBlockDataObjectModel | undefined; protected createBlockData(contentElementTypeKey: string, partialLayoutEntry?: Omit) { - // Find block type. + // Find block type. const blockType = this.#blockTypes.value.find((x) => x.contentElementTypeKey === contentElementTypeKey); if (!blockType) { - throw new Error(`Cannot create block, missing block type for ${contentElementTypeKey}`); + throw new Error(`Cannot create block, missing block type for ${contentElementTypeKey}`); } - // Create layout entry: + // Create layout entry: const layout: BlockLayoutType = { contentUdi: buildUdi('element', UmbId.new()), ...(partialLayoutEntry as Partial), @@ -237,15 +237,15 @@ export abstract class UmbBlockManagerContext< settings: UmbBlockDataType | undefined, modalData: ModalDataType, ) { - // Create content entry: + // Create content entry: if (layoutEntry.contentUdi) { this.#contents.appendOne(content); } else { - throw new Error('Cannot create block, missing contentUdi'); + throw new Error('Cannot create block, missing contentUdi'); return false; } - //Create settings entry: + //Create settings entry: if (settings && layoutEntry.settingsUdi) { this.#settings.appendOne(settings); } From 313438839bfdf69cb26443fd5a91f95b56dd6516 Mon Sep 17 00:00:00 2001 From: Rick Butterfield Date: Wed, 19 Jun 2024 16:30:23 +0100 Subject: [PATCH 5/7] Fix tabs/spaces issue --- .../block/context/block-manager.context.ts | 462 +++++++++--------- 1 file changed, 231 insertions(+), 231 deletions(-) diff --git a/src/packages/block/block/context/block-manager.context.ts b/src/packages/block/block/context/block-manager.context.ts index ac57bd8a24..deb6391c74 100644 --- a/src/packages/block/block/context/block-manager.context.ts +++ b/src/packages/block/block/context/block-manager.context.ts @@ -13,241 +13,241 @@ import { UMB_PROPERTY_CONTEXT } from '@umbraco-cms/backoffice/property'; import type { UmbVariantId } from '@umbraco-cms/backoffice/variant'; function buildUdi(entityType: string, guid: string) { - return `umb://${entityType}/${guid.replace(/-/g, '')}`; + return `umb://${entityType}/${guid.replace(/-/g, '')}`; } export type UmbBlockDataObjectModel = { - layout: LayoutEntryType; - content: UmbBlockDataType; - settings?: UmbBlockDataType; + layout: LayoutEntryType; + content: UmbBlockDataType; + settings?: UmbBlockDataType; }; export abstract class UmbBlockManagerContext< - BlockType extends UmbBlockTypeBaseModel = UmbBlockTypeBaseModel, - BlockLayoutType extends UmbBlockLayoutBaseModel = UmbBlockLayoutBaseModel, + BlockType extends UmbBlockTypeBaseModel = UmbBlockTypeBaseModel, + BlockLayoutType extends UmbBlockLayoutBaseModel = UmbBlockLayoutBaseModel, > extends UmbContextBase { - // - get contentTypesLoaded() { - return Promise.all(this.#contentTypeRequests); - } - #contentTypeRequests: Array> = []; - #contentTypeRepository = new UmbDocumentTypeDetailRepository(this); - - #propertyAlias = new UmbStringState(undefined); - propertyAlias = this.#propertyAlias.asObservable(); - - #variantId = new UmbClassState(undefined); - variantId = this.#variantId.asObservable(); - - #contentTypes = new UmbArrayState(>[], (x) => x.unique); - public readonly contentTypes = this.#contentTypes.asObservable(); - - #blockTypes = new UmbArrayState(>[], (x) => x.contentElementTypeKey); - public readonly blockTypes = this.#blockTypes.asObservable(); - - protected _editorConfiguration = new UmbClassState(undefined); - public readonly editorConfiguration = this._editorConfiguration.asObservable(); - - protected _layouts = new UmbArrayState(>[], (x) => x.contentUdi); - public readonly layouts = this._layouts.asObservable(); - - #contents = new UmbArrayState(>[], (x) => x.udi); - public readonly contents = this.#contents.asObservable(); - - #settings = new UmbArrayState(>[], (x) => x.udi); - public readonly settings = this.#settings.asObservable(); - - // TODO: maybe its bad to consume Property Context, and instead wire this up manually in the property editor? With these: (and one for variant-id..) - /*setPropertyAlias(alias: string) { - this.#propertyAlias.setValue(alias); - this.#workspaceModal.setUniquePathValue('propertyAlias', alias); - } - getPropertyAlias() { - this.#propertyAlias.value; - }*/ - - setEditorConfiguration(configs: UmbPropertyEditorConfigCollection) { - this._editorConfiguration.setValue(configs); - } - getEditorConfiguration(): UmbPropertyEditorConfigCollection | undefined { - return this._editorConfiguration.getValue(); - } - - setBlockTypes(blockTypes: Array) { - this.#blockTypes.setValue(blockTypes); - } - getBlockTypes() { - return this.#blockTypes.value; - } - - setLayouts(layouts: Array) { - this._layouts.setValue(layouts); - } - setContents(contents: Array) { - this.#contents.setValue(contents); - } - setSettings(settings: Array) { - this.#settings.setValue(settings); - } - - constructor(host: UmbControllerHost) { - super(host, UMB_BLOCK_MANAGER_CONTEXT); - - this.consumeContext(UMB_PROPERTY_CONTEXT, (propertyContext) => { - this.observe( - propertyContext?.alias, - (alias) => { - this.#propertyAlias.setValue(alias); - }, - 'observePropertyAlias', - ); - this.observe( - propertyContext?.variantId, - (variantId) => { - this.#variantId.setValue(variantId); - }, - 'observePropertyVariantId', - ); - }); - - this.observe(this.blockTypes, (blockTypes) => { - blockTypes.forEach((x) => { - this.#ensureContentType(x.contentElementTypeKey); - if (x.settingsElementTypeKey) { - this.#ensureContentType(x.settingsElementTypeKey); - } - }); - }); - } - - async #ensureContentType(unique: string) { - if (this.#contentTypes.getValue().find((x) => x.unique === unique)) return; - - const contentTypeRequest = this.#contentTypeRepository.requestByUnique(unique); - this.#contentTypeRequests.push(contentTypeRequest); - const { data } = await contentTypeRequest; - if (!data) { - this.#contentTypes.removeOne(unique); - return; - } - - // We could have used the global store of Document Types, but to ensure we first react ones the latest is loaded then we have our own local store: - // TODO: Revisit if this is right to do. Notice this can potentially be proxied to the global store. In that way we do not need to observe and we can just use the global store for data. - this.#contentTypes.appendOne(data); - } - - contentTypeOf(contentTypeKey: string) { - return this.#contentTypes.asObservablePart((source) => source.find((x) => x.unique === contentTypeKey)); - } - contentTypeNameOf(contentTypeKey: string) { - return this.#contentTypes.asObservablePart((source) => source.find((x) => x.unique === contentTypeKey)?.name); - } - getContentTypeNameOf(contentTypeKey: string) { - return this.#contentTypes.getValue().find((x) => x.unique === contentTypeKey)?.name; - } - blockTypeOf(contentTypeKey: string) { - return this.#blockTypes.asObservablePart((source) => - source.find((x) => x.contentElementTypeKey === contentTypeKey), - ); - } - - layoutOf(contentUdi: string) { - return this._layouts.asObservablePart((source) => source.find((x) => x.contentUdi === contentUdi)); - } - contentOf(udi: string) { - return this.#contents.asObservablePart((source) => source.find((x) => x.udi === udi)); - } - settingsOf(udi: string) { - return this.#settings.asObservablePart((source) => source.find((x) => x.udi === udi)); - } - - getBlockTypeOf(contentTypeKey: string) { - return this.#blockTypes.value.find((x) => x.contentElementTypeKey === contentTypeKey); - } - getContentOf(contentUdi: string) { - return this.#contents.value.find((x) => x.udi === contentUdi); - } - - setOneLayout(layoutData: BlockLayoutType, modalData?: UmbBlockWorkspaceData) { - this._layouts.appendOne(layoutData); - } - setOneContent(contentData: UmbBlockDataType) { - this.#contents.appendOne(contentData); - } - setOneSettings(settingsData: UmbBlockDataType) { - this.#settings.appendOne(settingsData); - } - - removeOneContent(contentUdi: string) { - this.#contents.removeOne(contentUdi); - } - removeOneSettings(settingsUdi: string) { - this.#settings.removeOne(settingsUdi); - } - - abstract create( - contentElementTypeKey: string, - partialLayoutEntry?: Omit, - modalData?: UmbBlockWorkspaceData, - ): UmbBlockDataObjectModel | undefined; - - protected createBlockData(contentElementTypeKey: string, partialLayoutEntry?: Omit) { - // Find block type. - const blockType = this.#blockTypes.value.find((x) => x.contentElementTypeKey === contentElementTypeKey); - if (!blockType) { - throw new Error(`Cannot create block, missing block type for ${contentElementTypeKey}`); - } - - // Create layout entry: - const layout: BlockLayoutType = { - contentUdi: buildUdi('element', UmbId.new()), - ...(partialLayoutEntry as Partial), - } as BlockLayoutType; - - const content = { - udi: layout.contentUdi, - contentTypeKey: contentElementTypeKey, - }; - let settings: UmbBlockDataType | undefined = undefined; - - if (blockType.settingsElementTypeKey) { - layout.settingsUdi = buildUdi('element', UmbId.new()); - settings = { - udi: layout.settingsUdi, - contentTypeKey: blockType.settingsElementTypeKey, - }; - } - - return { - layout, - content, - settings, - }; - } - - abstract insert( - layoutEntry: BlockLayoutType, - content: UmbBlockDataType, - settings: UmbBlockDataType | undefined, - modalData: UmbBlockWorkspaceData, - ): boolean; - - protected insertBlockData( - layoutEntry: BlockLayoutType, - content: UmbBlockDataType, - settings: UmbBlockDataType | undefined, - modalData: ModalDataType, - ) { - // Create content entry: - if (layoutEntry.contentUdi) { - this.#contents.appendOne(content); - } else { - throw new Error('Cannot create block, missing contentUdi'); - return false; - } - - //Create settings entry: - if (settings && layoutEntry.settingsUdi) { - this.#settings.appendOne(settings); - } - } + // + get contentTypesLoaded() { + return Promise.all(this.#contentTypeRequests); + } + #contentTypeRequests: Array> = []; + #contentTypeRepository = new UmbDocumentTypeDetailRepository(this); + + #propertyAlias = new UmbStringState(undefined); + propertyAlias = this.#propertyAlias.asObservable(); + + #variantId = new UmbClassState(undefined); + variantId = this.#variantId.asObservable(); + + #contentTypes = new UmbArrayState(>[], (x) => x.unique); + public readonly contentTypes = this.#contentTypes.asObservable(); + + #blockTypes = new UmbArrayState(>[], (x) => x.contentElementTypeKey); + public readonly blockTypes = this.#blockTypes.asObservable(); + + protected _editorConfiguration = new UmbClassState(undefined); + public readonly editorConfiguration = this._editorConfiguration.asObservable(); + + protected _layouts = new UmbArrayState(>[], (x) => x.contentUdi); + public readonly layouts = this._layouts.asObservable(); + + #contents = new UmbArrayState(>[], (x) => x.udi); + public readonly contents = this.#contents.asObservable(); + + #settings = new UmbArrayState(>[], (x) => x.udi); + public readonly settings = this.#settings.asObservable(); + + // TODO: maybe its bad to consume Property Context, and instead wire this up manually in the property editor? With these: (and one for variant-id..) + /*setPropertyAlias(alias: string) { + this.#propertyAlias.setValue(alias); + this.#workspaceModal.setUniquePathValue('propertyAlias', alias); + } + getPropertyAlias() { + this.#propertyAlias.value; + }*/ + + setEditorConfiguration(configs: UmbPropertyEditorConfigCollection) { + this._editorConfiguration.setValue(configs); + } + getEditorConfiguration(): UmbPropertyEditorConfigCollection | undefined { + return this._editorConfiguration.getValue(); + } + + setBlockTypes(blockTypes: Array) { + this.#blockTypes.setValue(blockTypes); + } + getBlockTypes() { + return this.#blockTypes.value; + } + + setLayouts(layouts: Array) { + this._layouts.setValue(layouts); + } + setContents(contents: Array) { + this.#contents.setValue(contents); + } + setSettings(settings: Array) { + this.#settings.setValue(settings); + } + + constructor(host: UmbControllerHost) { + super(host, UMB_BLOCK_MANAGER_CONTEXT); + + this.consumeContext(UMB_PROPERTY_CONTEXT, (propertyContext) => { + this.observe( + propertyContext?.alias, + (alias) => { + this.#propertyAlias.setValue(alias); + }, + 'observePropertyAlias', + ); + this.observe( + propertyContext?.variantId, + (variantId) => { + this.#variantId.setValue(variantId); + }, + 'observePropertyVariantId', + ); + }); + + this.observe(this.blockTypes, (blockTypes) => { + blockTypes.forEach((x) => { + this.#ensureContentType(x.contentElementTypeKey); + if (x.settingsElementTypeKey) { + this.#ensureContentType(x.settingsElementTypeKey); + } + }); + }); + } + + async #ensureContentType(unique: string) { + if (this.#contentTypes.getValue().find((x) => x.unique === unique)) return; + + const contentTypeRequest = this.#contentTypeRepository.requestByUnique(unique); + this.#contentTypeRequests.push(contentTypeRequest); + const { data } = await contentTypeRequest; + if (!data) { + this.#contentTypes.removeOne(unique); + return; + } + + // We could have used the global store of Document Types, but to ensure we first react ones the latest is loaded then we have our own local store: + // TODO: Revisit if this is right to do. Notice this can potentially be proxied to the global store. In that way we do not need to observe and we can just use the global store for data. + this.#contentTypes.appendOne(data); + } + + contentTypeOf(contentTypeKey: string) { + return this.#contentTypes.asObservablePart((source) => source.find((x) => x.unique === contentTypeKey)); + } + contentTypeNameOf(contentTypeKey: string) { + return this.#contentTypes.asObservablePart((source) => source.find((x) => x.unique === contentTypeKey)?.name); + } + getContentTypeNameOf(contentTypeKey: string) { + return this.#contentTypes.getValue().find((x) => x.unique === contentTypeKey)?.name; + } + blockTypeOf(contentTypeKey: string) { + return this.#blockTypes.asObservablePart((source) => + source.find((x) => x.contentElementTypeKey === contentTypeKey), + ); + } + + layoutOf(contentUdi: string) { + return this._layouts.asObservablePart((source) => source.find((x) => x.contentUdi === contentUdi)); + } + contentOf(udi: string) { + return this.#contents.asObservablePart((source) => source.find((x) => x.udi === udi)); + } + settingsOf(udi: string) { + return this.#settings.asObservablePart((source) => source.find((x) => x.udi === udi)); + } + + getBlockTypeOf(contentTypeKey: string) { + return this.#blockTypes.value.find((x) => x.contentElementTypeKey === contentTypeKey); + } + getContentOf(contentUdi: string) { + return this.#contents.value.find((x) => x.udi === contentUdi); + } + + setOneLayout(layoutData: BlockLayoutType, modalData?: UmbBlockWorkspaceData) { + this._layouts.appendOne(layoutData); + } + setOneContent(contentData: UmbBlockDataType) { + this.#contents.appendOne(contentData); + } + setOneSettings(settingsData: UmbBlockDataType) { + this.#settings.appendOne(settingsData); + } + + removeOneContent(contentUdi: string) { + this.#contents.removeOne(contentUdi); + } + removeOneSettings(settingsUdi: string) { + this.#settings.removeOne(settingsUdi); + } + + abstract create( + contentElementTypeKey: string, + partialLayoutEntry?: Omit, + modalData?: UmbBlockWorkspaceData, + ): UmbBlockDataObjectModel | undefined; + + protected createBlockData(contentElementTypeKey: string, partialLayoutEntry?: Omit) { + // Find block type. + const blockType = this.#blockTypes.value.find((x) => x.contentElementTypeKey === contentElementTypeKey); + if (!blockType) { + throw new Error(`Cannot create block, missing block type for ${contentElementTypeKey}`); + } + + // Create layout entry: + const layout: BlockLayoutType = { + contentUdi: buildUdi('element', UmbId.new()), + ...(partialLayoutEntry as Partial), + } as BlockLayoutType; + + const content = { + udi: layout.contentUdi, + contentTypeKey: contentElementTypeKey, + }; + let settings: UmbBlockDataType | undefined = undefined; + + if (blockType.settingsElementTypeKey) { + layout.settingsUdi = buildUdi('element', UmbId.new()); + settings = { + udi: layout.settingsUdi, + contentTypeKey: blockType.settingsElementTypeKey, + }; + } + + return { + layout, + content, + settings, + }; + } + + abstract insert( + layoutEntry: BlockLayoutType, + content: UmbBlockDataType, + settings: UmbBlockDataType | undefined, + modalData: UmbBlockWorkspaceData, + ): boolean; + + protected insertBlockData( + layoutEntry: BlockLayoutType, + content: UmbBlockDataType, + settings: UmbBlockDataType | undefined, + modalData: ModalDataType, + ) { + // Create content entry: + if (layoutEntry.contentUdi) { + this.#contents.appendOne(content); + } else { + throw new Error('Cannot create block, missing contentUdi'); + return false; + } + + //Create settings entry: + if (settings && layoutEntry.settingsUdi) { + this.#settings.appendOne(settings); + } + } } From 083396f7d82f3cb99861b9a9f856302d308e6284 Mon Sep 17 00:00:00 2001 From: Rick Butterfield Date: Wed, 19 Jun 2024 16:31:18 +0100 Subject: [PATCH 6/7] Fix tab/space issue --- .../block/context/block-manager.context.ts | 462 +++++++++--------- 1 file changed, 231 insertions(+), 231 deletions(-) diff --git a/src/packages/block/block/context/block-manager.context.ts b/src/packages/block/block/context/block-manager.context.ts index deb6391c74..ac57bd8a24 100644 --- a/src/packages/block/block/context/block-manager.context.ts +++ b/src/packages/block/block/context/block-manager.context.ts @@ -13,241 +13,241 @@ import { UMB_PROPERTY_CONTEXT } from '@umbraco-cms/backoffice/property'; import type { UmbVariantId } from '@umbraco-cms/backoffice/variant'; function buildUdi(entityType: string, guid: string) { - return `umb://${entityType}/${guid.replace(/-/g, '')}`; + return `umb://${entityType}/${guid.replace(/-/g, '')}`; } export type UmbBlockDataObjectModel = { - layout: LayoutEntryType; - content: UmbBlockDataType; - settings?: UmbBlockDataType; + layout: LayoutEntryType; + content: UmbBlockDataType; + settings?: UmbBlockDataType; }; export abstract class UmbBlockManagerContext< - BlockType extends UmbBlockTypeBaseModel = UmbBlockTypeBaseModel, - BlockLayoutType extends UmbBlockLayoutBaseModel = UmbBlockLayoutBaseModel, + BlockType extends UmbBlockTypeBaseModel = UmbBlockTypeBaseModel, + BlockLayoutType extends UmbBlockLayoutBaseModel = UmbBlockLayoutBaseModel, > extends UmbContextBase { - // - get contentTypesLoaded() { - return Promise.all(this.#contentTypeRequests); - } - #contentTypeRequests: Array> = []; - #contentTypeRepository = new UmbDocumentTypeDetailRepository(this); - - #propertyAlias = new UmbStringState(undefined); - propertyAlias = this.#propertyAlias.asObservable(); - - #variantId = new UmbClassState(undefined); - variantId = this.#variantId.asObservable(); - - #contentTypes = new UmbArrayState(>[], (x) => x.unique); - public readonly contentTypes = this.#contentTypes.asObservable(); - - #blockTypes = new UmbArrayState(>[], (x) => x.contentElementTypeKey); - public readonly blockTypes = this.#blockTypes.asObservable(); - - protected _editorConfiguration = new UmbClassState(undefined); - public readonly editorConfiguration = this._editorConfiguration.asObservable(); - - protected _layouts = new UmbArrayState(>[], (x) => x.contentUdi); - public readonly layouts = this._layouts.asObservable(); - - #contents = new UmbArrayState(>[], (x) => x.udi); - public readonly contents = this.#contents.asObservable(); - - #settings = new UmbArrayState(>[], (x) => x.udi); - public readonly settings = this.#settings.asObservable(); - - // TODO: maybe its bad to consume Property Context, and instead wire this up manually in the property editor? With these: (and one for variant-id..) - /*setPropertyAlias(alias: string) { - this.#propertyAlias.setValue(alias); - this.#workspaceModal.setUniquePathValue('propertyAlias', alias); - } - getPropertyAlias() { - this.#propertyAlias.value; - }*/ - - setEditorConfiguration(configs: UmbPropertyEditorConfigCollection) { - this._editorConfiguration.setValue(configs); - } - getEditorConfiguration(): UmbPropertyEditorConfigCollection | undefined { - return this._editorConfiguration.getValue(); - } - - setBlockTypes(blockTypes: Array) { - this.#blockTypes.setValue(blockTypes); - } - getBlockTypes() { - return this.#blockTypes.value; - } - - setLayouts(layouts: Array) { - this._layouts.setValue(layouts); - } - setContents(contents: Array) { - this.#contents.setValue(contents); - } - setSettings(settings: Array) { - this.#settings.setValue(settings); - } - - constructor(host: UmbControllerHost) { - super(host, UMB_BLOCK_MANAGER_CONTEXT); - - this.consumeContext(UMB_PROPERTY_CONTEXT, (propertyContext) => { - this.observe( - propertyContext?.alias, - (alias) => { - this.#propertyAlias.setValue(alias); - }, - 'observePropertyAlias', - ); - this.observe( - propertyContext?.variantId, - (variantId) => { - this.#variantId.setValue(variantId); - }, - 'observePropertyVariantId', - ); - }); - - this.observe(this.blockTypes, (blockTypes) => { - blockTypes.forEach((x) => { - this.#ensureContentType(x.contentElementTypeKey); - if (x.settingsElementTypeKey) { - this.#ensureContentType(x.settingsElementTypeKey); - } - }); - }); - } - - async #ensureContentType(unique: string) { - if (this.#contentTypes.getValue().find((x) => x.unique === unique)) return; - - const contentTypeRequest = this.#contentTypeRepository.requestByUnique(unique); - this.#contentTypeRequests.push(contentTypeRequest); - const { data } = await contentTypeRequest; - if (!data) { - this.#contentTypes.removeOne(unique); - return; - } - - // We could have used the global store of Document Types, but to ensure we first react ones the latest is loaded then we have our own local store: - // TODO: Revisit if this is right to do. Notice this can potentially be proxied to the global store. In that way we do not need to observe and we can just use the global store for data. - this.#contentTypes.appendOne(data); - } - - contentTypeOf(contentTypeKey: string) { - return this.#contentTypes.asObservablePart((source) => source.find((x) => x.unique === contentTypeKey)); - } - contentTypeNameOf(contentTypeKey: string) { - return this.#contentTypes.asObservablePart((source) => source.find((x) => x.unique === contentTypeKey)?.name); - } - getContentTypeNameOf(contentTypeKey: string) { - return this.#contentTypes.getValue().find((x) => x.unique === contentTypeKey)?.name; - } - blockTypeOf(contentTypeKey: string) { - return this.#blockTypes.asObservablePart((source) => - source.find((x) => x.contentElementTypeKey === contentTypeKey), - ); - } - - layoutOf(contentUdi: string) { - return this._layouts.asObservablePart((source) => source.find((x) => x.contentUdi === contentUdi)); - } - contentOf(udi: string) { - return this.#contents.asObservablePart((source) => source.find((x) => x.udi === udi)); - } - settingsOf(udi: string) { - return this.#settings.asObservablePart((source) => source.find((x) => x.udi === udi)); - } - - getBlockTypeOf(contentTypeKey: string) { - return this.#blockTypes.value.find((x) => x.contentElementTypeKey === contentTypeKey); - } - getContentOf(contentUdi: string) { - return this.#contents.value.find((x) => x.udi === contentUdi); - } - - setOneLayout(layoutData: BlockLayoutType, modalData?: UmbBlockWorkspaceData) { - this._layouts.appendOne(layoutData); - } - setOneContent(contentData: UmbBlockDataType) { - this.#contents.appendOne(contentData); - } - setOneSettings(settingsData: UmbBlockDataType) { - this.#settings.appendOne(settingsData); - } - - removeOneContent(contentUdi: string) { - this.#contents.removeOne(contentUdi); - } - removeOneSettings(settingsUdi: string) { - this.#settings.removeOne(settingsUdi); - } - - abstract create( - contentElementTypeKey: string, - partialLayoutEntry?: Omit, - modalData?: UmbBlockWorkspaceData, - ): UmbBlockDataObjectModel | undefined; - - protected createBlockData(contentElementTypeKey: string, partialLayoutEntry?: Omit) { - // Find block type. - const blockType = this.#blockTypes.value.find((x) => x.contentElementTypeKey === contentElementTypeKey); - if (!blockType) { - throw new Error(`Cannot create block, missing block type for ${contentElementTypeKey}`); - } - - // Create layout entry: - const layout: BlockLayoutType = { - contentUdi: buildUdi('element', UmbId.new()), - ...(partialLayoutEntry as Partial), - } as BlockLayoutType; - - const content = { - udi: layout.contentUdi, - contentTypeKey: contentElementTypeKey, - }; - let settings: UmbBlockDataType | undefined = undefined; - - if (blockType.settingsElementTypeKey) { - layout.settingsUdi = buildUdi('element', UmbId.new()); - settings = { - udi: layout.settingsUdi, - contentTypeKey: blockType.settingsElementTypeKey, - }; - } - - return { - layout, - content, - settings, - }; - } - - abstract insert( - layoutEntry: BlockLayoutType, - content: UmbBlockDataType, - settings: UmbBlockDataType | undefined, - modalData: UmbBlockWorkspaceData, - ): boolean; - - protected insertBlockData( - layoutEntry: BlockLayoutType, - content: UmbBlockDataType, - settings: UmbBlockDataType | undefined, - modalData: ModalDataType, - ) { - // Create content entry: - if (layoutEntry.contentUdi) { - this.#contents.appendOne(content); - } else { - throw new Error('Cannot create block, missing contentUdi'); - return false; - } - - //Create settings entry: - if (settings && layoutEntry.settingsUdi) { - this.#settings.appendOne(settings); - } - } + // + get contentTypesLoaded() { + return Promise.all(this.#contentTypeRequests); + } + #contentTypeRequests: Array> = []; + #contentTypeRepository = new UmbDocumentTypeDetailRepository(this); + + #propertyAlias = new UmbStringState(undefined); + propertyAlias = this.#propertyAlias.asObservable(); + + #variantId = new UmbClassState(undefined); + variantId = this.#variantId.asObservable(); + + #contentTypes = new UmbArrayState(>[], (x) => x.unique); + public readonly contentTypes = this.#contentTypes.asObservable(); + + #blockTypes = new UmbArrayState(>[], (x) => x.contentElementTypeKey); + public readonly blockTypes = this.#blockTypes.asObservable(); + + protected _editorConfiguration = new UmbClassState(undefined); + public readonly editorConfiguration = this._editorConfiguration.asObservable(); + + protected _layouts = new UmbArrayState(>[], (x) => x.contentUdi); + public readonly layouts = this._layouts.asObservable(); + + #contents = new UmbArrayState(>[], (x) => x.udi); + public readonly contents = this.#contents.asObservable(); + + #settings = new UmbArrayState(>[], (x) => x.udi); + public readonly settings = this.#settings.asObservable(); + + // TODO: maybe its bad to consume Property Context, and instead wire this up manually in the property editor? With these: (and one for variant-id..) + /*setPropertyAlias(alias: string) { + this.#propertyAlias.setValue(alias); + this.#workspaceModal.setUniquePathValue('propertyAlias', alias); + } + getPropertyAlias() { + this.#propertyAlias.value; + }*/ + + setEditorConfiguration(configs: UmbPropertyEditorConfigCollection) { + this._editorConfiguration.setValue(configs); + } + getEditorConfiguration(): UmbPropertyEditorConfigCollection | undefined { + return this._editorConfiguration.getValue(); + } + + setBlockTypes(blockTypes: Array) { + this.#blockTypes.setValue(blockTypes); + } + getBlockTypes() { + return this.#blockTypes.value; + } + + setLayouts(layouts: Array) { + this._layouts.setValue(layouts); + } + setContents(contents: Array) { + this.#contents.setValue(contents); + } + setSettings(settings: Array) { + this.#settings.setValue(settings); + } + + constructor(host: UmbControllerHost) { + super(host, UMB_BLOCK_MANAGER_CONTEXT); + + this.consumeContext(UMB_PROPERTY_CONTEXT, (propertyContext) => { + this.observe( + propertyContext?.alias, + (alias) => { + this.#propertyAlias.setValue(alias); + }, + 'observePropertyAlias', + ); + this.observe( + propertyContext?.variantId, + (variantId) => { + this.#variantId.setValue(variantId); + }, + 'observePropertyVariantId', + ); + }); + + this.observe(this.blockTypes, (blockTypes) => { + blockTypes.forEach((x) => { + this.#ensureContentType(x.contentElementTypeKey); + if (x.settingsElementTypeKey) { + this.#ensureContentType(x.settingsElementTypeKey); + } + }); + }); + } + + async #ensureContentType(unique: string) { + if (this.#contentTypes.getValue().find((x) => x.unique === unique)) return; + + const contentTypeRequest = this.#contentTypeRepository.requestByUnique(unique); + this.#contentTypeRequests.push(contentTypeRequest); + const { data } = await contentTypeRequest; + if (!data) { + this.#contentTypes.removeOne(unique); + return; + } + + // We could have used the global store of Document Types, but to ensure we first react ones the latest is loaded then we have our own local store: + // TODO: Revisit if this is right to do. Notice this can potentially be proxied to the global store. In that way we do not need to observe and we can just use the global store for data. + this.#contentTypes.appendOne(data); + } + + contentTypeOf(contentTypeKey: string) { + return this.#contentTypes.asObservablePart((source) => source.find((x) => x.unique === contentTypeKey)); + } + contentTypeNameOf(contentTypeKey: string) { + return this.#contentTypes.asObservablePart((source) => source.find((x) => x.unique === contentTypeKey)?.name); + } + getContentTypeNameOf(contentTypeKey: string) { + return this.#contentTypes.getValue().find((x) => x.unique === contentTypeKey)?.name; + } + blockTypeOf(contentTypeKey: string) { + return this.#blockTypes.asObservablePart((source) => + source.find((x) => x.contentElementTypeKey === contentTypeKey), + ); + } + + layoutOf(contentUdi: string) { + return this._layouts.asObservablePart((source) => source.find((x) => x.contentUdi === contentUdi)); + } + contentOf(udi: string) { + return this.#contents.asObservablePart((source) => source.find((x) => x.udi === udi)); + } + settingsOf(udi: string) { + return this.#settings.asObservablePart((source) => source.find((x) => x.udi === udi)); + } + + getBlockTypeOf(contentTypeKey: string) { + return this.#blockTypes.value.find((x) => x.contentElementTypeKey === contentTypeKey); + } + getContentOf(contentUdi: string) { + return this.#contents.value.find((x) => x.udi === contentUdi); + } + + setOneLayout(layoutData: BlockLayoutType, modalData?: UmbBlockWorkspaceData) { + this._layouts.appendOne(layoutData); + } + setOneContent(contentData: UmbBlockDataType) { + this.#contents.appendOne(contentData); + } + setOneSettings(settingsData: UmbBlockDataType) { + this.#settings.appendOne(settingsData); + } + + removeOneContent(contentUdi: string) { + this.#contents.removeOne(contentUdi); + } + removeOneSettings(settingsUdi: string) { + this.#settings.removeOne(settingsUdi); + } + + abstract create( + contentElementTypeKey: string, + partialLayoutEntry?: Omit, + modalData?: UmbBlockWorkspaceData, + ): UmbBlockDataObjectModel | undefined; + + protected createBlockData(contentElementTypeKey: string, partialLayoutEntry?: Omit) { + // Find block type. + const blockType = this.#blockTypes.value.find((x) => x.contentElementTypeKey === contentElementTypeKey); + if (!blockType) { + throw new Error(`Cannot create block, missing block type for ${contentElementTypeKey}`); + } + + // Create layout entry: + const layout: BlockLayoutType = { + contentUdi: buildUdi('element', UmbId.new()), + ...(partialLayoutEntry as Partial), + } as BlockLayoutType; + + const content = { + udi: layout.contentUdi, + contentTypeKey: contentElementTypeKey, + }; + let settings: UmbBlockDataType | undefined = undefined; + + if (blockType.settingsElementTypeKey) { + layout.settingsUdi = buildUdi('element', UmbId.new()); + settings = { + udi: layout.settingsUdi, + contentTypeKey: blockType.settingsElementTypeKey, + }; + } + + return { + layout, + content, + settings, + }; + } + + abstract insert( + layoutEntry: BlockLayoutType, + content: UmbBlockDataType, + settings: UmbBlockDataType | undefined, + modalData: UmbBlockWorkspaceData, + ): boolean; + + protected insertBlockData( + layoutEntry: BlockLayoutType, + content: UmbBlockDataType, + settings: UmbBlockDataType | undefined, + modalData: ModalDataType, + ) { + // Create content entry: + if (layoutEntry.contentUdi) { + this.#contents.appendOne(content); + } else { + throw new Error('Cannot create block, missing contentUdi'); + return false; + } + + //Create settings entry: + if (settings && layoutEntry.settingsUdi) { + this.#settings.appendOne(settings); + } + } } From ea15e43cc32885cc00dd980624979ee18acb67a5 Mon Sep 17 00:00:00 2001 From: Rick Butterfield Date: Thu, 20 Jun 2024 08:51:01 +0100 Subject: [PATCH 7/7] Fix whitespace issues --- .../block-workspace-editor.element.ts | 32 +++++++++---------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/src/packages/block/block/workspace/block-workspace-editor.element.ts b/src/packages/block/block/workspace/block-workspace-editor.element.ts index d4bf1b0b96..7a94de0272 100644 --- a/src/packages/block/block/workspace/block-workspace-editor.element.ts +++ b/src/packages/block/block/workspace/block-workspace-editor.element.ts @@ -5,34 +5,34 @@ import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; @customElement('umb-block-workspace-editor') export class UmbBlockWorkspaceEditorElement extends UmbLitElement { - @property({ type: String, attribute: false }) - workspaceAlias?: string; + @property({ type: String, attribute: false }) + workspaceAlias?: string; - @property({ type: String, attribute: false }) - label?: string; + @property({ type: String, attribute: false }) + label?: string; - render() { - return this.workspaceAlias && this.label - ? html` ` - : ''; - } + render() { + return this.workspaceAlias && this.label + ? html` ` + : ''; + } - static styles = [ - UmbTextStyles, - css` + static styles = [ + UmbTextStyles, + css` :host { display: block; width: 100%; height: 100%; } `, - ]; + ]; } export default UmbBlockWorkspaceEditorElement; declare global { - interface HTMLElementTagNameMap { - 'umb-block-workspace-editor': UmbBlockWorkspaceEditorElement; - } + interface HTMLElementTagNameMap { + 'umb-block-workspace-editor': UmbBlockWorkspaceEditorElement; + } }