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

add markdown editor

Browse Source
This commit is contained in:
Mads Rasmussen
2023-01-09 16:23:09 +01:00
parent bfda737224
commit b49dab5def
9 changed files with 132 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/Umbraco.MarkdownEditor.ts Normal file
View File

@@ -0,0 +1,8 @@
import type { ManifestPropertyEditorModel } from '@umbraco-cms/models';
export const manifest: ManifestPropertyEditorModel = {
type: 'propertyEditorModel',
name: 'Markdown Editor',
alias: 'Umbraco.MarkdownEditor',
meta: {},
};

8
src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/manifests.ts
View File

@@ -13,6 +13,7 @@ import { manifest as textArea } from './Umbraco.TextArea';
import { manifest as slider } from './Umbraco.Slider';
import { manifest as trueFalse } from './Umbraco.TrueFalse';
import { manifest as tags } from './Umbraco.Tags';
import { manifest as markdownEditor } from './Umbraco.MarkdownEditor';
import type { ManifestPropertyEditorModel } from '@umbraco-cms/models';
@@ -32,6 +33,7 @@ export const manifests: Array<ManifestPropertyEditorModel> = [
slider,
trueFalse,
tags,
markdownEditor,
{
type: 'propertyEditorModel',
name: 'Decimal',
@@ -50,12 +52,6 @@ export const manifests: Array<ManifestPropertyEditorModel> = [
alias: 'Umbraco.Integer',
meta: {},
},
{
type: 'propertyEditorModel',
name: 'Markdown editor',
alias: 'Umbraco.MarkdownEditor',
meta: {},
},
{
type: 'propertyEditorModel',
name: 'Rich Text Editor',

2
src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/manifests.ts
View File

@@ -13,6 +13,7 @@ import { manifest as textArea } from './textarea/manifests';
import { manifest as slider } from './slider/manifests';
import { manifest as toggle } from './toggle/manifests';
import { manifest as tags } from './tags/manifests';
import { manifest as markdownEditor } from './markdown-editor/manifests';
import type { ManifestPropertyEditorUI } from '@umbraco-cms/models';
@@ -32,6 +33,7 @@ export const manifests: Array<ManifestPropertyEditorUI> = [
slider,
toggle,
tags,
markdownEditor,
{
type: 'propertyEditorUI',
alias: 'Umb.PropertyEditorUI.BlockList',

36
src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/markdown-editor/manifests.ts Normal file
View File

@@ -0,0 +1,36 @@
import type { ManifestPropertyEditorUI } from '@umbraco-cms/models';
export const manifest: ManifestPropertyEditorUI = {
type: 'propertyEditorUI',
alias: 'Umb.PropertyEditorUI.MarkdownEditor',
name: 'Markdown Editor Property Editor UI',
loader: () => import('./property-editor-ui-markdown-editor.element'),
meta: {
label: 'Markdown Editor',
propertyEditorModel: 'Umbraco.MarkdownEditor',
icon: 'umb:code',
group: 'pickers',
config: {
properties: [
{
alias: 'preview',
label: 'Preview',
description: 'Display a live preview',
propertyEditorUI: 'Umb.PropertyEditorUI.Toggle',
},
{
alias: 'defaultValue',
label: 'Default value',
description: 'If value is blank, the editor will show this',
propertyEditorUI: 'Umb.PropertyEditorUI.TextArea',
},
{
alias: 'overlaySize',
label: 'Overlay Size',
description: 'Select the width of the overlay.',
propertyEditorUI: 'Umb.PropertyEditorUI.OverlaySize',
},
],
},
},
};

29
src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/markdown-editor/property-editor-ui-markdown-editor.element.ts Normal file
View File

@@ -0,0 +1,29 @@
import { html, LitElement } from 'lit';
import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { customElement, property } from 'lit/decorators.js';
/**
* @element umb-property-editor-ui-markdown-editor
*/
@customElement('umb-property-editor-ui-markdown-editor')
export class UmbPropertyEditorUIMarkdownEditorElement extends LitElement {
static styles = [UUITextStyles];
@property()
value = '';
@property({ type: Array, attribute: false })
public config = [];
render() {
return html`<div>umb-property-editor-ui-markdown-editor</div>`;
}
}
export default UmbPropertyEditorUIMarkdownEditorElement;
declare global {
interface HTMLElementTagNameMap {
'umb-property-editor-ui-markdown-editor': UmbPropertyEditorUIMarkdownEditorElement;
}
}

15
src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/markdown-editor/property-editor-ui-markdown-editor.stories.ts Normal file
View File

@@ -0,0 +1,15 @@
import { Meta, Story } from '@storybook/web-components';
import { html } from 'lit-html';
import type { UmbPropertyEditorUIMarkdownEditorElement } from './property-editor-ui-markdown-editor.element';
import './property-editor-ui-markdown-editor.element';
export default {
title: 'Property Editor UIs/Markdown Editor',
component: 'umb-property-editor-ui-markdown-editor',
id: 'umb-property-editor-ui-markdown-editor',
} as Meta;
export const AAAOverview: Story<UmbPropertyEditorUIMarkdownEditorElement> = () =>
html`<umb-property-editor-ui-markdown-editor></umb-property-editor-ui-markdown-editor>`;
AAAOverview.storyName = 'Overview';

21
src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/markdown-editor/property-editor-ui-markdown-editor.test.ts Normal file
View File

@@ -0,0 +1,21 @@
import { expect, fixture, html } from '@open-wc/testing';
import { UmbPropertyEditorUIMarkdownEditorElement } from './property-editor-ui-markdown-editor.element';
import { defaultA11yConfig } from '@umbraco-cms/test-utils';
describe('UmbPropertyEditorUIMarkdownEditorElement', () => {
let element: UmbPropertyEditorUIMarkdownEditorElement;
beforeEach(async () => {
element = await fixture(
html` <umb-property-editor-ui-markdown-editor></umb-property-editor-ui-markdown-editor> `
);
});
it('is defined with its own instance', () => {
expect(element).to.be.instanceOf(UmbPropertyEditorUIMarkdownEditorElement);
});
it('passes the a11y audit', async () => {
await expect(element).shadowDom.to.be.accessible(defaultA11yConfig);
});
});

13
src/Umbraco.Web.UI.Client/src/core/mocks/data/data-type.data.ts
View File

@@ -252,6 +252,19 @@ export const data: Array<DataTypeDetails> = [
propertyEditorUIAlias: 'Umb.PropertyEditorUI.Tags',
data: [],
},
{
name: 'Markdown Editor',
type: 'data-type',
icon: 'umb:autofill',
hasChildren: false,
key: 'dt-markdownEditor',
isContainer: false,
parentKey: null,
isFolder: false,
propertyEditorModelAlias: 'Umbraco.MarkdownEditor',
propertyEditorUIAlias: 'Umb.PropertyEditorUI.MarkdownEditor',
data: [],
},
];
// Temp mocked database

6
src/Umbraco.Web.UI.Client/src/core/mocks/data/document.data.ts
View File

@@ -96,6 +96,12 @@ export const data: Array<DocumentDetails> = [
description: '',
dataTypeKey: 'dt-tags',
},
{
alias: 'markdownEditor',
label: 'MarkdownEditor',
description: '',
dataTypeKey: 'dt-markdownEditor',
},
],
data: [],
variants: [],