Preparing document handling

app/Http/Controllers/DocumentController.php

@@ -0,0 +1,65 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Models\Document;
+use Illuminate\Http\Request;
+
+class DocumentController extends Controller
+{
+    /**
+     * Display a listing of the resource.
+     */
+    public function index()
+    {
+        //
+    }
+
+    /**
+     * Show the form for creating a new resource.
+     */
+    public function create()
+    {
+        //
+    }
+
+    /**
+     * Store a newly created resource in storage.
+     */
+    public function store(Request $request)
+    {
+        //
+    }
+
+    /**
+     * Display the specified resource.
+     */
+    public function show(Document $document)
+    {
+        //
+    }
+
+    /**
+     * Show the form for editing the specified resource.
+     */
+    public function edit(Document $document)
+    {
+        //
+    }
+
+    /**
+     * Update the specified resource in storage.
+     */
+    public function update(Request $request, Document $document)
+    {
+        //
+    }
+
+    /**
+     * Remove the specified resource from storage.
+     */
+    public function destroy(Document $document)
+    {
+        //
+    }
+}

app/Models/Document.php

@@ -0,0 +1,39 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Model;
+
+class Document extends Model
+{
+    protected $fillable = [
+        'uuid',
+        'title',
+        'html',
+        'json',
+        'document_state_id',
+        'user_id'
+    ];
+
+    public function jsonSerialize():array 
+    {
+        return [
+            'uuid' => $this->uuid,
+            'title' => $this->title,
+            'html' => $this->html,
+            'json' => $this->json,
+            'state' => $this->state,
+            'user' => $this->user,
+        ];
+    }
+
+    public function state() 
+    {
+        return $this->belongsTo(DocumentState::class);
+    }
+
+    public function user() 
+    {
+        return $this->belongsTo(User::class);
+    }
+}

app/Models/DocumentState.php

@@ -0,0 +1,26 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Model;
+
+class DocumentState extends Model
+{
+    protected $fillable = [
+        'id',
+        'name',
+    ];
+
+    public function jsonSerialize():array 
+    {
+        return [
+            'id' => $this->uuid,
+            'name' => $this->name,
+        ];
+    }
+
+    public function documents() 
+    {
+        return $this->hasMany(Document::class);
+    }
+}

database/migrations/2025_04_26_184348_create_document_states.php

@@ -0,0 +1,35 @@
+<?php
+
+use App\Models\Document;
+use App\Models\DocumentState;
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+use Illumite\Support\Facades\DB;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::create('document_states', function (Blueprint $table) {
+            $table->id();
+            $table->string("name");
+            $table->timestamps();
+        });
+        
+        DocumentState::create(["name"=> "Brouillon"]);
+        DocumentState::create(["name"=> "Public"]);
+        DocumentState::create(["name"=> "Privé"]);
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::dropIfExists('document_states');
+    }
+};

database/migrations/2025_04_26_223135_create_documents.php

@@ -0,0 +1,36 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::create('documents', function (Blueprint $table) {
+            $table->id();
+            $table->uuid('uuid')->unique();
+            $table->string("title");
+            $table->text("html");
+            $table->json("json");
+            $table->unsignedBigInteger("document_state_id");
+            $table->unsignedBigInteger("user_id");
+            $table->timestamps();
+
+            $table->foreign("user_id")->references("id")->on("users");
+            $table->foreign("document_state_id")->references("id")->on("document_states");
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::dropIfExists('documents');
+    }
+};

resources/js/Components/Editor/Editor.vue

@@ -181,7 +181,7 @@ onBeforeUnmount(() => {
 <template>
   <div v-if="editor" class="notion-editor-container">
     <!-- Toolbar based on active tab -->
-    <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">
+    <div v-show="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"/>
@@ -190,9 +190,9 @@ onBeforeUnmount(() => {
       <TableTab v-show="activeTab == 'tables'" :editor="editor"/>
       <HistoryTab v-show="activeTab == 'history'" :editor="editor"/>
     </div>
-    <BubbleMenu v-if="edit" :editor="editor" />
+    <BubbleMenu v-show="edit" :editor="editor" />
     <!-- Floating Menu for Block Types -->
-    <FloatingMenu v-if="edit" :editor="editor" />
+    <FloatingMenu v-show="edit" :editor="editor" />
     <!-- Editor Content -->
     <editor-content 
     :editor="editor" 

resources/js/Components/Editor/Tabs.vue

@@ -17,37 +17,37 @@ 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
+        Texte
       </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'">
-        Blocks
+        Element
       </button>
       <button 
         @click="setActiveTab('lists')" 
         class="px-4 py-2 font-medium text-sm transition-all"
         :class="active === 'lists' ? 'border-b-2 border-blue-500 text-blue-600' : 'text-gray-500 hover:text-gray-700'">
-        Lists
+        Liste
       </button>
       <button 
         @click="setActiveTab('tables')" 
         class="px-4 py-2 font-medium text-sm transition-all"
         :class="active === 'tables' ? 'border-b-2 border-blue-500 text-blue-600' : 'text-gray-500 hover:text-gray-700'">
-        Tables
+        Tableau
       </button>
       <button 
         @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'">
-        Medias
+        Media
       </button>
       <button 
         @click="setActiveTab('history')" 
         class="px-4 py-2 font-medium text-sm transition-all"
         :class="active === 'history' ? 'border-b-2 border-blue-500 text-blue-600' : 'text-gray-500 hover:text-gray-700'">
-        History
+        Historique
       </button>
     </div>
 </template>

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

@@ -11,83 +11,31 @@ const editor = reactive(props.editor);
 
 <template>
 <!-- Block Elements Tab -->
-<div class="flex items-center space-x-2 flex-wrap">
+<div class="flex items-center space-x-1 flex-wrap text-sm text-gray-800">        
-        <button 
-          @click="editor.chain().focus().setParagraph().run()" 
-          class="px-2 py-1 text-sm rounded hover:bg-gray-100"
-          :class="{ 'bg-gray-200': editor.isActive('paragraph') }"
-          title="Paragraph"
-        >
-          <span class="font-medium">¶</span>
-        </button>
-        
-        <button 
-          @click="editor.chain().focus().toggleHeading({ level: 1 }).run()" 
-          class="px-2 py-1 text-sm rounded hover:bg-gray-100"
-          :class="{ 'bg-gray-200': editor.isActive('heading', { level: 1 }) }"
-          title="Heading 1"
-        >
-          <span class="font-medium">H1</span>
-        </button>
-        
-        <button 
-          @click="editor.chain().focus().toggleHeading({ level: 2 }).run()" 
-          class="px-2 py-1 text-sm rounded hover:bg-gray-100"
-          :class="{ 'bg-gray-200': editor.isActive('heading', { level: 2 }) }"
-          title="Heading 2"
-        >
-          <span class="font-medium">H2</span>
-        </button>
-        
-        <button 
-          @click="editor.chain().focus().toggleHeading({ level: 3 }).run()" 
-          class="px-2 py-1 text-sm rounded hover:bg-gray-100"
-          :class="{ 'bg-gray-200': editor.isActive('heading', { level: 3 }) }"
-          title="Heading 3"
-        >
-          <span class="font-medium">H3</span>
-        </button>
-
-        <button 
-          @click="editor.chain().focus().toggleHeading({ level: 4 }).run()" 
-          class="px-2 py-1 text-sm rounded hover:bg-gray-100"
-          :class="{ 'bg-gray-200': editor.isActive('heading', { level: 4 }) }"
-          title="Heading 3"
-        >
-          <span class="font-medium">H4</span>
-        </button>
-
         <button 
           @click="editor.chain().focus().toggleBlockquote().run()" 
-          class="p-1 rounded hover:bg-gray-100"
+          class="px-2 py-0.5 rounded-lg hover:bg-gray-200 bg-gray-300 my-0.5"
-          :class="{ 'bg-gray-200': editor.isActive('blockquote') }"
+          :class="{ 'bg-gray-400': editor.isActive('blockquote') }"
           title="Blockquote"
         >
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+          citation
-            <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
-          </svg>
         </button>
 
         <button 
           @click="editor.chain().focus().setHorizontalRule().run()" 
-          class="p-1 rounded hover:bg-gray-100"
+          class="px-2 py-0.5 rounded-lg hover:bg-gray-200 bg-gray-300 my-0.5"
           title="Horizontal Rule"
         >
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+          séparateur
-            <line x1="5" y1="12" x2="19" y2="12"></line>
-          </svg>
         </button>
 
         <button 
           @click="editor.chain().focus().toggleCodeBlock().run()" 
-          class="p-1 rounded hover:bg-gray-100"
+          class="px-2 py-0.5 rounded-lg hover:bg-gray-200 bg-gray-300 my-0.5"
-          :class="{ 'bg-gray-200': editor.isActive('codeBlock') }"
+          :class="{ 'bg-gray-400': editor.isActive('codeBlock') }"
           title="Code Block"
         >
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+          commentaire
-            <polyline points="16 18 22 12 16 6"></polyline>
-            <polyline points="8 6 2 12 8 18"></polyline>
-          </svg>
         </button>
       </div>
 </template>

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

@@ -24,45 +24,33 @@ const clearContent = () => {
 
 <template>
 <!-- History Tab -->
-<div class="flex items-center space-x-2 flex-wrap">
+<div class="flex items-center space-x-1 flex-wrap text-sm text-gray-800">
   <button 
     @click="undo" 
-    class="p-1 rounded hover:bg-gray-100 flex items-center"
+    class="px-2 py-0.5 rounded-lg hover:bg-gray-200 bg-gray-300 my-0.5"
     title="Undo"
     :disabled="!editor.can().undo()"
-    :class="{ 'opacity-50 cursor-not-allowed': !editor.can().undo() }"
+    :class="{ 'opacity-40 cursor-not-allowed': !editor.can().undo() }"
   >
-    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+    défaire
-      <path d="M3 10h10a8 8 0 0 1 8 8v2M3 10l6 6M3 10l6-6"></path>
-    </svg>
-    <span class="ml-1 text-sm">Undo</span>
   </button>
   
   <button 
     @click="redo" 
-    class="p-1 rounded hover:bg-gray-100 flex items-center"
+    class="px-2 py-0.5 rounded-lg hover:bg-gray-200 bg-gray-300 my-0.5"
     title="Redo"
     :disabled="!editor.can().redo()"
-    :class="{ 'opacity-50 cursor-not-allowed': !editor.can().redo() }"
+    :class="{ 'opacity-40 cursor-not-allowed': !editor.can().redo() }"
   >
-    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+    refaire
-      <path d="M21 10H11a8 8 0 0 0-8 8v2M21 10l-6 6M21 10l-6-6"></path>
-    </svg>
-    <span class="ml-1 text-sm">Redo</span>
   </button>
   
-  <div class="border-r border-gray-300 h-6 mx-1"></div>
-  
   <button 
     @click="clearContent" 
-    class="p-1 rounded hover:bg-gray-100 flex items-center text-red-500"
+    class="px-2 py-0.5 rounded-lg hover:bg-red-600 bg-red-500 my-0.5 text-white"
     title="Clear Content"
   >
-    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+    tout supprimer
-      <path d="M18 6L6 18"></path>
-      <path d="M6 6l12 12"></path>
-    </svg>
-    <span class="ml-1 text-sm">Clear All</span>
   </button>
 </div>
 </template>

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

@@ -11,52 +11,32 @@ const editor = reactive(props.editor);
 
 <template>
 <!-- Lists Tab -->
-<div class="flex items-center space-x-2 flex-wrap">
+<div class="flex items-center space-x-1 flex-wrap text-sm text-gray-800">
   <button 
     @click="editor.chain().focus().toggleBulletList().run()" 
-    class="p-1 rounded hover:bg-gray-100"
+    class="px-2 py-0.5 rounded-lg hover:bg-gray-200 bg-gray-300 my-0.5"
-    :class="{ 'bg-gray-200': editor.isActive('bulletList') }"
+    :class="{ 'bg-gray-400': editor.isActive('bulletList') }"
     title="Bullet List"
   >
-    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+    list à puce
-      <line x1="8" y1="6" x2="21" y2="6"></line>
-      <line x1="8" y1="12" x2="21" y2="12"></line>
-      <line x1="8" y1="18" x2="21" y2="18"></line>
-      <line x1="3" y1="6" x2="3.01" y2="6"></line>
-      <line x1="3" y1="12" x2="3.01" y2="12"></line>
-      <line x1="3" y1="18" x2="3.01" y2="18"></line>
-    </svg>
   </button>
   
   <button 
     @click="editor.chain().focus().toggleOrderedList().run()" 
-    class="p-1 rounded hover:bg-gray-100"
+    class="px-2 py-0.5 rounded-lg hover:bg-gray-200 bg-gray-300 my-0.5"
-    :class="{ 'bg-gray-200': editor.isActive('orderedList') }"
+    :class="{ 'bg-gray-400': editor.isActive('orderedList') }"
     title="Numbered List"
   >
-    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+    list ordonnée
-      <line x1="10" y1="6" x2="21" y2="6"></line>
-      <line x1="10" y1="12" x2="21" y2="12"></line>
-      <line x1="10" y1="18" x2="21" y2="18"></line>
-      <path d="M4 6h1v4"></path>
-      <path d="M4 10h2"></path>
-      <path d="M6 18H4c0-1 2-2 2-3s-1-1.5-2-1"></path>
-    </svg>
   </button>
   
   <button 
     @click="editor.chain().focus().toggleTaskList().run()" 
-    class="p-1 rounded hover:bg-gray-100"
+    class="px-2 py-0.5 rounded-lg hover:bg-gray-200 bg-gray-300 my-0.5"
-    :class="{ 'bg-gray-200': editor.isActive('taskList') }"
+    :class="{ 'bg-gray-400': editor.isActive('taskList') }"
     title="Task List"
   >
-    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+    list de taĉhe
-      <rect x="3" y="5" width="6" height="6" rx="1"></rect>
-      <path d="M3 17h6"></path>
-      <path d="M13 5h8"></path>
-      <path d="M13 11h8"></path>
-      <path d="M13 17h8"></path>
-    </svg>
   </button>
 </div>
 </template>

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

@@ -42,43 +42,26 @@ const addImage = () => {
 
 <template>
 <!-- Media Tab -->
-<div class="flex items-center space-x-2 flex-wrap">
+<div class="flex items-center space-x-1 flex-wrap text-sm text-gray-800">
   <button 
     @click="setLink" 
-    class="p-1 rounded hover:bg-gray-100 flex items-center"
+    class="px-2 py-0.5 rounded-lg hover:bg-gray-200 bg-gray-300 my-0.5"
-    :class="{ 'bg-gray-200': editor.isActive('link') }"
+    :class="{ 'bg-gray-400': editor.isActive('link') }"
     title="Add Link"
   >
-    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+    Link
-      <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>
-      <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
-    </svg>
-    <span class="ml-1 text-sm">Link</span>
   </button>
 
   <button 
     @click="addImage" 
-    class="p-1 rounded hover:bg-gray-100 flex items-center"
+    class="px-2 py-0.5 rounded-lg hover:bg-gray-200 bg-gray-300 my-0.5"
     title="Add Image from URL"
   >
-    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+    image via url
-      <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
-      <circle cx="8.5" cy="8.5" r="1.5"></circle>
-      <polyline points="21 15 16 10 5 21"></polyline>
-    </svg>
-    <span class="ml-1 text-sm">URL Image</span>
   </button>
 
-  <label class="p-1 rounded hover:bg-gray-100 flex items-center cursor-pointer" title="Upload Image">
+  <label class="px-2 py-0.5 rounded-lg hover:bg-gray-200 bg-gray-300 my-0.5 cursor-pointer" title="Upload Image">
-    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+    charger une image
-      <path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7"></path>
-      <line x1="16" y1="5" x2="22" y2="5"></line>
-      <line x1="19" y1="2" x2="19" y2="8"></line>
-      <rect x="3" y="10" width="18" height="12" rx="2"></rect>
-      <circle cx="8.5" cy="15.5" r="1.5"></circle>
-      <polyline points="21 18 16 13 8 21"></polyline>
-    </svg>
-    <span class="ml-1 text-sm">Upload</span>
     <input 
       type="file" 
       @change="uploadImage" 

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

@@ -73,169 +73,101 @@ const splitCell = () => {
 
 <template>
 <!-- Tables Tab -->
-<div class="flex items-center space-x-2 flex-wrap">
+<div class="flex items-center space-x-1 flex-wrap text-sm text-gray-800">
   <button 
     @click="addTable" 
-    class="p-1 rounded hover:bg-gray-100 flex items-center"
+    class="px-2 py-0.5 rounded-lg hover:bg-gray-200 bg-gray-300 my-0.5"
     title="Insert Table"
   >
-    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+    nouv. table
-      <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
-      <line x1="3" y1="9" x2="21" y2="9"></line>
-      <line x1="3" y1="15" x2="21" y2="15"></line>
-      <line x1="9" y1="3" x2="9" y2="21"></line>
-      <line x1="15" y1="3" x2="15" y2="21"></line>
-    </svg>
-    <span class="ml-1 text-sm">New Table</span>
   </button>
   
-  <div class="border-r border-gray-300 h-6 mx-1"></div>
-  
   <button 
     @click="addColumnBefore" 
-    class="p-1 rounded hover:bg-gray-100"
+    class="px-2 py-0.5 rounded-lg hover:bg-gray-200 bg-gray-300 my-0.5"
     title="Add Column Before"
   >
-    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+    column avant
-      <rect x="3" y="3" width="18" height="18" rx="2"></rect>
-      <line x1="9" y1="3" x2="9" y2="21"></line>
-      <line x1="6" y1="12" x2="12" y2="12"></line>
-      <line x1="9" y1="9" x2="9" y2="15"></line>
-    </svg>
   </button>
   
   <button 
     @click="addColumnAfter" 
-    class="p-1 rounded hover:bg-gray-100"
+    class="px-2 py-0.5 rounded-lg hover:bg-gray-200 bg-gray-300 my-0.5"
     title="Add Column After"
   >
-    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+    column après
-      <rect x="3" y="3" width="18" height="18" rx="2"></rect>
-      <line x1="15" y1="3" x2="15" y2="21"></line>
-      <line x1="12" y1="12" x2="18" y2="12"></line>
-      <line x1="15" y1="9" x2="15" y2="15"></line>
-    </svg>
   </button>
   
   <button 
     @click="deleteColumn" 
-    class="p-1 rounded hover:bg-gray-100"
+    class="px-2 py-0.5 rounded-lg hover:bg-gray-200 bg-gray-300 my-0.5"
     title="Delete Column"
   >
-    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+    retirer column
-      <rect x="3" y="3" width="18" height="18" rx="2"></rect>
-      <line x1="15" y1="3" x2="15" y2="21"></line>
-      <line x1="9" y1="3" x2="9" y2="21"></line>
-      <line x1="12" y1="9" x2="12" y2="15"></line>
-    </svg>
   </button>
   
-  <div class="border-r border-gray-300 h-6 mx-1"></div>
-  
   <button 
     @click="addRowBefore" 
-    class="p-1 rounded hover:bg-gray-100"
+    class="px-2 py-0.5 rounded-lg hover:bg-gray-200 bg-gray-300 my-0.5"
     title="Add Row Before"
   >
-    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+    ligne avant
-      <rect x="3" y="3" width="18" height="18" rx="2"></rect>
-      <line x1="3" y1="9" x2="21" y2="9"></line>
-      <line x1="12" y1="6" x2="12" y2="12"></line>
-      <line x1="9" y1="9" x2="15" y2="9"></line>
-    </svg>
   </button>
   
   <button 
     @click="addRowAfter" 
-    class="p-1 rounded hover:bg-gray-100"
+    class="px-2 py-0.5 rounded-lg hover:bg-gray-200 bg-gray-300 my-0.5"
     title="Add Row After"
   >
-    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+    ligne après
-      <rect x="3" y="3" width="18" height="18" rx="2"></rect>
-      <line x1="3" y1="15" x2="21" y2="15"></line>
-      <line x1="12" y1="12" x2="12" y2="18"></line>
-      <line x1="9" y1="15" x2="15" y2="15"></line>
-    </svg>
   </button>
   
   <button 
     @click="deleteRow" 
-    class="p-1 rounded hover:bg-gray-100"
+    class="px-2 py-0.5 rounded-lg hover:bg-gray-200 bg-gray-300 my-0.5"
     title="Delete Row"
   >
-    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+    retirer ligne
-      <rect x="3" y="3" width="18" height="18" rx="2"></rect>
-      <line x1="3" y1="15" x2="21" y2="15"></line>
-      <line x1="3" y1="9" x2="21" y2="9"></line>
-      <line x1="12" y1="12" x2="12" y2="12"></line>
-    </svg>
   </button>
   
-  <div class="border-r border-gray-300 h-6 mx-1"></div>
-  
   <button 
     @click="toggleHeaderRow" 
-    class="p-1 rounded hover:bg-gray-100"
+    class="px-2 py-0.5 rounded-lg hover:bg-gray-200 bg-gray-300 my-0.5"
     title="Toggle Header Row"
   >
-    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+    entête de ligne
-      <rect x="3" y="3" width="18" height="18" rx="2"></rect>
-      <line x1="3" y1="9" x2="21" y2="9"></line>
-      <path d="M6 6h12"></path>
-    </svg>
   </button>
   
   <button 
     @click="toggleHeaderColumn" 
-    class="p-1 rounded hover:bg-gray-100"
+    class="px-2 py-0.5 rounded-lg hover:bg-gray-200 bg-gray-300 my-0.5"
     title="Toggle Header Column"
   >
-    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+    entête de column
-      <rect x="3" y="3" width="18" height="18" rx="2"></rect>
-      <line x1="9" y1="3" x2="9" y2="21"></line>
-      <path d="M6 6v12"></path>
-    </svg>
   </button>
   
-  <div class="border-r border-gray-300 h-6 mx-1"></div>
-  
   <button 
     @click="mergeCells" 
-    class="p-1 rounded hover:bg-gray-100"
+    class="px-2 py-0.5 rounded-lg hover:bg-gray-200 bg-gray-300 my-0.5"
     title="Merge Cells"
   >
-    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+    fusionner
-      <rect x="3" y="3" width="18" height="18" rx="2"></rect>
-      <line x1="9" y1="3" x2="9" y2="21" stroke-dasharray="4"></line>
-    </svg>
   </button>
   
   <button 
     @click="splitCell" 
-    class="p-1 rounded hover:bg-gray-100"
+    class="px-2 py-0.5 rounded-lg hover:bg-gray-200 bg-gray-300 my-0.5"
     title="Split Cell"
   >
-    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+    séparer
-      <rect x="3" y="3" width="18" height="18" rx="2"></rect>
-      <line x1="9" y1="3" x2="9" y2="21"></line>
-      <line x1="15" y1="3" x2="15" y2="21"></line>
-    </svg>
   </button>
   
-  <div class="border-r border-gray-300 h-6 mx-1"></div>
-  
   <button 
     @click="deleteTable" 
-    class="p-1 rounded hover:bg-gray-100"
+    class="px-2 py-0.5 rounded-lg hover:bg-red-600 bg-red-500 my-0.5 text-white"
     title="Delete Table"
   >
-    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+    supprimer la table
-      <path d="M3 6h18"></path>
-      <path d="M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6"></path>
-      <path d="M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2"></path>
-      <line x1="10" y1="11" x2="10" y2="17"></line>
-      <line x1="14" y1="11" x2="14" y2="17"></line>
-    </svg>
   </button>
 </div>
 </template>

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

@@ -31,62 +31,93 @@ const setAlign = (alignment) => {
 </script>
 
 <template>
-<div class="flex items-center space-x-2 flex-wrap">
+<div class="flex items-center space-x-1 flex-wrap text-sm text-gray-800">
+  <button 
+    @click="editor.chain().focus().toggleHeading({ level: 1 }).run()" 
+    class="px-2 py-0.5 rounded-lg hover:bg-gray-200 bg-gray-300 my-0.5"
+    :class="{ 'bg-gray-400': editor.isActive('heading', { level: 1 }) }"
+    title="Heading 1"
+  >
+    T1
+  </button>
+  
+  <button 
+    @click="editor.chain().focus().toggleHeading({ level: 2 }).run()" 
+    class="px-2 py-0.5 rounded-lg hover:bg-gray-200 bg-gray-300 my-0.5"
+    :class="{ 'bg-gray-400': editor.isActive('heading', { level: 2 }) }"
+    title="Heading 2"
+  >
+    T2
+  </button>
+  
+  <button 
+    @click="editor.chain().focus().toggleHeading({ level: 3 }).run()" 
+    class="px-2 py-0.5 rounded-lg hover:bg-gray-200 bg-gray-300 my-0.5"
+    :class="{ 'bg-gray-400': editor.isActive('heading', { level: 3 }) }"
+    title="Heading 3"
+  >
+    T3
+  </button>
+
+  <button 
+    @click="editor.chain().focus().toggleHeading({ level: 4 }).run()" 
+    class="px-2 py-0.5 rounded-lg hover:bg-gray-200 bg-gray-300 my-0.5"
+    :class="{ 'bg-gray-400': editor.isActive('heading', { level: 4 }) }"
+    title="Heading 3"
+  >
+    T4
+  </button>
+  <button 
+    @click="editor.chain().focus().setParagraph().run()" 
+    class="px-2 py-0.5 rounded-lg hover:bg-gray-200 bg-gray-300 my-0.5"
+    :class="{ 'bg-gray-400': editor.isActive('paragraph') }"
+    title="Paragraph"
+  >
+    paragraphe
+  </button>
   <button 
     @click="editor.chain().focus().toggleBold().run()" 
-    class="p-1 rounded hover:bg-gray-100"
+    class="px-2 py-0.5 rounded-lg hover:bg-gray-200 bg-gray-300 my-0.5"
-    :class="{ 'bg-gray-200': editor.isActive('bold') }"
+    :class="{ 'bg-gray-400': editor.isActive('bold') }"
     title="Bold"
   >
-    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+    gras
-      <path d="M6 12h8a4 4 0 0 0 0-8H6v8z"></path>
-      <path d="M6 12h9a4 4 0 0 1 0 8H6v-8z"></path>
-    </svg>
   </button>
 
   <button 
     @click="editor.chain().focus().toggleItalic().run()" 
-    class="p-1 rounded hover:bg-gray-100"
+    class="px-2 py-0.5 rounded-lg hover:bg-gray-200 bg-gray-300 my-0.5"
-    :class="{ 'bg-gray-200': editor.isActive('italic') }"
+    :class="{ 'bg-gray-400': editor.isActive('italic') }"
     title="Italic"
   >
-    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+    italic
-      <path d="M19 4h-9v2h3.5l-3.5 8h-3v2h9v-2h-3.5l3.5-8h3z"></path>
-    </svg>
   </button>
 
   <button 
     @click="editor.chain().focus().toggleUnderline().run()" 
-    class="p-1 rounded hover:bg-gray-100"
+    class="px-2 py-0.5 rounded-lg hover:bg-gray-200 bg-gray-300 my-0.5"
-    :class="{ 'bg-gray-200': editor.isActive('underline') }"
+    :class="{ 'bg-gray-400': editor.isActive('underline') }"
     title="Underline"
   >
-    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+    sous-ligner
-      <path d="M6 4v6a6 6 0 0 0 6 6 6 6 0 0 0 6-6V4"></path>
-      <line x1="4" y1="20" x2="20" y2="20"></line>
-    </svg>
   </button>
 
   <button 
     @click="editor.chain().focus().toggleStrike().run()" 
-    class="p-1 rounded hover:bg-gray-100"
+    class="px-2 py-0.5 rounded-lg hover:bg-gray-200 bg-gray-300 my-0.5"
-    :class="{ 'bg-gray-200': editor.isActive('strike') }"
+    :class="{ 'bg-gray-400': editor.isActive('strike') }"
     title="Strikethrough"
   >
-    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+    barrer
-      <path d="M17 9V5H7v4"></path>
-      <path d="M16 15v4H8v-4"></path>
-      <line x1="5" y1="12" x2="19" y2="12"></line>
-    </svg>
   </button>
 
   <div class="flex items-center justify-center">
     <button 
     @click="!editor.state.selection.empty ? editor.chain().focus().toggleHighlight({color: highlight}).run() : highColor.click()" 
-    class="px-1 rounded"
+    class="px-2 py-0.5 rounded-lg"
     :style="'background-color:'+highlight"
     title="Highlight"
-    >A</button>
+    >sur-ligner</button>
     <input 
       type="color" 
       @input="(e) => highlight = e.target.value" 
@@ -98,7 +129,7 @@ const setAlign = (alignment) => {
   <div class="flex items-center space-x-1">
     <label 
     @click="!editor.state.selection.empty || editor.state.isFocused ? setColor(color) : textColor.click()"
-    class="text-lg text-medium" :style="'color: ' + color">A</label>
+    class="px-2 py-0.5 rounded-lg hover:bg-gray-200 bg-gray-300 my-0.5" :style="'color: ' + color">couleur</label>
     <input 
       type="color" 
       @input="(e) => color = e.target.value" 
@@ -110,20 +141,18 @@ const setAlign = (alignment) => {
 
   <button 
     @click="editor.chain().focus().clearNodes().run()" 
-    class="p-1 rounded hover:bg-gray-100"
+    class="px-2 py-0.5 rounded-lg hover:bg-red-600 bg-red-500 my-0.5 text-white"
     title="Clear Formatting"
   >
-    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+    retirer tout format
-      <path d="M12 20h9"></path>
-      <path d="M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path>
-      <line x1="2" y1="2" x2="22" y2="22"></line>
-    </svg>
   </button>
 
+  <div class="border-l border-gray-300 h-full mx-4"></div>
+
   <button 
         @click="setAlign('left')" 
         class="p-1 rounded hover:bg-gray-100"
-        :class="{ 'bg-gray-200': editor.isActive({ textAlign: 'left' }) }"
+        :class="{ 'bg-gray-400': editor.isActive({ textAlign: 'left' }) }"
         title="Align Left"
     >
         <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor">
@@ -137,7 +166,7 @@ const setAlign = (alignment) => {
     <button 
         @click="setAlign('center')" 
         class="p-1 rounded hover:bg-gray-100"
-        :class="{ 'bg-gray-200': editor.isActive({ textAlign: 'center' }) }"
+        :class="{ 'bg-gray-400': editor.isActive({ textAlign: 'center' }) }"
         title="Align Center"
     >
         <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor">
@@ -151,7 +180,7 @@ const setAlign = (alignment) => {
     <button 
         @click="setAlign('right')" 
         class="p-1 rounded hover:bg-gray-100"
-        :class="{ 'bg-gray-200': editor.isActive({ textAlign: 'right' }) }"
+        :class="{ 'bg-gray-400': editor.isActive({ textAlign: 'right' }) }"
         title="Align Right"
     >
         <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor">
@@ -165,7 +194,7 @@ const setAlign = (alignment) => {
     <button 
         @click="setAlign('justify')" 
         class="p-1 rounded hover:bg-gray-100"
-        :class="{ 'bg-gray-200': editor.isActive({ textAlign: 'justify' }) }"
+        :class="{ 'bg-gray-400': editor.isActive({ textAlign: 'justify' }) }"
         title="Justify"
     >
         <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor">
@@ -175,11 +204,5 @@ const setAlign = (alignment) => {
         <line x1="21" y1="18" x2="3" y2="18"></line>
         </svg>
     </button>
-    
-    <div class="border-l border-gray-300 h-8 mx-2"></div>
-    
-    <p class="text-sm text-gray-600">
-        Tip: Select text blocks or images before applying alignment.
-    </p>
 </div>
 </template>

resources/js/Layouts/Layout.vue

@@ -44,9 +44,6 @@ const toggleMenu = () => {
                     <NavLink v-if="!user" :href="'#'" :active="false">
                         News letter
                     </NavLink> -->
-                    <NavLink v-if="!user" :href="route('login')" :active="route().current('login')">
-                        Log in
-                    </NavLink>
                     <NavLink v-if="user" :href="route('photo.index')" :active="route().current('photo.*')">
                         Photothèque
                     </NavLink>
@@ -56,6 +53,12 @@ const toggleMenu = () => {
                     <NavLink v-if="user" :href="route('admin.user.index')" :active="route().current('admin.*')">
                         Admin
                     </NavLink>
+                    <NavLink :href="'/editeur'" :active="route().current('info')">
+                        Demo editeur
+                    </NavLink>
+                    <NavLink v-if="!user" :href="route('login')" :active="route().current('login')">
+                        Log in
+                    </NavLink>
                 </div>
             </div>
             <div v-if="user" class="laptop:flex hidden relative items-center z-40">

resources/js/Pages/Info.vue

@@ -8,7 +8,7 @@ const editable = ref(false);
 const editor = ref(null);
 const edit = () => {
     editable.value = !editable.value;
-    editor.value.editable(editable.value);
+    if(editor.value) editor.value.editable(editable.value);
 }
 
 onMounted(() => {
@@ -21,10 +21,11 @@ onMounted(() => {
     <Layout :footer="false">
         <template #content>
             <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">
+                <button @click="edit" class="flex items-center 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">
+                    <p class="ml-2 text-gray-700">{{ editable ? "Prévisualiser" : "Editer" }}</p>
                 </button>
-                <Editor @update="(data) => console.log(data)" ref="editor"/>
+                <Editor @update="(data) => {}" ref="editor"/>
             </div>
         </template>
     </Layout>

routes/web.php

@@ -15,7 +15,7 @@
     else return Inertia::render('Homea');
 })->name('home');
 
-Route::get('/info', function () {
+Route::get('/editeur', function () {
     return Inertia::render('Info');
 })->name('info');