feat: implement Spatie Media Library integration

with CRUD operations and media management UI

resources/js/app.js

@@ -1 +1,38 @@
 console.log('App.js is loaded');
+
+document.addEventListener('livewire:init', () => {
+    Livewire.on('insert-editor-content', (data) => {
+        console.log('Received insert-editor-content data:', data);
+        // Handle if data is an array
+        const payload = Array.isArray(data) ? data[0] : data;
+        const statePath = payload.statePath;
+        const html = payload.html;
+        console.log('Extracted statePath:', statePath, 'html:', html);
+        // 1. Find the editor by its statePath
+        const container = document.querySelector(`[wire\\:model="${statePath}"]`) || document.querySelector(`[statepath="${statePath}"]`);
+        console.log('Container found:', container);
+        const editorElement = container ? container.querySelector('.tiptap') : null;
+        console.log('Editor element found:', editorElement);
+        
+        if (editorElement && editorElement.editor) {
+            console.log('Inserting content:', html);
+            // 2. Insert the HTML (the <img> tag) into the editor
+            setTimeout(() => {
+                editorElement.editor.chain().focus().insertContent(html).run();
+            }, 500);
+        } else {
+            console.log('Editor not found or not initialized');
+            // Fallback: try to find any .tiptap on the page
+            const anyTiptap = document.querySelector('.tiptap');
+            console.log('Any tiptap found:', anyTiptap);
+            if (anyTiptap && anyTiptap.editor) {
+                console.log('Inserting to any tiptap');
+                setTimeout(() => {
+                    anyTiptap.editor.chain().focus().insertContent(html).run();
+                }, 500);
+            }
+        }
+    });
+});
+
+console.log('Testing if app.js is still running');