Dev Diary 18 – A wild markdown editor appeared!

by | Sep 18, 2016 | Dev Diary | 4 comments

Hi hacknplanners,

This update comes with one of those features we have been willing to implement for quite a long time. I’m talking about the markdown editor, replacing the existing rich text editor we have been using since HacknPlan was launched, almost a year ago. And, why replacing the existing editor? Why markdown? Well, there are several good reasons:

  • The old editor, which was a 3rd party component, had several issues we weren’t able to fix, especially with embedded pictures, videos, and other tags.
  • The old editor prevented us from implementing some features we really want to have, like mentioning users, referencing tasks and other elements, or formatting code.
  • We received many suggestions regarding markdown from you guys. It’s very common in project management/organizational tools (Jira, Trello…) and, once used to it, it’s more productive than a normal text editor since it allows you to format your text without leaving the keyboard.

We also added a few other improvements and bug fixes, let’s take a look.

Features and improvementspromo169

  • Markdown editor: The new markdown editor has been added replacing the existing rich text editor in the task creation dialog, task editor, task comments and design element description. In the case of task editor and design element description, the new editor has been embedded in the page (the old one was displayed on a popup dialog). The new editor supports GitHub-flavored markdown syntax, including code formatting. Besides the syntax support and highlighting capabilities, the editor comes with some buttons for the most common markdown tags in order to simplify the transition for those who have never worked with this kind of syntax. It also provides a preview button for you to see how it looks what you just wrote without having to save the changes and close the editor. What happens with your existing text created with the old editor? We have converted all your existing content (internally saved as html) to markdown syntax. We are not 100% sure everything will be correctly translated, but we are pretty sure most of it will. This is the first iteration of the editor, more updates will keep coming in order to implement the following enhancements:
    • Support for mentioning users using the @ tag, which will automatically display a list of users to select. The mention will generate a notification to inform the user.
    • Support referencing tasks, design elements and attachments.
    • Full-screen edition for a more comfortable usage when creating long documents (fi. design descriptions).
    • Add formatting support to other fields, like project and milestone descriptions.
  • UI improvements: We have improved some aspects of the UI to enhance readability and usability:
    • We have slightly reduced the size of the category column on the board and aligned the badges with the task counts to the right.
    • We have changed the way the task fields are displayed in the task editor, giving more space to the description. We also condensed the task title and list of assigned users a bit.
    • We have moved some action buttons from the task editor top bar to the top right corner of the body. We did this because the available space was small there and we will add more buttons in the near future.
    • We have expanded a bit the width of the game design element editor.
  • Default category removal: Default categories and subcategories can be fully removed now. The enable/disable feature is still available but, as stated in the application, it will be deprecated to simplify the management of categories.promo170
  • Desing element change from the context menu: We have added a new entry to the context menu in order to be able to quickly change the game design element of a task without having to open the editor. A popup dialog appears where you can select the design element. This dialog will replace the design element selection on task creation and task edition, which is currently performed using a dropdown.
  • Renaming of cost fields: We have renamed our cost fields to be more intuitive and reduce ambiguity. The old Planned cost is now Estimated cost and the old Total cost is now Current cost or Final cost depending on whether the task is open or completed.

 Bug fixes

  • The due date of the milestone couldn’t be removed.
  • There was a problem on removing non-active users from tasks or the project.
  • We got some UI inconsistencies when updating a task field and quickly selecting another one.
  • The reminder for milestone deadline was shown on the board even after the milestone was closed.
  • The estimated date was not shown in the backlog.
  • Sometimes not all the projects were displayed in the project dropdown on the top menu.

What’s next?

We’ll keep adding more features to the markdown editor and improving the game design model tool. As you maybe know, we are also working on our first premium plan, and we’ll announce all the details on September 26th, including pricing, coinciding with the first birthday of HacknPlan. I hope you all like what we’ll unveil.

Happy planning!


  1. Chris Evans

    Keep up the good work! This tool has improved my workflow and reduced the number of notebooks strewn across my desk. Thank you!

    • Chris Estevez

      Thanks Chris! Glad to see it’s being useful to you 🙂

  2. Ignacio Baldini

    With these changes, I am evangelizing about Hack and Plan to every Gamedev! Kudos Guys! // Creo que es de españa Hack and Plan, por lo que queria agradecerles el laburo que hacen! sigan asi!


Submit a Comment

Your email address will not be published. Required fields are marked *