Preparing the editor for complexe componant

app/Http/Controllers/AlbumController.php

@@ -119,7 +119,7 @@ public function update(Request $request, string $id)
         $album->update([
             "name" => $request->name
         ]);
-        return redirect(route("album.index"))->with(["message" => "Album modifié avec success"]);
+        return redirect()->back()->with(["message" => "Album modifié avec success"]);
     }
 
     public function addPhotos(Request $request)

resources/js/Components/Editor/Editor.vue

@@ -30,26 +30,9 @@ import HistoryTab from './Tabs/HistoryTab.vue'
 import BubbleMenu from './BubbleMenu.vue'
 import FloatingMenu from './FloatingMenu.vue'
 
-const ImageAlign = Image.extend({
-  addAttributes() {
-    return {
-      ...this.parent?.(),
-      alignment: {
-        default: 'left',
-        renderHTML: attributes => {
-          return {
-            class: `image-align-${attributes.alignment}`,
-          }
-        },
-      },
-    }
-  },
-})
-
-// Props and emits
 const props = defineProps({
-  initialContent: {
-    type: String,
+  content: {
+    type: Object || String,
     default: `
     <h2>
         Présentation du groupe
@@ -78,19 +61,45 @@ const props = defineProps({
           N’hésitez pas à nous contacter si vous souhaitez avoir plus d’informations concernant notre groupe ou nos séances.
         </p>
     `
+  },
+  editable: {
+    type: Boolean,
+    default: true,
   }
 })
 
 const emit = defineEmits(['update'])
-
-// Editor instance
 const editor = ref(null)
+const edit = ref(props.editable);
 const activeTab = ref('text')
 
+defineExpose({
+  editable: (flag) => {
+    edit.value = flag;
+    editor.value.setEditable(flag)
+  }
+});
+
+const ImageAlign = Image.extend({
+  addAttributes() {
+    return {
+      ...this.parent?.(),
+      alignment: {
+        default: 'left',
+        renderHTML: attributes => {
+          return {
+            class: `image-align-${attributes.alignment}`,
+          }
+        },
+      },
+    }
+  },
+})
+
 // Initialize editor
 onMounted(() => {
   editor.value = new Editor({
-    content: props.initialContent,
+    content: props.content,
     editorProps: {
       attributes: {
         class: 'tiptap-editor',
@@ -154,7 +163,8 @@ onMounted(() => {
         json: editor.getJSON()
       })
     }
-  })
+  });
+  editor.value.setEditable(edit);
   emit('update', {
     html: editor.value.getHTML(),
     json: editor.value.getJSON()
@@ -169,9 +179,9 @@ onBeforeUnmount(() => {
 })
 </script>
 <template>
-  <div v-if="editor" class="notion-editor-container relative">
+  <div v-if="editor" class="notion-editor-container">
     <!-- Toolbar based on active tab -->
-    <div class="sticky top-0 right-0 left-0 z-10 bg-white border-b border-gray-200 py-2 flex space-x-2 flex-wrap">
+    <div v-if="edit" class="sticky top-16 right-0 left-0 z-10 bg-white border-b border-gray-200 py-2 flex space-x-2 flex-wrap">
       <Tabs @active="(tab) => activeTab = tab"/>
       <TextTab v-show="activeTab == 'text'" :editor="editor" />
       <BlockTab v-show="activeTab == 'blocks'" :editor="editor"/>
@@ -180,9 +190,9 @@ onBeforeUnmount(() => {
       <TableTab v-show="activeTab == 'tables'" :editor="editor"/>
       <HistoryTab v-show="activeTab == 'history'" :editor="editor"/>
     </div>
-    <BubbleMenu :editor="editor" />
+    <BubbleMenu v-if="edit" :editor="editor" />
     <!-- Floating Menu for Block Types -->
-    <FloatingMenu :editor="editor" />
+    <FloatingMenu v-if="edit" :editor="editor" />
     <!-- Editor Content -->
     <editor-content 
     :editor="editor" 

resources/js/Components/Editor/Tabs.vue

@@ -17,13 +17,13 @@ const setActiveTab = (tab) => {
         @click="setActiveTab('text')" 
         class="px-4 py-2 font-medium text-sm transition-all"
         :class="active === 'text' ? 'border-b-2 border-blue-500 text-blue-600' : 'text-gray-500 hover:text-gray-700'">
-        Text Formatting
+        Text
       </button>
       <button 
         @click="setActiveTab('blocks')" 
         class="px-4 py-2 font-medium text-sm transition-all"
         :class="active === 'blocks' ? 'border-b-2 border-blue-500 text-blue-600' : 'text-gray-500 hover:text-gray-700'">
-        Block Elements
+        Blocks
       </button>
       <button 
         @click="setActiveTab('lists')" 
@@ -41,7 +41,7 @@ const setActiveTab = (tab) => {
         @click="setActiveTab('media')" 
         class="px-4 py-2 font-medium text-sm transition-all"
         :class="active === 'media' ? 'border-b-2 border-blue-500 text-blue-600' : 'text-gray-500 hover:text-gray-700'">
-        Media
+        Medias
       </button>
       <button 
         @click="setActiveTab('history')" 

resources/js/Components/Editor/Tabs/TextTab.vue

@@ -28,8 +28,6 @@ const setAlign = (alignment) => {
     .setTextAlign(alignment)
     .run()
 }
-
-console.log(editor, editor.state)
 </script>
 
 <template>

resources/js/Pages/Album/Partials/Edit.vue

@@ -11,7 +11,7 @@ const props = defineProps({
 })
 
 const form = useForm({
-    name: ""
+    name: props.album.name
 });
 
 const emits = defineEmits(["close"]);
@@ -29,11 +29,11 @@ const submit = () => {
 
 <template>
     <div class="text-left text-black shadow-md shadow-gray-500 rounded-lg z-40
-    bg-gray-50 overflow-hidden border border-gray-300 p-2 w-72 pointer-events-none">
-        <form>
+    bg-gray-50 overflow-hidden border border-gray-300 p-2 w-72">
+        <form @submit.prevent="submit">
             <TextInput :placeholder="'Changer le nom de la album'" :class="'w-full'" v-model="form.name"/>
             <div class="w-full flex mt-3">
-                <button @click.prevent="submit" class="text-white font-semibold p-1 px-2 bg-primary rounded-md">Changer</button>
+                <button type="submit" class="text-white font-semibold p-1 px-2 bg-primary rounded-md">Changer</button>
             </div>
         </form>
     </div>

resources/js/Pages/Album/Show.vue

@@ -5,8 +5,10 @@ import Create from '@/Pages/Photo/Partials/Create.vue';
 import Show from'@/Pages/Photo/Partials/Show.vue';
 import Modal from '@/Pages/Photo/Partials/Modal.vue';
 import { onMounted, reactive, ref } from 'vue';
+import Edit from './Partials/Edit.vue';
 import Panel from '../Photo/Partials/Panel.vue';
 import Platform from '@/platform';
+import Utils from '@/utils';
 
 const props = defineProps({
     album: {
@@ -25,6 +27,7 @@ const props = defineProps({
 
 const form = useForm({ uuids: [] });
 const create = reactive({ active: false });
+const edit = ref(false);
 
 const fullScreenState = reactive({ photo: {}, active: false , prev: { square: true, list: false, } });
 const photoState = reactive({ square: true, list: false, pageCount: 1, photos: props.photos });
@@ -124,10 +127,20 @@ onMounted(() => {
                     </div>
                 </div>
                 <div class="relative flex items-center">
-                    <button @click="create.active = !create.active" class="flex items-center hover:bg-black/10 rounded-md px-2 py-1">
-                        <p class="font-medium laptop:mr-4 mr-1 laptop:text-lg text-sm">Ajouter une photo</p>
-                        <img src="/icons/add.svg" class="h-8">
+                    <div id="affichage" class="static flex items-center bg-white rounded-md shadow-sm shadow-gray-300 overflow-hidden mx-2">
+                        <button @click="edit = !edit" class="flex items-center h-full border-r border-gray-400 p-1
+                        hover:bg-black/5">
+                            <img src="/icons/modify.svg" class="h-7">
+                        </button>
+                        <button @click="create.active = !create.active" 
+                        class="flex items-center h-full p-1
+                        hover:bg-black/5">
+                            <img src="/icons/add.svg" class="h-7">
                         </button>
+                    </div>
+                    <div class="absolute top-full right-0 mt-3 z-10">
+                        <Edit v-if="edit" :album="album" @close="edit = false"/>
+                    </div>
                     <Panel @data="(uuids) => addPhotos(uuids)" @close="create.active = !create.active" v-if="create.active" :album="props.album"
                     class="absolute right-0 top-[110%] z-10 mt-4 " />
                 </div>
@@ -136,7 +149,7 @@ onMounted(() => {
         <template #content>
             <div class="w-full desktop:px-[17.5%] laptop:px-[12.5%] h-full">
                 <div v-if="!fullScreenState.active" class="w-full laptop:h-96 flex laptop:flex-row flex-col items-stretch justify-stretch overflow-hidden">
-                    <img :src="album.image">
+                    <img :src="Utils.DownloadUrl(album.image)">
                     <div class="w-full h-full laptop:px-10 px-3 py-6">
                         <p class="text-7xl font-extrabold text-black/90">{{ album.name }}</p>
                         <p class="pt-1 pl-2 text-2xl font-extrabold text-black/90">publiée le {{ album.created_at }}</p>

resources/js/Pages/Info.vue

@@ -2,14 +2,29 @@
 import { Head, Link } from '@inertiajs/vue3';
 import Layout from '@/Layouts/Layout.vue';
 import Editor from '@/Components/Editor/Editor.vue';
+import { onMounted, ref } from 'vue';
+
+const editable = ref(false);
+const editor = ref(null);
+const edit = () => {
+    editable.value = !editable.value;
+    editor.value.editable(editable.value);
+}
+
+onMounted(() => {
+    edit();
+})
 </script>
 
 <template>
     <Head title="Home"/>
     <Layout :footer="false">
         <template #content>
-            <div class="w-full h-screen flex justify-center px-[13.5%]">
-                <Editor @update="(data) => {}" />
+            <div class="relative w-full h-screen px-[13.5%]">
+                <button @click="edit" class="bg-white absolute top-0 left-0 m-4 p-1 rounded shadow">
+                    <img :src="editable ? '/icons/cancel.svg' : '/icons/modify.svg'" class="h-7">
+                </button>
+                <Editor @update="(data) => console.log(data)" ref="editor"/>
             </div>
         </template>
     </Layout>