hobokenchicken
7e1c0b822b
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.
49 lines
1.8 KiB
TypeScript
49 lines
1.8 KiB
TypeScript
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>
|
|
);
|
|
}
|