# 31 图片编辑体验（选中 / 换行 / 大小 / 链接）

用户真机反馈三件事：①右键图片无法编辑大小；②右键图片点「超链接」是
空的；③图片无法选中、没法在图片后面输入文本（按回车只能在前面换行）。

## ③ 选中与换行（根因）

无头 Chrome 实测复现（真实鼠标点击）：

- 点击图片本身能形成 NodeSelection、点图片右侧也能把光标落在图片后——
  但选中态**没有任何视觉提示**（PM 给的 `ProseMirror-selectednode`
  类没有样式），用户感知就是「选不中」。
- 真正的死结在 Enter：图片被选中时按 Enter，默认命令链走 splitBlock，
  空段落插到图片**前面**、选区仍停在图片上；接着打字会把图片**替换掉**。
  这就是「只能在前面的文本处换行」的由来。

修法（`createImageEnterPlugin`，plugins.ts）：

- 插件 view 生命周期里给编辑器 DOM 挂**捕获阶段** keydown 监听（预置
  Enter keymap 插件排在本插件之前，props.handleKeyDown 轮不到）；
  只接管「图片 NodeSelection + 无修饰 Enter」：在图片所在文本块之后
  插入空段落并把光标移进去，其余 Enter 全部放行。
- 注意 `createParagraphNear` 用不上：它对行内节点直接返回 false
  （只处理块级选区），故插入逻辑自己写（resolve 到文本块深度、
  after(depth) 处插段落）。
- CSS 给 `img.ProseMirror-selectednode` 加 2px 主题色描边，选中可见。

实测（无头 Chrome，真实点击）：点击→NodeSelection+描边；Enter→新段落
在图片之后、光标在其中；打字落在新段落、图片完好。

## ① 图片大小

Markdown 没有尺寸语法，通行写法是 HTML。方案（imageSchema.ts）：

- 包裹 preset 的 imageSchema：节点加 `width` 属性（字符串，`300`=px、
  `50%`=百分比）。
- 解析：remark 插件（条目形状必须是 `{ plugin, options }`，裸函数不
  生效）把孤立的 `<img …>` mdast html 节点换成 image 节点，width 存
  data；根级（块级）要包一层 paragraph，行内原地替换。属性值做一遍
  实体解码（mdast 保留源码原文，如 `&quot;`）。
- 序列化：有 width 时发 `<img src alt title width>` html 节点（属性
  转义），无 width 时仍发标准 `![alt](src)`，普通文档零影响。
- NodeView 按 width 设置 img 的 CSS 宽度（纯数字补 px）。
- UI：右键图片 →「调整图片大小…」弹窗（数值 + 像素/百分比分段钮，
  可恢复原始大小）。带尺寸的图片在源文件里就是 HTML 形式，弹窗里
  有明示。

往返实测：`<img src="b.png" alt="乙" width="300">` 解析/序列化逐字
一致；普通图片、非 img 的 HTML 均不受影响（tests/image-size.test.ts）。

**拖拽缩放**（同日用户追问后补）：NodeView 改为包装结构
`span.img-wrap > img + span.img-resize-handle`，图片选中时右下角出现
手柄，拖动实时预览（只改 CSS 宽度），松手才提交节点属性（px 值，
上限为段落宽度、下限 20px）。两个坑：
- PM 用 mouse 事件：手柄上的 mousedown/mouseup/click 要吞掉，否则
  PM 会按点击位置捣乱；
- `setNodeMarkup` 提交后 PM 会按 DOM 选区回读、把 NodeSelection 塌
  成文本光标（手柄随之消失、无法连续拖）——提交事务里必须同带
  `setSelection(NodeSelection)` 把选区设回去；
  `updateImageAtElement`（弹窗改尺寸/链接）同理保选区。
无头 Chrome 真实拖拽实测：240 → 拖 +80 得 width="320"、再拖 −30 得
"290"，选区全程不丢。

## ② 图片超链接

原「超链接」是文本链接：对选区套 link 标记，预填只有 `https://`，
对着图片点开自然是「空的」。图片的链接在 Markdown 里是包裹式
`[![alt](src)](href)`——实测这在本编辑器里可往返（link 标记挂在
图片节点上，解析/序列化都保留）。

修法（第一版理解偏了）：先做了「预填包裹链接」的弹窗，用户随即
指出「没有带出来这张图片的 url」——用户要的是**图片自己的地址**
出现在弹窗里。更正后的 `ImageLinkModal`：主字段「图片地址」打开
即带出该图的 src（本地相对路径或网络地址），可查看可改，提交后
patch 到节点；包裹链接降为第二字段「点击时打开的链接（可空）」，
提交时一条事务同时处理 src 与 link 标记（`updateImageAtElement`）。
文本选区的链接流程不变。

配套的编辑器接口（EditorPaneApi）：`imageInfoForElement`（读
src/alt/width/linkHref）、`updateImageForElement`（按元素定位节点
改属性，右键菜单打开时记住元素与标签 id）。

## 图片右键菜单精简（同日用户要求）

右键命中图片时换成专用小菜单，只留与图片有关的项：
超链接… / 调整图片大小… / 上传到 S3（未上传图才有）/ 分隔线 /
剪切 / 复制 / 粘贴。加粗、斜体、删除线、行内代码这些文本格式项，
以及全选、源码模式切换，对图片没有意义，一律不出现（文本右键菜单
不变）。配套：右键图片时先把该图片设为节点选区
（`selectImageAtElement`），描边与手柄随之出现，菜单里的剪切/复制
和随后的 Delete 都作用在这张图上，与常见编辑器一致。

## 待真机验

- WebView2 里点击图片的选中手感（本机为 Chromium 实测）；
- 调整大小后图片在文档中的实际观感与保存后重开的还原；
- 图片在列表/引用/表格里时 Enter 新段落的位置是否符合预期。