diff --git a/apps/rowboat/app/globals.css b/apps/rowboat/app/globals.css index 4940ed61..15a69aae 100644 --- a/apps/rowboat/app/globals.css +++ b/apps/rowboat/app/globals.css @@ -76,3 +76,36 @@ html, body { @apply bg-background text-foreground; } } + +/* Add these styles alongside your other global styles */ +.ql-mention-list-container { + border: 1px solid #e2e8f0; + border-radius: 0.375rem; + box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + background-color: white; + z-index: 1000; +} + +.ql-mention-list { + padding: 0.5rem 0; +} + +/* Styles for mentions in the editor */ +.ql-editor .mention { + background-color: #e0f2fe; /* light blue bg */ + color: #1e40af; /* darker blue text */ + padding: 0.125rem 0.375rem; + border-radius: 0.25rem; + white-space: nowrap; + display: inline-block; +} + +/* Style for the @ symbol */ +.ql-editor .mention .ql-mention-denotation-char { + color: #1e40af; /* blue color for @ symbol */ + font-weight: normal; +} + +.ql-editor .mention .invalid { + color: red; +} \ No newline at end of file diff --git a/apps/rowboat/app/lib/components/editable-field.tsx b/apps/rowboat/app/lib/components/editable-field.tsx index 099c280e..66ec34d5 100644 --- a/apps/rowboat/app/lib/components/editable-field.tsx +++ b/apps/rowboat/app/lib/components/editable-field.tsx @@ -4,6 +4,9 @@ import { useClickAway } from "../../../hooks/use-click-away"; import MarkdownContent from "./markdown-content"; import clsx from "clsx"; import { Label } from "./label"; +import dynamic from "next/dynamic"; +import { Match } from "./mentions_editor"; +const MentionsEditor = dynamic(() => import('./mentions_editor'), { ssr: false }); interface EditableFieldProps { value: string; @@ -16,6 +19,8 @@ interface EditableFieldProps { className?: string; validate?: (value: string) => { valid: boolean; errorMessage?: string }; light?: boolean; + mentions?: boolean; + mentionsAtValues?: Match[]; } export function EditableField({ @@ -29,6 +34,8 @@ export function EditableField({ className = "flex flex-col gap-1", validate, light = false, + mentions = false, + mentionsAtValues = [], }: EditableFieldProps) { const [isEditing, setIsEditing] = useState(false); const [localValue, setLocalValue] = useState(value); @@ -115,38 +122,40 @@ export function EditableField({ } } - {isEditing ? ( - multiline ? ( -