<template>
  <div class="loc-editor">
    <editor-menu-bar :editor="editor" v-slot="{ commands, isActive }">
      <div class="loc-menubar" >

        <button
          class="loc-menubar-button"
          :class="{ 'loc-menubar-button-active': isActive.bold() }"
          @click="commands.bold"
        >
          <b-icon icon="type-bold" />
        </button>

        <button
          class="loc-menubar-button"
          :class="{ 'loc-menubar-button-active': isActive.italic() }"
          @click="commands.italic"
        >
          <b-icon icon="type-italic" />
        </button>

        <button
          class="loc-menubar-button"
          :class="{ 'loc-menubar-button-active': isActive.underline() }"
          @click="commands.underline"
        >
          <b-icon icon="type-underline" />
        </button>

        <button
          class="loc-menubar-button"
          :class="{ 'loc-menubar-button-active': isActive.bullet_list() }"
          @click="commands.bullet_list"
        >
          <b-icon icon="list-ul" />
        </button>

        <button
          class="loc-menubar-button"
          :class="{ 'loc-menubar-button-active': isActive.ordered_list() }"
          @click="commands.ordered_list"
        >
          <b-icon icon="list-ol" />
        </button>

        <!-- <button
          class="loc-menubar-button"
          :class="{ 'loc-menubar-button-active': isActive.blockquote() }"
          @click="commands.blockquote"
        >
          <b-icon icon="blockquote-left" />
        </button> -->


        <button
          class="loc-menubar-button"
          @click="commands.undo"
        >
          <b-icon icon="arrow-90deg-left" />
        </button>

        <button
          class="loc-menubar-button"
          @click="commands.redo"
        >
          <b-icon icon="arrow-90deg-right" />
        </button>

      </div>
    </editor-menu-bar>
    
    <editor-content class="editor__content" :editor="editor"/>
  </div>
</template>

<script>


import { Editor, EditorContent, EditorMenuBar } from 'tiptap'
import {
  Blockquote,
  CodeBlock,
  HardBreak,
  Heading,
  HorizontalRule,
  OrderedList,
  BulletList,
  ListItem,
  TodoItem,
  TodoList,
  Bold,
  Code,
  Italic,
  Link,
  Strike,
  Underline,
  History,
  Placeholder
} from 'tiptap-extensions'
export default {
  components: {
    EditorContent,
    EditorMenuBar,
  },
  props:{
    textChanged:{
        type: Function,
        default: () => { return }
    },
    placeholderText:{
      type: String,
      default: "Type your optional post description here..."
    },
    text:{
      type: String,
      default: ""
    }
  },
  data() {
    return {
      editor: new Editor({
        extensions: [
          new Blockquote(),
          new BulletList(),
          new CodeBlock(),
          new HardBreak(),
          new Heading({ levels: [1, 2, 3] }),
          new HorizontalRule(),
          new ListItem(),
          new OrderedList(),
          new TodoItem(),
          new TodoList(),
          new Link(),
          new Bold(),
          new Code(),
          new Italic(),
          new Strike(),
          new Underline(),
          new History(),
          new Placeholder({
           emptyEditorClass: 'is-editor-empty',
           emptyNodeClass: 'is-empty',
           emptyNodeText: this.placeholderText,
           showOnlyWhenEditable: true,
           showOnlyCurrent: true,
          }),
        ],
        content: this.text,
        onUpdate:({getHTML}) => {
            this.textChanged(getHTML());
        },          
      }),
    }
  },
  beforeDestroy() {
    this.editor.destroy()
  },
}
</script>
<style lang="scss">
.loc-editor{
    min-height: 200px;
}
.loc-menubar{
    position: relative;
}
.loc-menubar-button{        
    height: 42px;
    width: 42px;
    font-size: 24px;
}
.loc-menubar-button-active{
    height: 42px;
    width: 42px;
    font-size: 24px;
    background: var(--actiways-primary-color);
    color: #fff;
}
.loc-editor p.is-editor-empty:first-child::before {
  content: attr(data-empty-text);
  color: var(--reco-lighter-font-color);
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  opacity: 0.66;
  pointer-events: none;
  height: 0;
  float: left;
}
.editor__content p{
  margin: 0;
  padding-top: 8px;
}
.editor__content ul, ol{
  margin: 5px;
}
</style>