mdlook/apps/web/src/components/editor/editor-header/InsertDropdown.vue at main · ghzhost/mdlook · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<script setup lang="ts">
import { Blocks, Image, Table } from '@lucide/vue'
import { useEditorStore } from '@/stores/editor'
import { useUIStore } from '@/stores/ui'
import { normalizeFormulaInput } from '@/utils/formula'

const props = withDefaults(defineProps<{
  asSub?: boolean
}>(), {
  asSub: false,
})

const { asSub } = toRefs(props)
const uiStore = useUIStore()
const editorStore = useEditorStore()

const { toggleShowInsertFormDialog, toggleShowUploadImgDialog, toggleShowComponentDialog } = uiStore

function openFormulaEditor() {
  const selection = normalizeFormulaInput(editorStore.getSelection())
  uiStore.openFormulaEditor({
    value: selection.latex,
    displayMode: selection.displayMode,
  })
}
</script>

<template>
  <!-- 作为 MenubarSub 使用 -->
  <MenubarSub v-if="asSub">
    <MenubarSubTrigger>
      插入
    </MenubarSubTrigger>
    <MenubarSubContent class="w-52">
      <MenubarItem @click="toggleShowUploadImgDialog()">
        <Image class="mr-2 h-4 w-4" />
        图片
      </MenubarItem>
      <MenubarItem @click="openFormulaEditor()">
        <span class="mr-2 inline-flex h-4 w-4 items-center justify-center text-xs font-semibold">ƒ</span>
        公式
      </MenubarItem>
      <MenubarItem @click="toggleShowInsertFormDialog()">
        <Table class="mr-2 h-4 w-4" />
        表格
      </MenubarItem>
      <MenubarItem @click="toggleShowComponentDialog()">
        <Blocks class="mr-2 h-4 w-4" />
        组件
      </MenubarItem>
    </MenubarSubContent>
  </MenubarSub>

  <!-- 作为 MenubarMenu 使用（默认） -->
  <MenubarMenu v-else>
    <MenubarTrigger>
      插入
    </MenubarTrigger>
    <MenubarContent class="w-52" align="start">
      <MenubarItem @click="toggleShowUploadImgDialog()">
        <Image class="mr-2 h-4 w-4" />
        图片
      </MenubarItem>
      <MenubarItem @click="openFormulaEditor()">
        <span class="mr-2 inline-flex h-4 w-4 items-center justify-center text-xs font-semibold">ƒ</span>
        公式
      </MenubarItem>
      <MenubarItem @click="toggleShowInsertFormDialog()">
        <Table class="mr-2 h-4 w-4" />
        表格
      </MenubarItem>
      <MenubarItem @click="toggleShowComponentDialog()">
        <Blocks class="mr-2 h-4 w-4" />
        组件
      </MenubarItem>
    </MenubarContent>
  </MenubarMenu>
</template>