@jvs-milkdown/components 1.2.4 → 1.2.7

package/package.json

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

package/src/__internal__/components/image-input.tsx

@@ -96,14 +96,16 @@ export const ImageInput = defineComponent<ImageInputProps>({
     const isValidUrl = (url: string) => {
       if (!url) return false
       const trimmedUrl = url.trim()
-      return /^(https?:\/\/|\/|\.\.?\/|data:image\/|blob:|[a-zA-Z0-9-]+\.[a-zA-Z]+)/i.test(trimmedUrl)
+      return /^(https?:\/\/|\/|\.\.?\/|data:image\/|blob:|[a-zA-Z0-9-]+\.[a-zA-Z]+)/i.test(
+        trimmedUrl
+      )
     }
 
     const onKeydown = (e: KeyboardEvent) => {
       if (e.key === 'Enter') {
         const val = linkInputRef.value?.value?.trim() ?? ''
 
-        // Stop bubbling so ProseMirror doesn't handle the Enter key 
+        // Stop bubbling so ProseMirror doesn't handle the Enter key
         // regardless of whether the URL is valid or not.
         e.preventDefault()
         e.stopPropagation()
@@ -185,15 +187,22 @@ export const ImageInput = defineComponent<ImageInputProps>({
                     src={currentLink.value}
                     alt=""
                     onError={(e) =>
-                      Promise.resolve(onImageLoadError?.(e)).catch(() => { })
+                      Promise.resolve(onImageLoadError?.(e)).catch(() => {})
                     }
                   />
                 </div>
               )}
               <div
-                class={clsx('confirm', !isValidUrl(currentLink.value) && 'disabled')}
+                class={clsx(
+                  'confirm',
+                  !isValidUrl(currentLink.value) && 'disabled'
+                )}
                 onClick={() => onConfirmLinkInput()}
-                style={!isValidUrl(currentLink.value) ? { opacity: 0.5, cursor: 'not-allowed' } : undefined}
+                style={
+                  !isValidUrl(currentLink.value)
+                    ? { opacity: 0.5, cursor: 'not-allowed' }
+                    : undefined
+                }
               >
                 <Icon icon={confirmButton} />
               </div>

package/src/image-block/config.ts

@@ -7,9 +7,6 @@ export interface ImageBlockConfig {
   captionIcon: string | undefined
   cropIcon: string | undefined
   borderIcon: string | undefined
-  confirmIcon: string | undefined
-  cancelIcon: string | undefined
-  resetCropIcon: string | undefined
   uploadButton: string | undefined
   confirmButton: string | undefined
   uploadPlaceholderText: string
@@ -26,9 +23,6 @@ export const defaultImageBlockConfig: ImageBlockConfig = {
   captionIcon: '💬',
   cropIcon: '✂️',
   borderIcon: '🔲',
-  confirmIcon: '✓',
-  cancelIcon: '✕',
-  resetCropIcon: '↩',
   uploadButton: 'Upload file',
   confirmButton: 'Confirm ⏎',
   uploadPlaceholderText: 'or paste the image link ...',

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

@@ -21,8 +21,6 @@ function toImageBlock(
   })
 }
 
-
-
 /// A paste rule that converts standalone inline images to image-block nodes.
 /// Handles the slice structures produced when pasting HTML from external pages
 /// or from another instance of the same editor:

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

@@ -1,4 +1,4 @@
-import { defineComponent, ref, h, Fragment } from 'vue'
+import { defineComponent, ref, h, Fragment, onMounted, onUnmounted } from 'vue'
 
 import type { MilkdownImageBlockProps } from './image-block'
 
@@ -263,6 +263,7 @@ export const ImageViewer = defineComponent<MilkdownImageBlockProps>({
     }
 
     const applyCrop = () => {
+      if (!isCropping.value) return
       setAttr('cropTop', localCrop.value.top)
       setAttr('cropLeft', localCrop.value.left)
       setAttr('cropWidth', localCrop.value.width)
@@ -270,10 +271,22 @@ export const ImageViewer = defineComponent<MilkdownImageBlockProps>({
       isCropping.value = false
     }
 
-    const cancelCrop = () => {
-      isCropping.value = false
+    // Global listener for clicking outside to apply crop
+    const handleGlobalPointerDown = (e: PointerEvent) => {
+      if (!isCropping.value) return
+      if (wrapperRef.value && !wrapperRef.value.contains(e.target as Node)) {
+        applyCrop()
+      }
     }
 
+    onMounted(() => {
+      window.addEventListener('pointerdown', handleGlobalPointerDown)
+    })
+
+    onUnmounted(() => {
+      window.removeEventListener('pointerdown', handleGlobalPointerDown)
+    })
+
     const resetCrop = () => {
       setAttr('cropTop', 0)
       setAttr('cropLeft', 0)
@@ -507,7 +520,7 @@ export const ImageViewer = defineComponent<MilkdownImageBlockProps>({
                     resetCrop()
                   }}
                 >
-                  <Icon icon={config.resetCropIcon ?? '↩'} />
+                  <Icon icon={'↩'} />
                 </div>
               ) : null}
               {config.borderIcon ? (
@@ -655,9 +668,16 @@ export const ImageViewer = defineComponent<MilkdownImageBlockProps>({
 
             {/* Crop overlay */}
             {isCropping.value ? (
-              <div class="crop-overlay" onClick={(e) => e.stopPropagation()}>
+              <div
+                class="crop-overlay"
+                onClick={(e) => {
+                  e.stopPropagation()
+                  applyCrop()
+                }}
+              >
                 <div
                   class="crop-box"
+                  onClick={(e) => e.stopPropagation()}
                   style={{
                     top: `${(localCrop.value.top * 100).toFixed(2)}%`,
                     left: `${(localCrop.value.left * 100).toFixed(2)}%`,
@@ -726,27 +746,6 @@ export const ImageViewer = defineComponent<MilkdownImageBlockProps>({
                     }
                   />
                 </div>
-                {/* Bottom toolbar */}
-                <div class="crop-toolbar">
-                  <div
-                    class="crop-toolbar-btn"
-                    onClick={(e: MouseEvent) => {
-                      e.stopPropagation()
-                      applyCrop()
-                    }}
-                  >
-                    <Icon icon={config.confirmIcon ?? '✓'} />
-                  </div>
-                  <div
-                    class="crop-toolbar-btn"
-                    onClick={(e: MouseEvent) => {
-                      e.stopPropagation()
-                      cancelCrop()
-                    }}
-                  >
-                    <Icon icon={config.cancelIcon ?? '✕'} />
-                  </div>
-                </div>
               </div>
             ) : null}
 

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

@@ -45,7 +45,9 @@ export const EditLink = defineComponent<EditLinkProps>({
       if (!url) return false
       const trimmedUrl = url.trim()
       // Accept standard http/https links, relative links, anchors, or mailto
-      return /^(https?:\/\/|\/|\.\.?\/|mailto:|#|[a-zA-Z0-9-]+\.[a-zA-Z]+)/i.test(trimmedUrl)
+      return /^(https?:\/\/|\/|\.\.?\/|mailto:|#|[a-zA-Z0-9-]+\.[a-zA-Z]+)/i.test(
+        trimmedUrl
+      )
     }
 
     const onConfirmEdit = () => {
@@ -84,7 +86,10 @@ export const EditLink = defineComponent<EditLinkProps>({
           />
           {link.value ? (
             <Icon
-              class={clsx('button confirm', !isValidUrl(link.value) && 'disabled')}
+              class={clsx(
+                'button confirm',
+                !isValidUrl(link.value) && 'disabled'
+              )}
               icon={config.value.confirmButton}
               onClick={onConfirmEdit}
             />

package/src/table-block/view/component.tsx

@@ -400,7 +400,7 @@ export const TableBlock = defineComponent<TableBlockProps>({
         if (isCellSelection(selection)) {
           const selAny = selection as any
           const rect = selectedRect(view.state)
-          
+
           if (selAny.isColSelection()) {
             if (
               activeColIndex.value >= rect.left &&

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

@@ -1,10 +1,10 @@
 import type { Node } from '@jvs-milkdown/prose/model'
+import type { CellSelection } from '@jvs-milkdown/prose/tables'
 import type { EditorView } from '@jvs-milkdown/prose/view'
 import type { Ref } from 'vue'
 
 import { findParent } from '@jvs-milkdown/prose'
 import { findTable } from '@jvs-milkdown/prose/tables'
-import type { CellSelection } from '@jvs-milkdown/prose/tables'
 
 import type { CellIndex, Refs } from './types'