[HN Gopher] Build Your Own Text Editor
       ___________________________________________________________________
        
       Build Your Own Text Editor
        
       Author : Tomte
       Score  : 245 points
       Date   : 2021-01-10 09:52 UTC (13 hours ago)
        
 (HTM) web link (viewsourcecode.org)
 (TXT) w3m dump (viewsourcecode.org)
        
       | kaliszad wrote:
       | Pavel Klavik is currently programming our own new collaborative
       | rich text editor for OrgPad.com. This will be tightly integrated
       | with Re-frame/ Reagent/ React and be quite specific to OrgPad (so
       | there isn't much reason to open source it or anything like that).
       | I think, it might be one of the few editors written in
       | ClojureScript though. The issues are multiple. E.g. flickering,
       | when the browser tries to do spell check. The API for spell check
       | is not very useful from what I understood between the swear words
       | by Pavel :-D e.g. it just isn't possible to give it words and
       | receive suggestions back and handle the rest in the application.
       | More and more of the web infrastructure begins to show its root
       | in the static web of the 90s and is hardly helpful for a modern
       | application, where flickering just isn't an option. It seems, we
       | will have our own spell check in the future or whatever to
       | prevent the flickering. There is more stuff like this in the
       | broader web technology stack.
       | 
       | The prototype is I think about 3000 lines of ClojureScript code.
       | It does quite a bit already but there is more to be done. When it
       | is somewhat done, Pavel will probably record a talk about it and
       | put it on our YouTube channel.
        
       | stevekemp wrote:
       | This is a nice guide which walks through building the small
       | editor, kilo, by antirez of redis fame.
       | 
       | The original editor was introduced here:
       | 
       | https://news.ycombinator.com/item?id=12065217
       | 
       | I put together a fork of that editor, in C++, with support for
       | buffers, scripting with Lua, and similar things. Nothing amazing,
       | but still quite useful. That was posted here to some small
       | interest:
       | 
       | https://news.ycombinator.com/item?id=12137698
        
       | minxomat wrote:
       | I started to create one, in Bash 3: https://github.com/turbo/bee
       | :)
        
         | jraph wrote:
         | AAAAH!!!!! [1]
         | 
         | This is useful at least as an example on how to manipulate the
         | tty and use ncurse.
         | 
         | [1] https://github.com/turbo/bee/blob/master/bee#L277
        
       | Daho0n wrote:
       | Interesting. I wish there was a list of tutorials creating this
       | editor but in different languages.
        
         | pailey wrote:
         | The entire tutorial has been translated to Rust:
         | https://www.philippflenker.com/hecto/
         | 
         | Kilo has also been ported to many other languages, including
         | Go, Python, Java: https://github.com/search?q=kilo+text+editor
        
       | C0d3r wrote:
       | Previous discussion:
       | https://news.ycombinator.com/item?id=20603567
        
       | mxmxnxor wrote:
       | Is there a something similar but uses array of bytes as output to
       | application viewport pixels framebuffer? I think it will be way
       | more interesting, especially pixels rendering part. You need
       | implement vector rasterizer (because after you parse ttf font
       | file glyphs represented as sequence of lineTo(x,y) and
       | quadTo(cx,cy,x,y) instructions). You need to implement proper
       | antialiasing (based on area coverage, not sampling, because it
       | gives 256 shades of color not 16x of something like msaa in
       | games). You need to choose some of rendering approaches - for
       | example rasterizing vector objects one by one with blending to
       | background or do some deferring approach with resolving
       | intersection between objects geometrically (to reduce overdraw)
       | and only then walk over pixels and calculate its colors. You also
       | need to implement some dynamic caching and adaptive streaming
       | because you want to zoom big blobs of text and without caching
       | e.g rendering as vector you will not get 60fps and smooth curves
       | without pixelization or LOD changing artifacts)
        
         | scotty79 wrote:
         | There's super interesting super-fast very high quality font
         | rendering technique on GPU using extremely simple fragment
         | shader and low-res prerendered texture that contains 3-channel
         | signed distance field.
         | 
         | https://youtu.be/6l_oSHWFbb0
         | 
         | That distance fields encoded in the texture are really freaky
         | to capture sharp corners as median of three of them when
         | texture gets interpolated:
         | 
         | https://github.com/copperspice/cs_paint/blob/master/demo/res...
        
           | scotty79 wrote:
           | Apparently it's called MSDF fonts and you can read about how
           | to use it practice here
           | 
           | https://css-tricks.com/techniques-for-rendering-text-with-
           | we...
        
         | [deleted]
        
         | jahewson wrote:
         | Then it would be "build your own FreeType".
         | 
         | Zooming big blobs of text at 60fps without caching remains an
         | open problem as it's necessary to use a GPU shader and all of
         | the approaches make one or another lacklustre trade-offs.
        
           | andi999 wrote:
           | Can you explain more what the problem is?
        
             | zamadatix wrote:
             | It's simply that drawing a non trivial amount of(nice
             | looking) generic text (accurately) seems simple but
             | actually takes a lot of logic and a lot of processing time
             | relative to a rendering deadline. There are a lot of
             | reasons for this but largely it comes down to having to do
             | a lot of individual rendering every time something changes
             | and when one thing needs to be rerendered (e.g. the user
             | zoomed) it likely means everything needs you have to bulk
             | render everything again in the next 16 or fewer ms.
             | 
             | https://gankra.github.io/blah/text-hates-you/ has a decent
             | description of many of the problems seen with rendering
             | text in the browser setting (which is on the more complex
             | side of text rendering).
        
       | geoffeg wrote:
       | Does anyone have a recommendation for what framework(s) to use to
       | build a kind of proof of concept text editor? I've been toying
       | with writing my own editor with some somewhat strange features,
       | not sure where to start if I'm just looking to play around with
       | some ideas. Speed isn't a huge concern, but ease of implementing
       | new features is.
        
       | tomcam wrote:
       | What is the equivalent of this project but with support for
       | Unicode and RTL?
        
         | beagle3 wrote:
         | Not exactly equivalent, but fabrice bellatd (of qemu, ffmpeg,
         | quickjs fame, among others) has a tiny emacs inspired editor
         | with those features somewhere on bellard.org
        
           | sam_lowry_ wrote:
           | qemacs is not tiny. Definitely not 1000 locs.
        
       | UltimateBallR wrote:
       | Because everyone needs their own Text Editor
        
       | mometsi wrote:
       | A related project is Lite, a graphical text editor that's a bit
       | further along the frontier of useful features vs code simplicity.
       | 
       | It includes lua 5.2 and SDL. On top of that, it's a few c files
       | to handle input and rendering, and a set of neatly written lua
       | modules for the logic.
       | 
       | Repo and author write-up:
       | 
       | https://github.com/rxi/lite
       | 
       | https://rxi.github.io/lite_an_implementation_overview.html
        
         | monopoledance wrote:
         | This isn't a tutorial/how-to, am I missing something?
        
           | ptrott2017 wrote:
           | Nope not a tutorial - but the code is nice and clear making
           | it easy to work through and make changes/ add features in as
           | a good learning exercise. The Lite editor plugins also give a
           | good modular way to understand how specific features are
           | implemented and to experiment with etc. The implementation
           | overview (linked in post above) gives a great understanding
           | of what is happening where. Overall its a really nice
           | starting point for playing with the code base and thinking
           | about how to extend or modify for your own use.
        
       | waynecrescent wrote:
       | I would be really interested in a similar book/workshop but for
       | graphical text editors.
        
         | interactivecode wrote:
         | same here, that would be so much fun!
        
         | teddyh wrote:
         | There's _The Craft of Text Editing_ by Craig A. Finseth:
         | 
         | https://www.finseth.com/craft/
        
         | monopoledance wrote:
         | 2nded.
         | 
         | I would love to hear about a "first line to last line" tutorial
         | for a simple GTK app in C, python or preferable rust.
         | 
         | To me there seems to be a huge diffuse overhead to GUI
         | programming, which is discouraging for my kind of brain. I
         | thrive building tree houses, but despise puzzles.
         | 
         | Anyone got a link?
        
       | arximboldi wrote:
       | For another approach: I built a didactic text editor to teach
       | "value oriented design" and immutable data-structures in C++:
       | 
       | https://github.com/arximboldi/ewig
       | 
       | It's design is covered in these talks:
       | 
       | - Postmodern immutable data structures:
       | https://www.youtube.com/watch?v=sPhpelUfu8Q
       | 
       | - The most valuable values:
       | https://www.youtube.com/watch?v=_oBx_NbLghY
        
       | thangalin wrote:
       | I've been working on a text editor that uses the chain-of-
       | responsibility design pattern that provides the ability to edit
       | Markdown, AsciiDoc, reStructuredText, and similar content.
       | 
       | Here's yet another guide to building a text editor, using JavaFX,
       | rather than C from scratch:
       | 
       | * https://bell-sw.com/announcements/2020/11/02/TeXnical-Writin...
       | 
       | * https://bell-sw.com/announcements/2020/12/10/TeXnical-Writin...
       | 
       | The second article depicts how the chain works. Using a chain
       | makes combining different features much like snapping together
       | lego blocks. Here's a video of the editor in action---albeit
       | outdated---showing a variable processor, an R processor, and a
       | Markdown processor chained together:
       | 
       | * https://www.youtube.com/watch?v=u_dFd6UhdV8
        
       ___________________________________________________________________
       (page generated 2021-01-10 23:01 UTC)