<template>
  <div class="ws-state-editor">
    <tiptap-vuetify
      :value="value"
      @input="$emit('input',$event)"
      :extensions="extensions"
      :placeholder="placeholder"
    />
  </div>
</template>

<script>
import {
  TiptapVuetify,
  Heading,
  Bold,
  Italic,
  Strike,
  Underline,
  Code,
  Paragraph,
  BulletList,
  OrderedList,
  ListItem,
  Link,
  Blockquote,
  HardBreak,
  HorizontalRule,
  History,
  Image,
  TodoList,
  TodoItem,
  Table,
  TableCell,
  TableHeader,
  TableRow
} from "tiptap-vuetify";

export default {
  components: { TiptapVuetify },
  props: {
    placeholder: {
      type: String,
      default: "輸入..."
    },
    value: {
      type: String,
      default: ""
    }
  },
  data: () => ({
    extensions: [
      History,
      Table,
      TableCell,
      TableHeader,
      TableRow,
      Blockquote,
      Link,
      Underline,
      Strike,
      Italic,
      ListItem,
      BulletList,
      OrderedList,
      Image,
      [
        Heading,
        {
          options: {
            levels: [1, 2, 3]
          }
        }
      ],
      Bold,
      Link,
      Code,
      HorizontalRule,
      TodoList,
      [
        TodoItem,
        {
          options: {
            nested: true
          }
        }
      ],
      Paragraph,
      HardBreak
    ],
    content: ""
  })
};
</script>