<template>
  <div class="editor">
    <div v-if="editor" class="options">
      <button
        v-if="options.includes('bold')"
        @click="editor.chain().focus().toggleBold().run()"
        :class="{ 'is-active': editor.isActive('bold') }"
      >
        <svg-inline path="assets/icons/editor/bold.svg" />
      </button>

      <button
        v-if="options.includes('italic')"
        @click="editor.chain().focus().toggleItalic().run()"
        :class="{ 'is-active': editor.isActive('italic') }"
      >
        <svg-inline path="assets/icons/editor/italic.svg" />
      </button>

      <button
        v-if="options.includes('underline')"
        @click="editor.chain().focus().toggleUnderline().run()"
        :class="{ 'is-active': editor.isActive('underline') }"
      >
        <svg-inline path="assets/icons/editor/underline.svg" />
      </button>

      <button
        v-if="options.includes('link') && !editor.isActive('link')"
        @click="setLink"
      >
        <svg-inline path="assets/icons/editor/link.svg" />
      </button>

      <button
        v-if="options.includes('link') && editor.isActive('link')"
        @click="editor.chain().focus().unsetLink().run()"
        class="active"
      >
        <SvgInline path="assets/icons/editor/link.svg" />
      </button>

      <button
        v-if="options.includes('list') && !editor.isActive('link')"
        @click="editor.chain().focus().toggleBulletList().run()"
        :class="{ 'is-active': editor.isActive('bulletList') }"
      >
        <SvgInline path="assets/icons/editor/list.svg" />
      </button>

      <button @click="editor.chain().focus().undo().run()">
        <SvgInline path="assets/icons/editor/undo.svg" />
      </button>

      <button @click="editor.chain().focus().redo().run()">
        <SvgInline path="assets/icons/editor/redo.svg" />
      </button>
    </div>
    <editor-content class="content" :editor="editor" />
  </div>
</template>

<script>
import StarterKit from "@tiptap/starter-kit";
import { Editor, EditorContent } from "@tiptap/vue-3";
import SvgInline from "@/helpers/SvgInline";
import Underline from "@tiptap/extension-underline";
import { Link } from "@tiptap/extension-link";
import BulletList from "@tiptap/extension-bullet-list";

export default {
  name: "InputRichText",
  components: {
    SvgInline,
    EditorContent,
  },
  props: {
    value: { type: String, required: false, default: "" },
    // eslint-disable-next-line vue/require-valid-default-prop
    options: { type: Array, required: false, default: ["bold"] },
  },
  data() {
    return {
      editor: null,
    };
  },
  watch: {
    value(value) {
      const isSame = this.editor.getHTML() === value;
      if (isSame) {
        return;
      }

      this.editor.commands.setContent(value, false);
    },
  },
  mounted() {
    this.editor = new Editor({
      extensions: [StarterKit, Underline, Link, BulletList],
      content: this.value,
      onUpdate: () => {
        this.$emit("input", this.editor.getHTML());
      },
    });
  },
  beforeUnmount() {
    this.editor.destroy();
  },
  methods: {
    setContent(content) {
      this.editor.commands.setContent(content, false);
    },

    setLink() {
      const previousUrl = this.editor.getAttributes("link").href;
      const url = window.prompt("URL", previousUrl);

      // cancelled
      if (url === null) {
        return;
      }

      // empty
      if (url === "") {
        this.editor.chain().focus().extendMarkRange("link").unsetLink().run();

        return;
      }

      // update link
      this.editor
        .chain()
        .focus()
        .extendMarkRange("link")
        .setLink({ href: url })
        .run();
    },
  },
};
</script>
