@jvs-milkdown/components 1.1.4 → 1.1.6

package/package.json

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

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

@@ -93,14 +93,34 @@ export const ImageInput = defineComponent<ImageInputProps>({
       currentLink.value = value
     }
 
+    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
+      )
+    }
+
     const onKeydown = (e: KeyboardEvent) => {
       if (e.key === 'Enter') {
-        setLink(linkInputRef.value?.value ?? '')
+        const val = linkInputRef.value?.value?.trim() ?? ''
+
+        // Stop bubbling so ProseMirror doesn't handle the Enter key
+        // regardless of whether the URL is valid or not.
+        e.preventDefault()
+        e.stopPropagation()
+
+        if (isValidUrl(val)) {
+          setLink(val)
+        }
       }
     }
 
     const onConfirmLinkInput = () => {
-      setLink(linkInputRef.value?.value ?? '')
+      const val = linkInputRef.value?.value?.trim() ?? ''
+      if (isValidUrl(val)) {
+        setLink(val)
+      }
     }
 
     const onUploadFile = (e: Event) => {
@@ -161,16 +181,29 @@ export const ImageInput = defineComponent<ImageInputProps>({
           </div>
           {currentLink.value && (
             <>
-              <div class="image-preview">
-                <img
-                  src={currentLink.value}
-                  alt=""
-                  onError={(e) =>
-                    Promise.resolve(onImageLoadError?.(e)).catch(() => {})
-                  }
-                />
-              </div>
-              <div class="confirm" onClick={() => onConfirmLinkInput()}>
+              {isValidUrl(currentLink.value) && (
+                <div class="image-preview">
+                  <img
+                    src={currentLink.value}
+                    alt=""
+                    onError={(e) =>
+                      Promise.resolve(onImageLoadError?.(e)).catch(() => {})
+                    }
+                  />
+                </div>
+              )}
+              <div
+                class={clsx(
+                  'confirm',
+                  !isValidUrl(currentLink.value) && 'disabled'
+                )}
+                onClick={() => onConfirmLinkInput()}
+                style={
+                  !isValidUrl(currentLink.value)
+                    ? { opacity: 0.5, cursor: 'not-allowed' }
+                    : undefined
+                }
+              >
                 <Icon icon={confirmButton} />
               </div>
             </>

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

@@ -0,0 +1,20 @@
+import { imageSchema, paragraphSchema } from '@jvs-milkdown/preset-commonmark'
+import { DOMParser, Schema, Fragment } from '@jvs-milkdown/prose/model'
+import { describe, it, expect } from 'vitest'
+
+import { imageBlockPasteRule } from './paste-rule'
+import { imageBlockSchema } from './schema'
+
+describe('paste rule', () => {
+  it('splits paragraph correctly', () => {
+    // We mock ctx context enough to return strings for schema
+    const ctx = {
+      get: () => ({
+        type: (ctx: any) => {
+          // just mock type based on calls
+        },
+      }),
+    }
+    expect(true).toBe(true)
+  })
+})

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

@@ -0,0 +1,147 @@
+import type { Node as ProsemirrorNode } from '@jvs-milkdown/prose/model'
+
+import { imageSchema, paragraphSchema } from '@jvs-milkdown/preset-commonmark'
+import { Plugin, PluginKey } from '@jvs-milkdown/prose/state'
+import { $prose } from '@jvs-milkdown/utils'
+
+import { withMeta } from '../__internal__/meta'
+import { imageBlockConfig } from './config'
+import { imageBlockSchema } from './schema'
+
+export const imageBlockConvertPlugin = $prose((ctx) => {
+  const imageType = imageSchema.type(ctx)
+  const imageBlockType = imageBlockSchema.type(ctx)
+  const paragraphType = paragraphSchema.type(ctx)
+
+  const pluginKey = new PluginKey('MILKDOWN_IMAGE_BLOCK_CONVERT')
+
+  let uploading = false
+
+  return new Plugin({
+    key: pluginKey,
+    appendTransaction(transactions, _oldState, newState) {
+      if (!transactions.some((tr) => tr.docChanged)) return null
+
+      const replacements: {
+        from: number
+        to: number
+        blocks: ProsemirrorNode[]
+      }[] = []
+
+      // Debug: log all paragraphs with their children
+      let foundImages = 0
+      newState.doc.descendants((node, pos) => {
+        if (node.type === imageType) foundImages++
+      })
+      if (foundImages > 0) {
+        // inline images found
+      }
+
+      newState.doc.descendants((node, pos) => {
+        if (node.type !== paragraphType) return
+
+        const images: ProsemirrorNode[] = []
+        let hasOtherContent = false
+
+        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 {
+            hasOtherContent = true
+            break
+          }
+        }
+
+        if (hasOtherContent || images.length === 0) return
+
+        const blocks = images
+          .map((img) =>
+            imageBlockType.create({
+              src: img.attrs.src,
+              caption: img.attrs.alt || img.attrs.title || '',
+              ratio: 1,
+            })
+          )
+          .filter(Boolean)
+
+        if (blocks.length > 0) {
+          replacements.push({ from: pos, to: pos + node.nodeSize, blocks })
+        }
+      })
+
+      if (replacements.length === 0) return null
+
+      const { tr } = newState
+      for (let i = replacements.length - 1; i >= 0; i--) {
+        const r = replacements[i]!
+        tr.replaceWith(r.from, r.to, r.blocks)
+      }
+
+      return tr
+    },
+    view() {
+      return {
+        update(view) {
+          if (uploading) return
+
+          const config = ctx.get(imageBlockConfig.key)
+          const imagesToUpload: { pos: number; src: string }[] = []
+
+          view.state.doc.descendants((node, pos) => {
+            if (node.type.name !== 'image-block') return
+            const src: string = node.attrs.src
+            if (!src || src.startsWith('data:') || src.startsWith('blob:'))
+              return
+            if (!/^https?:\/\//i.test(src)) return
+            imagesToUpload.push({ pos, src })
+          })
+
+          if (imagesToUpload.length === 0) return
+
+          uploading = true
+
+          void Promise.allSettled(
+            imagesToUpload.map(async ({ pos, src }) => {
+              const resp = await fetch(src)
+              const blob = await resp.blob()
+              const ext = blob.type.split('/')[1] || 'png'
+              const file = new File([blob], `pasted-image.${ext}`, {
+                type: blob.type,
+              })
+              const uploadedUrl = await config.onUpload(file)
+
+              const $pos = view.state.doc.resolve(pos)
+              const nodeAtPos = $pos.nodeAfter
+              if (
+                nodeAtPos &&
+                nodeAtPos.type.name === 'image-block' &&
+                nodeAtPos.attrs.src === src
+              ) {
+                view.dispatch(
+                  view.state.tr
+                    .setNodeMarkup(pos, undefined, {
+                      ...nodeAtPos.attrs,
+                      src: uploadedUrl,
+                    })
+                    .setMeta(pluginKey, { uploaded: true })
+                )
+              }
+            })
+          ).finally(() => {
+            uploading = false
+          })
+        },
+      }
+    },
+  })
+})
+
+withMeta(imageBlockConvertPlugin, {
+  displayName: 'Prose<image-block-convert>',
+  group: 'ImageBlock',
+})

package/src/image-block/index.ts

@@ -1,6 +1,8 @@
 import type { MilkdownPlugin } from '@jvs-milkdown/ctx'
 
 import { imageBlockConfig } from './config'
+import { imageBlockConvertPlugin } from './convert-plugin'
+import { imageBlockPasteRule } from './paste-rule'
 import { remarkImageBlockPlugin } from './remark-plugin'
 import { imageBlockSchema } from './schema'
 import { imageBlockView } from './view'
@@ -9,10 +11,14 @@ export * from './schema'
 export * from './remark-plugin'
 export * from './config'
 export * from './view'
+export * from './paste-rule'
+export * from './convert-plugin'
 
 export const imageBlockComponent: MilkdownPlugin[] = [
   remarkImageBlockPlugin,
   imageBlockSchema,
   imageBlockView,
   imageBlockConfig,
+  imageBlockPasteRule,
+  imageBlockConvertPlugin,
 ].flat()

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

@@ -0,0 +1,138 @@
+import { imageSchema, paragraphSchema } from '@jvs-milkdown/preset-commonmark'
+import {
+  type Fragment as FragmentType,
+  Fragment,
+  type Node as ProsemirrorNode,
+  Slice,
+} from '@jvs-milkdown/prose/model'
+import { $pasteRule } from '@jvs-milkdown/utils'
+
+import { withMeta } from '../__internal__/meta'
+import { imageBlockSchema } from './schema'
+
+function toImageBlock(
+  imageNode: ProsemirrorNode,
+  imageBlockType: ProsemirrorNode['type']
+): ProsemirrorNode | null {
+  return imageBlockType.create({
+    src: imageNode.attrs.src,
+    caption: imageNode.attrs.alt || imageNode.attrs.title || '',
+    ratio: 1,
+  })
+}
+
+/// 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
+/// or from another instance of the same editor:
+/// 1. Bare `image` at fragment top-level (after Slice.maxOpen unwraps)
+/// 2. `paragraph > image` (paragraph with single image child)
+/// 3. `paragraph > [image, hard_break, ...]` (image with trailing breaks)
+export const imageBlockPasteRule = $pasteRule((ctx) => ({
+  priority: 90,
+  run: (slice, _view, isPlainText) => {
+    if (isPlainText) return slice
+
+    const paragraphType = paragraphSchema.type(ctx)
+    const imageType = imageSchema.type(ctx)
+    const imageBlockType = imageBlockSchema.type(ctx)
+
+    function convertFragment(fragment: FragmentType): FragmentType {
+      const nodes: ProsemirrorNode[] = []
+      let changed = false
+
+      fragment.forEach((node) => {
+        // Case 1: bare inline image at top level (after Slice.maxOpen unwraps paragraph)
+        if (node.type === imageType) {
+          const imageBlock = toImageBlock(node, imageBlockType)
+          if (imageBlock) {
+            nodes.push(imageBlock)
+            changed = true
+            return
+          }
+        }
+
+        // Case 2, 3 & Mixed: Any paragraph containing images
+        if (node.type === paragraphType) {
+          let hasImage = false
+          node.content.forEach((child) => {
+            if (child.type === imageType) hasImage = true
+          })
+
+          if (hasImage) {
+            let currentParaNodes: ProsemirrorNode[] = []
+            let isFirstInsideParent = nodes.length === 0
+
+            node.content.forEach((child) => {
+              if (child.type === imageType) {
+                // If it's the first element in the parent slice (meaning we might need an openStart anchor)
+                // OR we have accumulated text nodes, push a paragraph.
+                if (currentParaNodes.length > 0 || isFirstInsideParent) {
+                  nodes.push(node.copy(Fragment.from(currentParaNodes)))
+                  currentParaNodes = []
+                }
+                const imageBlock = toImageBlock(child, imageBlockType)
+                if (imageBlock) {
+                  nodes.push(imageBlock)
+                }
+                isFirstInsideParent = false
+              } else {
+                currentParaNodes.push(child)
+              }
+            })
+            // ALWAYS push the trailing paragraph at the end, even if empty.
+            // This guarantees that if the fragment replacement ends here, it's a paragraph,
+            // which safegaurds openEnd anchors from throwing ProseMirror slice geometry errors.
+            nodes.push(node.copy(Fragment.from(currentParaNodes)))
+
+            changed = true
+            return
+          }
+        }
+
+        // Recurse into children
+        if (node.content.size > 0) {
+          const fixedContent = convertFragment(node.content)
+          if (fixedContent !== node.content) {
+            changed = true
+            nodes.push(node.copy(fixedContent))
+            return
+          }
+        }
+
+        nodes.push(node)
+      })
+
+      return changed ? Fragment.from(nodes) : fragment
+    }
+
+    const fragment = convertFragment(slice.content)
+    return new Slice(fragment, slice.openStart, slice.openEnd)
+  },
+}))
+
+withMeta(imageBlockPasteRule, {
+  displayName: 'PasteRule<image-block>',
+  group: 'ImageBlock',
+})

package/src/image-block/schema.ts

@@ -19,6 +19,7 @@ export const imageBlockSchema = $nodeSchema('image-block', () => {
       src: { default: '', validate: 'string' },
       caption: { default: '', validate: 'string' },
       ratio: { default: 1, validate: 'number' },
+      align: { default: null },
     },
     parseDOM: [
       {
@@ -30,6 +31,20 @@ export const imageBlockSchema = $nodeSchema('image-block', () => {
             src: dom.getAttribute('src') || '',
             caption: dom.getAttribute('caption') || '',
             ratio: Number(dom.getAttribute('ratio') ?? 1),
+            align: dom.getAttribute('align') || null,
+          }
+        },
+      },
+      {
+        tag: 'img[src]',
+        getAttrs: (dom) => {
+          if (!(dom instanceof HTMLElement)) throw expectDomTypeError(dom)
+          if (dom.getAttribute('data-type') === IMAGE_DATA_TYPE) return false
+
+          return {
+            src: dom.getAttribute('src') || '',
+            caption: dom.getAttribute('alt') || dom.getAttribute('title') || '',
+            ratio: 1,
           }
         },
       },

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

@@ -12,6 +12,7 @@ type Attrs = {
   src: string
   caption: string
   ratio: number
+  align: string | null
 }
 
 export type MilkdownImageBlockProps = {
@@ -37,6 +38,10 @@ export const MilkdownImageBlock = defineComponent<MilkdownImageBlockProps>({
       type: Object,
       required: true,
     },
+    align: {
+      type: Object,
+      required: true,
+    },
     selected: {
       type: Object,
       required: true,

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

@@ -22,6 +22,10 @@ export const ImageViewer = defineComponent<MilkdownImageBlockProps>({
       type: Object,
       required: true,
     },
+    align: {
+      type: Object,
+      required: true,
+    },
     selected: {
       type: Object,
       required: true,

package/src/image-block/view/index.ts

@@ -17,6 +17,7 @@ export const imageBlockView = $view(
       const src = ref(initialNode.attrs.src)
       const caption = ref(initialNode.attrs.caption)
       const ratio = ref(initialNode.attrs.ratio)
+      const align = ref(initialNode.attrs.align)
       const selected = ref(false)
       const readonly = ref(!view.editable)
       const setAttr = (attr: string, value: unknown) => {
@@ -36,6 +37,7 @@ export const imageBlockView = $view(
         src,
         caption,
         ratio,
+        align,
         selected,
         readonly,
         setAttr,
@@ -43,6 +45,7 @@ export const imageBlockView = $view(
       })
       const dom = document.createElement('div')
       dom.className = 'milkdown-image-block'
+      dom.dataset.align = initialNode.attrs.align || 'center'
       const disposeSelectedWatcher = watchEffect(() => {
         const isSelected = selected.value
         if (isSelected) {
@@ -51,6 +54,9 @@ export const imageBlockView = $view(
           dom.classList.remove('selected')
         }
       })
+      const disposeAlignWatcher = watchEffect(() => {
+        dom.dataset.align = align.value || 'center'
+      })
       const proxyDomURL = config.proxyDomURL
       const bindAttrs = (node: Node) => {
         if (!proxyDomURL) {
@@ -69,6 +75,7 @@ export const imageBlockView = $view(
         }
         ratio.value = node.attrs.ratio
         caption.value = node.attrs.caption
+        align.value = node.attrs.align
 
         readonly.value = !view.editable
       }
@@ -97,6 +104,7 @@ export const imageBlockView = $view(
         },
         destroy: () => {
           disposeSelectedWatcher()
+          disposeAlignWatcher()
           app.unmount()
           dom.remove()
         },

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

@@ -1,3 +1,4 @@
+import clsx from 'clsx'
 import { defineComponent, ref, watch, type Ref, h } from 'vue'
 
 import type { LinkTooltipConfig } from '../slices'
@@ -40,15 +41,30 @@ export const EditLink = defineComponent<EditLinkProps>({
       link.value = value
     })
 
+    const isValidUrl = (url: string) => {
+      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
+      )
+    }
+
     const onConfirmEdit = () => {
-      onConfirm(link.value)
+      const val = link.value?.trim() ?? ''
+      if (isValidUrl(val)) {
+        onConfirm(val)
+      }
     }
 
     const onKeydown = (e: KeyboardEvent) => {
       e.stopPropagation()
       if (e.key === 'Enter') {
         e.preventDefault()
-        onConfirmEdit()
+        const val = link.value?.trim() ?? ''
+        if (isValidUrl(val)) {
+          onConfirmEdit()
+        }
       }
       if (e.key === 'Escape') {
         e.preventDefault()
@@ -70,9 +86,17 @@ export const EditLink = defineComponent<EditLinkProps>({
           />
           {link.value ? (
             <Icon
-              class="button confirm"
+              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/dnd/create-drag-handler.ts

@@ -73,7 +73,11 @@ function handleDrag(
   if (!view?.editable) return
 
   event.stopPropagation()
-  if (event.dataTransfer) event.dataTransfer.effectAllowed = 'move'
+  if (event.dataTransfer) {
+    event.dataTransfer.effectAllowed = 'move'
+    // Required by some browsers to properly initiate the drag; empty string might be rejected
+    event.dataTransfer.setData('text/plain', 'milkdown-table-drag')
+  }
 
   const context = prepareDndContext(refs)
 

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

@@ -8,7 +8,7 @@ import { getDragOverColumn, getDragOverRow } from './calc-drag-over'
 import { prepareDndContext } from './prepare-dnd-context'
 
 export function createDragOverHandler(refs: Refs): (e: DragEvent) => void {
-  return throttle((e: DragEvent) => {
+  const updatePosition = throttle((e: DragEvent) => {
     const context = prepareDndContext(refs)
     if (!context) return
     const { preview, content, contentRoot, xHandle, yHandle } = context
@@ -110,4 +110,32 @@ export function createDragOverHandler(refs: Refs): (e: DragEvent) => void {
       }
     }
   }, 20)
+
+  return (e: DragEvent) => {
+    const context = prepareDndContext(refs)
+    if (!context) return
+    const { preview, contentRoot } = context
+    if (preview.dataset.show === 'false') return
+
+    e.preventDefault()
+    e.stopPropagation()
+
+    // SYNCHRONOUSLY update the endIndex so that rapid drops don't miss the final position
+    const info = refs.dragInfo.value
+    if (info) {
+      if (info.type === 'col') {
+        const dragOverColumn = getDragOverColumn(contentRoot, e.clientX)
+        if (dragOverColumn) {
+          info.endIndex = dragOverColumn[1]
+        }
+      } else if (info.type === 'row') {
+        const dragOverRow = getDragOverRow(contentRoot, e.clientY)
+        if (dragOverRow) {
+          info.endIndex = dragOverRow[1]
+        }
+      }
+    }
+
+    updatePosition(e)
+  }
 }

package/src/table-block/dnd/preview.ts

@@ -9,9 +9,9 @@ export function renderPreview(
   tableContent: HTMLElement,
   index: number
 ) {
-  const { width: tableWidth, height: tableHeight } = tableContent
-    .querySelector('tbody')!
-    .getBoundingClientRect()
+  const tableBodyOrContent = tableContent.querySelector('tbody') || tableContent
+  const { width: tableWidth, height: tableHeight } =
+    tableBodyOrContent.getBoundingClientRect()
   if (axis === 'y') {
     const rows = tableContent.querySelectorAll('tr')
     const row = rows[index]