<template>
  <div class="el-tiptap-editor__wrapper">
    <el-tiptap
      :content="value"
      :extensions="extensions"
      :char-counter-count="false"
      :readonly="readonly"
      :show-menubar="!readonly"
      :editor-properties="{ autoFocus: true }"
      @onUpdate="onEditorUpdate"
    />
  </div>
</template>

<script>
import {
  Doc,
  Text,
  Paragraph,
  Heading,
  Bold,
  Underline,
  Italic,
  Strike,
  ListItem,
  BulletList,
  OrderedList,
  Link,
  Image,
  Table,
  TableHeader,
  TableCell,
  TableRow,
  TextAlign,
  LineHeight,
  Indent,
  History,
  TextColor,
  TextHighlight,
  FormatClear,
  FontType,
  FontSize,
  Print,
  HorizontalRule,
  HardBreak,
  TrailingNode,
  CodeBlock,
  Blockquote,
} from 'element-tiptap';

export default {
  props: {
    value: {
      type: String,
      default: '',
    },
    readonly: Boolean,
  },
  data() {
    return {
      extensions: [
        new Doc(),
        new Text(),
        new FontType({
          fontTypes: {
            dotum: '돋움',
            gulim: '굴림',
            batang: '바탕',
            gungsuh: '궁서',
            malgunGothic: '맑은 고딕',
            nanumGothic: '나눔 고딕',
            nanumMyeongjo: '나눔 명조',
            nanumSquare: '나눔 스퀘어',
            arial: 'Arial',
            tahoma: 'Tahoma',
            timesNewRoman: 'Times New Roman',
            verdana: 'Verdana',
            courierNew: 'Courier New',
            monospace: 'monospace',
          },
        }),
        new FontSize(),
        new Bold(),
        new Underline(),
        new Italic(),
        new Strike(),
        new Paragraph(),
        new Heading({ level: 3 }),
        new TextColor(),
        new TextHighlight(),
        new TextAlign(),
        new Indent(),
        new LineHeight(),
        new ListItem(),
        new BulletList(),
        new OrderedList(),
        new FormatClear(),
        new Link(),
        new Image(),
        new Table({
          resizable: true,
        }),
        new TableHeader(),
        new TableCell(),
        new TableRow(),
        new HorizontalRule(),
        new HardBreak(),
        new TrailingNode(),
        new Print(),
        new History(),
        new CodeBlock({ menubar: false }),
        new Blockquote({ menubar: false }),
      ],
    };
  },
  methods: {
    onEditorUpdate(html) {
      this.$emit('input', html);
    },
  },
};
</script>
<style lang="scss">
@import '~element-tiptap/lib/index.css';
.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;
}
.el-tiptap-editor__wrapper {
  border: 1px solid #ebeef5;
  border-radius: 8px;
}
.el-message-box__btns {
  display: flex;
  flex-direction: row-reverse;
}
.el-dialog__footer {
  padding: 10px 20px 20px;
  text-align: right;
  box-sizing: border-box;
  display: flex;
  flex-direction: row-reverse;
}
.el-message-box__btns button:nth-child(2) {
  margin-right: 10px;
}
.el-dialog__footer button:nth-child(2) {
  margin-right: 10px;
}
.el-tiptap-editor__content td, .el-tiptap-editor__content th {
  border: 2px solid #ebeef5 !important;
  box-sizing: border-box;
  min-width: 1em;
  padding: 3px 5px;
  position: relative;
  vertical-align: top;
}
.el-tiptap-editor__content a {
  color: #af191e !important;
  cursor: pointer;
  text-decoration: none;
}
.link-bubble-menu div:nth-child(2) {
  display: none;
}
</style>
