-
- {hovered ? `${hovered.row} × ${hovered.col} table` : 'Hover to select size'}
-
-
- {Array.from({ length: TABLE_ROWS }, (_, r) => (
-
- {Array.from({ length: TABLE_COLS }, (_, c) => {
- const active = hovered && r < hovered.row && c < hovered.col;
- return (
-
setHovered({ row: r + 1, col: c + 1 })}
- onClick={() => {
- onSelect(r + 1, c + 1);
- onClose();
- }}
- />
- );
- })}
-
- ))}
-
-
- );
-}
-
-// ─── Generate markdown table ──────────────────────────────────────────────────
-function generateTable(rows: number, cols: number): string {
- const header = '| ' + Array.from({ length: cols }, (_, i) => `Col ${i + 1}`).join(' | ') + ' |';
- const divider = '| ' + Array.from({ length: cols }, () => '-------').join(' | ') + ' |';
- const row = '| ' + Array.from({ length: cols }, () => 'Cell').join(' | ') + ' |';
- const dataRows = Array.from({ length: rows - 1 }, () => row).join('\n');
- return [header, divider, dataRows].filter(Boolean).join('\n');
-}
-
-// ─── Toolbar snippets ─────────────────────────────────────────────────────────
-const SNIPPETS = {
- bold: { wrap: ['**', '**'], placeholder: 'bold text' },
- italic: { wrap: ['*', '*'], placeholder: 'italic text' },
- code: { wrap: ['`', '`'], placeholder: 'code' },
- quote: { wrap: ['> ', ''], placeholder: 'quote' },
- codeblock: { block: '```typescript\n\n```', cursor: 14 },
- math: { block: '$$\n\n$$', cursor: 3 },
- mermaid: { block: '```mermaid\nflowchart LR\n A --> B\n```', cursor: 10 },
- link: { block: '[link text](url)', cursor: 1 },
-} as const;
-
-type SnippetKey = keyof typeof SNIPPETS;
+type MentionRef = { userId: string; name: string };
// ─── Types ────────────────────────────────────────────────────────────────────
interface HuddleComposerProps {
onPost: (content: ComposerContent) => void;
userInitials?: string;
userColor?: 'indigo' | 'teal' | 'coral' | 'amber' | 'pink' | 'green';
+ /**
+ * Editing mode: initial markdown (e.g. today's post) loaded into the
+ * editor. RichEditor is uncontrolled — the host must remount the composer
+ * (key={editingPostId ?? 'new'}) when this changes.
+ */
+ initialText?: string;
+ /** Label for the submit button (e.g. "Update post"). Defaults to "Post". */
+ submitLabel?: string;
+ /** Placeholder for the collapsed bar. */
+ collapsedLabel?: string;
+ /**
+ * Edit mode: start expanded with no collapsed bar / click-outside collapse.
+ * Submit and Cancel defer to the host (via onPost / onCancel) instead of
+ * resetting the composer in place.
+ */
+ editing?: boolean;
+ /** Called when the user cancels in edit mode. */
+ onCancel?: () => void;
+ /** Attachments preloaded into the composer (edit mode). */
+ initialAttachments?: MediaItem[];
+ /** Ticket preselected in the composer (edit mode). */
+ initialTicketId?: string;
+ /** Mentions preloaded into the composer (edit mode). */
+ initialMentions?: MentionRef[];
+ /**
+ * When set, enables live collaborative editing (Yjs) for this room — every
+ * peer editing the same post co-edits one shared document. Only meaningful
+ * for an existing post (room = post id); leave unset for new posts.
+ */
+ collabRoom?: string;
}
// ─── HuddleComposer ───────────────────────────────────────────────────────────
@@ -100,17 +66,40 @@ export function HuddleComposer({
onPost,
userInitials = 'PD',
userColor = 'indigo',
+ initialText = '',
+ submitLabel = 'Post',
+ collapsedLabel = 'Share an update...',
+ editing = false,
+ onCancel,
+ initialAttachments,
+ initialTicketId,
+ initialMentions,
+ collabRoom,
}: HuddleComposerProps) {
- const [expanded, setExpanded] = useState(false);
- const [tab, setTab] = useState<'write' | 'preview'>('write');
- const [text, setText] = useState('');
- const [selectedTicketId, setSelectedTicketId] = useState
();
- const [attachments, setAttachments] = useState([]);
+ const [expanded, setExpanded] = useState(editing);
+ const [text, setText] = useState(initialText);
+ const [selectedTicketId, setSelectedTicketId] = useState(initialTicketId);
+ const [attachments, setAttachments] = useState(initialAttachments ?? []);
const [ticketVideos, setTicketVideos] = useState([]);
- const [mentions, setMentions] = useState>([]);
- const [showTablePicker, setShowTablePicker] = useState(false);
- const textareaRef = useRef(null);
+ const [mentions, setMentions] = useState(initialMentions ?? []);
const { selectedTeamId } = useTeam();
+ const composerRef = useRef(null);
+
+ // Click-outside → collapse (only when empty, so in-progress writing is never
+ // lost). Frees up feed space when you're not actively composing. Disabled in
+ // edit mode — the host owns dismissal there.
+ useEffect(() => {
+ if (!expanded || editing) return;
+ const onDocMouseDown = (e: MouseEvent) => {
+ if (composerRef.current?.contains(e.target as Node)) return;
+ // Kerebron popovers (toolbar dropdowns) can portal outside the composer.
+ if ((e.target as HTMLElement).closest?.('.kb-custom-menu__wrapper, [role="menu"]')) return;
+ const hasContent = text.trim() || attachments.length > 0;
+ if (!hasContent) handleCancel();
+ };
+ document.addEventListener('mousedown', onDocMouseDown);
+ return () => document.removeEventListener('mousedown', onDocMouseDown);
+ }, [expanded, text, attachments.length]);
// Fetch videos attached to the selected ticket
useEffect(() => {
@@ -152,46 +141,6 @@ export function HuddleComposer({
};
}, [selectedTicketId]);
- const insertSnippet = (key: SnippetKey) => {
- const snippet = SNIPPETS[key];
- const el = textareaRef.current;
- if (!el) return;
- const start = el.selectionStart;
- const end = el.selectionEnd;
- const selected = text.slice(start, end);
- let newText = text;
- let newCursor = start;
- if ('wrap' in snippet) {
- const inner = selected || snippet.placeholder;
- newText = text.slice(0, start) + snippet.wrap[0] + inner + snippet.wrap[1] + text.slice(end);
- newCursor = start + snippet.wrap[0].length + inner.length + snippet.wrap[1].length;
- } else {
- const prefix = start > 0 && text[start - 1] !== '\n' ? '\n' : '';
- newText = text.slice(0, start) + prefix + snippet.block + '\n' + text.slice(end);
- newCursor = start + prefix.length + snippet.cursor;
- }
- setText(newText);
- requestAnimationFrame(() => {
- el.focus();
- el.setSelectionRange(newCursor, newCursor);
- });
- };
-
- const insertTable = (rows: number, cols: number) => {
- const el = textareaRef.current;
- if (!el) return;
- const start = el.selectionStart;
- const prefix = start > 0 && text[start - 1] !== '\n' ? '\n' : '';
- const table = generateTable(rows, cols);
- const newText = text.slice(0, start) + prefix + table + '\n' + text.slice(start);
- setText(newText);
- const newCursor = start + prefix.length + table.indexOf('\n') + 2;
- requestAnimationFrame(() => {
- el.focus();
- el.setSelectionRange(newCursor, newCursor);
- });
- };
-
const handleSubmit = () => {
try {
if (!text.trim() && attachments.length === 0 && ticketVideos.length === 0) return;
@@ -199,16 +148,28 @@ export function HuddleComposer({
// Combine user attachments with ticket videos
const allAttachments = [...attachments, ...ticketVideos];
+ // RichEditor has no insert-at-cursor API, so append any selected mentions
+ // that aren't already written in the body as trailing @name tokens —
+ // otherwise they'd be tracked but never visible in the post.
+ const base = text.trim();
+ const mentionSuffix = mentions
+ .filter((m) => !base.includes(`@${m.name}`))
+ .map((m) => `@${m.name}`)
+ .join(' ');
+ const finalText = [base, mentionSuffix].filter(Boolean).join(' ') || '(Image post)';
+
onPost({
- text: text.trim() || '(Image post)',
- json: { text: text.trim() || '(Image post)' },
+ text: finalText,
+ json: { text: finalText },
ticketId: selectedTicketId,
attachments: allAttachments,
mentions,
});
- setText('');
+ // In edit mode the host closes the composer once the update resolves; keep
+ // the fields intact so nothing flickers before it unmounts.
+ if (editing) return;
+ setText(initialText);
setExpanded(false);
- setTab('write');
setSelectedTicketId(undefined);
setAttachments([]);
setTicketVideos([]);
@@ -220,9 +181,12 @@ export function HuddleComposer({
};
const handleCancel = () => {
- setText('');
+ if (editing) {
+ onCancel?.();
+ return;
+ }
+ setText(initialText);
setExpanded(false);
- setTab('write');
setSelectedTicketId(undefined);
setAttachments([]);
setTicketVideos([]);
@@ -233,21 +197,15 @@ export function HuddleComposer({
const handleAttachmentRemove = (mediaId: string) =>
setAttachments((prev) => prev.filter((m) => m.id !== mediaId));
+ // RichEditor has no insert-at-cursor API, so mentions are tracked as chips
+ // below the editor instead of injected inline.
const handleMentionSelect = (userId: string, name: string) => {
- setMentions((prev) => [...prev, { userId, name }]);
- const el = textareaRef.current;
- if (el) {
- const pos = el.selectionStart;
- const newText = text.slice(0, pos) + `@${name} ` + text.slice(pos);
- setText(newText);
- requestAnimationFrame(() => {
- el.focus();
- el.setSelectionRange(pos + name.length + 2, pos + name.length + 2);
- });
- } else {
- setText((prev) => prev + `@${name} `);
- }
+ setMentions((prev) =>
+ prev.some((m) => m.userId === userId) ? prev : [...prev, { userId, name }],
+ );
};
+ const handleMentionRemove = (userId: string) =>
+ setMentions((prev) => prev.filter((m) => m.userId !== userId));
const avatarColorClasses = {
indigo: 'bg-indigo-100 text-indigo-600',
@@ -258,10 +216,6 @@ export function HuddleComposer({
green: 'bg-green-100 text-green-600',
};
- const btnBase =
- 'h-7 px-1.5 flex items-center justify-center rounded text-xs text-gray-600 dark:text-neutral-400 hover:bg-gray-200 dark:hover:bg-neutral-700 hover:text-gray-900 dark:hover:text-neutral-100 transition-colors';
- const divider = ;
-
// ─── Collapsed ──────────────────────────────────────────────────────────────
if (!expanded) {
return (
@@ -275,36 +229,18 @@ export function HuddleComposer({
{userInitials}