Fine, I’ll build my own text editor

The article discusses the author's decision to create their own text editor after expressing dissatisfaction with existing options. They were inspired by the popularity of Sublime Text and felt that many modern software is of poor quality. The author initially struggled with slow performance on their Intel-based Mac, which was resolved when they switched to a Mac with Apple silicon.

They began by building a text editor on a canvas element, but found that it resulted in a div soup hellscape, with the CPU doing a lot of work to render the screen at high frame rates. This lack of interactivity made the text editor difficult to use.

The author then developed a list of the "minimum viable" features for their text editor and implemented them. They created an interactive demo where users could click around and type. However, they realized that they needed to address the accessibility issues, as canvas elements are entirely inaccessible. They decided to cheat by using native browser overflow on a hidden div, which matched the canvas text and handled scrolling offsets. Although this approach worked, the canvas element remained inaccessible.

The author eventually switched to using a contenteditable div, which provided native text selection and other accessibility features. They were pleased with the progress they made, but noticed performance issues when working with larger text blocks. They considered using a textarea element instead, which proved to be more performant for longer text.

The author added syntax highlighting to their final demo using the contenteditable element, but acknowledged that there were still performance bottlenecks, such as using CSS highlights and Tree-sitter for generating syntax trees.

Overall, the author's journey to create their own text editor took them through various challenges, including performance issues and accessibility concerns. Despite the hurdles, they managed to create a functional text editor with basic features, highlighting the potential of using canvas and contenteditable elements for building custom text editors.