MarkdownEditor: code/UI tweaks

This commit is contained in:
leekelleher
2024-05-24 20:03:03 +01:00
parent 768f2f0f90
commit db0cfd4635
3 changed files with 15 additions and 12 deletions

View File

@@ -48,10 +48,10 @@ export class UmbInputMarkdownElement extends UUIFormControlMixin(UmbLitElement,
#editor?: UmbCodeEditorController;
@query('umb-code-editor')
_codeEditor?: UmbCodeEditorElement;
private _codeEditor?: UmbCodeEditorElement;
@state()
_actionExtensions: Array<monaco.editor.IActionDescriptor> = [];
private _actionExtensions: Array<monaco.editor.IActionDescriptor> = [];
private _modalContext?: UmbModalManagerContext;
@@ -92,7 +92,7 @@ export class UmbInputMarkdownElement extends UUIFormControlMixin(UmbLitElement,
id: api.getUnique(),
label: api.getLabel(),
keybindings: api.getKeybindings(),
run: async () => await api.execute({ editor: this.#editor }),
run: async () => await api.execute({ editor: this.#editor, overlaySize: this.overlaySize }),
};
this.#editor?.monacoEditor?.addAction(action);
this._actionExtensions.push(action);

View File

@@ -8,10 +8,11 @@ import type { UUIModalSidebarSize } from '@umbraco-cms/backoffice/external/uui';
import '../../components/input-markdown-editor/index.js';
const elementName = 'umb-property-editor-ui-markdown-editor';
/**
* @element umb-property-editor-ui-markdown-editor
*/
@customElement('umb-property-editor-ui-markdown-editor')
@customElement(elementName)
export class UmbPropertyEditorUIMarkdownEditorElement extends UmbLitElement implements UmbPropertyEditorUiElement {
@property()
value = '';
@@ -20,11 +21,13 @@ export class UmbPropertyEditorUIMarkdownEditorElement extends UmbLitElement impl
private _preview?: boolean;
@state()
private _overlaySize?: UUIModalSidebarSize;
private _overlaySize: UUIModalSidebarSize = 'small';
public set config(config: UmbPropertyEditorConfigCollection | undefined) {
this._preview = config?.getValueByAlias('preview');
this._overlaySize = config?.getValueByAlias('overlaySize') ?? undefined;
if (!config) return;
this._preview = config.getValueByAlias('preview');
this._overlaySize = config.getValueByAlias('overlaySize') ?? 'small';
}
#onChange(event: Event & { target: UmbInputMarkdownElement }) {
@@ -43,10 +46,10 @@ export class UmbPropertyEditorUIMarkdownEditorElement extends UmbLitElement impl
}
}
export default UmbPropertyEditorUIMarkdownEditorElement;
export { UmbPropertyEditorUIMarkdownEditorElement as element };
declare global {
interface HTMLElementTagNameMap {
'umb-property-editor-ui-markdown-editor': UmbPropertyEditorUIMarkdownEditorElement;
[elementName]: UmbPropertyEditorUIMarkdownEditorElement;
}
}

View File

@@ -1,10 +1,10 @@
import { UMB_LINK_PICKER_MODAL } from '../link-picker-modal/link-picker-modal.token.js';
import { UmbControllerBase } from '@umbraco-cms/backoffice/class-api';
import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
import { monaco } from '@umbraco-cms/backoffice/external/monaco-editor';
import type { UUIModalSidebarSize } from '@umbraco-cms/backoffice/external/uui';
import { UmbControllerBase } from '@umbraco-cms/backoffice/class-api';
import { UmbLocalizationController } from '@umbraco-cms/backoffice/localization-api';
import { UMB_MODAL_MANAGER_CONTEXT } from '@umbraco-cms/backoffice/modal';
import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
import type { UUIModalSidebarSize } from '@umbraco-cms/backoffice/external/uui';
export class UmbUrlPickerMonacoMarkdownEditorAction extends UmbControllerBase {
#localize = new UmbLocalizationController(this);