feat(text-editor): delegate focus to prosemirror

Makes sure to delegate the focus to prosemirror if the text editor get's
the focus.

Author: civing

src/components/text-editor/prosemirror-adapter/prosemirror-adapter.tsx

@@ -3,6 +3,7 @@ import {
     Element,
     Event,
     EventEmitter,
+    Host,
     Prop,
     State,
     Watch,
@@ -205,18 +206,20 @@ export class ProsemirrorAdapter {
     }
 
     public render() {
-        return [
-            <div id="editor" />,
-            <div class="toolbar">
-                <limel-action-bar
-                    ref={(el) => (this.actionBarElement = el)}
-                    accessibleLabel="Toolbar"
-                    actions={this.actionBarItems}
-                    onItemSelected={this.handleActionBarItem}
-                />
-            </div>,
-            this.renderLinkMenu(),
-        ];
+        return (
+            <Host onFocus={this.handleFocus}>
+                <div id="editor" />,
+                <div class="toolbar">
+                    <limel-action-bar
+                        ref={(el) => (this.actionBarElement = el)}
+                        accessibleLabel="Toolbar"
+                        actions={this.actionBarItems}
+                        onItemSelected={this.handleActionBarItem}
+                    />
+                </div>
+                {this.renderLinkMenu()}
+            </Host>
+        );
     }
 
     renderLinkMenu() {
@@ -452,9 +455,9 @@ export class ProsemirrorAdapter {
         this.link = event.detail;
     };
 
-    public setFocus() {
+    private handleFocus = () => {
         this.view?.focus();
-    }
+    };
 
     private handleNewLinkSelection = (text: string, href: string) => {
         this.link.text = text;

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"></limel-prosemirror-adapter>
+          <limel-prosemirror-adapter aria-controls=${ariaControls[0]} contenttype="markdown" id=${ids[0]} language="en" tabindex="0"></limel-prosemirror-adapter>
         </mock:shadow-root>
       </limel-text-editor>`);
     });
@@ -74,7 +74,7 @@ describe('limel-text-editor', () => {
                 value: { attribute: 'value', value: 'test' },
                 disabled: { attribute: 'tabindex', value: false },
             },
-            ['test', null],
+            ['test', '0'],
         ],
         [
             {

src/components/text-editor/text-editor.tsx

@@ -30,7 +30,7 @@ import { EditorUiType } from './types';
  */
 @Component({
     tag: 'limel-text-editor',
-    shadow: true,
+    shadow: { delegatesFocus: true },
     styleUrl: 'text-editor.scss',
 })
 export class TextEditor implements FormComponent<string> {
@@ -244,7 +244,7 @@ export class TextEditor implements FormComponent<string> {
                 value={this.value}
                 aria-controls={this.helperTextId}
                 id={this.editorId}
-                tabindex={this.disabled ? -1 : undefined}
+                tabindex={this.disabled ? -1 : 0}
                 aria-disabled={this.disabled}
                 language={this.language}
                 triggerCharacters={this.triggers}