Add note mention in tiptap editor (#813)

yujonglee · web-flow · commit d3e3eeaeddf9 · 2025-05-16T17:00:52.000-07:00
diff --git a/apps/app/package.json b/apps/app/package.json
@@ -11,7 +11,7 @@
     "start": "vite"
   },
   "devDependencies": {
-    "@clerk/types": "^4.58.0",
+    "@clerk/types": "^4.59.0",
     "@hypr/client": "workspace:^",
     "@tailwindcss/typography": "^0.5.16",
     "@tanstack/router-plugin": "^1.120.3",
@@ -26,7 +26,7 @@
     "vite": "^6.3.5"
   },
   "dependencies": {
-    "@clerk/clerk-react": "^5.31.2",
+    "@clerk/clerk-react": "^5.31.4",
     "@hypr/tiptap": "workspace:^",
     "@hypr/ui": "workspace:^",
     "@hypr/utils": "workspace:^",
diff --git a/apps/desktop/package.json b/apps/desktop/package.json
@@ -92,7 +92,7 @@
     "@mux/mux-player": "^3.4.0",
     "@tanstack/router-plugin": "^1.120.3",
     "@tauri-apps/cli": "^2.5.0",
-    "@types/node": "^22.15.17",
+    "@types/node": "^22.15.18",
     "@types/react": "^18.3.21",
     "@types/react-dom": "^18.3.7",
     "@types/react-grid-layout": "^1.3.5",
diff --git a/apps/desktop/src/components/editor-area/index.tsx b/apps/desktop/src/components/editor-area/index.tsx
@@ -29,6 +29,7 @@ export default function EditorArea({
   sessionId: string;
 }) {
   const showRaw = useSession(sessionId, (s) => s.showRaw);
+  const { userId } = useHypr();
 
   const [rawContent, setRawContent] = useSession(sessionId, (s) => [
     s.session?.raw_memo_html ?? "",
@@ -90,6 +91,16 @@ export default function EditorArea({
     }
   }, []);
 
+  const handleMentionSearch = async (query: string) => {
+    const session = await dbCommands.listSessions({ type: "search", query, user_id: userId, limit: 5 });
+
+    return session.map((s) => ({
+      id: s.id,
+      type: "note",
+      label: s.title,
+    }));
+  };
+
   return (
     <div className="relative flex h-full flex-col w-full">
       <NoteHeader
@@ -120,6 +131,10 @@ export default function EditorArea({
               initialContent={noteContent}
               editable={enhance.status !== "pending"}
               setContentFromOutside={!showRaw && enhance.status === "pending"}
+              mentionConfig={{
+                trigger: "@",
+                handleSearch: handleMentionSearch,
+              }}
             />
           )
           : <Renderer ref={editorRef} initialContent={noteContent} />}
diff --git a/apps/desktop/src/routes/__root.tsx b/apps/desktop/src/routes/__root.tsx
@@ -19,6 +19,12 @@ export const Route = createRootRouteWithContext<Required<Context>>()({
 
 const POSITION = "bottom-right";
 
+declare global {
+  interface Window {
+    __HYPR_NAVIGATE__?: (to: string) => void;
+  }
+}
+
 function Component() {
   const navigate = useNavigate();
 
@@ -32,6 +38,16 @@ function Component() {
     refetchInterval: 1000,
   });
 
+  useEffect(() => {
+    window.__HYPR_NAVIGATE__ = (to: string) => {
+      navigate({ to });
+    };
+
+    return () => {
+      window.__HYPR_NAVIGATE__ = undefined;
+    };
+  }, [navigate]);
+
   useEffect(() => {
     let unlisten: (() => void) | undefined;
 
diff --git a/apps/docs/data/i18n.json b/apps/docs/data/i18n.json
@@ -1,12 +1,12 @@
 [
   {
     "language": "ko",
-    "total": 267,
-    "missing": 267
+    "total": 246,
+    "missing": 246
   },
   {
     "language": "en (source)",
-    "total": 267,
+    "total": 246,
     "missing": 0
   }
 ]
diff --git a/apps/docs/package.json b/apps/docs/package.json
@@ -8,22 +8,22 @@
   },
   "devDependencies": {
     "@iconify-json/heroicons": "^1.2.2",
-    "@unocss/preset-icons": "^66.1.1",
-    "@unocss/preset-wind3": "^66.1.1",
+    "@unocss/preset-icons": "^66.1.2",
+    "@unocss/preset-wind3": "^66.1.2",
     "isomorphic-git": "^1.30.1",
     "octokit": "^4.1.3",
     "typedoc": "^0.27.9",
-    "unocss": "^66.1.1",
+    "unocss": "^66.1.2",
     "vite-plugin-posthog": "^2.1.0",
     "vitepress": "2.0.0-alpha.5",
-    "vue": "^3.5.13",
+    "vue": "^3.5.14",
     "zod": "^3.24.4"
   },
   "dependencies": {
     "@tanstack/vue-table": "^8.21.3",
     "clsx": "^2.1.1",
     "floating-vue": "^5.2.2",
-    "posthog-js": "^1.242.0",
+    "posthog-js": "^1.242.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   }
diff --git a/packages/client/package.json b/packages/client/package.json
@@ -15,7 +15,7 @@
     "@hey-api/openapi-ts": "^0.64.15"
   },
   "dependencies": {
-    "@hey-api/client-fetch": "^0.10.0",
+    "@hey-api/client-fetch": "^0.10.1",
     "@tanstack/react-query": "^5.76.1"
   }
 }
diff --git a/packages/tiptap/package.json b/packages/tiptap/package.json
@@ -14,6 +14,7 @@
     "react-dom": "^18.3.1"
   },
   "dependencies": {
+    "@floating-ui/dom": "^1.7.0",
     "@hypr/ui": "workspace:^",
     "@remixicon/react": "^4.6.0",
     "@sereneinserenade/tiptap-search-and-replace": "^0.1.1",
@@ -24,6 +25,7 @@
     "@tiptap/extension-image": "^2.12.0",
     "@tiptap/extension-link": "^2.12.0",
     "@tiptap/extension-list-keymap": "^2.12.0",
+    "@tiptap/extension-mention": "^2.12.0",
     "@tiptap/extension-placeholder": "^2.12.0",
     "@tiptap/extension-strike": "^2.12.0",
     "@tiptap/extension-task-item": "^2.12.0",
@@ -34,14 +36,15 @@
     "@tiptap/pm": "^2.12.0",
     "@tiptap/react": "^2.12.0",
     "@tiptap/starter-kit": "^2.12.0",
+    "@tiptap/suggestion": "^2.12.0",
     "clsx": "^2.1.1",
     "prosemirror-commands": "^1.7.1",
     "prosemirror-state": "^1.4.3",
     "tippy.js": "^6.3.7",
     "turndown": "^7.2.0"
   },
   "devDependencies": {
-    "@types/node": "^22.15.17",
+    "@types/node": "^22.15.18",
     "@types/react": "^18.3.21",
     "@types/react-dom": "^18.3.7",
     "@types/turndown": "^5.0.5"
diff --git a/packages/tiptap/src/editor/index.tsx b/packages/tiptap/src/editor/index.tsx
@@ -1,9 +1,11 @@
 import "../styles/tiptap.css";
+import "../styles/mention.css";
 
 import { type Editor as TiptapEditor, EditorContent, type HTMLContent, useEditor } from "@tiptap/react";
 import { forwardRef, useEffect, useRef } from "react";
 
 import * as shared from "../shared";
+import { mention, type MentionConfig } from "./mention";
 
 export type { TiptapEditor };
 
@@ -12,10 +14,11 @@ interface EditorProps {
   initialContent: HTMLContent;
   editable?: boolean;
   setContentFromOutside?: boolean;
+  mentionConfig: MentionConfig;
 }
 
 const Editor = forwardRef<{ editor: TiptapEditor | null }, EditorProps>(
-  ({ handleChange, initialContent, editable = true, setContentFromOutside = false }, ref) => {
+  ({ handleChange, initialContent, editable = true, setContentFromOutside = false, mentionConfig }, ref) => {
     const previousContentRef = useRef<HTMLContent>(initialContent);
 
     const onUpdate = ({ editor }: { editor: TiptapEditor }) => {
@@ -27,7 +30,10 @@ const Editor = forwardRef<{ editor: TiptapEditor | null }, EditorProps>(
     };
 
     const editor = useEditor({
-      extensions: shared.extensions,
+      extensions: [
+        ...shared.extensions,
+        mention(mentionConfig),
+      ],
       editable,
       content: initialContent || "<p></p>",
       onCreate: ({ editor }) => {
diff --git a/packages/tiptap/src/editor/mention.tsx b/packages/tiptap/src/editor/mention.tsx
diff --git a/packages/tiptap/src/styles/mention.css b/packages/tiptap/src/styles/mention.css
diff --git a/packages/ui/package.json b/packages/ui/package.json
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

Original file line number	Diff line number	Diff line change
`@@ -1,12 +1,12 @@`
`1`	`1`	`[`
`2`	`2`	`{`
`3`	`3`	`"language": "ko",`
`4`		`- "total": 267,`
`5`		`- "missing": 267`
	`4`	`+ "total": 246,`
	`5`	`+ "missing": 246`
`6`	`6`	`},`
`7`	`7`	`{`
`8`	`8`	`"language": "en (source)",`
`9`		`- "total": 267,`
	`9`	`+ "total": 246,`
`10`	`10`	`"missing": 0`
`11`	`11`	`}`
`12`	`12`	`]`
Original file line number	Diff line number	Diff line change
`@@ -15,7 +15,7 @@`
`15`	`15`	`"@hey-api/openapi-ts": "^0.64.15"`
`16`	`16`	`},`
`17`	`17`	`"dependencies": {`
`18`		`- "@hey-api/client-fetch": "^0.10.0",`
	`18`	`+ "@hey-api/client-fetch": "^0.10.1",`
`19`	`19`	`"@tanstack/react-query": "^5.76.1"`
`20`	`20`	`}`
`21`	`21`	`}`