adtec-core-package 2.9.9 → 3.0.1

package/src/components/editor-main/src/components/menus/block/common.vue

@@ -0,0 +1,127 @@
+<template>
+  <t-dropdown
+    placement="bottom-right"
+    overlay-class-name="umo-block-menu-dropdown"
+    trigger="click"
+    :destroy-on-close="false"
+    :popup-props="popupProps"
+  >
+    <menus-button
+      class="umo-block-menu-button"
+      :menu-active="menuActive"
+      ico="block-menu"
+      hide-text
+      style="cursor: grab"
+    />
+    <t-dropdown-menu>
+      <t-dropdown-item class="umo-block-menu-group-name" disabled>
+        {{ t('blockMenu.common') }}
+      </t-dropdown-item>
+      <t-dropdown-item>
+        <menus-button
+          ico="node-clear-format"
+          :text="t('blockMenu.clearFormat')"
+          :tooltip="false"
+          @menu-click="clearTextFormatting"
+        />
+      </t-dropdown-item>
+      <t-dropdown-item divider>
+        <menus-button
+          ico="node-duplicate"
+          :text="t('blockMenu.duplicate')"
+          :tooltip="false"
+          @menu-click="duplicateNode"
+        />
+      </t-dropdown-item>
+      <t-dropdown-item>
+        <menus-button
+          ico="node-copy"
+          :text="t('blockMenu.copy')"
+          :tooltip="false"
+          @menu-click="copyNodeToClipboard"
+        />
+      </t-dropdown-item>
+      <t-dropdown-item>
+        <menus-button
+          ico="node-cut"
+          :text="t('blockMenu.cut')"
+          :tooltip="false"
+          @menu-click="cutNodeToClipboard"
+        />
+      </t-dropdown-item>
+      <t-dropdown-item class="umo-delete-node">
+        <menus-button
+          ico="node-delete-2"
+          :text="t('blockMenu.delete')"
+          :tooltip="false"
+          @menu-click="deleteNode"
+        />
+      </t-dropdown-item>
+    </t-dropdown-menu>
+  </t-dropdown>
+</template>
+
+<script setup>
+import { t } from '../../../composables/i18n.js';
+import { ref as _ref } from 'vue';
+
+
+import { inject } from 'vue';
+const props = defineProps({
+  node: {
+    type: Object,
+    default: null,
+  },
+  pos: {
+    type: Number,
+    default: null,
+  },
+})
+const emits = defineEmits(['dropdown-visible'])
+
+const container = inject('container')
+const editor = inject('editor')
+const blockMenu = inject('blockMenu')
+
+let menuActive = _ref(false)
+
+const popupProps = {
+  attach: `${container} .umo-main-container`,
+  popperOptions: {
+    modifiers: [{ name: 'offset', options: { offset: [2, 0] } }],
+  },
+  onVisibleChange(visible) {
+    blockMenu.value = visible
+    menuActive.value = visible
+    emits('dropdown-visible', visible)
+  },
+}
+
+const clearTextFormatting = () => {
+  editor.value
+    ?.chain()
+    .setNodeSelection(props.pos)
+    .focus()
+    .unsetAllMarks()
+    .run()
+}
+const copyNodeToClipboard = () => {
+  editor.value?.commands.setNodeSelection(props.pos)
+  document.execCommand('copy')
+}
+const cutNodeToClipboard = () => {
+  editor.value?.commands.setNodeSelection(props.pos)
+  document.execCommand('cut')
+}
+const duplicateNode = () => {
+  editor.value?.commands.insertContentAt(props.pos, props.node?.toJSON())
+}
+const deleteNode = () => {
+  editor.value
+    ?.chain()
+    .setNodeSelection(props.pos)
+    .focus()
+    .deleteSelection()
+    .run()
+}
+</script>

package/src/components/editor-main/src/components/menus/block/index.vue

@@ -0,0 +1,217 @@
+<template>
+  <drag-handle
+    :editor="editor"
+    class="umo-block-menu-drag-handle"
+    :class="{
+      'is-empty': editor?.isEmpty,
+      'is-visible': selectedNodePos !== null,
+    }"
+    :node-type="selectedNode?.type?.name || 'unknown'"
+    @node-change="nodeChange"
+  >
+    <div class="umo-block-menu-hander">
+      <menus-block-node
+        :node="selectedNode"
+        :pos="selectedNodePos"
+        @dropdown-visible="dropdownVisible"
+      />
+      <menus-block-common
+        v-if="!editor?.isEmpty"
+        :node="selectedNode"
+        :pos="selectedNodePos"
+        @dropdown-visible="dropdownVisible"
+      />
+    </div>
+  </drag-handle>
+</template>
+
+<script setup>import { ref as _ref } from 'vue';
+
+import { DragHandle } from '@tiptap/extension-drag-handle-vue-3'
+
+
+import { inject } from 'vue';
+const editor = inject('editor')
+let selectedNode = _ref(null)
+let selectedNodePos = _ref(null)
+
+const nodeChange = ({ node, pos }) => {
+  selectedNode.value = node || null
+  if (pos !== null) {
+    selectedNodePos.value = pos
+  }
+}
+
+const dropdownVisible = (visible) => {
+  editor.value.commands.setMeta('lockDragHandle', visible)
+}
+</script>
+
+<style lang="less">
+.umo-block-menu {
+  .umo-menu-button {
+    color: var(--umo-text-color-light) !important;
+  }
+  &-drag-handle {
+    z-index: 10;
+    outline: solid 1px var(--umo-border-color);
+    transform: translateX(-15px);
+    padding: 2px;
+    border-radius: 3px;
+    background-color: #fff;
+    margin-top: -5px;
+    &:hover {
+      outline: none;
+      box-shadow:
+        0 2px 5px rgba(0, 0, 0, 0.06),
+        0 0 0 1px rgba(0, 0, 0, 0.1);
+    }
+    &[node-type='table'],
+    &[node-type='horizontalRule'],
+    &[node-type='columnContainer'],
+    &[node-type='codeBlock'],
+    &[node-type='details'],
+    &[node-type='ProseMirror-gapcursor'] {
+      margin-top: 0;
+    }
+    &[node-type='pageBreak'] {
+      margin-top: -14px;
+    }
+    &[node-type='footnotes'] {
+      display: none;
+    }
+    &.is-empty {
+      z-index: 20;
+    }
+    &.is-visible {
+      visibility: visible !important;
+    }
+  }
+  &-hander {
+    display: flex;
+    @media print {
+      display: none;
+    }
+    .umo-menu-button {
+      background-color: #fff;
+      width: 20px;
+      height: 20px;
+      &-wrap {
+        margin: 0 !important;
+      }
+      .umo-button-content {
+        color: rgba(0, 0, 0, 0.5);
+      }
+      &:not(.active):hover {
+        background-color: var(--umo-content-node-selected-background);
+        .umo-button-content {
+          color: var(--umo-primary-color);
+        }
+      }
+      &.active {
+        &:hover {
+          opacity: 0.8;
+        }
+        .umo-button-content {
+          color: var(--umo-text-color-light);
+        }
+      }
+    }
+  }
+  &-dropdown {
+    .umo-block-menu-group-name {
+      padding-left: 15px !important;
+    }
+    .umo-dropdown__menu,
+    .umo-dropdown__submenu {
+      --td-radius-default: 0;
+      padding: 8px 0 !important;
+      .umo-divider {
+        margin: 4px 0 2px;
+        opacity: 0.5;
+      }
+      .umo-dropdown__item {
+        padding: 2px 0;
+        min-width: 140px !important;
+        .umo-menu-button {
+          background-color: transparent;
+          padding: 0 15px;
+          box-sizing: border-box;
+          justify-content: flex-start;
+          width: 100%;
+          &-wrap {
+            display: block !important;
+          }
+          .umo-button__text {
+            width: 100%;
+          }
+        }
+        .umo-button-content {
+          width: 100%;
+          justify-content: flex-start;
+          .umo-button-text {
+            color: var(--umo-text-color);
+          }
+          .umo-button-icon {
+            margin-right: 3px;
+            font-size: 16px;
+            color: #666;
+          }
+          .umo-button-kbd {
+            flex: 1;
+            text-align: right;
+            color: var(--umo-text-color-light);
+            font-family: Arial, Helvetica, sans-serif;
+            font-size: 9px;
+          }
+          .umo-heading {
+            display: flex;
+            color: var(--umo-text-color);
+            .icon-heading {
+              font-size: 12px;
+              display: inline-block;
+              width: 2em;
+            }
+          }
+        }
+        &--disabled {
+          .umo-button-content {
+            opacity: 0.6;
+          }
+        }
+        &-direction {
+          opacity: 0.4;
+          font-size: 12px !important;
+          margin-right: 8px;
+        }
+        .umo-dropdown-item-label {
+          padding: 1px 15px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          display: -webkit-box;
+          -webkit-line-clamp: 2;
+          line-clamp: 2;
+          -webkit-box-orient: vertical;
+        }
+      }
+    }
+
+    .umo-delete-node {
+      .umo-button {
+        * {
+          color: var(--umo-error-color) !important;
+        }
+      }
+    }
+  }
+}
+
+.ProseMirror-noderangeselection {
+  *::selection {
+    background: transparent;
+  }
+  * {
+    caret-color: transparent;
+  }
+}
+</style>

package/src/components/editor-main/src/components/menus/block/node.vue

@@ -0,0 +1,183 @@
+<template>
+  <t-dropdown
+    placement="bottom-right"
+    overlay-class-name="umo-block-menu-dropdown"
+    :max-height="320"
+    trigger="click"
+    :destroy-on-close="false"
+    :popup-props="popupProps"
+  >
+    <menus-button
+      class="umo-block-menu-button"
+      :menu-active="menuActive"
+      ico="block-add"
+      hide-text
+    />
+    <t-dropdown-menu>
+      <t-dropdown-item class="umo-block-menu-group-name" disabled>
+        {{ t('blockMenu.insert') }}
+      </t-dropdown-item>
+      <t-dropdown-item>
+        <menus-button
+          ico="table"
+          :text="t('table.insert.text')"
+          :tooltip="false"
+          @menu-click="editor?.chain().focus().insertTable().run()"
+        />
+      </t-dropdown-item>
+      <t-dropdown-item v-if="!disableMenu('image')">
+        <menus-button
+          ico="image"
+          :text="t('insert.image.text')"
+          :tooltip="false"
+          @menu-click="insertImage"
+        />
+      </t-dropdown-item>
+      <t-dropdown-item v-if="!disableMenu('video')">
+        <menus-toolbar-insert-video :huge="false" :tooltip="false" />
+      </t-dropdown-item>
+      <t-dropdown-item v-if="!disableMenu('audio')">
+        <menus-toolbar-insert-audio :huge="false" :tooltip="false" />
+      </t-dropdown-item>
+      <t-dropdown-item v-if="!disableMenu('file')">
+        <menus-toolbar-insert-file :huge="false" :tooltip="false" />
+      </t-dropdown-item>
+      <t-dropdown-item v-if="!disableMenu('details')">
+        <menus-toolbar-insert-details :huge="false" :tooltip="false" />
+      </t-dropdown-item>
+      <t-dropdown-item v-if="!disableMenu('callout')">
+        <menus-toolbar-insert-callout :huge="false" :tooltip="false" />
+      </t-dropdown-item>
+      <t-dropdown-item v-if="!disableMenu('hr')">
+        <menus-button
+          ico="hr"
+          :text="t('insert.hr.text')"
+          :tooltip="false"
+          @menu-click="
+            editor?.chain().focus().setHorizontalRule({ type: 'signle' }).run()
+          "
+        />
+      </t-dropdown-item>
+      <t-dropdown-item v-if="!disableMenu('toc')">
+        <menus-toolbar-insert-toc :huge="false" :tooltip="false" />
+      </t-dropdown-item>
+      <t-dropdown-item v-if="!disableMenu('text-box')">
+        <menus-toolbar-insert-text-box :huge="false" :tooltip="false" />
+      </t-dropdown-item>
+      <t-dropdown-item v-if="!disableMenu('web-page')">
+        <menus-toolbar-insert-web-page :huge="false" :tooltip="false" />
+      </t-dropdown-item>
+      <t-dropdown-item v-if="!disableMenu('qrcode')">
+        <menus-toolbar-tools-qrcode :huge="false" :tooltip="false" />
+      </t-dropdown-item>
+      <t-dropdown-item v-if="!disableMenu('barcode')">
+        <menus-toolbar-tools-barcode :huge="false" :tooltip="false" />
+      </t-dropdown-item>
+      <t-dropdown-item v-if="!disableMenu('signature')">
+        <menus-toolbar-tools-signature :huge="false" :tooltip="false" />
+      </t-dropdown-item>
+      <t-dropdown-item v-if="!disableMenu('diagrams')">
+        <menus-toolbar-tools-diagrams :huge="false" :tooltip="false" />
+      </t-dropdown-item>
+      <t-dropdown-item v-if="!disableMenu('math')">
+        <menus-toolbar-tools-math :huge="false" :tooltip="false" />
+      </t-dropdown-item>
+      <t-dropdown-item v-if="!disableMenu('echarts')">
+        <menus-toolbar-tools-echarts
+          :huge="false"
+          :tooltip="false"
+          mode="add"
+        />
+      </t-dropdown-item>
+      <t-dropdown-item v-if="!disableMenu('mermaid')">
+        <menus-toolbar-tools-mermaid :huge="false" :tooltip="false" />
+      </t-dropdown-item>
+      <t-dropdown-item v-if="options.templates.length > 0">
+        <menus-button
+          ico="template"
+          :text="t('blockMenu.template')"
+          :tooltip="false"
+        />
+        <t-dropdown-menu
+          overlay-class-name="umo-block-menu-dropdown"
+          placement="right"
+        >
+          <t-dropdown-item
+            v-for="item in options.templates"
+            :key="item.value"
+            :value="item.value"
+            :divider="item.divider"
+            @click="setTemplate(item)"
+          >
+            <div class="umo-dropdown-item-label">{{ item.title }}</div>
+          </t-dropdown-item>
+        </t-dropdown-menu>
+      </t-dropdown-item>
+    </t-dropdown-menu>
+  </t-dropdown>
+</template>
+
+<script setup>
+import { t } from '../../../composables/i18n.js';
+import { ref as _ref } from 'vue';
+
+
+import { inject } from 'vue';
+const props = defineProps({
+  node: {
+    type: Object,
+    default: null,
+  },
+  pos: {
+    type: Number,
+    default: null,
+  },
+})
+const emits = defineEmits(['dropdown-visible'])
+
+const container = inject('container')
+const options = inject('options')
+const editor = inject('editor')
+const uploadFileMap = inject('uploadFileMap')
+const blockMenu = inject('blockMenu')
+
+let menuActive = _ref(false)
+const popupProps = {
+  attach: `${container} .umo-main-container`,
+  popperOptions: {
+    modifiers: [{ name: 'offset', options: { offset: [2, 0] } }],
+  },
+  onVisibleChange(visible) {
+    blockMenu.value = visible
+    menuActive.value = visible
+    editor.value
+      ?.chain()
+      .selectTextblockEnd()
+      .selectNodeForward()
+      .focus(props.pos)
+      .run()
+    emits('dropdown-visible', visible)
+  },
+}
+
+const disableMenu = (name) => {
+  return options.value.disableExtensions.includes(name)
+}
+
+const insertImage = () => {
+  editor.value
+    ?.chain()
+    .focus()
+    .selectFiles('image', container, uploadFileMap.value)
+    .run()
+}
+
+const setTemplate = ({ content }) => {
+  if (!content || !editor.value) {
+    return
+  }
+  editor.value.commands.insertContent(content)
+}
+</script>
+
+<style lang="less"></style>

package/src/components/editor-main/src/components/menus/bubble/callout/background.vue

@@ -0,0 +1,39 @@
+<template>
+  <menus-button
+    ico="background-color"
+    :text="t('bubbleMenu.callout.background')"
+    menu-type="popup"
+    huge
+    :popup-visible="popupVisible"
+    @toggle-popup="togglePopup"
+  >
+    <template #content>
+      <picker-color default-color="transparent" @change="colorChange" />
+    </template>
+  </menus-button>
+</template>
+
+<script setup>
+import { t } from '../../../../composables/i18n.js';
+
+import { getSelectionNode } from '../../../../utils/selection'
+
+
+import { inject } from 'vue';
+const emits = defineEmits(['change'])
+
+const { popupVisible, togglePopup } = usePopup()
+const editor = inject('editor')
+
+const colorChange = (color) => {
+  popupVisible.value = false
+  const backgroundColor = color === '' ? null : color
+  const callout = editor.value ? getSelectionNode(editor.value) : null
+  if (callout) {
+    editor.value?.commands.updateAttributes('callout', {
+      type: 'custom',
+      backgroundColor,
+    })
+  }
+}
+</script>

package/src/components/editor-main/src/components/menus/bubble/callout/builtin.vue

@@ -0,0 +1,90 @@
+<template>
+  <div class="umo-bubble-callout-builtin">
+    <div
+      v-for="item in callouts"
+      :key="item.type"
+      class="umo-bubble-callout-item"
+      :style="{
+        color: item.color,
+        backgroundColor: item.backgroundColor,
+      }"
+      @click="selectStyle(item)"
+    >
+      <icon
+        v-if="editor?.getAttributes('callout').type === item.type"
+        name="selected"
+        size="14"
+      />
+      <span v-else class="umo-bubble-callout-item-text">{{ item.icon }}</span>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { getSelectionNode } from '../../../../utils/selection'
+
+
+import { inject } from 'vue';
+const callouts = [
+  {
+    type: 'default',
+    icon: '💬',
+    backgroundColor: 'rgba(0, 0, 0, 0.05)',
+  },
+  {
+    type: 'danger',
+    icon: '🚫',
+    backgroundColor: 'rgb(252, 223, 220)',
+  },
+  {
+    type: 'primary',
+    icon: '📎',
+    backgroundColor: 'rgb(217, 231, 255)',
+  },
+  {
+    type: 'warning',
+    icon: '💡',
+    backgroundColor: 'rgb(255, 245, 210)',
+  },
+  {
+    type: 'success',
+    icon: '✅',
+    backgroundColor: 'rgb(205, 245, 235)',
+  },
+]
+
+const editor = inject('editor')
+
+const selectStyle = (item) => {
+  const callout = editor.value ? getSelectionNode(editor.value) : null
+  if (callout) {
+    editor.value?.commands.updateAttributes('callout', {
+      type: item.type,
+      icon: item.icon,
+      backgroundColor: item.backgroundColor,
+    })
+  }
+}
+</script>
+
+<style lang="less">
+.umo-bubble-callout-builtin {
+  display: flex;
+  align-items: center;
+}
+.umo-bubble-callout-item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 4px;
+  cursor: pointer;
+  border: solid 1px rgba(0, 0, 0, 0.05);
+  box-sizing: border-box;
+  margin-right: 5px;
+  &-text {
+    font-size: 12px;
+  }
+}
+</style>

package/src/components/editor-main/src/components/menus/bubble/callout/emoji-remove.vue

@@ -0,0 +1,28 @@
+<template>
+  <menus-button
+    ico="remove"
+    :text="t('bubbleMenu.callout.removeEmoji')"
+    @menu-click="removeEmoji"
+  />
+</template>
+
+<script setup>
+import { t } from '../../../../composables/i18n.js';
+
+import { getSelectionNode } from '../../../../utils/selection'
+
+
+import { inject } from 'vue';
+const emits = defineEmits(['change'])
+
+const editor = inject('editor')
+
+const removeEmoji = () => {
+  const callout = editor.value ? getSelectionNode(editor.value) : null
+  if (callout) {
+    editor.value?.commands.updateAttributes('callout', {
+      icon: null,
+    })
+  }
+}
+</script>