444 lines
14 KiB
TypeScript
444 lines
14 KiB
TypeScript
/**
|
||
* 「签署占位符 = 原子节点」的浏览器行为探针。
|
||
*
|
||
* 为什么需要它：类型检查、构建、纯逻辑断言都只能证明"代码写得对"，
|
||
* 证明不了 wangEditor/Slate 在真实浏览器里**真的**把占位符当成了原子节点。
|
||
* 用户的核心诉求是「一次退格就能整块删掉」，这件事只有真跑一遍才算验证过。
|
||
*
|
||
* 探针只 import 生产源码（utils/signing-field-node），不复制任何逻辑。
|
||
* 通过 window.__probe 暴露一组原语，由 CDP 脚本编排场景。
|
||
*/
|
||
import '@wangeditor/editor/dist/css/style.css'
|
||
|
||
import { createEditor, DomEditor, SlateEditor, SlateTransforms } from '@wangeditor/editor'
|
||
import type { IDomEditor } from '@wangeditor/editor'
|
||
|
||
import type { SigningFieldDef } from '../src/api/workbench/types'
|
||
import {
|
||
createSignFieldNode,
|
||
isSignFieldElement,
|
||
readFieldFromSignFieldNode,
|
||
registerSigningFieldNode,
|
||
removeSignFieldNodes,
|
||
SIGN_FIELD_CHIP_CLASS,
|
||
SIGN_FIELD_NODE_CLASS,
|
||
SIGN_FIELD_TYPE,
|
||
updateSignFieldNodes,
|
||
} from '../src/utils/signing-field-node'
|
||
|
||
// 与 EditorWangPane.vue 一样，在创建编辑器之前注册
|
||
registerSigningFieldNode()
|
||
|
||
const FIELD: SigningFieldDef = {
|
||
id: 'patient',
|
||
label: '患者姓名',
|
||
kind: 'text',
|
||
required: true,
|
||
options: [],
|
||
}
|
||
|
||
const INITIAL_HTML = '<p>甲乙丙</p>'
|
||
|
||
function createProbeEditor(html: string): IDomEditor {
|
||
const container = document.getElementById('editor')
|
||
|
||
// 复用同一个容器重建，先把上一次留下的 DOM 清掉
|
||
if (container) {
|
||
container.innerHTML = ''
|
||
}
|
||
|
||
return createEditor({
|
||
selector: '#editor',
|
||
html,
|
||
mode: 'default',
|
||
config: { placeholder: '正文' },
|
||
})
|
||
}
|
||
|
||
let editor: IDomEditor = createProbeEditor(INITIAL_HTML)
|
||
|
||
function plain<T>(value: T): T {
|
||
return JSON.parse(JSON.stringify(value ?? null)) as T
|
||
}
|
||
|
||
/**
|
||
* 等 DOM 追上模型。
|
||
*
|
||
* wangEditor 的 setHtml / insertNode / select 只改 Slate 模型，DOM 由 snabbdom 在下一帧 patch。
|
||
* 采样太快会读到上一版 DOM（表现是"模型里有元素、DOM 里没有"），
|
||
* 会把正常的渲染误判成"胶囊没渲染出来"。
|
||
*/
|
||
function settle(): Promise<void> {
|
||
return new Promise((resolve) => setTimeout(resolve, 80))
|
||
}
|
||
|
||
/** 深度优先找第一个占位符节点的路径（正文里可能嵌在段落/列表里） */
|
||
function findFieldPath(): number[] | null {
|
||
let hit: number[] | null = null
|
||
|
||
const visit = (nodes: unknown[], prefix: number[]) => {
|
||
nodes.forEach((node, index) => {
|
||
if (!node || typeof node !== 'object') {
|
||
return
|
||
}
|
||
|
||
if (isSignFieldElement(node)) {
|
||
if (!hit) {
|
||
hit = [...prefix, index]
|
||
}
|
||
return
|
||
}
|
||
|
||
const children = (node as { children?: unknown }).children
|
||
|
||
if (Array.isArray(children)) {
|
||
visit(children, [...prefix, index])
|
||
}
|
||
})
|
||
}
|
||
|
||
visit(editor.children as unknown[], [])
|
||
|
||
return hit
|
||
}
|
||
|
||
function countFields(): number {
|
||
let count = 0
|
||
|
||
const visit = (nodes: unknown[]) => {
|
||
nodes.forEach((node) => {
|
||
if (!node || typeof node !== 'object') {
|
||
return
|
||
}
|
||
|
||
if (isSignFieldElement(node)) {
|
||
count += 1
|
||
return
|
||
}
|
||
|
||
const children = (node as { children?: unknown }).children
|
||
|
||
if (Array.isArray(children)) {
|
||
visit(children)
|
||
}
|
||
})
|
||
}
|
||
|
||
visit(editor.children as unknown[])
|
||
|
||
return count
|
||
}
|
||
|
||
/** 把 Slate 模型压成一眼能看懂的形状，方便在 CDP 输出里核对 */
|
||
function outline(): unknown[] {
|
||
const walk = (nodes: unknown[]): unknown[] =>
|
||
nodes.map((node) => {
|
||
const record = node as { type?: string; text?: string; children?: unknown[] }
|
||
|
||
if (typeof record.text === 'string') {
|
||
return { text: record.text }
|
||
}
|
||
|
||
if (isSignFieldElement(node)) {
|
||
return { element: SIGN_FIELD_TYPE, fieldId: record.fieldId, label: record.fieldLabel }
|
||
}
|
||
|
||
return { type: record.type, children: walk(record.children ?? []) }
|
||
})
|
||
|
||
return walk(editor.children as unknown[])
|
||
}
|
||
|
||
/** 胶囊在 DOM 里的样子：标签必须靠 CSS 展示，DOM 里不能有可落光标的文字 */
|
||
function chipInfo() {
|
||
const chip = document.querySelector<HTMLElement>(`.${SIGN_FIELD_NODE_CLASS}`)
|
||
|
||
if (!chip) {
|
||
return null
|
||
}
|
||
|
||
return {
|
||
tagName: chip.tagName,
|
||
className: chip.className,
|
||
hasChipClass: chip.classList.contains(SIGN_FIELD_CHIP_CLASS),
|
||
dataSignLabel: chip.getAttribute('data-sign-label'),
|
||
dataSignTag: chip.getAttribute('data-sign-tag'),
|
||
contentEditableAttr: chip.getAttribute('contenteditable'),
|
||
// 文本节点数量是这条诉求的关键：有文字节点，原生光标就可能落进去
|
||
textNodeCount: Array.from(chip.childNodes).filter((n) => n.nodeType === Node.TEXT_NODE).length,
|
||
textContent: chip.textContent,
|
||
childElementCount: chip.childElementCount,
|
||
beforeContent: getComputedStyle(chip, '::before').content,
|
||
afterContent: getComputedStyle(chip, '::after').content,
|
||
backgroundColor: getComputedStyle(chip).backgroundColor,
|
||
rect: plain(chip.getBoundingClientRect()),
|
||
}
|
||
}
|
||
|
||
const probe = {
|
||
/**
|
||
* 只灌正文，不碰光标。
|
||
* 用来区分"setHtml 本身有没有问题"与"setHtml 之后立刻 focus 有没有问题"。
|
||
*/
|
||
async setHtmlOnly(html: string) {
|
||
editor.setHtml(html)
|
||
|
||
return probe.snapshot()
|
||
},
|
||
|
||
/** 变体：先清选区再灌正文（用来证明"清选区"并不能规避 setHtml 的竞态） */
|
||
async deselectThenSetHtml(html: string) {
|
||
SlateTransforms.deselect(editor)
|
||
editor.setHtml(html)
|
||
|
||
return probe.snapshot()
|
||
},
|
||
|
||
/**
|
||
* 复位成指定正文：**销毁重建编辑器**。
|
||
*
|
||
* ⚠️ 不能用 setHtml 复位。实测（见 [0] 节的对照实验）wangEditor 的 setHtml 在
|
||
* "编辑器产生过选区"之后是不可靠的：
|
||
* ① 异步抛 `Cannot resolve a DOM node from Slate node`；
|
||
* ② 有时直接同步抛 `Cannot find a descendant at path`。
|
||
* 读源码可知原因：with-content.ts 的 setHtml 内部会 `e.focus()`，
|
||
* 而 with-dom.ts 的 `e.focus()` 会把**缓存的上次选区**（EDITOR_TO_SELECTION）装回去，
|
||
* 于是 `e.clear()` 之后、`Transforms.insertFragment` 之前，选区已经指向不存在的路径。
|
||
* 事先 `editor.selection = null` 或 `Transforms.deselect` 都没用——focus() 会把它装回来。
|
||
*
|
||
* 生产里只有「导入 docx」会走到这条路径，那是一个既有的独立问题（已在 WordEditorDialog
|
||
* 对应位置留了说明）。探针需要频繁复位正文，所以改成重建实例——这也更贴近生产的真实形态
|
||
* （WordEditorDialog 整块内容在 v-if="visible" 里，弹窗每次打开都是新编辑器）。
|
||
*/
|
||
async reset(html: string) {
|
||
editor.destroy()
|
||
editor = createProbeEditor(html)
|
||
await settle()
|
||
|
||
return probe.snapshot()
|
||
},
|
||
|
||
async snapshot() {
|
||
await settle()
|
||
|
||
return {
|
||
html: editor.getHtml(),
|
||
text: editor.getText(),
|
||
selection: plain(editor.selection),
|
||
fieldPath: findFieldPath(),
|
||
fieldCount: countFields(),
|
||
outline: outline(),
|
||
chip: chipInfo(),
|
||
// 排查用：渲染失败时只有编辑器自己的 DOM 能说明它到底渲染成了什么
|
||
editorDom: document.getElementById('editor')?.innerHTML ?? null,
|
||
result: document.getElementById('result')?.textContent,
|
||
}
|
||
},
|
||
|
||
/** 与 EditorWangPane.insertField 同一套顺序：focus → 若已选中占位符则右移 → insertNode */
|
||
async insertField(patch?: Partial<SigningFieldDef>) {
|
||
const def: SigningFieldDef = { ...FIELD, ...(patch ?? {}) }
|
||
|
||
editor.focus(true)
|
||
|
||
if (DomEditor.getSelectedNodeByType(editor, SIGN_FIELD_TYPE)) {
|
||
editor.move(1)
|
||
}
|
||
|
||
editor.insertNode(createSignFieldNode(def) as never)
|
||
|
||
return probe.snapshot()
|
||
},
|
||
|
||
/** 光标放到占位符之后（退格即应删掉整个占位符） */
|
||
async caretAfterField() {
|
||
const path = findFieldPath()
|
||
|
||
if (!path) {
|
||
return { ok: false, reason: 'NO_FIELD' }
|
||
}
|
||
|
||
const next = SlateEditor.next(editor, { at: path })
|
||
|
||
if (next) {
|
||
editor.select({ path: next[1], offset: 0 })
|
||
await settle()
|
||
return { ok: true, how: 'next', selection: plain(editor.selection) }
|
||
}
|
||
|
||
// 占位符是最后一个子节点：光标落到父节点末尾
|
||
const parentPath = path.slice(0, -1)
|
||
const parent = SlateEditor.node(editor, parentPath)[0] as { children: unknown[] }
|
||
editor.select({ path: parentPath, offset: parent.children.length })
|
||
await settle()
|
||
|
||
return { ok: true, how: 'parentEnd', selection: plain(editor.selection) }
|
||
},
|
||
|
||
/** 光标放到占位符之前（用于对照：退格应删掉前一个字符，不动占位符） */
|
||
async caretBeforeField() {
|
||
const path = findFieldPath()
|
||
|
||
if (!path) {
|
||
return { ok: false, reason: 'NO_FIELD' }
|
||
}
|
||
|
||
const prev = SlateEditor.previous(editor, { at: path })
|
||
|
||
if (prev) {
|
||
const text = (prev[0] as { text?: string }).text ?? ''
|
||
editor.select({ path: prev[1], offset: text.length })
|
||
await settle()
|
||
return { ok: true, how: 'previous', selection: plain(editor.selection) }
|
||
}
|
||
|
||
editor.select({ path: path.slice(0, -1), offset: 0 })
|
||
await settle()
|
||
|
||
return { ok: true, how: 'parentStart', selection: plain(editor.selection) }
|
||
},
|
||
|
||
/**
|
||
* 光标放到文末（纯文本对照用）。
|
||
* 直接算文末的点再 select，不依赖 focus(true) 在"已有选区"时的行为——
|
||
* 上一节点过胶囊之后选区还停在那个 void 节点上，focus 不一定会把它挪走。
|
||
*/
|
||
async caretToEnd() {
|
||
editor.select(SlateEditor.end(editor, []))
|
||
await settle()
|
||
|
||
return { ok: true, selection: plain(editor.selection) }
|
||
},
|
||
|
||
/** 当前 DOM 里是否已渲染出胶囊 */
|
||
chipExists() {
|
||
return Boolean(document.querySelector(`.${SIGN_FIELD_NODE_CLASS}`))
|
||
},
|
||
|
||
/**
|
||
* 复刻 EditorWangPane.handleFieldClick 的定位路径：
|
||
* 点胶囊 → closest('.ms-sign-chip') → DomEditor.toSlateNode → 判类型 → 取路径。
|
||
* 这一步的风险是 toSlateNode 能不能从 ::before 展示的胶囊解回 Slate 节点。
|
||
*/
|
||
clickChip() {
|
||
const chip = document.querySelector<HTMLElement>(`.${SIGN_FIELD_CHIP_CLASS}`)
|
||
|
||
if (!chip) {
|
||
return { ok: false, reason: 'NO_CHIP' }
|
||
}
|
||
|
||
chip.click()
|
||
|
||
return probe.resolveChip()
|
||
},
|
||
|
||
/** 不走点击，直接按 handleFieldClick 的逻辑解一遍（排除 click 事件本身的干扰） */
|
||
async resolveChip() {
|
||
await settle()
|
||
|
||
const chip = document.querySelector<HTMLElement>(`.${SIGN_FIELD_CHIP_CLASS}`)
|
||
|
||
if (!chip) {
|
||
return { ok: false, reason: 'NO_CHIP' }
|
||
}
|
||
|
||
try {
|
||
const node = DomEditor.toSlateNode(editor, chip) as unknown
|
||
|
||
if (!isSignFieldElement(node)) {
|
||
return { ok: false, reason: 'NOT_SIGN_FIELD', node: plain(node) }
|
||
}
|
||
|
||
const path = DomEditor.findPath(editor, node as never)
|
||
|
||
return {
|
||
ok: true,
|
||
field: readFieldFromSignFieldNode(node),
|
||
path: plain(path),
|
||
isSelectedBefore: DomEditor.isNodeSelected(editor, node as never),
|
||
}
|
||
} catch (error) {
|
||
return { ok: false, reason: 'THREW', message: String(error) }
|
||
}
|
||
},
|
||
|
||
/** 选中占位符节点，供"选中态样式"断言使用 */
|
||
async selectField() {
|
||
const path = findFieldPath()
|
||
|
||
if (!path) {
|
||
return { ok: false, reason: 'NO_FIELD' }
|
||
}
|
||
|
||
editor.focus()
|
||
editor.select(path)
|
||
await settle()
|
||
|
||
return { ok: true, selection: plain(editor.selection), chip: chipInfo() }
|
||
},
|
||
|
||
/** 未选中时的胶囊样式，作为选中态的对照基线 */
|
||
async unselectedChip() {
|
||
await settle()
|
||
|
||
return chipInfo()
|
||
},
|
||
|
||
/** 当前编辑区是否持有焦点（CDP 发真实按键前必须为 true） */
|
||
focusState() {
|
||
const editable = document.querySelector('[contenteditable="true"]')
|
||
|
||
return {
|
||
activeElementIsEditable: document.activeElement === editable,
|
||
editableFound: Boolean(editable),
|
||
}
|
||
},
|
||
|
||
/** 供 CDP 读回的原始编辑器引用（排查用）。getter：reset 会重建实例 */
|
||
get editor() {
|
||
return editor
|
||
},
|
||
DomEditor,
|
||
SlateEditor,
|
||
/** 面板改字段：就地改模型（EditorWangPane.updateField 的底层） */
|
||
async updateField(fieldId: string, patch: Record<string, unknown>) {
|
||
const count = updateSignFieldNodes(editor, fieldId, patch as never)
|
||
|
||
return { count, snapshot: await probe.snapshot() }
|
||
},
|
||
|
||
/** 面板删除字段：就地改模型（EditorWangPane.removeField 的底层） */
|
||
async removeField(fieldId: string) {
|
||
const count = removeSignFieldNodes(editor, fieldId)
|
||
|
||
return { count, snapshot: await probe.snapshot() }
|
||
},
|
||
|
||
/**
|
||
* 人为把选区弄脏（指向文档里不存在的路径）后强制重渲染。
|
||
*
|
||
* 复现的是这条链路：整篇替换正文时 setHtml 不清旧选区 → 选区越界 →
|
||
* renderElem 里 DomEditor.isNodeSelected 拿脏选区跑 nodes() 抛
|
||
* `Cannot find a descendant at path` → 整个占位符渲染失败。
|
||
* 渲染函数不该因为选区脏了就崩，所以 isSelected 包了 try/catch。
|
||
*/
|
||
async renderWithDirtySelection() {
|
||
editor.selection = {
|
||
anchor: { path: [0, 99, 0], offset: 0 },
|
||
focus: { path: [0, 99, 0], offset: 0 },
|
||
} as never
|
||
|
||
// 改一个属性强制重渲染（渲染钩子会去读 editor.selection）
|
||
updateSignFieldNodes(editor, 'patient', { required: false })
|
||
await settle()
|
||
|
||
return { chip: chipInfo(), selection: plain(editor.selection), fieldCount: countFields() }
|
||
},
|
||
}
|
||
|
||
Object.assign(window, { __probe: probe })
|
||
|
||
document.getElementById('result')!.textContent = 'READY'
|
||
|
||
export {}
|