refac

package.json

@@ -43,7 +43,7 @@
 		"sass-embedded": "^1.81.0",
 		"svelte": "^5.53.10",
 		"svelte-check": "^4.0.0",
-		"svelte-confetti": "^1.3.2",
+		"svelte-confetti": "^2.3.2",
 		"tailwindcss": "^4.0.0",
 		"tslib": "^2.4.1",
 		"typescript": "^5.5.4",
@@ -65,12 +65,12 @@
 		"@sveltejs/adapter-node": "^2.0.0",
 		"@sveltejs/svelte-virtual-list": "^3.0.1",
 		"@tiptap/core": "^3.0.7",
-		"@tiptap/extension-bubble-menu": "^2.26.1",
+		"@tiptap/extension-bubble-menu": "^3.0.7",
 		"@tiptap/extension-code": "^3.0.7",
 		"@tiptap/extension-code-block-lowlight": "^3.0.7",
 		"@tiptap/extension-drag-handle": "^3.4.5",
 		"@tiptap/extension-file-handler": "^3.0.7",
-		"@tiptap/extension-floating-menu": "^2.26.1",
+		"@tiptap/extension-floating-menu": "^3.0.7",
 		"@tiptap/extension-highlight": "^3.3.0",
 		"@tiptap/extension-image": "^3.0.7",
 		"@tiptap/extension-link": "^3.0.7",

src/lib/components/common/RichTextInput.svelte

@@ -790,12 +790,11 @@
 					? [
 							BubbleMenu.configure({
 								element: bubbleMenuElement,
-								tippyOptions: {
+								appendTo: () => document.body,
-									duration: 100,
+								options: {
-									arrow: false,
+									strategy: 'fixed',
 									placement: 'top',
-									theme: 'transparent',
+									offset: 2
-									offset: [0, 2]
 								},
 								shouldShow: ({ editor, view, state, oldState, from, to }) => {
 									// safety check
@@ -808,20 +807,34 @@
 							}),
 							FloatingMenu.configure({
 								element: floatingMenuElement,
-								tippyOptions: {
+								appendTo: () => document.body,
-									duration: 100,
+								options: {
-									arrow: false,
+									strategy: 'fixed',
 									placement: floatingMenuPlacement,
-									theme: 'transparent',
+									offset: 4
-									offset: [-12, 4]
 								},
 								shouldShow: ({ editor, view, state, oldState }) => {
 									// safety check
 									if (!editor || !editor.view || editor.isDestroyed) {
 										return false;
 									}
-									// default logic
+									const { selection } = state;
-									return editor.isActive('paragraph');
+									const { $anchor, empty } = selection;
+									const isRootDepth = $anchor.depth === 1;
+									const isEmptyTextBlock =
+										$anchor.parent.isTextblock &&
+										!$anchor.parent.type.spec.code &&
+										!$anchor.parent.textContent &&
+										$anchor.parent.childCount === 0;
+
+									// Only show on empty paragraphs at root depth
+									return (
+										view.hasFocus() &&
+										empty &&
+										isRootDepth &&
+										isEmptyTextBlock &&
+										editor.isEditable
+									);
 								}
 							})
 						]
@@ -1232,11 +1245,11 @@
 </script>
 
 {#if richText && showFormattingToolbar}
-	<div bind:this={bubbleMenuElement} id="bubble-menu" class="p-0 {editor ? '' : 'hidden'}">
+	<div bind:this={bubbleMenuElement} id="bubble-menu" class="p-0" style="visibility: hidden; opacity: 0; position: absolute; z-index: 9999;">
 		<FormattingButtons {editor} />
 	</div>
 
-	<div bind:this={floatingMenuElement} id="floating-menu" class="p-0 {editor ? '' : 'hidden'}">
+	<div bind:this={floatingMenuElement} id="floating-menu" class="p-0" style="visibility: hidden; opacity: 0; position: absolute; z-index: 9999;">
 		<FormattingButtons {editor} />
 	</div>
 {/if}