adtec-core-package 3.0.0 → 3.0.1

package/src/components/editor-main/src/components/menus/toolbar/tools/math.vue

@@ -0,0 +1,339 @@
+<template>
+  <menus-button
+    ico="math"
+    :text="t('tools.math.text')"
+    huge
+    @menu-click="dialogVisible = true"
+  >
+    <modal
+      :visible="dialogVisible"
+      icon="math"
+      width="734px"
+      :confirm-btn="{
+        disabled: latexValue === '',
+      }"
+      destroy-on-close
+      @cancel="dialogVisible = false"
+      @close="dialogVisible = false"
+    >
+      <template #header>
+        <icon name="math" />
+        {{ props.latex === '' ? t('tools.math.insert') : t('tools.math.edit') }}
+      </template>
+      <div ref="containerRef" class="umo-math-container">
+        <div class="umo-math-input">
+          <t-textarea
+            v-model.trim="latexValue"
+            :autosize="{ minRows: 3, maxRows: 6 }"
+            :placeholder="t('tools.math.placeholder')"
+            @change="previewMath"
+          />
+          <div class="umo-math-input-preview umo-scrollbar">
+            <div v-if="latexValue !== ''" class="umo-math-input-render"></div>
+            <div v-else class="umo-math-input-preview-empty">
+              {{ t('tools.math.preview') }}
+            </div>
+          </div>
+        </div>
+        <div class="umo-math-select">
+          <div
+            v-for="(item, index) in templates"
+            v-show="latexLoaded"
+            :key="index"
+            class="umo-math-select-item"
+            @click="selectMath(item)"
+          >
+            {{ item }}
+          </div>
+          <div v-if="!latexLoaded" class="umo-math-select-loading">
+            {{ t('tools.math.template') }}
+          </div>
+        </div>
+      </div>
+      <template #footer>
+        <div class="umo-math-footer">
+          <t-button
+            theme="default"
+            variant="base"
+            @click="dialogVisible = false"
+          >
+            {{ t('tools.math.cancel') }}
+          </t-button>
+          <t-dropdown
+            v-if="props.latex === ''"
+            trigger="click"
+            :options="[
+              { content: t('tools.math.inline'), value: 'inline' },
+              { content: t('tools.math.block'), value: 'block' },
+            ]"
+            @click="insertMath"
+          >
+            <t-button :disabled="latexValue === ''">
+              {{ t('tools.math.confirm') }}
+            </t-button>
+          </t-dropdown>
+          <t-button v-else :disabled="latexValue === ''" @click="updateMath">
+            {{ t('tools.math.update') }}
+          </t-button>
+        </div>
+      </template>
+    </modal>
+  </menus-button>
+</template>
+
+<script setup>
+import { t } from '../../../../composables/i18n.js';
+import { ref as _ref } from 'vue';
+
+import { loadResource } from '../../../../utils/load-resource'
+
+
+import { inject, watch, nextTick } from 'vue';
+const props = defineProps({
+  type: {
+    type: String,
+    default: null,
+  },
+  latex: {
+    type: String,
+    default: '',
+  },
+})
+
+const editor = inject('editor')
+const options = inject('options')
+
+const templates = [
+  '\\times',
+  '\\div',
+  '\\pm',
+  '\\mp',
+  '\\cdot',
+  '\\star',
+  '\\neq',
+  '\\leq',
+  '\\sim',
+  '\\approx',
+  '\\cong',
+  '\\equiv',
+  '\\propto',
+  '\\ll',
+  '\\gg',
+  '\\in',
+  '\\subset',
+  '\\subseteq',
+  '\\prec',
+  '\\preceq',
+  '\\simeq',
+  '\\asymp',
+  '\\doteq',
+  '\\succ',
+  '\\succeq',
+  '\\sqsubseteq',
+  '\\sqsupseteq',
+  '\\ni',
+  '\\models',
+  '\\vdash',
+  '\\dashv',
+  '\\perp',
+  '\\mid',
+  '\\parallel',
+  '\\smile',
+  '\\frown',
+  '\\bowtie',
+  '\\unlhd',
+  '\\unrhd',
+  '\\sqrt{ab}',
+  '\\sqrt[n]{ab}',
+  '\\widetilde{ab}',
+  '\\widehat{ab}',
+  'a^{b}',
+  'c_a^b ',
+  '\\overleftarrow{ab}',
+  '\\overrightarrow{ab}',
+  '\\overbrace{ab}',
+  '\\underbrace{ab}',
+  '\\overline{ab}',
+  '\\underline{ab}',
+  'a_{b}',
+  '\\log_{a}{b}',
+  '\\lg{ab}',
+  '\\left(\\begin{array}{c}a\\\\ b\\end{array}\\right)',
+  '\\begin{bmatrix}a & b \\\\c & d \\end{bmatrix}',
+  '\\begin{cases}a & x = 0\\\\b & x > 0\\end{cases}',
+  '\\sin',
+  '\\cot',
+  '\\cos',
+  '\\csc',
+  '\\sec',
+  '\\tan',
+  '\\cosh',
+  '\\coth',
+  '\\sinh',
+  '\\tanh',
+  '\\arcsin',
+  '\\arctan',
+  '\\arccos',
+  '\\log',
+  '\\ln',
+  '\\inf',
+  '\\lim',
+  '\\det',
+  '\\ker',
+  '\\bmod',
+  '\\hom',
+  '\\gcd',
+  '\\min',
+  '\\max',
+  '\\exp',
+  '\\sup',
+]
+
+let dialogVisible = _ref(false)
+const containerRef = _ref()
+let latexLoaded = _ref(false)
+let latexValue = _ref('')
+
+const loadKatex = async () => {
+  const { cdnUrl } = options.value
+  await loadResource(
+    `${cdnUrl}/libs/katex/katex.min.js`,
+    'script',
+    'katex-script',
+  )
+  await loadResource(`${cdnUrl}/libs/katex/katex.min.css`, 'css', 'katex-style')
+  setTimeout(() => {
+    latexLoaded.value = true
+  }, 100)
+}
+
+watch(
+  () => dialogVisible.value,
+  async (visible) => {
+    if (visible) {
+      await loadKatex()
+      setTimeout(() => {
+        renderMath('templates')
+      }, 100)
+      if (props.latex !== '') {
+        const { latex } = props
+        latexValue.value = latex
+        previewMath()
+      }
+    } else {
+      latexValue.value = ''
+    }
+  },
+)
+
+const renderMath = async (type) => {
+  await nextTick()
+  const render = (text, el) =>
+    katex.render(text, el, {
+      throwOnError: false,
+      output: 'mathml',
+    })
+  if (type === 'templates') {
+    containerRef.value.querySelectorAll('.umo-math-select-item').forEach((el) => {
+      render(el.textContent, el)
+    })
+  }
+  if (type === 'preview' && latexValue.value !== '') {
+    await nextTick()
+    const el = containerRef.value.querySelector('.umo-math-input-render')
+    render(latexValue.value, el)
+  }
+}
+
+const selectMath = (value) => {
+  latexValue.value = latexValue.value === '' ? value : `${latexValue.value} ${value}`
+  previewMath()
+}
+
+const previewMath = () => {
+  renderMath('preview')
+}
+
+const insertMath = ({ value }) => {
+  if (value === 'inline') {
+    editor.value?.chain().focus().insertInlineMath({ latex: latexValue.value }).run()
+  }
+  if (value === 'block') {
+    editor.value?.chain().focus().insertBlockMath({ latex: latexValue.value }).run()
+  }
+  dialogVisible.value = false
+}
+
+const updateMath = () => {
+  if (props.latex !== '') {
+    editor.value?.chain().focus().deleteSelectionNode().run()
+  }
+  insertMath({ value: props.type })
+}
+</script>
+
+<style lang="less" scoped>
+.umo-math {
+  &-container {
+    width: 680px;
+    display: flex;
+    gap: 10px;
+    padding: 2px;
+  }
+  &-footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: 10px;
+    padding: 0 2px;
+  }
+  &-input {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    width: 350px;
+    &-preview {
+      flex: 1;
+      padding: 10px;
+      border: solid 1px var(--td-border-level-2-color);
+      border-radius: var(--umo-radius);
+      &-empty {
+        display: flex;
+        height: 100%;
+        align-items: center;
+        justify-content: center;
+        color: var(--umo-text-color-light);
+      }
+    }
+  }
+  &-select {
+    flex-shrink: 0;
+    width: 330px;
+    border: solid 1px var(--td-border-level-2-color);
+    border-radius: var(--umo-radius);
+    padding: 10px;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    box-sizing: border-box;
+    align-items: center;
+    height: 380px;
+    color: var(--umo-text-color-light);
+    &-item {
+      flex-grow: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      border-radius: var(--umo-radius);
+      padding: 5px;
+      min-height: 1em;
+      gap: 5px;
+      user-select: none;
+      &:hover {
+        background-color: var(--umo-button-hover-background);
+      }
+    }
+  }
+}
+</style>

package/src/components/editor-main/src/components/menus/toolbar/tools/mermaid.vue

@@ -0,0 +1,293 @@
+<template>
+  <menus-button
+    :ico="content ? 'edit' : 'mermaid'"
+    :text="content ? t('tools.mermaid.edit') : t('tools.mermaid.text')"
+    huge
+    @menu-click="dialogVisible = true"
+  >
+    <modal
+      :visible="dialogVisible"
+      icon="mermaid"
+      width="960px"
+      @confirm="setMermaid"
+      @close="dialogVisible = false"
+    >
+      <template #header>
+        <icon name="mermaid" />
+        {{ content ? t('tools.mermaid.edit') : t('tools.mermaid.text') }}
+      </template>
+      <div class="umo-mermaid-container">
+        <div class="umo-mermaid-editor">
+          <div class="umo-mermaid-toolbar">
+            <menus-button
+              style="width: 100px"
+              menu-type="select"
+              :text="t('tools.mermaid.theme')"
+              :select-options="themes"
+              :select-value="localConfig.theme"
+              @menu-click="(value) => (localConfig.theme = value)"
+            />
+            <menus-button
+              ico="copy"
+              :tooltip="t('tools.mermaid.copy')"
+              hide-text
+              @menu-click="copyCode"
+            />
+            <menus-button
+              ico="node-delete"
+              :tooltip="t('tools.mermaid.clear')"
+              hide-text
+              @menu-click="mermaidCode = ''"
+            />
+          </div>
+          <t-textarea
+            v-model="mermaidCode"
+            class="umo-mermaid-code"
+            autofocus
+            :placeholder="t('tools.mermaid.placeholder')"
+          />
+        </div>
+        <div class="umo-mermaid-render">
+          <div
+            class="umo-mermaid-title"
+            v-text="t('tools.mermaid.preview')"
+          ></div>
+          <div class="umo-mermaid-error" v-if="errorTxt">{{ errorTxt }}</div>
+          <div
+            v-else
+            ref="mermaidRef"
+            class="umo-mermaid-svg umo-scrollbar"
+            v-html="svgCode"
+          ></div>
+        </div>
+      </div>
+      <t-checkbox
+        class="umo-mermaid-keep-size"
+        v-if="content && content !== ''"
+        v-model="keepSize"
+      >
+        {{ t('tools.mermaid.keepSize') }}
+      </t-checkbox>
+    </modal>
+  </menus-button>
+</template>
+
+<script setup>
+import { t } from '../../../../composables/i18n.js';
+import { ref as _ref } from 'vue';
+
+import { getSelectionNode } from '../../../../utils/selection'
+import { shortId } from '../../../../utils/short-id'
+import { svgToDataURL } from '../../../../utils/file'
+
+
+import { inject, watch, nextTick } from 'vue';
+const props = defineProps({
+  config: {
+    type: Object,
+    default: () => ({
+      theme: 'default',
+    }),
+  },
+  content: {
+    type: String,
+    default: undefined,
+  },
+})
+
+const editor = inject('editor')
+const container = inject('container')
+
+let dialogVisible = _ref(false)
+
+// 工具栏
+const themes = [
+  { label: t('tools.mermaid.themes.default'), value: 'default' },
+  { label: t('tools.mermaid.themes.base'), value: 'base' },
+  { label: t('tools.mermaid.themes.dark'), value: 'dark' },
+  { label: t('tools.mermaid.themes.forest'), value: 'forest' },
+  { label: t('tools.mermaid.themes.neutral'), value: 'neutral' },
+]
+let localConfig = _ref({})
+
+const copyCode = () => {
+  useCopy(mermaidCode.value, t('tools.mermaid.copied'), container)
+}
+
+// 初始化 Mermaid
+const mermaidInit = () => {
+  const { mermaid } = window
+  if (!mermaid) return
+  mermaid.initialize({
+    darkMode: false,
+    startOnLoad: false,
+    fontSize: 12,
+    securityLevel: 'loose',
+    ...localConfig.value,
+  })
+}
+
+// 渲染 Mermaid
+let mermaidCode = _ref(props.content || '')
+let svgCode = _ref('')
+let errorTxt = _ref('')
+const mermaidRef = _ref(null)
+
+const renderMermaid = async () => {
+  const { mermaid } = window
+
+  if (!mermaid) {
+    svgCode.value = ''
+    errorTxt.value = t('tools.mermaid.notLoaded')
+    return
+  }
+
+  if (!mermaidCode.value || mermaidCode.value.trim() === '') {
+    svgCode.value = ''
+    errorTxt.value = t('tools.mermaid.codeEmpty')
+    return
+  }
+
+  const renderId = `mermaid-svg-${shortId(8)}`
+
+  try {
+    const { svg } = await mermaid.render(renderId, mermaidCode.value)
+    svgCode.value = svg
+    errorTxt.value = ''
+  } catch (err) {
+    svgCode.value = ''
+    errorTxt.value = t('tools.mermaid.renderError')
+  }
+}
+
+watch(
+  () => dialogVisible.value,
+  async (visible) => {
+    if (visible) {
+      localConfig.value = { ...props.config }
+      mermaidCode.value = props.content || 'graph TB\na-->b'
+      await nextTick()
+      mermaidInit()
+      renderMermaid()
+    }
+  },
+  { immediate: true },
+)
+
+watch(
+  () => [localConfig.value.theme, mermaidCode.value],
+  async () => {
+    if (!dialogVisible.value || !mermaidCode.value || mermaidCode.value === '') return
+    await nextTick()
+    mermaidInit()
+    renderMermaid()
+  },
+)
+
+// 创建或更新 Mermaid
+const keepSize = _ref(false)
+const setMermaid = () => {
+  if (mermaidCode.value === '') {
+    useMessage('error', {
+      attach: container,
+      content: t('tools.mermaid.notEmpty'),
+    })
+    return
+  }
+
+  if (!props.content || (props.content && props.content !== mermaidCode.value)) {
+    const svg = mermaidRef.value?.querySelector('svg')
+
+    if (!svg) {
+      return
+    }
+
+    if (errorTxt.value) {
+      useMessage('error', {
+        attach: container,
+        content: t('tools.mermaid.renderError'),
+      })
+      return
+    }
+
+    const { width, height } = svg.getBoundingClientRect()
+    const { attrs } = getSelectionNode(editor.value) || {}
+
+    const imageOptions = {
+      id: shortId(10),
+      type: 'mermaid',
+      src: svgToDataURL(svgCode.value),
+      config: JSON.stringify(localConfig.value),
+      content: mermaidCode.value,
+      width: keepSize.value ? attrs?.width || width : width,
+      height: keepSize.value ? attrs?.height || height : height,
+      equalProportion: false,
+    }
+
+    editor.value?.chain().focus().setImage(imageOptions, !!props.content).run()
+  }
+
+  dialogVisible.value = false
+}
+</script>
+
+<style lang="less" scoped>
+.umo-mermaid-container {
+  display: flex;
+  .umo-mermaid-editor {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+  }
+  .umo-mermaid-toolbar {
+    display: flex;
+    align-items: center;
+    padding: 2px;
+  }
+  .umo-mermaid-code {
+    width: 320px;
+    margin-left: 2px;
+    flex: 1;
+    :deep(.umo-textarea__inner) {
+      height: 100%;
+      resize: none;
+    }
+  }
+  .umo-mermaid-render {
+    flex: 1;
+    margin-left: 20px;
+    border: solid 1px var(--td-border-level-2-color);
+    border-radius: var(--umo-radius);
+    position: relative;
+    overflow: hidden;
+    box-sizing: border-box;
+    .umo-mermaid-title {
+      background-color: var(--umo-button-hover-background);
+      padding: 0 10px;
+      position: absolute;
+      font-size: 12px;
+      border-bottom-right-radius: var(--umo-radius);
+    }
+    .umo-mermaid-error {
+      height: 320px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      color: var(--umo-text-color-light);
+      font-size: 12px;
+    }
+    .umo-mermaid-svg {
+      box-sizing: border-box;
+      height: 320px;
+      padding: 40px 20px 20px;
+      overflow: auto;
+      display: flex;
+      justify-content: center;
+    }
+  }
+}
+.umo-mermaid-keep-size {
+  position: absolute;
+  bottom: 30px;
+}
+</style>

package/src/components/editor-main/src/components/menus/toolbar/tools/mind-map.vue

@@ -0,0 +1,7 @@
+<template>
+  <menus-button ico="mind-map" :text="t('tools.mindMap')" huge />
+</template>
+
+<script setup>
+import { t } from '../../../../composables/i18n.js';
+</script>