In-Game TextBox IDE

I’m showing this off because it’s the culmination of years of work, and I’m really proud of the result.
It’s gone through lots of incremental changes and rewrites, and continuously improved over time, so I’m documenting it as best I can. A lot of this is based on vague memories and old tweets, so some aspects might be slightly inaccurate.

For Lua Learning to meet its design goal, the player would need a good IDE to learn and practice in.


In March 2018, I began writing a Lua lexer from scratch, coming up with all sorts of string manipulation tricks to accomplish this. @sircfenner was a HUGE help in creating that, and years later I’m still grateful for his patience and kindness. The lexer mostly worked, but it was extremely naive and had tons of edge cases. I used that for a while, while I focused on other aspects of the IDE and game.


I had zero design skill back then, what even is this garbage

In September 2018, I worked alongside @Crazyman32 and @pobammer to port the Penlight lexer to Roblox, as well as expanding it to suit my needs. That lexer was designed to highlight syntactically correct code, which meant that it failed when the user was in middle of typing in the IDE. I wrote more patterns for it, designed for incomplete syntax, based on my knowledge from my previous lexer. This lexer is open sourced for anyone else who might find it useful, and can be found here.

I now had a decent syntax highlighter, but the rest of the IDE was frustrating. It was built on top of a default Roblox TextBox, which at the time didn’t let the user select text, copy text, and many other features were missing. In January 2019, I commissioned @brianush1 to create a better alternative with a custom clipboard, and his custom TextBox was the core of my IDE for some time. This version had automatic indentation, end block completion, in-game clipboard, undo/redo, highlight all occurrences, and live error detection. Roblox updates eventually broke it, but it was very CPU and memory intensive anyway and needed a rewrite regardless.

While I had brianush1’s version, I decided it was time to try to push my IDE to the next level and attempt some autofill mechanic. I managed to get a naive autofill working relatively well, so I cautiously integrated it into Lua Learning.
image

When TextBoxes were updated to allow copying in summer 2019, I knew it was time to switch back so my users could take advantage of that instead of just my custom in-game clipboard. I switched back to them, and wrote modules that expanded their functionality such as Undo/Redo and arrow key navigation. However, it was still lacking.

TextBoxes and ScrollingFrames aren’t friends with each other, so this is when I wrote and released SmoothScroll because I needed a custom scrolling method to allow users to scroll while still focused in a TextBox.

I started to work on adding all the features of the previous edition, with autofill, end block completion, etc. This took a while, and by the time I added all the features the code was an unusable mess. But it worked, so I called it “done for now” and just didn’t touch it.

When I began to work on InCommand with @Elttob, I had to rewrite that mess so that we could use a simplified version of it. I continued to improve that inCommand rewrite as we updated the plugin, and recently I decided I should take this clean plugin version and branch off and make a Lua Learning version of it. Careful not to make it messy, I re-added the fancy features to that version.

image

And with that, we’ve arrived at the current product! Allow me to show off what it can do. :smiley:


Live Syntax Highlighting (duh)

Using the lexer from earlier, I wrote a highlighter that is highly optimized. Using object pooling, caching, work determination, and a few microoptimizations, I got my highlighter to work on massive scripts in milliseconds. This speed allows it to be run in real time, highlighting the whole script every time you type a single letter.

Context Aware Autofill

Suggests soft-matched autofill suggestions when the context allows it, aka it doesn’t suggest while you’re typing a variable declaration, in a string, comment, or number.

Block Completion

Automatically finishes your if statement, function, do block, or anything else that requires an end. Indents your cursor as well, according to the relative indentation standard. Similarly, it adds the closing symbol for your multiline string/comment, with support for all the = variations.

Live Error Highlighting

Non-intrusive syntax error highlighting. While you type, it doesn’t display errors as not to annoy you for not closing the statement you’re still in middle of writing. As suggested by @zeuxcg, it highlights any words mentioned in the error instead of just highlighting the erroneous line.

Indentation Maintaining

When you enter a new line, it adds the indentation of the previous line and moves your cursor. No IDE is even viable without this feature. Simple, but vital.

Waypoints (Undo/Redo)

A handy feature, but it uses a fair amount of memory due to the immutability of strings in Lua. Still working out how to better handle it internally. Regardless, it works!

Custom Theming

Lua Learning’s settings allow users to set their preferred highlighter colors for code blocks in tutorials, and the IDE respects those and updates in real time, including the autofill suggestions.

Highlight All Occurrences

A nice QoL feature that highlights all other occurrences of the selected word.


I hope you’ve enjoyed reading the history of this IDE and the work it takes to make it! Big thank you to all the people who helped me along the way.

97 Likes

This is absolutely next-level! It is amazing to see a full-fledged IDE in a Roblox game with all the features you have integrated. Context aware autofill and live error highlighting are huge features that I would not have believed possible.

Keep up all the great work!

4 Likes

That’s it, ma shades are comin’ right off.

image

In all seriousness, I have no words. Some of the things you and @Elttob create are beyond amazing and really push against the limits of the engine itself. I’ve never, in all years of being a developer, seen someone so dedicated to creating something this complex, and then open-sourcing it shortly after. Seriously man, the years-worth of the journey that you took in transforming a text box to a fully functioning script editor will always be remembered by me. The number of challenges and problems you faced, like Roblox updates having the risk of breaking your algorithm, and still pushing on really is inspirational. You two will always be my role models.

One question though, like you mentioned, what if a Roblox update comes around and breaks the system again?

Regardless, keep up the great work, you two!

Ma head feels heavy now.

12 Likes

Not to devalue @Elttob’s work, but the IDE was my project. I didn’t even know him yet during most of this project.
Part of the reason we collaborated is because I had IDE experience and he had plugin experience, so we split the work and made a great plugin together. He worked on other (equally important if not more important) parts of the plugin, but he didn’t have very much to do with this particular process.

I’ll cry for about 5 minutes, then work out exactly what broke, then redesign the system to work with that!

8 Likes

I love Lua Learning and when I learned there would be an IDE, I was so Happy! I love this project and it is so cool to see how far you’ve gone. Good Luck!
Many thanks for Lua Learning and all those Open Source Projects!

Is there a Defined or Average date when the IDE will be released from Closed Beta, Because I am Aching for it

4 Likes

Can confirm that the InCommand script editor is all boat’s work, except for the two buttons in the corner which I added myself :stuck_out_tongue: honestly the best part of the script editor, I’m not biased at all

I’ve always been interested in this sort of stuff though, so I can really appreciate all the work that’s gone into it. Even the small portion of it that’s implemented in InCommand is pretty neat!

7 Likes

This is just FREAKING AWESOME! Idk how did you make this but it seems like a lot of work and patience. I’ve been using Lua Learning for a few days and I’ve learned a lot from it. I wanna thank you for all your dedication in creating such an amazing learning site on Roblox. Ty very much. This is really amazing!

1 Like

Wow, I knew LuaLearning was a long way off, but so long…

Definitely, I would.

1 Like

Added a “Highlight All Occurrences” feature, and updated OP to reflect that.

3 Likes

What an insane feat of engineering work on ROBLOX, it’s inspiring to see what the best ROBLOX developers can do. Nice work!

2 Likes

This is extraordinary to see a full working IDE that acts the same as our scripts! Well done. :clap:

1 Like

Amazing work! You have worked very hard in making the IDE.Well Done.:clap:

Proudest thing I’ve ever seen this year

(huh revived all of a sudden)
Honestly, this is outstanding, years of work paid off. Kudos to you man.

I made my own autofill too because i saw your work and it was amazing!
the only problem is i have to figure out how to detect if the user is typing a variable, inside a string or comment block

keep up the great work! :clap:t2:

1 Like

So, where can I actually download it?

This post is #help-and-feedback:creations-feedback not #resources:community-resources. This is not something I give out, as it is pretty much my primary product.

Oh yea, I didin’t take a look at where it was posted, sorry for wasting your time!

That is super cool! Thank you for inspiring me to make my own Parser!
I found a bug in your lexer: it uses “([”’]).-[^\]%1". It means that character before closing quote cannot be “”. But if I escape the last backslash lexer should ignore it:

"my very cool string\\" -- end of string

But your lexer do this:

"my very cool string\\" -- string continues

Yup, you’ll see there’s a to-do comment about handling escaped escapes.

1 Like