I have a usecase where I have to embed code mirror in a react native webview.
We also have a custom accessory view that can input some characters into the text area. (ex. > < { } etc)
How can I trigger a keyboard event for this?
A simple solution is to
doc.replaceRange(text, cursor)
But I also want to have the effects of addons. Example if we have enabled html completions and the input is <html and I input > through the accessory view, the effect of addons doesn’t kick in, but if I input the same > through the keyboard, the state autocompletes to <html></html>.
Whats the best way to solve this
The completion addon itself doesn’t implement automatic triggering of completion, so I’m not sure what your integration is reacting to.
@marijn Thanks for the reply.
I wasn’t specifically referring to the completion addon. All we want to do is to add a React Native View that has the most frequently used symbols and keywords. This View must mimic the keyboard input for the tokens we selected. Ex ( (, < , { , etc). Pressing the view buttons must trigger input to the code mirror webview. Since the view isn’t part of the native keyboard we used the doc.replaceRange(token, cursor) to input the token into CM. We have a bunch of addons like closebrackets and closetag etc. and doing a doc.replaceRange(token, cursor) doesn’t seem to be invoking the effect of these addons. Ex. when a View with a ‘(’ button is pressed and closebracket addon doesn’t seem to add the matching bracket automatically. Is there a better way to accomplish this than just doing doc.replaceRange to add to CM
There’s no simple way to do this, unfortunately. The library responds to the keydown, keypress, and keyup events, and, if the key isn’t explicitly handled, to the browser’s default behavior of adding text to the hidden input field.
@marijn Thanks for the inputs. Appreciate it.