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

Moved the Tiptap toolbar value type to its own UmbTiptapToolbarValue type

Browse Source
This commit is contained in:
leekelleher
2024-09-30 12:18:07 +01:00
parent 53310ce68e
commit e3d00c4076
4 changed files with 15 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/components/input-tiptap/input-tiptap.element.ts
View File

@@ -1,4 +1,4 @@
import type { UmbTiptapExtensionApi } from '../../extensions/types.js';
import type { UmbTiptapExtensionApi, UmbTiptapToolbarValue } from '../../extensions/types.js';
import { css, customElement, html, property, state, when } from '@umbraco-cms/backoffice/external/lit';
import { loadManifestApi } from '@umbraco-cms/backoffice/extension-api';
import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
@@ -75,7 +75,7 @@ export class UmbInputTiptapElement extends UmbFormControlMixin<string, typeof Um
private _editor!: Editor;
@state()
_toolbar: string[][][] = [[[]]];
_toolbar: UmbTiptapToolbarValue = [[[]]];
protected override async firstUpdated() {
await Promise.all([await this.#loadExtensions(), await this.#loadEditor()]);
@@ -110,7 +110,7 @@ export class UmbInputTiptapElement extends UmbFormControlMixin<string, typeof Um
if (maxWidth) this.setAttribute('style', `max-width: ${maxWidth}px;`);
if (maxHeight) element.setAttribute('style', `max-height: ${maxHeight}px;`);
this._toolbar = this.configuration?.getValueByAlias<string[][][]>('toolbar') ?? [[[]]];
this._toolbar = this.configuration?.getValueByAlias<UmbTiptapToolbarValue>('toolbar') ?? [[[]]];
const extensions = this._extensions
.map((ext) => ext.getTiptapExtensions({ configuration: this.configuration }))

3
src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/components/input-tiptap/tiptap-fixed-menu.element.ts
View File

@@ -1,3 +1,4 @@
import type { UmbTiptapToolbarValue } from '../../extensions/types.js';
import { css, customElement, html, map, property, state } from '@umbraco-cms/backoffice/external/lit';
import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
import { UmbExtensionsElementAndApiInitializer } from '@umbraco-cms/backoffice/extension-api';
@@ -27,7 +28,7 @@ export class UmbTiptapFixedMenuElement extends UmbLitElement {
configuration?: UmbPropertyEditorConfigCollection;
@property({ attribute: false })
toolbar: Array<Array<Array<string>>> = [[[]]];
toolbar: UmbTiptapToolbarValue = [[[]]];
override connectedCallback(): void {
super.connectedCallback();

2
src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/extensions/types.ts
View File

@@ -98,3 +98,5 @@ export abstract class UmbTiptapToolbarElementApiBase extends UmbControllerBase i
return editor && this.manifest?.meta.alias ? editor?.isActive(this.manifest.meta.alias) : false;
}
}
export type UmbTiptapToolbarValue = Array<Array<Array<string>>>;

23
src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/property-editors/property-editor-ui-tiptap-toolbar-configuration.element.ts
View File

@@ -1,17 +1,10 @@
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
import {
customElement,
css,
html,
property,
state,
repeat,
nothing,
type PropertyValueMap,
} from '@umbraco-cms/backoffice/external/lit';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import type { UmbTiptapToolbarValue } from '../extensions/types.js';
import { customElement, css, html, property, state, repeat, nothing } from '@umbraco-cms/backoffice/external/lit';
import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
import { UmbPropertyValueChangeEvent, type UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/property-editor';
import type { PropertyValueMap } from '@umbraco-cms/backoffice/external/lit';
type Extension = {
alias: string;
@@ -25,7 +18,7 @@ export class UmbPropertyEditorUiTiptapToolbarConfigurationElement
implements UmbPropertyEditorUiElement
{
@property({ attribute: false })
set value(value: string[][][] | undefined) {
set value(value: UmbTiptapToolbarValue | undefined) {
if (!value) {
this.#useDefault = true;
this.#value = [[[]]];
@@ -36,14 +29,14 @@ export class UmbPropertyEditorUiTiptapToolbarConfigurationElement
this.#value = value.map((rows) => rows.map((groups) => [...groups]));
}
get value(): string[][][] {
get value(): UmbTiptapToolbarValue {
// TODO: This can be optimized with cashing;
return this.#value.map((rows) => rows.map((groups) => [...groups]));
}
#useDefault = false;
#value: string[][][] = [[[]]];
#value: UmbTiptapToolbarValue = [[[]]];
@state()
_extensions: Extension[] = [];