Let’s have a look at how to provide our users with a truly amazing experience when we need to allow them to edit pieces of code or configuration.
We will use one of the most popular and well-known code editors called Monaco editor which powers VSCode. The resulting app will have the editor on the left side and a markdown card on the right to showcase how to actually capture the data and communicate with Wave.
H2O Wave has a built-in mechanism for editing a multiline text via its ui.textbox component, but it has significant downsides:
No syntax highlighting.
Regular font instead of monospaced which tends to be more readable.
No find/replace functionality and other editor goodies.
The app consists of 2 parts:
Python part — regular Wave app.
All the code is loaded using require.js, but you can consider it an implementation detail. The only Wave-related thing to note is events. We fire 2 kinds:
Save event — when the user hits CMD or CTRL + S, used for updating our left-hand side markdown card.
Change event — when the user types something, used to mark the editor card as dirty using *.
Once the editor has been created, we want to also setup up listeners from which we will emit Wave events using window.wave.emit function. These are located within editor.addAction and editor.onDidChangeModelContent.
The Python part
The first thing we need to create is a single HTML div element that will serve as a container into which Monaco renders its magic. We can use ui.markup_card as it’s designed for this exact purpose — rendering raw HTML. We also give the div a unique ID to easily select it in our JS file. Lastly, we want the editor to take up all the available card space so a few extra styles are necessary.
Then we just render a ui.markdown_card to display saved text and demonstrate how can Wave and Monaco communicate.
Handling the events then is a piece of cake.
Using less than 100 total lines of code you get syntax highlighting and rich editing capabilities almost for free. Not bad at all I would say 🙂
About the Author
In my free time, I teach ballroom dancing at both competitive and social level (as a former ballroom dancer).
Leave a Reply
H2O Wave joins Hacktoberfest
It’s that time of the year again. A great initiative by DigitalOcean called Hacktoberfest that aims to bring
September 29, 2022 - by
Three Keys to Ethical Artificial Intelligence in Your Organization
There’s certainly been no shortage of examples of AI gone bad over the past few
September 23, 2022 - by
Using GraphQL, HTTPX, and asyncio in H2O Wave
Today, I would like to cover the most basic use case for H2O Wave, which is
September 21, 2022 - by
머신러닝 자동화 솔루션 H2O Driveless AI를 이용한 뇌에서의 성차 예측
Predicting Gender Differences in the Brain Using Machine Learning Automation Solution H2O Driverless AI
August 29, 2022 - by
Make with H2O.ai Recap: Validation Scheme Best Practices
Data Scientist and Kaggle Grandmaster, Dmitry Gordeev, presented at the Make with H2O.ai session on
August 23, 2022 - by
5 Tips for Improving Your Wave Apps
Let’s quickly uncover a few simple tips that are quick to implement and have a