# Programmatically Start CompositionEvent with ProseMirror

**URL:** <https://discuss.prosemirror.net/t/programmatically-start-compositionevent-with-prosemirror/4454>\
**Category:** Uncategorized\
**Created:** [February 26, 2022, 10:03pm UTC](https://discuss.prosemirror.net/t/programmatically-start-compositionevent-with-prosemirror/4454 "2022-02-26T22:03:37Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![bhl](https://discuss.prosemirror.net/user_avatar/discuss.prosemirror.net/bhl/32/4074_2.png) [@bhl](https://discuss.prosemirror.net/u/bhl)\
**Post date:** [February 26, 2022, 10:03pm UTC](https://discuss.prosemirror.net/t/programmatically-start-compositionevent-with-prosemirror/4454/1 "2022-02-26T22:03:37Z")

</div>

How would one start a composition event within ProseMirror?

Usually, composition events are started by an [`IME`](https://en.wikipedia.org/wiki/Input_method) in the user’s OS. During composition, text-handling by ProseMirror can be skipped by using the `view.composing` field.

Similar things like autocomplete or slash menu (which insert text into the editor but should ignored by most plugins until the query is complete) could also be wrapped in a composition event. Is there a way to start and end composition events from a ProseMirror plugin?

---

<div class="post-metadata">

**Author:** ![jcold](https://discuss.prosemirror.net/user_avatar/discuss.prosemirror.net/jcold/32/2669_2.png) [@jcold](https://discuss.prosemirror.net/u/jcold)\
**Post date:** [February 27, 2022, 12:28am UTC](https://discuss.prosemirror.net/t/programmatically-start-compositionevent-with-prosemirror/4454/2 "2022-02-27T00:28:04Z")

</div>

Write a plugin with props’s handleDOMEvents for handing compositionstart and compositionend events.

---

<div class="post-metadata">

**Author:** ![marijn](https://discuss.prosemirror.net/user_avatar/discuss.prosemirror.net/marijn/32/15_2.png) [@marijn](https://discuss.prosemirror.net/u/marijn)\
**Post date:** [February 28, 2022, 7:27am UTC](https://discuss.prosemirror.net/t/programmatically-start-compositionevent-with-prosemirror/4454/3 "2022-02-28T07:27:05Z")

</div>

No, there is no way to do this, and I don’t think it is the proper solution for what you are trying to do. What kind of text-handling are you trying to suppress? Something like a slash menu is probably best handled by a key binding.

---

<div class="post-metadata">

**Author:** ![bhl](https://discuss.prosemirror.net/user_avatar/discuss.prosemirror.net/bhl/32/4074_2.png) [@bhl](https://discuss.prosemirror.net/u/bhl)\
**Post date:** [February 28, 2022, 7:56am UTC](https://discuss.prosemirror.net/t/programmatically-start-compositionevent-with-prosemirror/4454/4 "2022-02-28T07:56:22Z")

</div>

> [@marijn](#):
>
> What kind of text-handling are you trying to suppress? Something like a slash menu is probably best handled by a key binding.

For something like a slash menu, I was thinking a plugin should initialize a composition event while other plugins ignore the in between state.

Reasoning is in a collaborative setting, a slash menu command that appears in one user’s editor e.g. `/heading` should not appear in another user’s editor until composition end. Another example is an autocomplete emoji menu: intermediate states like `:sm` … `:smile:` should not be synced only `:)`. I feel like this would be similar to how IME composition sort of behaves?

---

<div class="post-metadata">

**Author:** ![marijn](https://discuss.prosemirror.net/user_avatar/discuss.prosemirror.net/marijn/32/15_2.png) [@marijn](https://discuss.prosemirror.net/u/marijn)\
**Post date:** [February 28, 2022, 9:08am UTC](https://discuss.prosemirror.net/t/programmatically-start-compositionevent-with-prosemirror/4454/5 "2022-02-28T09:08:20Z")

</div>

I think you’re misunderstanding how ProseMirror handles composition – it immediately commits changes to its state as the composition updates, so they _will_ show up in other collaborative peer documents before the composition is finished.

---

<div class="post-metadata">

**Author:** ![bhl](https://discuss.prosemirror.net/user_avatar/discuss.prosemirror.net/bhl/32/4074_2.png) [@bhl](https://discuss.prosemirror.net/u/bhl)\
**Post date:** [March 2, 2022, 4:44am UTC](https://discuss.prosemirror.net/t/programmatically-start-compositionevent-with-prosemirror/4454/6 "2022-03-02T04:44:44Z")

</div>

> [@marijn](#):
>
> it immediately commits changes to its state as the composition updates, so they _will_ show up in other collaborative peer documents before the composition is finished

This would depend on collaboration implementation right? It might be possible to pause remote “writes” during composition but allow for local writes to still modify state. (Mentioned but not implemented here: [Chinese / japanese input are syncd unexpectedly before compositionend · Issue #81 · yjs/y-prosemirror · GitHub](https://github.com/yjs/y-prosemirror/issues/81))

---

<div class="post-metadata">

**Author:** ![marijn](https://discuss.prosemirror.net/user_avatar/discuss.prosemirror.net/marijn/32/15_2.png) [@marijn](https://discuss.prosemirror.net/u/marijn)\
**Post date:** [March 2, 2022, 7:15am UTC](https://discuss.prosemirror.net/t/programmatically-start-compositionevent-with-prosemirror/4454/7 "2022-03-02T07:15:34Z")

</div>

Right, you could pause sending of steps when a composition is active, but then _no_ changes would be broadcast in that time. You should be able to implement an additional custom bit of ‘paused’ state that acts the same way, if you control both the code that schedules step broadcasting and the code that makes the change you want to delay sending.
