@jvs-milkdown/components 1.2.1 → 1.2.3

package/package.json

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

package/src/image-block/convert-plugin.ts

@@ -30,7 +30,7 @@ export const imageBlockConvertPlugin = $prose((ctx) => {
 
       // Debug: log all paragraphs with their children
       let foundImages = 0
-      newState.doc.descendants((node, pos) => {
+      newState.doc.descendants((node) => {
         if (node.type === imageType) foundImages++
       })
       if (foundImages > 0) {

package/src/image-block/paste-rule.ts

@@ -21,27 +21,7 @@ function toImageBlock(
   })
 }
 
-/// Check if a paragraph contains only images (and trailing hard_breaks / empty text).
-/// Returns the list of image nodes found, or null if there's other content.
-function extractParagraphImages(
-  node: ProsemirrorNode,
-  imageType: ProsemirrorNode['type']
-): ProsemirrorNode[] | null {
-  const images: ProsemirrorNode[] = []
-  for (let i = 0; i < node.childCount; i++) {
-    const child = node.child(i)
-    if (child.type === imageType) {
-      images.push(child)
-    } else if (child.type.name === 'hardbreak') {
-      continue
-    } else if (child.isText && child.text?.trim() === '') {
-      continue
-    } else {
-      return null
-    }
-  }
-  return images.length > 0 ? images : null
-}
+
 
 /// A paste rule that converts standalone inline images to image-block nodes.
 /// Handles the slice structures produced when pasting HTML from external pages

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

@@ -57,9 +57,11 @@ export const ImageViewer = defineComponent<MilkdownImageBlockProps>({
     const showBorderPanel = ref(false)
     const isCropping = ref(false)
 
-    // Display dimensions (set in onImageLoad)
-    const displayW = ref(0)
-    const displayH = ref(0)
+    const baseDisplayW = ref(0)
+    const baseDisplayH = ref(0)
+    const liveRatio = ref<number | null>(null)
+    const localBorderWidth = ref<number | null>(null)
+    const localBorderColor = ref<string | null>(null)
 
     // Local crop state for interactive editing
     const localCrop = ref({ top: 0, left: 0, width: 1, height: 1 })
@@ -92,22 +94,20 @@ export const ImageViewer = defineComponent<MilkdownImageBlockProps>({
 
       const height = image.naturalHeight
       const width = image.naturalWidth
-      let transformedHeight =
-        width < maxWidth ? height : maxWidth * (height / width)
+      if (!height || !width) return
 
-      if (config.maxHeight && transformedHeight > config.maxHeight)
-        transformedHeight = config.maxHeight
+      const aspect = width / height
 
-      const h = (transformedHeight * (ratio.value ?? 1)).toFixed(2)
-      image.dataset.origin = transformedHeight.toFixed(2)
-      image.dataset.height = h
-      image.style.height = `${h}px`
+      let transformedWidth = width < maxWidth ? width : maxWidth
+      let transformedHeight = transformedWidth / aspect
 
-      if (config.maxWidth) image.style.maxWidth = `${config.maxWidth}px`
+      if (config.maxHeight && transformedHeight > config.maxHeight) {
+        transformedHeight = config.maxHeight
+        transformedWidth = transformedHeight * aspect
+      }
 
-      const dw = width < maxWidth ? width : maxWidth
-      displayW.value = dw
-      displayH.value = parseFloat(h)
+      baseDisplayH.value = transformedHeight
+      baseDisplayW.value = transformedWidth
     }
 
     const onToggleCaption = (e: MouseEvent) => {
@@ -140,8 +140,6 @@ export const ImageViewer = defineComponent<MilkdownImageBlockProps>({
 
     const onResizeHandlePointerMove = (e: PointerEvent) => {
       e.preventDefault()
-      const image = imageRef.value
-      if (!image) return
 
       const deltaY = e.clientY - startY
       const deltaX = e.clientX - startX
@@ -149,6 +147,7 @@ export const ImageViewer = defineComponent<MilkdownImageBlockProps>({
       const aspect = startHeight / (startWidth || 1)
       let dhY = resizeDir.includes('bottom') ? deltaY : -deltaY
       let dhX = 0
+
       if (resizeDir.includes('right')) {
         dhX = deltaX * aspect
       } else if (resizeDir.includes('left')) {
@@ -156,32 +155,53 @@ export const ImageViewer = defineComponent<MilkdownImageBlockProps>({
       }
 
       const dh = Math.abs(dhX) > Math.abs(dhY) ? dhX : dhY
-      let height = startHeight + dh
+      let newWrapperHeight = startHeight + dh
+
+      let newWrapperWidth = newWrapperHeight * (startWidth / (startHeight || 1))
+
+      if (newWrapperHeight < 20) {
+        newWrapperHeight = 20
+        newWrapperWidth = newWrapperHeight * (startWidth / (startHeight || 1))
+      }
+
+      if (newWrapperWidth < 20) {
+        newWrapperWidth = 20
+        newWrapperHeight = newWrapperWidth / (startWidth / (startHeight || 1))
+      }
+
+      const image = imageRef.value
+      const host = image?.closest('.milkdown-image-block')
+      const hostWidth = host?.getBoundingClientRect().width
+      const maxW =
+        config.maxWidth && hostWidth
+          ? Math.min(config.maxWidth, hostWidth)
+          : hostWidth || Infinity
+
+      if (newWrapperWidth > maxW) {
+        newWrapperWidth = maxW
+        newWrapperHeight = newWrapperWidth / (startWidth / (startHeight || 1))
+      }
+
+      if (config.maxHeight && newWrapperHeight > config.maxHeight) {
+        newWrapperHeight = config.maxHeight
+      }
 
-      if (height < 20) height = 20
-      if (config.maxHeight && height > config.maxHeight)
-        height = config.maxHeight
+      const cHeight =
+        isCropped() && !isCropping.value ? (cropHeight.value ?? 1) : 1
+      const newBaseHeight = newWrapperHeight / cHeight
 
-      const h = Number(height).toFixed(2)
-      image.dataset.height = h
-      image.style.height = `${h}px`
+      const newRatio = newBaseHeight / (baseDisplayH.value || 1)
+      liveRatio.value = Number(newRatio.toFixed(2))
     }
 
     const onResizeHandlePointerUp = () => {
       window.removeEventListener('pointermove', onResizeHandlePointerMove)
       window.removeEventListener('pointerup', onResizeHandlePointerUp)
 
-      const image = imageRef.value
-      if (!image) return
-
-      const originHeight = Number(image.dataset.origin)
-      const currentHeight = Number(image.dataset.height)
-      const ratio = Number.parseFloat(
-        Number(currentHeight / originHeight).toFixed(2)
-      )
-      if (Number.isNaN(ratio)) return
-
-      setAttr('ratio', ratio)
+      if (liveRatio.value !== null) {
+        setAttr('ratio', liveRatio.value)
+        liveRatio.value = null
+      }
     }
 
     const onResizeHandlePointerDown = (e: PointerEvent, dir: string) => {
@@ -191,11 +211,12 @@ export const ImageViewer = defineComponent<MilkdownImageBlockProps>({
       resizeDir = dir
       startY = e.clientY
       startX = e.clientX
-      const image = imageRef.value
-      if (image) {
-        startHeight = image.getBoundingClientRect().height
-        startWidth = image.getBoundingClientRect().width
+      const wrapper = wrapperRef.value
+      if (wrapper) {
+        startHeight = wrapper.getBoundingClientRect().height
+        startWidth = wrapper.getBoundingClientRect().width
       }
+      liveRatio.value = ratio.value ?? 1
       window.addEventListener('pointermove', onResizeHandlePointerMove)
       window.addEventListener('pointerup', onResizeHandlePointerUp)
     }
@@ -362,8 +383,14 @@ export const ImageViewer = defineComponent<MilkdownImageBlockProps>({
 
     return () => {
       const currentBorderStyle = borderStyle.value ?? 'none'
-      const currentBorderWidth = borderWidth.value ?? 0
-      const currentBorderColor = borderColor.value ?? '#000000'
+      const currentBorderWidth =
+        localBorderWidth.value !== null
+          ? localBorderWidth.value
+          : (borderWidth.value ?? 0)
+      const currentBorderColor =
+        localBorderColor.value !== null
+          ? localBorderColor.value
+          : (borderColor.value ?? '#000000')
       const cTop = cropTop.value ?? 0
       const cLeft = cropLeft.value ?? 0
       const cWidth = cropWidth.value ?? 1
@@ -376,22 +403,46 @@ export const ImageViewer = defineComponent<MilkdownImageBlockProps>({
           ? `${currentBorderWidth}px ${currentBorderStyle} ${currentBorderColor}`
           : undefined
 
-      const dw = displayW.value
-      const dh = displayH.value
+      const currentRatio =
+        liveRatio.value !== null ? liveRatio.value : (ratio.value ?? 1)
+
+      let baseW = baseDisplayW.value * currentRatio
+      let baseH = baseDisplayH.value * currentRatio
 
-      // Use actual rendered dimensions when available for accurate crop margins
-      const imgEl = imageRef.value
-      const actualW = imgEl ? imgEl.getBoundingClientRect().width : dw
-      const actualH = imgEl ? imgEl.getBoundingClientRect().height : dh
-      const baseW = cropped && !isCropping.value && imgEl ? actualW : dw
-      const baseH = cropped && !isCropping.value && imgEl ? actualH : dh
+      const image = imageRef.value
+      const host = image?.closest('.milkdown-image-block')
+      const hostWidth = host?.getBoundingClientRect().width
+      const maxW =
+        config.maxWidth && hostWidth
+          ? Math.min(config.maxWidth, hostWidth)
+          : hostWidth || Infinity
+
+      const visibleW = isCropping.value
+        ? baseW
+        : cropped
+          ? baseW * cWidth
+          : baseW
+
+      if (visibleW > maxW && maxW > 0) {
+        const scale = maxW / visibleW
+        baseW = baseW * scale
+        baseH = baseH * scale
+      }
 
       const cropPxW = baseW * cWidth
       const cropPxH = baseH * cHeight
       const cropPxL = baseW * cLeft
       const cropPxT = baseH * cTop
 
-      const wrapperStyle: Record<string, string> = {}
+      const wrapperStyle: Record<string, string> = {
+        minWidth: '20px',
+        minHeight: '20px',
+        border: !isCropping.value ? (borderStyleStr ?? '') : '',
+      }
+      if (cropped && !isCropping.value && cropPxW > 0 && cropPxH > 0) {
+        wrapperStyle.width = `${cropPxW}px`
+        wrapperStyle.height = `${cropPxH}px`
+      }
       const cropClipStyle: Record<string, string> | null =
         cropped && !isCropping.value && baseW > 0 && baseH > 0
           ? {
@@ -401,16 +452,22 @@ export const ImageViewer = defineComponent<MilkdownImageBlockProps>({
             }
           : null
 
-      const imgStyle: Record<string, string> = {}
+      const imgStyle: Record<string, string> = {
+        minWidth: '0px',
+        minHeight: '0px',
+      }
       if (cropped && !isCropping.value && baseW > 0 && baseH > 0) {
         imgStyle.width = `${baseW}px`
         imgStyle.height = `${baseH}px`
         imgStyle.maxWidth = 'none'
         imgStyle.marginLeft = `${-cropPxL}px`
         imgStyle.marginTop = `${-cropPxT}px`
-        imgStyle.border = borderStyleStr ?? ''
       } else {
-        imgStyle.border = borderStyleStr ?? ''
+        if (baseH > 0 && baseW > 0) {
+          imgStyle.width = `${baseW}px`
+          imgStyle.height = `${baseH}px`
+          if (config.maxWidth) imgStyle.maxWidth = `${config.maxWidth}px`
+        }
       }
 
       return (
@@ -466,7 +523,14 @@ export const ImageViewer = defineComponent<MilkdownImageBlockProps>({
               {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">
@@ -495,16 +559,27 @@ export const ImageViewer = defineComponent<MilkdownImageBlockProps>({
                     <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>
@@ -513,14 +588,25 @@ export const ImageViewer = defineComponent<MilkdownImageBlockProps>({
                     <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}

package/src/link-tooltip/edit/component.tsx

@@ -87,7 +87,6 @@ export const EditLink = defineComponent<EditLinkProps>({
               class={clsx('button confirm', !isValidUrl(link.value) && 'disabled')}
               icon={config.value.confirmButton}
               onClick={onConfirmEdit}
-              style={!isValidUrl(link.value) ? { opacity: 0.5, cursor: 'not-allowed' } : undefined}
             />
           ) : null}
         </div>

package/src/table-block/view/utils.ts

@@ -3,7 +3,8 @@ import type { EditorView } from '@jvs-milkdown/prose/view'
 import type { Ref } from 'vue'
 
 import { findParent } from '@jvs-milkdown/prose'
-import { CellSelection, findTable } from '@jvs-milkdown/prose/tables'
+import { findTable } from '@jvs-milkdown/prose/tables'
+import type { CellSelection } from '@jvs-milkdown/prose/tables'
 
 import type { CellIndex, Refs } from './types'
 
@@ -99,13 +100,13 @@ export function recoveryStateBetweenUpdate(
   const table = findTable($from)
   if (!table || table.node !== node) return
 
-  if (selection.isColSelection()) {
+  if ((selection as any as CellSelection).isColSelection()) {
     const { $head } = selection
     const colIndex = $head.index($head.depth - 1)
     refs.hoverIndex.value = [0, colIndex]
     return
   }
-  if (selection.isRowSelection()) {
+  if ((selection as any as CellSelection).isRowSelection()) {
     const { $head } = selection
     const rowNode = findParent(
       (node) =>