from Hacker News

Ask HN: Why is working with contenteditable is so hard?

by raxrb on 9/6/24, 2:21 AM with 4 comments

How to reliably insert text across input fields, contenteditable divs etc across various websites in the browser via a Chrome extension or a desktop app?

I am working on an accessibility application, and that application should do two things:

1. When a user presses a certain button, the current location at which the cursor is, whatever the user is saying should be inserted. 2. If the user issues commands like "delete last line" certain parts of the text could be deleted.

How can I build this?

I have a few ideas in my mind:

- First option is simulating keystrokes, but the problem with this is if the text is longer, it is going to take a longer time to insert, but modifying the text will be a problem.

- Second, I was thinking of simulating selection and pasting using ctrl-A and ctrl v, It will work for the insertion for empty fields but the problem is if there is already some text in the div or content editable, everything is going to be selected and removed. Is there way to select only certain text insted of all text?

- Third is writing a custom wrapper for each website based on the content editable that they are using. The problem with the third one is it is going to be very extensive because it will require a lot of time investment.

I see desktop apps like Windows dictation tools work seamlessly everywhere. How are they working seamlessly across every input field?

How can I acheive the same? Any open source software to look at for this?

  • by throwaway888abc on 9/6/24, 2:31 AM

    Lexical

    https://lexical.dev/

    Tiptap

    https://tiptap.dev/

    Automerge (any CRDT of your choice)

    https://automerge.org/

  • by tacone on 9/10/24, 6:53 PM

    Because different browsers insert the content in a different fashions. The reliable way to use contenteditable is to intercept keypresses and modify the inner HTML yourself, i.e. use contenteditable only to use the cursor affordance.

  • by BWStearns on 9/6/24, 8:08 PM

    I am also looking for info on how to work with contenteditable for an extension. So far we've done a mixture of copy/paste and dom manipulation. Each works in some places and not in others. It's very frustrating and there's not a ton of good resources on it.