search

GoogleChromeLabs / shadow-selection-polyfill

Polyfill for shadowRoot.getSelection() in Safari
https://googlechromelabs.github.io/shadow-selection-polyfill/demo.html
Apache License 2.0
29 stars 7 forks source link

caret position in contenteditable div in shadow resets to start of text when trying to advance at end of text (Safari) #8

Open jhbrown94 opened 4 years ago

jhbrown94 commented 4 years ago

On Safari: If you embed a contenteditable div in a shadow dom, when you hit return, the caret jumps back to the beginning of the div.

Here's code to reproduce. HTML:

<!DOCTYPE HTML>
<html>
<meta name="viewport" content="initial-scale=1.0">
<head>
  <meta charset="UTF-8">
  <title>CEDom</title>
  <script src="test-editable.js"></script>
</head>

<body>

  <div style="width: 640px; height: 400px; border-width: 1px; border-style: solid; border-color: black;">
  <test-editable "width: 100%; height: 100%;"></test-editable>
</div>

</body>
</html>

JS -- custom element definition:

const shadow = require('shadow-selection-polyfill');

class TestEditable extends HTMLElement {

  constructor() {
    super();
    const self = this;
    var shadowRoot = self.attachShadow({mode: 'open'});
    let div = document.createElement('div');
    div.setAttribute("contenteditable", "true");
    shadowRoot.appendChild(div);
  }
}

// Define the new element
customElements.define('test-editable', TestEditable);
jhbrown94 commented 4 years ago

Similarly, trying to arrow-key past the end of text causes the caret to reset to the start of text.

samthor commented 4 years ago

Thanks for the bug report. I appreciate that editable areas are an important reason for this polyfill. I've been on holiday and I'll look in the next couple of days.

jhbrown94 commented 4 years ago

Thanks, Sam. After I filed this, I came to believe supporting contenteditable it was going to involve more substantial rework, so I started in on a variant approach, heavily influenced by what youall have done here. I'll let you know if I get it to a shareable state.

Jeremy

On Mon, Sep 14, 2020 at 12:59 AM Sam Thorogood notifications@github.com wrote:

Thanks for the bug report. I appreciate that editable areas are an important reason for this polyfill. I've been on holiday and I'll look in the next couple of days.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/GoogleChromeLabs/shadow-selection-polyfill/issues/8#issuecomment-691810803, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABZFQ5TLUHRBHHWX6M7AGP3SFWPMTANCNFSM4RANHDAQ .

jhbrown94 commented 4 years ago

FWIW, I just released my effort at v0.1.1 -- https://www.npmjs.com/package/@jhbrown94/selectionrange

samthor commented 4 years ago

Thanks for contributing in this space! Your code seems much more well documented than mine :)

I want these polyfills to go away, obviously, and some better spec to appear (I know that Safari doesn't like this spec but has something else in mind). But there's definitely room for innovation here, thanks.

On Thu, 17 Sep 2020 at 05:56, Jeremy H. Brown notifications@github.com wrote:

FWIW, I just released my effort at v0.1.1 -- https://www.npmjs.com/package/@jhbrown94/selectionrange

— You are receiving this because you were assigned. Reply to this email directly, view it on GitHub https://github.com/GoogleChromeLabs/shadow-selection-polyfill/issues/8#issuecomment-693631945, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAA5DEDSGHQ2A7FZP46UX7LSGEJ7DANCNFSM4RANHDAQ .

jhbrown94 commented 4 years ago

Thanks for the kind words. And also, the code and techniques -- I would not have thought to split characters off to modify selection!!

And yeah, a real spec for this would be great -- the inconsistencies are murder. From Googling around it seems like this issue is pretty stalled out at the moment, though.