I was extremely bored and I decided to make a code editor using TextBoxes. I tried to mimic Studio’s editor as closely as I could.
Live syntax highlighting, indentation ruler, and current line indicators
Ignore the weird caret glitch I don’t know what causes it and I’m stumped.
Completely custom caret and selection
Matching words get highlighted
This is pretty much the groundwork for Ctrl + F but that means I’m obligated to implement Ctrl + H as well as its RegEx feature which has been my nightmare for a while.
Autocompleting quotes, brackets, and braces
Also supports skipping over itself and pressing backspace near a pair deletes the whole thing
Kind of hard to see when it skips over itself because of caret glitch but trust me
Block completion
Forgot function but it’s supported too. Also it won’t append then/do if it’s already typed.
Indentation maintaining
Indenting/unindenting with Tab/Shift + Tab
Click gutter to select line
Features that Studio doesn’t have (as of writing this)
Shift + L to select whole line
Ctrl + X to cut whole line
Other things I attempted to do:
- I tried to overwrite Ctrl + Arrow Keys and double clicking to match Studio’s.
Here’s what I mean:
But even the behavior for studio keeps changing as I test it, so if anyone knows the pattern, please tell me. - Autocomplete: there’s no way to achieve a good scoped-based autocomplete unless I make some sort of LSP so I put that aside. Although I did achieve basic autocomplete with the ReflectionMetadata dump.
I think that’s all, I may have skipped a thing or two. Let me know if you want any feature and I may implement it. As for performance, I’ve never dropped below 58 FPS (60 FPS max), but I’ve been testing with the lexer source code, which isn’t that long (I think like 300 lines).
I won’t open source it because it’s 700 lines all crammed into a singular LocalScript (the lexer is its own ModuleScript), but I’ll gladly answer any questions.
While testing, I found a way to manipulate what the user copies so theoretically I could bypass the 200,000 character limit while supporting clipboard (not a fake clipboard, but one where the user can paste outside of Roblox or inside from outside). But that’s for another day unless Roblox fixes it.
Update 8/7/2023
I decided to rewrite and modularize the existing code. I didn’t add much though.
Custom scroll bars
This was a necessity if I wanted to implement the tap and scroll feature.
Overview ruler
So far, I only have word highlights, but I could definitely include the other types.
Other things:
- I fixed the weird caret glitch. Turns out, the property changed signal for Text fires after the property changed signal for CursorPosition, so what I was doing was in the past.
- I’m no longer using transparency for selection and word matches, so they look more vibrant
Other than multiple cursors, I probably won’t add anything else. It was pretty challenging but the end product was well worth it.
Fun fact: I made this in VSCode because I was trying out Rojo
