Page MenuHomewrite.as

Preview Markdown before publishing
Open, NormalPublic

Description

Overview

Allow users to preview the Markdown they've written before publishing.

Also tracked on Trello.

Users

mrspirateowl mentioned this on Twitter:

you know what else I'm missing? previews
esp. when I'm adding a photo

Other user discussion on the forum here.

Implementation

Idea 1:

Add a dropdown menu on the publish button and a Preview button that replaces the editor with a full preview of the post. Have some way to immediately switch back to editing.

Event Timeline

matt created this task.Apr 24 2018, 2:39 PM
matt updated the task description. (Show Details)
matt moved this task from Far Future to v1.0 on the WriteFreely board.
matt edited projects, added WriteFreely (v1.0); removed WriteFreely.
matt moved this task from v1.0 to Far Future on the WriteFreely board.Apr 6 2019, 12:01 AM
matt edited projects, added WriteFreely; removed WriteFreely (v1.0).
matt updated the task description. (Show Details)Oct 4 2019, 3:46 PM
matt removed matt as the assignee of this task.Oct 4 2019, 4:30 PM
matt changed the visibility from "Restricted Project (Project)" to "Public (No Login Required)".
matt changed the edit policy from "Restricted Project (Project)" to "All Users".
matt added a project: Usability.
matt assigned this task to robjloranger.Oct 10 2019, 4:27 PM

Idea 2:

Same as 1 except have a toggle for split view - full page, this way user's who like to watch as they type can have the 'live' preview.

On mobile the split should be horizontal, with the preview up top. It should also scroll with the editor content.

In the interim, this will be an extension

matt added a comment.Oct 10 2019, 4:58 PM

As mentioned in this forum post, we should start with a browser extension.

Goals

  • Independent tool outside the core platform that performs the preview function
  • Prototype for potential built-in feature
  • Allows us to promote the tool on its own, supporting our marketing efforts

Implementation

When user clicks the extension, it should grab the Markdown from the WF editor, send it to a new API endpoint that returns generated HTML from the submitted content, and then display that HTML somewhere (maybe in the extension's popup window; maybe in the web page itself -- I'm not sure).

For the future: Build the extension with this in mind: we'll eventually want this to work anywhere on the web. E.g. you could be writing a caption for your Snap.as photo and this extension would still work. You could write a Remark.as comment and it'll still work.

WriteFreely considerations for the future: (don't worry about this in the short term.) If the extension is running on a WriteFreely instance, we'll want to ping that instance's Markdown generation endpoint (in case they've made any modifications). Today, we should just use a single WF instance's endpoint (e.g. pencil.writefree.ly, once out of development).

progress so far

Noting here re: icons

Should be PNG format, sizes 16x16, 48x48 and 128x128

And stolen from @cjeller post:

When you toggle the icon to preview, the all-white icon might prove tricky for people to see, especially if only the blue period is visible. Perhaps we can experiment with different ways that the toggled extension icon can look.
My initial thought is that the blue period could be emphasized more and utilized. I am imagining having a white period (with blue outline) to signal that preview is off and then having the period become blue when preview is on.