implement expose

This commit is contained in:
Niels Lyngsø
2024-09-24 14:25:01 +02:00
parent dfef8fffef
commit 2480b11097
5 changed files with 21 additions and 5 deletions

View File

@@ -39,6 +39,7 @@ export class UmbPropertyEditorUIBlockGridElement
layout: {},
contentData: [],
settingsData: [],
expose: [],
};
public set config(config: UmbPropertyEditorConfigCollection | undefined) {

View File

@@ -59,6 +59,7 @@ export class UmbPropertyEditorUIBlockListElement
layout: {},
contentData: [],
settingsData: [],
expose: [],
};
@property({ attribute: false })
@@ -184,13 +185,15 @@ export class UmbPropertyEditorUIBlockListElement
this.#managerContext.layouts,
this.#managerContext.contents,
this.#managerContext.settings,
this.#managerContext.exposes,
]).pipe(debounceTime(20)),
([layouts, contents, settings]) => {
([layouts, contents, settings, exposes]) => {
this._value = {
...this._value,
layout: { [UMB_BLOCK_LIST_PROPERTY_EDITOR_ALIAS]: layouts },
contentData: contents,
settingsData: settings,
expose: exposes,
};
context.setValue(this._value);
},

View File

@@ -61,7 +61,7 @@ export abstract class UmbBlockManagerContext<
public readonly settings = this.#settings.asObservable();
#exposes = new UmbArrayState(<Array<UmbBlockExposeModel>>[], (x) => x.contentKey + '_' + x.culture + '_' + x.segment);
public readonly exposes = this.#contents.asObservable();
public readonly exposes = this.#exposes.asObservable();
setEditorConfiguration(configs: UmbPropertyEditorConfigCollection) {
this._editorConfiguration.setValue(configs);
@@ -89,6 +89,9 @@ export abstract class UmbBlockManagerContext<
setSettings(settings: Array<UmbBlockDataModel>) {
this.#settings.setValue(settings);
}
setExposes(exposes: Array<UmbBlockExposeModel>) {
this.#exposes.setValue(exposes);
}
constructor(host: UmbControllerHost) {
super(host, UMB_BLOCK_MANAGER_CONTEXT);
@@ -159,6 +162,11 @@ export abstract class UmbBlockManagerContext<
settingsOf(key: string) {
return this.#settings.asObservablePart((source) => source.find((x) => x.key === key));
}
exposeOf(contentKey: string, variantId: UmbVariantId) {
return this.#exposes.asObservablePart((source) =>
source.filter((x) => x.contentKey === contentKey && variantId.compare(x)),
);
}
getBlockTypeOf(contentTypeKey: string) {
return this.#blockTypes.value.find((x) => x.contentElementTypeKey === contentTypeKey);

View File

@@ -45,10 +45,11 @@ export class UmbPropertyEditorUITinyMceElement extends UmbLitElement implements
public set value(value: UmbRichTextEditorValueType | undefined) {
const buildUpValue: Partial<UmbRichTextEditorValueType> = value ? { ...value } : {};
buildUpValue.markup ??= '';
buildUpValue.blocks ??= { layout: {}, contentData: [], settingsData: [] };
buildUpValue.blocks ??= { layout: {}, contentData: [], settingsData: [], expose: [] };
buildUpValue.blocks.layout ??= {};
buildUpValue.blocks.contentData ??= [];
buildUpValue.blocks.settingsData ??= [];
buildUpValue.blocks.expose ??= [];
this._value = buildUpValue as UmbRichTextEditorValueType;
if (this._latestMarkup !== this._value.markup) {
@@ -78,7 +79,7 @@ export class UmbPropertyEditorUITinyMceElement extends UmbLitElement implements
@state()
private _value: UmbRichTextEditorValueType = {
markup: '',
blocks: { layout: {}, contentData: [], settingsData: [] },
blocks: { layout: {}, contentData: [], settingsData: [], expose: [] },
};
// Separate state for markup, to avoid re-rendering/re-setting the value of the TinyMCE editor when the value does not really change.
@@ -126,14 +127,16 @@ export class UmbPropertyEditorUITinyMceElement extends UmbLitElement implements
this.#managerContext.layouts,
this.#managerContext.contents,
this.#managerContext.settings,
this.#managerContext.exposes,
]).pipe(debounceTime(20)),
([layouts, contents, settings]) => {
([layouts, contents, settings, exposes]) => {
this._value = {
...this._value,
blocks: {
layout: { [UMB_BLOCK_RTE_BLOCK_LAYOUT_ALIAS]: layouts },
contentData: contents,
settingsData: settings,
expose: exposes,
},
};
context.setValue(this._value);

View File

@@ -84,6 +84,7 @@ const meta: Meta<UmbPropertyEditorUITinyMceElement> = {
layout: {},
contentData: [],
settingsData: [],
expose: [],
},
markup: `
<h2>TinyMCE</h2>