Add support for read-only and non-selectable elements (#5374)

* Add `isElementReadOnly`

fix delete while selected

fix type while selected

fix failing test

add tests

add e2e test

linter fixes

add changeset

* fix yarn build:next

* Add `isSelectable`

playwright/integration/examples/inlines.test.ts

@@ -14,4 +14,32 @@ test.describe('Inlines example', () => {
         .innerText()
     ).toContain('hyperlink')
   })
+
+  test('arrow keys skip over read-only inline', async ({ page }) => {
+    const badge = await page.locator('text=Approved >> xpath=../../..')
+
+    // Put cursor after the badge
+    await badge.evaluate(badgeElement => {
+      const range = document.createRange()
+      range.setStartAfter(badgeElement, 0)
+      range.setEndAfter(badgeElement, 0)
+      const selection = window.getSelection()
+      selection.removeAllRanges()
+      selection.addRange(range)
+    })
+
+    const getSelectionContainerText = () =>
+      page.evaluate(() => {
+        const selection = window.getSelection()
+        return selection.anchorNode.parentNode.innerText
+      })
+
+    expect(await getSelectionContainerText()).toBe('.')
+    await page.keyboard.press('ArrowLeft')
+    expect(await getSelectionContainerText()).toBe(
+      '! Here is a read-only inline: '
+    )
+    await page.keyboard.press('ArrowRight')
+    expect(await getSelectionContainerText()).toBe('.')
+  })
 })