header

Gap Buffers

2 minute read

Posted by Ryan Large

July 18, 2024

Intro

Today, let's talk about gap buffers


If you have never before heard of a gap buffer than you're in the right place! I knew nothing at all about them years into my programming career, until one day I felt like re-inventing the wheel.


This all started a few days into a new blog application I was creating for one of my clients. Their demands were quite reasonable, and their main focus was having a great text editing experience.

Rich Text Editor Libraries

For starters I immediately went to libraries. I mean who wouldn't? My tech stack was something like this...

  • React
  • Sanity.io (a headless CMS)
  • And that's it!!....

So immediately the search was on. I checked out React Quill, React Rich Text Editor, Draft.js and countless others before settling in on a library called jodit-react .

This was a great experience for me. I was learning a new library specific skill, and creating something cool. This library came with all of the fancy bells and whistles straight out of the box. Plus or minus a few paid version features.. And there was the problem.


Is it worth the time?

To be fair to myself, there were more problems than needing to pay money for specific library features I was looking for, but also customization such as custom handles when a button was clicked in the editor, or how the editor looked.


All of these things were possible. But I am now a week into this project at the time and need an entirely new set of hours that I can dedicate to learning how to customize the library further, time I simply did not have and if I did I thought, how much more time would it have taken to build one on my own?

What Did I Learn?

I also considered what I learned during the experience when it was finally all said and done. There are hundreds of libraries especially in the JavaScript ecosystem and some of them are very useful and powerful tool which can save you a ton of time. But not all of them.


Some of them you might end up using once and never again. This was the case for me. The knowledge I took with me after learning how to integrate jodit-react into a web app was very specific, non versatile and I continued my software journey without ever using that library specific knowledge again

My Own Text Editor

So the journey continued and I officially decided that I needed more control over what technology I am using in my web apps. If I could spend weeks at a time getting truly good at implementing a library into my apps, I can take the time to build me own and gain a great deal of understanding when it comes to the lower level logic behind a text editor.


At first I had no idea so much went into the workings of a text editor. Regardless of the language. I researched and watch a few videos here and there showing me how to turn an HTML5 text area into a custom text editor with JavaScript. But that just circles back around to the same issue I started with. Lack of control.


So instead I continued to look around at a few developer posts and I started hearing about this mysterious gap buffer. I had no idea what it was as I had never heard of it before. So, I began to research the gap buffer.

Data Structures && Algorithms