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

Merge branch 'main' into v14/chore/check-paths-in-dist-cms

Browse Source
This commit is contained in:
Jacob Overgaard
2024-07-25 15:43:22 +02:00
committed by GitHub
parent 5b49bb85c0 78a571705a
commit 7b65ae1e2a
13 changed files with 84 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/Umbraco.Web.UI.Client/.github/README.md vendored
View File

@@ -2,7 +2,9 @@
This is the working repository of the upcoming new Backoffice to Umbraco CMS.
[![Build and test](https://github.com/umbraco/Umbraco.CMS.Backoffice/actions/workflows/build_test.yml/badge.svg)](https://github.com/umbraco/Umbraco.CMS.Backoffice/actions/workflows/build_test.yml)
[![Storybook](https://github.com/umbraco/Umbraco.CMS.Backoffice/actions/workflows/azure-static-web-apps-ambitious-stone-0033b3603.yml/badge.svg)](https://github.com/umbraco/Umbraco.CMS.Backoffice/actions/workflows/azure-static-web-apps-ambitious-stone-0033b3603.yml)
[![SonarCloud](https://sonarcloud.io/api/project_badges/measure?project=umbraco_Umbraco.CMS.Backoffice&metric=alert_status)](https://sonarcloud.io/summary/new_code?id=umbraco_Umbraco.CMS.Backoffice)
## Installation instructions

9
src/Umbraco.Web.UI.Client/sonar-project.properties Normal file
View File

@@ -0,0 +1,9 @@
# Define the same root directory for sources and tests
sonar.sources = src/
sonar.tests = src/
# Include test files in the test scope
sonar.test.inclusions = src/**/*.test.ts
# Exclude test and stories files from the source scope
sonar.exclusions = src/**/*.test.ts, src/**/*.stories.ts

2
src/Umbraco.Web.UI.Client/src/packages/core/components/table/table.element.ts
View File

@@ -279,7 +279,7 @@ export class UmbTableElement extends LitElement {
const element = document.createElement('umb-ufm-render') as UmbUfmRenderElement;
element.inline = true;
element.markdown = column.labelTemplate;
element.value = value;
element.value = { value };
return element;
}

4
src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/ufm-component.model.ts
View File

@@ -1,8 +1,8 @@
import type { ManifestApi, UmbApi } from '@umbraco-cms/backoffice/extension-api';
import type { Tokens } from '@umbraco-cms/backoffice/external/marked';
import type { UfmToken } from '@umbraco-cms/backoffice/ufm';
export interface UmbUfmComponentApi extends UmbApi {
render(token: Tokens.Generic): string | undefined;
render(token: UfmToken): string | undefined;
}
export interface MetaUfmComponent {

30
src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/grid/document-grid-collection-view.element.ts
View File

@@ -172,26 +172,26 @@ export class UmbDocumentGridCollectionViewElement extends UmbLitElement {
${repeat(
this._userDefinedProperties,
(column) => column.alias,
(column) => html`
<li>
<span>${column.header}:</span>
${when(
column.nameTemplate,
() => html`
<umb-ufm-render
inline
.markdown=${column.nameTemplate}
.value=${getPropertyValueByAlias(item, column.alias)}></umb-ufm-render>
`,
() => html`${getPropertyValueByAlias(item, column.alias)}`,
)}
</li>
`,
(column) => this.#renderProperty(item, column),
)}
</ul>
`;
}
#renderProperty(item: UmbDocumentCollectionItemModel, column: UmbCollectionColumnConfiguration) {
const value = getPropertyValueByAlias(item, column.alias);
return html`
<li>
<span>${column.header}:</span>
${when(
column.nameTemplate,
() => html`<umb-ufm-render inline .markdown=${column.nameTemplate} .value=${{ value }}></umb-ufm-render>`,
() => html`${value}`,
)}
</li>
`;
}
static override styles = [
UmbTextStyles,
css`

2
src/Umbraco.Web.UI.Client/src/packages/ufm/components/ufm-render/ufm-render.element.ts
View File

@@ -28,7 +28,7 @@ UmbDomPurify.addHook('afterSanitizeAttributes', function (node) {
}
});
const UmbMarked = new Marked({
export const UmbMarked = new Marked({
async: true,
gfm: true,
breaks: true,

12
src/Umbraco.Web.UI.Client/src/packages/ufm/manifests.ts
View File

@@ -4,19 +4,15 @@ export const manifests: Array<ManifestUfmComponent> = [
{
type: 'ufmComponent',
alias: 'Umb.Markdown.LabelValue',
name: 'Label Value Markdown Component',
name: 'Label Value UFM Component',
api: () => import('./ufm-components/label-value.component.js'),
meta: {
marker: '=',
},
meta: { marker: '=' },
},
{
type: 'ufmComponent',
alias: 'Umb.Markdown.Localize',
name: 'Localize Markdown Component',
name: 'Localize UFM Component',
api: () => import('./ufm-components/localize.component.js'),
meta: {
marker: '#',
},
meta: { marker: '#' },
},
];

16
src/Umbraco.Web.UI.Client/src/packages/ufm/plugins/marked-ufm.plugin.ts
View File

@@ -3,7 +3,11 @@ import type { MarkedExtension, Tokens } from '@umbraco-cms/backoffice/external/m
export interface UfmPlugin {
alias: string;
marker: string;
render?: (token: Tokens.Generic) => string | undefined;
render?: (token: UfmToken) => string | undefined;
}
export interface UfmToken extends Tokens.Generic {
text?: string;
}
export function ufm(plugins: Array<UfmPlugin> = []): MarkedExtension {
@@ -12,13 +16,9 @@ export function ufm(plugins: Array<UfmPlugin> = []): MarkedExtension {
return {
name: alias,
level: 'inline',
start: (src: string) => {
const regex = new RegExp(`\\{${marker}`);
const match = src.match(regex);
return match ? match.index : -1;
},
tokenizer(src: string): Tokens.Generic | undefined {
const pattern = `^(?<!\\\\){{?${marker}((?:[a-zA-Z][\\w-]*|[\\{].*?[\\}]+|[\\[].*?[\\]])+)(?<!\\\\)}}?`;
start: (src: string) => src.indexOf(`{${marker}`),
tokenizer: (src: string) => {
const pattern = `^\\{${marker}([^}]*)\\}`;
const regex = new RegExp(pattern);
const match = src.match(regex);

32
src/Umbraco.Web.UI.Client/src/packages/ufm/plugins/marked-ufm.test.ts Normal file
View File

@@ -0,0 +1,32 @@
import { expect } from '@open-wc/testing';
import { ufm } from './marked-ufm.plugin.js';
import { UmbMarked } from '../index.js';
import { UmbUfmLabelValueComponent } from '../ufm-components/label-value.component.js';
import { UmbUfmLocalizeComponent } from '../ufm-components/localize.component.js';
describe('UmbMarkedUfm', () => {
describe('UFM parsing', () => {
const runs = [
{ ufm: '{=prop1}', expected: '<ufm-label-value alias="prop1"></ufm-label-value>' },
{ ufm: '{= prop1}', expected: '<ufm-label-value alias="prop1"></ufm-label-value>' },
{ ufm: '{= prop1 }', expected: '<ufm-label-value alias="prop1"></ufm-label-value>' },
{ ufm: '{{=prop1}}', expected: '{<ufm-label-value alias="prop1"></ufm-label-value>}' },
{ ufm: '{#general_add}', expected: '<umb-localize key="general_add"></umb-localize>' },
];
// Manually configuring the UFM components for testing.
UmbMarked.use(
ufm([
{ alias: 'Umb.Markdown.LabelValue', marker: '=', render: new UmbUfmLabelValueComponent().render },
{ alias: 'Umb.Markdown.Localize', marker: '#', render: new UmbUfmLocalizeComponent().render },
]),
);
runs.forEach((run) => {
it(`Parsing "${run.ufm}"`, async () => {
const markup = await UmbMarked.parseInline(run.ufm);
expect(markup).to.equal(run.expected);
});
});
});
});

5
src/Umbraco.Web.UI.Client/src/packages/ufm/ufm-components/label-value.component.ts
View File

@@ -1,10 +1,11 @@
import type { UfmToken } from '../plugins/marked-ufm.plugin.js';
import { UmbUfmComponentBase } from './ufm-component-base.js';
import type { Tokens } from '@umbraco-cms/backoffice/external/marked';
import './label-value.element.js';
export class UmbUfmLabelValueComponent extends UmbUfmComponentBase {
render(token: Tokens.Generic) {
render(token: UfmToken) {
if (!token.text) return;
return `<ufm-label-value alias="${token.text}"></ufm-label-value>`;
}
}

4
src/Umbraco.Web.UI.Client/src/packages/ufm/ufm-components/label-value.element.ts
View File

@@ -1,5 +1,5 @@
import { UMB_UFM_RENDER_CONTEXT } from '../components/ufm-render/index.js';
import { customElement, property, state } from '@umbraco-cms/backoffice/external/lit';
import { customElement, nothing, property, state } from '@umbraco-cms/backoffice/external/lit';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
const elementName = 'ufm-label-value';
@@ -31,7 +31,7 @@ export class UmbUfmLabelValueElement extends UmbLitElement {
}
override render() {
return this._value ?? `{${this.alias}}`;
return this._value !== undefined ? this._value : nothing;
}
}

5
src/Umbraco.Web.UI.Client/src/packages/ufm/ufm-components/localize.component.ts
View File

@@ -1,8 +1,9 @@
import type { UfmToken } from '../plugins/marked-ufm.plugin.js';
import { UmbUfmComponentBase } from './ufm-component-base.js';
import type { Tokens } from '@umbraco-cms/backoffice/external/marked';
export class UmbUfmLocalizeComponent extends UmbUfmComponentBase {
render(token: Tokens.Generic) {
render(token: UfmToken) {
if (!token.text) return;
return `<umb-localize key="${token.text}"></umb-localize>`;
}
}

4
src/Umbraco.Web.UI.Client/src/packages/ufm/ufm-components/ufm-component-base.ts
View File

@@ -1,7 +1,7 @@
import type { Tokens } from '@umbraco-cms/backoffice/external/marked';
import type { UfmToken } from '../plugins/marked-ufm.plugin.js';
import type { UmbUfmComponentApi } from '@umbraco-cms/backoffice/extension-registry';
export abstract class UmbUfmComponentBase implements UmbUfmComponentApi {
abstract render(token: Tokens.Generic): string | undefined;
abstract render(token: UfmToken): string | undefined;
destroy() {}
}