adtec-core-package 3.0.0 → 3.0.2

package/src/components/editor-main/src/extensions/line-height.js

@@ -0,0 +1,147 @@
+import { Extension } from '@tiptap/core'
+import { NodeSelection } from '@tiptap/pm/state'
+
+export default Extension.create({
+  name: 'lineHeight',
+  addOptions() {
+    return {
+      types: ['heading', 'paragraph'],
+      defaultLineHeight: 1.75,
+    }
+  },
+  // 查找离光标最近的可设置节点
+  // 仅在 selection 内没有可更新节点时作为兜底
+  // （与 node-align、margin 实现保持一致）
+  findClosestTargetNode(state, typeNames) {
+    const { selection } = state
+    if (selection instanceof NodeSelection) {
+      const { node } = selection
+      if (node && typeNames.includes(node.type.name)) {
+        return { node, pos: selection.from }
+      }
+    }
+    const { $from } = selection
+    for (let { depth } = $from; depth > 0; depth -= 1) {
+      const node = $from.node(depth)
+      if (typeNames.includes(node.type.name)) {
+        return { node, pos: $from.before(depth) }
+      }
+    }
+    return null
+  },
+  addGlobalAttributes() {
+    return [
+      {
+        types: this.options.types,
+        attributes: {
+          lineHeight: {
+            default: this.options.defaultLineHeight,
+            parseHTML: (element) =>
+              element.style.lineHeight || this.options.defaultLineHeight,
+            renderHTML: (attributes) => {
+              if (attributes.lineHeight === this.options.defaultLineHeight) {
+                return {}
+              }
+              return { style: `line-height: ${attributes.lineHeight}` }
+            },
+          },
+        },
+      },
+    ]
+  },
+  addCommands() {
+    return {
+      setLineHeight:
+        (lineHeight) =>
+        ({ editor, state, dispatch }) => {
+          const typeNames = this.options.types.filter(
+            (type) => editor.schema.nodes[type],
+          )
+
+          let { tr } = state
+          let updated = false
+
+          state.doc.nodesBetween(
+            state.selection.from,
+            state.selection.to,
+            (node, pos) => {
+              if (!typeNames.includes(node.type.name)) return
+              if (node.attrs.lineHeight === lineHeight) {
+                updated = true
+                return
+              }
+              tr = tr.setNodeMarkup(pos, undefined, {
+                ...node.attrs,
+                lineHeight,
+              })
+              updated = true
+            },
+          )
+
+          if (!updated) {
+            const target = this.findClosestTargetNode(state, typeNames)
+            if (!target) return false
+            if (target.node.attrs.lineHeight === lineHeight) {
+              return true
+            }
+            tr = tr.setNodeMarkup(target.pos, undefined, {
+              ...target.node.attrs,
+              lineHeight,
+            })
+            updated = true
+          }
+
+          if (dispatch && tr.docChanged) {
+            dispatch(tr)
+          }
+          return updated
+        },
+      unsetLineHeight:
+        () =>
+        ({ editor, state, dispatch }) => {
+          const { defaultLineHeight } = this.options
+          const typeNames = this.options.types.filter(
+            (type) => editor.schema.nodes[type],
+          )
+
+          let { tr } = state
+          let updated = false
+
+          state.doc.nodesBetween(
+            state.selection.from,
+            state.selection.to,
+            (node, pos) => {
+              if (!typeNames.includes(node.type.name)) return
+              if (node.attrs.lineHeight === defaultLineHeight) {
+                updated = true
+                return
+              }
+              tr = tr.setNodeMarkup(pos, undefined, {
+                ...node.attrs,
+                lineHeight: defaultLineHeight,
+              })
+              updated = true
+            },
+          )
+
+          if (!updated) {
+            const target = this.findClosestTargetNode(state, typeNames)
+            if (!target) return false
+            if (target.node.attrs.lineHeight === defaultLineHeight) {
+              return true
+            }
+            tr = tr.setNodeMarkup(target.pos, undefined, {
+              ...target.node.attrs,
+              lineHeight: defaultLineHeight,
+            })
+            updated = true
+          }
+
+          if (dispatch && tr.docChanged) {
+            dispatch(tr)
+          }
+          return updated
+        },
+    }
+  },
+})

package/src/components/editor-main/src/extensions/margin.js

@@ -0,0 +1,266 @@
+import { Extension } from '@tiptap/core'
+import { NodeSelection } from '@tiptap/pm/state'
+
+const normalizeMarginValue = (value) => {
+  if (value === null || value === undefined) return null
+  if (typeof value === 'number') {
+    return Number.isFinite(value) ? String(value) : null
+  }
+  if (typeof value !== 'string') return null
+  const trimmed = value.trim().replace(/px$/i, '')
+  if (!trimmed) return null
+  const num = Number.parseFloat(trimmed)
+  if (!Number.isFinite(num)) return null
+  return String(num)
+}
+
+const normalizeMargin = (options) => {
+  if (!options || typeof options !== 'object') return null
+  const top = normalizeMarginValue(options.top)
+  const bottom = normalizeMarginValue(options.bottom)
+  const next = {}
+  if (top !== null && top !== '' && top !== '0') next.top = top
+  if (bottom !== null && bottom !== '' && bottom !== '0') next.bottom = bottom
+  return Object.keys(next).length ? next : null
+}
+
+const isSameMargin = (a, b) => {
+  if (!a && !b) return true
+  if (!a || !b) return false
+  if (typeof a !== 'object' || typeof b !== 'object') return false
+  const aTop = a.top || null
+  const bTop = b.top || null
+  const aBottom = a.bottom || null
+  const bBottom = b.bottom || null
+  return aTop === bTop && aBottom === bBottom
+}
+
+const findClosestTargetNode = (state, typeNames) => {
+  const { selection } = state
+
+  if (selection instanceof NodeSelection) {
+    const { node } = selection
+    if (node && typeNames.includes(node.type.name)) {
+      return { node, pos: selection.from }
+    }
+  }
+
+  const { $from } = selection
+  for (let { depth } = $from; depth > 0; depth -= 1) {
+    const node = $from.node(depth)
+    if (typeNames.includes(node.type.name)) {
+      return { node, pos: $from.before(depth) }
+    }
+  }
+
+  return null
+}
+
+export default Extension.create({
+  name: 'margin',
+  addOptions() {
+    return {
+      types: [
+        'heading',
+        'paragraph',
+        'audio',
+        'codeBlock',
+        'file',
+        'iframe',
+        'image',
+        'toc',
+        'video',
+        'horizontalRule',
+        'table',
+        'bulletList',
+        'orderedList',
+        'taskList',
+        'echarts',
+        'callout',
+        'columns',
+        'blockMath',
+        'codeBlock',
+      ],
+      margin: { top: 0, bottom: 0 },
+    }
+  },
+  addGlobalAttributes() {
+    return [
+      {
+        types: this.options.types,
+        attributes: {
+          margin: {
+            default: null,
+            parseHTML: (element) => {
+              const { marginTop, marginBottom } = element.style
+              if (
+                (marginTop === '' && marginBottom === '') ||
+                (marginTop === '0px' && marginBottom === '0px')
+              ) {
+                return null
+              }
+              const styleMargin = {}
+              if (marginTop && marginTop !== '0px') {
+                const top = normalizeMarginValue(marginTop.replace(/px/g, ''))
+                if (top !== null && top !== '' && top !== '0') {
+                  styleMargin.top = top
+                }
+              }
+              if (marginBottom && marginBottom !== '0px') {
+                const bottom = normalizeMarginValue(
+                  marginBottom.replace(/px/g, ''),
+                )
+                if (bottom !== null && bottom !== '' && bottom !== '0') {
+                  styleMargin.bottom = bottom
+                }
+              }
+              return Object.keys(styleMargin).length ? styleMargin : null
+            },
+            renderHTML: (attributes) => {
+              const { margin } = attributes
+              if (!margin || typeof margin !== 'object') return {}
+
+              const { top, bottom } = margin
+              let styleMargin = ''
+              if (top !== null && top !== undefined && top !== '') {
+                styleMargin += `margin-top: ${top}px;`
+              }
+              if (bottom !== null && bottom !== undefined && bottom !== '') {
+                styleMargin += `margin-bottom: ${bottom}px;`
+              }
+              if (!styleMargin) return {}
+              return { style: styleMargin }
+            },
+          },
+        },
+      },
+    ]
+  },
+  addCommands() {
+    return {
+      setMargin:
+        (options) =>
+        ({ editor, state, dispatch }) => {
+          const typeNames = this.options.types.filter(
+            (type) => editor.schema.nodes[type],
+          )
+
+          const normalized = normalizeMargin(options)
+          if (!normalized) {
+            return editor.commands.unsetMargin()
+          }
+
+          let { tr } = state
+          let updated = false
+
+          state.doc.nodesBetween(
+            state.selection.from,
+            state.selection.to,
+            (node, pos) => {
+              if (!typeNames.includes(node.type.name)) return
+
+              const current =
+                node.attrs.margin && typeof node.attrs.margin === 'object'
+                  ? node.attrs.margin
+                  : null
+
+              const next = normalizeMargin({ ...current, ...normalized })
+              if (isSameMargin(current, next)) {
+                updated = true
+                return
+              }
+
+              tr = tr.setNodeMarkup(pos, undefined, {
+                ...node.attrs,
+                margin: next,
+              })
+              updated = true
+            },
+          )
+
+          if (!updated) {
+            const target = findClosestTargetNode(state, typeNames)
+            if (!target) return false
+
+            const current =
+              target.node.attrs.margin &&
+              typeof target.node.attrs.margin === 'object'
+                ? target.node.attrs.margin
+                : null
+
+            const next = normalizeMargin({ ...current, ...normalized })
+            if (isSameMargin(current, next)) {
+              return true
+            }
+            tr = tr.setNodeMarkup(target.pos, undefined, {
+              ...target.node.attrs,
+              margin: next,
+            })
+            updated = true
+          }
+
+          if (dispatch && tr.docChanged) {
+            dispatch(tr)
+          }
+
+          return updated
+        },
+      unsetMargin:
+        () =>
+        ({ editor, state, dispatch }) => {
+          const typeNames = this.options.types.filter(
+            (type) => editor.schema.nodes[type],
+          )
+
+          let { tr } = state
+          let updated = false
+
+          state.doc.nodesBetween(
+            state.selection.from,
+            state.selection.to,
+            (node, pos) => {
+              if (!typeNames.includes(node.type.name)) return
+              const current = node.attrs.margin
+              if (
+                !current ||
+                (typeof current === 'object' && !Object.keys(current).length)
+              ) {
+                updated = true
+                return
+              }
+              tr = tr.setNodeMarkup(pos, undefined, {
+                ...node.attrs,
+                margin: null,
+              })
+              updated = true
+            },
+          )
+
+          if (!updated) {
+            const target = findClosestTargetNode(state, typeNames)
+            if (!target) return false
+
+            const current = target.node.attrs.margin
+            if (
+              !current ||
+              (typeof current === 'object' && !Object.keys(current).length)
+            ) {
+              return true
+            }
+
+            tr = tr.setNodeMarkup(target.pos, undefined, {
+              ...target.node.attrs,
+              margin: null,
+            })
+            updated = true
+          }
+
+          if (dispatch && tr.docChanged) {
+            dispatch(tr)
+          }
+
+          return updated
+        },
+    }
+  },
+})

package/src/components/editor-main/src/extensions/mention/index.js

@@ -0,0 +1,33 @@
+import Mention from '@tiptap/extension-mention'
+
+export default Mention.extend({
+  addOptions() {
+    return {
+      ...this.parent?.(),
+      HTMLAttributes: {
+        class: 'umo-node-mention',
+      },
+    }
+  },
+  addAttributes() {
+    return {
+      id: {
+        default: null,
+      },
+      label: {
+        default: null,
+      },
+    }
+  },
+  addCommands() {
+    return {
+      insertMention:
+        () =>
+        ({ commands }) => {
+          return commands.insertContent(
+            ` ${this.options?.suggestion?.char || '@'}`,
+          )
+        },
+    }
+  },
+})

package/src/components/editor-main/src/extensions/mention/mentions.vue

@@ -0,0 +1,180 @@
+<template>
+  <div
+    v-if="items.length > 0"
+    ref="popupRef"
+    class="umo-popup umo-mention-popup"
+  >
+    <div class="umo-popup__content umo-dropdown">
+      <div class="umo-dropdown__menu" style="padding: 5px; max-height: 320px">
+        <div>
+          <li
+            v-for="(item, index) in items"
+            :key="item.id || item.label || index"
+            class="umo-dropdown__item umo-dropdown__item--theme-default umo-dropdown__item umo-mention-popup-item"
+            :class="{ 'umo-dropdown__item--active': index === selectedIndex }"
+            @click="selectItem(index)"
+          >
+            <div class="umo-mention-popup-item-content">
+              <t-avatar
+                class="umo-mention-popup-item-avatar"
+                shape="circle"
+                size="20px"
+                :style="{ borderColor: item.color || 'transparent' }"
+                :image="item.avatar"
+              >
+                {{ item.label?.slice(0, 1) }}
+              </t-avatar>
+              <span class="umo-mention-popup-item-name">{{ item.label }}</span>
+            </div>
+            <span v-if="item.bio" class="umo-mention-popup-item-bio">
+              {{ item.bio }}
+            </span>
+          </li>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>import { ref as _ref } from 'vue';
+
+
+import { watch } from 'vue';
+const props = defineProps({
+  items: {
+    type: Array,
+    required: true,
+  },
+  command: {
+    type: Function,
+    required: true,
+  },
+})
+
+let selectedIndex = _ref(0)
+
+watch(
+  () => props.items,
+  () => {
+    selectedIndex.value = 0
+  },
+)
+
+const onKeyDown = ({ event }) => {
+  if (event.key === 'ArrowUp') {
+    upHandler()
+    return true
+  }
+
+  if (event.key === 'ArrowDown') {
+    downHandler()
+    return true
+  }
+
+  if (event.key === 'Enter') {
+    if (props.items.length === 0) {
+      return false
+    }
+    enterHandler()
+    return true
+  }
+
+  return false
+}
+
+const upHandler = () => {
+  selectedIndex.value = (selectedIndex.value + props.items.length - 1) % props.items.length
+}
+
+const downHandler = () => {
+  selectedIndex.value = (selectedIndex.value + 1) % props.items.length
+}
+
+const enterHandler = () => {
+  selectItem(selectedIndex.value)
+}
+
+const selectItem = (index) => {
+  const item = props.items[index]
+
+  if (item) {
+    props.command(item)
+  }
+}
+
+defineExpose({
+  onKeyDown,
+})
+</script>
+
+<style lang="less">
+.umo-node-mention {
+  box-decoration-break: clone;
+  color: var(--umo-primary-color);
+  padding: 0.1em 0.2em;
+  margin: 0 0.1em;
+  border-radius: 0.2em;
+  white-space: nowrap;
+  cursor: default;
+}
+.umo-mention-popup {
+  .umo-dropdown {
+    &__menu {
+      padding: 8px !important;
+      border-radius: var(--umo-radius);
+    }
+    &__item--active {
+      font-weight: 600;
+    }
+  }
+  &-item {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 10px;
+    padding: 3px 6px !important;
+    &:not(:last-child) {
+      margin-bottom: 2px;
+    }
+    &-content {
+      flex: 1;
+      min-width: 0;
+      display: flex;
+      align-items: center;
+      gap: 6px;
+    }
+    &-avatar {
+      border-width: 1px;
+      border-style: solid;
+      border-radius: 50%;
+      flex-shrink: 0;
+      color: var(--umo-text-color);
+      font-size: 14px;
+      font-weight: 600;
+      line-height: 1;
+      background-color: rgba(0, 0, 0, 0.05);
+    }
+    &-name {
+      font-size: 14px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    &-bio {
+      flex-shrink: 0;
+      max-width: 160px;
+      font-size: 12px;
+      color: var(--umo-text-color-light);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+  &-empty {
+    padding: 3px 5px;
+    min-width: 100px;
+    color: var(--umo-text-color-light);
+  }
+}
+</style>

package/src/components/editor-main/src/extensions/mention/suggestion.js

@@ -0,0 +1,90 @@
+import { computePosition, flip, shift } from '@floating-ui/dom'
+import { posToDOMRect, VueRenderer } from '@tiptap/vue-3'
+
+import Mentions from './mentions.vue'
+
+const updatePosition = (editor, element) => {
+  const virtualElement = {
+    getBoundingClientRect: () =>
+      posToDOMRect(
+        editor.view,
+        editor.state.selection.from,
+        editor.state.selection.to,
+      ),
+  }
+
+  computePosition(virtualElement, element, {
+    placement: 'bottom-start',
+    strategy: 'absolute',
+    middleware: [shift(), flip()],
+  }).then(({ x, y, strategy }) => {
+    element.style.width = 'max-content'
+    element.style.position = strategy
+    element.style.left = `${x}px`
+    element.style.top = `${y}px`
+  })
+}
+
+export default (users, container) => {
+  return {
+    items: ({ query }) =>
+      users.filter((user) => user.label.includes(query)).slice(0, 10),
+
+    command: ({ editor, range, props }) => {
+      editor
+        .chain()
+        .focus()
+        .deleteRange(range)
+        .insertContent({
+          type: 'mention',
+          attrs: {
+            id: props.id,
+            label: props.label,
+          },
+        })
+        .run()
+    },
+
+    render: () => {
+      let component
+
+      return {
+        onStart: (props) => {
+          component = new VueRenderer(Mentions, {
+            props,
+            editor: props.editor,
+          })
+
+          if (!props.clientRect) {
+            return
+          }
+
+          component.element.style.position = 'absolute'
+
+          document.body.appendChild(component.element)
+
+          updatePosition(props.editor, component.element)
+        },
+        onUpdate(props) {
+          component.updateProps(props)
+          if (!props.clientRect) {
+            return
+          }
+
+          updatePosition(props.editor, component.element)
+        },
+        onKeyDown(props) {
+          if (props.event.key === 'Escape') {
+            component.destroy()
+            return true
+          }
+          return component.ref?.onKeyDown(props)
+        },
+        onExit() {
+          component.element.remove()
+          component.destroy()
+        },
+      }
+    },
+  }
+}