yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

re-introduce layout

Browse Source
This commit is contained in:
Niels Lyngsø
2024-05-26 14:59:25 +02:00
parent 39f85e96b4
commit bcec1f8005
4 changed files with 32 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/Umbraco.Web.UI.Client/src/packages/block/block-rte/context/block-rte-manager.context.ts
View File

@@ -44,6 +44,8 @@ export class UmbBlockRteManagerContext<
);
}
this._layouts.appendOne(layoutEntry);
this.insertBlockData(layoutEntry, content, settings, modalData);
return true;

7
src/Umbraco.Web.UI.Client/src/packages/block/block/types.ts
View File

@@ -9,15 +9,12 @@ export interface UmbBlockDataType {
[key: string]: unknown;
}
export interface UmbBlockDataBaseValueType {
export interface UmbBlockValueType<BlockLayoutType extends UmbBlockLayoutBaseModel> {
layout: { [key: string]: Array<BlockLayoutType> | undefined };
contentData: Array<UmbBlockDataType>;
settingsData: Array<UmbBlockDataType>;
}
export interface UmbBlockValueType<BlockLayoutType extends UmbBlockLayoutBaseModel> extends UmbBlockDataBaseValueType {
layout: { [key: string]: Array<BlockLayoutType> | undefined };
}
export interface UmbBlockViewUrlsPropType {
editContent?: string;
editSettings?: string;

7
src/Umbraco.Web.UI.Client/src/packages/tiny-mce/property-editors/tiny-mce/manifests.ts
View File

@@ -1,14 +1,17 @@
import { manifest as schemaManifest } from './Umbraco.RichText.js';
import type { ManifestPropertyEditorUi, ManifestTypes } from '@umbraco-cms/backoffice/extension-registry';
export const UMB_BLOCK_RTE_PROPERTY_EDITOR_SCHEMA_ALIAS = 'Umbraco.RichText';
export const UMB_BLOCK_RTE_PROPERTY_EDITOR_UI_ALIAS = 'Umb.PropertyEditorUi.TinyMCE';
const manifest: ManifestPropertyEditorUi = {
type: 'propertyEditorUi',
alias: 'Umb.PropertyEditorUi.TinyMCE',
alias: UMB_BLOCK_RTE_PROPERTY_EDITOR_UI_ALIAS,
name: 'Rich Text Editor Property Editor UI',
element: () => import('./property-editor-ui-tiny-mce.element.js'),
meta: {
label: 'Rich Text Editor',
propertyEditorSchemaAlias: 'Umbraco.RichText',
propertyEditorSchemaAlias: UMB_BLOCK_RTE_PROPERTY_EDITOR_SCHEMA_ALIAS,
icon: 'icon-browser-window',
group: 'richText',
settings: {

34
src/Umbraco.Web.UI.Client/src/packages/tiny-mce/property-editors/tiny-mce/property-editor-ui-tiny-mce.element.ts
View File

@@ -1,3 +1,4 @@
import { UMB_BLOCK_RTE_PROPERTY_EDITOR_SCHEMA_ALIAS } from './manifests.js';
import { customElement, html, property, state } from '@umbraco-cms/backoffice/external/lit';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import { UmbPropertyValueChangeEvent } from '@umbraco-cms/backoffice/property-editor';
@@ -7,13 +8,15 @@ import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extensi
import '../../components/input-tiny-mce/input-tiny-mce.element.js';
import {
UmbBlockRteEntriesContext,
type UmbBlockRteLayoutModel,
UmbBlockRteManagerContext,
type UmbBlockRteTypeModel,
} from '@umbraco-cms/backoffice/block-rte';
import type { UmbBlockDataBaseValueType } from '@umbraco-cms/backoffice/block';
import type { UmbBlockValueType } from '@umbraco-cms/backoffice/block';
export interface UmbRichTextEditorValueType extends UmbBlockDataBaseValueType {
export interface UmbRichTextEditorValueType {
markup: string;
blocks: UmbBlockValueType<UmbBlockRteLayoutModel>;
}
/**
@@ -38,12 +41,15 @@ export class UmbPropertyEditorUITinyMceElement extends UmbLitElement implements
public set value(value: UmbRichTextEditorValueType | undefined) {
const buildUpValue: Partial<UmbRichTextEditorValueType> = value ? { ...value } : {};
buildUpValue.markup ??= '';
buildUpValue.contentData ??= [];
buildUpValue.settingsData ??= [];
buildUpValue.blocks ??= { layout: {}, contentData: [], settingsData: [] };
buildUpValue.blocks.layout ??= {};
buildUpValue.blocks.contentData ??= [];
buildUpValue.blocks.settingsData ??= [];
this._value = buildUpValue as UmbRichTextEditorValueType;
this.#managerContext.setContents(buildUpValue.contentData);
this.#managerContext.setSettings(buildUpValue.settingsData);
this.#managerContext.setLayouts(buildUpValue.blocks.layout[UMB_BLOCK_RTE_PROPERTY_EDITOR_SCHEMA_ALIAS] ?? []);
this.#managerContext.setContents(buildUpValue.blocks.contentData);
this.#managerContext.setSettings(buildUpValue.blocks.settingsData);
}
public get value(): UmbRichTextEditorValueType {
return this._value;
@@ -55,8 +61,7 @@ export class UmbPropertyEditorUITinyMceElement extends UmbLitElement implements
@state()
private _value: UmbRichTextEditorValueType = {
markup: '',
contentData: [],
settingsData: [],
blocks: { layout: {}, contentData: [], settingsData: [] },
};
#managerContext = new UmbBlockRteManagerContext(this);
@@ -65,12 +70,19 @@ export class UmbPropertyEditorUITinyMceElement extends UmbLitElement implements
constructor() {
super();
this.observe(this.#managerContext.layouts, (layouts) => {
this._value = {
...this._value,
blocks: { ...this._value.blocks, layout: { [UMB_BLOCK_RTE_PROPERTY_EDITOR_SCHEMA_ALIAS]: layouts } },
};
this.#fireChangeEvent();
});
this.observe(this.#managerContext.contents, (contents) => {
this._value = { ...this._value, contentData: contents };
this._value = { ...this._value, blocks: { ...this._value.blocks, contentData: contents } };
this.#fireChangeEvent();
});
this.observe(this.#managerContext.settings, (settings) => {
this._value = { ...this._value, settingsData: settings };
this._value = { ...this._value, blocks: { ...this._value.blocks, settingsData: settings } };
this.#fireChangeEvent();
});
}
@@ -80,7 +92,7 @@ export class UmbPropertyEditorUITinyMceElement extends UmbLitElement implements
}
#onChange(event: InputEvent & { target: HTMLInputElement }) {
this.value = {
this._value = {
...this._value,
markup: event.target.value,
};