adtec-core-package 3.0.0 → 3.0.2

package/src/components/editor-main/src/components/statusbar/shortcuts.vue

@@ -0,0 +1,313 @@
+<template>
+  <div class="keyboard-shortcuts">
+    <template v-for="(group, index) in shortcuts" :key="index">
+      <div class="keyboard-shortcuts-title">{{ group.title }}</div>
+      <ul class="keyboard-shortcuts">
+        <li v-for="(item, i) in group.items" :key="i">
+          <span
+            :class="item.className ? 'keyboard-shortcut-' + item.className : ''"
+          >
+            <icon v-if="item.icon" :name="item.icon" />
+            <span
+              v-else-if="item.html"
+              class="shortcut-icon"
+              v-html="item.html"
+            >
+            </span>
+            <component :is="item.tag" v-if="item.tag">{{
+              item.label
+            }}</component>
+            <span v-else :class="item.className || ''">{{ item.label }}</span>
+          </span>
+          <div class="keyboard-shortcut">
+            <template v-for="key in item.keys" :key="key">
+              <kbd v-if="key !== 'TEXT'">{{ getShortcut(key) }}</kbd>
+              <span v-else v-text="t('shortcut.text')"></span>
+            </template>
+          </div>
+        </li>
+      </ul>
+    </template>
+  </div>
+</template>
+
+<script setup>
+import { t } from '../../composables/i18n.js';
+
+import { useState } from '../../composables/state.js';
+import { ref as _ref } from 'vue';
+
+import { getShortcut } from '../../utils/shortcut'
+
+
+import { inject } from 'vue';
+const options = inject('options')
+const $document = useState('document', options)
+
+const shortcuts = _ref([
+  {
+    title: t('shortcut.commonlyUsed'),
+    items: [
+      { label: t('shortcut.copy'), keys: ['Ctrl', 'C'] },
+      { label: t('shortcut.paste'), keys: ['Ctrl', 'V'] },
+      { label: t('shortcut.pasteAsText'), keys: ['Ctrl', 'Shift', 'V'] },
+      { label: t('base.undo'), keys: ['Ctrl', 'Z'] },
+      { label: t('base.redo'), keys: ['Ctrl', 'Y'] },
+      { label: t('base.selectAll'), keys: ['Ctrl', 'A'] },
+      { label: t('search.text'), keys: ['Ctrl', 'F'] },
+      { label: t('shortcut.paragraph'), keys: ['Enter'] },
+      { label: t('shortcut.hardBreak'), keys: ['Shift', 'Enter'] },
+      { label: t('save.text'), keys: ['Ctrl', 'S'] },
+      { label: t('print.text'), keys: ['Ctrl', 'P'] },
+    ],
+  },
+  {
+    title: t('shortcut.format'),
+    items: [
+      { icon: 'bold', tag: 'b', label: t('base.bold'), keys: ['Ctrl', 'B'] },
+      {
+        icon: 'italic',
+        tag: 'i',
+        label: t('base.italic'),
+        keys: ['Ctrl', 'I'],
+      },
+      {
+        icon: 'underline',
+        tag: 'u',
+        label: t('base.underline'),
+        keys: ['Ctrl', 'U'],
+      },
+      {
+        icon: 'strike',
+        tag: 's',
+        label: t('base.strike'),
+        keys: ['Ctrl', 'Shift', 'X'],
+      },
+      { icon: 'indent', label: t('base.indent'), keys: ['Tab'] },
+      { icon: 'outdent', label: t('base.outdent'), keys: ['Shift', 'Tab'] },
+    ],
+  },
+  {
+    title: t('shortcut.page'),
+    items: [
+      { label: t('page.break'), keys: ['Ctrl', 'Enter'] },
+      { label: t('shortcut.pageZoomIn'), keys: ['Ctrl', '+'] },
+      { label: t('shortcut.pageZoomOut'), keys: ['Ctrl', '-'] },
+      { label: t('shortcut.pageZoomReset'), keys: ['Ctrl', '1'] },
+      { label: t('shortcut.pageAutoWidth'), keys: ['Ctrl', '0'] },
+      { label: t('fullscreen.title'), keys: ['Ctrl', 'F11'] },
+    ],
+  },
+])
+
+if ($document.value.enableMarkdown) {
+  shortcuts.value.push({
+    title: t('shortcut.markdown'),
+    items: [
+      {
+        html: 'H<sub>1</sub>',
+        tag: 'b',
+        className: 'heading1',
+        label: t('base.heading.text', { level: 1 }),
+        keys: ['#', '⎵'],
+      },
+      {
+        html: 'H<sub>2</sub>',
+        tag: 'b',
+        className: 'heading2',
+        label: t('base.heading.text', { level: 2 }),
+        keys: ['##', '⎵'],
+      },
+      {
+        html: 'H<sub>3</sub>',
+        tag: 'b',
+        className: 'heading3',
+        label: t('base.heading.text', { level: 3 }),
+        keys: ['###', '⎵'],
+      },
+      {
+        html: 'H<sub>4</sub>',
+        tag: 'b',
+        className: 'heading4',
+        label: t('base.heading.text', { level: 4 }),
+        keys: ['####', '⎵'],
+      },
+      {
+        html: 'H<sub>5</sub>',
+        tag: 'b',
+        className: 'heading5',
+        label: t('base.heading.text', { level: 5 }),
+        keys: ['#####', '⎵'],
+      },
+      {
+        html: 'H<sub>6</sub>',
+        tag: 'b',
+        className: 'heading6',
+        label: t('base.heading.text', { level: 6 }),
+        keys: ['######', '⎵'],
+      },
+      {
+        icon: 'bold',
+        tag: 'b',
+        label: t('base.bold'),
+        keys: ['**', 'TEXT', '**'],
+      },
+      {
+        icon: 'italic',
+        tag: 'i',
+        label: t('base.italic'),
+        keys: ['*', 'TEXT', '*'],
+      },
+      {
+        icon: 'strike',
+        tag: 's',
+        label: t('base.strike'),
+        keys: ['~~', 'TEXT', '~~'],
+      },
+      {
+        icon: 'subscript',
+        tag: 'sub',
+        label: t('base.subscript'),
+        keys: ['~', 'TEXT', '~'],
+      },
+      {
+        icon: 'superscript',
+        tag: 'sup',
+        label: t('base.superscript'),
+        keys: ['^', 'TEXT', '^'],
+      },
+      {
+        icon: 'bullet-list',
+        label: `· ${t('list.bullet.text')}`,
+        keys: ['*', '⎵'],
+      },
+      {
+        icon: 'ordered-list',
+        label: `1. ${t('list.ordered.text')}`,
+        keys: ['1.', '⎵'],
+      },
+      { icon: 'task-list', label: t('list.task.text'), keys: ['[ ]', '⎵'] },
+      {
+        icon: 'quote',
+        tag: 'blockquote',
+        label: t('base.quote'),
+        keys: ['>', '⎵'],
+      },
+      {
+        icon: 'code',
+        tag: 'code',
+        label: t('base.code'),
+        keys: ['`', 'TEXT', '`'],
+      },
+      {
+        icon: 'highlight',
+        tag: 'mark',
+        label: t('base.highlight.text'),
+        keys: ['==', 'TEXT', '=='],
+      },
+      {
+        icon: 'hr',
+        label: t('insert.hr.text'),
+        keys: ['---', 'Enter'],
+      },
+    ],
+  })
+}
+</script>
+
+<style lang="less" scoped>
+.keyboard-shortcuts-title {
+  margin: 0 0 10px 0;
+  font-size: 12px;
+  &:not(:first-child) {
+    margin-top: 20px;
+  }
+}
+.keyboard-shortcuts {
+  li {
+    list-style: none;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 8px 10px;
+    font-size: 12px;
+    color: var(--umo-text-color);
+    &:not(:last-child) {
+      border-bottom: solid 1px var(--umo-border-color);
+    }
+    line-height: 1.4;
+    span {
+      display: flex;
+      align-items: center;
+      .umo-icon,
+      .shortcut-icon {
+        margin: 0 10px 0 -2px;
+      }
+      sub {
+        transform: translateY(3px);
+      }
+      sup {
+        transform: translateY(-3px);
+      }
+      span.umo-icon {
+        font-weight: 700;
+        margin-right: 8px;
+        :deep(sub) {
+          font-size: 6px;
+          margin-top: 4px;
+          color: var(--umo-primary-color);
+        }
+      }
+    }
+    .keyboard-shortcut {
+      display: flex;
+      align-items: center;
+      kbd {
+        border: solid 1px var(--umo-border-color);
+        padding: 0 5px;
+        border-radius: 3px;
+        color: var(--umo-text-color);
+        background-color: var(--umo-button-hover-background);
+        margin: 0 3px;
+        border-bottom-width: 2px;
+      }
+      &-heading1 b {
+        font-size: 20px;
+      }
+      &-heading2 b {
+        font-size: 18px;
+      }
+      &-heading3 b {
+        font-size: 16px;
+      }
+      &-heading4 b {
+        font-size: 14px;
+      }
+      &-heading5 b {
+        font-size: 12px;
+      }
+      &-heading6 b {
+        font-size: 10px;
+      }
+    }
+    &:hover {
+      background-color: rgba(0, 0, 0, 0.01);
+      .keyboard-shortcut kbd {
+        border-color: var(--umo-text-color);
+      }
+    }
+  }
+  blockquote {
+    padding-left: 10px;
+    border-left: solid 3px var(--umo-border-color);
+    margin: 0;
+  }
+  code {
+    border: solid 1px var(--umo-border-color);
+    border-radius: 3px;
+    background-color: var(--umo-button-hover-background);
+    padding: 0 5px;
+    display: inline;
+  }
+}
+</style>

package/src/components/editor-main/src/components/toolbar/classic.vue

@@ -0,0 +1,325 @@
+<template>
+  <toolbar-scrollable ref="scrollableRef" class="umo-scrollable-container">
+    <div class="umo-classic-menu">
+      <div v-if="menus.length > 1" class="umo-virtual-group">
+        <t-select
+          v-if="selectVisible"
+          v-model="currentMenu"
+          :popup-props="{
+            destroyOnClose: true,
+            attach: container,
+          }"
+          size="small"
+          auto-width
+          borderless
+          @change="toggoleMenu"
+        >
+          <template #prefixIcon>
+            <icon name="menu" />
+          </template>
+          <t-option
+            v-for="item in menus"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </t-select>
+      </div>
+      <template v-if="currentMenu === 'base'">
+        <div class="umo-virtual-group">
+          <menus-toolbar-base-undo />
+          <menus-toolbar-base-redo />
+          <menus-toolbar-base-format-painter />
+          <menus-toolbar-base-clear-format />
+        </div>
+        <div class="umo-virtual-group">
+          <menus-toolbar-base-heading />
+          <menus-toolbar-base-font-family borderless />
+          <menus-toolbar-base-font-size borderless />
+          <menus-toolbar-base-word-wrap />
+          <menus-toolbar-base-bold />
+          <menus-toolbar-base-italic />
+          <menus-toolbar-base-underline />
+          <menus-toolbar-base-strike />
+          <menus-toolbar-base-subscript />
+          <menus-toolbar-base-superscript />
+          <menus-toolbar-base-color />
+          <menus-toolbar-base-background-color />
+          <menus-toolbar-base-highlight v-if="!disableMenu('highlight')" />
+          <menus-toolbar-base-letter-spacing />
+        </div>
+        <div class="umo-virtual-group">
+          <menus-toolbar-base-ordered-list />
+          <menus-toolbar-base-bullet-list />
+          <menus-toolbar-base-task-list v-if="!disableMenu('task-list')" />
+          <menus-toolbar-base-indent />
+          <menus-toolbar-base-outdent />
+          <menus-toolbar-base-line-height v-if="!disableMenu('line-height')" />
+          <menus-toolbar-base-margin v-if="!disableMenu('margin')" />
+          <menus-toolbar-base-align-dropdown />
+          <menus-toolbar-base-code v-if="!disableMenu('code')" />
+          <menus-toolbar-base-quote v-if="!disableMenu('quote')" />
+          <menus-toolbar-base-select-all v-if="!disableMenu('select-all')" />
+        </div>
+        <div class="umo-virtual-group">
+          <menus-toolbar-base-markdown v-if="!disableMenu('markdown')" />
+          <menus-toolbar-base-search-replace />
+        </div>
+        <div class="umo-virtual-group">
+          <menus-toolbar-base-print v-if="!disableMenu('print')" />
+        </div>
+        <div class="virtual-group is-slot">
+          <slot name="toolbar_base" toolbar-mode="classic" />
+        </div>
+      </template>
+      <template v-if="currentMenu === 'insert'">
+        <div class="umo-virtual-group">
+          <menus-toolbar-insert-link v-if="!disableMenu('link')" />
+          <menus-toolbar-insert-image v-if="!disableMenu('image')" />
+          <menus-toolbar-insert-video v-if="!disableMenu('video')" />
+          <menus-toolbar-insert-audio v-if="!disableMenu('audio')" />
+          <menus-toolbar-insert-file v-if="!disableMenu('file')" />
+        </div>
+        <div class="umo-virtual-group">
+          <menus-toolbar-insert-text-box v-if="!disableMenu('text-box')" />
+          <menus-toolbar-insert-details v-if="!disableMenu('details')" />
+          <menus-toolbar-insert-code-block v-if="!disableMenu('code-block')" />
+          <menus-toolbar-insert-symbol v-if="!disableMenu('symbol')" />
+          <menus-toolbar-insert-chinese-date
+            v-if="!disableMenu('chinese-date')"
+          />
+          <menus-toolbar-insert-emoji v-if="!disableMenu('emoji')" />
+        </div>
+        <div class="umo-virtual-group">
+          <menus-toolbar-insert-tag v-if="!disableMenu('tag')" />
+          <menus-toolbar-insert-columns v-if="!disableMenu('columns')" />
+          <menus-toolbar-insert-callout v-if="!disableMenu('callout')" />
+          <menus-toolbar-insert-mention v-if="!disableMenu('mention')" />
+          <menus-toolbar-insert-option-box v-if="!disableMenu('option-box')" />
+        </div>
+        <div class="umo-virtual-group">
+          <menus-toolbar-insert-hard-break v-if="!disableMenu('hard-break')" />
+          <menus-toolbar-insert-hr v-if="!disableMenu('hr')" />
+          <menus-toolbar-insert-bookmark v-if="!disableMenu('bookmark')" />
+          <menus-toolbar-insert-footnote v-if="!disableMenu('footnote')" />
+          <menus-toolbar-insert-toc v-if="!disableMenu('toc')" />
+        </div>
+        <div class="umo-virtual-group">
+          <menus-toolbar-insert-template v-if="!disableMenu('template')" />
+          <menus-toolbar-insert-web-page v-if="!disableMenu('web-page')" />
+        </div>
+        <div class="virtual-group is-slot">
+          <slot name="toolbar_insert" toolbar-mode="classic" />
+        </div>
+      </template>
+      <template v-if="currentMenu === 'table'">
+        <div class="umo-virtual-group">
+          <menus-toolbar-table-insert />
+          <menus-toolbar-table-fix />
+        </div>
+        <div class="umo-virtual-group">
+          <menus-toolbar-table-cells-align />
+          <menus-toolbar-table-cells-background />
+          <!-- <menus-toolbar-table-border-color /> -->
+        </div>
+        <div class="umo-virtual-group">
+          <menus-toolbar-table-add-row-before :huge="false" />
+          <menus-toolbar-table-add-row-after :huge="false" />
+          <menus-toolbar-table-add-column-before :huge="false" />
+          <menus-toolbar-table-add-column-after :huge="false" />
+        </div>
+        <div class="umo-virtual-group">
+          <menus-toolbar-table-delete-row :huge="false" />
+          <menus-toolbar-table-delete-column :huge="false" />
+        </div>
+        <div class="umo-virtual-group">
+          <menus-toolbar-table-merge-cells :huge="false" />
+          <menus-toolbar-table-split-cell :huge="false" />
+        </div>
+        <div class="umo-virtual-group">
+          <menus-toolbar-table-toggle-header-row :huge="false" />
+          <menus-toolbar-table-toggle-header-column :huge="false" />
+          <menus-toolbar-table-toggle-header-cell :huge="false" />
+        </div>
+        <div class="umo-virtual-group">
+          <menus-toolbar-table-next-cell :huge="false" />
+          <menus-toolbar-table-previous-cell :huge="false" />
+        </div>
+        <div class="umo-virtual-group">
+          <menus-toolbar-table-delete />
+        </div>
+        <div class="virtual-group is-slot">
+          <slot name="toolbar_table" toolbar-mode="classic" />
+        </div>
+      </template>
+      <template v-if="currentMenu === 'tools'">
+        <div class="umo-virtual-group">
+          <menus-toolbar-tools-qrcode v-if="!disableMenu('qrcode')" />
+          <menus-toolbar-tools-barcode v-if="!disableMenu('barcode')" />
+          <menus-toolbar-tools-signature v-if="!disableMenu('signature')" />
+        </div>
+        <div class="umo-virtual-group">
+          <menus-toolbar-tools-math v-if="!disableMenu('math')" />
+          <menus-toolbar-tools-diagrams v-if="!disableMenu('diagrams')" />
+          <menus-toolbar-tools-echarts v-if="!disableMenu('echarts')" />
+          <!-- <menus-toolbar-tools-mind-map v-if="!disableMenu('mind-map')" /> -->
+          <menus-toolbar-tools-mermaid v-if="!disableMenu('mermaid')" />
+        </div>
+        <div class="umo-virtual-group">
+          <menus-toolbar-tools-chinese-case
+            v-if="!disableMenu('chinese-case')"
+          />
+        </div>
+        <div class="virtual-group is-slot">
+          <slot name="toolbar_tools" toolbar-mode="classic" />
+        </div>
+      </template>
+      <template v-if="currentMenu === 'page'">
+        <div class="umo-virtual-group">
+          <menus-toolbar-page-margin />
+          <menus-toolbar-page-size v-if="page.layout === 'page'" />
+          <menus-toolbar-page-orientation v-if="page.layout === 'page'" />
+        </div>
+        <div class="umo-virtual-group">
+          <menus-toolbar-page-break />
+          <menus-toolbar-page-break-marks />
+          <menus-toolbar-page-line-number />
+          <menus-toolbar-page-watermark v-if="!disableMenu('watermark')" />
+          <menus-toolbar-page-background v-if="!disableMenu('background')" />
+        </div>
+        <div class="virtual-group is-slot">
+          <slot name="toolbar_page" toolbar-mode="classic" />
+        </div>
+      </template>
+      <template v-if="currentMenu === 'view'">
+        <div class="umo-virtual-group">
+          <menus-toolbar-view-toc v-if="!disableMenu('toc')" />
+          <menus-toolbar-view-fullscreen v-if="!disableMenu('fullscreen')" />
+          <menus-toolbar-view-preview v-if="!disableMenu('preview')" />
+        </div>
+        <div class="umo-virtual-group">
+          <menus-toolbar-view-page v-if="!disableMenu('layout-page')" />
+          <menus-toolbar-view-web v-if="!disableMenu('layout-web')" />
+        </div>
+        <div class="umo-virtual-group">
+          <menus-toolbar-view-zoom v-if="!disableMenu('zoom')" />
+          <menus-toolbar-view-zoom-original
+            v-if="!disableMenu('zoom-original')"
+          />
+          <menus-toolbar-view-zoom-auto v-if="!disableMenu('zoom-auto')" />
+        </div>
+        <div class="umo-virtual-group">
+          <menus-toolbar-view-skin v-if="!disableMenu('skin')" />
+          <menus-toolbar-view-theme v-if="!disableMenu('theme')" />
+          <menus-toolbar-view-locale v-if="!disableMenu('locale')" />
+        </div>
+        <div class="virtual-group is-slot">
+          <slot name="toolbar_view" toolbar-mode="classic" />
+        </div>
+      </template>
+      <template v-if="currentMenu === 'export'">
+        <div class="umo-virtual-group">
+          <menus-toolbar-export-image v-if="!disableMenu('export-image')" />
+          <menus-toolbar-export-pdf v-if="!disableMenu('export-pdf')" />
+          <menus-toolbar-export-text v-if="!disableMenu('export-text')" />
+        </div>
+        <div class="umo-virtual-group">
+          <menus-toolbar-export-share v-if="!disableMenu('share')" />
+          <menus-toolbar-export-embed v-if="!disableMenu('embed')" />
+        </div>
+        <div class="virtual-group is-slot">
+          <slot name="toolbar_export" toolbar-mode="classic" />
+        </div>
+      </template>
+    </div>
+  </toolbar-scrollable>
+</template>
+
+<script setup>
+import { useSelect } from '../../composables/select.js';
+import { ref as _ref } from 'vue';
+
+
+import { inject, watch, nextTick } from 'vue';
+const props = defineProps({
+  menus: {
+    type: Array,
+    default: () => [],
+  },
+  currentMenu: {
+    type: String,
+    default: '',
+  },
+})
+
+const { selectVisible } = useSelect()
+
+const emits = defineEmits(['menu-change'])
+
+const container = inject('container')
+const options = inject('options')
+const page = inject('page')
+const disableMenu = (name) => {
+  return options.value.disableExtensions.includes(name)
+}
+
+// eslint-disable-next-line vue/no-dupe-keys
+let currentMenu = _ref('')
+watch(
+  () => props.currentMenu,
+  async (val) => {
+    currentMenu.value = val
+    await nextTick()
+    scrollableRef.value?.update()
+  },
+  { immediate: true },
+)
+const scrollableRef = _ref(null)
+const toggoleMenu = async (menu) => {
+  emits('menu-change', menu)
+  await nextTick()
+  scrollableRef.value?.update()
+}
+</script>
+
+<style lang="less" scoped>
+.umo-scrollable-container {
+  padding: 10px;
+}
+.umo-classic-menu {
+  display: inline-flex;
+  align-items: center;
+  &:last-child {
+    margin-right: 10px;
+  }
+  .umo-virtual-group {
+    display: flex;
+    align-items: center;
+    &:empty {
+      display: none;
+    }
+    &:not(:last-child),
+    &.is-slot {
+      &::before {
+        content: '';
+        display: block;
+        height: 18px;
+        width: 1px;
+        background-color: var(--umo-border-color-light);
+        margin: 0 10px;
+      }
+    }
+    &:first-child::before {
+      display: none;
+    }
+    :deep(.umo-menu-button .umo-button--shape-square) {
+      .umo-icon {
+        font-size: 14px;
+      }
+    }
+    &-row {
+      display: flex;
+    }
+  }
+}
+</style>