chore: tiptap bump

src/lib/components/common/RichTextInput.svelte

@@ -72,32 +72,28 @@
 	import { keymap } from 'prosemirror-keymap';
 
 	import { AIAutocompletion } from './RichTextInput/AutoCompletion.js';
-	import Table from '@tiptap/extension-table';
-	import TableRow from '@tiptap/extension-table-row';
-	import TableHeader from '@tiptap/extension-table-header';
-	import TableCell from '@tiptap/extension-table-cell';
 
-	import Link from '@tiptap/extension-link';
-	import Underline from '@tiptap/extension-underline';
-	import TaskItem from '@tiptap/extension-task-item';
-	import TaskList from '@tiptap/extension-task-list';
-
-	import CharacterCount from '@tiptap/extension-character-count';
-
-	import CodeBlockLowlight from '@tiptap/extension-code-block-lowlight';
-	import Placeholder from '@tiptap/extension-placeholder';
 	import StarterKit from '@tiptap/starter-kit';
-	import Highlight from '@tiptap/extension-highlight';
-	import Typography from '@tiptap/extension-typography';
 
+	// Bubble and Floating menus are currently fixed to v2 due to styling issues in v3
+	// TODO: Update to v3 when styling issues are resolved
 	import BubbleMenu from '@tiptap/extension-bubble-menu';
 	import FloatingMenu from '@tiptap/extension-floating-menu';
 
+	import { TableKit } from '@tiptap/extension-table';
+	import { ListKit } from '@tiptap/extension-list';
+	import { Placeholder, CharacterCount } from '@tiptap/extensions';
+
+	import Typography from '@tiptap/extension-typography';
+	import Highlight from '@tiptap/extension-highlight';
+	import CodeBlockLowlight from '@tiptap/extension-code-block-lowlight';
+
 	import { all, createLowlight } from 'lowlight';
 
 	import { PASTED_TEXT_CHARACTER_LIMIT } from '$lib/constants';
 
 	import FormattingButtons from './RichTextInput/FormattingButtons.svelte';
+	import { duration } from 'dayjs';
 
 	export let oncompositionstart = (e) => {};
 	export let oncompositionend = (e) => {};
@@ -146,6 +142,14 @@
 	let yXmlFragment = null;
 	let awareness = null;
 
+	const getEditorInstance = async () => {
+		return new Promise((resolve) => {
+			setTimeout(() => {
+				resolve(editor);
+			}, 0);
+		});
+	};
+
 	// Custom Yjs Socket.IO provider
 	class SocketIOProvider {
 		constructor(doc, documentId, socket, user) {
@@ -217,6 +221,8 @@
 							if (state.length === 2 && state[0] === 0 && state[1] === 0) {
 								// Empty state, check if we have content to initialize
 								// check if editor empty as well
+								// const editor = await getEditorInstance();
+
 								const isEmptyEditor = !editor || editor.getText().trim() === '';
 								if (isEmptyEditor) {
 									if (content && (data?.sessions ?? ['']).length === 1) {
@@ -808,35 +814,30 @@
 			initializeCollaboration();
 		}
 
+		console.log(bubbleMenuElement, floatingMenuElement);
+
 		editor = new Editor({
 			element: element,
 			extensions: [
 				StarterKit,
+				Placeholder.configure({ placeholder }),
+
 				CodeBlockLowlight.configure({
 					lowlight
 				}),
 				Highlight,
 				Typography,
-				Underline,
 
-				Placeholder.configure({ placeholder }),
-				Table.configure({ resizable: true }),
-				TableRow,
-				TableHeader,
-				TableCell,
-				TaskList,
-				TaskItem.configure({
-					nested: true
+				TableKit.configure({
+					table: { resizable: true }
+				}),
+				ListKit.configure({
+					taskItem: {
+						nested: true
+					}
 				}),
 				CharacterCount.configure({}),
-				...(link
-					? [
-							Link.configure({
-								openOnClick: true,
-								linkOnPaste: true
-							})
-						]
-					: []),
+
 				...(autocomplete
 					? [
 							AIAutocompletion.configure({
@@ -887,6 +888,7 @@
 			onTransaction: () => {
 				// force re-render so `editor.isActive` works as expected
 				editor = editor;
+				if (!editor) return;
 
 				htmlValue = editor.getHTML();
 				jsonValue = editor.getJSON();
@@ -1163,11 +1165,11 @@
 </script>
 
 {#if showFormattingButtons}
-	<div bind:this={bubbleMenuElement} class="p-0">
+	<div bind:this={bubbleMenuElement} id="bubble-menu" class="p-0">
 		<FormattingButtons {editor} />
 	</div>
 
-	<div bind:this={floatingMenuElement} class="p-0">
+	<div bind:this={floatingMenuElement} id="floating-menu" class="p-0">
 		<FormattingButtons {editor} />
 	</div>
 {/if}

src/lib/components/notes/NoteEditor.svelte

@@ -725,9 +725,25 @@ Provide the enhanced notes in markdown format. Use markdown syntax for headings,
 	const onDragOver = (e) => {
 		e.preventDefault();
 
-		// Check if a file is being dragged.
-		if (e.dataTransfer?.types?.includes('Files')) {
-			dragged = true;
+		if (
+			e.dataTransfer?.types?.includes('text/plain') ||
+			e.dataTransfer?.types?.includes('text/html')
+		) {
+			dragged = false;
+			return;
+		}
+
+		// Check if the dragged item is a file or image
+		if (e.dataTransfer?.types?.includes('Files') && e.dataTransfer?.items) {
+			const items = Array.from(e.dataTransfer.items);
+			const hasFiles = items.some((item) => item.kind === 'file');
+			const hasImages = items.some((item) => item.type.startsWith('image/'));
+
+			if (hasFiles && !hasImages) {
+				dragged = true;
+			} else {
+				dragged = false;
+			}
 		} else {
 			dragged = false;
 		}