<template>
  <div v-if="editor" class="menubar" :editor="editor">
    <!-- 文件上传弹窗 -->
    <ModalComponent ref="uploadModal" :editor="editor"/>
    <!-- 菜单 -->
    <button @click="addImage"
            class="menubar__button">
      <icon name="image" />
    </button>
    <button @click="editor.chain().focus().toggleBold().run()" 
            class="menubar__button"
            :class="{ 'is-active': editor.isActive('bold') }">
      <icon name="bold" />
    </button>
    <button @click="editor.chain().focus().toggleItalic().run()" 
            class="menubar__button"
            :class="{ 'is-active': editor.isActive('italic') }">
      <icon name="italic" />
    </button>
    <button @click="editor.chain().focus().toggleStrike().run()" 
            class="menubar__button"
            :class="{ 'is-active': editor.isActive('strike') }">
      <icon name="strike" />
    </button>
    <button @click="editor.chain().focus().setParagraph().run()" 
            class="menubar__button"
            :class="{ 'is-active': editor.isActive('paragraph') }">
      <icon name="paragraph" />
    </button>
    <button @click="editor.chain().focus().toggleHeading({ level: 1 }).run()" 
            class="menubar__button"
            :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }">
      H1
    </button>
    <button @click="editor.chain().focus().toggleHeading({ level: 2 }).run()" 
            class="menubar__button"
            :class="{ 'is-active': editor.isActive('heading', { level: 2 }) }">
      H2
    </button>
    <button @click="editor.chain().focus().toggleHeading({ level: 3 }).run()" 
            class="menubar__button"
            :class="{ 'is-active': editor.isActive('heading', { level: 3 }) }">
      H3
    </button>
    <button @click="editor.chain().focus().toggleBulletList().run()" 
            class="menubar__button"
            :class="{ 'is-active': editor.isActive('bulletList') }">
      <icon name="ul" />
    </button>
    <button @click="editor.chain().focus().toggleOrderedList().run()" 
            class="menubar__button"
            :class="{ 'is-active': editor.isActive('orderedList') }">
      <icon name="ol" />
    </button>
    <button @click="editor.chain().focus().toggleCodeBlock().run()" 
            class="menubar__button"
            :class="{ 'is-active': editor.isActive('codeBlock') }">
      <icon name="code" />
    </button>
    <button @click="editor.chain().focus().toggleBlockquote().run()" 
            class="menubar__button"
            :class="{ 'is-active': editor.isActive('blockquote') }">
      <icon name="quote" />
    </button>
    <button @click="editor.chain().focus().setHorizontalRule().run()"
            class="menubar__button">
      <icon name="hr" />
    </button>
    <button @click="editor.chain().focus().undo().run()"
            class="menubar__button">
      <icon name="undo" />
    </button>
    <button @click="editor.chain().focus().redo().run()"
            class="menubar__button">
      <icon name="redo" />
    </button>
  </div>
</template>


<script lang="ts">
import Vue from 'vue'
import Icon from "@/components/Icon/index.vue"
import ModalComponent from "./ImageModal.vue"

export default Vue.extend({
  props: ["editor"],
  components: {
    Icon,
    ModalComponent,
  },
  methods: {
    addImage() {
       (this.$refs.uploadModal as any).showModal()
    },
  },
})
</script>

<style scoped>

</style>
