Markdown preview (#224)

internal/i18n/locales/en-US.yml

@@ -43,6 +43,7 @@ gist.new.add-file: Add file
 gist.new.create-public-button: Create public gist
 gist.new.create-unlisted-button: Create unlisted gist
 gist.new.create-private-button: Create private gist
+gist.new.preview: Preview
 
 gist.edit.editing: Editing
 gist.edit.change-visibility: Make

internal/render/markdown.go

@@ -41,6 +41,12 @@ func MarkdownFile(file *git.File) (RenderedFile, error) {
  Type: "Markdown",
  }, err
 }
+func MarkdownString(content string) (string, error) {
+ var buf bytes.Buffer
+ err := newMarkdown().Convert([]byte(content), &buf)
+
+ return buf.String(), err
+}
 
 func newMarkdown() goldmark.Markdown {
  return goldmark.New(

internal/utils/validator.go

@@ -56,7 +56,7 @@ func validateReservedKeywords(fl validator.FieldLevel) bool {
  name := fl.Field().String()
 
  restrictedNames := map[string]struct{}{}
- for _, restrictedName := range []string{"assets", "register", "login", "logout", "settings", "admin-panel", "all", "search", "init", "healthcheck"} {
+ for _, restrictedName := range []string{"assets", "register", "login", "logout", "settings", "admin-panel", "all", "search", "init", "healthcheck", "preview"} {
  restrictedNames[restrictedName] = struct{}{}
  }
 

internal/web/gist.go

@@ -890,3 +890,14 @@ func checkbox(ctx echo.Context) error {
 
  return plainText(ctx, 200, "ok")
 }
+
+func preview(ctx echo.Context) error {
+ content := ctx.FormValue("content")
+
+ previewStr, err := render.MarkdownString(content)
+ if err != nil {
+ return errorRes(500, "Error rendering markdown", err)
+ }
+
+ return plainText(ctx, 200, previewStr)
+}

internal/web/server.go

@@ -235,6 +235,7 @@ func NewServer(isDev bool) *Server {
 
  g1.GET("/", create, logged)
  g1.POST("/", processCreate, logged)
+ g1.GET("/preview", preview, logged)
 
  g1.GET("/healthcheck", healthcheck)
 

public/editor.ts

@@ -34,6 +34,45 @@ document.addEventListener("DOMContentLoaded", () => {
  ],
  });
 
+ let mdpreview = dom.querySelector(".md-preview") as HTMLElement;
+
+ // event if the filename ends with .md; trigger event
+ dom.querySelector<HTMLInputElement>(".form-filename")!.onkeyup = (e) => {
+ let filename = (e.target as HTMLInputElement).value;
+ if (filename.endsWith(".md")) {
+ mdpreview!.classList.remove("hidden");
+ } else {
+ mdpreview!.classList.add("hidden");
+ }
+ };
+
+ // @ts-ignore
+ const baseUrl = window.opengist_base_url || '';
+ let previewShown = false;
+ mdpreview.onclick = () => {
+ previewShown = !previewShown;
+ let divpreview = dom.querySelector("div.preview") as HTMLElement;
+ let cmeditor = dom.querySelector(".cm-editor") as HTMLElement;
+
+ if (!previewShown) {
+ divpreview!.classList.add("hidden");
+ cmeditor!.classList.remove("hidden-important");
+ return;
+ } else {
+ fetch(`${baseUrl}/preview?` + new URLSearchParams({
+ content: editor.state.doc.toString()
+ }), {
+ method: 'GET',
+ credentials: 'same-origin',
+ }).then(r => r.text()).then(r => {
+ let divpreview = dom.querySelector("div.preview") as HTMLElement;
+ divpreview!.innerHTML = r;
+ divpreview!.classList.remove("hidden");
+ cmeditor!.classList.add("hidden-important");
+ })
+ }
+ }
+
  dom.querySelector<HTMLInputElement>(".editor-indent-type")!.onchange = (e) => {
  let newTabType = (e.target as HTMLInputElement).value;
  setIndentType(editor, !["tab", "space"].includes(newTabType) ? "space" : newTabType);

public/style.css

@@ -174,3 +174,7 @@ dl.dl-config dd {
 .mermaid {
  background: #f6f8fa !important;
 }
+
+.hidden-important {
+ @apply hidden !important;
+}

templates/pages/create.html

@@ -31,8 +31,9 @@ <h1 class="text-2xl font-bold leading-tight text-slate-700 dark:text-slate-300">
  <div class="rounded-md border border-1 border-gray-200 dark:border-gray-700 editor">
  <div class="border-b-1 border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 my-auto flex">
  <p class="mx-2 my-2 inline-flex">
- <input type="text" name="name" placeholder="{{ .locale.Tr "gist.new.filename-with-extension" }}" style="line-height: 0.05em" class="form-filename bg-white dark:bg-gray-900 shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-200 dark:border-gray-700 rounded-md">
+ <input type="text" name="name" placeholder="{{ .locale.Tr "gist.new.filename-with-extension" }}" style="line-height: 0.05em" class="form-filename bg-white dark:bg-gray-900 shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-200 dark:border-gray-700 rounded-md gist-title">
  </p>
+ <button type="button" class="md-preview hidden whitespace-nowrap text-slate-700 dark:text-slate-300 rounded border border-gray-200 dark:border-gray-600 bg-white dark:bg-gray-900 my-2 px-2 text-xs font-medium shadow-sm hover:bg-gray-200 dark:hover:bg-gray-700 hover:border-gray-500 hover:text-slate-700 dark:hover:text-slate-300 focus:outline-none focus:ring-1 focus:border-primary-500 focus:ring-primary-500">{{ .locale.Tr "gist.new.preview" }}</button>
  <div class="hidden mx-2 my-2 sm:inline-flex ml-auto space-x-2">
  <select class="editor-indent-type whitespace-nowrap text-slate-700 dark:text-slate-300 rounded border border-gray-200 dark:border-gray-600 bg-white dark:bg-gray-900 pr-8 text-xs font-medium shadow-sm hover:bg-gray-200 dark:hover:bg-gray-700 hover:border-gray-500 hover:text-slate-700 dark:hover:text-slate-300 focus:outline-none focus:ring-1 focus:border-primary-500 focus:ring-primary-500">
  <optgroup label="{{ .locale.Tr "gist.new.indent-mode" }}">
@@ -56,6 +57,7 @@ <h1 class="text-2xl font-bold leading-tight text-slate-700 dark:text-slate-300">
  </div>
  </div>
  <input type="hidden" value="" name="content" class="form-filecontent" autocomplete="off">
+ <div class="hidden preview chroma markdown markdown-body p-8"></div>
  </div>
  </div>
 

templates/pages/edit.html

@@ -61,13 +61,14 @@ <h1 class="text-2xl font-bold leading-tight text-slate-700 dark:text-slate-300">
  <div class="rounded-md border border-1 border-gray-200 dark:border-gray-700 editor">
  <div class="border-b-1 border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 my-auto flex">
  <p class="mx-2 my-2 inline-flex">
- <input type="text" value="{{ $file.Filename }}" name="name" placeholder="Filename with extension" style="line-height: 0.05em; z-index: 99999" class="form-filename bg-white dark:bg-gray-900 shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-200 dark:border-gray-700 rounded-l-md">
+ <input type="text" value="{{ $file.Filename }}" name="name" placeholder="Filename with extension" style="line-height: 0.05em; z-index: 99999" class="form-filename bg-white dark:bg-gray-900 shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-200 dark:border-gray-700 rounded-l-md gist-title">
  <button style="line-height: 0.05em" class="delete-file -ml-px relative inline-flex items-center space-x-2 px-4 py-2 border border-gray-200 dark:border-gray-700 text-sm font-medium rounded-r-md text-slate-700 dark:text-slate-300 bg-gray-50 dark:bg-gray-800 hover:bg-white dark:hover:bg-gray-900 focus:outline-none" type="button">
  <svg xmlns="http:https://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
  <path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
  </svg>
  </button>
  </p>
+ <button type="button" class="md-preview hidden whitespace-nowrap text-slate-700 dark:text-slate-300 rounded border border-gray-200 dark:border-gray-600 bg-white dark:bg-gray-900 my-2 px-2 text-xs font-medium shadow-sm hover:bg-gray-200 dark:hover:bg-gray-700 hover:border-gray-500 hover:text-slate-700 dark:hover:text-slate-300 focus:outline-none focus:ring-1 focus:border-primary-500 focus:ring-primary-500">{{ $.locale.Tr "gist.new.preview" }}</button>
  <div class="hidden mx-2 my-2 sm:inline-flex ml-auto space-x-2">
  <select class="editor-indent-type whitespace-nowrap text-slate-700 dark:text-slate-300 rounded border border-gray-200 dark:border-gray-600 bg-white dark:bg-gray-900 pr-8 text-xs font-medium shadow-sm hover:bg-gray-200 dark:hover:bg-gray-700 hover:border-gray-500 hover:text-slate-700 dark:hover:text-slate-300 focus:outline-none focus:ring-1 focus:border-primary-500 focus:ring-primary-500">
  <optgroup label="{{ $.locale.Tr "gist.new.indent-mode" }}">
@@ -91,6 +92,7 @@ <h1 class="text-2xl font-bold leading-tight text-slate-700 dark:text-slate-300">
  </div>
  </div>
  <input type="hidden" value="{{ $file.Content }}" name="content" class="form-filecontent" autocomplete="off">
+ <div class="hidden preview chroma markdown markdown-body p-8"></div>
  </div>
  {{ end }}
  </div>