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 Backlog to v1.0 on the WriteFreely board.
matt edited projects, added WriteFreely (v1.0); removed WriteFreely.
matt moved this task from v1.0 to Backlog 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.

matt added a comment.Dec 14 2019, 1:01 PM

This is looking really good so far! Have been using it myself lately and it's been great.

@cjeller is currently working on a launch plan for this -- hopefully we can get it out in the next month or two. Some things I'd like to address before then:

  • If user presses the back button while the preview is active, it should exit out of the preview. (I believe this can be done with the popstate event.)
  • If possible, the previewer should re-open to the last position user was scrolled to in the preview. Maybe the previewer can always open to roughly the same scroll position that the user is in in the editor?
  • Post preview should reflect the chosen font in the editor, defaulting to serif if the font can't be detected (like on Snap.as -- see next item).
  • This extension should work with the caption editor in Snap.as.
robjloranger added a comment.EditedDec 17 2019, 10:54 PM

sub task status:

  • font is honored in the preview now
  • back button should close preview instead of navigate back
  • preview should maintain scroll position as in editor (probably easiest of the options)
  • support snap.as caption editing
matt added a comment.Dec 20 2019, 5:31 PM

To add to this list:

Many people are skeptical of extensions that require access to all domains. Instead we should only explicitly allow access on write.as and snap.as, and then prompt the user for permission to access the page on other WF instances.

matt moved this task from Backlog to Next Release on the WriteFreely board.Jan 3 2020, 7:15 PM
matt moved this task from Next Release to Backlog on the WriteFreely board.Apr 23 2020, 12:38 PM