adtec-core-package 2.9.9 → 3.0.1

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

@@ -0,0 +1,118 @@
+<template>
+  <menus-button
+    ico="margin"
+    :text="t('base.margin.text')"
+    menu-type="popup"
+    popup-handle="arrow"
+    hide-text
+    :popup-visible="popupVisible"
+    @toggle-popup="togglePopup"
+    @menu-click="resetMargin()"
+  >
+    <template #content>
+      <div class="umo-node-margin-input">
+        <t-input-number
+          v-model="marginTop"
+          theme="column"
+          align="left"
+          size="small"
+          :label="`↥${t('base.margin.top')}:`"
+          :placeholder="t('base.margin.default')"
+          :input-props="{ clearable: true }"
+          :max="500"
+          :min="0"
+          @change="setMargin"
+        />
+        <t-input-number
+          v-model="marginBottom"
+          theme="column"
+          align="left"
+          size="small"
+          :label="`↧${t('base.margin.bottom')}:`"
+          :placeholder="t('base.margin.default')"
+          :input-props="{ clearable: true }"
+          :max="500"
+          :min="0"
+          @change="setMargin"
+        />
+        <t-button variant="outline" size="small" @click="resetMargin">
+          {{ t('base.margin.reset') }}
+        </t-button>
+      </div>
+    </template>
+  </menus-button>
+</template>
+
+<script setup>
+import { t } from '../../../../composables/i18n.js';
+import { ref as _ref } from 'vue';
+
+import { getSelectionNode } from '../../../../utils/selection'
+
+
+import { inject, watch } from 'vue';
+const { popupVisible, togglePopup } = usePopup()
+const editor = inject('editor')
+
+let marginTop = _ref('')
+let marginBottom = _ref('')
+
+const setMarginValue = () => {
+  if (popupVisible.value) {
+    const node = editor.value ? getSelectionNode(editor.value) : null
+    if (!node?.attrs?.margin) {
+      return
+    }
+    const { margin } = node.attrs
+    if (margin?.top) {
+      marginTop.value = margin.top.replace(/px/g, '')
+    }
+    if (margin?.bottom) {
+      marginBottom.value = margin.bottom.replace(/px/g, '')
+    }
+  } else {
+    marginTop.value = ''
+    marginBottom.value = ''
+  }
+}
+
+const setMargin = () => {
+  editor.value?.commands.setMargin({
+    top: marginTop.value && marginTop.value !== '' ? marginTop.value?.toString() : undefined,
+    bottom:
+      marginBottom.value && marginBottom.value !== ''
+        ? marginBottom.value?.toString()
+        : undefined,
+  })
+}
+
+watch(
+  () => popupVisible.value,
+  (visible) => {
+    if (visible) {
+      setMarginValue()
+      if (!visible && editor.value) {
+        editor.value.commands.focus()
+      }
+    }
+  },
+  { immediate: true },
+)
+const resetMargin = () => {
+  editor.value?.commands.unsetMargin()
+  popupVisible.value = false
+}
+</script>
+
+<style lang="less" scoped>
+.umo-node-margin-input {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  --td-comp-size-xs: 26px;
+  width: 150px;
+  :deep(.umo-input-number) {
+    width: 100%;
+  }
+}
+</style>

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

@@ -0,0 +1,50 @@
+<template>
+  <menus-button
+    v-if="options.document?.enableMarkdown"
+    :text="t('base.markdown.text')"
+    ico="markdown"
+    :tooltip="
+      $document.enableMarkdown
+        ? t('base.markdown.disable')
+        : t('base.markdown.enable')
+    "
+    :menu-active="$document.enableMarkdown"
+    huge
+    @menu-click="toggleMarkdownMode"
+  />
+</template>
+
+<script setup>
+import { t } from '../../../../composables/i18n.js';
+
+import { useConfirm } from '../../../../composables/dialog.js';
+
+import { useState } from '../../../../composables/state.js';
+import { inject, nextTick } from 'vue';
+
+const container = inject('container')
+const destroyed = inject('destroyed')
+const options = inject('options')
+const $document = useState('document', options)
+
+const toggleMarkdownMode = () => {
+  const dialog = useConfirm({
+    attach: container,
+    theme: 'warning',
+    header: $document.value.enableMarkdown
+      ? t('base.markdown.disable')
+      : t('base.markdown.enable'),
+    body: t('base.markdown.message'),
+    confirmBtn: {
+      theme: 'warning',
+      content: t('base.markdown.toggle'),
+    },
+    async onConfirm() {
+      $document.value.enableMarkdown = !$document.value.enableMarkdown
+      dialog.destroy()
+      await nextTick()
+      window.location.reload()
+    },
+  })
+}
+</script>

package/src/components/editor-main/src/components/menus/toolbar/base/ordered-list.vue

@@ -0,0 +1,184 @@
+<template>
+  <menus-button
+    ico="ordered-list"
+    :text="t('list.ordered.text')"
+    shortcut="Ctrl+Shift+7"
+    menu-type="popup"
+    popup-handle="arrow"
+    hide-text
+    :popup-visible="popupVisible"
+    :menu-active="editor?.isActive('orderedList')"
+    :disabled="
+      !editor?.can().chain().focus().toggleBulletList().run() &&
+      !editor?.can().chain().focus().toggleOrderedList().run() &&
+      !editor?.can().chain().focus().toggleTaskList().run()
+    "
+    @toggle-popup="togglePopup"
+    @menu-click="toggleOrderedList(options[0].value)"
+  >
+    <template #content>
+      <div class="umo-ordered-list-group">
+        <tooltip
+          v-for="item in options"
+          :key="item.value"
+          :content="item.label"
+        >
+          <div
+            class="umo-ordered-list-item"
+            :class="{ active: listStyleType === item.value }"
+            @click="toggleOrderedList(item.value)"
+          >
+            <icon
+              class="umo-icon-ordered-list"
+              :name="`ordered-list-${item.value}`"
+            />
+          </div>
+        </tooltip>
+      </div>
+      <div class="umo-ordered-list-divider"></div>
+      <div
+        class="umo-ordered-list-title"
+        v-text="t('list.ordered.property')"
+      ></div>
+      <div class="umo-ordered-list-properties">
+        <t-input-number
+          v-model="startAt"
+          :min="1"
+          align="left"
+          theme="column"
+          @change="changeOrderedListStart"
+        >
+          <template #label
+            ><span v-text="t('list.ordered.startAt')"></span
+          ></template>
+        </t-input-number>
+      </div>
+    </template>
+  </menus-button>
+</template>
+
+<script setup>
+import { t } from '../../../../composables/i18n.js';
+import { ref as _ref } from 'vue';
+
+
+import { inject, watch } from 'vue';
+const { popupVisible, togglePopup } = usePopup()
+const editor = inject('editor')
+
+const options = [
+  { label: t('list.ordered.decimal'), value: 'decimal' },
+  {
+    label: t('list.ordered.decimalLeadingZero'),
+    value: 'decimal-leading-zero',
+  },
+  { label: t('list.ordered.lowerRoman'), value: 'lower-roman' },
+  { label: t('list.ordered.upperRoman'), value: 'upper-roman' },
+  { label: t('list.ordered.lowerLatin'), value: 'lower-latin' },
+  { label: t('list.ordered.upperLatin'), value: 'upper-latin' },
+  {
+    label: t('list.ordered.tradChineseInformal'),
+    value: 'trad-chinese-informal',
+  },
+  {
+    label: t('list.ordered.simpChineseFormal'),
+    value: 'simp-chinese-formal',
+  },
+]
+
+// 列表类型
+let listStyleType = _ref('left')
+watch(
+  () => popupVisible.value,
+  (val) => {
+    if (val && editor.value) {
+      const { listType } = editor.value.getAttributes('orderedList')
+      listStyleType.value = listType
+    }
+  },
+)
+const toggleOrderedList = (listType) => {
+  const chain = editor.value?.chain().focus()
+  if (editor.value?.isActive('orderedList')) {
+    if (editor.value.getAttributes('orderedList').listType === listType) {
+      chain?.toggleOrderedList().run()
+    } else {
+      chain?.updateAttributes('orderedList', { listType }).run()
+    }
+  } else {
+    chain
+      ?.toggleOrderedList()
+      .updateAttributes('orderedList', { listType })
+      .run()
+  }
+  listStyleType.value = listType
+  popupVisible.value = false
+}
+
+// 起始编号
+let startAt = _ref(1)
+const changeOrderedListStart = () => {
+  if (editor.value) {
+    editor.value
+      .chain()
+      .focus()
+      .updateAttributes('orderedList', { start: startAt.value })
+      .run()
+  }
+}
+watch(
+  () => popupVisible.value,
+  (visible) => {
+    if (visible && editor.value) {
+      startAt.value = editor.value.getAttributes('orderedList').start || 1
+    }
+  },
+)
+</script>
+
+<style lang="less" scoped>
+.umo-ordered-list-group {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  flex-wrap: wrap;
+  gap: 8px;
+  width: 248px;
+  margin-bottom: 10px;
+  .umo-ordered-list-item {
+    cursor: pointer;
+    padding: 5px;
+    border: solid 1px var(--umo-border-color);
+    box-sizing: border-box;
+    &:nth-child(4n) {
+      margin-right: 0;
+    }
+    &:hover {
+      background-color: var(--umo-button-hover-background);
+    }
+    &.active {
+      border-color: var(--umo-primary-color);
+    }
+  }
+  .umo-icon-ordered-list {
+    font-size: 44px;
+  }
+}
+.umo-ordered-list-title {
+  color: var(--umo-text-color-light);
+  font-size: 12px;
+  margin: 7px 0 4px;
+}
+.umo-ordered-list-divider {
+  height: 1px;
+  background-color: var(--umo-border-color-light);
+  margin: 5px 0 0;
+}
+.umo-ordered-list-properties {
+  display: flex;
+  flex-direction: column;
+  :deep(.umo-input-number) {
+    width: 248px;
+  }
+}
+</style>

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

@@ -0,0 +1,17 @@
+<template>
+  <menus-button
+    ico="outdent"
+    :text="t('base.outdent')"
+    shortcut="Shift+Tab"
+    hide-text
+    :disabled="!editor?.can().chain().focus().setOutdent().run()"
+    @menu-click="editor?.chain().focus().setOutdent().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/base/print.vue

@@ -0,0 +1,19 @@
+<template>
+  <menus-button
+    :text="t('print.text')"
+    ico="print"
+    shortcut="Ctrl+P"
+    :disabled="editor?.isEmpty"
+    huge
+    @menu-click="printing = true"
+  >
+  </menus-button>
+</template>
+
+<script setup>
+import { t } from '../../../../composables/i18n.js';
+import { inject } from 'vue';
+
+const editor = inject('editor')
+const printing = inject('printing')
+</script>

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

@@ -0,0 +1,18 @@
+<template>
+  <menus-button
+    :text="t('base.quote')"
+    ico="quote"
+    shortcut="Ctrl+Shift+B"
+    hide-text
+    :menu-active="editor?.isActive('blockquote')"
+    :disabled="!editor?.can().chain().focus().toggleBlockquote().run()"
+    @menu-click="editor?.chain().focus().toggleBlockquote().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/base/redo.vue

@@ -0,0 +1,20 @@
+<template>
+  <menus-button
+    ico="redo"
+    :text="t('base.redo')"
+    shortcut="Ctrl+Y / Ctrl+Shift+Z"
+    hide-text
+    :disabled="historyRecords.undone.length === 0"
+    @menu-click="menuClick"
+  />
+</template>
+
+<script setup>
+import { t } from '../../../../composables/i18n.js';
+import { inject } from 'vue';
+
+/* 重做*/
+const historyRecords = inject('historyRecords')
+
+const menuClick = inject('redoHistory')
+</script>

package/src/components/editor-main/src/components/menus/toolbar/base/search-replace.vue

@@ -0,0 +1,16 @@
+<template>
+  <menus-button
+    ico="search-replace"
+    :text="t('search.text')"
+    shortcut="Ctrl+F"
+    huge
+    @menu-click="searchReplace = true"
+  />
+</template>
+
+<script setup>
+import { t } from '../../../../composables/i18n.js';
+import { inject } from 'vue';
+
+const searchReplace = inject('searchReplace')
+</script>

package/src/components/editor-main/src/components/menus/toolbar/base/select-all.vue

@@ -0,0 +1,16 @@
+<template>
+  <menus-button
+    ico="select-all"
+    :text="t('base.selectAll')"
+    shortcut="Ctrl+A"
+    hide-text
+    @menu-click="editor?.chain().focus().selectAll().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/base/strike.vue

@@ -0,0 +1,18 @@
+<template>
+  <menus-button
+    ico="strike"
+    :text="t('base.strike')"
+    shortcut="Ctrl+Shift+X"
+    hide-text
+    :menu-active="editor?.isActive('strike')"
+    :disabled="!editor?.can().chain().focus().toggleStrike().run()"
+    @menu-click="editor?.chain().focus().toggleStrike().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/base/subscript.vue

@@ -0,0 +1,18 @@
+<template>
+  <menus-button
+    ico="subscript"
+    :text="t('base.subscript')"
+    shortcut="Ctrl+,"
+    hide-text
+    :menu-active="editor?.isActive('subscript')"
+    :disabled="!editor?.can().chain().focus().toggleSubscript().run()"
+    @menu-click="editor?.commands.toggleSubscript()"
+  />
+</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/base/superscript.vue

@@ -0,0 +1,18 @@
+<template>
+  <menus-button
+    ico="superscript"
+    :text="t('base.superscript')"
+    shortcut="Ctrl+."
+    hide-text
+    :menu-active="editor?.isActive('superscript')"
+    :disabled="!editor?.can().chain().focus().toggleSuperscript().run()"
+    @menu-click="editor?.commands.toggleSuperscript()"
+  />
+</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/base/task-list.vue

@@ -0,0 +1,47 @@
+<template>
+  <menus-button
+    ico="task-list"
+    :text="t('list.task.text')"
+    shortcut="Ctrl+Shift+9"
+    menu-type="dropdown"
+    popup-handle="arrow"
+    hide-text
+    :menu-active="editor?.isActive('taskList')"
+    :disabled="
+      !editor?.can().chain().focus().toggleBulletList().run() &&
+      !editor?.can().chain().focus().toggleOrderedList().run() &&
+      !editor?.can().chain().focus().toggleTaskList().run()
+    "
+    @menu-click="editor?.chain().focus().toggleTaskList().run()"
+  >
+    <template #dropmenu>
+      <t-dropdown-menu>
+        <t-dropdown-item
+          :disabled="!editor?.can().splitListItem('taskItem')"
+          @click="editor?.chain().focus().splitListItem('taskItem').run()"
+        >
+          {{ t('list.task.split') }}
+        </t-dropdown-item>
+        <t-dropdown-item
+          :disabled="!editor?.can().sinkListItem('taskItem')"
+          @click="editor?.chain().focus().sinkListItem('taskItem').run()"
+        >
+          {{ t('list.task.sink') }}
+        </t-dropdown-item>
+        <t-dropdown-item
+          :disabled="!editor?.can().liftListItem('taskItem')"
+          @click="editor?.chain().focus().liftListItem('taskItem').run()"
+        >
+          {{ t('list.task.lift') }}
+        </t-dropdown-item>
+      </t-dropdown-menu>
+    </template>
+  </menus-button>
+</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/base/underline.vue

@@ -0,0 +1,18 @@
+<template>
+  <menus-button
+    ico="underline"
+    :text="t('base.underline')"
+    shortcut="Ctrl+U"
+    hide-text
+    :menu-active="editor?.isActive('underline')"
+    :disabled="!editor?.can().chain().focus().toggleUnderline().run()"
+    @menu-click="editor?.chain().focus().toggleUnderline().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/base/undo.vue

@@ -0,0 +1,18 @@
+<template>
+  <menus-button
+    ico="undo"
+    :text="t('base.undo')"
+    shortcut="Ctrl+Z"
+    hide-text
+    :disabled="historyRecords.done.length === 0"
+    @menu-click="menuClick"
+  />
+</template>
+
+<script setup>
+import { t } from '../../../../composables/i18n.js';
+import { inject } from 'vue';
+
+const historyRecords = inject('historyRecords')
+const menuClick = inject('undoHistory')
+</script>

package/src/components/editor-main/src/components/menus/toolbar/base/word-wrap.vue

@@ -0,0 +1,47 @@
+<template>
+  <menus-button
+    :text="t('base.wordWrap.text')"
+    ico="word-wrap"
+    menu-type="dropdown"
+    hide-text
+    :select-options="wordWraps"
+    :disabled="
+      !editor?.can().chain().focus().setWordWrap().run() ||
+      editor?.isActive('image')
+    "
+    @click="setWordWrap"
+  >
+  </menus-button>
+</template>
+
+<script setup>
+import { t } from '../../../../composables/i18n.js';
+import { inject, computed } from 'vue';
+
+const editor = inject('editor')
+
+const wordWraps = computed(() => [
+  {
+    content: t('base.wordWrap.normal'),
+    value: 'normal',
+    active: editor.value?.isActive({ wordWrap: 'normal' }),
+  },
+  {
+    content: t('base.wordWrap.breakWord'),
+    value: 'break-word',
+    active: editor.value?.isActive({ wordWrap: 'break-word' }),
+  },
+  {
+    content: t('base.wordWrap.breakAll'),
+    value: 'break-all',
+    active: editor.value?.isActive({ wordWrap: 'break-all' }),
+  },
+])
+
+const setWordWrap = ({ content, value }) => {
+  if (!content) {
+    return
+  }
+  editor.value?.chain().focus().setWordWrap(value).run()
+}
+</script>