from Hacker News

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

by s3arch on 1/10/22, 1:46 PM with 72 comments

• by bakul on 1/10/22, 4:40 PM

  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!

• by nurbel on 1/10/22, 3:11 PM

  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

• by antidnan on 1/10/22, 3:50 PM

  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

• by grisha on 1/10/22, 2:17 PM

  An excellent tutorial for terminal based text editor from scratch: https://viewsourcecode.org/snaptoken/kilo/

• by bmitc on 1/10/22, 2:44 PM

  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.

  https://docs.racket-lang.org/gui/editor-overview.html

• by munificent on 1/10/22, 6:11 PM

  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?

• by marttt on 1/10/22, 4:05 PM

  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/

• by Someone on 1/10/22, 2:15 PM

  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-...

• by scandox on 1/10/22, 3:13 PM

  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.

• by jesperlang on 1/10/22, 2:59 PM

  The rope data structure is an interesting concept worth checking out!

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

• by mattferderer on 1/10/22, 6:15 PM

  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-...

• by whartung on 1/10/22, 3:47 PM

  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.

• by caconym_ on 1/10/22, 5:11 PM

  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.

• by teddyh on 1/10/22, 2:01 PM

  You want this:

  The Craft of Text Editing

  —or—

  Emacs for the Modern World

  –by–

  Craig A. Finseth

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

• by danking00 on 1/10/22, 2:01 PM

  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!

• by atfzl on 1/10/22, 2:10 PM

  xi-editor https://xi-editor.io/docs.html

  This is written in rust and has docs about rope data structure and editor architecture.

• by jdefelice on 1/10/22, 2:25 PM

  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...

• by danielbarla on 1/10/22, 3:20 PM

  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

• by andrewstuart on 1/10/22, 7:28 PM

  >> 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.

• by tester34 on 1/10/22, 2:12 PM

  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...

• by coutego on 1/10/22, 6:14 PM

  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.

• by RapperWhoMadeIt on 1/10/22, 2:03 PM

  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].

  [0] https://tldp.org/HOWTO/NCURSES-Programming-HOWTO/

• by jmiskovic on 1/10/22, 2:28 PM

  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.html

• by cdrini on 1/10/22, 6:33 PM

  If 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.

• by buescher on 1/10/22, 2:46 PM

  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.

• by ketanmaheshwari on 1/10/22, 1:57 PM

  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.

• by bebop on 1/10/22, 4:56 PM

  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.

• by cellularmitosis on 1/10/22, 2:06 PM

  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...

• by cartesius13 on 1/10/22, 11:53 PM

  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

  [1]https://github.com/martanne/vis

• by epberry on 1/10/22, 3:52 PM

  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.

• by schemathings on 1/10/22, 6:17 PM

  '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

• by jhallenworld on 1/10/22, 3:30 PM

  Read technical documentation for existing editors, for example:

  https://sourceforge.net/p/joe-editor/mercurial/ci/default/tr...

• by mxstbr on 1/10/22, 4:27 PM

  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/

• by wnolens on 1/10/22, 8:35 PM

  Off topic/meta: I really really love this question, and appreciate so many good replies. <3 HN

• by cx0der on 1/10/22, 2:00 PM

  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.

• by mathieubordere on 1/10/22, 4:16 PM

  A small `vi` implementation that might be understandable -> https://git.busybox.net/busybox/tree/editors/vi.c

• by armchairhacker on 1/10/22, 3:28 PM

  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.

• by maxk42 on 1/10/22, 5:09 PM

  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

• by amichail on 1/10/22, 2:22 PM

  For WYSIWYG scientific/math editors, see the open source TeXmacs.