fix: treat contenteditable="plaintext-only" as editable

src/event/behavior/keypress.ts

@@ -35,7 +35,10 @@ behavior.keypress = (event, target, instance) => {
   if (isEditable(target)) {
     const inputType =
       event.key === 'Enter'
-        ? isContentEditable(target) && !instance.system.keyboard.modifiers.Shift
+        ? isContentEditable(target) &&
+        // A plaintext-only host has no paragraphs to break.
+        target.getAttribute('contenteditable') !== 'plaintext-only' &&
+        !instance.system.keyboard.modifiers.Shift
           ? 'insertParagraph'
           : 'insertLineBreak'
         : 'insertText'

src/utils/edit/isContentEditable.ts

@@ -5,20 +5,23 @@ export function isContentEditable(
   return (
     element.hasAttribute('contenteditable') &&
     (element.getAttribute('contenteditable') == 'true' ||
-      element.getAttribute('contenteditable') == '')
+        element.getAttribute('contenteditable') == '' ||
+        element.getAttribute('contenteditable') == 'plaintext-only')
   )
 }
 
 /**
  * If a node is a contenteditable or inside one, return that element.
  */
 export function getContentEditable(node: Node): Element | null {
-  const element = getElement(node)
-  return (
-    element &&
-    (element.closest('[contenteditable=""]') ||
-      element.closest('[contenteditable="true"]'))
-  )
+  let element = getElement(node)
+  while (element) {
+    if (isContentEditable(element)) {
+      return element
+    }
+    element = element.parentElement
+  }
+  return null
 }
 
 function getElement(node: Node) {

src/utils/focus/selector.ts

@@ -5,6 +5,7 @@ export const FOCUSABLE_SELECTOR = [
   'textarea:not([disabled])',
   '[contenteditable=""]',
   '[contenteditable="true"]',
+  '[contenteditable="plaintext-only"]',
   'a[href]',
   '[tabindex]:not([disabled])',
   'details > summary',

tests/clipboard/paste.ts

@@ -159,3 +159,20 @@ describe('without Clipboard API', () => {
     expect(getEvents()).toHaveLength(0)
   })
 })
+
+test.each([['true'], ['plaintext-only']])(
+  'paste into contenteditable="%s"',
+  async attr => {
+    const {element, getEvents, user} = setup(
+      `<div contenteditable="${attr}">foo</div>`,
+      {focus: false},
+    )
+
+    await user.click(element)
+    await user.paste('bar')
+
+    expect(element).toHaveTextContent('foobar')
+    expect(getEvents('paste')).toHaveLength(1)
+    expect(getEvents('input')).toHaveLength(1)
+  },
+)

tests/event/behavior/keypress.ts

@@ -75,6 +75,18 @@ cases(
       inputType: 'insertLineBreak',
       expectedHtml: '\n',
     },
+    'trigger insertLineBreak on contenteditable=plaintext-only': {
+      html: `<div contenteditable="plaintext-only"></div>`,
+      inputType: 'insertLineBreak',
+      expectedHtml: '\n',
+    },
+    'with shiftKey=true trigger insertLineBreak on contenteditable=plaintext-only':
+      {
+        html: `<div contenteditable="plaintext-only"></div>`,
+        shiftKey: true,
+        inputType: 'insertLineBreak',
+        expectedHtml: '\n',
+      },
   },
 )
 

tests/utility/type.ts

@@ -1,5 +1,16 @@
 import {setup} from '#testHelpers'
 
+test('type into contenteditable plaintext-only', async () => {
+  const {element, user} = setup(
+    '<div contenteditable="plaintext-only">foo</div>',
+    {focus: false},
+  )
+
+  await user.type(element, 'bar')
+
+  expect(element).toHaveTextContent('foobar')
+})
+
 test('type into input', async () => {
   const {element, getEventSnapshot, user} = setup('<input value="foo"/>', {
     focus: false,

tests/utils/edit/isContentEditable.ts

@@ -1,13 +1,41 @@
-import {setup} from '#testHelpers'
-import {isContentEditable} from '#src/utils'
+import {render, setup} from '#testHelpers'
+import {getContentEditable, isContentEditable} from '#src/utils'
 
 test('report if element is contenteditable', async () => {
   const {elements} = setup(
-    `<div></div><div contenteditable="false"></div><div contenteditable></div><div contenteditable="true"></div>`,
+    `<div></div><div contenteditable="false"></div><div contenteditable></div><div contenteditable="true"></div><div contenteditable="plaintext-only"></div>`,
   )
 
   expect(isContentEditable(elements[0])).toBe(false)
   expect(isContentEditable(elements[1])).toBe(false)
   expect(isContentEditable(elements[2])).toBe(true)
   expect(isContentEditable(elements[3])).toBe(true)
+  expect(isContentEditable(elements[4])).toBe(true)
+})
+
+test.each([['true'], ['plaintext-only']])(
+  'resolve the nearest editing host when it is contenteditable="%s"',
+  async attr => {
+    const {element} = render(
+      `<div contenteditable=""><div contenteditable="${attr}"><span>foo</span></div></div>`,
+    )
+    const host = element.firstElementChild
+    const span = element.querySelector('span') as Element
+
+    expect(getContentEditable(span)).toBe(host)
+  },
+)
+
+test('resolve the element itself when it is the editing host', async () => {
+  const {element} = render(`<div contenteditable="plaintext-only">foo</div>`)
+
+  expect(getContentEditable(element)).toBe(element)
+})
+
+test('resolve no editing host outside a contenteditable', async () => {
+  const {element} = render(`<div><span>foo</span></div>`)
+
+  expect(getContentEditable(element.querySelector('span') as Element)).toBe(
+    null,
+  )
 })

tests/utils/edit/isEditable.ts

@@ -23,6 +23,7 @@ test.each([
   [`<textarea></textarea>`],
   [`<div contenteditable></div>`],
   [`<div contenteditable="true"></div>`],
+  [`<div contenteditable="plaintext-only"></div>`],
 ])('consider %s an editable element', html => {
   const {element} = render(html)