`991453a`

Render markdown preview diffs

Authored by mfwolffe <wolffemf@dukes.jmu.edu> 3 days ago

SHA: 991453a447fdd731df9b37f4a4e29bacb4a88aea
Parents: 0d02b3b
Tree: 04ffbfc

5 changed files

Status	File	+	-
M	`internal/web/handlers/repo/editor.go`	200	14
A	`internal/web/handlers/repo/editor_diff_test.go`	79	0
M	`internal/web/static/css/shithub.css`	27	6
M	`internal/web/templates/repo/editor.html`	25	3
M	`internal/web/templates/repo/markdown_preview.html`	11	1

internal/web/handlers/repo/editor.gomodified

  package repo
  import (
 +	"context"
  	"errors"
  	"fmt"
  	"html/template"
  		h.d.Render.HTTPError(w, r, http.StatusRequestEntityTooLarge, "")
  		return
+ 	}
 +	ref := r.PostFormValue("ref")
 +	if ref == "" {
 +		ref = row.DefaultBranch
 +	}
 +	filePath := cleanEditorPath(r.PostFormValue("path"))
 +	if !validateSubpath(filePath) {
 +		filePath = ""
 +	}
 +	if r.PostFormValue("show_diff") == "1" {
 +		sourcePath := cleanEditorPath(r.PostFormValue("original_path"))
 +		if sourcePath == "" {
 +			sourcePath = filePath
 +		}
 +		blocks, err := h.markdownPreviewDiffBlocks(r.Context(), owner.Username, row.Name, ref, filePath, sourcePath, body)
 +		if err != nil {
 +			h.d.Logger.WarnContext(r.Context(), "code: markdown diff preview", "error", err)
 +		} else {
 +			w.Header().Set("Content-Type", "text/html; charset=utf-8")
 +			if err := h.d.Render.RenderFragment(w, "repo/markdown_preview", map[string]any{
 +				"DiffMode":   true,
 +				"DiffBlocks": blocks,
 +			}); err != nil {
 +				h.d.Logger.WarnContext(r.Context(), "code: markdown preview", "error", err)
 +			}
 +			return
 +		}
 +	}
  	rendered, err := mdrender.RenderDocumentHTML(body)
  	if err != nil {
  		h.d.Render.HTTPError(w, r, http.StatusInternalServerError, "")
  		return
+ 	}
 -	ref := r.PostFormValue("ref")
 -	if ref == "" {
 -		ref = row.DefaultBranch
 +	rendered = rewriteEditorMarkdownURLs(rendered, owner.Username, row.Name, ref, filePath)
 +	w.Header().Set("Content-Type", "text/html; charset=utf-8")
 +	if err := h.d.Render.RenderFragment(w, "repo/markdown_preview", map[string]any{
 +		"MarkdownHTML": template.HTML(rendered), //nolint:gosec // sanitized by markdown renderer
 +	}); err != nil {
 +		h.d.Logger.WarnContext(r.Context(), "code: markdown preview", "error", err)
+ 	}
 -	filePath := cleanEditorPath(r.PostFormValue("path"))
 +}
++
 +type markdownPreviewDiffBlock struct {
 +	Kind string
 +	HTML template.HTML
 +}
++
 +type markdownLineRun struct {
 +	Kind  string
 +	Lines []string
 +}
++
 +func (h *Handlers) markdownPreviewDiffBlocks(ctx context.Context, owner, repoName, ref, previewPath, sourcePath string, body []byte) ([]markdownPreviewDiffBlock, error) {
 +	var original []byte
 +	if validateSubpath(sourcePath) && sourcePath != "" {
 +		gitDir, err := h.d.RepoFS.RepoPath(owner, repoName)
 +		if err != nil {
 +			return nil, err
 +		}
 +		kind, _, size, err := repogit.StatPath(ctx, gitDir, ref, sourcePath)
 +		switch {
 +		case err == nil && kind == repogit.EntryBlob && size <= webedit.MaxTextBytes:
 +			original, err = repogit.ReadBlobBytes(ctx, gitDir, ref, sourcePath, webedit.MaxTextBytes)
 +			if err != nil {
 +				return nil, err
 +			}
 +		case err == nil:
 +			original = nil
 +		case errors.Is(err, repogit.ErrPathNotFound):
 +			original = nil
 +		default:
 +			return nil, err
 +		}
 +	}
 +	return renderMarkdownPreviewDiffBlocks(original, body, func(rendered string) string {
 +		return rewriteEditorMarkdownURLs(rendered, owner, repoName, ref, previewPath)
 +	})
 +}
++
 +func renderMarkdownPreviewDiffBlocks(original, current []byte, rewrite func(string) string) ([]markdownPreviewDiffBlock, error) {
 +	runs := markdownLineDiff(splitMarkdownLines(string(original)), splitMarkdownLines(string(current)))
 +	blocks := make([]markdownPreviewDiffBlock, 0, len(runs))
 +	for _, run := range runs {
 +		body := strings.Join(run.Lines, "")
 +		if strings.TrimSpace(body) == "" {
 +			continue
 +		}
 +		rendered, err := mdrender.RenderDocumentHTML([]byte(body))
 +		if err != nil {
 +			return nil, err
 +		}
 +		if rewrite != nil {
 +			rendered = rewrite(rendered)
 +		}
 +		blocks = append(blocks, markdownPreviewDiffBlock{
 +			Kind: run.Kind,
 +			HTML: template.HTML(rendered), //nolint:gosec // sanitized by markdown renderer
 +		})
 +	}
 +	return blocks, nil
 +}
++
 +func rewriteEditorMarkdownURLs(rendered, owner, repoName, ref, filePath string) string {
  	dir := parentPath(filePath)
  	if !validateSubpath(dir) {
  		dir = ""
+ 	}
 -	rendered = rewriteMarkdownRelativeURLs(
 +	return rewriteMarkdownRelativeURLs(
  		rendered,
 -		codeRouteBase(owner.Username, row.Name, "blob", ref, dir),
 -		codeRouteBase(owner.Username, row.Name, "blob", ref, ""),
 -		codeRouteBase(owner.Username, row.Name, "raw", ref, dir),
 -		codeRouteBase(owner.Username, row.Name, "raw", ref, ""),
 +		codeRouteBase(owner, repoName, "blob", ref, dir),
 +		codeRouteBase(owner, repoName, "blob", ref, ""),
 +		codeRouteBase(owner, repoName, "raw", ref, dir),
 +		codeRouteBase(owner, repoName, "raw", ref, ""),
+ 	)
 -	w.Header().Set("Content-Type", "text/html; charset=utf-8")
 -	if err := h.d.Render.RenderFragment(w, "repo/markdown_preview", map[string]any{
 -		"MarkdownHTML": template.HTML(rendered), //nolint:gosec // sanitized by markdown renderer
 -	}); err != nil {
 -		h.d.Logger.WarnContext(r.Context(), "code: markdown preview", "error", err)
+ }
++
 +func splitMarkdownLines(s string) []string {
 +	s = strings.ReplaceAll(s, "\r\n", "\n")
 +	s = strings.ReplaceAll(s, "\r", "\n")
 +	if s == "" {
 +		return nil
 +	}
 +	lines := strings.SplitAfter(s, "\n")
 +	if len(lines) > 0 && lines[len(lines)-1] == "" {
 +		lines = lines[:len(lines)-1]
 +	}
 +	return lines
 +}
++
 +const maxMarkdownPreviewDiffCells = 40000
++
 +func markdownLineDiff(original, current []string) []markdownLineRun {
 +	if len(original) == 0 && len(current) == 0 {
 +		return nil
 +	}
 +	if len(original) > 0 && len(current) > maxMarkdownPreviewDiffCells/len(original) {
 +		return boundedMarkdownLineDiff(original, current)
 +	}
 +	width := len(current) + 1
 +	table := make([]int, (len(original)+1)*width)
 +	for i := len(original) - 1; i >= 0; i-- {
 +		for j := len(current) - 1; j >= 0; j-- {
 +			if original[i] == current[j] {
 +				table[i*width+j] = table[(i+1)*width+j+1] + 1
 +				continue
 +			}
 +			deleted := table[(i+1)*width+j]
 +			added := table[i*width+j+1]
 +			if deleted >= added {
 +				table[i*width+j] = deleted
 +			} else {
 +				table[i*width+j] = added
 +			}
 +		}
 +	}
 +	var runs []markdownLineRun
 +	i, j := 0, 0
 +	for i < len(original) && j < len(current) {
 +		switch {
 +		case original[i] == current[j]:
 +			runs = appendMarkdownLineRun(runs, "context", current[j])
 +			i++
 +			j++
 +		case table[(i+1)*width+j] >= table[i*width+j+1]:
 +			runs = appendMarkdownLineRun(runs, "deleted", original[i])
 +			i++
 +		default:
 +			runs = appendMarkdownLineRun(runs, "added", current[j])
 +			j++
 +		}
 +	}
 +	for ; i < len(original); i++ {
 +		runs = appendMarkdownLineRun(runs, "deleted", original[i])
 +	}
 +	for ; j < len(current); j++ {
 +		runs = appendMarkdownLineRun(runs, "added", current[j])
 +	}
 +	return runs
 +}
++
 +func boundedMarkdownLineDiff(original, current []string) []markdownLineRun {
 +	prefix := 0
 +	for prefix < len(original) && prefix < len(current) && original[prefix] == current[prefix] {
 +		prefix++
 +	}
 +	origEnd := len(original)
 +	currEnd := len(current)
 +	for origEnd > prefix && currEnd > prefix && original[origEnd-1] == current[currEnd-1] {
 +		origEnd--
 +		currEnd--
 +	}
 +	var runs []markdownLineRun
 +	for _, line := range current[:prefix] {
 +		runs = appendMarkdownLineRun(runs, "context", line)
 +	}
 +	for _, line := range original[prefix:origEnd] {
 +		runs = appendMarkdownLineRun(runs, "deleted", line)
 +	}
 +	for _, line := range current[prefix:currEnd] {
 +		runs = appendMarkdownLineRun(runs, "added", line)
 +	}
 +	for _, line := range current[currEnd:] {
 +		runs = appendMarkdownLineRun(runs, "context", line)
 +	}
 +	return runs
 +}
++
 +func appendMarkdownLineRun(runs []markdownLineRun, kind, line string) []markdownLineRun {
 +	if len(runs) > 0 && runs[len(runs)-1].Kind == kind {
 +		runs[len(runs)-1].Lines = append(runs[len(runs)-1].Lines, line)
 +		return runs
 +	}
 +	return append(runs, markdownLineRun{Kind: kind, Lines: []string{line}})
+ }
  func (h *Handlers) editorData(r *http.Request, cc *codeContext, mode, pathValue, content string) codeEditorData {

internal/web/handlers/repo/editor_diff_test.goadded

 +// SPDX-License-Identifier: AGPL-3.0-or-later
++
 +package repo
++
 +import (
 +	"strings"
 +	"testing"
 +)
++
 +func TestMarkdownLineDiffSplitsAddedDeletedAndContextRuns(t *testing.T) {
 +	t.Parallel()
++
 +	runs := markdownLineDiff(
 +		splitMarkdownLines("alpha\nold\nomega\n"),
 +		splitMarkdownLines("alpha\nnew\nomega\nextra\n"),
 +	)
++
 +	kinds := make([]string, 0, len(runs))
 +	for _, run := range runs {
 +		kinds = append(kinds, run.Kind)
 +	}
 +	got := strings.Join(kinds, ",")
 +	want := "context,deleted,added,context,added"
 +	if got != want {
 +		t.Fatalf("run kinds = %q, want %q", got, want)
 +	}
 +}
++
 +func TestRenderMarkdownPreviewDiffBlocksRendersChangedMarkdown(t *testing.T) {
 +	t.Parallel()
++
 +	blocks, err := renderMarkdownPreviewDiffBlocks(
 +		[]byte("# Demo\n\nold line\n\nkept line\n"),
 +		[]byte("# Demo\n\nnew line\n\nkept line\n"),
 +		func(rendered string) string { return rendered },
 +	)
 +	if err != nil {
 +		t.Fatalf("renderMarkdownPreviewDiffBlocks: %v", err)
 +	}
++
 +	var added, deleted bool
 +	var joined strings.Builder
 +	for _, block := range blocks {
 +		if block.Kind == "added" {
 +			added = true
 +		}
 +		if block.Kind == "deleted" {
 +			deleted = true
 +		}
 +		joined.WriteString(string(block.HTML))
 +	}
 +	if !added || !deleted {
 +		t.Fatalf("expected added and deleted blocks, got %#v", blocks)
 +	}
 +	html := joined.String()
 +	for _, want := range []string{"new line", "old line", "<h1"} {
 +		if !strings.Contains(html, want) {
 +			t.Fatalf("rendered diff HTML missing %q: %s", want, html)
 +		}
 +	}
 +}
++
 +func TestRenderMarkdownPreviewDiffBlocksSanitizesHTML(t *testing.T) {
 +	t.Parallel()
++
 +	blocks, err := renderMarkdownPreviewDiffBlocks(
 +		nil,
 +		[]byte("<script>alert(1)</script>\n\nok\n"),
 +		func(rendered string) string { return rendered },
 +	)
 +	if err != nil {
 +		t.Fatalf("renderMarkdownPreviewDiffBlocks: %v", err)
 +	}
 +	for _, block := range blocks {
 +		if strings.Contains(string(block.HTML), "<script") {
 +			t.Fatalf("rendered diff block was not sanitized: %s", block.HTML)
 +		}
 +	}
 +}

internal/web/static/css/shithub.cssmodified

  .shithub-editor-textbox textarea:focus {
    box-shadow: inset 0 0 0 2px var(--accent-emphasis);
+ }
 -.shithub-editor-helpbar,
 -.shithub-editor-attach {
 +.shithub-editor-helpbar {
    min-height: 36px;
    padding: 0.45rem 0.75rem;
    border-top: 1px solid var(--border-default);
 +  border-radius: 0 0 6px 6px;
    color: var(--fg-muted);
    background: var(--canvas-subtle);
    font-size: 0.875rem;
    background: var(--canvas-default);
    font: 0.8rem ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+ }
 -.shithub-editor-attach {
 -  border-radius: 0 0 6px 6px;
 -  font-weight: 600;
 -}
  .shithub-editor-preview {
    min-height: min(72vh, 900px);
    padding: 3rem 2.75rem;
    max-width: none;
    color: var(--fg-default);
+ }
 +.shithub-editor-preview-body.is-diff {
 +  display: flex;
 +  flex-direction: column;
 +  gap: 0.35rem;
 +}
 +.shithub-editor-preview-diff-block {
 +  margin: 0;
 +}
 +.shithub-editor-preview-diff-block.is-added,
 +.shithub-editor-preview-diff-block.is-deleted {
 +  padding-left: 0.95rem;
 +  border-left: 4px solid;
 +}
 +.shithub-editor-preview-diff-block.is-added {
 +  border-left-color: var(--success-emphasis);
 +}
 +.shithub-editor-preview-diff-block.is-deleted {
 +  border-left-color: var(--danger-fg);
 +}
 +.shithub-editor-preview-diff-block > :first-child {
 +  margin-top: 0;
 +}
 +.shithub-editor-preview-diff-block > :last-child {
 +  margin-bottom: 0;
 +}
  .shithub-editor-preview-empty {
    margin: 0;
    color: var(--fg-muted);

internal/web/templates/repo/editor.htmlmodified

            <div class="shithub-editor-helpbar">
              Use <kbd>Control + Shift + m</kbd> to toggle the <kbd>tab</kbd> key moving focus. Alternatively, use <kbd>esc</kbd> then <kbd>tab</kbd> to move to the next interactive element on the page.
            </div>
 -          <div class="shithub-editor-attach">Attach files by dragging & dropping, selecting or pasting them.</div>
          </div>
          <div class="shithub-editor-pane shithub-editor-preview" data-editor-pane="preview" hidden>
            <div class="markdown-body shithub-editor-preview-body" data-editor-preview data-preview-url="{{ .PreviewURL }}" data-preview-ref="{{ .Ref }}">
    let indentSize = 2;
    let softWrap = true;
    let previewDirty = true;
 +  let tabMovesFocus = false;
 +  let nextTabMovesFocus = false;
    let submitting = false;
    function updateGutter() {
      body.set("content", textarea.value);
      body.set("ref", preview.dataset.previewRef || "");
      body.set("path", pathInput ? pathInput.value : "");
 +    if (pathInput) body.set("original_path", pathInput.dataset.original || pathInput.value || "");
 +    if (showDiff && showDiff.checked) body.set("show_diff", "1");
      preview.innerHTML = "<p class=\"shithub-editor-preview-empty\">Rendering preview...</p>";
      const res = await fetch(preview.dataset.previewUrl, {
        method: "POST",
      updateCommitState();
      textarea.addEventListener("input", function () {
        updateGutter();
 +      nextTabMovesFocus = false;
        previewDirty = true;
        updateCommitState();
      });
        if (gutter) gutter.scrollTop = textarea.scrollTop;
      });
      textarea.addEventListener("keydown", function (event) {
 -      if (event.key !== "Tab") return;
 +      if ((event.key === "m" || event.key === "M") && event.ctrlKey && event.shiftKey && !event.altKey && !event.metaKey) {
 +        event.preventDefault();
 +        tabMovesFocus = !tabMovesFocus;
 +        nextTabMovesFocus = false;
 +        return;
 +      }
 +      if (event.key === "Escape") {
 +        nextTabMovesFocus = true;
 +        return;
 +      }
 +      if (event.key !== "Tab") {
 +        nextTabMovesFocus = false;
 +        return;
 +      }
 +      if (tabMovesFocus || nextTabMovesFocus) {
 +        nextTabMovesFocus = false;
 +        return;
 +      }
        event.preventDefault();
        const start = textarea.selectionStart;
        const end = textarea.selectionEnd;
    if (showDiff) {
      showDiff.addEventListener("change", function () {
 -      if (preview) preview.classList.toggle("is-showing-diff", showDiff.checked);
 +      previewDirty = true;
 +      if (root.classList.contains("is-previewing")) renderPreview();
      });
+   }

internal/web/templates/repo/markdown_preview.htmlmodified

  {{ define "page" -}}
 -<div class="markdown-body shithub-editor-preview-body">{{ .MarkdownHTML }}</div>
 +<div class="markdown-body shithub-editor-preview-body{{ if .DiffMode }} is-diff{{ end }}">
 +  {{ if .DiffMode }}
 +    {{ range .DiffBlocks }}
 +      <div class="shithub-editor-preview-diff-block is-{{ .Kind }}">{{ .HTML }}</div>
 +    {{ else }}
 +      <p class="shithub-editor-preview-empty">No preview changes.</p>
 +    {{ end }}
 +  {{ else }}
 +    {{ .MarkdownHTML }}
 +  {{ end }}
 +</div>
  {{- end }}