adtec-core-package 2.9.9 → 3.0.1

package/src/components/editor-main/src/components/menus/bubble/file/download.vue

@@ -0,0 +1,30 @@
+<template>
+  <menus-button
+    v-if="editor?.getAttributes('file')?.uploaded"
+    ico="download"
+    :text="t('bubbleMenu.file.download')"
+    @menu-click="downloadFile"
+  />
+</template>
+
+<script setup>
+import { t } from '../../../../composables/i18n.js';
+
+import { getSelectionNode } from '../../../../utils/selection'
+
+
+import { inject } from 'vue';
+const editor = inject('editor')
+
+const downloadFile = () => {
+  const node = editor.value ? getSelectionNode(editor.value) : null
+  const a = document.createElement('a')
+  a.href = node?.attrs.url
+  a.download = node?.attrs.name
+  if (a) {
+    document.body.appendChild(a)
+    a.click()
+    document.body.removeChild(a)
+  }
+}
+</script>

package/src/components/editor-main/src/components/menus/bubble/file/width.vue

@@ -0,0 +1,22 @@
+<template>
+  <menus-button
+    ico="auto-width"
+    :text="t('bubbleMenu.file.autoWidth')"
+    :menu-active="editor?.getAttributes('file')?.fitWidth"
+    @menu-click="changeWidth"
+  />
+</template>
+
+<script setup>
+import { t } from '../../../../composables/i18n.js';
+import { inject } from 'vue';
+
+const editor = inject('editor')
+
+const changeWidth = () => {
+  const { fitWidth } = editor.value.getAttributes('file')
+  editor.value?.commands.updateAttributes('file', {
+    fitWidth: !fitWidth,
+  })
+}
+</script>

package/src/components/editor-main/src/components/menus/bubble/image/convert.vue

@@ -0,0 +1,63 @@
+<template>
+  <menus-button
+    ico="image-inline"
+    :text="
+      menuActive
+        ? t('bubbleMenu.image.convertToNode')
+        : t('bubbleMenu.image.convertToInline')
+    "
+    :menu-active="menuActive"
+    @menu-click="convertPosition"
+  />
+</template>
+
+<script setup>
+import { t } from '../../../../composables/i18n.js';
+
+import { getSelectionNode } from '../../../../utils/selection'
+
+
+import { inject, computed } from 'vue';
+const editor = inject('editor')
+
+const menuActive = computed(() => {
+  const image = editor.value ? getSelectionNode(editor.value) : null
+  return image?.type?.name === 'inlineImage'
+})
+
+const convertPosition = () => {
+  const image = editor.value ? getSelectionNode(editor.value) : null
+  if (image) {
+    const typeName =
+      image?.type?.name === 'inlineImage' ? 'inlineImage' : 'image'
+    const imageData = image.attrs || {}
+    if (!imageData.error && imageData.src) {
+      // 1.删除原有节点
+      editor.value
+        ?.chain()
+        .focus()
+        .deleteSelectionNode()
+        .setMeta('convert', true)
+        .run()
+      // 2.插入新的节点
+      if (typeName === 'inlineImage') {
+        editor.value
+          ?.chain()
+          .focus()
+          .setImage({ ...imageData, equalProportion: false, inline: false })
+          .run()
+      } else {
+        editor.value
+          ?.chain()
+          .focus()
+          .setInlineImage({
+            ...imageData,
+            inline: true,
+            equalProportion: false,
+          })
+          .run()
+      }
+    }
+  }
+}
+</script>

package/src/components/editor-main/src/components/menus/bubble/image/edit.vue

@@ -0,0 +1,32 @@
+<template>
+  <menus-toolbar-tools-qrcode
+    v-if="attrs.type === 'qrcode'"
+    :content="attrs.content"
+  />
+  <menus-toolbar-tools-barcode
+    v-if="attrs.type === 'barcode'"
+    :content="attrs.content"
+  />
+  <menus-toolbar-tools-diagrams
+    v-if="attrs.type === 'diagrams'"
+    :content="attrs.content"
+  />
+  <menus-toolbar-tools-mermaid
+    v-if="attrs.type === 'mermaid'"
+    :content="attrs.content"
+    :config="JSON.parse(attrs.config || '{}')"
+  />
+</template>
+
+<script setup>
+import { getSelectionNode } from '../../../../utils/selection'
+
+
+import { inject, computed } from 'vue';
+const editor = inject('editor')
+
+const attrs = computed(() => {
+  const node = editor.value ? getSelectionNode(editor?.value) : null
+  return node?.attrs || {}
+})
+</script>

package/src/components/editor-main/src/components/menus/bubble/image/open.vue

@@ -0,0 +1,27 @@
+<template>
+  <menus-button
+    ico="new-window"
+    :text="t('bubbleMenu.webpage.open')"
+    @menu-click="openImage"
+  />
+</template>
+
+<script setup>
+import { t } from '../../../../composables/i18n.js';
+
+import { getSelectionNode } from '../../../../utils/selection'
+
+
+import { inject } from 'vue';
+const editor = inject('editor')
+
+const openImage = () => {
+  const node = editor.value ? getSelectionNode(editor?.value) : null
+  const a = document.createElement('a')
+  a.href = node?.attrs.src
+  a.target = '_blank'
+  document.body.appendChild(a)
+  a.click()
+  document.body.removeChild(a)
+}
+</script>

package/src/components/editor-main/src/components/menus/bubble/image/preview.vue

@@ -0,0 +1,24 @@
+<template>
+  <menus-button
+    ico="image-preview"
+    :text="t('bubbleMenu.image.preview')"
+    @menu-click="openImageViewer"
+  />
+</template>
+
+<script setup>
+import { t } from '../../../../composables/i18n.js';
+
+import { getSelectionNode } from '../../../../utils/selection'
+
+
+import { inject } from 'vue';
+const editor = inject('editor')
+const imageViewer = inject('imageViewer')
+
+const openImageViewer = () => {
+  const image = getSelectionNode(editor.value)
+  imageViewer.value.current = image.attrs.id
+  imageViewer.value.visible = true
+}
+</script>

package/src/components/editor-main/src/components/menus/bubble/image/proportion.vue

@@ -0,0 +1,34 @@
+<template>
+  <menus-button
+    ico="equal-proportion"
+    :text="t('bubbleMenu.image.proportion')"
+    :menu-active="proportionActive"
+    @menu-click="toggleEqualProportion"
+  />
+</template>
+
+<script setup>
+import { t } from '../../../../composables/i18n.js';
+
+import { getSelectionNode } from '../../../../utils/selection'
+
+
+import { inject, computed } from 'vue';
+const editor = inject('editor')
+
+const proportionActive = computed(() => {
+  const image = editor.value ? getSelectionNode(editor.value) : null
+  if (image?.type?.name) {
+    return editor.value?.getAttributes(image?.type?.name)?.equalProportion
+  } else return false
+})
+
+const toggleEqualProportion = () => {
+  const image = editor.value ? getSelectionNode(editor.value) : null
+  if (image) {
+    editor.value?.commands.updateAttributes(image.type, {
+      equalProportion: !image.attrs.equalProportion,
+    })
+  }
+}
+</script>

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

@@ -0,0 +1,55 @@
+<template>
+  <bubble-menu v-if="editor" class="umo-editor-bubble-menu" :editor="editor">
+    <menus-bubble-menus v-if="options?.document?.enableBubbleMenu">
+      <template #bubble_menu="props">
+        <slot name="bubble_menu" v-bind="props" />
+      </template>
+    </menus-bubble-menus>
+  </bubble-menu>
+</template>
+
+<script setup>
+import { BubbleMenu } from '@tiptap/vue-3/menus'
+
+
+import { inject } from 'vue';
+const editor = inject('editor')
+const options = inject('options')
+</script>
+
+<style lang="less">
+.umo-editor-bubble-menu {
+  max-width: 580px;
+  z-index: 110;
+  border-radius: var(--umo-radius);
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  padding: 8px 10px !important;
+  box-shadow: var(--umo-shadow);
+  border: 1px solid var(--umo-border-color);
+  background-color: var(--umo-color-white);
+
+  &:empty {
+    display: none;
+  }
+
+  .umo-menu-button.show-text .umo-button-content .umo-button-text {
+    display: none !important;
+  }
+
+  .umo-menu-button.huge {
+    height: var(--td-comp-size-xs);
+    min-width: unset;
+
+    .umo-button-content {
+      min-width: unset !important;
+
+      .umo-icon {
+        font-size: 16px;
+        margin-top: 0;
+      }
+    }
+  }
+}
+</style>

package/src/components/editor-main/src/components/menus/bubble/link/copy.vue

@@ -0,0 +1,29 @@
+<template>
+  <menus-button
+    ico="copy"
+    :text="t('insert.link.copy')"
+    hide-text
+    @menu-click="copyLink"
+  />
+</template>
+
+<script setup>
+import { t } from '../../../../composables/i18n.js';
+import { inject, ref } from 'vue';
+import { useClipboard } from '@vueuse/core';
+
+const container = inject('container')
+const editor = inject('editor')
+
+const copyLink = () => {
+  const { href } = editor.value.getAttributes('link')
+  const { copy } = useClipboard({
+    source: ref(href),
+  })
+  copy()
+  useMessage('success', {
+    attach: container,
+    content: t('insert.link.copySuccess'),
+  })
+}
+</script>

package/src/components/editor-main/src/components/menus/bubble/link/open.vue

@@ -0,0 +1,27 @@
+<template>
+  <menus-button :text="t('insert.link.open')">
+    <a
+      class="umo-link"
+      :href="editor?.getAttributes('link').href"
+      target="_blank"
+      ><icon name="link" /> {{ t('insert.link.open') }}</a
+    >
+  </menus-button>
+</template>
+
+<script setup>
+import { t } from '../../../../composables/i18n.js';
+import { inject } from 'vue';
+
+const editor = inject('editor')
+</script>
+
+<style lang="less" scoped>
+.umo-link {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  color: var(--umo-primary-color);
+  text-decoration: none !important;
+}
+</style>

package/src/components/editor-main/src/components/menus/bubble/link/unlink.vue

@@ -0,0 +1,19 @@
+<template>
+  <menus-button
+    ico="unlink"
+    :text="t('insert.link.remove')"
+    hide-text
+    @menu-click="unsetLink"
+  />
+</template>
+
+<script setup>
+import { t } from '../../../../composables/i18n.js';
+import { inject } from 'vue';
+
+const editor = inject('editor')
+
+const unsetLink = () => {
+  editor.value.commands.unsetLink()
+}
+</script>

package/src/components/editor-main/src/components/menus/bubble/math.vue

@@ -0,0 +1,36 @@
+<template>
+  <menus-toolbar-tools-math
+    ico="edit"
+    :tooltip="t('tools.math.edit')"
+    :latex="latex"
+    :type="type"
+  />
+</template>
+
+<script setup>
+import { t } from '../../../composables/i18n.js';
+import { inject, computed } from 'vue';
+
+const editor = inject('editor')
+
+const type = computed(() => {
+  if (editor.value?.isActive('blockMath')) {
+    return 'block'
+  }
+  if (editor.value?.isActive('inlineMath')) {
+    return 'inline'
+  }
+  return null
+})
+
+const latex = computed(() => {
+  let node = null
+  if (editor.value?.isActive('blockMath')) {
+    node = editor.value?.getAttributes('blockMath')
+  }
+  if (editor.value?.isActive('inlineMath')) {
+    node = editor.value?.getAttributes('inlineMath')
+  }
+  return node?.latex || ''
+})
+</script>

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

@@ -0,0 +1,209 @@
+<template>
+  <template v-if="is('link') && attrs('link').href">
+    <menus-bubble-link-open />
+    <div class="umo-bubble-menu-divider"></div>
+    <menus-toolbar-insert-link ico="edit" :text="t('insert.link.edit')" />
+    <menus-bubble-link-copy />
+    <menus-bubble-link-unlink />
+    <div class="umo-bubble-menu-divider"></div>
+    <menus-bubble-node-delete />
+  </template>
+  <template
+    v-else-if="
+      (is('image') && !attrs('image').error) ||
+      (is('inlineImage') && !attrs('inlineImage').error)
+    "
+  >
+    <menus-toolbar-base-align-left />
+    <menus-toolbar-base-align-center />
+    <menus-toolbar-base-align-right />
+    <div class="umo-bubble-menu-divider"></div>
+    <menus-bubble-image-proportion />
+    <div class="umo-bubble-menu-divider"></div>
+    <menus-bubble-image-preview
+      v-if="
+        attrs('image')?.type?.startsWith('image') ||
+        attrs('inlineImage')?.type?.startsWith('image')
+      "
+    />
+    <menus-bubble-image-open />
+    <menus-bubble-image-convert />
+    <div class="umo-bubble-menu-divider"></div>
+    <menus-bubble-node-delete />
+  </template>
+  <template
+    v-else-if="is('video') || is('audio') || is('file') || is('iframe')"
+  >
+    <menus-toolbar-base-align-left />
+    <menus-toolbar-base-align-center />
+    <menus-toolbar-base-align-right />
+    <template v-if="is('file')">
+      <menus-bubble-file-width />
+    </template>
+    <div class="umo-bubble-menu-divider"></div>
+    <template v-if="is('iframe')">
+      <menus-bubble-webpage-clickable />
+      <menus-toolbar-insert-web-page
+        v-if="!disable('web-page')"
+        ico="edit"
+        :page-type="attrs('iframe')?.type"
+        :page-url="attrs('iframe')?.src"
+      />
+      <menus-bubble-webpage-open />
+      <div class="umo-bubble-menu-divider"></div>
+    </template>
+    <menus-bubble-file-download
+      v-if="is('file') || is('video') || is('audio')"
+    />
+    <menus-bubble-node-tofile v-if="is('video') || is('audio')" />
+    <menus-bubble-node-delete />
+  </template>
+  <template v-else-if="is('table')">
+    <menus-toolbar-table-cells-align />
+    <menus-toolbar-table-cells-background />
+    <!-- <menus-toolbar-table-border-color  /> -->
+    <div class="umo-bubble-menu-divider"></div>
+    <menus-toolbar-table-add-row-before />
+    <menus-toolbar-table-add-row-after />
+    <menus-toolbar-table-add-column-before />
+    <menus-toolbar-table-add-column-after />
+    <div class="umo-bubble-menu-divider"></div>
+    <menus-toolbar-table-delete-row />
+    <menus-toolbar-table-delete-column />
+    <div class="umo-bubble-menu-divider"></div>
+    <menus-toolbar-table-merge-cells />
+    <menus-toolbar-table-split-cell />
+  </template>
+  <template v-else-if="is('tag')">
+    <menus-bubble-tag-input />
+    <menus-bubble-tag-builtin />
+    <div class="umo-bubble-menu-divider"></div>
+    <menus-bubble-tag-color />
+    <menus-bubble-tag-background />
+    <div class="umo-bubble-menu-divider"></div>
+    <menus-bubble-tag-delete />
+  </template>
+  <template v-else-if="is('echarts')">
+    <menus-toolbar-base-align-left />
+    <menus-toolbar-base-align-center />
+    <menus-toolbar-base-align-right />
+    <div class="umo-bubble-menu-divider"></div>
+    <menus-toolbar-tools-echarts ico="setting" />
+    <menus-bubble-node-delete />
+  </template>
+  <template v-else-if="is('optionBox')">
+    <menus-toolbar-base-font-size :select="false" />
+    <menus-toolbar-base-bold />
+    <menus-toolbar-base-italic />
+    <div class="umo-bubble-menu-divider"></div>
+    <menus-toolbar-base-color />
+    <menus-toolbar-base-background-color />
+    <div class="umo-bubble-menu-divider"></div>
+    <menus-toolbar-insert-option-box edit />
+    <div class="umo-bubble-menu-divider"></div>
+    <menus-bubble-node-delete />
+  </template>
+  <template v-else-if="is('blockMath') || is('inlineMath')">
+    <menus-bubble-math />
+    <menus-bubble-node-delete />
+  </template>
+  <template
+    v-else-if="
+      is('toc') ||
+      is('pageBreak') ||
+      is('horizontalRule') ||
+      is('codeBlock') ||
+      attrs('image').error
+    "
+  >
+    <!-- <menus-bubble-node-delete /> -->
+  </template>
+  <template v-else>
+    <menus-toolbar-base-font-size :select="false" />
+    <div
+      v-if="!disable('font-size-increase') || !disable('font-size-decrease')"
+      class="umo-bubble-menu-divider"
+    ></div>
+    <menus-toolbar-base-bold />
+    <menus-toolbar-base-italic />
+    <menus-toolbar-base-underline />
+    <menus-toolbar-base-strike />
+    <div class="umo-bubble-menu-divider"></div>
+    <menus-toolbar-base-align-dropdown />
+    <menus-toolbar-insert-link v-if="!disable('link')" />
+    <div class="umo-bubble-menu-divider"></div>
+    <menus-toolbar-base-color />
+    <template v-if="!is('textBox')">
+      <menus-toolbar-base-background-color />
+      <menus-toolbar-base-highlight v-if="!disable('highlight')" />
+    </template>
+    <template v-else>
+      <menus-bubble-text-box-border />
+      <menus-bubble-text-box-background />
+      <menus-bubble-text-box-writing-mode />
+      <div class="umo-bubble-menu-divider"></div>
+      <menus-bubble-node-delete />
+    </template>
+  </template>
+  <template v-if="editor?.state?.selection">
+    <slot
+      name="bubble_menu"
+      :node-type="getCurrentNode('name')"
+      :node-attrs="getCurrentNode('attrs')"
+    />
+  </template>
+</template>
+
+<script setup>
+import { t } from '../../../composables/i18n.js';
+
+import { CellSelection } from '@tiptap/pm/tables'
+
+
+import { inject } from 'vue';
+const editor = inject('editor')
+const options = inject('options')
+
+const disable = (name) => {
+  return options.value.disableExtensions.includes(name)
+}
+const is = (type) => {
+  const editorIns = editor.value
+  if (!editorIns) return false
+
+  if (type === 'table') {
+    const { selection } = editorIns.state
+    return selection instanceof CellSelection
+  }
+
+  return editorIns.isActive(type)
+}
+const attrs = (type) => {
+  return editor.value.getAttributes(type)
+}
+
+const getCurrentNode = (type) => {
+  const { state } = editor.value
+  const { selection } = state
+  const { $from } = selection
+  const currentNode = selection.node || $from.parent
+  if (type === 'name') {
+    return currentNode.type.name
+  }
+  if (type === 'attrs') {
+    return currentNode.type.attrs
+  }
+}
+</script>
+
+<style lang="less">
+.umo-bubble-menu-divider {
+  width: 1px;
+  border-right: solid 1px var(--umo-border-color-light);
+  height: 16px;
+  margin: 0 10px 0 5px;
+  &:last-child:is(.umo-bubble-menu-divider) {
+    display: none;
+  }
+}
+</style>

package/src/components/editor-main/src/components/menus/bubble/node/delete.vue

@@ -0,0 +1,15 @@
+<template>
+  <menus-button
+    ico="node-delete"
+    :text="t('bubbleMenu.delete')"
+    shortcut="Backspace"
+    @menu-click="editor?.chain().focus().deleteSelectionNode().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/bubble/node/duplicate.vue

@@ -0,0 +1,40 @@
+<template>
+  <menus-button
+    ico="node-duplicate"
+    :text="t('blockMenu.duplicate')"
+    @menu-click="duplicateNode"
+  />
+</template>
+
+<script setup>
+import { t } from '../../../../composables/i18n.js';
+
+import { getSelectionNode } from '../../../../utils/selection'
+import { shortId } from '../../../../utils/short-id'
+
+
+import { inject } from 'vue';
+const editor = inject('editor')
+
+const duplicateNode = () => {
+  const selectionNode = editor.value ? getSelectionNode(editor.value) : null
+  const getPosition = () => {
+    let point = 0
+    editor.value?.state.doc.descendants((node, pos) => {
+      if (node === selectionNode) {
+        point = pos + node.nodeSize
+      }
+    })
+    return point
+  }
+  const copeNode = selectionNode?.type.create(
+    {
+      ...selectionNode.attrs,
+      id: shortId(),
+    },
+    selectionNode.content,
+    selectionNode.marks,
+  )
+  editor.value?.commands.insertContentAt(getPosition(), copeNode?.toJSON())
+}
+</script>