adtec-core-package 2.9.9 → 3.0.1

package/src/components/editor-main/src/components/menus/toolbar/base/font-family.vue

@@ -0,0 +1,528 @@
+<template>
+  <menus-button
+    :text="t('base.fontFamily.text')"
+    :placeholder="t('base.fontFamily.text')"
+    menu-type="select"
+    hide-text
+    :select-value="selectedFont"
+    :style="{ width: $toolbar.mode !== 'classic' ? '143px' : '90px' }"
+    filterable
+    :disabled="!editor?.can().chain().focus().setFontFamily().run()"
+    @menu-click="setFontFamily"
+  >
+    <t-option-group
+      v-for="(group, index) in allFonts"
+      :key="index"
+      :label="group.label"
+      :divider="false"
+    >
+      <t-option
+        v-for="item in group.children"
+        :key="item.value"
+        class="umo-font-family-item"
+        :value="item.value"
+        :label="l(item.label)"
+      >
+        <span :style="{ fontFamily: item.value }">
+          {{ l(item.label) }}
+          <span
+            v-if="!isFontSupported(item)"
+            :title="t('base.fontFamily.unsupport')"
+            class="umo-font-family-unsupport"
+            >!</span
+          >
+        </span>
+        <span v-if="!isFontSupported(item)" class="umo-font-family-unsupport">
+          <span
+            v-if="canDownloadFont(item) || isDownloadingFont(item.value)"
+            class="umo-font-family-download"
+            :class="{ 'is-loading': isDownloadingFont(item.value) }"
+            :title="
+              isDownloadingFont(item.value)
+                ? t('base.fontFamily.downloading')
+                : t('base.fontFamily.downloadActionTip')
+            "
+            @mousedown.stop.prevent
+            @click.stop.prevent="
+              canDownloadFont(item) ? downloadAndEnableFont(item) : null
+            "
+          >
+            <icon name="download" size="14" />
+          </span>
+        </span>
+      </t-option>
+    </t-option-group>
+  </menus-button>
+</template>
+
+<script setup>
+import { t } from '../../../../composables/i18n.js';
+
+import { useState } from '../../../../composables/state.js';
+import { ref as _ref } from 'vue';
+
+import { isString } from '@tool-belt/type-predicates'
+
+import { MessagePlugin } from '../../../../composables/dialog'
+
+
+import { inject, computed, watch, onMounted } from 'vue';
+const editor = inject('editor')
+const options = inject('options')
+const $toolbar = useState('toolbar', options)
+const $recent = useState('recent', options)
+const typeWriterIsRunning = inject('typeWriterIsRunning')
+
+const usedFonts = _ref([])
+const fontStatusMap = _ref({})
+const downloadingFonts = _ref([])
+const autoDownloadedFonts = _ref([])
+let autoDownloadRunning = _ref(false)
+let restoringDownloadedFonts = _ref(true)
+
+const selectedFont = computed(() => {
+  if (!editor.value || typeWriterIsRunning.value) {
+    return null
+  }
+  if (!editor.value?.getAttributes('textStyle').fontFamily) {
+    return null
+  }
+  return editor.value.getAttributes('textStyle').fontFamily.replace(/"/g, '')
+})
+
+const ensureRecentState = () => {
+  if (!Array.isArray($recent.value.fonts)) {
+    $recent.value.fonts = []
+  }
+  if (!Array.isArray($recent.value.downloadedFonts)) {
+    $recent.value.downloadedFonts = []
+  }
+}
+
+const commitRecentState = (patch = {}) => {
+  ensureRecentState()
+  // Replace object to ensure useStorage persists recent state.
+  const nextState = {
+    ...$recent.value,
+    ...patch,
+  }
+  $recent.value = nextState
+}
+
+const normalizeFontFamily = (font) => {
+  if (!isString(font)) {
+    return ''
+  }
+  return font
+    .split(',')[0]
+    .trim()
+    .replace(/^["']|["']$/g, '')
+}
+
+const measureCanvas = document.createElement('canvas')
+const measureContext = measureCanvas.getContext('2d')
+const baseFamilies = ['monospace', 'serif', 'sans-serif']
+const detectTexts = ['WwMmIi123', '汉字測試', 'AaBbCcXxYyZz']
+const signatureCache = {}
+
+const toFixedMetric = (value) => {
+  if (!Number.isFinite(value)) {
+    return '0'
+  }
+  return value.toFixed(2)
+}
+
+const measureSignature = (fontStack) => {
+  if (!measureContext) {
+    return ''
+  }
+  measureContext.font = `72px ${fontStack}`
+  return detectTexts
+    .map((text) => {
+      const metrics = measureContext.measureText(text)
+      return [
+        toFixedMetric(metrics.width),
+        toFixedMetric(metrics.actualBoundingBoxLeft),
+        toFixedMetric(metrics.actualBoundingBoxRight),
+      ].join(':')
+    })
+    .join('|')
+}
+
+const detectByCanvas = (font) => {
+  if (!measureContext) {
+    return true
+  }
+  baseFamilies.forEach((base) => {
+    if (!signatureCache[base]) {
+      signatureCache[base] = measureSignature(base)
+    }
+  })
+  return baseFamilies.some((base) => {
+    const candidate = measureSignature(`"${font}", ${base}`)
+    return candidate !== signatureCache[base]
+  })
+}
+
+const detectFontAvailability = (font) => {
+  if (!font) {
+    return true
+  }
+  const normalizedFont = normalizeFontFamily(font)
+  if (!normalizedFont) {
+    return false
+  }
+  return detectByCanvas(normalizedFont)
+}
+
+const setFontStatus = (font, supported) => {
+  if (!font) {
+    return
+  }
+  fontStatusMap.value[font] = supported
+}
+
+const refreshFontSupportStatus = () => {
+  const fonts = options.value.dicts?.fonts || []
+  fonts.forEach((item) => {
+    if (item?.value || item?.value === null) {
+      setFontStatus(item.value, detectFontAvailability(item.value))
+    }
+  })
+}
+
+const isDownloadingFont = (font) => downloadingFonts.value.includes(font)
+
+const isFontSupported = (item) => {
+  if (!item?.value) {
+    return true
+  }
+  if (fontStatusMap.value[item.value] === undefined) {
+    setFontStatus(item.value, detectFontAvailability(item.value))
+  }
+  return !!fontStatusMap.value[item.value]
+}
+
+const canDownloadFont = (item) =>
+  !!item?.value && !!item?.url && !isDownloadingFont(item.value)
+
+const buildFontSource = (item) => {
+  const source = `url("${item.url}")`
+  if (!item.format) {
+    return source
+  }
+  return `${source} format("${item.format}")`
+}
+
+const persistDownloadedFont = (item) => {
+  ensureRecentState()
+  const downloaded = Array.isArray($recent.value.downloadedFonts)
+    ? $recent.value.downloadedFonts
+    : []
+  const next = downloaded.filter((font) => font?.value !== item.value)
+  next.unshift({
+    value: item.value,
+    url: item.url,
+    format: item.format,
+    style: item.style,
+    weight: item.weight,
+  })
+  commitRecentState({
+    downloadedFonts: next.slice(0, 50),
+  })
+}
+
+const loadWebFont = async (
+  fontItem,
+  { silent = false, persist = true } = {},
+) => {
+  if (!fontItem?.value || !fontItem?.url || isDownloadingFont(fontItem.value)) {
+    return false
+  }
+  // Skip network if font is already available in current browser context.
+  if (detectFontAvailability(fontItem.value)) {
+    setFontStatus(fontItem.value, true)
+    if (persist) {
+      persistDownloadedFont(fontItem)
+    }
+    return true
+  }
+  downloadingFonts.value.push(fontItem.value)
+  try {
+    const fontFace = new FontFace(fontItem.value, buildFontSource(fontItem), {
+      style: fontItem.style || 'normal',
+      weight: fontItem.weight || '400',
+      display: 'swap',
+    })
+    await fontFace.load()
+    document.fonts.add(fontFace)
+    await document.fonts.load(`16px "${fontItem.value}"`)
+    setFontStatus(fontItem.value, detectFontAvailability(fontItem.value))
+    if (persist) {
+      persistDownloadedFont(fontItem)
+    }
+    if (!silent) {
+      useMessage(
+        'success',
+        t('base.fontFamily.downloadSuccess', { font: l(fontItem.label) }),
+      )
+    }
+    return true
+  } catch {
+    setFontStatus(fontItem.value, false)
+    if (!silent) {
+      useMessage(
+        'error',
+        t('base.fontFamily.downloadFailed', { font: l(fontItem.label) }),
+      )
+    }
+    return false
+  } finally {
+    const index = downloadingFonts.value.indexOf(fontItem.value)
+    if (index > -1) {
+      downloadingFonts.value.splice(index, 1)
+    }
+  }
+}
+
+const restoreDownloadedFonts = async () => {
+  ensureRecentState()
+  for (const item of $recent.value.downloadedFonts) {
+    if (!item?.value) {
+      continue
+    }
+    const configFont = options.value.dicts?.fonts?.find(
+      ({ value }) => value === item.value,
+    )
+    const target = {
+      ...item,
+      ...configFont,
+      value: configFont?.value || item.value,
+      url: configFont?.url || item.url,
+    }
+    // If already available, do not redownload.
+    if (detectFontAvailability(target.value)) {
+      setFontStatus(target.value, true)
+      continue
+    }
+    if (target.url) {
+      await loadWebFont(target, { silent: true, persist: false })
+    }
+  }
+  refreshFontSupportStatus()
+}
+
+const downloadAndEnableFont = async (item) => {
+  if (!item?.url) {
+    useMessage('warning', t('base.fontFamily.noDownloadUrl'))
+    return
+  }
+  useMessage(
+    'loading',
+    t('base.fontFamily.downloadStart', {
+      font: l(item.label),
+    }),
+  )
+  const downloaded = await loadWebFont(item, { silent: false, persist: true })
+  if (downloaded) {
+    setFontFamily(item.value)
+  }
+}
+
+const allFonts = computed(() => {
+  ensureRecentState()
+  const all = [
+    {
+      label: t('base.fontFamily.all'),
+      children: options.value.dicts?.fonts,
+    },
+  ]
+  // 通过字体值获取字体列表
+  const getFontsByValues = (values) => {
+    return values
+      .map((item) =>
+        options.value.dicts?.fonts.find(({ value }) => value === item),
+      )
+      .filter(Boolean)
+  }
+  if ($recent.value.fonts.length > 0) {
+    all.unshift({
+      label: t('base.fontFamily.recent'),
+      children: getFontsByValues($recent.value.fonts),
+    })
+  }
+  if (usedFonts.value.length > 0) {
+    all.unshift({
+      label: t('base.fontFamily.used'),
+      children: getFontsByValues(usedFonts.value),
+    })
+  }
+  return all
+})
+
+const collectFontFamiliesFromNode = (node, resultSet) => {
+  if (!node) {
+    return
+  }
+  const marks = Array.isArray(node.marks) ? node.marks : []
+  for (const mark of marks) {
+    const fontFamily = normalizeFontFamily(mark?.attrs?.fontFamily)
+    if (fontFamily) {
+      resultSet.add(fontFamily)
+    }
+  }
+  const content = Array.isArray(node.content) ? node.content : []
+  for (const child of content) {
+    collectFontFamiliesFromNode(child, resultSet)
+  }
+}
+
+const getUsedFontValues = () => {
+  const doc = editor.value?.getJSON()
+  const fontSet = new Set()
+  collectFontFamiliesFromNode(doc, fontSet)
+  return [...fontSet]
+}
+
+// 获取当前文档中所有已使用的字体
+const getUsedFonts = () => {
+  const values = getUsedFontValues()
+  for (const font of values) {
+    if (!usedFonts.value.includes(font)) {
+      usedFonts.value.push(font)
+    }
+  }
+}
+
+const autoDownloadDocumentFonts = async () => {
+  if (restoringDownloadedFonts.value) {
+    return
+  }
+  if (autoDownloadRunning.value) {
+    return
+  }
+  const downloadedFontValues = new Set(
+    ($recent.value.downloadedFonts || [])
+      .map((item) => item?.value)
+      .filter(Boolean),
+  )
+  const usedFontValues = getUsedFontValues()
+  const targets = usedFontValues
+    .map((value) =>
+      options.value.dicts?.fonts?.find((item) => item.value === value),
+    )
+    .filter(
+      (item) =>
+        item?.url &&
+        !isFontSupported(item) &&
+        !isDownloadingFont(item.value) &&
+        !autoDownloadedFonts.value.includes(item.value) &&
+        !downloadedFontValues.has(item.value),
+    )
+  if (!targets.length) {
+    return
+  }
+  autoDownloadRunning.value = true
+  try {
+    // Keep only one auto-download loading message visible.
+    MessagePlugin.closeAll()
+    useMessage('loading', {
+      content: t('base.fontFamily.autoDownloadStart'),
+      duration: 0,
+    })
+    let downloadedCount = 0
+    for (const item of targets) {
+      const downloaded = await loadWebFont(item, {
+        silent: true,
+        persist: true,
+      })
+      if (downloaded) {
+        downloadedCount += 1
+        if (!autoDownloadedFonts.value.includes(item.value)) {
+          autoDownloadedFonts.value.push(item.value)
+        }
+      }
+    }
+    refreshFontSupportStatus()
+    MessagePlugin.closeAll()
+    if (downloadedCount > 0) {
+      useMessage('success', t('base.fontFamily.autoDownloadDone'))
+    }
+  } finally {
+    autoDownloadRunning.value = false
+  }
+}
+
+const setFontFamily = (fontFamily) => {
+  if (fontFamily) {
+    const nextFonts = $recent.value.fonts.filter((item) => item !== fontFamily)
+    nextFonts.unshift(fontFamily)
+    commitRecentState({
+      fonts: nextFonts.slice(0, 10),
+    })
+  }
+  editor.value?.chain().focus().setFontFamily(fontFamily).run()
+  getUsedFonts()
+}
+
+watch(
+  () => editor.value,
+  (val, _, onCleanup) => {
+    if (val) {
+      getUsedFonts()
+      autoDownloadDocumentFonts()
+      val.on('update', autoDownloadDocumentFonts)
+      onCleanup(() => val.off('update', autoDownloadDocumentFonts))
+    }
+  },
+)
+
+watch(
+  () => options.value.dicts?.fonts,
+  () => {
+    refreshFontSupportStatus()
+  },
+  { deep: true, immediate: true },
+)
+
+onMounted(async () => {
+  ensureRecentState()
+  restoringDownloadedFonts.value = true
+  await restoreDownloadedFonts()
+  restoringDownloadedFonts.value = false
+  await autoDownloadDocumentFonts()
+})
+</script>
+
+<style lang="less">
+.umo-font-family-item {
+  > span {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 14px;
+    width: 100%;
+    .umo-font-family-unsupport {
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+      color: var(--umo-error-color);
+      font-size: 14px;
+    }
+    .umo-font-family-download {
+      color: var(--umo-text-color-light);
+      cursor: pointer;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 16px;
+      height: 16px;
+      margin-left: 12px;
+      user-select: none;
+      &:hover {
+        color: var(--umo-primary-color);
+      }
+    }
+  }
+}
+</style>

package/src/components/editor-main/src/components/menus/toolbar/base/font-size.vue

@@ -0,0 +1,163 @@
+<template>
+  <menus-button
+    v-if="select"
+    :text="t('base.fontSize.text')"
+    menu-type="select"
+    hide-text
+    style="width: 80px"
+    :select-options="fontSizes"
+    :select-value="
+      typeWriterIsRunning
+        ? null
+        : editor?.getAttributes('textStyle').fontSize || '14px'
+    "
+    v-bind="$attrs"
+    :placeholder="t('base.fontSize.text')"
+    filterable
+    :disabled="!editor?.can().chain().focus().setFontSize().run()"
+    @menu-click="setFontSize"
+  >
+  </menus-button>
+  <menus-button
+    v-if="!disableMenu('font-size-increase')"
+    ico="font-size-increase"
+    :text="t('base.fontSize.increase')"
+    hide-text
+    :disabled="!editor?.can().chain().focus().setFontSize().run()"
+    @menu-click="increaseFontSize"
+  />
+  <menus-button
+    v-if="!disableMenu('font-size-decrease')"
+    ico="font-size-decrease"
+    :text="t('base.fontSize.decrease')"
+    hide-text
+    :disabled="!editor?.can().chain().focus().setFontSize().run()"
+    @menu-click="decreaseFontSize"
+  />
+</template>
+
+<script setup>
+import { t } from '../../../../composables/i18n.js';
+import {
+  applyCachedTextSelection,
+  refreshCachedTextSelection,
+  restorePendingSelectMenuRange,
+} from '../../../../composables/toolbarSelection.js';
+import { inject } from 'vue';
+
+const props = defineProps({
+  select: {
+    type: Boolean,
+    default: true,
+  },
+})
+
+const editor = inject('editor')
+const options = inject('options')
+const typeWriterIsRunning = inject('typeWriterIsRunning')
+
+const disableMenu = (name) => {
+  return options.value.disableExtensions.includes(name)
+}
+
+const fontSizes = [
+  { label: t('base.fontSize.default'), value: '14px', order: 4 },
+  { label: t('base.fontSize.42pt'), value: '42pt', order: 20 }, // 56
+  { label: t('base.fontSize.36pt'), value: '36pt', order: 19 }, // 48
+  { label: t('base.fontSize.26pt'), value: '26pt', order: 16 }, // 35
+  { label: t('base.fontSize.24pt'), value: '24pt', order: 15 }, // 32
+  { label: t('base.fontSize.22pt'), value: '22pt', order: 14 }, // 29
+  { label: t('base.fontSize.18pt'), value: '18pt', order: 11 }, // 24
+  { label: t('base.fontSize.16pt'), value: '16pt', order: 10 }, // 22
+  { label: t('base.fontSize.15pt'), value: '15pt', order: 9 }, // 21
+  { label: t('base.fontSize.14pt'), value: '14pt', order: 7 }, // 19
+  { label: t('base.fontSize.12pt'), value: '12pt', order: 4 }, // 16
+  { label: t('base.fontSize.10_5pt'), value: '10.5pt', order: 1 }, // 14
+  { label: t('base.fontSize.9pt'), value: '9pt', order: 3 }, // 12
+  { label: t('base.fontSize.7_5pt'), value: '7.5pt', order: 1 }, // 10
+  { label: t('base.fontSize.6_5pt'), value: '6.5pt', order: 0 }, // 9
+  { label: '10', value: '10px', order: 1 },
+  { label: '11', value: '11px', order: 2 },
+  { label: '12', value: '12px', order: 3 },
+  { label: '16', value: '16px', order: 5 },
+  { label: '18', value: '18px', order: 6 },
+  { label: '20', value: '20px', order: 8 },
+  { label: '22', value: '22px', order: 10 },
+  { label: '24', value: '24px', order: 11 },
+  { label: '26', value: '26px', order: 12 },
+  { label: '28', value: '28px', order: 13 },
+  { label: '32', value: '32px', order: 15 },
+  { label: '36', value: '36px', order: 17 },
+  { label: '42', value: '42px', order: 18 },
+  { label: '48', value: '48px', order: 19 },
+  { label: '72', value: '72px', order: 21 },
+  { label: '96', value: '96px', order: 22 },
+]
+
+// 设置字体大小（连续改字号时保持选区）
+const applyFontSize = (fontSize) => {
+  const ed = editor.value
+  if (!ed) return
+
+  const { empty, from, to } = ed.state.selection
+  let chain = ed.chain().focus()
+
+  if (!empty && from !== to) {
+    chain = chain.setTextSelection({ from, to })
+  } else if (
+    !restorePendingSelectMenuRange(ed) &&
+    !applyCachedTextSelection(ed)
+  ) {
+    return
+  } else {
+    const sel = ed.state.selection
+    if (!sel.empty && sel.from !== sel.to) {
+      chain = ed.chain().focus().setTextSelection({ from: sel.from, to: sel.to })
+    } else {
+      return
+    }
+  }
+
+  if (chain.setFontSize(fontSize).run()) {
+    refreshCachedTextSelection(ed)
+  }
+}
+
+const setFontSize = (fontSize) => {
+  applyFontSize(fontSize)
+}
+
+// 增大字号
+const increaseFontSize = () => {
+  const { fontSize } = editor.value?.getAttributes('textStyle') || {}
+  if (fontSize) {
+    const size = fontSizes.find(({ value }) => value === fontSize)
+    if (!size) {
+      return
+    }
+    const nextFont = fontSizes.find(({ order }) => order === size.order + 1)
+    if (nextFont) {
+      setFontSize(nextFont.value)
+    }
+  } else {
+    setFontSize('16px')
+  }
+}
+
+// 减小字号
+const decreaseFontSize = () => {
+  const { fontSize } = editor.value?.getAttributes('textStyle') || {}
+  if (fontSize) {
+    const size = fontSizes.find(({ value }) => value === fontSize)
+    if (!size) {
+      return
+    }
+    const prevFont = fontSizes.find(({ order }) => order === size.order - 1)
+    if (prevFont) {
+      setFontSize(prevFont.value)
+    }
+  } else {
+    setFontSize('14px')
+  }
+}
+</script>

package/src/components/editor-main/src/components/menus/toolbar/base/format-painter.vue

@@ -0,0 +1,27 @@
+<template>
+  <menus-button
+    ico="format-painter"
+    :text="t('base.formatPainter.text')"
+    :tooltip="t('base.formatPainter.tip')"
+    :menu-active="editor?.view?.painter?.enabled"
+    :disabled="editor?.state?.selection?.empty"
+    hide-text
+    @menu-click="setFormatPainter(true)"
+    @dblclick="setFormatPainter(false)"
+  />
+</template>
+
+<script setup>
+import { t } from '../../../../composables/i18n.js';
+import { inject } from 'vue';
+
+const editor = inject('editor')
+
+const setFormatPainter = (once) => {
+  if (editor.value?.view?.painter?.enabled) {
+    editor.value?.commands.unsetFormatPainter()
+    return
+  }
+  editor.value?.chain().focus().setFormatPainter(once).run()
+}
+</script>