# Initialize editor from native contenteditable on click

**URL:** https://discuss.prosemirror.net/t/initialize-editor-from-native-contenteditable-on-click/5009
**Category:** Uncategorized
**Created:** [November 8, 2022, 8:00am UTC](https://discuss.prosemirror.net/t/initialize-editor-from-native-contenteditable-on-click/5009 "2022-11-08T08:00:38Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![zeitstein](https://discuss.prosemirror.net/letter_avatar_proxy/v4/letter/z/b4bc9f/32.png) [@zeitstein](https://discuss.prosemirror.net/u/zeitstein)
#### Post date: [November 8, 2022, 8:00am UTC](https://discuss.prosemirror.net/t/initialize-editor-from-native-contenteditable-on-click/5009/1 "2022-11-08T08:00:38Z")

</div>

Hello!

I’m trying to determine whether it would be possible to use ProseMirror in the following situation. On a page, there could be dozens/hundreds of possible editor targets. Only one editor should be active at one time. I would like to render these targets as native contenteditable’s and only replace them with a ProseMirror editor on user interaction.

Importantly, if a user focuses the contenteditable with a click, the editor should initialize with the correct selection.

Is this possible to do with ProseMirror? Thank you!

---

<div class="post-metadata">

### Author: ![tslocke](https://discuss.prosemirror.net/user_avatar/discuss.prosemirror.net/tslocke/32/2218_2.png) [@tslocke](https://discuss.prosemirror.net/u/tslocke)
#### Post date: [November 8, 2022, 9:28am UTC](https://discuss.prosemirror.net/t/initialize-editor-from-native-contenteditable-on-click/5009/2 "2022-11-08T09:28:34Z")

</div>

I have a need for something similar, although I haven’t got to it yet.

Is it necessary that they be contenteditable already? My first idea is to just catch the click event and get the mouse x/y, replace the appropriate element with a PM instance, and use `view.posAtCoords` to figure out where the selection needs to be and then `view.setSelection⁠`. Should be possible to do all that without the user noticing anything janky.

---

<div class="post-metadata">

### Author: ![zeitstein](https://discuss.prosemirror.net/letter_avatar_proxy/v4/letter/z/b4bc9f/32.png) [@zeitstein](https://discuss.prosemirror.net/u/zeitstein)
#### Post date: [November 8, 2022, 3:57pm UTC](https://discuss.prosemirror.net/t/initialize-editor-from-native-contenteditable-on-click/5009/3 "2022-11-08T15:57:37Z")

</div>

The idea was to use `contenteditable` to be able to leverage `window.getSelection()` for selection initialization. But it sounds like that won’t be necessary. Thanks for the idea, I’ll try it out.

---

<div class="post-metadata">

### Author: ![tslocke](https://discuss.prosemirror.net/user_avatar/discuss.prosemirror.net/tslocke/32/2218_2.png) [@tslocke](https://discuss.prosemirror.net/u/tslocke)
#### Post date: [November 10, 2022, 11:50am UTC](https://discuss.prosemirror.net/t/initialize-editor-from-native-contenteditable-on-click/5009/4 "2022-11-10T11:50:17Z")

</div>

What might be tricker is if the user clicks and drags to select some text in the not-yet-editable element, but I think it’s solvable. Probably with `getSelection` as you suggest.

---

<div class="post-metadata">

### Author: ![zeitstein](https://discuss.prosemirror.net/letter_avatar_proxy/v4/letter/z/b4bc9f/32.png) [@zeitstein](https://discuss.prosemirror.net/u/zeitstein)
#### Post date: [November 10, 2022, 2:48pm UTC](https://discuss.prosemirror.net/t/initialize-editor-from-native-contenteditable-on-click/5009/5 "2022-11-10T14:48:23Z")

</div>

Good point!

I wonder whether all of this is necessary – maybe it would be ok to just have multiple (dozens/hundreds) PM instances on a page?