adtec-core-package 3.0.0 → 3.0.1

package/src/components/editor-main/src/components/menus/toolbar/export/embed.vue

@@ -0,0 +1,67 @@
+<template>
+  <menus-button
+    ico="embed"
+    :text="t('export.embed.text')"
+    huge
+    @menu-click="dialogVisible = true"
+  />
+  <modal
+    :visible="dialogVisible"
+    width="460px"
+    :confirm-btn="t('export.embed.copy')"
+    @confirm="copyEmbed"
+    @close="dialogVisible = false"
+  >
+    <template #header>
+      <icon name="embed" />
+      {{ t('export.embed.title') }}
+    </template>
+    <div class="umo-embed-container">
+      <div class="umo-embed-tip" v-text="t('export.embed.tip')"></div>
+      <t-textarea
+        class="umo-embed-textarea"
+        :value="embedValue"
+        readonly
+        autosize
+      ></t-textarea>
+    </div>
+  </modal>
+</template>
+
+<script setup>
+import { t } from '../../../../composables/i18n.js';
+import { ref as _ref } from 'vue';
+
+
+import { inject, computed } from 'vue';
+const options = inject('options')
+const container = inject('container')
+let dialogVisible = _ref(false)
+
+const embedValue = computed(() => {
+  return `<iframe src="${options.value.shareUrl}" width="100%" height="720px" frameborder="0" allowfullscreen="true"></iframe>`
+})
+
+const copyEmbed = () => {
+  useCopy(embedValue, t('export.embed.copied'), container)
+  dialogVisible.value = false
+}
+</script>
+
+<style lang="less" scoped>
+.umo-embed-container {
+  padding: 2px;
+  .umo-embed-tip {
+    font-size: 12px;
+    color: var(--umo-text-color-light);
+    margin-bottom: 6px;
+    line-height: 1.4;
+  }
+  .umo-embed-textarea {
+    :deep(textarea) {
+      word-break: break-all;
+      word-wrap: break-word;
+    }
+  }
+}
+</style>

package/src/components/editor-main/src/components/menus/toolbar/export/html.vue

@@ -0,0 +1,27 @@
+<template>
+  <menus-button ico="html5" text="HTML" huge @menu-click="saveHtmlFile" />
+</template>
+
+<script setup>
+import { t } from '../../../../composables/i18n.js';
+
+import { saveAs } from 'file-saver'
+
+
+import { inject } from 'vue';
+const editor = inject('editor')
+const options = inject('options')
+
+const saveHtmlFile = () => {
+  if (!editor.value) {
+    return
+  }
+  const blob = new Blob([editor.value.getHTML()], {
+    type: 'text/html;charset=utf-8',
+  })
+  const { title } = options.value.document
+  const filename =
+    title !== '' ? options.value.document?.title : t('document.untitled')
+  saveAs(blob, `${filename}.html`)
+}
+</script>

package/src/components/editor-main/src/components/menus/toolbar/export/image.vue

@@ -0,0 +1,66 @@
+<template>
+  <menus-button
+    ico="image"
+    :text="t('export.image.text')"
+    menu-type="dropdown"
+    huge
+    :select-options="formats"
+    @click="saveImage"
+  />
+</template>
+
+<script setup>
+import { t } from '../../../../composables/i18n.js';
+
+import { useAlert } from '../../../../composables/dialog.js';
+
+import domtoimage from 'dom-to-image-more'
+import { saveAs } from 'file-saver'
+
+
+import { inject, nextTick } from 'vue';
+const { toBlob } = domtoimage
+const container = inject('container')
+const exportFile = inject('exportFile')
+const page = inject('page')
+const options = inject('options')
+
+const formats = [
+  { content: t('export.image.png'), value: 'png' },
+  { content: t('export.image.jpg'), value: 'jpg' },
+]
+
+const saveImage = async ({ content, value }) => {
+  if (!content) {
+    return
+  }
+  const { zoomLevel } = page.value
+  exportFile.value.image = true
+  try {
+    page.value.zoomLevel = 100
+    await nextTick()
+    const node = document.querySelector(`${container} .umo-page-content`)
+    const blob = await toBlob(node, { scale: devicePixelRatio })
+    const { title } = options.value.document
+    const filename =
+      title !== '' ? options.value?.document?.title : t('document.untitled')
+    saveAs(
+      blob,
+      `${filename}${devicePixelRatio > 1 ? `@${devicePixelRatio}x` : ''}.${value}`,
+    )
+  } catch {
+    const dialog = useAlert({
+      attach: container,
+      theme: 'warning',
+      header: t('export.image.error.title'),
+      body: t('export.image.error.message'),
+      onConfirm() {
+        dialog.destroy()
+      },
+    })
+  } finally {
+    page.value.zoomLevel = zoomLevel
+    exportFile.value.image = false
+  }
+}
+</script>

package/src/components/editor-main/src/components/menus/toolbar/export/pdf.vue

@@ -0,0 +1,8 @@
+<template>
+  <menus-button text="PDF" ico="pdf" huge @menu-click="exportFile.pdf = true" />
+</template>
+
+<script setup>import { inject } from 'vue';
+
+const exportFile = inject('exportFile')
+</script>

package/src/components/editor-main/src/components/menus/toolbar/export/share.vue

@@ -0,0 +1,63 @@
+<template>
+  <menus-button
+    ico="share"
+    :text="t('export.share.text')"
+    huge
+    @menu-click="dialogVisible = true"
+  />
+  <modal
+    :visible="dialogVisible"
+    width="420px"
+    :confirm-btn="t('export.share.copy')"
+    @confirm="copyLink"
+    @close="dialogVisible = false"
+  >
+    <template #header>
+      <icon name="share" />
+      {{ t('export.share.text') }}
+    </template>
+    <div class="umo-share-container">
+      <div class="umo-share-tip" v-text="t('export.share.tip')"></div>
+      <t-textarea
+        class="umo-share-textarea"
+        :value="options.shareUrl"
+        readonly
+        autosize
+      ></t-textarea>
+    </div>
+  </modal>
+</template>
+
+<script setup>
+import { t } from '../../../../composables/i18n.js';
+import { ref as _ref } from 'vue';
+
+
+import { inject } from 'vue';
+const options = inject('options')
+const container = inject('container')
+let dialogVisible = _ref(false)
+
+const copyLink = () => {
+  useCopy(options.value.shareUrl, t('export.share.copied'), container)
+  dialogVisible.value = false
+}
+</script>
+
+<style lang="less" scoped>
+.umo-share-container {
+  padding: 2px;
+  .umo-share-tip {
+    font-size: 12px;
+    color: var(--umo-text-color-light);
+    margin-bottom: 6px;
+    line-height: 1.4;
+  }
+  .umo-share-textarea {
+    :deep(textarea) {
+      word-break: break-all;
+      word-wrap: break-word;
+    }
+  }
+}
+</style>

package/src/components/editor-main/src/components/menus/toolbar/export/text.vue

@@ -0,0 +1,32 @@
+<template>
+  <menus-button
+    ico="text"
+    :text="t('export.text')"
+    huge
+    @menu-click="saveTextFile"
+  />
+</template>
+
+<script setup>
+import { t } from '../../../../composables/i18n.js';
+
+import { saveAs } from 'file-saver'
+
+
+import { inject } from 'vue';
+const editor = inject('editor')
+const options = inject('options')
+
+const saveTextFile = () => {
+  if (!editor.value) {
+    return
+  }
+  const blob = new Blob([editor.value.getText()], {
+    type: 'text/plain;charset=utf-8',
+  })
+  const { title } = options.value.document
+  const filename =
+    title !== '' ? options.value?.document?.title : t('document.untitled')
+  saveAs(blob, `${filename}.txt`)
+}
+</script>

package/src/components/editor-main/src/components/menus/toolbar/insert/audio.vue

@@ -0,0 +1,23 @@
+<template>
+  <menus-button
+    ico="audio"
+    :text="t('insert.audio')"
+    huge
+    @menu-click="
+      editor
+        ?.chain()
+        .focus()
+        .selectFiles('audio', container, uploadFileMap)
+        .run()
+    "
+  />
+</template>
+
+<script setup>
+import { t } from '../../../../composables/i18n.js';
+import { inject } from 'vue';
+
+const container = inject('container')
+const editor = inject('editor')
+const uploadFileMap = inject('uploadFileMap')
+</script>

package/src/components/editor-main/src/components/menus/toolbar/insert/bookmark.vue

@@ -0,0 +1,206 @@
+<template>
+  <menus-button
+    ico="bookmark"
+    :text="t('insert.bookmark.text')"
+    huge
+    @menu-click="dialogVisible = true"
+  />
+  <modal
+    :visible="dialogVisible"
+    width="420px"
+    draggable
+    destroy-on-close
+    :confirm-btn="t('insert.bookmark.ok')"
+    @confirm="insertBookmark"
+    @close="dialogVisible = false"
+  >
+    <template #header>
+      <icon name="bookmark" />
+      {{ t('insert.bookmark.set') }}
+    </template>
+    <div class="umo-bookmark-container">
+      <t-form label-align="top" colon>
+        <t-form-item
+          :label="t('insert.bookmark.textName')"
+          style="margin-bottom: 10px"
+        >
+          <t-input
+            v-model.trim="bookmarkText"
+            status="default"
+            :maxcharacter="30"
+            :placeholder="t('insert.bookmark.placeholder')"
+            clearable
+          />
+        </t-form-item>
+        <t-form-item class="bookmark-list">
+          <t-table
+            row-key="bookmarkRowId"
+            height="250"
+            :data="bookmarkData"
+            :columns="bookmarkColumns"
+            :active-row-type="'single'"
+            lazy-load
+            @active-change="onActiveChange"
+          >
+            <template #operation="{ row }">
+              <tooltip :content="t('insert.bookmark.delete')">
+                <t-button
+                  size="small"
+                  shape="square"
+                  variant="text"
+                  @click="rowDelete(row)"
+                  ><icon name="node-delete"
+                /></t-button>
+              </tooltip>
+            </template>
+          </t-table>
+        </t-form-item>
+        <t-form-item>
+          <t-checkbox v-model="page.showBookmark">{{
+            t('insert.bookmark.show')
+          }}</t-checkbox>
+        </t-form-item>
+      </t-form>
+    </div>
+  </modal>
+</template>
+<script setup>
+import { t } from '../../../../composables/i18n.js';
+
+import { useAlert } from '../../../../composables/dialog.js';
+import { ref as _ref } from 'vue';
+
+
+import { inject, watch } from 'vue';
+const container = inject('container')
+const editor = inject('editor')
+const page = inject('page')
+
+// 弹窗口显示隐藏 true显示 默认隐藏
+let dialogVisible = _ref(false)
+// 书签名称
+let bookmarkText = _ref('')
+// 书签数据
+let bookmarkData = []
+// 书签表格显示列
+const bookmarkColumns = [
+  {
+    colKey: 'bookmarkRowName',
+    title: t('insert.bookmark.textName'), // '书签名称',
+    ellipsis: false,
+    align: 'left',
+  },
+  {
+    colKey: 'operation',
+    title: t('insert.bookmark.actions'), // '操作',
+    width: 70,
+    fixed: 'right',
+    align: 'center',
+  },
+]
+
+// 书签插入
+const insertBookmark = () => {
+  // 书签名称不为空时不处理
+  if (bookmarkText.value) {
+    let existbmName = ''
+    if (bookmarkData.length > 0) {
+      for (const item of bookmarkData) {
+        if (item.bookmarkRowName === bookmarkText.value) {
+          existbmName = item.bookmarkRowName
+          break
+        }
+      }
+    }
+    // 存在-1
+    if (!existbmName) {
+      if (editor.value?.commands.setBookmark({ bookmarkName: bookmarkText.value })) {
+        dialogVisible.value = false
+      }
+    } else {
+      if (editor.value?.commands.focusBookmark(existbmName)) {
+        dialogVisible.value = false
+      }
+    }
+  } else {
+    const dialog = useAlert({
+      attach: container,
+      theme: 'warning',
+      header: t('insert.bookmark.text'),
+      body: t('insert.bookmark.emptyError'),
+      onConfirm() {
+        dialog.destroy()
+      },
+    })
+  }
+}
+const onActiveChange = (highlightRowKeys, ctx) => {
+  // 重置文档
+  bookmarkText.value = ctx.currentRowData?.bookmarkRowName
+}
+// 这个方法本来也想封装到addCommands 中，但经过多次验证，每次都会有一个额外的事务异常
+const rowDelete = (row) => {
+  const element = editor.value?.view.dom.querySelector(
+    `bookmark[bookmarkName="${row.bookmarkRowName}"]`,
+  )
+  if (element) {
+    const pos = editor.value?.view.posAtDOM(element, 0)
+    const { tr } = editor.value?.view.state || {}
+    if (tr) {
+      const marks = editor.value?.view.state.doc.resolve(pos + 1)?.marks()
+      if (marks !== null && marks.length > 0) {
+        for (const mark of marks) {
+          if (mark.type.name === 'bookmark') {
+            editor.value?.view.dispatch(
+              tr.removeMark(pos, pos + element.outerText.length, mark),
+            )
+          }
+        }
+      } else {
+        editor.value?.view.dispatch(
+          tr.removeMark(pos, pos + element.outerText.length),
+        )
+      }
+      dialogVisible.value = false
+    }
+  }
+}
+const getCurWordAllBookmark = () => {
+  try {
+    bookmarkText.value = ''
+    editor.value?.commands.getAllBookmarks((data) => {
+      bookmarkData = data
+    })
+  } catch (e) {
+    dialogVisible.value = false
+  }
+}
+watch(
+  () => dialogVisible.value,
+  () => {
+    if (dialogVisible.value) {
+      getCurWordAllBookmark()
+    }
+  },
+)
+</script>
+
+<style lang="less" scoped>
+.bookmark-list {
+  border: solid 1px var(--umo-border-color-dark);
+  border-radius: var(--umo-radius);
+  margin-bottom: 5px;
+  overflow: hidden;
+  :deep(table) {
+    th,
+    td,
+    tr {
+      border: none !important;
+      padding: 4px 10px;
+    }
+    th {
+      border-bottom: solid 1px var(--umo-border-color) !important;
+    }
+  }
+}
+</style>

package/src/components/editor-main/src/components/menus/toolbar/insert/callout.vue

@@ -0,0 +1,15 @@
+<template>
+  <menus-button
+    ico="callout"
+    :text="t('insert.callout')"
+    huge
+    @menu-click="editor?.chain().focus().insertCallout().run()"
+  />
+</template>
+
+<script setup>
+import { t } from '../../../../composables/i18n.js';
+import { inject } from 'vue';
+
+const editor = inject('editor')
+</script>

package/src/components/editor-main/src/components/menus/toolbar/insert/chinese-date.vue

@@ -0,0 +1,112 @@
+<template>
+  <menus-button
+    ico="date"
+    :text="t('insert.date')"
+    menu-type="dropdown"
+    huge
+    :select-options="options"
+    @click="insertDate"
+  />
+</template>
+
+<script setup>
+import { t } from '../../../../composables/i18n.js';
+import { useDateFormat, useNow } from '@vueuse/core';
+import { inject } from 'vue';
+
+// 月份
+const formDate = (format) => useDateFormat(useNow(), format).value
+
+const formatDateToChinese = (dateStr) => {
+  const replaceDigits = (num) => {
+    const digits = ['〇', '一', '二', '三', '四', '五', '六', '七', '八', '九']
+    return num
+      .toString()
+      .split('')
+      .map((n) => digits[Number(n)])
+      .join('')
+  }
+
+  return dateStr.replace(/\d+/g, (match) => {
+    if (match.length === 4) {
+      // 年份
+      return replaceDigits(match)
+    }
+    if (match.length === 1) {
+      // 月份或日期
+      return replaceDigits(match)
+    }
+    if (match.length === 2) {
+      const num1 = match.charAt(0)
+      const num2 = match.charAt(1)
+      if (num1 === '0') {
+        return `${replaceDigits(num1)}十`
+      }
+      if (num1 === '1') {
+        return `十${replaceDigits(num2)}`
+      }
+      if (num2 === '0') {
+        return `${replaceDigits(num1)}十`
+      }
+      return `${replaceDigits(num1)}十${replaceDigits(num2)}`
+    }
+    return match // 其他情况不处理
+  })
+}
+
+const options = [
+  { content: '自定义日期', format: 'YYYY-M-D', capitalize: false },
+  {
+    content: '自定义时间',
+    value: 'withTime',
+    format: 'YYYY-M-D HH:mm:ss',
+    capitalize: false,
+    divider: true,
+  },
+  {
+    content: formDate('YYYY年M月D日'),
+    format: 'YYYY年M月D日',
+    capitalize: false,
+  },
+  { content: formDate('YYYY-M-D'), format: 'YYYY-M-D', capitalize: false },
+  { content: formDate('YYYY/M/D'), format: 'YYYY/M/D', capitalize: false },
+  { content: formDate('YYYY.M.D'), format: 'YYYY.M.D', capitalize: false },
+  { content: formDate('YYYY年M月'), format: 'YYYY年M月', capitalize: false },
+  {
+    content: formDate('YYYY年M月D日 HH:mm:ss'),
+    value: 'withTime',
+    format: 'YYYY年M月D日 HH:mm:ss',
+    capitalize: false,
+    divider: true,
+  },
+  {
+    content: formatDateToChinese(formDate('YYYY年M月D日')),
+    format: 'YYYY年M月D日',
+    capitalize: true,
+  },
+  {
+    content: formatDateToChinese(formDate('YYYY年M月')),
+    format: 'YYYY年M月',
+    capitalize: true,
+  },
+]
+
+const editor = inject('editor')
+
+const insertDate = ({ content, format, capitalize, value }) => {
+  if (!content) {
+    return
+  }
+  editor.value
+    ?.chain()
+    .insertDatetime({
+      text: content.includes('自定义') ? `[${content}]` : content,
+      date: formDate(format), // formDate('YYYY-MM-DD HH:mm:ss'),
+      withTime: value === 'withTime',
+      format,
+      capitalize,
+    })
+    .focus()
+    .run()
+}
+</script>

package/src/components/editor-main/src/components/menus/toolbar/insert/code-block.vue

@@ -0,0 +1,16 @@
+<template>
+  <menus-button
+    ico="code-block"
+    :text="t('insert.codeBlock')"
+    shortcut="Ctrl+Alt+C"
+    huge
+    @menu-click="editor?.chain().focus().setCodeBlock().run()"
+  />
+</template>
+
+<script setup>
+import { t } from '../../../../composables/i18n.js';
+import { inject } from 'vue';
+
+const editor = inject('editor')
+</script>