Re: [w3c/editing] Universal interface to modify content in a JS editor from unrelated JS code. (Issue #551)

johanneswilm left a comment (w3c/editing#551)

I've done some more experimenting with editors and different browsers on what works well for modifying how editors work [1]. Conclusion: `execCommand` works in many situations, but it's not great as it leaves instances of ` ` in the text. 

**Relevant bugs/issues:**
A) Webkit is missing a feature when it comes to initialization of input events in code - maybe due to missing explanations in the input events spec [2]. This can be mitigated by attaching a custom `getTargetRanges()` method to the event [1].

B) Firefox is dropping the contents of the data transfer of a paste event if created in script, but also this can be mitigated similarly [1].

**Working solutions:**
α) The one method that seems to work across all measured cases and browser and doesn't require special support by the JS editor is setting the selection on the range that is to be replaced, then wait for one frame (or some ms), and then execute a synthetic paste event on the editor. Due to issue `B` in Firefox, one has to attach the dataTransfer object twice, like this:

```js
const event = new ClipboardEvent("paste", {
    bubbles: true,
    cancelable: true,
    composed: true,
    clipboardData: dataTransfer,
});
Object.defineProperty(event, "clipboardData", {
    configurable: true,
    value: {
        getData: (format) => dataTransfer.getData(format),
        setData: (format, value) => dataTransfer.setData(format, value),
    },
})
```

[1] https://github.com/johanneswilm/influence-text-editors

[2] https://github.com/w3c/input-events/pull/183

-- 
Reply to this email directly or view it on GitHub:
https://github.com/w3c/editing/issues/551#issuecomment-5995805642
You are receiving this because you are subscribed to this thread.

Message ID: <w3c/editing/issues/551/5995805642@github.com>