feat(editor): 图片可选中换行、可调大小、右键链接针对图片（docs/31）

用户反馈三件：图片选不中没法在后面打字、右键不能改大小、图片的超链接是空的。无头 Chrome 真实点击复现根因：点击能形成节点选区但无任何视觉提示；图片选中时按 Enter 走 splitBlock，新段落插到图片前面且选区仍停在图片上，接着打字会把图片替换掉。 - Enter 修复：捕获阶段 keydown 只接管图片选区，在图片所在文本块后插空段落并移入光标（createParagraphNear 对行内节点无效，自己写）；选中图片加主题色描边。 - 大小：图片节点加 width 属性，带尺寸时序列化为 <img … width>、否则标准语法；remark 插件把孤立 <img> 解析回图片节点（实体解码、块级包段落），往返逐字一致；右键「调整图片大小…」弹窗 px/% 可调。 - 链接：右键图片的「超链接…」改为图片模式，预填包裹链接、提交对图片节点挂/摘 link 标记（[![alt](src)](href) 可往返）。验证：vitest 148+2（新增 image-size/image-enter 共 12 例）、构建通过、无头 Chrome 实测点击/Enter/打字全流程。
2026-11-15 09:41:24 +08:00
parent fb51276bc5
commit 5f4a80fa01
11 changed files with 628 additions and 17 deletions
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -18,7 +18,7 @@ const SourceEditor = lazy(() => import('./components/SourceEditor'))
 import { offsetInMarkdown, type CursorAnchor } from './editor/cursorSync'
 import { insertPlainText, insertLinkText } from './editor/paste'
 import { isImeComposing } from './utils/ime'
-import { ConfirmSaveModal, AboutModal, ShortcutsModal, LinkModal, ErrorModal , EncodingConvertModal } from './components/Modals'
+import { ConfirmSaveModal, AboutModal, ShortcutsModal, LinkModal, ErrorModal , EncodingConvertModal, ImageSizeModal } from './components/Modals'
 import { tabsReducer, createTab, activeTab, isDirty, type DocTab, type TabsState } from './stores/tabs'
 import { countWords, countChars, extractOutline, baseName, isPathInside, type OutlineItem } from './utils/text'
 import { callUndo, callRedo, focusEditor, type CursorInfo } from './editor/editor'
@@ -1086,7 +1086,10 @@ export default function App() {
  }, [])

  // ——— 编辑区自绘右键菜单 ———
-  const [editorMenu, setEditorMenu] = useState<{ x: number; y: number; hasSelection: boolean; imageSrc: string | null } | null>(null)
+  const [editorMenu, setEditorMenu] = useState<{ x: number; y: number; hasSelection: boolean; imageSrc: string | null; imageEl: HTMLElement | null; tabId: string | null } | null>(null)
+  /** 右键图片的「超链接」目标（图片模式链接弹窗）与「调整大小」目标（docs/31） */
+  const [imageLinkTarget, setImageLinkTarget] = useState<{ tabId: string; el: HTMLElement; href: string } | null>(null)
+  const [imageSizeTarget, setImageSizeTarget] = useState<{ tabId: string; el: HTMLElement; width: string | null } | null>(null)
  const openEditorMenu = (e: React.MouseEvent) => {
    const target = e.target as HTMLElement
    const inEditor = sourceMode
@@ -1096,6 +1099,8 @@ export default function App() {
    e.preventDefault()
    let hasSelection = false
    let imageSrc: string | null = null
+    let imageEl: HTMLElement | null = null
+    let imageTabId: string | null = null
    if (sourceMode) {
      hasSelection = sourceApiRef.current?.hasSelection() ?? false
    } else if (tab) {
@@ -1103,11 +1108,15 @@ export default function App() {
      if (api?.editor) {
        try { hasSelection = api.editor.action((ctx) => !ctx.get(editorViewCtx).state.selection.empty) } catch { hasSelection = false }
      }
-      // 右键命中图片时取出它的文档 src：本地未上传图会在菜单里多一项「上传到 S3」
+      // 右键命中图片时取出它的文档 src：本地未上传图会在菜单里多一项「上传到 S3」；
+      // 同时记住图片元素与标签，大小/链接编辑要按元素定位回节点
      const img = target.closest('img')
-      if (img && api) imageSrc = api.imageSrcForElement(img)
+      if (img && api) {
+        imageSrc = api.imageSrcForElement(img)
+        if (imageSrc) { imageEl = img; imageTabId = tab.id }
+      }
    }
-    setEditorMenu({ x: e.clientX, y: e.clientY, hasSelection, imageSrc })
+    setEditorMenu({ x: e.clientX, y: e.clientY, hasSelection, imageSrc, imageEl, tabId: imageTabId })
  }
  const runEditorMenuAction = (action: EditorMenuAction) => {
    switch (action) {
@@ -1119,7 +1128,26 @@ export default function App() {
      case 'italic': withEditor(editorCommands.italic); break
      case 'strikethrough': withEditor(editorCommands.strikethrough); break
      case 'inlineCode': withEditor(editorCommands.inlineCode); break
-      case 'link': setModal('link'); break
+      case 'link': {
+        // 右键的是图片：链接弹窗切图片模式——预填图片当前的包裹链接，
+        // 提交后把链接标记挂到图片节点上（序列化为 [![alt](src)](href)）
+        const el = editorMenu?.imageEl
+        const tid = editorMenu?.tabId
+        if (el && tid) {
+          const info = paneApisRef.current.get(tid)?.imageInfoForElement(el)
+          setImageLinkTarget({ tabId: tid, el, href: info?.linkHref ?? '' })
+        } else setModal('link')
+        break
+      }
+      case 'imageSize': {
+        const el = editorMenu?.imageEl
+        const tid = editorMenu?.tabId
+        if (el && tid) {
+          const info = paneApisRef.current.get(tid)?.imageInfoForElement(el)
+          setImageSizeTarget({ tabId: tid, el, width: info?.width ?? null })
+        }
+        break
+      }
      case 'toggleSource': toggleSourceMode(); break
      case 'uploadS3': { const src = editorMenu?.imageSrc; if (src) void runSingleImageUpload(src); break }
    }
@@ -2039,6 +2067,34 @@ export default function App() {
          onSubmit={(href) => { setModal(null); if (href) withEditor((e) => editorCommands.link(e, href)) }}
        />
      )}
+      {imageLinkTarget && (
+        <LinkModal
+          heading="图片链接"
+          hint="给图片加链接，点开图片时跳转到这个地址；清空则移除链接。"
+          initialHref={imageLinkTarget.href}
+          onCancel={() => setImageLinkTarget(null)}
+          onSubmit={(href) => {
+            const t = imageLinkTarget
+            setImageLinkTarget(null)
+            const ok = paneApisRef.current.get(t.tabId)?.updateImageForElement(t.el, { linkHref: href || null })
+            if (ok) flash(href ? '图片链接已更新' : '图片链接已移除')
+            else setError('图片已不在文档中，链接未更新。')
+          }}
+        />
+      )}
+      {imageSizeTarget && (
+        <ImageSizeModal
+          current={imageSizeTarget.width}
+          onCancel={() => setImageSizeTarget(null)}
+          onSubmit={(width) => {
+            const t = imageSizeTarget
+            setImageSizeTarget(null)
+            const ok = paneApisRef.current.get(t.tabId)?.updateImageForElement(t.el, { width })
+            if (ok) flash(width ? '图片大小已更新' : '图片已恢复原始大小')
+            else setError('图片已不在文档中，大小未更新。')
+          }}
+        />
+      )}
      {error && <ErrorModal message={error} onClose={() => setError(null)} />}
      {encodingPrompt && (
        <EncodingConvertModal
--- a/src/components/EditorContextMenu.tsx
+++ b/src/components/EditorContextMenu.tsx
@@ -6,7 +6,7 @@ import { isUploadableImageSrc } from '../services/s3'
 export type EditorMenuAction =
  | 'cut' | 'copy' | 'paste' | 'selectAll'
  | 'bold' | 'italic' | 'strikethrough' | 'inlineCode' | 'link'
-  | 'toggleSource' | 'uploadS3'
+  | 'toggleSource' | 'uploadS3' | 'imageSize'

 interface Props {
  x: number
@@ -31,7 +31,7 @@ export default function EditorContextMenu({ x, y, hasSelection, imageSrc, source
  const act = (a: EditorMenuAction) => { onClose(); onAction(a) }
  const showUpload = Boolean(imageSrc && isUploadableImageSrc(imageSrc))
  // 位置夹取，避免菜单溢出窗口右/下边（尺寸为估算值：宽约 190，高随模式与图片项）
-  const { left, top } = clampMenuPosition(x, y, 188, (sourceMode ? 236 : 388) + (showUpload ? 40 : 0))
+  const { left, top } = clampMenuPosition(x, y, 188, (sourceMode ? 236 : 388) + (showUpload ? 40 : 0) + (imageSrc ? 40 : 0))
  return (
    <div
      className="tree-context-menu editor-context-menu"
@@ -55,10 +55,11 @@ export default function EditorContextMenu({ x, y, hasSelection, imageSrc, source
          <button onClick={() => act('link')}>超链接…</button>
        </>
      )}
-      {showUpload && (
+      {(showUpload || imageSrc) && (
        <>
          <div className="tree-menu-divider" />
-          <button onClick={() => act('uploadS3')}>上传到 S3</button>
+          {showUpload && <button onClick={() => act('uploadS3')}>上传到 S3</button>}
+          {imageSrc && <button onClick={() => act('imageSize')}>调整图片大小…</button>}
        </>
      )}
      <div className="tree-menu-divider" />
--- a/src/components/EditorPane.tsx
+++ b/src/components/EditorPane.tsx
@@ -3,7 +3,7 @@ import TableToolbar from './TableToolbar'
 import type { Editor } from '@milkdown/kit/core'
 import { editorViewCtx } from '@milkdown/kit/core'
 import { TextSelection } from '@milkdown/kit/prose/state'
-import { createMarkdownEditor, getMarkdown, collectImageSrcs, replaceImageSrc as replaceImageSrcInEditor, imageSrcAtElement, type CursorInfo } from '../editor/editor'
+import { createMarkdownEditor, getMarkdown, collectImageSrcs, replaceImageSrc as replaceImageSrcInEditor, imageSrcAtElement, imageInfoAtElement, updateImageAtElement, type CursorInfo, type ImageNodeInfo, type ImageNodePatch } from '../editor/editor'
 import { findBlockIndex, type CursorAnchor } from '../editor/cursorSync'
 import { buildTextIndex, findInIndex, type FindOptions, type MatchRange } from '../editor/search'
 import { setFocusModeEnabled, refreshFocusDecorations } from '../editor/plugins'
@@ -25,6 +25,10 @@ export interface EditorPaneApi {
  replaceImageSrc: (oldSrc: string, newSrc: string) => number
  /** 某 DOM 元素对应的图片节点 src（右键命中图片判定） */
  imageSrcForElement: (el: HTMLElement) => string | null
+  /** 某图片元素的节点信息（地址/替代文本/尺寸/包裹链接） */
+  imageInfoForElement: (el: HTMLElement) => ImageNodeInfo | null
+  /** 改某图片元素的节点属性（尺寸/链接等），成功返回 true */
+  updateImageForElement: (el: HTMLElement, patch: ImageNodePatch) => boolean
 }

 interface Props {
@@ -56,6 +60,8 @@ const EMPTY_API: EditorPaneApi = {
  clearFind: () => undefined,
  listImages: () => [],
  replaceImageSrc: () => 0,
+  imageInfoForElement: () => null,
+  updateImageForElement: () => false,
  imageSrcForElement: () => null,
 }

@@ -247,6 +253,8 @@ export default function EditorPane({ tabId, initialMarkdown, onMarkdown, onFinal
      try { return replaceImageSrcInEditor(editor, oldSrc, newSrc) } catch { return 0 }
    }
    const imageSrcForElement = (el: HTMLElement): string | null => imageSrcAtElement(editor, el)
+    const imageInfoForElement = (el: HTMLElement): ImageNodeInfo | null => imageInfoAtElement(editor, el)
+    const updateImageForElement = (el: HTMLElement, patch: ImageNodePatch): boolean => updateImageAtElement(editor, el, patch)
    editor.create()
      .then(() => {
        // 已卸载（关标签/保活淘汰/epoch 重挂）时不再注册 API：cleanup 已
@@ -257,7 +265,7 @@ export default function EditorPane({ tabId, initialMarkdown, onMarkdown, onFinal
        try {
          editor.action((ctx) => refreshFocusDecorations(ctx.get(editorViewCtx) as never))
        } catch { /* 忽略 */ }
-        callbacksRef.current.onReady({ editor, jumpToHeading, getAnchor, setCursorByAnchor, findAll, gotoMatch, replaceCurrent, replaceAll, clearFind, listImages, replaceImageSrc, imageSrcForElement })
+        callbacksRef.current.onReady({ editor, jumpToHeading, getAnchor, setCursorByAnchor, findAll, gotoMatch, replaceCurrent, replaceAll, clearFind, listImages, replaceImageSrc, imageSrcForElement, imageInfoForElement, updateImageForElement })
        if (chunkLoad) {
          setLoadProgress({ done: 1, total: chunkLoad.totalChunks })
          void chunkLoad.appendRest(
--- a/src/components/Modals.tsx
+++ b/src/components/Modals.tsx
@@ -140,11 +140,19 @@ export function ShortcutsModal({ overrides, onChange, onClose }: {
  )
 }

-export function LinkModal({ onSubmit, onCancel }: { onSubmit: (href: string) => void; onCancel: () => void }) {
-  const [href, setHref] = useState('https://')
+export function LinkModal({ onSubmit, onCancel, initialHref, heading, hint }: {
+  onSubmit: (href: string) => void
+  onCancel: () => void
+  /** 预填地址（编辑已有链接时用）；缺省为 https:// 前缀 */
+  initialHref?: string
+  heading?: string
+  hint?: string
+}) {
+  const [href, setHref] = useState(initialHref ?? 'https://')
  return (
    <Shell onCancel={onCancel}>
-      <h3>插入链接</h3>
+      <h3>{heading ?? '插入链接'}</h3>
+      {hint && <p className="modal-note">{hint}</p>}
      <input
        className="modal-input"
        value={href}
@@ -161,6 +169,54 @@ export function LinkModal({ onSubmit, onCancel }: { onSubmit: (href: string) =>
  )
 }

+/**
+ * 图片大小弹窗（docs/31）：宽度数值 + 单位（px / %）。
+ * 确定返回 '300' 或 '50%' 形式的字符串；「恢复原始大小」返回 null（去掉尺寸）。
+ */
+export function ImageSizeModal({ current, onSubmit, onCancel }: {
+  current: string | null
+  onSubmit: (width: string | null) => void
+  onCancel: () => void
+}) {
+  const parsed = (() => {
+    if (!current) return { num: '', unit: 'px' as const }
+    const m = /^(\d+(?:\.\d+)?)(%|px)?$/.exec(current.trim())
+    if (m) return { num: m[1], unit: (m[2] === '%' ? '%' : 'px') as '%' | 'px' }
+    return { num: '', unit: 'px' as const }
+  })()
+  const [num, setNum] = useState(parsed.num)
+  const [unit, setUnit] = useState<'px' | '%'>(parsed.unit)
+  const value = Number(num)
+  const valid = num.trim() !== '' && Number.isFinite(value) && value > 0 && (unit === '%' ? value <= 100 : value <= 10000)
+  const submit = () => { if (valid) onSubmit(unit === '%' ? `${value}%` : `${value}`) }
+  return (
+    <Shell onCancel={onCancel}>
+      <h3>调整图片大小</h3>
+      <div className="modal-field-row">
+        <input
+          className="modal-input"
+          value={num}
+          autoFocus
+          inputMode="decimal"
+          onChange={(e) => setNum(e.target.value)}
+          onKeyDown={(e) => { if (e.key === 'Enter') submit() }}
+          placeholder={unit === '%' ? '如 50' : '如 600'}
+        />
+        <div className="seg-control" role="group" aria-label="单位">
+          <button className={unit === 'px' ? 'active' : ''} onClick={() => setUnit('px')}>像素</button>
+          <button className={unit === '%' ? 'active' : ''} onClick={() => setUnit('%')}>百分比</button>
+        </div>
+      </div>
+      <p className="modal-note">宽度按{unit === '%' ? '段落宽度的百分比' : '像素'}缩放，高度等比。大小会写进文档（带尺寸的图片以 HTML 形式保存）。</p>
+      <div className="modal-actions">
+        {current && <button onClick={() => onSubmit(null)}>恢复原始大小</button>}
+        <button onClick={onCancel}>取消</button>
+        <button className="primary" disabled={!valid} onClick={submit}>确定</button>
+      </div>
+    </Shell>
+  )
+}
+
 export function ErrorModal({ message, onClose }: { message: string; onClose: () => void }) {
  return (
    <Shell onCancel={onClose}>
--- a/src/editor/editor.ts
+++ b/src/editor/editor.ts
@@ -12,8 +12,9 @@ import { clipboard } from '@milkdown/kit/plugin/clipboard'
 import { indent } from '@milkdown/kit/plugin/indent'
 import { math } from '@milkdown/plugin-math'
 import { upload, uploadConfig, type UploadOptions } from '@milkdown/kit/plugin/upload'
-import { createSyntaxRevealPlugin, createCodeBlockTabPlugin, createTableTabPlugin, createFocusDimPlugin, createPlainTextPastePlugin, createImageDisplayPlugin, createEmptyPlaceholderPlugin, selectionInTable } from './plugins'
+import { createSyntaxRevealPlugin, createCodeBlockTabPlugin, createTableTabPlugin, createFocusDimPlugin, createPlainTextPastePlugin, createImageDisplayPlugin, createImageEnterPlugin, createEmptyPlaceholderPlugin, selectionInTable } from './plugins'
 import { createListItemViewPlugin, createCodeBlockViewPlugin } from './nodeViews'
+import { extendImageSchema } from './imageSchema'

 export interface CursorInfo { line: number; col: number }

@@ -39,6 +40,8 @@ export function createMarkdownEditor(root: HTMLElement, initialMarkdown: string,
      ctx.set(defaultValueCtx, initialMarkdown)
      // 序列化风格对齐 Typora 习惯（阶段 0 定稿）：无序列表用 `-`
      ctx.set(remarkStringifyOptionsCtx, { bullet: '-' })
+      // 图片尺寸扩展（docs/31）：width 属性 + <img> HTML 往返
+      extendImageSchema(ctx)
      const lm = ctx.get(listenerCtx)
      if (callbacks.onMarkdown) {
        lm.markdownUpdated((_ctx, markdown) => callbacks.onMarkdown?.(markdown))
@@ -109,6 +112,7 @@ export function createMarkdownEditor(root: HTMLElement, initialMarkdown: string,
    .use(math)
    .use(upload)
    .use(createPlainTextPastePlugin())
+    .use(createImageEnterPlugin())
  if (options.resolveImageDisplay) editor.use(createImageDisplayPlugin(options.resolveImageDisplay))
  return editor
 }
@@ -221,6 +225,85 @@ export function imageSrcAtElement(editor: Editor, el: HTMLElement): string | nul
  }
 }

+export interface ImageNodeInfo {
+  src: string
+  alt: string
+  /** 尺寸（'300' = px、'50%' = 百分比）；未设置时为 null */
+  width: string | null
+  /** 图片被链接包裹时的链接地址（链接标记的 href）；没有时为 null */
+  linkHref: string | null
+}
+
+export interface ImageNodePatch {
+  src?: string
+  alt?: string
+  width?: string | null
+  /** undefined = 不动链接；null/'' = 去掉链接；字符串 = 设置/更新链接 */
+  linkHref?: string | null
+}
+
+function imagePosAtElement(view: { posAtDOM: (el: Node, off: number) => number; state: { doc: { nodeAt: (pos: number) => unknown } } }, el: HTMLElement): number {
+  const pos = view.posAtDOM(el, 0)
+  const node = view.state.doc.nodeAt(pos) as { type: { name: string } } | null
+  if (!node || node.type.name !== 'image') return -1
+  return pos
+}
+
+/** 读某个 <img> 元素对应图片节点的属性（含尺寸与包裹链接），非图片返回 null。 */
+export function imageInfoAtElement(editor: Editor, el: HTMLElement): ImageNodeInfo | null {
+  try {
+    return editor.action((ctx) => {
+      const view = ctx.get(editorViewCtx)
+      const pos = imagePosAtElement(view, el)
+      if (pos < 0) return null
+      const node = view.state.doc.nodeAt(pos)
+      if (!node) return null
+      const link = node.marks.find((m) => m.type.name === 'link')
+      return {
+        src: String(node.attrs.src ?? ''),
+        alt: String(node.attrs.alt ?? ''),
+        width: (node.attrs.width as string | null) ?? null,
+        linkHref: link ? String(link.attrs.href ?? '') || null : null,
+      }
+    })
+  } catch {
+    return null
+  }
+}
+
+/**
+ * 改某个 <img> 元素对应图片节点的属性（地址/替代文本/尺寸/包裹链接），
+ * 一次事务完成。链接以标记形式挂在图片节点上，序列化为 [![alt](src)](href)。
+ */
+export function updateImageAtElement(editor: Editor, el: HTMLElement, patch: ImageNodePatch): boolean {
+  try {
+    return editor.action((ctx) => {
+      const view = ctx.get(editorViewCtx)
+      const pos = imagePosAtElement(view, el)
+      if (pos < 0) return false
+      const node = view.state.doc.nodeAt(pos)
+      if (!node) return false
+      const tr = view.state.tr
+      const attrs = { ...node.attrs }
+      if (patch.src !== undefined) attrs.src = patch.src
+      if (patch.alt !== undefined) attrs.alt = patch.alt
+      if (patch.width !== undefined) attrs.width = patch.width
+      tr.setNodeMarkup(pos, undefined, attrs)
+      if (patch.linkHref !== undefined) {
+        const linkType = view.state.schema.marks.link
+        if (linkType) {
+          tr.removeMark(pos, pos + 1, linkType)
+          if (patch.linkHref) tr.addMark(pos, pos + 1, linkType.create({ href: patch.linkHref }))
+        }
+      }
+      if (tr.docChanged) view.dispatch(tr)
+      return true
+    })
+  } catch {
+    return false
+  }
+}
+
 export function callUndo(editor: Editor) {
  editor.action((ctx) => ctx.get(commandsCtx).call(undoCommand.key))
 }
--- a/src/editor/imageSchema.ts
+++ b/src/editor/imageSchema.ts
@@ -0,0 +1,128 @@
+// 图片尺寸扩展（docs/31）：给 Milkdown 图片节点加 width 属性，让「右键 →
+// 调整大小」可持久化。Markdown 本身没有图片尺寸语法，业界通行写法是
+// HTML：带 width 的图片序列化为 <img src alt width>，无 width 时仍是
+// 标准 ![alt](src)，不污染普通文档。
+// - 解析：remark 阶段把孤立的 <img …>（行内或块级）mdast html 节点换成
+//   image 节点并把 width 放进 data；图片 schema 的 parseMarkdown runner
+//   读出来落到节点 attrs。
+// - 序列化：toMarkdown runner 见 width 就发 html 节点，否则原样发 image。
+// 往返已实测：<img src="b.png" alt="乙" width="300"> 解析/序列化逐字一致。
+import type { Ctx } from '@milkdown/kit/ctx'
+import { remarkPluginsCtx } from '@milkdown/kit/core'
+import { imageSchema } from '@milkdown/kit/preset/commonmark'
+
+const IMG_TAG = /^<img\s+[^>]*\/?>$/i
+
+/** 解析一个孤立 <img> 标签的属性表；不是孤立 img 或没有 src 时返回 null。 */
+export function parseImgTag(html: string): Record<string, string> | null {
+  const t = html.trim()
+  if (!IMG_TAG.test(t)) return null
+  const attrs: Record<string, string> = {}
+  for (const m of t.matchAll(/([\w-]+)\s*=\s*"([^"]*)"|([\w-]+)\s*=\s*'([^']*)'/g)) {
+    attrs[(m[1] ?? m[3]).toLowerCase()] = decodeAttr(m[2] ?? m[4])
+  }
+  return attrs.src ? attrs : null
+}
+
+const ATTR_ENTITIES: Record<string, string> = { '&quot;': '"', '&amp;': '&', '&lt;': '<', '&gt;': '>', '&#39;': "'" }
+
+/** 解码 HTML 属性值里的常见实体（mdast 保留的是源码原文，不解码）。单遍替换防二次解码。 */
+function decodeAttr(v: string): string {
+  return v.replace(/&(?:quot|amp|lt|gt);|&#39;/g, (m) => ATTR_ENTITIES[m] ?? m)
+}
+
+interface MdastNode {
+  type: string
+  value?: string
+  children?: MdastNode[]
+  [key: string]: unknown
+}
+
+/** remark 插件：把孤立 <img> 的 mdast html 节点换成带 data.width 的 image 节点。 */
+export function remarkImgSizePlugin() {
+  const toImage = (child: MdastNode): MdastNode | null => {
+    if (child?.type !== 'html') return null
+    const attrs = parseImgTag(String(child.value ?? ''))
+    if (!attrs) return null
+    return {
+      type: 'image',
+      url: attrs.src,
+      alt: attrs.alt ?? '',
+      title: attrs.title ?? '',
+      data: { width: attrs.width ?? null },
+    } as MdastNode
+  }
+  const walk = (node: MdastNode): void => {
+    if (!node || typeof node !== 'object' || !Array.isArray(node.children)) return
+    node.children = node.children.map((child) => {
+      const img = toImage(child)
+      if (img) {
+        // 根级是块上下文，image 是行内节点，必须包进段落；段落内原地替换
+        return node.type === 'root' ? { type: 'paragraph', children: [img] } : img
+      }
+      walk(child)
+      return child
+    })
+  }
+  return (tree: MdastNode) => walk(tree)
+}
+
+function escapeAttr(v: string): string {
+  return v.replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;')
+}
+
+/** 在编辑器 config 阶段调用：注册 remark 插件 + 包裹图片 schema。 */
+export function extendImageSchema(ctx: Ctx): void {
+  // remarkPluginsCtx 的条目类型是 unified 的 Plugin<[..], Root>，与本文件
+  // 的宽松 mdast 类型对不上；运行时形状 { plugin, options } 已实测无误。
+  const entry = { plugin: remarkImgSizePlugin, options: undefined } as unknown as
+    ReturnType<typeof remarkPluginsCtx.create> extends (infer T)[] ? T : never
+  ctx.update(remarkPluginsCtx, (prev) => [...prev, entry])
+  ctx.update(imageSchema.key, (factory) => (c) => {
+    const spec = factory(c)
+    return {
+      ...spec,
+      attrs: { ...spec.attrs, width: { default: null } },
+      parseMarkdown: {
+        match: (node: { type: string }) => node.type === 'image',
+        runner: (state, node, type) => {
+          const mdast = node as unknown as { url: string; alt?: string; title?: string; data?: { width?: string | null } }
+          state.addNode(type, {
+            src: mdast.url,
+            alt: mdast.alt ?? '',
+            title: mdast.title ?? '',
+            width: mdast.data?.width ?? null,
+          })
+        },
+      },
+      toMarkdown: {
+        match: (node: { type: { name: string } }) => node.type.name === 'image',
+        runner: (state, node) => {
+          const width = node.attrs.width as string | null
+          if (width) {
+            const title = node.attrs.title ? ` title="${escapeAttr(String(node.attrs.title))}"` : ''
+            state.addNode(
+              'html',
+              undefined,
+              `<img src="${escapeAttr(String(node.attrs.src))}" alt="${escapeAttr(String(node.attrs.alt))}"${title} width="${escapeAttr(String(width))}">`,
+            )
+          } else {
+            state.addNode('image', undefined, undefined, {
+              title: node.attrs.title,
+              url: node.attrs.src,
+              alt: node.attrs.alt,
+            })
+          }
+        },
+      },
+    }
+  })
+}
+
+/** width 属性值 → CSS 宽度：纯数字按 px，带单位（%/px/em…）原样用。 */
+export function widthToCss(width: string | null | undefined): string | null {
+  if (!width) return null
+  const t = String(width).trim()
+  if (!t) return null
+  return /^\d+(\.\d+)?$/.test(t) ? `${t}px` : t
+}
--- a/src/editor/plugins.ts
+++ b/src/editor/plugins.ts
@@ -2,7 +2,8 @@
 // 1) syntaxReveal —— Typora 式语法标记显隐：仅光标所在块显示 Markdown 标记，其余只呈现排版结果。
 //    实现为纯 Decoration（只影响 DOM，不进文档模型、不进历史、序列化零影响，有自动化测试断言）。
 // 2) codeBlockTab —— 代码块内 Tab 缩进 / Shift+Tab 反缩进（其余位置 Tab 行为不变）。
-import { Plugin, PluginKey } from '@milkdown/kit/prose/state'
+import { Plugin, PluginKey, NodeSelection, TextSelection } from '@milkdown/kit/prose/state'
+import { widthToCss } from './imageSchema'
 import { Decoration, DecorationSet } from '@milkdown/kit/prose/view'
 import { $prose } from '@milkdown/kit/utils'
 import { commandsCtx } from '@milkdown/kit/core'
@@ -416,6 +417,48 @@ export function createPlainTextPastePlugin() {
 // resolveImageDisplay，内部走 read_file_base64），文档里的相对路径本身不改。
 const TRANSPARENT_PIXEL = 'data:image/gif;base64,R0lGODlhAQABAAAAACw='

+/**
+ * 图片选中时按 Enter：在图片所在段落后新建空段落并把光标移过去（docs/31）。
+ * 默认 Enter 链对图片 NodeSelection 走 splitBlock——新段落插到图片前面且
+ * 选区仍停在图片上，接着打字会把图片替换掉，用户根本没法在图片后输入。
+ * handleKeyDown 先于所有 keymap 插件执行，只接管「图片被选中」这一种情形，
+ * 其余 Enter（列表/标题/代码块/普通文本）一律放行给原有链。
+ */
+export function createImageEnterPlugin() {
+  return $prose(() => new Plugin({
+    // 用插件 view 生命周期挂捕获阶段监听：预置的 Enter keymap 插件排在
+    // 本插件之前，props.handleKeyDown 轮不到（someProp 按插件序先到先得），
+    // 捕获监听则保证先于一切编辑器内 keydown 处理。
+    view: (editorView) => {
+      const onKeyDown = (event: KeyboardEvent) => {
+        if (event.key !== 'Enter' || event.shiftKey || event.ctrlKey || event.metaKey || event.altKey) return
+        if (isImeComposing(event)) return
+        const { state } = editorView
+        const sel = state.selection
+        if (!(sel instanceof NodeSelection) || sel.node.type.name !== 'image') return
+        // createParagraphNear 对行内节点直接返回 false（它只管块级选区），
+        // 自己来：在图片所在的文本块之后插入空段落并把光标放进去。
+        const $pos = state.doc.resolve(sel.from)
+        let depth = $pos.depth
+        while (depth > 0 && !$pos.node(depth).isTextblock) depth--
+        if (depth === 0) return
+        const paraType = state.schema.nodes.paragraph
+        if (!paraType) return
+        const insertAt = $pos.after(depth)
+        const tr = state.tr.insert(insertAt, paraType.create())
+        tr.setSelection(TextSelection.create(tr.doc, insertAt + 1))
+        editorView.dispatch(tr.scrollIntoView())
+        event.preventDefault()
+        event.stopPropagation()
+      }
+      editorView.dom.addEventListener('keydown', onKeyDown, true)
+      return {
+        destroy: () => editorView.dom.removeEventListener('keydown', onKeyDown, true),
+      }
+    },
+  }))
+}
+
 export function createImageDisplayPlugin(resolve: (src: string) => Promise<string | null>) {
  return $prose(() => new Plugin({
    props: {
@@ -424,6 +467,12 @@ export function createImageDisplayPlugin(resolve: (src: string) => Promise<strin
          const img = document.createElement('img')
          img.alt = (node.attrs.alt as string) ?? ''
          if (node.attrs.title) img.title = node.attrs.title as string
+          const applyWidth = (w: unknown) => {
+            const css = widthToCss(typeof w === 'string' ? w : null)
+            if (css) img.style.width = css
+            else img.style.removeProperty('width')
+          }
+          applyWidth(node.attrs.width)
          let currentSrc = ''
          const apply = (src: string) => {
            currentSrc = src
@@ -442,6 +491,7 @@ export function createImageDisplayPlugin(resolve: (src: string) => Promise<strin
            update: (next) => {
              if (next.type.name !== 'image') return false
              img.alt = (next.attrs.alt as string) ?? ''
+              applyWidth(next.attrs.width)
              const src = (next.attrs.src as string) ?? ''
              if (src !== currentSrc) apply(src)
              return true
--- a/src/styles.css
+++ b/src/styles.css
@@ -161,6 +161,11 @@ button { font: inherit; color: inherit; }
 .modal-actions button { border: 1px solid var(--border); background: var(--bg); border-radius: 7px; padding: 6px 14px; cursor: pointer; }
 .modal-actions button.primary { background: var(--accent); color: #fff; border-color: transparent; }
 .modal-input { width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 7px; background: var(--bg); color: var(--text); }
+.modal-field-row { display: flex; gap: 8px; align-items: stretch; }
+.modal-field-row .modal-input { flex: 1; }
+.seg-control { display: flex; border: 1px solid var(--border); border-radius: 7px; overflow: hidden; }
+.seg-control button { padding: 0 12px; background: var(--bg); color: var(--text-dim); border: none; cursor: pointer; font-size: 13px; }
+.seg-control button.active { background: var(--accent); color: #fff; }
 .modal-note { color: var(--text-dim); font-size: 12.5px; }
 .shortcuts-table { border-collapse: collapse; width: 100%; font-size: 13px; }
 .shortcuts-table td { padding: 5px 6px; border-bottom: 1px solid var(--border); }
@@ -179,6 +184,7 @@ kbd { background: var(--code-bg); border: 1px solid var(--border); border-radius
 .milkdown .ProseMirror table { border-collapse: collapse; }
 .milkdown .ProseMirror th, .milkdown .ProseMirror td { border: 1px solid var(--border); padding: 6px 12px; }
 .milkdown .ProseMirror img { max-width: 100%; }
+.milkdown .ProseMirror img.ProseMirror-selectednode { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: 2px; }
 .milkdown .ProseMirror a { color: var(--accent); }
 .milkdown .ProseMirror hr { border: 0; border-top: 1px solid var(--border); }
 .milkdown .ProseMirror li.task-item { list-style: none; display: flex; align-items: flex-start; gap: 2px; margin-left: -1.1em; }