Non-editable div with fixed height in non-void block element - looking for a cross-browser solution

[12joan]

My goal is to render a non-editable div with a fixed height inside a non-void block element, but I'm struggling to do so in a way that is free from errors in all browsers. When clicking inside this non-editable div, the user's cursor should not be visible and typing should do nothing. Has anyone managed to achieve this?

I've documented my attempts below, tested using this code sandbox and BrowserStack.

Here's a recording of the results I got in Chrome:

recording.mp4

Results

Parameters	Firefox 134	Firefox 133	Chrome	Safari
No wrapper Empty	❌ Visible cursor ❌ Error on type	✅ No cursor ❌ Error on type	⚠️ Sometimes visible cursor ⚠️ Type after non-editable	✅ No cursor ✅ Typing does nothing
No wrapper Non-empty	❌ Visible cursor ❌ Error on type	✅ No cursor ❌ Error on type	✅ No cursor ✅ Typing does nothing	✅ No cursor ✅ Typing does nothing
Plain div wrapper Empty	❌ Visible cursor ❌ Error on type	✅ No cursor ❌ Error on type	⚠️ Sometimes visible cursor ❌ Error on type ❌ Type before non-editable	✅ No cursor ✅ Typing does nothing
Plain div wrapper Non-empty	❌ Visible cursor ❌ Error on type	✅ No cursor ❌ Error on type	✅ No cursor ✅ Typing does nothing	✅ No cursor ✅ Typing does nothing
Non-editable wrapper Empty	❌ Visible cursor ❌ Error on type	✅ No cursor ❌ Error on type	✅ No cursor ✅ Typing does nothing	✅ No cursor ✅ Typing does nothing
Non-editable wrapper Non-empty	❌ Visible cursor ❌ Error on type	✅ No cursor ❌ Error on type	✅ No cursor ✅ Typing does nothing	✅ No cursor ✅ Typing does nothing

Parameters

In all cases:

• A Slate editor is rendered containing a single block element with text "Hello world"
• A div with contentEditable={false} and style={{ height: 40, backgroundColor: 'red' }} is rendered inside the block, before the {children}
• The user clicks on the non-editable div and attempts to type.

No wrapper - The parent of the non-editable div is the Slate element's div.

<div {...attributes}>
  <div contentEditable={false} style={style} />
  {children}
</div>

Plain div wrapper - The parent of the non-editable div is a plain div with no attributes, the parent of which is the Slate element's div.

<div {...attributes}>
  <div>
    <div contentEditable={false} style={style} />
  </div>
  {children}
</div>

Non-editable wrapper - The parent of the non-editable div is another non-editable div, the parent of which is the Slate element's div.

<div {...attributes}>
  <div contentEditable={false}>
    <div contentEditable={false} style={style} />
  </div>
  {children}
</div>

Empty - The non-editable div contains no text.

<div contentEditable={false} style={style} />

Non-empty - The non-editable div contains text.

<div contentEditable={false} style={style}>Non-empty</div>

Outcomes

✅ No cursor - The expected behaviour. When clicking the non-editable div, the cursor is not visible.

❌ Visible cursor - The cursor is visible inside the non-editable div.

⚠️ Sometimes visible cursor - The cursor is sometimes visible when clicking inside the non-editable, but not always. Clicking repeatedly usually causes the cursor to appear inside the non-editable div.

✅ Typing does nothing - The expected behaviour. After clicking the non-editable div, typing does not cause an error and no text is inserted.

❌ Error on type - After clicking the non-editable div and attempting to type, Slate throws an error Cannot resolve a Slate point from DOM point. Unless stated otherwise, no text is inserted.

⚠️ Type after non-editable - After clicking the non-editable div, typing inserts text after the non-editable div as part of the Slate element's regular text children.

❌ Type before non-editable - After clicking the non-editable div, typing inserts text before the non-editable div in a position where text cannot ordinarily be inserted.

Summary

Firefox always throws an error. In addition, the latest stable version of Firefox seems to contain a regression where the cursor is always visible when clicking inside a contenteditable="false" element.

Chrome is inconsistent in its handling of non-editable divs. It works fine when the div has text content or when using two nested divs with contenteditable="false", but other cases exhibit problems.

Safari works fine in all cases.