<template>
  <div class="edit-menus" style="display: flex; gap: 10px;">
    <!-- 由于v-model会re-render，这里无法redo了 -->
    <img
      class="intLink"
      title="撤销"
      @click="execCommand('undo')"
      src="data:image/gif;base64,R0lGODlhFgAWAOMKADljwliE33mOrpGjuYKl8aezxqPD+7/I19DV3NHa7P///////////////////////yH5BAEKAA8ALAAAAAAWABYAAARR8MlJq7046807TkaYeJJBnES4EeUJvIGapWYAC0CsocQ7SDlWJkAkCA6ToMYWIARGQF3mRQVIEjkkSVLIbSfEwhdRIH4fh/DZMICe3/C4nBQBADs="
    />
    <img
      class="intLink"
      title="取消撤销"
      onclick="execCommand('redo');"
      src="data:image/gif;base64,R0lGODlhFgAWAMIHAB1ChDljwl9vj1iE34Kl8aPD+7/I1////yH5BAEKAAcALAAAAAAWABYAAANKeLrc/jDKSesyphi7SiEgsVXZEATDICqBVJjpqWZt9NaEDNbQK1wCQsxlYnxMAImhyDoFAElJasRRvAZVRqqQXUy7Cgx4TC6bswkAOw=="
    />
    <img
      class="intLink"
      title="加粗"
      @click="execCommand('bold')"
      src="data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAInhI+pa+H9mJy0LhdgtrxzDG5WGFVk6aXqyk6Y9kXvKKNuLbb6zgMFADs="
    />
    <img
      class="intLink"
      title="斜体"
      @click="execCommand('italic')"
      src="data:image/gif;base64,R0lGODlhFgAWAKEDAAAAAF9vj5WIbf///yH5BAEAAAMALAAAAAAWABYAAAIjnI+py+0Po5x0gXvruEKHrF2BB1YiCWgbMFIYpsbyTNd2UwAAOw=="
    />
    <img
      class="intLink"
      title="下划线"
      @click="execCommand('underline')"
      src="data:image/gif;base64,R0lGODlhFgAWAKECAAAAAF9vj////////yH5BAEAAAIALAAAAAAWABYAAAIrlI+py+0Po5zUgAsEzvEeL4Ea15EiJJ5PSqJmuwKBEKgxVuXWtun+DwxCCgA7"
    />
    <!-- <span class="intLink" title="显示源码" @click="setDocMode('HTML')">
      &lt;/&gt;
    </span> -->
    <span class="intLink" @click="setDocMode('JSON')" title="to JSON">{ }</span>
  </div>
</template>

<script>
import { setDocMode } from "../changeMode";

export default {
  name: "VMenu",
  methods: {
    setDocMode(type) {
      setDocMode(type, this.$parent.$refs.editor);
    },
    execCommand(command) {
      document.execCommand(command);
    },
  },
};
</script>

<style>
.intLink {
  cursor: default;
}
</style>
