The Code Challenge

The Code Challenge

Hey there!

If you are reading this, that means:

  1. You know how to code with javascript and React
  2. You are curious
  3. The problem that I am submitting to you picks your attention

Why tackling this challenge?

  1. For fun
  2. I love to tackle challenges
  3. Getting an eternal recognition is good for my mind
  4. Why not joining Bond Inbox? 🤔

Let's rewind a bit :

The end goal is to insert some complex React components into a "contentEditable" div box. (API calls to enrich content, buttons, dropdown etc.)

These components must be inserted anywhere into the text, just like any random bullet point.

It would work a little like in Gmail when one enters an email address which becomes sort of an object when it is validated. Although in our case the object would embed multiple complex items (fields, buttons, dropdown etc.)

We must be able to insert as many complex components as necessary, and potentially some text before or after each one of these components.

We must be able to edit the text as with any classic editor without corrupting the components in the process, and whatever the scenario (selections, copy / paste, CTRL+Z etc.)

It must be possible to easily manipulate these components and move them in the contentEditable, using a simple drag & drop or a copy and paste.

We must be able to easily edit these components by double clicking on them. Just like in gmail when you double click on an email address then the email object goes into edit mode, and you can edit the email address in question.

Solution 1:

Every time we want to insert a component we create a div at this place with the absolute property on it. Ok, I'm out. 😁

Solution 2:

We could feed the contentEditable with a list representing either text or a component. For example:

<div contentEditable=true>

<span> Some text... blablabla </span>

<ComplexComponent />

<span> Some more text</span>

<ComplexComponent />

</div>

This way the rendering would be interesting, the components would be well inserted in the middle of the text and the list of texts/components would be adjusted according to the user's actions.

But

It would be very cumbersome to manage all the user events to keep them under control.

For example:

Once rendered by React, the components in the middle of the text would be considered editable text; therefore, they would even be erasable if we didn't set up an algorithm to protect them.

For the same reason, Chrome would not distinguish if you did a Ctrl+X on a selection that included a React component, the structure would become difficult to maintain... unless special rules were added

It is imperative to keep the style of the components... so what if the user selects a component from the text and puts it in bold? or even makes it a bulleted list? the DOM nodes would break... unless special rules are added again

A tip: we could play with the keys of the texts or components to force their re-creation at appropriate times (we would avoid the classic render to avoid resetting the cursor every time a key is pressed...)

and so on so forth...

The challenge:

  • What architecture other than this text/component list would be more appropriate?
  • How to adopt a clear and maintainable code structure? As much as possible, we want to avoid creating functions as we encounter problems, to store these functions in the contentEditable's functional component, which would then rapidly grow... It would look a bit handcrafted, especially with this list of texts/components. It seems that React does not particularly recommend a classic object architecture with its inheritances etc...

There you go for the details and the difficulty of this challenge.

Do you feel ready to take on this not so simple challenge?

You can submit your answer via the channels below.

👉 via email on wcalvat [at] bondinbox [dot] com

👉 via twitter

👉 via linkedin

👉 via Discord: bond inbox#7852

- William -