Internal Architecture of the Editor
X-ray of the editor
The given picture is medium app opened in developer mode turned on. The active cursor is inside a box. This box is still an
editext. Now let’s see another screenshot when we type something
When we press enter, cursor moves to the new line and another box is created. Hence we can conclude that it is not a single
Spans are not used.
If we go on pressing enter, new boxes are added. So here is the concept —
Think editor as a container and elements are added/removed to/from it based on user actions (
backpressed). Each element is independently stylable entity, may it be Bold, H2 or Blockquote, Image or List Item etc.
Now let’s explore more on this,
Basics of the internal architecture
There is a Parent View which adds view in vertical order. In Android, it simply can be an extended version of
LinearLayout in vertical
Initially, there is an
edittext added to the stack and focussed. Until user presses enter, the content goes to the same
After enter is pressed a new
edittext is inserted into the stack. The parent view keeps track of indexes of each view added to the stack and also the view in focus. Have a look at the skeleton —
I think the internal skeleton is clear. Now, let’s look at the formatting part.
Basic building blocks of Editor
In our basic editor, we will support —
- Heading styles like H1, H2…H5
- Bold, Italics
- Ordered/Unordered Lists
- Horizontal dividers
We can sort the list and categorize them into groups like.
Group 1: Heading styles, Bold, Italics, Blockquotes, Lists
Group 2: Image
Group 3: Horizontal dividers
Here, we’ve grouped the elements based on the properties required to render them. In other words, Text, Image (multimedia), and Horizontal divider.
The actions we can perform on the Group 1 —
- We can use
Edittextto take input.
- Apply heading styles using fonts.
- Show blockquote by changing the background view of
Hence we can create a custom
edittext. This view will store all the configurations applied. We will read all of them while we collect editor data (covered later) and store on the device or send it to the server.
For Group 1: We can have a custom view with all the parameter. This block (view) will be added or removed from the editor.
The actions we can perform on the Group 2—
- We use
ImageViewto show the image.
- Image captions can be taken via
This can be a Custom view composed of an
ImageView and an
Edittext(for the caption on image). It will be responsible for uploading an image to the server and storing back the URL itself. Also, it needs to store the text entered into the
For Group 2: We can have a Custom View with ImageView and Edittext.
The actions we can perform on the Group 3 —
This is the simplest part, it will be a simple view which will draw a line.
For Group 3: We can have a view with line drawable.
In order to make a stable editor, we need to make its reactions genuine. So there are some basic rules which need to be followed.
Rules of Editor
- Initially, there will be an
editextwith the cursor on it.
- If a user is typing a paragraph and presses enter, we need to add another row(
- If a user applies a style, it will be applicable to the whole content of the block.
- If a user puts the cursor in the middle of text and presses enter, take the content after cursor — > Insert new block — > copy content into it.
- If User tries to insert an image, take the index of currently focussed view and insert a new Image block below it. Also, insert a
EditTextblock below image ( so that user can tap below image and continue writing).
- If a user deletes the whole content of a block, take him to the previous edit block.
These are some basic rules out of a host of rules which can be applied in a similar fashion.