wip

app/Http/Controllers/Dashboard/Blogs/StoreBlogImageController.php

@@ -3,18 +3,19 @@
 namespace App\Http\Controllers\Dashboard\Blogs;
 
 use App\Http\Controllers\Controller;
+use Illuminate\Http\JsonResponse;
 use Illuminate\Http\RedirectResponse;
 use App\Domain\File\Actions\StoreFileAction;
 use App\Http\Requests\Dashboard\Blogs\StoreBlogImageRequest;
 
 class StoreBlogImageController extends Controller
 {
-    public function __invoke(StoreBlogImageRequest $request, StoreFileAction $action): RedirectResponse
+    public function __invoke(StoreBlogImageRequest $request, StoreFileAction $action): JsonResponse
     {
-        $file = $action($request->file('file'));
+//        $file = $action($request->file('file'));
 
-        return [
-            'path' => ''
-        ];
+        return response()->json([
+            'path' => 'https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80'
+        ]);
     }
 }

resources/js/Components/Editor/Components/Modals/EditImage.vue

@@ -2,15 +2,19 @@
 import Modal from '@/Components/Modal.vue'
 import ImageUpload from '@/Components/Inputs/ImageUpload.vue'
 import PrimaryButton from '@/Components/Buttons/PrimaryButton.vue'
-import { ref } from 'vue'
-import { useForm } from '@inertiajs/vue3'
+import {ref} from 'vue'
+import {router, useForm} from '@inertiajs/vue3'
+import axios from "axios";
 
 const props = defineProps({
-    modelValue: String,
+    modelValue: {
+        type: String,
+        required: false
+    },
     open: Boolean,
 })
 
-const emits = defineEmits(['close'])
+const emits = defineEmits(['close', 'update:modelValue'])
 
 const path = ''
 const errors = ref({})
@@ -20,14 +24,14 @@ const form = useForm({
 })
 
 const submit = () => {
-    form.post(route('dashboard.blogs.image.store'), {
-        onError: (errors) => handleError(errors),
-        onSuccess: () => handleSuccess(),
-    })
+    const formData = new FormData();
+    formData.append('file', form.file);
+
+    axios.post(route('dashboard.blogs.image.store'), formData).then((res) => handleSuccess(res)).catch((err) => console.log(err))
 }
 
-const handleSuccess = () => {
-    emits('close')
+const handleSuccess = (res) => {
+    emits('update:modelValue', res.data.path)
 }
 
 const handleError = (errs) => {
@@ -38,8 +42,8 @@ const handleError = (errs) => {
 </script>
 
 <template>
-    <Modal :open="open">
-        <ImageUpload v-model="form.file" :current-image="path" :error="errors['file']" />
+    <Modal :open="open" @close="emits('close')">
+        <ImageUpload v-model="form.file" :current-image="path" :error="errors['file']"/>
 
         <PrimaryButton type="submit" @click.prevent="submit"> Submit</PrimaryButton>
     </Modal>

resources/js/Components/Editor/Nodes/Image/View.vue

@@ -5,9 +5,9 @@ export default {
 </script>
 
 <script setup>
-import { ref } from 'vue'
-import { NodeViewWrapper, nodeViewProps } from '@tiptap/vue-3'
-import { PhotoIcon, XMarkIcon } from '@heroicons/vue/24/solid'
+import {ref, watch, computed} from 'vue'
+import {NodeViewWrapper, nodeViewProps} from '@tiptap/vue-3'
+import {PhotoIcon, XMarkIcon} from '@heroicons/vue/24/solid'
 import EditableNode from '../../Components/EditableNodeWrapper.vue'
 import EditImage from '@/Components/Editor/Components/Modals/EditImage.vue'
 import SecondaryButton from '@/Components/Buttons/SecondaryButton.vue'
@@ -17,13 +17,27 @@ const props = defineProps({
 })
 
 const open = ref(false)
+const src = ref(props.node.attrs.src)
+
+watch(src, (newVal) => {
+    newSrc.value = newVal
+})
+
+let newSrc = computed({
+    get: () => props.node.attrs[src],
+    set: (value) => {
+        props.updateAttributes({
+            [src]: value,
+        })
+    },
+})
 </script>
 
 <template>
     <NodeViewWrapper>
         <EditableNode v-bind="props">
             <template #tools>
-                <EditImage :open="open" />
+                <EditImage @close="open = false" :open="open" v-model="src"/>
             </template>
 
             <template #content>
@@ -38,12 +52,12 @@ const open = ref(false)
                                         x
                                     </button>
 
-                                    <!--Image here-->
+                                    <img :src="src"/>
                                 </div>
                             </div>
 
                             <div v-else class="flex flex-col justify-center items-center mt-2">
-                                <PhotoIcon class="w-12 h-12 text-gray-300" />
+                                <PhotoIcon class="w-12 h-12 text-gray-300"/>
                                 <p class="mt-1 text-sm text-gray-300">Select or upload an image</p>
                             </div>
 

routes/blog.php

@@ -31,7 +31,7 @@
             Route::get('/{blog}', ShowBlogController::class)->name('show');
             Route::get('/{blog}/edit', EditBlogController::class)->name('edit');
             Route::post('/store', StoreBlogController::class)->name('store');
-            Route::post('/store/image', \App\Http\Controllers\Dashboard\Blogs\StoreBlogImageController::class)->name('blog.store');
+            Route::post('/store/image', \App\Http\Controllers\Dashboard\Blogs\StoreBlogImageController::class)->name('image.store');
             Route::put('/{blog}/update', UpdateBlogController::class)->name('update');
         });