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

<template>
<!-- Block Elements Tab -->
<div class="flex items-center space-x-1 flex-wrap text-sm text-gray-800">        
        <button 
          @click="editor.chain().focus().toggleBlockquote().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('blockquote') }"
          title="Blockquote"
        >
          citation
        </button>

        <button 
          @click="editor.chain().focus().setHorizontalRule().run()" 
          class="px-2 py-0.5 rounded-lg hover:bg-gray-200 bg-gray-300 my-0.5"
          title="Horizontal Rule"
        >
          séparateur
        </button>

        <button 
          @click="editor.chain().focus().toggleCodeBlock().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('codeBlock') }"
          title="Code Block"
        >
          commentaire
        </button>
      </div>
</template>