adtec-core-package 3.0.0 → 3.0.1

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

@@ -0,0 +1,54 @@
+import { mergeAttributes, Node } from '@tiptap/core'
+import { VueNodeViewRenderer } from '@tiptap/vue-3'
+
+import NodeView from './node-view.vue'
+
+export default Node.create({
+  name: 'iframe',
+  inline: false,
+  group: 'block',
+  atom: true,
+  addAttributes() {
+    return {
+      vnode: {
+        default: true,
+      },
+      type: {
+        default: 0,
+      },
+      src: {
+        default: null,
+      },
+      width: {
+        default: null,
+      },
+      height: {
+        default: 200,
+      },
+      clickable: {
+        default: false,
+      },
+    }
+  },
+  parseHTML() {
+    return [{ tag: 'iframe' }]
+  },
+  renderHTML({ HTMLAttributes }) {
+    return ['iframe', mergeAttributes(HTMLAttributes)]
+  },
+  addNodeView() {
+    return VueNodeViewRenderer(NodeView)
+  },
+  addCommands() {
+    return {
+      setIframe:
+        (options) =>
+        ({ commands }) => {
+          return commands.insertContent({
+            type: this.name,
+            attrs: options,
+          })
+        },
+    }
+  },
+})

package/src/components/editor-main/src/extensions/iframe/node-view.vue

@@ -0,0 +1,106 @@
+<template>
+  <node-view-wrapper
+    :id="attrs.id"
+    ref="containerRef"
+    class="umo-node-view"
+    :style="nodeStyle"
+    @click.capture="editor?.commands.setNodeSelection(getPos())"
+  >
+    <div
+      class="umo-node-container umo-select-outline umo-node-iframe"
+      :class="{
+        'umo-hover-shadow': !options.document?.readOnly,
+      }"
+    >
+      <drager
+        :selected="selected"
+        :rotatable="false"
+        :width="attrs.width"
+        :height="attrs.height"
+        :min-width="400"
+        :min-height="200"
+        :max-width="maxWidth"
+        :disabled="options.document?.readOnly"
+        @resize="onResize"
+        @focus="selected = true"
+      >
+        <iframe
+          :src="attrs.src"
+          :style="{ pointerEvents: attrs.clickable ? 'auto' : 'none' }"
+        ></iframe>
+      </drager>
+    </div>
+  </node-view-wrapper>
+</template>
+
+<script setup>import { computed as _computed, ref as _ref } from 'vue';
+
+import { nodeViewProps, NodeViewWrapper } from '@tiptap/vue-3'
+import Drager from 'es-drager'
+
+import { inject, ref, onMounted, nextTick } from 'vue';
+import { onClickOutside } from '@vueuse/core';
+const options = inject('options')
+const editor = inject('editor')
+
+const props = defineProps(nodeViewProps)
+const attrs = _computed(() => props.node.attrs)
+const { updateAttributes, getPos } = props
+const containerRef = ref(null)
+let selected = _ref(false)
+let maxWidth = _ref(0)
+
+const nodeStyle = _computed(() => {
+  const { nodeAlign, margin } = attrs.value
+  const marginTop =
+    margin?.top && margin?.top !== '' ? `${margin.top}px` : undefined
+  const marginBottom =
+    margin?.bottom && margin?.bottom !== '' ? `${margin.bottom}px` : undefined
+  return {
+    'justify-content': nodeAlign,
+    marginTop,
+    marginBottom,
+  }
+})
+
+onMounted(async () => {
+  await nextTick()
+  if (containerRef.value) {
+    const { offsetWidth } = containerRef.value.$el
+
+    maxWidth.value = offsetWidth
+    if (attrs.value.width === null) {
+      updateAttributes({ width: offsetWidth })
+    }
+  }
+})
+const onResize = ({ width, height }) => {
+  updateAttributes({ width, height })
+}
+onClickOutside(containerRef, () => {
+  selected.value = false
+  // updateAttributes({ clickable: false })
+})
+</script>
+
+<style lang="less">
+.umo-node-view {
+  .umo-node-iframe {
+    max-width: 100%;
+    .es-drager {
+      &:not(.selected) {
+        outline: solid 1px var(--umo-content-node-border);
+      }
+    }
+    iframe {
+      display: block;
+      min-width: 200px;
+      min-height: 200px;
+      width: 100%;
+      height: 100%;
+      border: none;
+      background-color: #fff;
+    }
+  }
+}
+</style>

package/src/components/editor-main/src/extensions/image/image-resizer.vue

@@ -0,0 +1,349 @@
+<template>
+  <div
+    ref="rootRef"
+    class="es-drager"
+    :class="{
+      disabled,
+      selected: selected && !disabled,
+      border: true,
+      'is-resizing': dragging,
+    }"
+    :style="boxStyle"
+    tabindex="-1"
+    @mousedown="onRootMousedown"
+    @focus="emit('focus')"
+  >
+    <slot />
+    <template v-if="selected && !disabled && resizable">
+      <div
+        v-for="handle in handles"
+        :key="handle.side"
+        class="es-drager-dot"
+        :data-side="handle.side"
+        :style="handle.style"
+        @pointerdown.stop="onResizeStart(handle.side, $event)"
+      >
+        <div class="es-drager-dot-handle" />
+      </div>
+      <div
+        v-if="rotatable"
+        class="es-drager-rotate"
+        @pointerdown.stop="onRotateStart"
+      >
+        <div class="es-drager-rotate-handle">
+          <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+            <path
+              fill="currentColor"
+              d="M784.512 230.272v-50.56a32 32 0 1 1 64 0v149.056a32 32 0 0 1-32 32H667.52a32 32 0 1 1 0-64h92.992A320 320 0 1 0 524.8 833.152a320 320 0 0 0 320-320h64a384 384 0 0 1-384 384 384 384 0 0 1-384-384 384 384 0 0 1 643.712-282.88z"
+            />
+          </svg>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup>
+import { computed, ref, watch } from 'vue'
+
+const props = defineProps({
+  selected: { type: Boolean, default: false },
+  rotatable: { type: Boolean, default: false },
+  resizable: { type: Boolean, default: true },
+  disabled: { type: Boolean, default: false },
+  angle: { type: Number, default: 0 },
+  width: { type: Number, default: 0 },
+  height: { type: Number, default: 0 },
+  left: { type: Number, default: 0 },
+  top: { type: Number, default: 0 },
+  minWidth: { type: Number, default: 14 },
+  minHeight: { type: Number, default: 14 },
+  maxWidth: { type: Number, default: 0 },
+  maxHeight: { type: Number, default: 0 },
+  zIndex: { type: Number, default: 0 },
+  equalProportion: { type: Boolean, default: false },
+  /** 页面 zoom transform 补偿，与 es-drager scaleRatio 一致 */
+  scaleRatio: { type: Number, default: 1 },
+})
+
+const emit = defineEmits(['rotate', 'resize', 'drag-end', 'mousedown', 'focus'])
+
+const rootRef = ref(null)
+const dragging = ref(false)
+const liveWidth = ref(0)
+const liveHeight = ref(0)
+/** 松手后 attrs 尚未回写前，继续展示最终尺寸，避免闪回 */
+const commitSize = ref(null)
+
+defineExpose({
+  get $el() {
+    return rootRef.value
+  },
+})
+
+function effectiveScale() {
+  const ratio = Number(props.scaleRatio)
+  return ratio > 0 ? ratio : 1
+}
+
+function currentWidth() {
+  if (commitSize.value?.width) return commitSize.value.width
+  if (dragging.value && liveWidth.value > 0) return liveWidth.value
+  return props.width > 0 ? props.width : 0
+}
+
+function currentHeight() {
+  if (commitSize.value?.height) return commitSize.value.height
+  if (dragging.value && liveHeight.value > 0) return liveHeight.value
+  return props.height > 0 ? props.height : 0
+}
+
+function clearCommitWhenSynced() {
+  if (!commitSize.value) return
+  const { width: targetW, height: targetH } = commitSize.value
+  const w = Number(props.width)
+  const h = Number(props.height)
+  if (w > 0 && h > 0 && Math.abs(w - targetW) < 1 && Math.abs(h - targetH) < 1) {
+    commitSize.value = null
+    liveWidth.value = 0
+    liveHeight.value = 0
+  }
+}
+
+watch(() => [props.width, props.height], clearCommitWhenSynced)
+
+const boxStyle = computed(() => {
+  const style = {
+    zIndex: props.zIndex,
+    transform: `rotate(${props.angle || 0}deg)`,
+  }
+  const w = currentWidth()
+  const h = currentHeight()
+  if (w > 0) style.width = `${w}px`
+  if (h > 0) style.height = `${h}px`
+  if (props.left) style.left = `${props.left}px`
+  if (props.top) style.top = `${props.top}px`
+  return style
+})
+
+const HANDLE_SIDES = [
+  'top-left',
+  'top',
+  'top-right',
+  'right',
+  'bottom-right',
+  'bottom',
+  'bottom-left',
+  'left',
+]
+
+const handles = computed(() =>
+  HANDLE_SIDES.map((side) => ({
+    side,
+    style: handleStyle(side),
+  })),
+)
+
+function handleStyle(side) {
+  const style = { transform: 'translate(-50%, -50%)' }
+  if (side.includes('top')) style.top = '0'
+  else if (side.includes('bottom')) style.top = '100%'
+  else style.top = '50%'
+
+  if (side.includes('left')) style.left = '0'
+  else if (side.includes('right')) style.left = '100%'
+  else style.left = '50%'
+
+  return style
+}
+
+function clampSize(width, height) {
+  let w = Math.max(props.minWidth, width)
+  let h = Math.max(props.minHeight, height)
+  if (props.maxWidth > 0) w = Math.min(w, props.maxWidth)
+  if (props.maxHeight > 0) h = Math.min(h, props.maxHeight)
+  return { width: w, height: h }
+}
+
+function readPointer(event) {
+  if (event.touches?.length) {
+    return { x: event.touches[0].clientX, y: event.touches[0].clientY }
+  }
+  return { x: event.clientX, y: event.clientY }
+}
+
+function measureSize() {
+  let w = props.width
+  let h = props.height
+  const el = rootRef.value
+  if ((!w || !h) && el) {
+    const rect = el.getBoundingClientRect()
+    w = w || rect.width / effectiveScale()
+    h = h || rect.height / effectiveScale()
+  }
+  if ((!w || !h) && el) {
+    const img = el.querySelector('img')
+    if (img) {
+      w = w || img.offsetWidth || img.naturalWidth
+      h = h || img.offsetHeight || img.naturalHeight
+    }
+  }
+  return { width: w || 0, height: h || 0 }
+}
+
+function applyLiveSize(width, height) {
+  liveWidth.value = width
+  liveHeight.value = height
+}
+
+function onRootMousedown(event) {
+  emit('focus')
+  emit('mousedown', event)
+}
+
+function bindDragListeners(target, onMove, onUp) {
+  const doc = rootRef.value?.ownerDocument ?? document
+  doc.addEventListener('pointermove', onMove)
+  doc.addEventListener('pointerup', onUp)
+  doc.addEventListener('pointercancel', onUp)
+  return () => {
+    doc.removeEventListener('pointermove', onMove)
+    doc.removeEventListener('pointerup', onUp)
+    doc.removeEventListener('pointercancel', onUp)
+    target?.releasePointerCapture?.(target._activePointerId)
+  }
+}
+
+function onResizeStart(side, event) {
+  if (props.disabled) return
+  event.preventDefault()
+  event.stopPropagation()
+
+  const target = event.currentTarget
+  if (target?.setPointerCapture && event.pointerId != null) {
+    try {
+      target.setPointerCapture(event.pointerId)
+      target._activePointerId = event.pointerId
+    } catch {
+      // ignore
+    }
+  }
+
+  const scale = effectiveScale()
+  const start = readPointer(event)
+  const measured = measureSize()
+  let startW = measured.width
+  let startH = measured.height
+  if (!startW || !startH) return
+
+  dragging.value = true
+  applyLiveSize(startW, startH)
+
+  const ratio = startW / startH
+  const hasEast = side.includes('right')
+  const hasWest = side.includes('left')
+  const hasSouth = side.includes('bottom')
+  const hasNorth = side === 'top' || side.startsWith('top-')
+
+  let unbind = null
+
+  const onMove = (moveEvent) => {
+    moveEvent.preventDefault?.()
+    const point = readPointer(moveEvent)
+    const dx = (point.x - start.x) / scale
+    const dy = (point.y - start.y) / scale
+
+    let width = startW
+    let height = startH
+
+    if (hasEast) width = startW + dx
+    if (hasWest) width = startW - dx
+    if (hasSouth) height = startH + dy
+    if (hasNorth) height = startH - dy
+
+    if (props.equalProportion || moveEvent.shiftKey) {
+      if (hasNorth || hasSouth) {
+        width = height * ratio
+      } else if (hasEast || hasWest) {
+        height = width / ratio
+      } else {
+        const dominant = Math.abs(dx) > Math.abs(dy) ? 'x' : 'y'
+        if (dominant === 'x') height = width / ratio
+        else width = height * ratio
+      }
+    }
+
+    const next = clampSize(width, height)
+    applyLiveSize(next.width, next.height)
+    emit('resize', next)
+  }
+
+  const onUp = () => {
+    const finalWidth = liveWidth.value
+    const finalHeight = liveHeight.value
+    unbind?.()
+    unbind = null
+    dragging.value = false
+    if (finalWidth > 0 && finalHeight > 0) {
+      commitSize.value = { width: finalWidth, height: finalHeight }
+    }
+    emit('drag-end', { width: finalWidth, height: finalHeight })
+  }
+
+  unbind = bindDragListeners(target, onMove, onUp)
+}
+
+function onRotateStart(event) {
+  if (props.disabled) return
+  event.preventDefault()
+  event.stopPropagation()
+
+  const target = event.currentTarget
+  if (target?.setPointerCapture && event.pointerId != null) {
+    try {
+      target.setPointerCapture(event.pointerId)
+      target._activePointerId = event.pointerId
+    } catch {
+      // ignore
+    }
+  }
+
+  const rect = rootRef.value?.getBoundingClientRect()
+  if (!rect) return
+  const cx = rect.left + rect.width / 2
+  const cy = rect.top + rect.height / 2
+
+  let unbind = null
+
+  const onMove = (moveEvent) => {
+    const point = readPointer(moveEvent)
+    const angle = (Math.atan2(point.y - cy, point.x - cx) * 180) / Math.PI + 90
+    emit('rotate', { angle: (angle + 360) % 360 })
+  }
+
+  const onUp = () => {
+    unbind?.()
+    unbind = null
+  }
+
+  unbind = bindDragListeners(target, onMove, onUp)
+}
+</script>
+
+<style scoped>
+.es-drager.selected .es-drager-dot,
+.es-drager.selected .es-drager-rotate {
+  display: block;
+  pointer-events: auto;
+  z-index: 2;
+  touch-action: none;
+}
+
+.es-drager.selected .es-drager-rotate {
+  display: flex;
+}
+
+.es-drager.is-resizing {
+  user-select: none;
+}
+</style>

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

@@ -0,0 +1,216 @@
+import { mergeAttributes, nodeInputRule, nodePasteRule } from '@tiptap/core'
+import Image from '@tiptap/extension-image'
+import { VueNodeViewRenderer } from '@tiptap/vue-3'
+
+import NodeView from './node-view.vue'
+
+const parseDimension = (element, name) => {
+  const styleValue = element.style?.[name]
+  const attrValue = element.getAttribute(name)
+  const rawValue = styleValue || attrValue
+
+  if (!rawValue) {
+    return null
+  }
+
+  const normalizedValue = String(rawValue).trim()
+
+  if (/^\d+(\.\d+)?px$/i.test(normalizedValue)) {
+    return Number.parseFloat(normalizedValue)
+  }
+
+  if (/^\d+(\.\d+)?$/.test(normalizedValue)) {
+    return Number.parseFloat(normalizedValue)
+  }
+
+  return null
+}
+
+const customImage = Image.extend({
+  atom: true,
+  selectable: true,
+  addAttributes() {
+    return {
+      vnode: {
+        default: true,
+      },
+      type: {
+        default: 'image',
+      },
+      name: {
+        default: null,
+      },
+      size: {
+        default: null,
+      },
+      id: {
+        default: null,
+      },
+      src: {
+        default: null,
+      },
+      config: {
+        default: null,
+      },
+      content: {
+        default: null,
+      },
+      width: {
+        default: null,
+        parseHTML: (element) => parseDimension(element, 'width'),
+        renderHTML: (attributes) => {
+          if (!attributes.width) return {}
+          return { width: attributes.width }
+        },
+      },
+      height: {
+        default: null,
+        parseHTML: (element) => parseDimension(element, 'height'),
+        renderHTML: (attributes) => {
+          if (!attributes.height) return {}
+          return { height: attributes.height }
+        },
+      },
+      left: {
+        default: 0,
+      },
+      top: {
+        default: 0,
+      },
+      angle: {
+        default: null,
+      },
+      draggable: {
+        default: false,
+      },
+      rotatable: {
+        default: false,
+      },
+      equalProportion: {
+        default: true,
+      },
+      flipX: {
+        default: false,
+      },
+      flipY: {
+        default: false,
+      },
+      uploaded: {
+        default: false,
+      },
+      error: {
+        default: false,
+      },
+      previewType: {
+        default: 'image',
+      },
+      inline: {
+        default: false,
+      },
+    }
+  },
+  parseHTML() {
+    return [{ tag: 'img' }]
+  },
+  addPasteRules() {
+    return [
+      ...(this.parent?.() || []),
+      nodePasteRule({
+        find: /!\[([^\]]*)\]\(([^)\s]+)(?:\s+"([^"]+)"?)?\)/g,
+        type: this.type,
+        getAttributes: (match) => {
+          const [, alt, src, title] = match
+          return { src, alt, title }
+        },
+      }),
+    ]
+  },
+  addInputRules() {
+    return [
+      ...(this.parent?.() || []),
+      nodeInputRule({
+        find: /!\[([\S]+)\]\(([^)\s]+)(?:\s+"([\S]+)"?)?\)/g,
+        type: this.type,
+        getAttributes: (match) => {
+          const [, alt, src, title] = match
+          return { src, alt, title }
+        },
+      }),
+    ]
+  },
+})
+// 节点块级别扩展
+export const BlockImage = customImage.extend({
+  addNodeView() {
+    return VueNodeViewRenderer(NodeView)
+  },
+  addCommands() {
+    return {
+      setImage:
+        (options, replace) =>
+        ({ commands, editor }) => {
+          if (replace) {
+            return commands.insertContent({
+              type: this.name,
+              attrs: { ...options, inline: false },
+            })
+          }
+          return commands.insertContentAt(editor.state.selection.anchor, {
+            type: this.name,
+            attrs: { ...options, inline: false },
+          })
+        },
+    }
+  },
+})
+// 行内扩展
+export const InlineImage = customImage.extend({
+  name: 'inlineImage',
+  // 行内元素
+  inline: true,
+
+  // 属于行内组
+  group: 'inline',
+  addAttributes() {
+    return {
+      ...this.parent?.(),
+      inline: {
+        default: true,
+      },
+      equalProportion: {
+        default: false,
+      },
+      width: {
+        default: 150,
+      },
+      height: {
+        default: 80,
+      },
+    }
+  },
+  parseHTML() {
+    return [{ tag: 'inline-img' }]
+  },
+  renderHTML({ HTMLAttributes }) {
+    return ['inline-img', mergeAttributes(HTMLAttributes)]
+  },
+  addNodeView() {
+    return VueNodeViewRenderer(NodeView)
+  },
+  addCommands() {
+    return {
+      setInlineImage:
+        (options) =>
+        ({ commands, editor }) => {
+          // return commands.insertContent({
+          //   type: this.name,
+          //   attrs: { ...options, inline: true },
+          // })
+          return commands.insertContentAt(editor.state.selection.anchor, {
+            type: this.name,
+            attrs: { ...options, inline: true },
+          })
+        },
+    }
+  },
+})