fix(text-editor): move delegate logic to prosemirror adapter

Lundalogik · Dec 2, 2024 · 9765130 · 9765130
1 parent fcd8d44
commit 9765130
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 5 deletions.
diff --git 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<string>) => void;
         // @alpha

diff --git 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
@@ -25,7 +25,7 @@ describe('limel-text-editor', () => {
             <span class="leading-outline"></span>
             <span class="trailing-outline"></span>
           </span>
-          <limel-prosemirror-adapter aria-controls=${ariaControls[0]} contenttype="markdown" id=${ids[0]} language="en" tabindex="0"></limel-prosemirror-adapter>
+          <limel-prosemirror-adapter aria-controls=${ariaControls[0]} contenttype="markdown" id=${ids[0]} language="en"></limel-prosemirror-adapter>
         </mock:shadow-root>
       </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
@@ -244,10 +244,10 @@ export class TextEditor implements FormComponent<string> {
                 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(),