diff --git a/etc/lime-elements.api.md b/etc/lime-elements.api.md index a98dbe7fbd..210c99209a 100644 --- a/etc/lime-elements.api.md +++ b/etc/lime-elements.api.md @@ -603,6 +603,7 @@ export namespace Components { "contentType": 'markdown' | 'html'; // @alpha "customElements": CustomElementDefinition[]; + "disabled"?: boolean; "language": Languages; // @alpha "triggerCharacters": TriggerCharacter[]; @@ -1631,6 +1632,7 @@ namespace JSX_2 { "contentType"?: 'markdown' | 'html'; // @alpha "customElements"?: CustomElementDefinition[]; + "disabled"?: boolean; "language"?: Languages; "onChange"?: (event: LimelProsemirrorAdapterCustomEvent) => void; // @alpha diff --git a/src/components/text-editor/prosemirror-adapter/prosemirror-adapter.tsx b/src/components/text-editor/prosemirror-adapter/prosemirror-adapter.tsx index 1559ba82c1..c44baa73ca 100644 --- a/src/components/text-editor/prosemirror-adapter/prosemirror-adapter.tsx +++ b/src/components/text-editor/prosemirror-adapter/prosemirror-adapter.tsx @@ -84,6 +84,15 @@ export class ProsemirrorAdapter { @Prop({ reflect: true }) public language: Languages; + /** + * Set to `true` to disable the field. + * Use `disabled` to indicate that the field can normally be interacted + * with, but is currently disabled. This tells the user that if certain + * requirements are met, the field may become enabled again. + */ + @Prop({ reflect: true }) + public disabled?: boolean = false; + /** * set to private to avoid usage while under development * @@ -456,7 +465,9 @@ export class ProsemirrorAdapter { }; private handleFocus = () => { - this.view?.focus(); + if (!this.disabled) { + this.view?.focus(); + } }; private handleNewLinkSelection = (text: string, href: string) => { diff --git a/src/components/text-editor/text-editor.spec.tsx b/src/components/text-editor/text-editor.spec.tsx index d1f05db410..7da57bab79 100644 --- a/src/components/text-editor/text-editor.spec.tsx +++ b/src/components/text-editor/text-editor.spec.tsx @@ -25,7 +25,7 @@ describe('limel-text-editor', () => { - + `); }); @@ -74,14 +74,14 @@ describe('limel-text-editor', () => { value: { attribute: 'value', value: 'test' }, disabled: { attribute: 'tabindex', value: false }, }, - ['test', '0'], + ['test', null], ], [ { value: { attribute: 'value', value: 'test' }, disabled: { attribute: 'tabindex', value: true }, }, - ['test', '-1'], + ['test', null], ], ])( 'Props get passed down into the adapter', diff --git a/src/components/text-editor/text-editor.tsx b/src/components/text-editor/text-editor.tsx index 16589770bc..f810d1a0fd 100644 --- a/src/components/text-editor/text-editor.tsx +++ b/src/components/text-editor/text-editor.tsx @@ -244,10 +244,10 @@ export class TextEditor implements FormComponent { value={this.value} aria-controls={this.helperTextId} id={this.editorId} - tabindex={this.disabled ? -1 : 0} aria-disabled={this.disabled} language={this.language} triggerCharacters={this.triggers} + disabled={this.disabled} />, this.renderPlaceholder(), this.renderHelperLine(),