@jvs-milkdown/components 1.1.5 → 1.1.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jvs-milkdown/components",
-  "version": "1.1.5",
+  "version": "1.1.7",
   "keywords": [
     "milkdown",
     "milkdown plugin"
@@ -17,101 +17,48 @@
   ],
   "type": "module",
   "sideEffects": false,
-  "main": "./src/index.ts",
+  "main": "./lib/index.js",
   "exports": {
     ".": {
-      "import": "./src/index.ts"
+      "types": "./lib/index.d.ts",
+      "import": "./lib/index.js"
     },
     "./image-block": {
-      "import": "./src/image-block/index.ts"
+      "types": "./lib/image-block/index.d.ts",
+      "import": "./lib/image-block/index.js"
     },
     "./code-block": {
-      "import": "./src/code-block/index.ts"
+      "types": "./lib/code-block/index.d.ts",
+      "import": "./lib/code-block/index.js"
     },
     "./list-item-block": {
-      "import": "./src/list-item-block/index.ts"
+      "types": "./lib/list-item-block/index.d.ts",
+      "import": "./lib/list-item-block/index.js"
     },
     "./link-tooltip": {
-      "import": "./src/link-tooltip/index.ts"
+      "types": "./lib/link-tooltip/index.d.ts",
+      "import": "./lib/link-tooltip/index.js"
     },
     "./image-inline": {
-      "import": "./src/image-inline/index.ts"
+      "types": "./lib/image-inline/index.d.ts",
+      "import": "./lib/image-inline/index.js"
     },
     "./table-block": {
-      "import": "./src/table-block/index.ts"
+      "types": "./lib/table-block/index.d.ts",
+      "import": "./lib/table-block/index.js"
     }
   },
-  "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": "^1.1.5",
-    "@jvs-milkdown/ctx": "^1.1.5",
-    "@jvs-milkdown/exception": "^1.1.5",
-    "@jvs-milkdown/plugin-tooltip": "^1.1.5",
-    "@jvs-milkdown/preset-commonmark": "^1.1.5",
-    "@jvs-milkdown/preset-gfm": "^1.1.5",
-    "@jvs-milkdown/prose": "^1.1.5",
-    "@jvs-milkdown/transformer": "^1.1.5",
-    "@jvs-milkdown/utils": "^1.1.5",
+    "@jvs-milkdown/core": "^1.1.7",
+    "@jvs-milkdown/ctx": "^1.1.7",
+    "@jvs-milkdown/exception": "^1.1.7",
+    "@jvs-milkdown/plugin-tooltip": "^1.1.7",
+    "@jvs-milkdown/preset-commonmark": "^1.1.7",
+    "@jvs-milkdown/preset-gfm": "^1.1.7",
+    "@jvs-milkdown/prose": "^1.1.7",
+    "@jvs-milkdown/transformer": "^1.1.7",
+    "@jvs-milkdown/utils": "^1.1.7",
     "@types/lodash-es": "^4.17.12",
     "clsx": "^2.0.0",
     "dompurify": "^3.2.5",
@@ -132,5 +79,32 @@
     "@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/__internal__/components/image-input.tsx

@@ -93,14 +93,32 @@ 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 +179,22 @@ 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()
         },