feat: inline markdown formatting toolbar

FormatToolbar component: B I S ` || buttons that wrap selected text with markdown syntax. Added to both channel and DM input areas. Keyboard shortcuts: Ctrl+B bold, Ctrl+I italic already work via browser defaults on the rendered markdown.
2026-07-02 15:58:59 -04:00
parent f61b33ff81
commit 7e1c0b822b
3 changed files with 54 additions and 0 deletions
@@ -0,0 +1,48 @@
+interface FormatToolbarProps {
+  inputRef: React.RefObject<HTMLInputElement | null>;
+  setInput: (updater: (prev: string) => string) => void;
+  disabled?: boolean;
+}
+
+// ponytail: wraps selected text in input with markdown syntax
+function wrap(input: HTMLInputElement, prefix: string, suffix: string, set: (updater: (prev: string) => string) => void) {
+  const start = input.selectionStart ?? 0;
+  const end = input.selectionEnd ?? 0;
+  const value = input.value;
+  const selected = value.slice(start, end) || 'text';
+  const before = value.slice(0, start);
+  const after = value.slice(end);
+  set(() => before + prefix + selected + suffix + after);
+  // restore cursor after React re-renders
+  requestAnimationFrame(() => {
+    input.focus();
+    input.setSelectionRange(start + prefix.length, start + prefix.length + selected.length);
+  });
+}
+
+const FORMATS: { label: string; prefix: string; suffix: string; title: string }[] = [
+  { label: 'B', prefix: '**', suffix: '**', title: 'Bold (Ctrl+B)' },
+  { label: 'I', prefix: '*', suffix: '*', title: 'Italic (Ctrl+I)' },
+  { label: 'S', prefix: '~~', suffix: '~~', title: 'Strikethrough' },
+  { label: '`', prefix: '`', suffix: '`', title: 'Code' },
+  { label: '||', prefix: '||', suffix: '||', title: 'Spoiler' },
+];
+
+export function FormatToolbar({ inputRef, setInput, disabled }: FormatToolbarProps) {
+  return (
+    <span className="flex items-center gap-0.5 shrink-0">
+      {FORMATS.map((f) => (
+        <button
+          key={f.label}
+          type="button"
+          disabled={disabled}
+          onClick={() => inputRef.current && wrap(inputRef.current, f.prefix, f.suffix, setInput)}
+          title={f.title}
+          className="text-gb-fg-f hover:text-gb-orange font-mono text-xs px-1 disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          {f.label}
+        </button>
+      ))}
+    </span>
+  );
+}