adtec-core-package 3.0.0 → 3.0.1

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

@@ -0,0 +1,322 @@
+<template>
+  <div
+    v-if="$toolbar.mode !== 'classic'"
+    class="umo-toolbar-headding"
+    :class="{ unfold: popupVisible }"
+    :disabled="!editor?.isEditable"
+  >
+    <div class="umo-heading-container">
+      <template v-for="(item, index) in options" :key="item.value">
+        <div
+          v-if="index < 4"
+          class="card"
+          :class="{ active: item.value === currentValue && editor?.isEditable }"
+          @mousedown.prevent
+          @click="setHeading(item.value)"
+        >
+          <div class="title" :class="item.desc">{{ item.label }}</div>
+          <div class="subtitle">{{ item.desc }}</div>
+        </div>
+      </template>
+      <t-popup
+        :attach="container"
+        trigger="click"
+        placement="bottom-right"
+        overlay-class-name="umo-heading-container-popup"
+        destroy-on-close
+        :visible="popupVisible"
+      >
+        <div class="arrow" @click="popupVisible = !popupVisible">
+          <icon name="arrow-down" />
+        </div>
+        <template #content>
+          <div ref="popupContentRef" class="umo-heading-container">
+            <template v-for="(item, index) in options" :key="item.value">
+              <div
+                v-if="index >= 4"
+                class="card"
+                :class="{
+                  active: item.value === currentValue && editor?.isEditable,
+                }"
+                @mousedown.prevent
+                @click="setHeading(item.value)"
+              >
+                <div class="title" :class="item.desc">{{ item.label }}</div>
+                <div class="subtitle">{{ item.desc }}</div>
+              </div>
+            </template>
+          </div>
+        </template>
+      </t-popup>
+    </div>
+  </div>
+  <menus-button
+    v-else
+    :text="t('base.heading.tip')"
+    hide-text
+    menu-type="select"
+    :style="{ width: '76px' }"
+    :placeholder="t('base.heading.text')"
+    borderless
+    :select-value="currentValue"
+    @menu-click="setHeading"
+  >
+    <t-option
+      v-for="item in options"
+      :key="item.value"
+      class="umo-heading-select-option"
+      :value="item.value"
+      :label="item.label"
+    >
+      <div class="heading-size" :class="item.desc">{{ item.label }}</div>
+    </t-option>
+  </menus-button>
+</template>
+
+<script setup>
+import { t } from '../../../../composables/i18n.js';
+
+import { useState } from '../../../../composables/state.js';
+import { ref as _ref } from 'vue';
+
+
+import { inject, ref, computed } from 'vue';
+import { onClickOutside } from '@vueuse/core';
+import {
+  applyHeadingWithoutScroll,
+  captureScrollPositions,
+  restoreScrollPositions,
+} from '../../../../utils/editor-scroll.js';
+const { popupVisible } = usePopup()
+const container = inject('container')
+const editor = inject('editor')
+const $toolbar = useState('toolbar', inject('options'))
+const popupContentRef = ref(null)
+
+const options = _ref([
+  { label: t('base.heading.paragraph'), desc: 'text', value: 'paragraph' },
+])
+for (const i of Array.from({ length: 6 }).keys()) {
+  const level = i + 1
+  options.value.push({
+    label: `${t('base.heading.text', { level })}`,
+    desc: `h${level}`,
+    value: level,
+  })
+}
+
+const currentValue = computed(() => {
+  const heading = (level) => editor.value?.isActive('heading', { level })
+  if (editor.value) {
+    if (editor.value?.isActive('paragraph')) {
+      return 'paragraph'
+    }
+    if (heading(1)) {
+      return 1
+    }
+    if (heading(2)) {
+      return 2
+    }
+    if (heading(3)) {
+      return 3
+    }
+    if (heading(4)) {
+      return 4
+    }
+    if (heading(5)) {
+      return 5
+    }
+    if (heading(6)) {
+      return 6
+    }
+  }
+  return ''
+})
+
+const FOCUS_WITHOUT_SCROLL = { scrollIntoView: false }
+
+const setHeading = (value) => {
+  const ed = editor.value
+  if (!ed) return
+
+  const scrollPositions = captureScrollPositions(container)
+  ed.commands.focus(undefined, FOCUS_WITHOUT_SCROLL)
+  applyHeadingWithoutScroll(ed, value)
+  restoreScrollPositions(scrollPositions)
+  popupVisible.value = false
+}
+
+onClickOutside(
+  popupContentRef,
+  () => {
+    popupVisible.value = false
+  },
+  {
+    ignore: ['.umo-popup'],
+  },
+)
+</script>
+
+<style lang="less" scoped>
+.umo-toolbar-headding {
+  width: 318px;
+  height: 56px;
+  position: relative;
+  z-index: 10;
+  overflow: hidden;
+  border-radius: 3px;
+  box-sizing: border-box;
+  &[disabled='true'] {
+    pointer-events: none;
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+  &.unfold {
+    overflow: visible;
+    .umo-heading-container {
+      border-color: var(--umo-border-color-light);
+      border-bottom: none;
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+  }
+}
+.umo-heading-container {
+  display: flex;
+  background-color: var(--umo-button-hover-background);
+  padding: 2px 5px;
+  flex-flow: row wrap;
+  align-content: flex-start;
+  border-radius: var(--umo-radius);
+  box-sizing: border-box;
+  border: solid 1px transparent;
+  white-space: nowrap;
+  .card {
+    background-color: var(--umo-color-white);
+    border: solid 1px var(--umo-border-color-light);
+    border-radius: var(--umo-radius);
+    margin: 4px 2px;
+    text-align: center;
+    padding: 5px 10px;
+    box-sizing: border-box;
+    cursor: pointer;
+    flex: 0 0 68px;
+    height: 42px;
+    &:hover,
+    &.active {
+      border-color: var(--umo-primary-color);
+    }
+    .title {
+      font-size: 14px;
+      line-height: 18px;
+      font-weight: 600;
+      &.text {
+        font-size: 12px;
+        font-weight: 400;
+      }
+      &.h1 {
+        font-size: 16px;
+      }
+      &.h2 {
+        font-size: 14px;
+      }
+      &.h3 {
+        font-size: 13px;
+      }
+      &.h4 {
+        font-size: 12px;
+      }
+      &.h5 {
+        font-size: 11px;
+      }
+      &.h6 {
+        font-size: 10px;
+      }
+    }
+    .subtitle {
+      font-size: 8px;
+      color: var(--umo-text-color-light);
+      text-transform: capitalize;
+      margin-top: 3px;
+      line-height: 1;
+    }
+  }
+  .arrow {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    right: 8px;
+    top: 8px;
+    height: 40px;
+    border-radius: 3px;
+    cursor: pointer;
+    z-index: 20;
+    &:hover {
+      background-color: rgba(0, 0, 0, 0.05);
+    }
+    .umo-icon {
+      font-size: 12px;
+      color: var(--umo-text-color-light);
+    }
+  }
+}
+.unfold {
+  .arrow {
+    :deep(.umo-icon) {
+      transform: rotate(-180deg);
+    }
+  }
+}
+</style>
+
+<style lang="less">
+.umo-heading-container-popup {
+  .umo-popup__content {
+    box-shadow: none;
+    border: solid 1px var(--umo-border-color);
+    border-top: none;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+    margin: 1px -8px 0 0 !important;
+    padding: 0;
+    width: 318px;
+    .heading-container {
+      border-top-right-radius: 0;
+      border-top-left-radius: 0;
+    }
+  }
+}
+.umo-heading-select-option {
+  height: auto !important;
+  .heading-size {
+    line-height: 2em;
+    font-weight: 600;
+    min-width: 100px;
+    color: var(--umo-text-color);
+  }
+  .text {
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 2.4em;
+  }
+  .h1 {
+    font-size: 24px;
+  }
+  .h2 {
+    font-size: 20px;
+  }
+  .h3 {
+    font-size: 18px;
+  }
+  .h4 {
+    font-size: 16px;
+  }
+  .h5 {
+    font-size: 14px;
+  }
+  .h6 {
+    font-size: 12px;
+  }
+}
+</style>

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

@@ -0,0 +1,127 @@
+<template>
+  <menus-button
+    :text="t('base.highlight.text')"
+    shortcut="Ctrl+Shift+H"
+    menu-type="dropdown"
+    popup-handle="arrow"
+    hide-text
+    overlay-class-name="umo-highlight-dropdown"
+    :disabled="!editor?.can().chain().focus().setBackgroundColor().run()"
+    @menu-click="highlightChange(highlight)"
+  >
+    <icon
+      name="highlight"
+      class="umo-icon-highlight"
+      :style="{ backgroundColor: highlight?.bgcolor, color: highlight?.color }"
+    />
+    <template #dropmenu>
+      <t-dropdown-menu>
+        <t-dropdown-item
+          v-for="item in options"
+          :key="item.value"
+          class="umo-text-highlight-menu"
+          :value="item.value"
+          :style="{ backgroundColor: item.bgcolor, color: item.color }"
+          :divider="item.divider"
+          @click="highlightChange(item)"
+        >
+          <icon name="highlight" />
+          <span>{{ item.label }}</span>
+        </t-dropdown-item>
+        <t-dropdown-item
+          class="umo-text-highlight-menu umo-clear-format-menu"
+          @click="clearFormat()"
+        >
+          <icon name="clear-format" />
+          <span v-text="t('base.highlight.clear')"></span>
+        </t-dropdown-item>
+      </t-dropdown-menu>
+    </template>
+  </menus-button>
+</template>
+
+<script setup>
+import { t } from '../../../../composables/i18n.js';
+import { ref as _ref } from 'vue';
+
+
+import { inject } from 'vue';
+const editor = inject('editor')
+
+const options = [
+  { label: t('base.highlight.yellowBg'), value: 1, bgcolor: '#ffff8a' },
+  { label: t('base.highlight.greenBg'), value: 2, bgcolor: '#a7ffa7' },
+  { label: t('base.highlight.purpleBg'), value: 3, bgcolor: '#e6afff' },
+  {
+    label: t('base.highlight.blueBg'),
+    value: 4,
+    bgcolor: '#83d3ff',
+    divider: true,
+  },
+  { label: t('base.highlight.red'), value: 5, color: '#e71313' },
+  {
+    label: t('base.highlight.green'),
+    value: 6,
+    color: '#128a00',
+    divider: true,
+  },
+]
+
+let highlight = _ref()
+const highlightChange = (item) => {
+  if (!item) {
+    highlightChange(options[0])
+    return
+  }
+  if (item.bgcolor) {
+    editor.value?.chain().focus().setBackgroundColor(item.bgcolor).run()
+  }
+  if (item.color) {
+    editor.value?.chain().focus().setColor(item.color).run()
+  }
+  highlight.value = item
+}
+const clearFormat = () => {
+  editor.value?.chain().focus().unsetBackgroundColor().run()
+  editor.value?.chain().focus().unsetColor().run()
+  highlight.value = undefined
+}
+</script>
+
+<style lang="less" scoped>
+.umo-icon-highlight {
+  border-radius: 2px;
+}
+</style>
+
+<style lang="less">
+.umo-text-highlight-dropdown {
+  .umo-popup__content {
+    .umo-divider {
+      margin-top: 8px;
+      margin-bottom: 8px;
+    }
+  }
+}
+.umo-text-highlight-menu {
+  width: 140px;
+  margin-bottom: 6px;
+  border: solid 1px transparent;
+  &.umo-clear-format-menu {
+    margin-bottom: 0;
+  }
+  &:hover {
+    border-color: var(--umo-primary-color);
+    background-color: inherit;
+  }
+  .umo-dropdown__item-text {
+    display: flex;
+    align-items: center;
+    padding: 2px;
+    .umo-icon {
+      font-size: 16px;
+      margin-right: 5px;
+    }
+  }
+}
+</style>

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

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

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

@@ -0,0 +1,113 @@
+<template>
+  <menus-button
+    :text="t('base.letterSpacing.text')"
+    ico="letter-spacing"
+    hide-text
+    menu-type="popup"
+    :menu-active="editor?.isActive('spacing')"
+    :popup-visible="popupVisible"
+    :disabled="!editor?.can().chain().focus().setLetterSpacing().run()"
+    @toggle-popup="togglePopup"
+  >
+    <template #content>
+      <div class="umo-letter-spacing-tile">
+        {{ t('base.letterSpacing.tip', { value: spacing }) }}
+        <tooltip :content="t('base.letterSpacing.reset')">
+          <t-button
+            variant="text"
+            size="small"
+            shape="square"
+            @click="resetLetterSpacing"
+          >
+            <icon name="node-clear-format" size="16" />
+          </t-button>
+        </tooltip>
+      </div>
+      <div class="umo-letter-spacing-menu">
+        <t-button
+          variant="text"
+          size="small"
+          :disabled="spacing <= -1"
+          @click="spacing = Math.round((spacing - 0.1) * 10) / 10"
+        >
+          <icon name="minus" />
+        </t-button>
+        <t-slider
+          v-model="spacing"
+          :min="-2"
+          :max="20"
+          :step="0.1"
+          :tooltip-props="{
+            visible: false,
+          }"
+        />
+        <t-button
+          variant="text"
+          size="small"
+          :disabled="spacing >= 10"
+          @click="spacing = Math.round((spacing + 0.1) * 10) / 10"
+        >
+          <icon name="plus" />
+        </t-button>
+      </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 spacing = _ref(0)
+watch(
+  () => popupVisible.value,
+  (visible) => {
+    if (!visible) {
+      spacing.value = 0
+    }
+    const attrs = editor.value?.getAttributes('letterSpacing')
+    spacing.value = attrs?.spacing ? parseFloat(attrs.spacing.replace('em', '')) : 0
+  },
+)
+watch(
+  () => spacing.value,
+  (val) => {
+    setLetterSpacing(val)
+  },
+)
+
+const setLetterSpacing = () => {
+  editor.value?.chain().focus().setLetterSpacing(`${spacing.value}em`).run()
+}
+const resetLetterSpacing = () => {
+  spacing.value = 0
+  popupVisible.value = false
+}
+</script>
+
+<style lang="less" scoped>
+.umo-letter-spacing {
+  &-tile {
+    font-size: 12px;
+    margin-bottom: 5px;
+    display: flex;
+    justify-content: space-between;
+  }
+  &-menu {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    width: 200px;
+    :deep(.umo-button) {
+      width: 20px;
+      height: 20px;
+      font-size: 16px;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,40 @@
+<template>
+  <menus-button
+    :text="t('base.lineHeight.text')"
+    ico="line-height"
+    menu-type="dropdown"
+    hide-text
+    :select-options="lineHeights"
+    :disabled="!editor?.isActive('paragraph') && !editor?.isActive('heading')"
+    @change="setLineHeight"
+  />
+</template>
+
+<script setup>
+import { t } from '../../../../composables/i18n.js';
+import { inject, computed } from 'vue';
+
+const editor = inject('editor')
+const options = inject('options')
+
+const lineHeights = computed(() => {
+  return options.value.dicts?.lineHeights.map((item) => {
+    return {
+      content: item.default
+        ? l(item.label) + t('base.lineHeight.default')
+        : l(item.label),
+      value: item.value,
+      active:
+        editor.value?.isActive('paragraph', { lineHeight: item.value }) ||
+        editor.value?.isActive('heading', { lineHeight: item.value }),
+    }
+  })
+})
+
+const setLineHeight = ({ content, value }) => {
+  if (!content) {
+    return
+  }
+  editor.value?.chain().focus().setLineHeight(value).run()
+}
+</script>