We should replace react-ace or at least provide a secondary code editor component that is more lightweight and which we can use for simpler use cases that don't need the overhead of a full-fledged code editor.
We have had memory issues when using our react-ace powered <CodeEditor /> component for simple read-only display tasks. See #4178 and #4192
We cannot currently update react-ace to the latest version due to a an issue with how it interfaces with ace. See #4150
It is currently not feasible to assert on values of the <CodeEditor /> component in our end-to-end testing due to the way that react-ace stores the input value
What is already there? What do you see now?
<CodeEditor /> component that uses react-ace internally
The component being used for the editor within payload formatter forms, device import and for showing raw event data
What is missing? What do you want to see?
A replacement that is more lightweight in terms of file size, memory usage and provided functionality.
How do you propose to implement this?
I don't have time right now to research viable alternatives, but I'm sure there is something out there.
How do you propose to test this?
Manual testing and updating end-to-end tests
Can you do this yourself and submit a Pull Request?
It's probably best if we first discuss the possible options here. Then either @bafonins or me can pick this up.
Summary
We should replace
react-ace
or at least provide a secondary code editor component that is more lightweight and which we can use for simpler use cases that don't need the overhead of a full-fledged code editor.Why do we need this?
react-ace
is huge and one of the main contributors to the size of our webui bundles. See https://github.com/TheThingsNetwork/lorawan-stack/issues/359#issuecomment-514206612react-ace
powered<CodeEditor />
component for simple read-only display tasks. See #4178 and #4192react-ace
to the latest version due to a an issue with how it interfaces withace
. See #4150<CodeEditor />
component in our end-to-end testing due to the way thatreact-ace
stores the input valueWhat is already there? What do you see now?
<CodeEditor />
component that usesreact-ace
internallyWhat is missing? What do you want to see?
A replacement that is more lightweight in terms of file size, memory usage and provided functionality.
How do you propose to implement this?
I don't have time right now to research viable alternatives, but I'm sure there is something out there.
How do you propose to test this?
Manual testing and updating end-to-end tests
Can you do this yourself and submit a Pull Request?
It's probably best if we first discuss the possible options here. Then either @bafonins or me can pick this up.