Navigation and Editing not compatible with web components

[drewble]

Trying to use Shoelace Custom Elements with EditorJS. I can get the elements to render, but I can't use backspace or delete to edit text, using the arrows changes focused block, and tab navigation within the block skips the <sl-input> elements. I have tried tracking down the BACKSPACE keyboard event, but have not figured anything out. It seems to follow the same path through editor.js as a regular input element.

Steps to reproduce:

Use Shoelace elements in a custom block.

import { html, render } from 'lit-html'
import 'https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.13.1/cdn/components/input/input.js';
import 'https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.13.1/cdn/components/checkbox/checkbox.js';

export default class MyBlock {
  render() {
    this.wrapper = document.createElement('div')

    const element = html`
      <sl-checkbox name="isNumbered" value="0" class="mb-5" >Numbered Item?</sl-checkbox>
      <sl-input data-field="title" class="mb-5" placeholder="Title..."></sl-input>
      <sl-input data-field="subheading" class="mb-5" placeholder="Subheading..."></sl-input>
      <div data-field="text" class="border border-solid border-gray-300 hover:border-gray-400 rounded h-64 mb-5 p-2 overflow-scroll" contentEditable="true"></div>
    `

    render(element, this.wrapper)

    return this.wrapper
  }
}

Expected behavior:

Expect the form elements to behave as normal HTML elements with editability and navigation. Using Shoelace elements directly in the HTML doc demonstrate the expected behavior, but inside an EditorJS instance, backspace, tab, and arrows do no work as expected.

Screenshots: MacBook, Firefox, macOS 14.3

Editor.js version: 2.29.0

[samavati]

same here 👍🏻