@jvs-milkdown/components 1.2.29 → 1.2.30

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jvs-milkdown/components",
-  "version": "1.2.29",
+  "version": "1.2.30",
   "keywords": [
     "milkdown",
     "milkdown plugin"
@@ -55,15 +55,15 @@
   "dependencies": {
     "@codemirror/merge": "^6.12.1",
     "@floating-ui/dom": "^1.5.1",
-    "@jvs-milkdown/core": "^1.2.29",
-    "@jvs-milkdown/ctx": "^1.2.29",
-    "@jvs-milkdown/exception": "^1.2.29",
-    "@jvs-milkdown/plugin-tooltip": "^1.2.29",
-    "@jvs-milkdown/preset-commonmark": "^1.2.29",
-    "@jvs-milkdown/preset-gfm": "^1.2.29",
-    "@jvs-milkdown/prose": "^1.2.29",
-    "@jvs-milkdown/transformer": "^1.2.29",
-    "@jvs-milkdown/utils": "^1.2.29",
+    "@jvs-milkdown/core": "^1.2.30",
+    "@jvs-milkdown/ctx": "^1.2.30",
+    "@jvs-milkdown/exception": "^1.2.30",
+    "@jvs-milkdown/plugin-tooltip": "^1.2.30",
+    "@jvs-milkdown/preset-commonmark": "^1.2.30",
+    "@jvs-milkdown/preset-gfm": "^1.2.30",
+    "@jvs-milkdown/prose": "^1.2.30",
+    "@jvs-milkdown/transformer": "^1.2.30",
+    "@jvs-milkdown/utils": "^1.2.30",
     "@types/lodash-es": "^4.17.12",
     "clsx": "^2.0.0",
     "dompurify": "^3.2.5",

package/src/image-block/view/components/image-viewer.tsx

@@ -222,12 +222,6 @@ export const ImageViewer = defineComponent<MilkdownImageBlockProps>({
     }
 
     // --- Crop box interaction ---
-    const borderStyleOptions = [
-      { label: 'none', value: 'none' },
-      { label: 'solid', value: 'solid' },
-      { label: 'dashed', value: 'dashed' },
-      { label: 'dotted', value: 'dotted' },
-    ]
 
     const onToggleCropPanel = (e: MouseEvent) => {
       e.preventDefault()
@@ -241,11 +235,352 @@ export const ImageViewer = defineComponent<MilkdownImageBlockProps>({
       }
     }
 
-    const onToggleBorderPanel = (e: MouseEvent) => {
+    const onToggleBorder = (e: MouseEvent) => {
       e.preventDefault()
       e.stopPropagation()
       if (readonly.value) return
-      showBorderPanel.value = !showBorderPanel.value
+
+      const isSolid =
+        borderStyle.value === 'solid' && (borderWidth.value ?? 0) === 1
+      if (isSolid) {
+        setAttr('borderStyle', 'none')
+        setAttr('borderWidth', 0)
+      } else {
+        setAttr('borderStyle', 'solid')
+        setAttr('borderWidth', 1)
+        if (!borderColor.value) {
+          setAttr('borderColor', '#000000')
+        }
+      }
+    }
+
+    const openLightbox = (images: string[], startIndex: number) => {
+      let currentIndex = startIndex
+      let scale = 1.0
+      let rotate = 0
+      const doc = wrapperRef.value?.ownerDocument || document
+
+      const overlay = doc.createElement('div')
+      overlay.style.position = 'fixed'
+      overlay.style.inset = '0'
+      overlay.style.backgroundColor = 'rgba(0, 0, 0, 0.5)'
+      overlay.style.zIndex = '99999'
+      overlay.style.display = 'flex'
+      overlay.style.flexDirection = 'column'
+      overlay.style.alignItems = 'center'
+      overlay.style.justifyContent = 'center'
+      overlay.style.userSelect = 'none'
+
+      // Image container
+      const imgContainer = doc.createElement('div')
+      imgContainer.style.position = 'relative'
+      imgContainer.style.display = 'flex'
+      imgContainer.style.alignItems = 'center'
+      imgContainer.style.justifyContent = 'center'
+      imgContainer.style.maxWidth = '90%'
+      imgContainer.style.maxHeight = '80%'
+
+      const img = doc.createElement('img')
+      img.src = images[currentIndex] || ''
+      img.style.maxWidth = '100%'
+      img.style.maxHeight = '100%'
+      img.style.objectFit = 'contain'
+      img.style.borderRadius = '4px'
+      img.style.transition = 'transform 0.2s ease-out, opacity 0.2s ease-out'
+      imgContainer.appendChild(img)
+
+      const applyTransform = () => {
+        img.style.transform = `scale(${scale}) rotate(${rotate}deg)`
+      }
+
+      // Navigation controls
+      const createArrow = (direction: 'left' | 'right') => {
+        const arrow = doc.createElement('div')
+        arrow.style.position = 'absolute'
+        arrow.style.top = '50%'
+        arrow.style.transform = 'translateY(-50%)'
+        arrow.style.width = '48px'
+        arrow.style.height = '48px'
+        arrow.style.borderRadius = '50%'
+        arrow.style.backgroundColor = 'rgba(0, 0, 0, 0.4)'
+        arrow.style.backdropFilter = 'blur(8px)'
+        ;(arrow.style as any).webkitBackdropFilter = 'blur(8px)'
+        arrow.style.color = '#ffffff'
+        arrow.style.display = 'flex'
+        arrow.style.alignItems = 'center'
+        arrow.style.justifyContent = 'center'
+        arrow.style.cursor = 'pointer'
+        arrow.style.transition = 'background-color 0.2s, transform 0.2s'
+        arrow.style.zIndex = '15'
+
+        const chevronSvg =
+          direction === 'left'
+            ? `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"></polyline></svg>`
+            : `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"></polyline></svg>`
+
+        arrow.innerHTML = chevronSvg
+
+        if (direction === 'left') {
+          arrow.style.left = '24px'
+        } else {
+          arrow.style.right = '24px'
+        }
+
+        arrow.addEventListener('mouseenter', () => {
+          arrow.style.backgroundColor = 'rgba(0, 0, 0, 0.6)'
+          arrow.style.transform = 'translateY(-50%) scale(1.05)'
+        })
+        arrow.addEventListener('mouseleave', () => {
+          arrow.style.backgroundColor = 'rgba(0, 0, 0, 0.4)'
+          arrow.style.transform = 'translateY(-50%) scale(1)'
+        })
+        return arrow
+      }
+
+      const leftArrow = createArrow('left')
+      const rightArrow = createArrow('right')
+      overlay.appendChild(leftArrow)
+      overlay.appendChild(rightArrow)
+
+      const updateArrowsVisibility = () => {
+        leftArrow.style.display = currentIndex > 0 ? 'flex' : 'none'
+        rightArrow.style.display =
+          currentIndex < images.length - 1 ? 'flex' : 'none'
+      }
+
+      const showImage = (index: number) => {
+        if (index < 0 || index >= images.length) return
+        currentIndex = index
+        scale = 1.0
+        rotate = 0
+        img.style.transform = `scale(0.95) rotate(0deg)`
+        img.style.opacity = '0.5'
+        setTimeout(() => {
+          img.src = images[currentIndex] || ''
+          img.style.transform = `scale(1) rotate(0deg)`
+          img.style.opacity = '1'
+        }, 150)
+        updateArrowsVisibility()
+        updateIndicator()
+      }
+
+      leftArrow.addEventListener('click', (e) => {
+        e.stopPropagation()
+        showImage(currentIndex - 1)
+      })
+
+      rightArrow.addEventListener('click', (e) => {
+        e.stopPropagation()
+        showImage(currentIndex + 1)
+      })
+
+      // Bottom Container
+      const bottomContainer = doc.createElement('div')
+      bottomContainer.style.position = 'absolute'
+      bottomContainer.style.bottom = '24px'
+      bottomContainer.style.left = '50%'
+      bottomContainer.style.transform = 'translateX(-50%)'
+      bottomContainer.style.display = 'flex'
+      bottomContainer.style.flexDirection = 'column'
+      bottomContainer.style.alignItems = 'center'
+      bottomContainer.style.gap = '12px'
+      bottomContainer.style.zIndex = '15'
+
+      // Image Indicator
+      const indicator = doc.createElement('div')
+      indicator.style.color = '#ffffff'
+      indicator.style.fontSize = '14px'
+      indicator.style.fontFamily = 'system-ui, sans-serif'
+      indicator.style.fontWeight = '500'
+
+      const updateIndicator = () => {
+        indicator.textContent = `${currentIndex + 1} / ${images.length}`
+      }
+      updateIndicator()
+      updateArrowsVisibility()
+
+      // Pill Toolbar Container
+      const pillToolbar = doc.createElement('div')
+      pillToolbar.style.display = 'flex'
+      pillToolbar.style.alignItems = 'center'
+      pillToolbar.style.gap = '8px'
+      pillToolbar.style.padding = '6px 12px'
+      pillToolbar.style.backgroundColor = 'rgba(0, 0, 0, 0.6)'
+      pillToolbar.style.backdropFilter = 'blur(12px)'
+      ;(pillToolbar.style as any).webkitBackdropFilter = 'blur(12px)'
+      pillToolbar.style.borderRadius = '24px'
+      pillToolbar.style.border = '1px solid rgba(255, 255, 255, 0.1)'
+      pillToolbar.style.boxShadow = '0 8px 32px rgba(0, 0, 0, 0.3)'
+
+      const createPillButton = (
+        svgContent: string,
+        btnTitle: string,
+        onClickHandler: () => void
+      ) => {
+        const btn = doc.createElement('div')
+        btn.style.width = '32px'
+        btn.style.height = '32px'
+        btn.style.borderRadius = '50%'
+        btn.style.display = 'flex'
+        btn.style.alignItems = 'center'
+        btn.style.justifyContent = 'center'
+        btn.style.cursor = 'pointer'
+        btn.style.color = '#ffffff'
+        btn.style.transition = 'background-color 0.2s, transform 0.1s'
+        btn.title = btnTitle
+        btn.innerHTML = svgContent
+
+        btn.addEventListener('mouseenter', () => {
+          btn.style.backgroundColor = 'rgba(255, 255, 255, 0.15)'
+        })
+        btn.addEventListener('mouseleave', () => {
+          btn.style.backgroundColor = 'transparent'
+        })
+        btn.addEventListener('click', (e) => {
+          e.stopPropagation()
+          onClickHandler()
+        })
+        return btn
+      }
+
+      // Pill Buttons
+      const zoomOutSvg = `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line><line x1="8" y1="11" x2="14" y2="11"></line></svg>`
+      const zoomInSvg = `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line><line x1="11" y1="8" x2="11" y2="14"></line><line x1="8" y1="11" x2="14" y2="11"></line></svg>`
+      const resetSvg = `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7"></path></svg>`
+      const rotateLeftSvg = `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"></path><polyline points="3 3 3 8 8 8"></polyline></svg>`
+      const rotateRightSvg = `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"></path><polyline points="21 3 21 8 16 8"></polyline></svg>`
+
+      const btnZoomOut = createPillButton(zoomOutSvg, '缩小', () => {
+        scale = Math.max(0.2, Number((scale - 0.2).toFixed(2)))
+        applyTransform()
+      })
+      const btnZoomIn = createPillButton(zoomInSvg, '放大', () => {
+        scale = Math.min(5.0, Number((scale + 0.2).toFixed(2)))
+        applyTransform()
+      })
+      const btnReset = createPillButton(resetSvg, '还原', () => {
+        scale = 1.0
+        rotate = 0
+        applyTransform()
+      })
+      const btnRotateLeft = createPillButton(rotateLeftSvg, '向左旋转', () => {
+        rotate -= 90
+        applyTransform()
+      })
+      const btnRotateRight = createPillButton(
+        rotateRightSvg,
+        '向右旋转',
+        () => {
+          rotate += 90
+          applyTransform()
+        }
+      )
+
+      pillToolbar.appendChild(btnZoomOut)
+      pillToolbar.appendChild(btnZoomIn)
+      pillToolbar.appendChild(btnReset)
+      pillToolbar.appendChild(btnRotateLeft)
+      pillToolbar.appendChild(btnRotateRight)
+
+      bottomContainer.appendChild(indicator)
+      bottomContainer.appendChild(pillToolbar)
+
+      // Close button
+      const closeBtn = doc.createElement('div')
+      closeBtn.style.position = 'absolute'
+      closeBtn.style.top = '24px'
+      closeBtn.style.right = '24px'
+      closeBtn.style.width = '40px'
+      closeBtn.style.height = '40px'
+      closeBtn.style.borderRadius = '50%'
+      closeBtn.style.color = '#ffffff'
+      closeBtn.style.display = 'flex'
+      closeBtn.style.alignItems = 'center'
+      closeBtn.style.justifyContent = 'center'
+      closeBtn.style.cursor = 'pointer'
+      closeBtn.style.fontSize = '28px'
+      closeBtn.style.transition = 'background-color 0.2s'
+      closeBtn.style.zIndex = '15'
+      closeBtn.innerHTML = '&times;'
+      closeBtn.addEventListener('mouseenter', () => {
+        closeBtn.style.backgroundColor = 'rgba(255, 255, 255, 0.1)'
+      })
+      closeBtn.addEventListener('mouseleave', () => {
+        closeBtn.style.backgroundColor = 'transparent'
+      })
+
+      const closeLightbox = () => {
+        doc.removeEventListener('keydown', handleKeyDown)
+        overlay.style.opacity = '0'
+        overlay.style.transition = 'opacity 0.2s ease-out'
+        setTimeout(() => {
+          overlay.remove()
+        }, 200)
+      }
+
+      closeBtn.addEventListener('click', (e) => {
+        e.stopPropagation()
+        closeLightbox()
+      })
+
+      overlay.addEventListener('click', () => {
+        closeLightbox()
+      })
+
+      const handleKeyDown = (e: KeyboardEvent) => {
+        if (e.key === 'Escape') {
+          closeLightbox()
+        } else if (e.key === 'ArrowLeft' && currentIndex > 0) {
+          showImage(currentIndex - 1)
+        } else if (e.key === 'ArrowRight' && currentIndex < images.length - 1) {
+          showImage(currentIndex + 1)
+        }
+      }
+
+      doc.addEventListener('keydown', handleKeyDown)
+
+      overlay.appendChild(closeBtn)
+      overlay.appendChild(imgContainer)
+      overlay.appendChild(bottomContainer)
+
+      overlay.style.opacity = '0'
+      overlay.style.transition = 'opacity 0.2s ease-out'
+      doc.body.appendChild(overlay)
+      requestAnimationFrame(() => {
+        overlay.style.opacity = '1'
+      })
+    }
+
+    const onImageDoubleClick = (e: MouseEvent) => {
+      e.preventDefault()
+      e.stopPropagation()
+
+      const currentImg = imageRef.value
+      const currentSrc = currentImg ? currentImg.src : src.value
+
+      const rootNode =
+        (wrapperRef.value?.getRootNode() as Document | ShadowRoot | null) ||
+        document
+      const allImageElements = rootNode.querySelectorAll('img')
+      const images: string[] = []
+      allImageElements.forEach((img: any) => {
+        // Exclude cover images and header decorations
+        if (
+          img.closest('.milkdown-document-cover, .milkdown-document-header')
+        ) {
+          return
+        }
+        if (img.src && !images.includes(img.src)) {
+          images.push(img.src)
+        }
+      })
+
+      if (images.length === 0 && currentSrc) {
+        images.push(currentSrc)
+      }
+
+      const startIndex = currentSrc ? images.indexOf(currentSrc) : 0
+      openLightbox(images, startIndex >= 0 ? startIndex : 0)
     }
 
     const closePanels = () => {
@@ -525,106 +860,13 @@ export const ImageViewer = defineComponent<MilkdownImageBlockProps>({
               ) : null}
               {config.borderIcon ? (
                 <div
-                  class="image-toolbar-item"
+                  class={`image-toolbar-item ${borderStyle.value === 'solid' && (borderWidth.value ?? 0) >= 1 ? 'active' : ''}`}
                   title="边框"
-                  onClick={onToggleBorderPanel}
+                  onClick={onToggleBorder}
                 >
                   <Icon icon={config.borderIcon} />
                 </div>
               ) : null}
-
-              {showBorderPanel.value ? (
-                <div
-                  class="setting-panel border-panel"
-                  draggable="true"
-                  onClick={(e) => e.stopPropagation()}
-                  onMousedown={(e) => e.stopPropagation()}
-                  onPointerdown={(e) => e.stopPropagation()}
-                  onDragstart={(e) => {
-                    e.preventDefault()
-                    e.stopPropagation()
-                  }}
-                >
-                  <div class="setting-panel-title">{'边框设置'}</div>
-                  <div class="setting-row">
-                    <span class="setting-label">{'样式'}</span>
-                    <div class="border-style-options">
-                      {borderStyleOptions.map((opt) => (
-                        <div
-                          class={`border-style-option ${currentBorderStyle === opt.value ? 'active' : ''}`}
-                          onClick={(e: MouseEvent) => {
-                            e.stopPropagation()
-                            setAttr('borderStyle', opt.value)
-                          }}
-                        >
-                          {opt.label === 'none'
-                            ? '无'
-                            : opt.label === 'solid'
-                              ? '实线'
-                              : opt.label === 'dashed'
-                                ? '虚线'
-                                : '点线'}
-                        </div>
-                      ))}
-                    </div>
-                  </div>
-                  {currentBorderStyle !== 'none' ? (
-                    <div class="setting-row">
-                      <span class="setting-label">{'宽度'}</span>
-                      <input
-                        draggable="true"
-                        type="range"
-                        min="1"
-                        max="10"
-                        value={currentBorderWidth}
-                        onInput={(e: Event) => {
-                          const target = e.target as HTMLInputElement
-                          localBorderWidth.value = Number(target.value)
-                        }}
-                        onChange={(e: Event) => {
-                          const target = e.target as HTMLInputElement
-                          setAttr('borderWidth', Number(target.value))
-                          localBorderWidth.value = null
-                        }}
-                        onClick={(e: MouseEvent) => e.stopPropagation()}
-                        onMousedown={(e: MouseEvent) => e.stopPropagation()}
-                        onPointerdown={(e: PointerEvent) => e.stopPropagation()}
-                        onDragstart={(e: DragEvent) => {
-                          e.preventDefault()
-                          e.stopPropagation()
-                        }}
-                      />
-                      <span class="setting-value">{currentBorderWidth}px</span>
-                    </div>
-                  ) : null}
-                  {currentBorderStyle !== 'none' ? (
-                    <div class="setting-row">
-                      <span class="setting-label">{'颜色'}</span>
-                      <input
-                        draggable="true"
-                        type="color"
-                        value={currentBorderColor}
-                        onInput={(e: Event) => {
-                          const target = e.target as HTMLInputElement
-                          localBorderColor.value = target.value
-                        }}
-                        onChange={(e: Event) => {
-                          const target = e.target as HTMLInputElement
-                          setAttr('borderColor', target.value)
-                          localBorderColor.value = null
-                        }}
-                        onClick={(e: MouseEvent) => e.stopPropagation()}
-                        onMousedown={(e: MouseEvent) => e.stopPropagation()}
-                        onPointerdown={(e: PointerEvent) => e.stopPropagation()}
-                        onDragstart={(e: DragEvent) => {
-                          e.preventDefault()
-                          e.stopPropagation()
-                        }}
-                      />
-                    </div>
-                  ) : null}
-                </div>
-              ) : null}
             </div>
           ) : null}
 
@@ -633,6 +875,7 @@ export const ImageViewer = defineComponent<MilkdownImageBlockProps>({
             ref={wrapperRef}
             style={wrapperStyle}
             onClick={closePanels}
+            onDblclick={onImageDoubleClick}
           >
             {cropClipStyle ? (
               <div class="crop-clip" style={cropClipStyle}>