@jvs-milkdown/components 1.0.0 → 1.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jvs-milkdown/components",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "keywords": [
     "milkdown",
     "milkdown plugin"
@@ -17,55 +17,108 @@
   ],
   "type": "module",
   "sideEffects": false,
-  "main": "./lib/index.js",
+  "main": "./src/index.ts",
   "exports": {
     ".": {
-      "types": "./lib/index.d.ts",
-      "import": "./lib/index.js"
+      "import": "./src/index.ts"
     },
     "./image-block": {
-      "types": "./lib/image-block/index.d.ts",
-      "import": "./lib/image-block/index.js"
+      "import": "./src/image-block/index.ts"
     },
     "./code-block": {
-      "types": "./lib/code-block/index.d.ts",
-      "import": "./lib/code-block/index.js"
+      "import": "./src/code-block/index.ts"
     },
     "./list-item-block": {
-      "types": "./lib/list-item-block/index.d.ts",
-      "import": "./lib/list-item-block/index.js"
+      "import": "./src/list-item-block/index.ts"
     },
     "./link-tooltip": {
-      "types": "./lib/link-tooltip/index.d.ts",
-      "import": "./lib/link-tooltip/index.js"
+      "import": "./src/link-tooltip/index.ts"
     },
     "./image-inline": {
-      "types": "./lib/image-inline/index.d.ts",
-      "import": "./lib/image-inline/index.js"
+      "import": "./src/image-inline/index.ts"
     },
     "./table-block": {
-      "types": "./lib/table-block/index.d.ts",
-      "import": "./lib/table-block/index.js"
+      "import": "./src/table-block/index.ts"
     }
   },
+  "publishConfig": {
+    "exports": {
+      ".": {
+        "types": "./lib/index.d.ts",
+        "import": "./lib/index.js"
+      },
+      "./image-block": {
+        "types": "./lib/image-block/index.d.ts",
+        "import": "./lib/image-block/index.js"
+      },
+      "./code-block": {
+        "types": "./lib/code-block/index.d.ts",
+        "import": "./lib/code-block/index.js"
+      },
+      "./list-item-block": {
+        "types": "./lib/list-item-block/index.d.ts",
+        "import": "./lib/list-item-block/index.js"
+      },
+      "./link-tooltip": {
+        "types": "./lib/link-tooltip/index.d.ts",
+        "import": "./lib/link-tooltip/index.js"
+      },
+      "./image-inline": {
+        "types": "./lib/image-inline/index.d.ts",
+        "import": "./lib/image-inline/index.js"
+      },
+      "./table-block": {
+        "types": "./lib/table-block/index.d.ts",
+        "import": "./lib/table-block/index.js"
+      }
+    },
+    "main": "./lib/index.js",
+    "types": "./lib/index.d.ts",
+    "typesVersions": {
+      "*": {
+        "image-block": [
+          "./lib/image-block/index.d.ts"
+        ],
+        "code-block": [
+          "./lib/code-block/index.d.ts"
+        ],
+        "list-item-block": [
+          "./lib/list-item-block/index.d.ts"
+        ],
+        "link-tooltip": [
+          "./lib/link-tooltip/index.d.ts"
+        ],
+        "image-inline": [
+          "./lib/image-inline/index.d.ts"
+        ],
+        "table-block": [
+          "./lib/table-block/index.d.ts"
+        ]
+      }
+    }
+  },
+  "scripts": {
+    "build": "rollup -c",
+    "test": "vitest run"
+  },
   "dependencies": {
     "@floating-ui/dom": "^1.5.1",
+    "@jvs-milkdown/core": "workspace:*",
+    "@jvs-milkdown/ctx": "workspace:*",
+    "@jvs-milkdown/exception": "workspace:*",
+    "@jvs-milkdown/plugin-tooltip": "workspace:*",
+    "@jvs-milkdown/preset-commonmark": "workspace:*",
+    "@jvs-milkdown/preset-gfm": "workspace:*",
+    "@jvs-milkdown/prose": "workspace:*",
+    "@jvs-milkdown/transformer": "workspace:*",
+    "@jvs-milkdown/utils": "workspace:*",
     "@types/lodash-es": "^4.17.12",
     "clsx": "^2.0.0",
     "dompurify": "^3.2.5",
     "lodash-es": "^4.17.21",
     "nanoid": "^5.0.9",
     "unist-util-visit": "^5.0.0",
-    "vue": "^3.5.20",
-    "@jvs-milkdown/core": "1.0.0",
-    "@jvs-milkdown/exception": "1.0.0",
-    "@jvs-milkdown/ctx": "1.0.0",
-    "@jvs-milkdown/preset-commonmark": "1.0.0",
-    "@jvs-milkdown/preset-gfm": "1.0.0",
-    "@jvs-milkdown/transformer": "1.0.0",
-    "@jvs-milkdown/plugin-tooltip": "1.0.0",
-    "@jvs-milkdown/utils": "1.0.0",
-    "@jvs-milkdown/prose": "1.0.0"
+    "vue": "^3.5.20"
   },
   "devDependencies": {
     "@codemirror/language": "^6.10.1",
@@ -79,32 +132,5 @@
     "@codemirror/language": "^6",
     "@codemirror/state": "^6",
     "@codemirror/view": "^6"
-  },
-  "scripts": {
-    "build": "rollup -c",
-    "test": "vitest run"
-  },
-  "types": "./lib/index.d.ts",
-  "typesVersions": {
-    "*": {
-      "image-block": [
-        "./lib/image-block/index.d.ts"
-      ],
-      "code-block": [
-        "./lib/code-block/index.d.ts"
-      ],
-      "list-item-block": [
-        "./lib/list-item-block/index.d.ts"
-      ],
-      "link-tooltip": [
-        "./lib/link-tooltip/index.d.ts"
-      ],
-      "image-inline": [
-        "./lib/image-inline/index.d.ts"
-      ],
-      "table-block": [
-        "./lib/table-block/index.d.ts"
-      ]
-    }
   }
-}
+}

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

@@ -41,10 +41,15 @@ export const ImageViewer = defineComponent<MilkdownImageBlockProps>({
   },
   setup({ src, caption, ratio, readonly, setAttr, config }) {
     const imageRef = ref<HTMLImageElement>()
-    const resizeHandle = ref<HTMLDivElement>()
     const showCaption = ref(Boolean(caption.value?.length))
     const timer = ref(0)
 
+    let resizeDir = ''
+    let startY = 0
+    let startX = 0
+    let startHeight = 0
+    let startWidth = 0
+
     const onImageLoad = () => {
       const image = imageRef.value
       if (!image) return
@@ -105,11 +110,26 @@ export const ImageViewer = defineComponent<MilkdownImageBlockProps>({
       e.preventDefault()
       const image = imageRef.value
       if (!image) return
-      const top = image.getBoundingClientRect().top
-      let height = e.clientY - top
-      if (height < 100) height = 100
+
+      const deltaY = e.clientY - startY
+      const deltaX = e.clientX - startX
+
+      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')) {
+        dhX = -deltaX * aspect
+      }
+
+      const dh = Math.abs(dhX) > Math.abs(dhY) ? dhX : dhY
+      let height = startHeight + dh
+
+      if (height < 20) height = 20
       if (config.maxHeight && height > config.maxHeight)
         height = config.maxHeight
+
       const h = Number(height).toFixed(2)
       image.dataset.height = h
       image.style.height = `${h}px`
@@ -132,10 +152,18 @@ export const ImageViewer = defineComponent<MilkdownImageBlockProps>({
       setAttr('ratio', ratio)
     }
 
-    const onResizeHandlePointerDown = (e: PointerEvent) => {
+    const onResizeHandlePointerDown = (e: PointerEvent, dir: string) => {
       if (readonly.value) return
       e.preventDefault()
       e.stopPropagation()
+      resizeDir = dir
+      startY = e.clientY
+      startX = e.clientX
+      const image = imageRef.value
+      if (image) {
+        startHeight = image.getBoundingClientRect().height
+        startWidth = image.getBoundingClientRect().width
+      }
       window.addEventListener('pointermove', onResizeHandlePointerMove)
       window.addEventListener('pointerup', onResizeHandlePointerUp)
     }
@@ -160,9 +188,22 @@ export const ImageViewer = defineComponent<MilkdownImageBlockProps>({
               }
             />
             <div
-              ref={resizeHandle}
-              class="image-resize-handle"
-              onPointerdown={onResizeHandlePointerDown}
+              class="image-resize-handle top-left"
+              onPointerdown={(e) => onResizeHandlePointerDown(e, 'top-left')}
+            />
+            <div
+              class="image-resize-handle top-right"
+              onPointerdown={(e) => onResizeHandlePointerDown(e, 'top-right')}
+            />
+            <div
+              class="image-resize-handle bottom-left"
+              onPointerdown={(e) => onResizeHandlePointerDown(e, 'bottom-left')}
+            />
+            <div
+              class="image-resize-handle bottom-right"
+              onPointerdown={(e) =>
+                onResizeHandlePointerDown(e, 'bottom-right')
+              }
             />
           </div>
           {showCaption.value && (

package/src/table-block/config.ts

@@ -12,6 +12,8 @@ export type RenderType =
   | 'align_col_right'
   | 'col_drag_handle'
   | 'row_drag_handle'
+  | 'merge_cells'
+  | 'split_cell'
 
 export interface TableBlockConfig {
   renderButton: (renderType: RenderType) => string
@@ -38,6 +40,10 @@ const defaultTableBlockConfig: TableBlockConfig = {
         return '='
       case 'row_drag_handle':
         return '='
+      case 'merge_cells':
+        return '⊞'
+      case 'split_cell':
+        return '⊟'
     }
   },
 }

package/src/table-block/dnd/create-drag-handler.ts

@@ -46,18 +46,10 @@ function updateDragInfo(
   context: DragContext,
   refs: Refs
 ) {
-  const { xHandle, yHandle, colHandle, rowHandle, preview } = context
+  const { xHandle, yHandle, preview } = context
   xHandle.dataset.displayType = axis === 'y' ? 'indicator' : 'none'
   yHandle.dataset.displayType = axis === 'x' ? 'indicator' : 'none'
 
-  if (axis === 'y') {
-    colHandle.dataset.show = 'false'
-    hideButtonGroup(rowHandle)
-  } else {
-    rowHandle.dataset.show = 'false'
-    hideButtonGroup(colHandle)
-  }
-
   const { hoverIndex, dragInfo } = refs
   const [rowIndex, colIndex] = hoverIndex.value
 
@@ -93,7 +85,3 @@ function handleDrag(
     fn(context)
   })
 }
-
-function hideButtonGroup(handle: HTMLElement) {
-  handle.querySelector('.button-group')?.setAttribute('data-show', 'false')
-}

package/src/table-block/dnd/prepare-dnd-context.ts

@@ -7,8 +7,6 @@ export function prepareDndContext(refs: Refs): DragContext | undefined {
     contentWrapperRef,
     yLineHandleRef,
     xLineHandleRef,
-    colHandleRef,
-    rowHandleRef,
   } = refs
 
   const preview = dragPreviewRef.value
@@ -25,10 +23,6 @@ export function prepareDndContext(refs: Refs): DragContext | undefined {
   if (!yHandle) return
   const xHandle = xLineHandleRef.value
   if (!xHandle) return
-  const colHandle = colHandleRef.value
-  if (!colHandle) return
-  const rowHandle = rowHandleRef.value
-  if (!rowHandle) return
 
   const context = {
     preview,
@@ -38,8 +32,6 @@ export function prepareDndContext(refs: Refs): DragContext | undefined {
     previewRoot,
     yHandle,
     xHandle,
-    colHandle,
-    rowHandle,
   }
 
   return context