adtec-core-package 2.9.9 → 3.0.1

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

@@ -0,0 +1,97 @@
+<template>
+  <menus-button
+    ico="columns"
+    :text="t('insert.columns.text')"
+    menu-type="popup"
+    huge
+    :popup-visible="popupVisible"
+    @toggle-popup="togglePopup"
+  >
+    <template #content>
+      <div class="umo-columns-title">{{ t('insert.columns.number') }}</div>
+      <div class="umo-columns-container">
+        <div
+          v-for="column in columns"
+          :key="column"
+          class="umo-columns-item"
+          :class="{ 'umo-columns-item-selected': activeColumn >= column }"
+          @mouseenter="setActiveColumn(column)"
+          @click="setColumns(column)"
+        >
+          {{ column }}
+        </div>
+      </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')
+
+let activeColumn = _ref(0)
+
+const columns = [1, 2, 3, 4, 5, 6]
+const setActiveColumn = (column) => {
+  activeColumn.value = column
+}
+const setColumns = (column) => {
+  let content = '<div class="umo-node-column-container">'
+  for (let i = 0; i < column; i++) {
+    content += '<div class="prosemirror-column"><p></p></div>'
+  }
+  content += '</div>'
+  editor.value?.chain().focus().insertContent(content).run()
+  // editor.value?.chain().focus().setColumns(column, true).run()
+  popupVisible.value = false
+}
+
+watch(
+  () => popupVisible.value,
+  (visible) => {
+    if (!visible) {
+      activeColumn.value = 0
+    }
+  },
+)
+</script>
+
+<style lang="less" scoped>
+.umo-columns {
+  &-title {
+    font-size: 14px;
+    color: var(--umo-text-color-light);
+    line-height: 1;
+    margin-bottom: 10px;
+  }
+  &-container {
+    width: 180px;
+    display: grid;
+    grid-auto-flow: column;
+    grid-auto-columns: 1fr;
+    gap: 6px;
+  }
+
+  &-item {
+    background-color: var(--umo-content-table-selected-background);
+    border-radius: var(--umo-radius);
+    cursor: pointer;
+    height: 50px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.3s ease;
+    color: var(--umo-text-color-light);
+    &-selected {
+      background-color: var(--umo-primary-color);
+      color: var(--umo-color-white);
+      opacity: 0.9;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,34 @@
+<template>
+  <menus-button
+    ico="details"
+    :text="t('insert.details')"
+    huge
+    @menu-click="editor?.chain().focus().setDetails().run()"
+  />
+</template>
+<script setup>
+import { t } from '../../../../composables/i18n.js';
+import { inject } from 'vue';
+
+const editor = inject('editor')
+</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/emoji.vue

@@ -0,0 +1,103 @@
+<template>
+  <menus-button
+    ico="emoji"
+    :text="t('insert.emoji')"
+    menu-type="popup"
+    huge
+    :popup-visible="popupVisible"
+    @toggle-popup="togglePopup"
+  >
+    <template #content>
+      <div class="umo-emojis-container umo-scrollbar">
+        <template v-for="(group, index) in options.dicts?.emojis" :key="index">
+          <div class="umo-emojis-group-title" v-text="l(group.label)"></div>
+          <div class="umo-emojis-group-container">
+            <div
+              v-for="(item, i) in group.items.split(' ')"
+              :key="i"
+              class="umo-emojis-group-item"
+              @click="selectEmoji(item)"
+            >
+              {{ item }}
+            </div>
+          </div>
+        </template>
+      </div>
+    </template>
+  </menus-button>
+</template>
+
+<script setup>
+import { t } from '../../../../composables/i18n.js';
+import { inject } from 'vue';
+
+const props = defineProps({
+  onSelectEmoji: undefined,
+})
+const { popupVisible, togglePopup } = usePopup()
+const editor = inject('editor')
+const options = inject('options')
+
+const selectEmoji = (emoji) => {
+  if (props.onSelectEmoji) {
+    props.onSelectEmoji(emoji)
+  } else {
+    editor.value?.chain().focus().insertContent(emoji).run()
+  }
+  popupVisible.value = false
+}
+</script>
+
+<style lang="less" scoped>
+.umo-emojis-container {
+  width: 404px;
+  max-height: var(--umo-popup-max-height);
+  min-height: 320px;
+  overflow: auto;
+  margin: calc(var(--umo-popup-content-padding) * -1);
+}
+
+.umo-emojis-group {
+  position: relative;
+  &-title {
+    color: var(--umo-text-color-light);
+    font-size: 12px;
+    position: sticky;
+    line-height: 2.4;
+    top: 0.5px;
+    margin-left: 0.5px;
+    background-color: var(--umo-button-hover-background);
+    padding-left: calc(var(--umo-popup-content-padding) + 5px);
+    border-top-left-radius: var(--umo-radius);
+    &:first-child {
+      margin-top: 0;
+    }
+  }
+  &-container {
+    display: flex;
+    flex-wrap: wrap;
+    padding: 10px var(--umo-popup-content-padding);
+    overflow: auto;
+    gap: 2px;
+  }
+  &-item {
+    flex-basis: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    line-height: 1em;
+    border-radius: var(--umo-radius);
+    cursor: pointer;
+    font-size: 20px;
+    margin-bottom: 2px;
+    color: var(--umo-text-color);
+    transition: font-size 0.2s;
+    &:hover {
+      background-color: var(--umo-button-hover-background);
+      font-size: 24px;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,23 @@
+<template>
+  <menus-button
+    ico="file"
+    :text="t('insert.file')"
+    huge
+    @menu-click="
+      editor
+        ?.chain()
+        .focus()
+        .selectFiles('file', 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/footnote.vue

@@ -0,0 +1,15 @@
+<template>
+  <menus-button
+    ico="footnote"
+    :text="t('insert.footnote')"
+    huge
+    @menu-click="editor?.commands.addFootnote"
+  />
+</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/hard-break.vue

@@ -0,0 +1,16 @@
+<template>
+  <menus-button
+    ico="hard-break"
+    :text="t('insert.hardBreak')"
+    huge
+    shortcut="Shift+Enter"
+    @menu-click="editor?.chain().focus().setHardBreak().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/hr.vue

@@ -0,0 +1,141 @@
+<template>
+  <menus-button
+    ico="hr"
+    :text="t('insert.hr.text')"
+    menu-type="popup"
+    huge
+    :popup-visible="popupVisible"
+    @toggle-popup="togglePopup"
+  >
+    <template #content>
+      <div class="umo-page-divider-dropdown">
+        <div class="umo-page-divider-item-title">
+          <span v-text="t('insert.hr.title')"></span>
+        </div>
+        <div
+          v-for="item in options"
+          :key="item.value"
+          class="umo-page-divider-item"
+          :value="item.value"
+          :title="item.label"
+          @click="setHorizontalRule(item)"
+        >
+          <hr
+            class="umo-page-divider"
+            :data-type="item.value"
+            :style="{ color: currentColor }"
+          />
+        </div>
+        <t-popup
+          v-model="colorPickerVisible"
+          :attach="container"
+          placement="right-bottom"
+          trigger="click"
+        >
+          <div
+            class="umo-page-divider-item umo-open-color-picker"
+            :class="{ active: colorPickerVisible }"
+          >
+            <span v-text="t('insert.hr.color')"></span>
+            <div class="arrow">
+              <icon name="arrow-down" />
+            </div>
+          </div>
+          <template #content>
+            <div class="umo-page-divider-color-picker">
+              <picker-color default-color="#000" @change="colorChange" />
+            </div>
+          </template>
+        </t-popup>
+      </div>
+    </template>
+  </menus-button>
+</template>
+
+<script setup>
+import { t } from '../../../../composables/i18n.js';
+import { ref as _ref } from 'vue';
+
+
+import { inject } from 'vue';
+const { popupVisible, togglePopup } = usePopup()
+const container = inject('container')
+const editor = inject('editor')
+
+const options = [
+  { label: t('insert.hr.signle'), value: 'signle' },
+  { label: t('insert.hr.double'), value: 'double' },
+  { label: t('insert.hr.dotted'), value: 'dotted' },
+  { label: t('insert.hr.dashed'), value: 'dashed' },
+  { label: t('insert.hr.dashedDouble'), value: 'dashed-double' },
+  { label: t('insert.hr.signleBold'), value: 'signle-bold' },
+  { label: t('insert.hr.doubleBoldTop'), value: 'double-bold-top' },
+  { label: t('insert.hr.doubleBoldBottom'), value: 'double-bold-bottom' },
+  { label: t('insert.hr.wavy'), value: 'wavy' },
+]
+
+let currentColor = _ref('#000')
+let colorPickerVisible = _ref(false)
+const colorChange = (color) => {
+  currentColor.value = color
+  colorPickerVisible.value = false
+}
+
+const setHorizontalRule = ({ value }) => {
+  if (!value || !editor.value) {
+    return
+  }
+  editor.value
+    .chain()
+    .focus()
+    .setHorizontalRule({ type: value, color: currentColor.value })
+    .run()
+  popupVisible.value = false
+}
+</script>
+
+<style lang="less" scoped>
+@import '../../../../assets/styles/_mixins.less';
+
+.umo-page-divider-dropdown {
+  width: 200px;
+  .umo-page-divider-item {
+    padding: 2px 5px;
+    cursor: pointer;
+    border-radius: var(--umo-radius);
+    &:hover {
+      background-color: var(--td-bg-color-container-hover);
+    }
+    &.umo-open-color-picker {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 5px 6px;
+      cursor: pointer;
+      color: var(--umo-text-color-light);
+      &:hover,
+      &.active {
+        background-color: var(--td-bg-color-container-hover);
+        border-radius: var(--umo-radius);
+      }
+      .arrow {
+        .umo-icon {
+          transform: rotate(-90deg);
+        }
+      }
+    }
+    &-title {
+      color: var(--umo-text-color-light);
+      padding: 5px 6px;
+    }
+  }
+  .umo-page-divider {
+    .umo-page-divider();
+    margin: 3px;
+    width: auto;
+  }
+}
+:global(.umo-page-divider-color-picker) {
+  padding: 12px;
+}
+</style>

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

@@ -0,0 +1,84 @@
+<template>
+  <menus-button
+    ico="image"
+    :text="t('insert.image.text')"
+    menu-type="dropdown"
+    huge
+    overlay-class-name="umo-image-dropdown"
+  >
+    <template #dropmenu>
+      <t-dropdown-menu>
+        <t-dropdown-item
+          v-for="item in imageOptions"
+          :key="item.value"
+          :value="item.value"
+          @click="insertImage(item.value)"
+        >
+          <icon :name="item.icon" class="umo-image-dropdown-icon" />
+          <div>
+            <div class="umo-image-dropdown-title">{{ item.title }}</div>
+            <div class="umo-image-dropdown-description">
+              {{ item.description }}
+            </div>
+          </div>
+        </t-dropdown-item>
+      </t-dropdown-menu>
+    </template>
+  </menus-button>
+</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')
+
+const imageOptions = [
+  {
+    title: t('insert.image.block'),
+    value: 'image',
+    icon: 'image',
+    description: t('insert.image.blockdesc'),
+  },
+  {
+    title: t('insert.image.inline'),
+    value: 'inlineImage',
+    icon: 'image-inline',
+    description: t('insert.image.inlinedesc'),
+  },
+]
+
+const insertImage = (type) => {
+  editor.value
+    ?.chain()
+    .focus()
+    .selectFiles(type, container, uploadFileMap.value)
+    .run()
+}
+</script>
+<style lang="less">
+.umo-image-dropdown {
+  .umo-dropdown__item-text {
+    padding: 5px 5px;
+    display: flex;
+    gap: 8px;
+  }
+  &-icon {
+    font-size: 2em;
+    opacity: 0.6;
+  }
+  &-title {
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+  }
+  &-description {
+    color: var(--umo-text-color-light);
+    white-space: normal;
+    line-height: 1.4;
+    font-size: 12px;
+  }
+}
+</style>

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

@@ -0,0 +1,121 @@
+<template>
+  <menus-button
+    ico="link"
+    :text="t('insert.link.text')"
+    menu-type="popup"
+    huge
+    :popup-visible="popupVisible"
+    @toggle-popup="togglePopup"
+  >
+    <template #content>
+      <div class="umo-link-container">
+        <t-form label-align="top">
+          <t-form-item :label="t('insert.link.hrefText')">
+            <t-input
+              v-model.trim="text"
+              :status="error.text ? 'error' : 'default'"
+              :placeholder="t('insert.link.hrefTextTip')"
+              clearable
+            />
+          </t-form-item>
+          <t-form-item :label="t('insert.link.href')">
+            <t-input
+              v-model="href"
+              :status="error.href ? 'error' : 'default'"
+              type="url"
+              clearable
+              :placeholder="t('insert.link.hrefTip')"
+            />
+          </t-form-item>
+          <t-form-item>
+            <t-button
+              theme="primary"
+              type="submit"
+              :disabled="href === '' || text === ''"
+              @click="insertLink"
+              >{{ t('insert.link.confirm') }}</t-button
+            >
+            <t-button
+              theme="default"
+              variant="text"
+              style="margin-left: 10px"
+              :disabled="href === '' || text === ''"
+              @click="removeLink"
+              >{{ t('insert.link.remove') }}</t-button
+            >
+          </t-form-item>
+        </t-form>
+      </div>
+    </template>
+  </menus-button>
+</template>
+
+<script setup>
+import { t } from '../../../../composables/i18n.js';
+import { ref as _ref } from 'vue';
+
+import { getSelectionText } from '../../../../utils/selection'
+
+
+import { inject, watch } from 'vue';
+const { popupVisible, togglePopup } = usePopup()
+const editor = inject('editor')
+
+let text = _ref('')
+let href = _ref('')
+const error = _ref({ text: false, href: false })
+const insertLink = () => {
+  if (text.value === '') {
+    error.value.text = true
+    return
+  }
+  if (
+    !href.value.startsWith('http://') &&
+    !href.value.startsWith('https://') &&
+    !href.value.startsWith('ftp://') &&
+    !href.value.startsWith('ftps://') &&
+    !href.value.startsWith('mailto://')
+  ) {
+    error.value.href = true
+    return
+  }
+  error.value.text = false
+  error.value.href = false
+  editor.value?.commands.setLink({ href: href.value, target: '_blank' })
+  editor.value?.chain().focus().insertContent(text.value).run()
+  popupVisible.value = false
+}
+const removeLink = () => {
+  editor.value?.chain().focus().unsetLink().run()
+  popupVisible.value = false
+}
+
+watch(
+  () => popupVisible.value,
+  (val) => {
+    if (val) {
+      text.value = editor.value ? getSelectionText(editor.value) : ''
+      href.value = editor?.value?.getAttributes('link').href || ''
+    } else {
+      text.value = ''
+      href.value = ''
+      error.value.text = false
+      error.value.href = false
+    }
+  },
+)
+</script>
+
+<style lang="less" scoped>
+.umo-link-container {
+  padding: 0 2px 2px;
+  margin-top: -6px;
+  width: 320px;
+  :deep(.umo-form__item) {
+    margin-bottom: 5px;
+    &:last-child {
+      margin-top: 15px;
+    }
+  }
+}
+</style>

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

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