diff --git a/internal/web/static/app.css b/internal/web/static/app.css index 5a9a411..643a81b 100644 --- a/internal/web/static/app.css +++ b/internal/web/static/app.css @@ -691,3 +691,8 @@ button[type="submit"]:focus-visible, .attachment-chip:hover { border-color: var(--accent); } .attachment-chip .attachment-size { color: var(--muted-fg); font-size: 19px; } .attachment-preview img { max-width: 480px; max-height: 360px; border-radius: var(--radius); border: 1px solid var(--border); } + +/* line wrap toggle (#130): body wrap variants + toggle button */ +.editor.wrap, .codebody.wrap { white-space: pre-wrap; word-break: break-word; } +.wrap-toggle[aria-pressed="true"] { background: var(--accent); color: var(--bg); border-color: var(--accent); } +.editor-tools { display: flex; justify-content: flex-end; } diff --git a/internal/web/templates/new.html b/internal/web/templates/new.html index 7e334be..1a64944 100644 --- a/internal/web/templates/new.html +++ b/internal/web/templates/new.html @@ -22,6 +22,9 @@
1
+
+ +
Ctrl+Enter to create @@ -291,5 +294,25 @@ window.addEventListener('pageshow', e => { document.addEventListener('keydown', e => { if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') { e.preventDefault(); create(); } }); + +// #130: line wrap toggle, shared preference with the viewer (palette-wrap) +(function () { + var el = document.getElementById('content'); + var btn = document.getElementById('wrap-toggle'); + function apply(on) { + el.classList.toggle('wrap', on); + btn.setAttribute('aria-pressed', on ? 'true' : 'false'); + } + var on = false; + try { on = localStorage.getItem('palette-wrap') === 'true'; } catch (e) {} + apply(on); + btn.addEventListener('click', function () { + on = !on; + try { localStorage.setItem('palette-wrap', on ? 'true' : 'false'); } catch (e) {} + apply(on); + }); + // follow changes made in settings on other tabs/pages + document.addEventListener('palette-wrapchange', function (e) { apply(e.detail); }); +})(); {{template "foot" .}} diff --git a/internal/web/templates/paste.html b/internal/web/templates/paste.html index cfca561..3bbdeb7 100644 --- a/internal/web/templates/paste.html +++ b/internal/web/templates/paste.html @@ -6,6 +6,7 @@

{{if .Title}}{{.Title}}{{else}}Untitled paste{{end}}

{{if .CustomSlug}}/{{.CustomSlug}}{{end}}
+ raw copy {{if .DeletionToken}}delete{{end}} @@ -80,5 +81,24 @@ function redeem(token) { fetch('/api/pastes/{{.ID}}/redeem?token=' + encodeURIComponent(token), {method: 'DELETE'}) .then(r => { if (r.ok) location.href = '/history'; else alert('delete failed'); }); } + +// #130: line wrap toggle, shared preference with the editor (palette-wrap) +(function () { + var el = document.getElementById('codebody'); + var btn = document.getElementById('wrap-toggle'); + function apply(on) { + el.classList.toggle('wrap', on); + btn.setAttribute('aria-pressed', on ? 'true' : 'false'); + } + var on = false; + try { on = localStorage.getItem('palette-wrap') === 'true'; } catch (e) {} + apply(on); + btn.addEventListener('click', function () { + on = !on; + try { localStorage.setItem('palette-wrap', on ? 'true' : 'false'); } catch (e) {} + apply(on); + }); + document.addEventListener('palette-wrapchange', function (e) { apply(e.detail); }); +})(); {{template "foot" .}} diff --git a/internal/web/templates/settings.html b/internal/web/templates/settings.html index f3c195d..567bcdd 100644 --- a/internal/web/templates/settings.html +++ b/internal/web/templates/settings.html @@ -13,6 +13,8 @@ Dark mode +

Line wrap

+
@@ -95,6 +97,15 @@ if (btns.length) btns[0].click(); else document.dispatchEvent(new CustomEvent('palette-darkchange')); }); document.addEventListener('palette-darkchange', sync); + // #130: line wrap setting shares the palette-wrap preference with the + // editor and paste view toggles. + var wt = document.getElementById('settings-wrap-toggle'); + try { wt.checked = localStorage.getItem('palette-wrap') === 'true'; } catch (e) {} + wt.addEventListener('change', function () { + var on = wt.checked; + try { localStorage.setItem('palette-wrap', on ? 'true' : 'false'); } catch (e) {} + document.dispatchEvent(new CustomEvent('palette-wrapchange', { detail: on })); + }); })(); {{template "foot" .}}