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 ? (
-
- ) : (
-
- )
- ) : (
+ {isEditing ? <>
+ {mentions &&