amadan

eleven / messenger Public

composer: settings copy — 'Convert common Markdown formatting as you type' (#935)

Paul's wording, on all three platforms, with the hint teaching the
syntax in literal markers (Text(verbatim:) native / textContent web):
'e.g. **bold**, *italic* (or _italic_) and ~strikethrough~'. Also
retires the stale 'messages render the same either way' claim — untrue
since opt-out started escaping (#934).
Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
Paul Campbell 55b297bc5b08b921e63b0ee5c0dbc8e52aac5769 parent 0f7a7fc
4 files changed, +20 −6
  • ios/LChat/Views/ServerSettingsSheet.swift +3 −2
  • ios/LChatMac/MacSettingsView.swift +3 −2
  • web/static/shell.js +13 −2
  • web/static/style.css +1 −0
diff --git a/ios/LChat/Views/ServerSettingsSheet.swift b/ios/LChat/Views/ServerSettingsSheet.swift
index 03eff3c..6e1859b 100644
--- a/ios/LChat/Views/ServerSettingsSheet.swift
+++ b/ios/LChat/Views/ServerSettingsSheet.swift
@@ -83,11 +83,12 @@ struct ServerSettingsSheet: View {
.labelsHidden()
}
Section {
- Toggle("Format as you type", isOn: $formatAsYouType)
+ Toggle("Convert common Markdown formatting as you type", isOn: $formatAsYouType)
} header: {
Text("Composer")
} footer: {
- Text("**bold** becomes bold as you close the stars — same for *italics*, `code` and ~strikethrough~. Off, the markers stay visible while you type; messages render the same either way.")
+ // verbatim: the hint TEACHES the syntax — the markers must show.
+ Text(verbatim: "e.g. **bold**, *italic* (or _italic_) and ~strikethrough~")
}
Section {
Text("Notifications are managed in Settings ▸ Notifications ▸ Eleven.")
diff --git a/ios/LChatMac/MacSettingsView.swift b/ios/LChatMac/MacSettingsView.swift
index f59e841..b6efc87 100644
--- a/ios/LChatMac/MacSettingsView.swift
+++ b/ios/LChatMac/MacSettingsView.swift
@@ -65,11 +65,12 @@ struct MacSettingsView: View {
Text("Text size")
}
Section {
- Toggle("Format as you type", isOn: $formatAsYouType)
+ Toggle("Convert common Markdown formatting as you type", isOn: $formatAsYouType)
} header: {
Text("Composer")
} footer: {
- Text("**bold** becomes bold as you close the stars — same for *italics*, `code` and ~strikethrough~. Off, the markers stay visible while you type; messages render the same either way.")
+ // verbatim: the hint TEACHES the syntax — the markers must show.
+ Text(verbatim: "e.g. **bold**, *italic* (or _italic_) and ~strikethrough~")
}
CLIToolSection()
Section("Profile") {
diff --git a/web/static/shell.js b/web/static/shell.js
index 353b23e..27193fe 100644
--- a/web/static/shell.js
+++ b/web/static/shell.js
@@ -475,7 +475,7 @@ function showThemePicker() {
composerLabel.textContent = "Composer";
composerLabel.style.marginTop = "14px";
card.appendChild(composerLabel);
- const toggleRow = (labelText, checked, onchange) => {
+ const toggleRow = (labelText, checked, onchange, hintText) => {
const row = document.createElement("label");
row.className = "composer-pref-row";
const box = document.createElement("input");
@@ -486,9 +486,20 @@ function showThemePicker() {
txt.textContent = labelText;
row.append(box, txt);
card.appendChild(row);
+ if (hintText) {
+ const hint = document.createElement("div");
+ hint.className = "composer-pref-hint";
+ hint.textContent = hintText; // literal markers on purpose — the hint teaches the syntax
+ card.appendChild(hint);
+ }
return row;
};
- toggleRow("Format as you type (**bold** becomes bold)", formatAsYouTypePref(), (on) => setFormatAsYouType(on));
+ toggleRow(
+ "Convert common Markdown formatting as you type",
+ formatAsYouTypePref(),
+ (on) => setFormatAsYouType(on),
+ "e.g. **bold**, *italic* (or _italic_) and ~strikethrough~",
+ );
toggleRow("Classic plain-text composer", classicComposerPref(), (on) => {
setClassicComposer(on);
// Remount the open thread's pane so the switch is immediate. Parked panes
diff --git a/web/static/style.css b/web/static/style.css
index f101894..cc1558f 100644
--- a/web/static/style.css
+++ b/web/static/style.css
@@ -1659,6 +1659,7 @@ input:focus, textarea:focus { outline: 2px solid var(--accent); border-color: tr
cursor: pointer;
}
.composer-pref-row input[type="checkbox"] { accent-color: var(--accent); width: 18px; height: 18px; margin: 0; }
+.composer-pref-hint { margin: -4px 0 8px 28px; font-size: 12px; color: var(--muted); }
.composer .composer-input.pm-empty::before {
content: attr(data-placeholder);
color: var(--muted);