<script setup>
import { reactive, ref } from 'vue';
const props = defineProps({
  editor: {
    type: Object,
    required: true,
  }
});
const editor = reactive(props.editor);
</script>

<template>
<!-- Lists Tab -->
<div class="flex items-center space-x-1 flex-wrap text-sm text-gray-800">
  <button 
    @click="editor.chain().focus().toggleBulletList().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('bulletList') }"
    title="Bullet List"
  >
    list à puce
  </button>
  
  <button 
    @click="editor.chain().focus().toggleOrderedList().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('orderedList') }"
    title="Numbered List"
  >
    list ordonnée
  </button>
  
  <button 
    @click="editor.chain().focus().toggleTaskList().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('taskList') }"
    title="Task List"
  >
    list de taĉhe
  </button>
</div>
</template>