Creating a Blog Post editor from scratch. Part 1: the bare minimum

Introduction

• The ultimate goal of this series is to document my journey as I try to build the mark down editor that Stackoverflow has.

GitHub

• HERE

Youtube version

• HERE

The bare minimum

• So the ultimate goal is to build a markdown editor from scratch, sound easy, right? Well, as it turns out not really. If you look into it you will notice even the most basic of markdown editors still relies heavily on basic compiler theory. Eventually I will learn all about that kind of stuff and I even found a free online book to help me with all that Computer Sciencey stuff, HERE.

• For the moment we just want to be able to type some words have them, show up on screen, be able to add stylings to them and save them to a database. Which means the bare minimum will look like this

• Is it in markdown ? No
• Does it have good UI? No
• Does the text update in real time? Yes
• Can we add stylings to it? Yes
• Is it good enough for right now? Yes!!!!!!!!!!!!!!!!!!

How to build it

• We know we want to save it to a database so we start out with a basic HTML form:

<form th:action="@{/admin/blogPost/create}" th:object="${blogPost}" method="post">
        <input type="text" th:field="*{title}" id="title" name="title" placeholder="title" class="editorInput">
        <input type="submit"/>
        <textarea id="my_text_area" th:field="*{body}"  name="story" rows="50" cols="90"></textarea>

</form>
<div id="editDisplay" class="display">

    </div>

• If you are confused with all the th: stuff, don't worry, that is just because I am using spring boot and thymleaf as the templating engine. None of that is really too important to getting the read time display that we want. Just know that we want to be able to type inside of our form and have the text appear inside of the <div id="editDisplay" class="display"> and we do that with JavaScript.

The JavaScript

• To make this happen we really only need 5 lines of java script. Since it is so small I decided to make it inline:

<script th:inline="javascript">
/*<![CDATA[*/
    const textArea = document.getElementById('my_text_area');
    const editDisplay = document.getElementById('editDisplay');

textArea.addEventListener('input', () => {

    editDisplay.innerHTML = textArea.value;
})

/*]]>*/
</script>

• If you are unfamiliar with thymleaf, don't worry about all the weird syntax. What you should care about is that we are using the input event to set the innerHTML to what we have set in our form.

The database schema

@Entity(name = "blogpost")
public class BlogPost extends AbstractEntity{

    public BlogPost(){}

    private String title;

    @Lob
    private String body;
    private Integer seriesNumber;
    private Date dateCreated;

    @ManyToOne
    @JoinColumn
    private Series series;

//getters and setters below
}

• The schema is pretty straight forward,except for the @Lob annotation. We use this to set our body to a large object type. This tells Hibernate to store the text as a large object which will take the binary data and store it inside of a table called pg_largeobject. If we do not define the body as Lob we can then only store 255 characters in our string, anything more will make the app crash.

Conclusion

• Thank you for taking the time out of your day to read this blog post of mine. If you have any questions or concerns please comment below or reach out to me on Twitter.