<template>
  <properties-card title="Text editor">
    <vue-editor v-model="widgetData.html"></vue-editor>

    <v-divider class="ma-6" />

    <v-select
      :items="fontFamily"
      v-model="widgetData.style.fontFamily"
      label="Font Family"
      outlined
      dense
    ></v-select>
  </properties-card>
</template>

<script>
import PropertiesCard from "@/components/properties/components/PropertiesCard";
import { VueEditor } from "vue2-editor";

export default {
  components: {
    PropertiesCard,
    VueEditor,
  },
  props: {
    widgetData: Object,
  },
  created() {
    this.$emit("visible");
  },
  data: () => ({
    fontFamily: [
      {
        value: "Montserrat, sans-serif",
        text: "Montserrat",
      },
      {
        value: "courier-prime, monospace",
        text: "Courier-prime",
      },
      {
        value: "open-sans, sans-serif",
        text: "Open-sans",
      },
    ],
  }),
};
</script>
