WingNews logo WingNews GitHub [2]
top | item 29874669

Ask HN: How to learn about text editor architectures and implementations?

195 points| s3arch | 4 years ago | reply

I am a self taught developer. Its been more than 3 years. I know decent JavaScript, and full-stack developement knowledge. I recently started admiring text editors. I use vscode. I have also used VIM and EMACS. 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. I want to understand how text editors work under the hood. Also I want to understand the plugable architecture they use to extend the functionalities of the editor.

Please suggest me any articles, videos, conferences, blogs, where I can pick up the concepts. I have been troubled by this lack of knowledge and unclear path to access it.

Edit: Reasons for this quest: I am not here to create yet another text editor. But I do understand that they are one of the complex peice of software which still is under constant improvisation and developement. Also text processing is the one of the core concepts of computer science. A lot of algorithm and data structure knowledge is hidden inside it. Besides, I feel through real world projects one can learn alot about core computer science foundations.

72 comments

order
[+] bakul|4 years ago|reply
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!

[+] b3morales|4 years ago|reply
Similar suggestion: if you're trying to learn the architecture of a big established project like Vim or Emacs, don't start at the top and try to follow everything. Start with a small feature you would like to tweak, implement, or understand. How does Emacs render the modeline, for example. Just finding the relevant code in the repo will give you some info. Read through it, follow its calls and the data structures it touches. Getting used to the code style might take a bit. You probably won't understand or retain everything about how this piece works, but in hacking on it you will naturally brush up against other areas and build up your familiarity with the project practices and larger structure. And you can use that as a stepping stone to check out another area of functionality.
[+] TheRealPomax|4 years ago|reply
Except text editors _need_ other people's solutions to learn from, because text editing is one of those cases where "a good implementation for a part of the problem" is a terrible solution for the full problem. Editing implementation for single lines of text do not work well at all for entire text files. Operations become incredibly slow, which is why we invented things like rope data structures and buffered views.
[+] s3arch|4 years ago|reply
I really appreciate your thoughts.

The process of incremental building things. Figure out what needs to be built first and then implement it. Finally compare your work with others. To be frank I used to feel that there must be some sort of deep intellectual concepts lying around, and whatever I try or implement is just dumb. But now after what you described the process and technique seems not so complicated.

[+] antidnan|4 years ago|reply
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

[+] codethief|4 years ago|reply
I came here to mention Marijn Haverbeke's blog! His articles (about ProseMirror but also CodeMirror) are full of insights!
[+] evilhackerdude|4 years ago|reply
Seconded! Marijn has thought about this stuff a _lot_.
[+] munificent|4 years ago|reply
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
Press arrow key down once, and you get:

    12345678
    123|
    12345678
Because the second line's length is too short to preserve the cursor column, the cursor snaps to the end of the line. Note that the cursor is really here. If the user were to press left once, it would take them to:

    12|3
Instead of pressing left, say the user presses down again. The cursor is currently on column 4, so you'd expect:

    12345678
    123
    123|45678
But in the text editors I've tested, you get:

    12345678
    123
    12345|678
So the cursor is snapped to the end of the line on line 2, but if the user keeps cursoring past that, the original cursor column is remembered and restored. The text editor has to display where the cursor currently is, but track where it "wants" to be if the line length weren't getting in the way.

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?

[+] dllthomas|4 years ago|reply
This is used as a mechanic in the demo of vim-adventures, incidentally.
[+] marttt|4 years ago|reply
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/

[+] Someone|4 years ago|reply
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-...

[+] mkhnews|4 years ago|reply
Yea, a double-linked list of lines or what some call a gap-buffer. And how to display it all is another big part.
[+] scandox|4 years ago|reply
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.

[+] fcatalan|4 years ago|reply
I loved following this one a few summers ago and even went beyond the end of the tutorial adding functionality and trying more advanced data structures. I think I would have ended with a completely usable hyper-personal editor but unicode support didn't look like fun.
[+] sam_lowry_|4 years ago|reply
The screencast by antirez is a joy to watch.
[+] jesperlang|4 years ago|reply
The rope data structure is an interesting concept worth checking out!

https://en.wikipedia.org/wiki/Rope_(data_structure)

[+] evanmoran|4 years ago|reply
Glad to see this here. This is was my original thought too as one of the original data structures for text editing. It's used to quickly insert/delete within a very large string.

Has anyone used other mechanisms for large document types? It seems like an array of paragraphs, each containing a simple string could probably handle most editing tasks and might be easier to layout and manage. Curious what other data structures people have used!

[+] whartung|4 years ago|reply
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.

[+] nicoburns|4 years ago|reply
> Do you really intend to be editing a 2GB file?

I don't know about most people, but I deal with such files (usually JSON) on a weekly basis. It's surely one of the things that makes implementing text editors tricky.

[+] caconym_|4 years ago|reply
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.

[+] teddyh|4 years ago|reply
You want this:

The Craft of Text Editing

—or—

Emacs for the Modern World

–by–

Craig A. Finseth

https://www.finseth.com/craft/

[+] danielbarla|4 years ago|reply
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...

[2] https://gameprogrammingpatterns.com/contents.html

[+] forinti|4 years ago|reply
I was once tasked with writing a simple text editor. I knew this book inside out so I decided to try putting the text into a tree the way it describes.

This made selecting text quite hard. So I gave up and just put the whole thing into an array. It made everything a lot easier.

[+] andrewstuart|4 years ago|reply
>> 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.