adtec-core-package 3.0.0 → 3.0.1

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

@@ -0,0 +1,31 @@
+<template>
+  <menus-button
+    ico="file-view"
+    :text="t('bubbleMenu.toFile')"
+    @menu-click="nodeTofile"
+  />
+</template>
+
+<script setup>
+import { t } from '../../../../composables/i18n.js';
+
+import { getSelectionNode } from '../../../../utils/selection'
+
+import { inject } from 'vue';
+const editor = inject('editor')
+
+const nodeTofile = () => {
+  const { attrs } = getSelectionNode(editor.value)
+  if (!attrs) {
+    return false
+  }
+  editor.value.commands.insertContent({
+    type: 'file',
+    attrs: {
+      ...attrs,
+      url: attrs.url || attrs.src,
+    },
+  })
+  return true
+}
+</script>

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

@@ -0,0 +1,36 @@
+<template>
+  <menus-button
+    ico="background-color"
+    :text="t('bubbleMenu.tag.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 { 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 tag = editor.value?.state?.selection?.$from?.node()
+  if (tag) {
+    editor.value?.commands.updateAttributes('tag', {
+      type: 'custom',
+      backgroundColor,
+    })
+  }
+}
+</script>

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

@@ -0,0 +1,88 @@
+<template>
+  <div class="umo-bubble-tag-builtin">
+    <div
+      v-for="item in tags"
+      :key="item.type"
+      class="umo-bubble-tag-item"
+      :style="{
+        color: item.color,
+        backgroundColor: item.backgroundColor,
+      }"
+      @click="selectStyle(item)"
+    >
+      <icon
+        v-if="editor?.getAttributes('tag').type === item.type"
+        name="selected"
+        size="14"
+      />
+      <span v-else class="umo-bubble-tag-item-text">A</span>
+    </div>
+  </div>
+</template>
+
+<script setup>import { inject } from 'vue';
+
+const tags = [
+  {
+    color: '#999',
+    backgroundColor: 'rgba(0, 0, 0, 0.05)',
+    type: 'default',
+  },
+  {
+    color: 'rgba(200, 78, 67, 1)',
+    backgroundColor: 'rgb(252, 223, 220)',
+    type: 'danger',
+  },
+  {
+    color: 'rgba(63, 133, 255, 1)',
+    backgroundColor: 'rgb(217, 231, 255)',
+    type: 'primary',
+  },
+  {
+    color: 'rgba(240, 196, 23, 1)',
+    backgroundColor: 'rgb(255, 245, 210)',
+    type: 'warning',
+  },
+  {
+    color: 'rgba(5, 205, 153, 1)',
+    backgroundColor: 'rgb(205, 245, 235)',
+    type: 'success',
+  },
+]
+
+const editor = inject('editor')
+
+const selectStyle = (item) => {
+  const tag = editor.value?.state?.selection?.$from?.node()
+  if (tag) {
+    editor.value?.commands.updateAttributes('tag', {
+      type: item.type,
+      color: item.color,
+      backgroundColor: item.backgroundColor,
+    })
+  }
+}
+</script>
+
+<style lang="less">
+.umo-bubble-tag-builtin {
+  margin-right: 5px;
+  display: flex;
+  align-items: center;
+}
+.umo-bubble-tag-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-left: 5px;
+  &-text {
+    font-size: 14px;
+  }
+}
+</style>

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

@@ -0,0 +1,36 @@
+<template>
+  <menus-button
+    ico="color"
+    :text="t('bubbleMenu.tag.color')"
+    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 { inject } from 'vue';
+
+const emits = defineEmits(['change'])
+
+const { popupVisible, togglePopup } = usePopup()
+const editor = inject('editor')
+
+const colorChange = (color) => {
+  popupVisible.value = false
+  const textColor = color === '' ? null : color
+  const tag = editor.value?.state?.selection?.$from?.node()
+  if (tag) {
+    editor.value?.commands.updateAttributes('tag', {
+      type: 'custom',
+      color: textColor,
+    })
+  }
+}
+</script>

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

@@ -0,0 +1,14 @@
+<template>
+  <menus-button
+    ico="node-delete"
+    :text="t('bubbleMenu.tag.delete')"
+    @menu-click="editor?.chain().focus().deleteSelection().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/tag/input.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="umo-bubble-tag-input">
+    <t-input
+      v-model.trim="value"
+      type="search"
+      size="small"
+      :placeholder="t('bubbleMenu.tag.placeholder')"
+      :status="value === '' ? 'error' : 'default'"
+      @enter="onInput"
+    >
+      <template #suffixIcon>
+        <icon name="plus" size="14" @click="onInput(value)" />
+      </template>
+    </t-input>
+  </div>
+</template>
+
+<script setup>
+import { t } from '../../../../composables/i18n.js';
+import { ref as _ref } from 'vue';
+
+
+import { inject, onMounted, onBeforeUnmount } from 'vue';
+const editor = inject('editor')
+let value = _ref('')
+
+const setValue = () => {
+  const attrs = editor.value?.getAttributes('tag')
+  if (attrs?.text) {
+    value.value = attrs.text
+  }
+}
+
+onMounted(() => {
+  setValue()
+  editor.value?.on('selectionUpdate', setValue)
+})
+
+onBeforeUnmount(() => {
+  editor.value?.off('selectionUpdate', setValue)
+})
+
+const onInput = (value) => {
+  if (value === '') {
+    return
+  }
+  const tag = editor.value?.state?.selection?.$from?.node()
+  if (tag) {
+    editor.value?.commands.updateAttributes('tag', { text: value })
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.umo-bubble-tag-input {
+  margin-right: 8px;
+  width: 120px;
+  :deep(.umo-input__suffix) {
+    margin-right: -3px;
+    cursor: pointer;
+  }
+}
+</style>

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

@@ -0,0 +1,37 @@
+<template>
+  <menus-button
+    ico="table-cells-background"
+    :text="t('bubbleMenu.textBox.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 textBox = editor.value ? getSelectionNode(editor.value) : null
+  if (textBox) {
+    editor.value?.commands.updateAttributes(textBox.type, {
+      backgroundColor,
+    })
+  }
+}
+</script>

package/src/components/editor-main/src/components/menus/bubble/text-box/border.vue

@@ -0,0 +1,186 @@
+<template>
+  <menus-button
+    ico="border"
+    :text="t('bubbleMenu.textBox.border')"
+    menu-type="popup"
+    huge
+    :popup-visible="popupVisible"
+    @toggle-popup="togglePopup"
+  >
+    <template #content>
+      <div class="umo-textbox-border-dropdown">
+        <t-popup
+          v-model="colorPickerVisible"
+          :attach="container"
+          placement="right-bottom"
+          trigger="click"
+        >
+          <div
+            class="umo-textbox-border-dropdown-item"
+            :class="{ active: colorPickerVisible }"
+          >
+            <span>
+              <icon name="palette-color" />
+              {{ t('bubbleMenu.textBox.borderColor') }}
+            </span>
+            <div class="arrow">
+              <icon name="arrow-down" />
+            </div>
+          </div>
+          <template #content>
+            <div class="umo-textbox-border-color-picker">
+              <picker-color default-color="#000" @change="colorChange" />
+            </div>
+          </template>
+        </t-popup>
+        <t-dropdown
+          trigger="click"
+          placement="right-top"
+          style="width: 120px"
+          @click="styleChange"
+        >
+          <div class="umo-textbox-border-dropdown-item">
+            <span>
+              <icon name="border" size="16" />
+              {{ t('bubbleMenu.textBox.borderStyle') }}
+            </span>
+            <div class="arrow">
+              <icon name="arrow-down" />
+            </div>
+          </div>
+          <t-dropdown-menu>
+            <t-dropdown-item
+              v-for="(item, index) in styles"
+              :key="index"
+              :value="item"
+            >
+              <div
+                class="umo-textbox-border-style-item"
+                :style="{
+                  'border-top': `${item.style} ${item.width}px currentColor`,
+                }"
+              ></div>
+            </t-dropdown-item>
+          </t-dropdown-menu>
+        </t-dropdown>
+        <div class="umo-textbox-border-dropdown-item" @click="noBorder">
+          <span>
+            <icon name="border-none" size="16" />
+            {{ t('bubbleMenu.textBox.noBorder') }}
+          </span>
+        </div>
+      </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 } from 'vue';
+const { popupVisible, togglePopup } = usePopup()
+const container = inject('container')
+const editor = inject('editor')
+
+const styles = [
+  { style: 'solid', width: 1 },
+  { style: 'dotted', width: 1 },
+  { style: 'dashed', width: 1 },
+  { style: 'solid', width: 2 },
+  { style: 'dotted', width: 2 },
+  { style: 'dashed', width: 2 },
+  { style: 'double', width: 2 },
+  { style: 'solid', width: 3 },
+  { style: 'dotted', width: 3 },
+  { style: 'dashed', width: 3 },
+  { style: 'double', width: 3 },
+]
+
+const borderColor = _ref('#000')
+let colorPickerVisible = _ref(false)
+
+const colorChange = (color) => {
+  const textBox = editor.value ? getSelectionNode(editor.value) : null
+  if (textBox) {
+    editor.value?.commands.updateAttributes(textBox.type, {
+      borderColor: color,
+    })
+    colorPickerVisible.value = false
+    popupVisible.value = false
+  }
+}
+const styleChange = ({ value }) => {
+  const textBox = editor.value ? getSelectionNode(editor.value) : null
+  if (textBox) {
+    editor.value?.commands.updateAttributes(textBox.type, {
+      borderStyle: value.style,
+      borderWidth: value.width,
+      borderColor: borderColor.value,
+    })
+    popupVisible.value = false
+  }
+}
+
+const noBorder = () => {
+  const textBox = editor.value ? getSelectionNode(editor.value) : null
+  if (textBox) {
+    editor.value?.commands.updateAttributes(textBox.type, {
+      borderStyle: 'none',
+      borderWidth: 0,
+      borderColor: 'transparent',
+    })
+    popupVisible.value = false
+  }
+}
+</script>
+
+<style lang="less">
+.umo-textbox-border {
+  &-dropdown {
+    &-item {
+      cursor: pointer;
+      border-radius: var(--umo-radius);
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 5px 6px 5px 8px;
+      cursor: pointer;
+      user-select: none;
+      width: 110px;
+      &:hover,
+      &.active {
+        background-color: var(--td-bg-color-container-hover);
+        border-radius: var(--umo-radius);
+      }
+      .arrow {
+        .umo-icon {
+          transform: rotate(-90deg);
+        }
+      }
+      > span {
+        display: flex;
+        gap: 5px;
+        align-items: center;
+      }
+      &:hover {
+        background-color: var(--td-bg-color-container-hover);
+      }
+      &-title {
+        color: var(--umo-text-color-light);
+        padding: 5px 6px;
+      }
+    }
+  }
+  &-style-item {
+    margin: 10px 0;
+    width: 160px;
+  }
+}
+.umo-textbox-border-color-picker {
+  padding: 12px;
+}
+</style>

package/src/components/editor-main/src/components/menus/bubble/text-box/writing-mode.vue

@@ -0,0 +1,42 @@
+<template>
+  <menus-button
+    :text="t('bubbleMenu.textBox.writingMode')"
+    ico="writing-mode"
+    menu-type="dropdown"
+    hide-text
+    :select-options="writingModes"
+    @click="setWritingMode"
+  />
+</template>
+
+<script setup>
+import { t } from '../../../../composables/i18n.js';
+import { inject } from 'vue';
+
+const editor = inject('editor')
+
+const writingModes = [
+  {
+    content: t('bubbleMenu.textBox.horizontalTb'),
+    value: 'auto',
+    active: editor.value?.isActive({ writingMode: 'horizontal-tb' }),
+  },
+  {
+    content: t('bubbleMenu.textBox.verticalLr'),
+    value: 'vertical-lr',
+    active: editor.value?.isActive({ writingMode: 'vertical-lr' }),
+  },
+  {
+    content: t('bubbleMenu.textBox.verticalRl'),
+    value: 'vertical-rl',
+    active: editor.value?.isActive({ writingMode: 'vertical-rl' }),
+  },
+]
+
+const setWritingMode = ({ content, value }) => {
+  if (!content) {
+    return
+  }
+  editor.value?.commands.updateAttributes('textBox', { writingMode: value })
+}
+</script>

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

@@ -0,0 +1,31 @@
+<template>
+  <menus-button
+    :menu-active="editor?.getAttributes('iframe')?.clickable"
+    ico="clickable"
+    :text="t('bubbleMenu.webpage.clickable')"
+    @menu-click="toggleClickable"
+  />
+</template>
+
+<script setup>
+import { t } from '../../../../composables/i18n.js';
+
+import { getSelectionNode } from '../../../../utils/selection'
+
+
+import { inject } from 'vue';
+const editor = inject('editor')
+
+const toggleClickable = () => {
+  const webpage = editor.value ? getSelectionNode(editor.value) : null
+  if (webpage) {
+    // editor.value?.commands.updateAttributes(webpage.type, {
+    //   clickable: !webpage?.attrs?.clickable,
+    // })
+    editor.value?.commands.setIframe({
+      ...webpage?.attrs,
+      clickable: !webpage?.attrs?.clickable,
+    })
+  }
+}
+</script>

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

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