So, I was messing around with the Monaco editor again the other day. Great tool, but I kept bumping into timestamps. You know, the usual UTC format. It’s fine, but honestly, it gets a bit tiring doing the mental math to figure out when something actually happened in my local time zone.
Figuring out the time thing
I figured, there must be an easy way, right? Spent a bit of time just clicking around, digging through the options Monaco gives you out of the box. Was hoping for a simple toggle, like ‘Show Local Time’. But no luck. Didn’t find anything obvious like that.
Alright, plan B. How could I make this happen myself? My first thought went to maybe intercepting the text somehow, or maybe using those fancy decorations Monaco lets you add. Seemed like the ‘proper’ way to do it within the editor’s features.
Trying a few things
I decided to give the decorators a shot first. The idea was:
-
Find text that looks like a timestamp.
-
Stick a little note or icon next to it showing the converted local time.
Well, that got complicated really quickly. Figuring out reliable patterns for timestamps wasn’t trivial, and making the decorators appear without messing up the layout or feeling sluggish, especially with lots of timestamps… it felt like overkill. A bit clunky.
So, I stepped back. Keep it simple, I told myself. What’s the core problem? I see a UTC timestamp, I want to know the local time. What if I just used basic JavaScript? Find the timestamp text, grab it, use the built-in `Date` object to convert it. Easy enough. But then what? Replace the original text? Nah, didn’t want to modify the actual content.
Landing on the hover idea
Then it hit me – a hover tooltip! That felt much cleaner. Leave the original text alone, but when I move my mouse over a timestamp, a little box pops up showing the local time equivalent. Perfect.
So, I got to work. Put together some code that watches the editor content. It runs a check to find things that look like timestamps. This part took a bit of fiddling to get a pattern that worked reasonably well without catching random numbers.
Then, I used the Monaco API part that handles hover messages. Hooked it up so when the pattern matches, it takes that timestamp string, runs it through `new Date()`, gets the local time string, and shows that in the hover popup. The browser’s built-in date handling did all the timezone conversion automatically. Much easier than I first thought.
How it ended up
And that was pretty much it. Now, whenever I’m looking at stuff in the editor – logs, data, whatever – and I see a timestamp, I just hover my mouse over it. Boom! A little tooltip shows me the time in my own timezone. No more guesswork or opening another tab to convert times.
It’s not super fancy, but it works. It solves the exact little annoyance I had. Made my own workflow just a tiny bit smoother, and that’s always a win in my book.