diff --git a/apps/web/components/common/mention-suggestion.tsx b/apps/web/components/common/mention-suggestion.tsx index da1c4e19..0cd09b10 100644 --- a/apps/web/components/common/mention-suggestion.tsx +++ b/apps/web/components/common/mention-suggestion.tsx @@ -8,6 +8,7 @@ import { } from "react"; import { Bot } from "lucide-react"; import { ReactRenderer } from "@tiptap/react"; +import { computePosition, offset, flip, shift } from "@floating-ui/dom"; import { useWorkspaceStore } from "@/features/workspace"; import type { SuggestionOptions, SuggestionProps } from "@tiptap/suggestion"; @@ -179,10 +180,17 @@ export function createMentionSuggestion(): Omit< clientRect: (() => DOMRect | null) | null | undefined, ) { if (!clientRect) return; - const rect = clientRect(); - if (!rect) return; - el.style.left = `${rect.left}px`; - el.style.top = `${rect.bottom + 4}px`; + const virtualEl = { + getBoundingClientRect: () => clientRect() ?? new DOMRect(), + }; + computePosition(virtualEl, el, { + placement: "bottom-start", + strategy: "fixed", + middleware: [offset(4), flip(), shift({ padding: 8 })], + }).then(({ x, y }) => { + el.style.left = `${x}px`; + el.style.top = `${y}px`; + }); } function cleanup() { diff --git a/apps/web/package.json b/apps/web/package.json index 70b42d87..1237d3dc 100644 --- a/apps/web/package.json +++ b/apps/web/package.json @@ -17,10 +17,12 @@ "@dnd-kit/sortable": "^10.0.0", "@dnd-kit/utilities": "^3.2.2", "@emoji-mart/data": "^1.2.1", + "@floating-ui/dom": "^1.7.6", "@tiptap/extension-link": "^3.20.5", "@tiptap/extension-mention": "^3.20.5", "@tiptap/extension-placeholder": "^3.20.5", "@tiptap/extension-typography": "^3.20.5", + "@tiptap/markdown": "^3.20.5", "@tiptap/pm": "^3.20.5", "@tiptap/react": "^3.20.5", "@tiptap/starter-kit": "^3.20.5", @@ -48,7 +50,6 @@ "shiki": "^3.21.0", "sonner": "^2.0.7", "tailwind-merge": "^3.5.0", - "tiptap-markdown": "^0.9.0", "tw-animate-css": "^1.4.0", "vaul": "^1.1.2", "zustand": "catalog:" diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 34e8ca80..f2bc365f 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -72,6 +72,9 @@ importers: '@emoji-mart/data': specifier: ^1.2.1 version: 1.2.1 + '@floating-ui/dom': + specifier: ^1.7.6 + version: 1.7.6 '@tiptap/extension-link': specifier: ^3.20.5 version: 3.20.5(@tiptap/core@3.20.5(@tiptap/pm@3.20.5))(@tiptap/pm@3.20.5) @@ -84,6 +87,9 @@ importers: '@tiptap/extension-typography': specifier: ^3.20.5 version: 3.20.5(@tiptap/core@3.20.5(@tiptap/pm@3.20.5)) + '@tiptap/markdown': + specifier: ^3.20.5 + version: 3.20.5(@tiptap/core@3.20.5(@tiptap/pm@3.20.5))(@tiptap/pm@3.20.5) '@tiptap/pm': specifier: ^3.20.5 version: 3.20.5 @@ -165,9 +171,6 @@ importers: tailwind-merge: specifier: ^3.5.0 version: 3.5.0 - tiptap-markdown: - specifier: ^0.9.0 - version: 0.9.0(@tiptap/core@3.20.5(@tiptap/pm@3.20.5)) tw-animate-css: specifier: ^1.4.0 version: 1.4.0 @@ -1440,6 +1443,12 @@ packages: '@tiptap/core': ^3.20.5 '@tiptap/pm': ^3.20.5 + '@tiptap/markdown@3.20.5': + resolution: {integrity: sha512-meSibJEeCrh6kPJbdXUNnwexZEgdxWDRu7YzPml8TCy+Djo+g50YwzOfY5bfTYs7/mwGANJ7Y8OnWcnwT2IbzQ==} + peerDependencies: + '@tiptap/core': ^3.20.5 + '@tiptap/pm': ^3.20.5 + '@tiptap/pm@3.20.5': resolution: {integrity: sha512-yJhDa7Chx2EqJMX/jlewBv0za7slf1dKHWYve1XaApuVHEkxl0Ul3EDbwnx316vIITkuFW/pWSwkSsAplyBeCw==} @@ -1516,24 +1525,15 @@ packages: '@types/hast@3.0.4': resolution: {integrity: sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==} - '@types/linkify-it@3.0.5': - resolution: {integrity: sha512-yg6E+u0/+Zjva+buc3EIb+29XEg4wltq7cSmd4Uc2EE/1nUVmxyzpX6gUXD0V8jIrG0r7YeOGVIbYRkxeooCtw==} - '@types/linkify-it@5.0.0': resolution: {integrity: sha512-sVDA58zAw4eWAffKOaQH5/5j3XeayukzDk+ewSsnv3p4yJEZHCCzMDiZM8e0OUrRvmpGZ85jf4yDHkHsgBNr9Q==} - '@types/markdown-it@13.0.9': - resolution: {integrity: sha512-1XPwR0+MgXLWfTn9gCsZ55AHOKW1WN+P9vr0PaQh5aerR9LLQXUbjfEAFhjmEmyoYFWAyuN2Mqkn40MZ4ukjBw==} - '@types/markdown-it@14.1.2': resolution: {integrity: sha512-promo4eFwuiW+TfGxhi+0x3czqTYJkG8qB17ZUJiVF10Xm7NLVRSLUsfRTU/6h1e24VvRnXCx+hG7li58lkzog==} '@types/mdast@4.0.4': resolution: {integrity: sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==} - '@types/mdurl@1.0.5': - resolution: {integrity: sha512-6L6VymKTzYSrEf4Nev4Xa1LCHKrlTlYCBMTlQKFuddo1CvQcE52I0mwfOJayueUC7MJuXOeHTcIU683lzd0cUA==} - '@types/mdurl@2.0.0': resolution: {integrity: sha512-RGdgjQUZba5p6QEFAVx2OGb8rQDL/cPRG7GiedRzMcJ1tYnUANBncjbSB1NRGwbvjcPeikRABz2nshyPk1bhWg==} @@ -2630,9 +2630,6 @@ packages: magic-string@0.30.21: resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==} - markdown-it-task-lists@2.1.1: - resolution: {integrity: sha512-TxFAc76Jnhb2OUu+n3yz9RMu4CwGfaT788br6HhEDlvWfdeJcLUsxk1Hgw2yJio0OXsxv7pyIPmvECY7bMbluA==} - markdown-it@14.1.1: resolution: {integrity: sha512-BuU2qnTti9YKgK5N+IeMubp14ZUKUUw7yeJbkjtosvHiP0AZ5c8IAgEMk79D0eC8F23r4Ac/q8cAIFdm2FtyoA==} hasBin: true @@ -2640,6 +2637,11 @@ packages: markdown-table@3.0.4: resolution: {integrity: sha512-wiYz4+JrLyb/DqW2hkFJxP7Vd7JuTDm77fvbM8VfEQdmSMqcImWeeRbHwZjBjIFki/VaMK2BhFi7oUUZeM5bqw==} + marked@17.0.5: + resolution: {integrity: sha512-6hLvc0/JEbRjRgzI6wnT2P1XuM1/RrrDEX0kPt0N7jGm1133g6X7DlxFasUIx+72aKAr904GTxhSLDrd5DIlZg==} + engines: {node: '>= 20'} + hasBin: true + math-intrinsics@1.1.0: resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==} engines: {node: '>= 0.4'} @@ -3561,11 +3563,6 @@ packages: resolution: {integrity: sha512-Bf+ILmBgretUrdJxzXM0SgXLZ3XfiaUuOj/IKQHuTXip+05Xn+uyEYdVg0kYDipTBcLrCVyUzAPz7QmArb0mmw==} engines: {node: '>=14.0.0'} - tiptap-markdown@0.9.0: - resolution: {integrity: sha512-dKLQ9iiuGNgrlGVjrNauF/UBzWu4LYOx5pkD0jNkmQt/GOwfCJsBuzZTsf1jZ204ANHOm572mZ9PYvGh1S7tpQ==} - peerDependencies: - '@tiptap/core': ^3.0.1 - tldts-core@7.0.27: resolution: {integrity: sha512-YQ7uPjgWUibIK6DW5lrKujGwUKhLevU4hcGbP5O6TcIUb+oTjJYJVWPS4nZsIHrEEEG6myk/oqAJUEQmpZrHsg==} @@ -5014,6 +5011,12 @@ snapshots: '@tiptap/core': 3.20.5(@tiptap/pm@3.20.5) '@tiptap/pm': 3.20.5 + '@tiptap/markdown@3.20.5(@tiptap/core@3.20.5(@tiptap/pm@3.20.5))(@tiptap/pm@3.20.5)': + dependencies: + '@tiptap/core': 3.20.5(@tiptap/pm@3.20.5) + '@tiptap/pm': 3.20.5 + marked: 17.0.5 + '@tiptap/pm@3.20.5': dependencies: prosemirror-changeset: 2.4.0 @@ -5142,15 +5145,8 @@ snapshots: dependencies: '@types/unist': 3.0.3 - '@types/linkify-it@3.0.5': {} - '@types/linkify-it@5.0.0': {} - '@types/markdown-it@13.0.9': - dependencies: - '@types/linkify-it': 3.0.5 - '@types/mdurl': 1.0.5 - '@types/markdown-it@14.1.2': dependencies: '@types/linkify-it': 5.0.0 @@ -5160,8 +5156,6 @@ snapshots: dependencies: '@types/unist': 3.0.3 - '@types/mdurl@1.0.5': {} - '@types/mdurl@2.0.0': {} '@types/ms@2.1.0': {} @@ -6181,8 +6175,6 @@ snapshots: dependencies: '@jridgewell/sourcemap-codec': 1.5.5 - markdown-it-task-lists@2.1.1: {} - markdown-it@14.1.1: dependencies: argparse: 2.0.1 @@ -6194,6 +6186,8 @@ snapshots: markdown-table@3.0.4: {} + marked@17.0.5: {} + math-intrinsics@1.1.0: {} mdast-util-find-and-replace@3.0.2: @@ -7476,14 +7470,6 @@ snapshots: tinyrainbow@3.1.0: {} - tiptap-markdown@0.9.0(@tiptap/core@3.20.5(@tiptap/pm@3.20.5)): - dependencies: - '@tiptap/core': 3.20.5(@tiptap/pm@3.20.5) - '@types/markdown-it': 13.0.9 - markdown-it: 14.1.1 - markdown-it-task-lists: 2.1.1 - prosemirror-markdown: 1.13.4 - tldts-core@7.0.27: {} tldts@7.0.27: