Match paste with main view

Author: matze

CHANGELOG.md

@@ -6,6 +6,7 @@
 
 - Broken Markdown navigation on QR views.
 - Illegal double `<span>`s.
+- Match paste view padding and line spacing to the main view's.
 
 ### Added
 

crates/wastebin_highlight/src/highlight.rs

@@ -203,7 +203,8 @@ impl Highlighter {
 
         let is_markdown = syntax_ref.name == "Markdown";
         let mut parse_state = ParseState::new(syntax_ref);
-        let mut html = String::from(r#"<table class="src"><tbody>"#);
+        let mut html = String::from(r#"<div id="line-numbers" aria-hidden="true">"#);
+        let mut code = String::from(r#"<div class="src-code"><code>"#);
         let mut scope_stack = ScopeStack::new();
 
         for (mut line_number, line) in LinesWithEndings::from(&text).enumerate() {
@@ -227,36 +228,39 @@ impl Highlighter {
             line_number += 1;
             let _ = write!(
                 html,
-                r#"<tr><td id="L{line_number}"><a href=#L{line_number}>{line_number}</a></td><td>"#
+                r##"<div id="L{line_number}"><a href="#L{line_number}">{line_number}</a></div>"##
             );
 
+            let _ = write!(code, r#"<div id="LC{line_number}">"#);
+
             // The line may close spans opened on earlier lines before opening any of its own.
             // Track the minimum running span balance so we can prepend bare `<span>`s to keep
             // the line's HTML self-contained — using only `delta` would let `</span>` precede
             // its match within the line, producing misnested output.
             let prepend = open_span_prefix(&formatted);
-            html.push_str(&"<span>".repeat(prepend));
+            code.push_str(&"<span>".repeat(prepend));
 
-            // Strip stray newlines that cause vertically stretched lines.
-            html.reserve(formatted.len());
+            code.reserve(formatted.len());
 
             for segment in formatted.split('\n') {
-                html.push_str(segment);
+                code.push_str(segment);
             }
 
             let extra_close =
                 isize::try_from(prepend).expect("prepend count fits into isize") + delta;
 
             if extra_close > 0 {
-                html.push_str(
+                code.push_str(
                     &"</span>".repeat(extra_close.try_into().expect("isize fits into usize")),
                 );
             }
 
-            html.push_str("</td></tr>");
+            code.push_str("</div>");
         }
 
-        html.push_str("</tbody></table>");
+        html.push_str("</div>");
+        code.push_str("</code></div>");
+        html.push_str(&code);
 
         Ok(Html(html))
     }
@@ -370,7 +374,7 @@ mod tests {
             .highlight(text.into(), Some("md".into()))?
             .into_inner();
 
-        for row in html.split("</tr>").filter(|s| s.contains("<td")) {
+        for row in html.split("</div>").filter(|s| s.contains("id=\"LC")) {
             assert!(
                 min_span_balance(row) >= 0,
                 "row has unmatched </span>: {row}"

crates/wastebin_server/src/javascript/paste.js

@@ -6,8 +6,8 @@ document.addEventListener('keydown', onKey);
 $("copy-button").addEventListener("click", copy);
 
 function highlightLines(scroll) {
-  document.querySelectorAll('tr.line-highlight').forEach(tr => {
-    tr.classList.remove('line-highlight');
+  document.querySelectorAll('.line-highlight').forEach(el => {
+    el.classList.remove('line-highlight');
   });
 
   const match = window.location.hash.match(/^#L(\d+)(?:-L(\d+))?$/);
@@ -19,22 +19,22 @@ function highlightLines(scroll) {
   const to = Math.max(a, b);
 
   for (let i = from; i <= to; i++) {
-    const td = document.getElementById('L' + i);
-    if (td && td.parentElement) {
-      td.parentElement.classList.add('line-highlight');
-    }
+    const lnDiv = document.getElementById('L' + i);
+    if (lnDiv) lnDiv.classList.add('line-highlight');
+    const lcDiv = document.getElementById('LC' + i);
+    if (lcDiv) lcDiv.classList.add('line-highlight');
   }
 
   if (scroll && match[2]) {
-    const firstTd = document.getElementById('L' + from);
-    if (firstTd) firstTd.scrollIntoView({ block: 'center' });
+    const firstLn = document.getElementById('L' + from);
+    if (firstLn) firstLn.scrollIntoView({ block: 'center' });
   }
 }
 
 window.addEventListener('hashchange', () => highlightLines(true));
 highlightLines(true);
 
-document.querySelectorAll('.src td:first-child > a').forEach(a => {
+document.querySelectorAll('#line-numbers a').forEach(a => {
   a.addEventListener('click', (e) => {
     if (!e.shiftKey) return;
     const m = a.getAttribute('href').match(/^#L(\d+)$/);
@@ -64,11 +64,9 @@ function showToast(text, timeout) {
 }
 
 function copy() {
-  const lines = document.querySelectorAll('.src td + td');
-  const content = Array.from(lines)
-    .map(line => line.textContent)
-    .join('')
-    .trim();
+  const code = document.querySelector('.src-code code');
+  if (!code) return;
+  const content = code.textContent.trim();
 
   navigator.clipboard.writeText(content)
     .then(() => {

crates/wastebin_server/src/no-js.css

@@ -1,4 +1,4 @@
-#line-numbers { display: none; }
+.editor #line-numbers { display: none; }
 .password-group { display: block; }
 .password-toggle { display: none; }
 .stats { display: none; }

crates/wastebin_server/src/style.css

@@ -188,21 +188,28 @@ header {
   overflow: hidden;
 }
 
-.editor {
+.editor, .source-view {
   display: flex;
-  flex: 1;
-  min-height: 0;
   font-family: var(--font-mono);
   font-size: var(--fs-md);
   line-height: 1.54;
   background: var(--main-bg-color, var(--page-bg));
   color: var(--main-fg-color, var(--fg));
 }
 
+.editor {
+  flex: 1;
+  min-height: 0;
+}
+
+.source-view {
+  min-height: 100%;
+}
+
 #line-numbers {
   display: block;
   flex: 0 0 auto;
-  padding: 14px 12px 14px 16px;
+  padding: 14px 0;
   text-align: right;
   background: var(--gutter-bg);
   color: var(--gutter-fg);
@@ -216,6 +223,7 @@ header {
 #line-numbers div {
   height: 1.54em;
   line-height: 1.54em;
+  padding: 0 12px 0 16px;
 }
 
 .editor textarea {
@@ -647,52 +655,65 @@ table {
   min-width: max-content;
 }
 
-.src td:first-child {
-  user-select: none;
-  padding: 0 12px 0 18px;
-  text-align: right;
-  color: var(--gutter-fg);
-  background: var(--gutter-bg);
-  border-right: 1px solid var(--border-soft);
-  font-variant-numeric: tabular-nums;
-  font-family: var(--font-mono);
-  font-size: var(--fs-md);
-  line-height: 1.69;
-  width: 1px;
-  white-space: nowrap;
+/* source view (paste) — matches editor layout */
+
+.source-view > #line-numbers {
+  flex: 0 0 auto;
 }
 
-.src td:first-child > a, .src td:first-child > a:visited {
-  color: var(--gutter-fg);
+.source-view > .src-code {
+  flex: 1;
+  margin: 0;
+  padding: 14px 0;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  white-space: pre;
+  tab-size: 2;
 }
 
-.src td:first-child > a:hover, .src td:first-child > a:focus {
-  color: var(--accent);
+.source-view > .src-code code {
+  display: block;
 }
 
-.src td + td {
-  padding: 0 18px 0 14px;
-  white-space: pre;
-  font-family: var(--font-mono);
-  font-size: var(--fs-md);
-  line-height: 1.69;
-  user-select: text;
+.source-view .src-code [id^="LC"] {
+  padding: 0 16px;
 }
 
-.line-wrap .src td + td {
-  white-space: pre-wrap;
-  word-wrap: break-word;
+/* line number links in paste view */
+
+.source-view #line-numbers a,
+.source-view #line-numbers a:visited {
+  color: var(--gutter-fg);
+  text-decoration: none;
+}
+
+.source-view #line-numbers a:hover,
+.source-view #line-numbers a:focus {
+  color: var(--accent);
 }
 
-.src tr.line-highlight > td:first-child {
+/* line highlighting */
+
+.source-view #line-numbers .line-highlight {
   background: var(--accent-bg-gutter);
   font-weight: bold;
 }
 
-.src tr.line-highlight > td + td {
+.source-view .src-code .line-highlight {
   background: var(--accent-bg);
 }
 
+/* line wrapping */
+
+.line-wrap .source-view > .src-code {
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+
 .markup.underline.link > a, .markup.underline.link > a:visited {
   color: inherit;
 }

crates/wastebin_server/templates/formatted.html

@@ -9,7 +9,9 @@
 {% endblock %}
 
 {% block content %}
-  {{ html|safe }}
+  <div class="source-view">
+    {{ html|safe }}
+  </div>
   {% if !is_available %}
   <script defer src="{{ page.assets.burn_js.route()}}"></script>
   {% endif %}