<template>
  <div class="editor">
    <editor-menu-bar
      v-if="editable"
      v-slot="{ commands, isActive }"
      :editor="editor"
    >
      <div class="menubar">
        <button
          class="menubar__button"
          :class="{ 'is-active': isActive.bold() }"
          @click="commands.bold"
        >
          Bold
        </button>
        <button
          class="menubar__button"
          :class="{ 'is-active': isActive.italic() }"
          @click="commands.italic"
        >
          Italic
        </button>
        <button
          class="menubar__button"
          :class="{ 'is-active': isActive.strike() }"
          @click="commands.strike"
        >
          Strike
        </button>
        <button
          class="menubar__button"
          :class="{ 'is-active': isActive.underline() }"
          @click="commands.underline"
        >
          Underline
        </button>
        <button
          class="menubar__button"
          :class="{ 'is-active': isActive.heading({ level: 1 }) }"
          @click="commands.heading({ level: 1 })"
        >
          H1
        </button>
        <button
          class="menubar__button"
          :class="{ 'is-active': isActive.heading({ level: 2 }) }"
          @click="commands.heading({ level: 2 })"
        >
          H2
        </button>
        <button
          class="menubar__button"
          :class="{ 'is-active': isActive.heading({ level: 3 }) }"
          @click="commands.heading({ level: 3 })"
        >
          H3
        </button>
        <button
          class="menubar__button"
          :class="{ 'is-active': isActive.bullet_list() }"
          @click="commands.bullet_list"
        >
          ul
        </button>
        <button
          class="menubar__button"
          :class="{ 'is-active': isActive.ordered_list() }"
          @click="commands.ordered_list"
        >
          ol
        </button>
        <button
          class="menubar__button"
          :class="{ 'is-active': isActive.blockquote() }"
          @click="commands.blockquote"
        >
          quote
        </button>
        <button
          class="menubar__button"
          :class="{ 'is-active': isActive.code_block() }"
          @click="commands.code_block"
        >
          code
        </button>
        <button
          class="menubar__button"
          @click="commands.createTable({rowsCount: 3, colsCount: 3, withHeaderRow: false })"
        >
          table
        </button>

        <span v-if="isActive.table()">
          <button
            class="menubar__button"
            @click="commands.deleteTable"
          >
            delete_table
          </button>
          <button
            class="menubar__button"
            @click="commands.addColumnBefore"
          >
            add_col_before
          </button>
          <button
            class="menubar__button"
            @click="commands.addColumnAfter"
          >
            add_col_after
          </button>
          <button
            class="menubar__button"
            @click="commands.deleteColumn"
          >
            delete_col
          </button>
          <button
            class="menubar__button"
            @click="commands.addRowBefore"
          >
            add_row_before
          </button>
          <button
            class="menubar__button"
            @click="commands.addRowAfter"
          >
            add_row_after
          </button>
          <button
            class="menubar__button"
            @click="commands.deleteRow"
          >
            delete_row
          </button>
          <button
            class="menubar__button"
            @click="commands.toggleCellMerge"
          >
            combine_cells
          </button>
        </span>
        <button
          class="menubar__button"
          @click="commands.horizontal_rule"
        >
          hr
        </button>
        <button
          class="menubar__button"
          @click="commands.undo"
        >
          undo
        </button>
        <button
          class="menubar__button"
          @click="commands.redo"
        >
          redo
        </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,
  Strike,
  Underline,
  History,
  TrailingNode,
  Table,
  TableHeader,
  TableCell,
  TableRow,
  Image,
} from 'tiptap-extensions';

export default {
  components: {
    EditorContent,
    EditorMenuBar,
  },
  props: {
    value: String,
    initContent: String,
    editable: Boolean,
  },
  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 Bold(),
          new Code(),
          new Italic(),
          new Strike(),
          new Underline(),
          new History(),
          new TrailingNode({
            node: 'paragraph',
            notAfter: ['paragraph'],
          }),
          new Table({
            resizable: true,
          }),
          new TableHeader(),
          new TableCell(),
          new TableRow(),
          new Image(),
        ],
        content: '',
        onUpdate: ({ getHTML }) => {
          const html = getHTML();
          this.bindHtml(html);
        },
        editable: this._props.editable,
      }),
    };
  },
  watch: {
    initContent(newVal) {
      this.editor.setContent(newVal);
    },
    editable(newVal) {
      this.editor.setOptions({ editable: newVal });
    },
  },
  beforeDestroy() {
    this.editor.destroy();
  },
  methods: {
    bindHtml(html) {
      this.$emit('input', html);
    },
  },
};
</script>

<style>
.editor__content > .ProseMirror {
  min-height: 300px;
}
.ProseMirror:focus {
  outline: unset;
}
.editor__content {
  font-family: Inter;
  font-size: 18px;
  color: #000;
  line-height: 1.5;
}
.ProseMirror  h1 {
  font-size: 2em !important;
  font-weight: bold !important;
}
.ProseMirror  h2 {
  font-size: 1.5em !important;
  font-weight: bold !important;
}
.ProseMirror  h3 {
  font-size: 1.17em !important;
  font-weight: bold !important;
}
.ProseMirror  ul {
  display: block;
  list-style-type: disc;
  margin: 1rem 0;
  padding-left: 1.5rem;
}
.ProseMirror  ol {
  display: block;
  list-style-type: decimal;
  margin: 1rem 0;
  padding-left: 1.5rem;
}
.ProseMirror  blockquote {
  display: block;
  margin-top: 1rem;
  margin-left: 0.5rem;
  border-left: 3px solid rgba(0,0,0,0.1);
  color: rgba(0,0,0,.8);
  padding-left: 0.5rem;
  font-style: italic;
}
.ProseMirror pre {
  margin: 1rem 0;
  padding: .7rem 1rem;
  border-radius: 5px;
  background: #000;
  color: #fff;
  font-size: .8rem;
  overflow-x: auto;
  white-space: pre-wrap;
  font-family: monospace;
}
.ProseMirror hr {
  background-color: lightgrey;
}
.ProseMirror .tableWrapper {
  margin: 1em 0;
  overflow-x: auto;
}
.ProseMirror table {
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
  margin: 0;
  overflow: hidden;
}
.ProseMirror table td {
  min-width: 1em;
  border: 2px solid #ddd;
  padding: 3px 5px;
  vertical-align: top;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  position: relative;
}
.ProseMirror .column-resize-handle {
  position: absolute;
  right: -2px; top: 0; bottom: 0;
  width: 4px;
  z-index: 20;
  background-color: #adf;
  pointer-events: none;
}
.ProseMirror.resize-cursor {
  cursor: ew-resize;
  cursor: col-resize;
}
.ProseMirror p code {
  padding: .2rem .4rem;
  border-radius: 5px;
  font-size: .8rem;
  font-weight: 700;
  background: rgba(0,0,0,.1);
  color: rgba(0,0,0,.8);
}
.editor__content table .selectedCell:after {
  z-index: 2;
  position: absolute;
  content: "";
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: rgba(200,200,255,.4);
  pointer-events: none;
}
</style>
