# place widget dom inside decoration mark

**URL:** https://discuss.codemirror.net/t/place-widget-dom-inside-decoration-mark/7852
**Category:** v6
**Created:** [February 15, 2024, 10:55am UTC](https://discuss.codemirror.net/t/place-widget-dom-inside-decoration-mark/7852 "2024-02-15T10:55:55Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![pe.affenzeller](https://discuss.codemirror.net/user_avatar/discuss.codemirror.net/pe.affenzeller/32/3884_2.png) [@pe.affenzeller](https://discuss.codemirror.net/u/pe.affenzeller)
#### Post date: [February 15, 2024, 10:55am UTC](https://discuss.codemirror.net/t/place-widget-dom-inside-decoration-mark/7852/1 "2024-02-15T10:55:55Z")

</div>

hi!

I’m implementing a widget similar to the checkbox. for proper positioning, it would be easier to have the widget inside the span of a decoration mark. I would have expected that to be possible by first adding the widgets and then the decorations with inclusive set to true.

[this is an example](https://codemirror.net/try/?c=aW1wb3J0IHtiYXNpY1NldHVwLCBFZGl0b3JWaWV3fSBmcm9tICJjb2RlbWlycm9yIgppbXBvcnQge2phdmFzY3JpcHR9IGZyb20gIkBjb2RlbWlycm9yL2xhbmctamF2YXNjcmlwdCIKaW1wb3J0IHtXaWRnZXRUeXBlLCBEZWNvcmF0aW9uLCBWaWV3UGx1Z2lufSBmcm9tICJAY29kZW1pcnJvci92aWV3IgppbXBvcnQge3N5bnRheFRyZWV9IGZyb20gJ0Bjb2RlbWlycm9yL2xhbmd1YWdlJwppbXBvcnQge1JhbmdlU2V0QnVpbGRlcn0gZnJvbSAnQGNvZGVtaXJyb3Ivc3RhdGUnCgpjb25zdCBzdGF0ZW1lbnRNYXJrID0gRGVjb3JhdGlvbi5tYXJrKHsKICBpbmNsdXNpdmU6IHRydWUsCiAgY2xhc3M6ICdkZWNvcmF0aW9uJywKICB0YWdOYW1lOiAnc3BhbicsCn0pOwoKZnVuY3Rpb24gY3JlYXRlRGVjb3JhdGlvbnModmlldykgewogIGNvbnN0IGJ1aWxkZXIgPSBuZXcgUmFuZ2VTZXRCdWlsZGVyKCk7CgogIGZvciAoY29uc3QgeyBmcm9tLCB0byB9IG9mIHZpZXcudmlzaWJsZVJhbmdlcykgewogICAgc3ludGF4VHJlZSh2aWV3LnN0YXRlKS5pdGVyYXRlKHsKICAgICAgZnJvbSwKICAgICAgdG8sCiAgICAgIGVudGVyOiAobm9kZSkgPT4gewogICAgICAgIGlmIChub2RlLm5hbWUgPT09ICdCb29sZWFuTGl0ZXJhbCcpIHsKICAgICAgICAgIGNvbnN0IHsgZnJvbTogc3RhdGVtZW50RnJvbSwgdG86IHN0YXRlbWVudFRvIH0gPSBub2RlOwogICAgICAgICAgYnVpbGRlci5hZGQoc3RhdGVtZW50RnJvbSwgc3RhdGVtZW50VG8sIHN0YXRlbWVudE1hcmspOwogICAgICAgICAgY29uc29sZS5sb2coJ3N0YXRlbWVudCcsIHsgZnJvbTogc3RhdGVtZW50RnJvbSwgdG86IHN0YXRlbWVudFRvIH0pCgogICAgICAgICAgcmV0dXJuIGZhbHNlOwogICAgICAgIH0KICAgICAgfSwKICAgIH0pOwogIH0KCiAgcmV0dXJuIGJ1aWxkZXIuZmluaXNoKCk7Cn0KCmNvbnN0IERlY29yYXRpb25QbHVnaW4gPSBWaWV3UGx1Z2luLmZyb21DbGFzcygKICBjbGFzcyB7CiAgICBkZWNvcmF0aW9uczsKCiAgICBjb25zdHJ1Y3Rvcih2aWV3KSB7CiAgICAgIHRoaXMuZGVjb3JhdGlvbnMgPSBjcmVhdGVEZWNvcmF0aW9ucyh2aWV3KTsKICAgIH0KCiAgICB1cGRhdGUodXBkYXRlKSB7CiAgICAgIGlmICh1cGRhdGUuZG9jQ2hhbmdlZCkgewogICAgICAgIHRoaXMuZGVjb3JhdGlvbnMgPSBjcmVhdGVEZWNvcmF0aW9ucyh1cGRhdGUudmlldyk7CiAgICAgIH0KICAgIH0KICB9LAogIHsKICAgIGRlY29yYXRpb25zOiAodmlldykgPT4gdmlldy5kZWNvcmF0aW9ucywKICB9LAopOwoKY2xhc3MgQ2hlY2tib3hXaWRnZXQgZXh0ZW5kcyBXaWRnZXRUeXBlIHsKICBjb25zdHJ1Y3RvcihjaGVja2VkKSB7IAogICAgc3VwZXIoKTsKICAgIHRoaXMuY2hlY2tlZCA9IGNoZWNrZWQ7CiAgfQoKICBlcShvdGhlcikgeyByZXR1cm4gb3RoZXIuY2hlY2tlZCA9PSB0aGlzLmNoZWNrZWQgfQoKICB0b0RPTSgpIHsKICAgIGxldCB3cmFwID0gZG9jdW1lbnQuY3JlYXRlRWxlbWVudCgic3BhbiIpCiAgICB3cmFwLnNldEF0dHJpYnV0ZSgiYXJpYS1oaWRkZW4iLCAidHJ1ZSIpCiAgICB3cmFwLmNsYXNzTmFtZSA9ICJjbS1ib29sZWFuLXRvZ2dsZSIKICAgIGxldCBib3ggPSB3cmFwLmFwcGVuZENoaWxkKGRvY3VtZW50LmNyZWF0ZUVsZW1lbnQoImlucHV0IikpCiAgICBib3gudHlwZSA9ICJjaGVja2JveCIKICAgIGJveC5jaGVja2VkID0gdGhpcy5jaGVja2VkCiAgICByZXR1cm4gd3JhcAogIH0KCiAgaWdub3JlRXZlbnQoKSB7IHJldHVybiBmYWxzZSB9Cn0KCmZ1bmN0aW9uIGNoZWNrYm94ZXModmlldykgewogIGxldCB3aWRnZXRzID0gW10KICBmb3IgKGxldCB7ZnJvbSwgdG99IG9mIHZpZXcudmlzaWJsZVJhbmdlcykgewogICAgc3ludGF4VHJlZSh2aWV3LnN0YXRlKS5pdGVyYXRlKHsKICAgICAgZnJvbSwgdG8sCiAgICAgIGVudGVyOiAobm9kZSkgPT4gewogICAgICAgIGlmIChub2RlLm5hbWUgPT0gIkJvb2xlYW5MaXRlcmFsIikgewogICAgICAgICAgbGV0IGlzVHJ1ZSA9IHZpZXcuc3RhdGUuZG9jLnNsaWNlU3RyaW5nKG5vZGUuZnJvbSwgbm9kZS50bykgPT0gInRydWUiCiAgICAgICAgICBsZXQgZGVjbyA9IERlY29yYXRpb24ud2lkZ2V0KHsKICAgICAgICAgICAgd2lkZ2V0OiBuZXcgQ2hlY2tib3hXaWRnZXQoaXNUcnVlKSwKICAgICAgICAgICAgc2lkZTogMQogICAgICAgICAgfSkKICAgICAgICAgIGNvbnNvbGUubG9nKCdjaGVja2JveCcsIHsgZnJvbTogbm9kZS50byB9KQogICAgICAgICAgd2lkZ2V0cy5wdXNoKGRlY28ucmFuZ2Uobm9kZS50bykpCiAgICAgICAgfQogICAgICB9CiAgICB9KQogIH0KICByZXR1cm4gRGVjb3JhdGlvbi5zZXQod2lkZ2V0cykKfQoKY29uc3QgY2hlY2tib3hQbHVnaW4gPSBWaWV3UGx1Z2luLmZyb21DbGFzcyhjbGFzcyB7CiAgZGVjb3JhdGlvbnMKCiAgY29uc3RydWN0b3IodmlldykgewogICAgdGhpcy5kZWNvcmF0aW9ucyA9IGNoZWNrYm94ZXModmlldykKICB9CgogIHVwZGF0ZSh1cGRhdGUpIHsKICAgIGlmICh1cGRhdGUuZG9jQ2hhbmdlZCB8fCB1cGRhdGUudmlld3BvcnRDaGFuZ2VkIHx8CiAgICAgICAgc3ludGF4VHJlZSh1cGRhdGUuc3RhcnRTdGF0ZSkgIT0gc3ludGF4VHJlZSh1cGRhdGUuc3RhdGUpKQogICAgICB0aGlzLmRlY29yYXRpb25zID0gY2hlY2tib3hlcyh1cGRhdGUudmlldykKICB9Cn0sIHsKICBkZWNvcmF0aW9uczogdiA9PiB2LmRlY29yYXRpb25zLAoKICBldmVudEhhbmRsZXJzOiB7CiAgICBtb3VzZWRvd246IChlLCB2aWV3KSA9PiB7CiAgICAgIGxldCB0YXJnZXQgPSBlLnRhcmdldAogICAgICBpZiAodGFyZ2V0Lm5vZGVOYW1lID09ICJJTlBVVCIgJiYKICAgICAgICAgIHRhcmdldC5wYXJlbnRFbGVtZW50LmNsYXNzTGlzdC5jb250YWlucygiY20tYm9vbGVhbi10b2dnbGUiKSkKICAgICAgICByZXR1cm4gdG9nZ2xlQm9vbGVhbih2aWV3LCB2aWV3LnBvc0F0RE9NKHRhcmdldCkpCiAgICB9CiAgfQp9KQoKZnVuY3Rpb24gdG9nZ2xlQm9vbGVhbih2aWV3LCBwb3MpIHsKICBsZXQgYmVmb3JlID0gdmlldy5zdGF0ZS5kb2Muc2xpY2VTdHJpbmcoTWF0aC5tYXgoMCwgcG9zIC0gNSksIHBvcykKICBsZXQgY2hhbmdlCiAgaWYgKGJlZm9yZSA9PSAiZmFsc2UiKQogICAgY2hhbmdlID0ge2Zyb206IHBvcyAtIDUsIHRvOiBwb3MsIGluc2VydDogInRydWUifQogIGVsc2UgaWYgKGJlZm9yZS5lbmRzV2l0aCgidHJ1ZSIpKQogICAgY2hhbmdlID0ge2Zyb206IHBvcyAtIDQsIHRvOiBwb3MsIGluc2VydDogImZhbHNlIn0KICBlbHNlCiAgICByZXR1cm4gZmFsc2UKICB2aWV3LmRpc3BhdGNoKHtjaGFuZ2VzOiBjaGFuZ2V9KQogIHJldHVybiB0cnVlCn0KCm5ldyBFZGl0b3JWaWV3KHsKICBkb2M6ICJ0cnVlIiwKICBleHRlbnNpb25zOiBbCiAgICBiYXNpY1NldHVwLAogICAgamF2YXNjcmlwdCgpLAogICAgY2hlY2tib3hQbHVnaW4sCiAgICBEZWNvcmF0aW9uUGx1Z2luLAogIF0sCiAgcGFyZW50OiBkb2N1bWVudC5ib2R5Cn0pCg==) with the checkbox widget and an additional decoration mark for boolean literals.

as a result, I would have expected the widgetBuffer img and cm-boolean-toggle to be placed inside the decoration, but they are rendered as siblings.

 ![Screenshot 2024-02-15 at 11.53.22](https://discuss.codemirror.net/uploads/default/original/2X/0/08fb847b2803a663329013827d57f146a3a0d9e2.png)

is there a way to move the widget inside the decoration?

best,  
peter

---

<div class="post-metadata">

### Author: ![marijn](https://discuss.codemirror.net/user_avatar/discuss.codemirror.net/marijn/32/136_2.png) [@marijn](https://discuss.codemirror.net/u/marijn)
#### Post date: [February 19, 2024, 2:02pm UTC](https://discuss.codemirror.net/t/place-widget-dom-inside-decoration-mark/7852/2 "2024-02-19T14:02:58Z")

</div>

You will need to give the widget a negative `side` for it to be part of the marks that end at its location. But even then the editor would draw a separate mark span around it, which was a bug fixed by this patch.

> <https://github.com/codemirror/state/commit/e2601f9439a57bf10b4a2a1854329fbb4109c0b5>
>
> FIX: Fix an issue that caused widgets at the end of a mark decoration to
> be rend…ered in their own separate mark DOM element.
> 
> See https://discuss.codemirror.net/t/place-widget-dom-inside-decoration-mark/7852

---

<div class="post-metadata">

### Author: ![pe.affenzeller](https://discuss.codemirror.net/user_avatar/discuss.codemirror.net/pe.affenzeller/32/3884_2.png) [@pe.affenzeller](https://discuss.codemirror.net/u/pe.affenzeller)
#### Post date: [February 19, 2024, 2:54pm UTC](https://discuss.codemirror.net/t/place-widget-dom-inside-decoration-mark/7852/3 "2024-02-19T14:54:15Z")

</div>

awesome, thx, works like a charm!