WIP on Markdown edit/preview

This commit is contained in:
Daniel J. Summers 2023-01-14 11:03:58 -05:00
parent 13f688496a
commit f813824648
4 changed files with 106 additions and 6 deletions

View File

@ -218,6 +218,20 @@ open JobsJobsJobs.Data
open JobsJobsJobs.ViewModels
/// Handlers for /api routes
[<RequireQualifiedAccess>]
module Api =
open System.IO
// POST: /api/markdown-preview
let markdownPreview : HttpHandler = requireUser >=> fun next ctx -> task {
use reader = new StreamReader (ctx.Request.Body)
let! preview = reader.ReadToEndAsync ()
return! htmlString (MarkdownString.toHtml (Text (defaultArg (Option.ofObj preview) "--"))) next ctx
}
/// Handlers for /citizen routes
[<RequireQualifiedAccess>]
module Citizen =
@ -768,6 +782,7 @@ let allEndpoints = [
POST [ route "s" Listing.add ]
PUT [ routef "/%O" Listing.update ]
]
POST [ route "/markdown-preview" Api.markdownPreview ]
subRoute "/profile" [
GET_HEAD [
route "" ProfileApi.current

View File

@ -33,14 +33,19 @@ let continentList attrs name (continents : Continent list) emptyLabel selectedVa
let markdownEditor attrs name value editorLabel =
div [ _class "col-12" ] [
nav [ _class "nav nav-pills pb-1" ] [
button [ _type "button"; _class "jjj-md-source"; _onclick "jjj.showMarkdown('TODO')" ] [
button [ _type "button"; _id $"{name}EditButton"; _class "btn btn-primary btn-sm rounded-pill" ] [
rawText "Markdown"
]; rawText " &nbsp; "
button [ _type "button"; _class "jjj-md-preview"; _onclick "jjj.showPreview('TODO')" ] [ rawText "Preview" ]
]
rawText " &nbsp; "
button [ _type "button"; _id $"{name}PreviewButton"; _class "btn btn-outline-secondary btn-sm rounded-pill"
_onclick $"jjj.showPreview('{name}')" ] [
rawText "Preview"
]
]
section [ _id $"{name}Preview"; _class "jjj-preview"; _ariaLabel "Rendered Markdown preview" ] []
div [ _class "form-floating" ] [
textarea (List.append attrs [ _id name; _name name; _class "form-control md-edit"; _rows "10" ]) [
section [ _id $"{name}Preview"; _class "jjj-not-shown"; _ariaLabel "Rendered Markdown preview" ] []
div [ _id $"{name}Edit"; _class "form-floating jjj-shown" ] [
textarea (List.append attrs
[ _id name; _name name; _class "form-control jjj-markdown-editor"; _rows "10" ]) [
rawText value
]
label [ _for name ] [ rawText editorLabel ]

View File

@ -53,6 +53,73 @@ this.jjj = {
} catch (_) { }
},
/**
* Show a preview of the Markdown in the given editor
* @param {string} editorId The ID of the Markdown editor whose preview should be shown
*/
async showPreview(editorId) {
/** @type {HTMLButtonElement} */
const editBtn = document.getElementById(`${editorId}EditButton`)
/** @type {HTMLDivElement} */
const editDiv = document.getElementById(`${editorId}Edit`)
/** @type {HTMLButtonElement} */
const previewBtn = document.getElementById(`${editorId}PreviewButton`)
/** @type {HTMLDivElement} */
const previewDiv = document.getElementById(`${editorId}Preview`)
editBtn.classList.remove("btn-primary")
editBtn.classList.add("btn-outline-secondary")
editBtn.addAttribute("onclick", `jjj.showEditor('{editorId}')`)
previewBtn.classList.remove("btn-outline-secondary")
previewBtn.classList.add("btn-primary")
previewBtn.removeAttribute("onclick")
editDiv.classList.remove("jjj-shown")
editDiv.classList.add("jjj-not-shown")
previewDiv.innerHTML = "<p><strong><em>Loading preview...</em></strong></p>"
previewtDiv.classList.remove("jjj-not-shown")
previewDiv.classList.add("jjj-shown")
const preview = await fetch("/api/markdown-preview",
{ method: "POST", body: document.getElementById(editorId).textContent })
let text
if (preview.ok) {
text = await preview.text()
} else {
text = `<p class="text-danger"><strong> ERROR ${preview.status}</strong> &ndash; ${preview.statusText}`
}
previewDiv.innerHTML = text
},
/**
* Show the Markdown editor (hides preview)
* @param {string} editorId The ID of the Markdown editor to show
*/
showEditor(editorId) {
/** @type {HTMLButtonElement} */
const editBtn = document.getElementById(`${editorId}EditButton`)
/** @type {HTMLDivElement} */
const editDiv = document.getElementById(`${editorId}Edit`)
/** @type {HTMLButtonElement} */
const previewBtn = document.getElementById(`${editorId}PreviewButton`)
/** @type {HTMLDivElement} */
const previewDiv = document.getElementById(`${editorId}Preview`)
previewtBtn.classList.remove("btn-primary")
previewBtn.classList.add("btn-outline-secondary")
previewtBtn.addAttribute("onclick", `jjj.showPreview('{editorId}')`)
editBtn.classList.remove("btn-outline-secondary")
editBtn.classList.add("btn-primary")
editBtn.removeAttribute("onclick")
previewDiv.classList.remove("jjj-shown")
previewDiv.classList.add("jjj-not-shown")
previewDiv.innerHTML = ""
editDiv.classList.remove("jjj-not-shown")
editDiv.classList.add("jjj-shown")
},
/**
* Script for profile pages
*/

View File

@ -199,6 +199,19 @@ span.jjj-audio-clip {
span.jjj-audio-clip:hover {
cursor: pointer;
}
/* Markdown Editor styling */
.jjj-not-shown {
display: none;
}
.jjj-shown {
display: inherit;
}
.jjj-markdown-editor {
width: 100%;
/* When wrapping this with Bootstrap's floating label, it shrinks the input down to what a normal one-line input
would be; this overrides that for this textarea specifically */
height: inherit !important;
}
/* Footer styling */
footer {
display: flex;