/ Updates

Typely upcoming, markdown support

My next big update for Typely will include the markdown support, some new additions to our current list of checks and a small UI refactor as discussed in our earlier post.

Since it was requested multiple times, I decided to start with markdown support first and push forward with my list of planned updates.

For our editor, we use the great ACE library which supports markdown syntax by default. I'm a small UX freak and I want more because, just enabling this syntax, is not enough for me. I want a preview panel, beautiful styling for the preview and scrolling that stays in sync with the preview.

I'm 80% done and the results are beautiful and functional. The sync was a bit of a pain to achieve but it works now. The editor has a thing called scrollPastEnd which allows you to scroll some empty space after your last line. I like this feature because it lets me write somewhere in the center of the screen and not down at the bottom. I'm mentioning it because it completely messed up my calculations when writing the scroll sync bits by not taking it into consideration. At every scroll, I get the editor total height (that includes the text not visible to the screen) and my offset to the top or the first line, however you want to call it. These two variables help me calculate the percentage of my current position from the top. Knowing that position, I can apply it to the preview panel and move the scroll. It's not perfect but it never will be since we're talking about two panels with different syntax and different volume of output.

export class EditorPreview extends Component {
	componentDidUpdate() {
               const {editor} = this.props;
		const previewHeight = $(this._refMd).height();
		const editorHeight = editor.editorContentHeight;
		
                const editorScrollPastTop = editor.editorScrollTopPixels;
		const editorPercentage = getValPercentOfTotal(editorScrollPastTop, editorHeight);

		this._refEditor.scrollTop = (editorPercentage / 100) * previewHeight;
	}
	...
}

With this out of the way it is time to talk about the preview panel position and placement. I figured that the placement should be obvious: to the right of the editor itself, between the sidebar with results and the editor. This looks really good…on my 4k monitor. Any monitor with a lower width than 1900px will display some tiny little panels though and it feels like you're writing on a toilet paper so that's a no-no for me.

To fix this issue I will carefully watch the resolution and apply some tweaks. Whenever you opt for the markdown syntax, I take a look at your browser's dimensions and see what can be done. If you're below 1900 I can place the preview panel in the editor's tabs (right next to the general settings). But what if the user values the preview more than the sidebar with the results. He/she may have already written the text and taken the results into consideration. This might be a stage where the user is working on the final part of the project so, hiding that preview panel, may seem annoying.

My go at this issue is to ask the user how to proceed offering two choices:

  • Hide the preview panel in the tab I just mentioned
  • Hide the results sidebar in a "drawer" that can be seen by clicking on an button next to the logo

needs2go

This way, I give the power of choice to my users and by asking the preferred way instead of deciding myself what's best for them.

With this next update I have some other additions but I will cover them in a future post. Leave your feedback in the comments section and let me know what you think.