Basic Writing Experience

Editing Events

It might look like some complex electronics circuit but this simplifies a lot of coding.

The arrows between blocks tell us that the source is going to trigger the destination block. In this case, the block is going to trigger pageOverflow the handling mechanism through checkAndHandleOverflow the method of parent Page.

The text over the connecting arrows represents the “Events” when this is going to happen.

This is going to make it easier to handle and predict edge cases. Why? Insert Character(s) can take place due to a simple keypress or maybe when a user pastes content from the clipboard.

Designing Model Events

Following up on the previous post… I had been thinking of the middle ground between strict coupling and completely loose coupling through event emitters.

Throughout the day, I developed designs and always ended up with hundreds of events. In order to set data in a block, I tried passing data from DOM to document, to the page, and block. The moment I transition from DOM→Doc level to Page→Block level or even in reverse flow, I triggered a series of useless events that were never going to be used. …

Designing Communication between Models

Current UI

Today, I’ll be segregating the features and design more models that I need. Notice that, I developed and solved my problems as I encounter them. In my last post, if you see the parameters passed on onKeyDown and onEnterKey. This was decided totally on the basis of the local problem-solving goal. As the project grows, the parameters tend to change and the iterative refactoring results in chaos.

Chaos is inevitable

Furthermore, this hinders development. Since changing existing code is difficult, I’ll tend to take the easier path and add another method to the component that does the same task with different parameters.


I’ve been writing a series of articles on text editor development and this post will provide an overview of all articles.

Day 0: Why am I building this? | Designing Document Core
Day 1: Project Structure | Develop Core | Identify Key Sub-Problems
Day 2: Designing Communication between Models
Day 3: Designing Model Events
Day 4: Basic Writing Experience

The series ends on Day 4. I’ll be developing the complete editor now. Through this series, I’ve developed a simple mechanism to let the user type and handle overflow and pagination. The methodology used to build this will be used to develop other features of this project. I hope this helps you get started.

Some awesome resources:

Challenging Projects include a Text Editor
Kilo Editor
An Open-Source Text Editor for the Web


Project Structure | Develop Core | Identify Key Sub-Problems

Having built an editor twice, I realize there’s so much going on and I lose track of what I built a few minutes ago. Its the endless scrolling and ambiguous structuring throughout the project that made me lose focus. In this post, I’ll structure my project and identify key sub-problems before beginning with the real development. This is just to get keep me from getting lost in a large codebase.

A text editor is, in fact, much similar to building a robot. When I treat the editor as a robot, I would say that the robot has got a list…

Designing Document Core

I’m usually mad about the design of everyday things. Ever noticed the caret in MS Word in the recent builds? It animates while typing... I just feel it's amazingly relaxing to the eyes. This is the reason I started building text editors :P. I wanted to build something so soothing to the eyes. My first project in my freshmen year at college was to build an IDE just to remove the dozen extra tools from my view. It taught me innumerable skills in UI animation and development. More importantly, it's the art of breaking down a task objectively to kill…

Interfaces, Transformations, Zooming, and Meth…

Hello There! For the last few days, I’ve been working on a project where I had to implement an infinite whiteboard and place sticky notes. The idea is to build a component that can be scrolled indefinitely. A user should be able to drag-and-drop widgets inside it anywhere in this infinite space. Moreover, it gets pretty interesting while adding a zoom-tool, a handy tool for such applications. I learned quite a lot about the transformation and scaling mechanisms while building this project. Read on to see how to build this from scratch!

Component Breakdown


Hi There!

This is a post from Macbook fanboy ;) I’ve been trying out a few themes and tweaks for a while and it's been fun. This is how my desktop looks…

First things first, get the Gnome Tweak Tool.

sudo add-apt-repository universe

sudo apt install gnome-tweak-tool

Getting the Mac Theme is pretty straight forward. Head over to this McMojave Theme Pack. Download the Mojave-light.tar.xz file and extract it in /usr/share/themes folder.

This process is also similar to getting a theme. Just go to the Catalina OS Icon Page and download Os-Catalina-icons.tar.xz. Extract it in /usr/share/icons folder.

Fire up the…

This is actual game engine footage;_;

Hi! Last year, I completed my first open source project! This post is for you if you ask questions like “How to make software ?”, or “How do I make a window and GUI stuff through code ?”. This article will give you an idea of how to approach a project and a glimpse of how I built my project. On the way, I’ll be sharing stuff like how to choose a programming language, resources to get started with, etc.
Well, what did I make? It’s a lightweight IDE for competitive programming. Yes, source code editors like Sublime Text and VS…

Hi! Hackerearth had it's monthly rated competitive round on June 2, 2019. I could solve just 2 of em during the contest. I’ll keep updating this post as I upsolve the contest.

Problem: Mosiacs and holes

The editorial’s code is beautiful. Takes some time to understand it. I recommend that you have the solution code open on the side while reading on.

We maintain 2 arrays of size n x m a[][] and b[][]. a[][] is to store the actual state of the matrix. b[][] is used to determine whether the a[i][j] should be flipped or not.

  • Row-Wise Traversal: We…

Shikhar Vaish

Graphics Enthusiast and Text-Editor tinkerer.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store