diff --git a/internal/i18n/locales/en-US.yml b/internal/i18n/locales/en-US.yml index 0b03b09..a894a63 100644 --- a/internal/i18n/locales/en-US.yml +++ b/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 diff --git a/internal/render/markdown.go b/internal/render/markdown.go index 289cd17..8e821ac 100644 --- a/internal/render/markdown.go +++ b/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( diff --git a/internal/utils/validator.go b/internal/utils/validator.go index d9a72c7..23aeb5f 100644 --- a/internal/utils/validator.go +++ b/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{}{} } diff --git a/internal/web/gist.go b/internal/web/gist.go index 0d943cf..e53d064 100644 --- a/internal/web/gist.go +++ b/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) +} diff --git a/internal/web/server.go b/internal/web/server.go index 8b41640..4b5c05f 100644 --- a/internal/web/server.go +++ b/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) diff --git a/public/editor.ts b/public/editor.ts index 269f224..04d2814 100644 --- a/public/editor.ts +++ b/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(".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(".editor-indent-type")!.onchange = (e) => { let newTabType = (e.target as HTMLInputElement).value; setIndentType(editor, !["tab", "space"].includes(newTabType) ? "space" : newTabType); diff --git a/public/style.css b/public/style.css index 81fae94..85422f2 100644 --- a/public/style.css +++ b/public/style.css @@ -174,3 +174,7 @@ dl.dl-config dd { .mermaid { background: #f6f8fa !important; } + +.hidden-important { + @apply hidden !important; +} \ No newline at end of file diff --git a/templates/pages/create.html b/templates/pages/create.html index 50af4ea..92d3414 100644 --- a/templates/pages/create.html +++ b/templates/pages/create.html @@ -31,8 +31,9 @@

- +

+
diff --git a/templates/pages/edit.html b/templates/pages/edit.html index b1d5154..c80f769 100644 --- a/templates/pages/edit.html +++ b/templates/pages/edit.html @@ -61,13 +61,14 @@

- +

+ {{ end }}