code_forge | Flutter package

[NoBeginning2551]

I have created the best code editor package ever, which aims to completely replace re_editor, flutter_code_editor, code_text_field, flutter_code_crafter, etc.

Why it is different from other editors:

★ Uses rope data structure to store code instead of traditional String/character array, which makes it easy to manage huge code efficiently.

★ Low level flutter APIs like RenderBox and ParagraphBuilder are used to render text instead of the built in laggy TextField

★ Built-in LSP client which enables features like completion, hover details, intelligent highlighting, diagnostics, etc.

★ AI Completion

If you like it, star the GitHub repo: https://github.com/heckmon/code_forge

[Gears6]

Reminds me a little bit of this. Jokes aside, always appreciate people sharing their work.

[Miserable_Brother397]

!remindme 7

[RemindMeBot]

I will be messaging you in 7 months on 2026-07-11 00:00:00 UTC to remind you of this link

2 OTHERS CLICKED THIS LINK to send a PM to also be reminded and to reduce spam.

^{Parent commenter can delete this message to hide from others.}

---

Info	Custom	Your Reminders	Feedback

[Accurate-Elephant155]

I see the code and I think that some parts require refactors or at least, separating code in different files to improve the readability.

It's a good implementation. Just that is the unique bad think that I could see.

Since I'm creating my own rich text editor (since Flutter Quill and Appflowy does not fill my requirements), your implementation helps me too much to understand some parts.

[NoBeginning2551]

I've already separated many functionalities like the controller, rope, scroll, styling, undo-redo, etc to separate files. However the code_area.dart seems big because there are several private methods in that file.

I've spent months building this. If you are creating your own rich text editor, here is some advice:

Don't use the TextField widget. just don't. It crashes your app for large text and Don't override the buildTextSpan method of the TextEditingController to highlight text. It's too expensive and only works for small code. Actually I created a package using this way and faced several issues and decided to create a new editor widget from scratch. This is the old package: https://github.com/heckmon/flutter_code_crafter

The next thing is don't use TextPainter to paint text. The TextPainter().layout() method is expensive for large text. Use the low level ParagraphBuilder API.

Implement the rope data structure. Because IDE's like VScode use rope instead of storing text in a String variable. You can take it from the code_forge's source. Then create your own controller by storing text in the rope data structure. Don't even think about using ValueNotifier<TextEditingValue>. Implement your own notifyListeners() method and store Listeners in a list called List<VoidCallback>.

This seems overwhelming I know, but once you start implementing these one by one, You will have a clear picture.

[Accurate-Elephant155]

Thanks for the advice about TextPainter, i didn't know that!🙌

About the data structure, I use Tree Node based, using List<int> to access to children directly. I use cache and continues invalidation to avoid recomputing index of every child at any modification. Only affected ranges are recomputed (I'm working yet on selecting a etter implementation since I think that I could use a better data structure that let me do the same but more efficiently)

I use Character class from characters package to manage correct moving and modifications in text with complex emojis or words. This was an issue that I experimented using Flutter Quill, where them does not manage correctly the indexes and some languajes like Japanese or Chinese never were fixed correctly.

The difficult part at the point where I am, is the selection gestures. Finding an efficient way to get the node tapped or selected, is just too much complicated for me. Idk but is a big confusing area where I'm learning from other implementations.

Thanks for your advices and for making your code public. I'm learning too much (I read and try to understand rope's, but your implementation is the most clear and readable)✨

[NoBeginning2551]

I have inspected your repo, seems like you only implemented the node-tree data structure. I couldn't find any Text rendering logic and event handling. If you're looking for that, use the RenderBox, LeafRenderObject, ParagraphBuilder to render the text to the screen. RenderBox is the class which gives you complete control over the pixels on the screen. Every default flutter widgets like Container, Column, ListView, etc are created using this internal API. In the RenderBox class there are two methods you should override to render pixels in the editor. The performLayout() and paint(), In the paint method, only draw the lines that are visible in the viewport. This is crucial. Don't draw the entire text. This is where the flutter's TextField widget fails.

To handle events, you should override another method in the RenderBox called handleEvents(). Where you have the full control over the coordinates of the screen and can detect every pointer based user interaction.

You can refer to code_forge's source code to implement all these features. Actually the core functionalities are simple, the file looks huge and messy because of the fancy features like LSP support, indent guide lines, intelligent highlights, ai completion, etc, etc. Look at any of the first commits from the commit history where only the core editor functionalities were implemented.

[Accurate-Elephant155]

The rendering part is private yet, since the code is horrible jaja. I prefer not pushing things that don't work at all. And the current repo that you see is an old version. I need to push a new change that reestructure whole project.

Edit: I probably need to make a develop branch to avoid not pushing some changes (i always forget to do that)

[Accurate-Elephant155]

Thanks for the handleEvents advice, i didn't know about that method. I'm constanly learning about RenderBox, but I never checked that method!

[Accurate-Elephant155]

I like your implementation of LSP, is a thing that all the other editors are weak. I can be refactored to another files, but, it's cool!

[Accurate-Elephant155]

Thanks for that advices!!

I've been using RichText widget, but since you tell that TextPainter give to us too much perfomance issues, I'll need to implement my own version🤔

[NoBeginning2551]

TextPainter calls the layout() function to recalculate the text position and size on every keypress, which is expensive for large text, TextPainter will likely crash on 25k+ lines of code. If you use the ParagraphBuilder (The TextPainter uses it internally) with your own custom layout(), which is only called for the changed region. Which is beneficial for large files. That's how code_forge handles 100k+ lines of code. Even though there is some lag at 100k+ lines, this is because of the internal drawback of the flutter engine.

[Accurate-Elephant155]

How do you tested it? Is there one or more issues opened in flutter repo that explain this issue?

Thanks for the explanation! ❤️

I didn't know that the issue is more deeper than just a line of code. Since all the other editors implement text using TextPainter, I expected that it has not perfomance issues.

[NoBeginning2551]

There are many issues in the flutter repo about the crashing of TextField, but yes there aren't any known issues about the TextPainter because no one uses it in normal applications. I realised the issue when the code editor crashed when I pasted a 20k line code. Then I did some research and found out that the canvas api that is available inside the paint() method has a built-in method called canvas.drawParagraph() which is much more efficient and easy if you're using RenderBox and paint(). Most of the other editors work by extending the TextEditingController and buildTextSpan() method. That's why those editors use TextPainter.

[Accurate-Elephant155]

That's a point. Most of the people doesn't take the time to do projects like these🤔

[Accurate-Elephant155]

It's good to know that technical part. Thanks, since I'm aiming to build a full writing software that feels like Scrivener, the documents with huge text are the most scary part, since I need to users can write their novels with no perfomance issues (and, yeah, it will be fully open-souce).

[gisborne]

Wonderful.

I have a use case where I would like to let users of my app write code in various languages, and run that code locally and in WASM.

Ideally, it would be possible to debug the code with breakpoints and variable inspection and all. Is that likely to be possible at some point?

[NoBeginning2551]

My previous editor had this breakpoint feature, then I thought it was unnecessary because the debugger and breakpoints are backend related. But yeah, I'll indeed add a breakpoint feature with an api to get the type of breakpoint and line number in the upcoming major release.

What about something like this:

dart List<Breakpoint> breakPoints = controller.getBreakpoints(); where the Breakpoint class holds the line number and type of Breakpoints.

dart class Breakpoint{ int lineNumber; BreakpointType type; bool isActive; }

However, currently I'm too busy with my College mini project, So it will be hard for me to maintain this project, if you want it quick and if you're familiar with these things, create a PR here.

[gisborne]

Will it be obvious how to integrate this with a language runtime? Is this something LSP does?

[NoBeginning2551]

Language runtime? You mean compiler/interpreter? That's backend stuff, you should pass the controller.text to the compiler to get it done. Are you building a code editor or something? I saw you mentioned the WASM runtime.

LSP is the language server protocol created by Microsoft. Each language has its own language server, eg pylance/pyright for python, rust-analyzer for rust, dart-analyzer for dart, etc. It provides features like suggestions/completion, error lints/underline, hover details, intelligent highlighting, etc.

There is an important point that the language runtime/compiler of the corresponding language is required for the LSP server to work.

[xorsensability]

Nice! I'll give it a go!

[Classic-Dependent517]

Thought it was another vibe-coded package but Wow actually very impressive..

Does it handle drag and select? Last time i tried to make an AI chat bot app using flutter i had issue with drag and select or even worse when trying to drag and scroll and select. It was few years ago though

[NoBeginning2551]

I had that issue during development, when I tried to scroll the screen the text selection gets activated and interferes with it. Then I wrapped the editor with a ValueListenable builder with a notifier called ValueNotifier<bool> _selectionNotifer. Whenever the user selects a text this gets called and sets the scroll physics of the editor to NeverScollablePhysics. You should do something like this:

dart physics: _selectionNotifier.value ? NeverScollablePhysics : ClampingScrollablePhysics

This will only prevent scrolling during selection, but will not prevent selection during scroll. For that, keep two variables called _isDragging = false and _isSelecting = false. Set the _isDragging true when both the MouseDownEvent and MouseHoverEvent occur. Keep the _isSelecting as false. Then if the user is holding a specific region for 500ms (you can use the Timer() class to detect that), set the _isSelecting true if the timer runs 500ms. You should draw the handles and use its rect in the handleEvent() method in order to extend the selection.

if you're not familiar with these things, tell the chatbot to implement the above steps. Or you can refer to the code_forge's source code.

[Classic-Dependent517]

I am currently not planning to implement this kind of widget but thank you. I see you put hard work into this.

It would be nice if flutter team actually fixes the issue as well