feat：数学公式弹框 (#23)

src/components/tiptap/components/HbTiptapMath.vue

@@ -0,0 +1,202 @@
+<script setup>
+import { NModal, NButton, NCard, NPopover, NGrid, NGridItem, NSpace } from 'naive-ui'
+import 'katex/dist/katex.css'
+import katex from 'katex'
+import {ref, watch} from "vue";
+
+const showModal = ref(false)
+
+const tex = ref('')
+
+const TEXAREA = ref(null)
+
+function addTex(val) {
+  const indexStart = TEXAREA.value.selectionStart
+  const indexEnd = TEXAREA.value.selectionEnd
+  tex.value = tex.value.substr(0, indexStart) + val  + tex.value.substr(indexEnd, tex.value.length)
+}
+
+watch(tex, () => {
+  init()
+})
+
+const box = ref(null)
+
+function init(){
+  if (tex.value) {
+    katex.render(tex.value, box.value, {
+      throwOnError: false
+    })
+  }
+}
+
+const letters = ref({
+  'α': '\\alpha',
+  'β': '\\beta',
+  'γ': '\\gamma',
+  'δ': '\\delta',
+  'ϵ': '\\epsilon',
+  'ζ': '\\zeta',
+  'η': '\\eta',
+  'θ': '\\theta',
+  'ι': '\\iota',
+  'κ': '\\kappa',
+  'λ': '\\lambda',
+  'μ': '\\mu',
+  'ν': '\\nu',
+  'ξ': '\\xi',
+  'ο': '\\omicron',
+  'π': '\\pi',
+  'ρ': '\\rho',
+  'σ': '\\sigma',
+  'τ': '\\tau',
+  'υ': '\\upsilon',
+  'ϕ': '\\phi',
+  'χ': '\\chi',
+  'ψ': '\\psi',
+  'ω': '\\omega',
+  'ε': '\\varepsilon',
+  'ϰ': '\\varkappa',
+  'ϑ': '\\vartheta',
+  'ϖ': '\\varpi',
+  'ϱ': '\\varrho',
+  'ς': '\\varsigma',
+  'φ': '\\varphi',
+  'ϝ': '\\digamma',
+})
+const logic = ref({
+  '×': '\\times',
+  '÷': '\\div',
+  '≈': '\\approx',
+  '≪': '\\ll',
+  '≫': '\\gg',
+  '≂': '\\eqsim',
+  '⪖': '\\eqslantgtr',
+  '⪕': '\\eqslantless',
+  '⊕': '\\oplus',
+  '±': '\\pm',
+  '∙': '\\bullet',
+  '∀': '\\forall',
+  '∁': '\\complement',
+  '∴': '\\therefore',
+  '∅': '\\varnothing',
+  '∃': '\\exists',
+  '⊂': '\\subset',
+  '∵': '\\because',
+  '⊃': '\\supset',
+  '↦': '\\mapsto',
+  '∄': '\\nexists',
+  '∣': '\\mid',
+  '→': '\\to',
+  '⟹': '\\implies',
+  '∈': '\\in',
+  '∧': '\\land',
+  '←': '\\gets',
+  '⟸': '\\impliedby',
+  '∨': '\\lor',
+  '↔': '\\leftrightarrow',
+  '⟺': '\\iff',
+  '∋': '\\ni',
+  '¬': '\\neg',
+})
+
+function open(val = '') {
+  showModal.value = true
+  tex.value = val
+}
+
+const emit = defineEmits(['ok'])
+
+function onOk() {
+  showModal.value = false
+  emit('ok', tex.value)
+}
+
+function onCancel() {
+  showModal.value = false
+}
+
+defineExpose({open})
+
+</script>
+
+<template>
+  <n-modal v-model:show="showModal" preset="card" style="width: 500px">
+    <template #header>
+      <div>插入公式</div>
+    </template>
+    <div>
+      <div>
+        <n-popover>
+          <template #trigger>
+            <n-button>希腊字母</n-button>
+          </template>
+          <div style="width: 300px;height: 100px;">
+            <n-grid :y-gap="5" :cols="12">
+              <n-grid-item class="item-hover" v-for="(val, key, i) in letters" @click="addTex(val)">
+                {{ key }}
+              </n-grid-item>
+            </n-grid>
+          </div>
+        </n-popover>
+        <n-popover>
+          <template #trigger>
+            <n-button>逻辑符号</n-button>
+          </template>
+          <div style="width: 300px;height: 100px;">
+            <n-grid :y-gap="5" :cols="12">
+              <n-grid-item class="item-hover" v-for="(val, key, i) in logic" @click="addTex(val)">
+                {{ key }}
+              </n-grid-item>
+            </n-grid>
+          </div>
+        </n-popover>
+      </div>
+      <div class="texbox">
+        <textarea ref="TEXAREA" v-model="tex" class="texarea" placeholder="输入TeX公式" />
+      </div>
+      <div class="preview">
+        <p ref="box">预览</p>
+      </div>
+    </div>
+    <template #footer>
+      <n-space justify="end">
+        <n-button @click="onCancel">取消</n-button>
+        <n-button type="info" @click="onOk">确定</n-button>
+      </n-space>
+    </template>
+  </n-modal>
+</template>
+
+<style scoped>
+.item-hover{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 3px;
+  cursor: pointer;
+  font-size: 17px;
+}
+.item-hover:hover{
+  background-color: #F6F6F6;
+}
+.texbox{
+  padding: 10px;
+  box-sizing: border-box;
+  border: 1px solid #aaa;
+  border-radius: 3px;
+}
+.texarea{
+  width: 100%;
+  height: 100px;
+  border: none;
+  outline: none;
+  resize: none;
+}
+.preview{
+  padding: 10px;
+  box-sizing: border-box;
+  border: 2px dotted #aaa;
+  margin-top: 10px;
+}
+</style>

src/components/tiptap/components/HbTiptapMenuBar.vue

@@ -6,6 +6,7 @@ import HbTiptapColorPicker from "@/components/tiptap/components/HbTiptapColorPic
 import HbTiptapLink from '@/components/tiptap/components/HbTiptapLink'
 import HbTiptapImage from '@/components/tiptap/components/HbTiptapImage'
 import HbTiptapVideo from '@/components/tiptap/components/HbTiptapVideo'
+import HbTiptapMath from '@/components/tiptap/components/HbTiptapMath'
 import {ref} from "vue";
 import {useThemeVars} from 'naive-ui'
 const vars = useThemeVars()
@@ -68,6 +69,17 @@ function insertVideo(url) {
   }
 }
 
+const HTM = ref(null)
+
+function handleOpenMath() {
+  let val = ''
+  HTM.value.open(val)
+}
+
+function setMath(val) {
+  props.editor.chain().focus().setHbMath({tex: val}).run()
+}
+
 function toggleFullscreen(){
   props.editor.storage.fullscreen.value = !props.editor.storage.fullscreen.value
 }
@@ -205,9 +217,10 @@ function toggleFullscreen(){
                          :is-active="() => props.editor.isActive('codeBlock')"
     />
     <hb-tiptap-menu-item icon="functions" title="数学公式"
-                         :action="() => props.editor.chain().focus().setHbMath({tex:`\\displaystyle \\left( \\sum_{k=1}^n a_k b_k \\right)^2 \\leq \\left( \\sum_{k=1}^n a_k^2 \\right) \\left( \\sum_{k=1}^n b_k^2 \\right)`}).run()"
+                         :action="handleOpenMath"
                          :is-active="() => props.editor.isActive('hb-math')"
     />
+    <hb-tiptap-math ref="HTM" @ok="setMath"/>
     <div class="divider"/>
     <n-popover trigger="hover" placement="bottom" :show-arrow="false">
       <template #trigger>