Building a Rich Text Editor: Day 3

Designing Model Events

Shikhar Vaish
Apr 18 · 3 min read

Index

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. The problem was that there are going to be numerous blocks and so few pages relatively.

If I choose to do strict coupling, I’ll lose my leverage of having multiple models interacting in a space. So, I just gave up and started writing down the events that each block is going to subscribe to. This was simple by watching the DOM events:

  1. mousedown
  2. mousemove
  3. mouseup
  4. keydown
  5. keyup

That’s it. All combinations of these events can trigger any of the following events:

  1. caretUpdate
  2. blockOverflow
  3. splitAtCaret
  4. mergePreviousBlock
  5. mergeNextBlock
  6. selection

That is it. These 6 events were enough to cause the ripple effect and let each model handle the behavior independently. This is where I saw that events: 2–5 will interact with the parent page only. The caretUpdate and selection will interact with Doc directly. So, what if there were 2 applications so other blocks will never receive the events meant for this page. Similarly, a page will never broadcast to blocks of other pages as the room has been restricted.

This is where I could develop the model design completely. Today, I’ll be setting up a few guidelines as I had set up on Day 1 for development.

How to Design Events

Every model will subscribe and publish to events that it is directly interacting with visually. If other models are getting affected indirectly, it is the responsibility of the receiving model to pass on the events to the required locations.

For instance, typing will trigger keydown event. This keydown event should be handled by the specific block. The models that are directly interacting with this block are its parent Page and Caret.

Caret is a model that is going to interact with multiple blocks across different pages. However, it is always a part of Doc. In this case, it will be assumed that caret is part of Doc model so it will become easy to locate and communicate with it.

So, here are the rules:

  1. Every attribute will be private or public readonly. The attribute will be accessible by getter/setter methods only.
  2. Every setter method will update the value and trigger any events that are necessary.
  3. Each event that is triggered through a model should reach the models that are directly interacting with it in the DOM.
  4. A model will only subscribe to events that are directly interacting with.
  5. A model will have to pass the events to other models that it is interacting with if it does not handle it. The aim of an event can also be considered to stop the propagation of the event.

I’ve already designed the model for Block. Its going to take sometime to completely design the events for all models. Tomorrow, I’ll share the complete design of this document that should help anyone develop an editor.

Byee.

Next Article

Nerd For Tech

From Confusion to Clarification

Nerd For Tech

NFT is an Educational Media House. Our mission is to bring the invaluable knowledge and experiences of experts from all over the world to the novice. To stay up to date on other topics, follow us on LinkedIn. https://www.linkedin.com/company/nerdfortech

Shikhar Vaish

Written by

Love building editors, robotics is fun too :v

Nerd For Tech

NFT is an Educational Media House. Our mission is to bring the invaluable knowledge and experiences of experts from all over the world to the novice. To stay up to date on other topics, follow us on LinkedIn. https://www.linkedin.com/company/nerdfortech

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

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