Have you seen The Architecture of Open Source Applications book [1] ? There is a chapter on Eclipse and its plugin system in it [2]. Lots of other interesting content not really related to text editing however.
[1]: http://aosabook.org/en/index.html [2]: http://aosabook.org/en/eclipse.html
Prosemirror is a good place to start. https://prosemirror.net/docs/guide/ https://marijnhaverbeke.nl/blog/prosemirror.html
They have a well architected model, including plugins to extend functionality, see https://tiptap.dev/ which is built ontop of Prosemirror
bonus: The author talks about collaborative editing here: https://marijnhaverbeke.nl/blog/collaborative-editing.html
An excellent tutorial for terminal based text editor from scratch: https://viewsourcecode.org/snaptoken/kilo/
I’m interested in this as well and know nothing but know of a few things.
I know of The Craft of Text Editing.
https://www.finseth.com/craft/
There’s also the Racket editors, which includes a text editor control, in the Racket Graphical Interface Toolkit. It’s what is used to implement the DrRacket IDE.
I have a little fantasy console project I tinker on that has a built-in text editor. Working on that has been an insightful trip into all of the subtleties of text editing that we intuitively know but don't know we know. Here's one I stumbled onto recently. Say your file looks like this, with the cursor at `|`:
12345|678
123
12345678
12345678
123|
12345678
12|3
12345678
123
123|45678
12345678
123
12345|678
This is definitely useful behavior. If you arrow down through a bunch of lines of various lengths, it's really annoying if the cursor starts drifting left. But implementing it correctly was much more subtle than I expected.
There are all sorts of other edge cases too. If a user presses Command-Up to move the cursor to the beginning of the file, and then presses Down, does the cursor always stay on column one, or does it remember the original column before Command-Up was pressed?
Rob Pike has published several great papers about sam, the Plan 9 text editor he wrote.
1. General overview of the editor; maybe scroll to the "Implementation" section here: http://doc.cat-v.org/plan_9/4th_edition/papers/sam/
Some of the references at the end of that paper may also be relevant or interesting.
2. Tutorial for the command language: http://doc.cat-v.org/bell_labs/sam_lang_tutorial/sam_tut.pdf
3. And explanations on structural regular expressions that sam uses: http://doc.cat-v.org/bell_labs/structural_regexps/se.pdf
4. Pike's paper representing Acme, the (sort-of) follow-up editor of sam: http://doc.cat-v.org/plan_9/4th_edition/papers/acme/
https://news.ycombinator.com/item?id=20603567, discussing https://viewsourcecode.org/snaptoken/kilo/index.html probably will give you some hints.
Architecture-wise, you can start with an ordered list of lines, with each line stored as a string.
Features that complicate things are:
- supporting large documents and staying speedy (“replace all” is a good test case)
- supporting line wrapping or proportional fonts (makes it harder to translate between screen locations and (line, character) offsets)
- supporting Unicode (makes it harder to translate between screen locations and (line, byte position) offsets)
- syntax-colouring
- plug-ins
- regular expression based search (fairly simple for single-line search _if_ you store each line as a string; harder for custom data structures, as you can’t just use a regexp library)
- supporting larger-than-memory files (especially on systems without virtual memory, but I think that’s somewhat of a lost art)
- safely saving documents even if the disk doesn’t have space for two files (a lost art. Might not even have been fully solved, ever)
Edit: you also want to look at https://news.ycombinator.com/item?id=11244103, discussing https://ecc-comp.blogspot.com/2015/05/a-brief-glance-at-how-...
You could start by looking at something super simple like Kilo:
https://github.com/antirez/kilo
Even I could understand this one pretty well and that's no small matter.
The rope data structure is an interesting concept worth checking out!
This article on VS Code has been on my read list for a while. Maybe you'll get to it faster than me.
Bracket pair colorization 10,000x faster - https://code.visualstudio.com/blogs/2021/09/29/bracket-pair-...
If you're interested in visual editors and if you're looking for something perhaps more accessible (and I can't honestly say how much it really is, I have not looked at it) then consider taking a look at 'less', the pager.
Less does almost everything an "editor" does, at least visually, except change text. It pages through text, forward and backward, line by line, it handles lines that are too long, tab expansion, it searches, even has an extended command set. (Can less do syntax coloring?)
It also handles files too big for memory. These are all editor problems. Mind its solutions may not be optimized for an editor, but it's certainly smaller.
Today, modern machines "suffer" from "too much" performance which actually frees you from not having to worry so much about the actual backing store, especially early on. Do you really intend to be editing a 2GB file? Honestly, how big is an average text file? And how many billion cycles per second does a modern CPU handle? Sucking the entire file in to RAM, and just pushing stuff around with block moves will take you very far on a modern machine. Not that you should not look at the other data structures (there are many), but you don't have to start there, depending on where your interest lies.
Also consider hunting down the book "Software Tools". There's two editions, the original and "Software Tools in Pascal". It's by Kernighan and Plauger. They go through in detail and write a version of the 'ed' line editor.
And if you really want to work on an editor, the CP/M world would love a new one. There, it's all about efficiency.
I wrote a toy text editor for fun a while back. I was aware of the 'rope' and 'gap buffer' data structures, but beyond that I had no knowledge of how "mainstream" text editors are put together. I still don't, really, but I feel that I did get an understanding of many of the core problems.
My editor had a modular architecture flexible enough to implement different input modes, including a mostly-complete subset of Vim bindings, and was fast enough to open and edit files on the order of a few hundred megabytes without perceptible slowdown. I'm sure my implementation would have looked insane to anybody who's worked on a real text editor, but I was fairly proud of it myself.
Anyway, I guess the point is that it was interesting and rewarding to navigate the core challenges myself. I'm not sure I would have gotten as much out of trying to understand how a massive project like vscode is put together, since the actual text editing functionality is (presumably) a comparatively small part of the software as a whole.
You want this:
The Craft of Text Editing
—or—
Emacs for the Modern World
–by–
Craig A. Finseth
I think this might be the kind of content you seek:
https://news.ycombinator.com/item?id=11244103
It’s about data structures for editable text. Surprisingly complex!
xi-editor https://xi-editor.io/docs.html
This is written in rust and has docs about rope data structure and editor architecture.
Not sure if this is entirely what you are after but Andreas Kling of SerenityOS builds an IDE from scratch[1] for his own operating system. While I don't personally know C++ I found the videos interesting and fun to watch.
[1] DevTools hacking playlist - https://www.youtube.com/playlist?list=PLMOpZvQB55bfeIHSA71J8...
Object oriented programming and design patterns in particular get a bad rap these days, however, the original Design Patterns book [1] has a case study chapter about designing a WYSIWYG document editor. Also, one of the authors, Erich Gamma, joined Microsoft in 2011, and works on the Monaco suite of components that VS Code is built on top of. So, while I am sure there's a fair bit of difference in the years since they wrote that book, as well as the needs of implementation in JS, I'd say it's a fairly good deep dive into some of the topics from one of the actual architects behind it.
Fair warning though, it's a fairly hard book to read. For a lighter, more fun intro to design patterns in particular, I always recommend Game Programming Patterns [2]
[1] https://www.amazon.com/Design-Patterns-Elements-Reusable-Obj...
>> I tried reading their source code, also of atom, brackets, light table etc. Honestly I don't understand anything. I am not able to make sense of the data flow and the architecture.
Even so, this is exactly the right thing to do, except probably you are studying editors that are too big for your purposes - find something smaller in scope.
You won't understand without significant effort - you need to put in the work.
So, here's what I suggest:
1: keep examining the source code of various editors - however, focus on trying to find small editors that are very focused in what they do. Also look for old editors for operating systems like DOS - they might be smaller in scope and therefore easier to understand. Also look at editors in other languages, such as Pascal.
2: The essence of learning is to implement - so start writing the smallest editor you can.
3: continue searching for and reading any sort of written documentation/blog posts/articles as you are doing.
Eventually the light will switch on.
Honestly nothing gives as much experience/knowledge
as trying to write it yourself
and then reading about how other people do it e.g VS Code blog
https://code.visualstudio.com/blogs/2018/03/23/text-buffer-r...
I was on the same boat many years ago, when I co-founded Monodevelop, a port of #SharpDevelop to Mono. I started by porting the text component, which was the core of the text editor itself.
There was a book explaining the implementation of this IDE:
https://www.amazon.com/Dissecting-C-Application-Inside-Sharp...
I think you might find it interesting for what you are trying to do, even though it's a bit old.
As far as I know, some of these terminal text editors use the ncurses library to handle their "frontend", the way in which they properly display text in your terminal. As mentioned in another comment it is utmost necessary that you feel comfortable reading code in C (with a decent knowledge of syscalls) in order for you to understand the programs' source code. But when you have already achieved that level, you can start learning about ncurses with this basic tutorial [0].
Lately I've been studying lite editor which is mostly Lua code. It's quite easy to read the code and follow along. Before that I wrote my own editor which kind of works, but it mostly made me appreciate the lite's design.
https://github.com/rxi/lite
https://rxi.github.io/lite_an_implementation_overview.html
https://rxi.github.io/a_simple_undo_system.htmlIf you're looking for more CS fundamental things--which I take to mean slightly more theoretical--you might be more interested in programming language design. A lot of the features that make an IDE powerful, things like tracking variable references, resolving/unioning types for better autocomplete, dependency graphs, tree parsing, etc., are based on programming language design/theory. I haven't used this, but this seems like an interesting open book on the subject: https://craftinginterpreters.com/
If you're interested more in the complexity management--which I would call more software engineering-y--not sure what the best way might be! I know one cool thing about Vs code is the language server provider (LSP). This provides all the IDE-goodies for all the languages Vs code supports in an abstract interface any plugin can implement. The spec has been so popular it's now supported in a bunch of editors! So you could develop an LSP for eg python, and then just have a light wrapper for vim, Vs code, Emacs.
It's from a completely different time and point of view than "full-stack development", vi, or emacs, but Petter Hesselberg's Programming Industrial Strength Windows: Shrink-Wrap Your App! presents a complete text editor for Windows as an example of a complete "real-world" Windows application.
I would suggest start with getting familiar with the C programming language. I suggest use Beej's guide for C. Next, pick up the "The Linux Programming Interface" book by Michael Kerrisk. As you read the book you will get better at understanding source code of at least Vim and Emacs if not others.
Ewig is an interesting implementation using immutable data structures. https://github.com/arximboldi/ewig Very proof of concept, tries to be a little emacs like. Might be worth checking out.
Gary Bernhardt of destroyallsoftware did a screencast episode about that: https://www.destroyallsoftware.com/screencasts/catalog/text-...
Note that it’s behind a paywall (his catalog is likely worth it for a curious hacker such as yourself).
Watch his “compiler from scratch” for free to get a sense of what his casts are like: https://www.destroyallsoftware.com/screencasts/catalog/a-com...
Emacs and vim are way too complicated to just jump directly to the source code. Try something smaller and more manageable. I would personally recommend vis[1]. Also, take a look at https://texteditors.org/ to discover new editors and resources on design and implementation
Here's 2 articles on building a SQL editor.
- https://arctype.com/blog/sql-query-editor-switch/
- https://arctype.com/blog/indexeddb-localstorage/
Disclaimer: I wrote the 2nd one. My general takeaway is that it gets interesting quickly as the amount of text edited increases.
'Challenging projects every programmer should try' - first example is a text editor with some pointers to some data structures to consider, some design patterns to use, and a few links to other resources. https://austinhenley.com/blog/challengingprojects.html
Read technical documentation for existing editors, for example:
https://sourceforge.net/p/joe-editor/mercurial/ci/default/tr...
If you're curious about looking at something novel and ambitious, Zed has a really interesting writeup of their… unusual architecture involving a GPU-powered UI framework and CRDTs written in Rust: https://zed.dev/
Off topic/meta: I really really love this question, and appreciate so many good replies. <3 HN
Neatpad https://www.catch22.net/tuts/neatpad
This is a series that I used to follow as I too wanted to implement my own text editor to learn the underlying architecture.
A small `vi` implementation that might be understandable -> https://git.busybox.net/busybox/tree/editors/vi.c
See RSyntaxTextArea (open-source code editor) and the underlying JTextArea / swing code.
There are a few weird design decisions especially in swing, but overall it's very easy to read and understand.
vim is kinda hard to follow and emacs is probably too complex. Start with some simpler open-source editors like joe, nano, or gEdit. neovim is probably a lot easier to follow than vim, as well. You could also peruse these github projects: https://github.com/collections/text-editors
For WYSIWYG scientific/math editors, see the open source TeXmacs.
undefined
undefined
I have a different suggestion. Start with a single line. define an api for move, insert and delete. figure out how to display this line, associate the cursor with the current position and how to map keystrokes to these simple functions. Add commands to load/save this one line file. Also some convenience functions (move to star/end of a line etc). Add simple search, search and replace. Next extend this to as many lines as you can display on your screen. Add more commands. Add commands to operate on a sequence of lines. Next allow arbitrary number of lines, and arbitrary length lines (now you can see only a rectangular slice of the file). Add commands to move that window, move lines around etc. Resist the urge to micro optimize or do so early. Just use the simplest data structures that help you write the clearest code. Later you can profile the code and fix slow parts.
I suggest this as it will force you to solve problems yourself as opposed reading about other people’s solutions. Basically learn by doing. Learn by struggling to come up with solutions and data structures, thereby developing some insight. The stepwise development should help focus on a small subset of problems at a time. Don’t be afraid of changing data structures as you gain knowledge. In fact write code to make it easy! Use a language that won’t trip you up in low level issues such as memory management. The api will make testing easier. Armed with this knowledge you’ll better appreciate and understand other people’s solutions as well!