Add line wrap toggle for editor and paste viewer (#130)
CI / test (pull_request) Successful in 27s
CI / docker (pull_request) Skipped

Shared client-side preference in localStorage 'palette-wrap', default
off. Toggle button on /new editor head and paste title bar, plus a Line
wrap checkbox in the settings menu; all read/write the same preference.
Active state uses the accent treatment like other toggles. No em dashes
in UI text.
This commit is contained in:
fen
2026-09-09 22:35:49 -05:00
parent 19cb8d1d45
commit 7cc6a9c706
5 changed files with 40 additions and 0 deletions
+31
View File
@@ -46,6 +46,37 @@
// do not persist anything here: URL theme is a one-off override
document.documentElement.dataset.preset = dark ? PAIRS[t].dark : PAIRS[t].light;
})();
// #130: shared line wrap preference (localStorage 'palette-wrap', default off)
(function () {
function wrapOn() {
try { return localStorage.getItem('palette-wrap') === '1'; } catch (e) { return false; }
}
function wrapApply(on) {
if (on) document.documentElement.setAttribute('data-wrap', '1');
else document.documentElement.removeAttribute('data-wrap');
document.querySelectorAll('.wrap-toggle').forEach(function (b) {
b.setAttribute('aria-pressed', on ? 'true' : 'false');
});
var s = document.getElementById('wrap-setting');
if (s) s.checked = on;
}
window.paletteWrapToggle = function () {
var on = !wrapOn();
try { localStorage.setItem('palette-wrap', on ? '1' : '0'); } catch (e) {}
wrapApply(on);
return on;
};
document.addEventListener('DOMContentLoaded', function () {
wrapApply(wrapOn());
document.querySelectorAll('.wrap-toggle').forEach(function (b) {
b.addEventListener('click', function () { window.paletteWrapToggle(); });
});
var s = document.getElementById('wrap-setting');
if (s) s.addEventListener('change', function () {
if (s.checked !== wrapOn()) window.paletteWrapToggle();
});
});
})();
</script>
{{end}}
+1
View File
@@ -16,6 +16,7 @@
<option>markdown</option><option>text</option>
</select>
<button class="btn btn-icon" id="reguess" title="Re-detect language" type="button"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 12a9 9 0 1 1-2.64-6.36"/><polyline points="21 3 21 9 15 9"/></svg></button>
<button type="button" class="btn btn-icon wrap-toggle" id="wrap-toggle" title="Toggle line wrap" aria-pressed="false">wrap</button>
</div>
</div>
<div class="float editor-wrap">
+1
View File
@@ -6,6 +6,7 @@
<h1>{{if .Title}}{{.Title}}{{else}}Untitled paste{{end}}</h1>
{{if .CustomSlug}}<span class="slug">/{{.CustomSlug}}</span>{{end}}
<div class="spacer"></div>
<button type="button" class="iconbtn wrap-toggle" title="Toggle line wrap" aria-pressed="false">wrap</button>
<a class="iconbtn" href="/raw/{{.ID}}">raw</a>
<a class="iconbtn" href="#" id="copy-btn" onclick="copyContent(this); return false;">copy</a>
{{if .DeletionToken}}<a class="iconbtn danger" href="#" onclick="redeem('{{.DeletionToken}}'); return false;">delete</a>{{end}}
+2
View File
@@ -13,6 +13,8 @@
<svg class="icon-moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
<span>Dark mode</span>
</button>
<h3 style="margin-top:18px">Editor</h3>
<label class="toggle" for="wrap-setting" style="display:inline-flex"><input type="checkbox" id="wrap-setting"> Line wrap</label>
<p class="admin-link-row"><a class="admin-link" href="/admin">Admin</a></p>
</div>
</div>