Preparing the editor for complexe componant

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: {
+  content: {
-    type: String,
+    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/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%]">
+            <div class="relative w-full h-screen px-[13.5%]">
-                <Editor @update="(data) => {}" />
+                <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>