diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/manifests.ts index be7b6f90d3..50cac80961 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/manifests.ts @@ -1,4 +1,9 @@ import { manifests as workspaceManifests } from './workspace/manifests.js'; -import { manifests as propertValueClonerManifests } from './property-value-cloner/manifests.js'; +import { manifests as propertyEditorManifests } from './property-editors/manifests.js'; +import { manifests as propertyValueClonerManifests } from './property-value-cloner/manifests.js'; -export const manifests: Array = [...workspaceManifests, ...propertValueClonerManifests]; +export const manifests: Array = [ + ...workspaceManifests, + ...propertyEditorManifests, + ...propertyValueClonerManifests, +]; diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/property-editors/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/property-editors/manifests.ts new file mode 100644 index 0000000000..8000215c56 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/property-editors/manifests.ts @@ -0,0 +1,15 @@ +import type { ManifestPropertyEditorUi } from '@umbraco-cms/backoffice/property-editor'; + +export const manifests: Array = [ + { + type: 'propertyEditorUi', + alias: 'Umb.PropertyEditorUi.BlockRteTypeConfiguration', + name: 'Block RTE Type Configuration Property Editor UI', + element: () => import('./property-editor-ui-block-rte-type-configuration.element.js'), + meta: { + label: 'Block RTE Type Configuration', + icon: 'icon-autofill', + group: 'common', + }, + }, +]; diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/property-editors/property-editor-ui-block-rte-type-configuration.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/property-editors/property-editor-ui-block-rte-type-configuration.element.ts new file mode 100644 index 0000000000..008a595ced --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/property-editors/property-editor-ui-block-rte-type-configuration.element.ts @@ -0,0 +1,81 @@ +import { customElement, html, property, state, nothing } from '@umbraco-cms/backoffice/external/lit'; +import { UmbInputBlockTypeElement } from '@umbraco-cms/backoffice/block-type'; +import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; +import { UmbModalRouteRegistrationController } from '@umbraco-cms/backoffice/router'; +import { UmbChangeEvent } from '@umbraco-cms/backoffice/event'; +import { UMB_BLOCK_RTE_TYPE } from '@umbraco-cms/backoffice/block-rte'; +import { UMB_WORKSPACE_MODAL } from '@umbraco-cms/backoffice/workspace'; +import type { UmbBlockTypeBaseModel } from '@umbraco-cms/backoffice/block-type'; +import type { + UmbPropertyEditorUiElement, + UmbPropertyEditorConfigCollection, +} from '@umbraco-cms/backoffice/property-editor'; + +/** + * @element umb-property-editor-ui-block-rte-type-configuration + */ +@customElement('umb-property-editor-ui-block-rte-type-configuration') +export class UmbPropertyEditorUIBlockRteBlockConfigurationElement + extends UmbLitElement + implements UmbPropertyEditorUiElement +{ + readonly #blockTypeWorkspaceModalRegistration?: UmbModalRouteRegistrationController< + typeof UMB_WORKSPACE_MODAL.DATA, + typeof UMB_WORKSPACE_MODAL.VALUE + >; + + @property({ attribute: false }) + value: UmbBlockTypeBaseModel[] = []; + + @property({ type: Object, attribute: false }) + public config?: UmbPropertyEditorConfigCollection; + + @state() + private _workspacePath?: string; + + constructor() { + super(); + this.#blockTypeWorkspaceModalRegistration?.destroy(); + + this.#blockTypeWorkspaceModalRegistration = new UmbModalRouteRegistrationController(this, UMB_WORKSPACE_MODAL) + .addAdditionalPath(UMB_BLOCK_RTE_TYPE) + .onSetup(() => { + return { data: { entityType: UMB_BLOCK_RTE_TYPE, preset: {} }, modal: { size: 'large' } }; + }) + .observeRouteBuilder((routeBuilder) => { + const newpath = routeBuilder({}); + this._workspacePath = newpath; + }); + } + + #onCreate(e: CustomEvent) { + const selectedElementType = e.detail.contentElementTypeKey; + if (selectedElementType) { + this.#blockTypeWorkspaceModalRegistration?.open({}, 'create/' + selectedElementType + '/null'); + } + } + #onChange(e: CustomEvent) { + e.stopPropagation(); + this.value = (e.target as UmbInputBlockTypeElement).value; + this.dispatchEvent(new UmbChangeEvent()); + } + + override render() { + return UmbInputBlockTypeElement + ? html`` + : nothing; + } +} + +export default UmbPropertyEditorUIBlockRteBlockConfigurationElement; + +declare global { + interface HTMLElementTagNameMap { + 'umb-property-editor-ui-block-rte-type-configuration': UmbPropertyEditorUIBlockRteBlockConfigurationElement; + } +}