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 @@
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
+
Admin
@@ -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" .}}