diff --git a/src/lib/editor/imagePreviewPlugin.ts b/src/lib/editor/imagePreviewPlugin.ts index 07a4a63..29af1ed 100644 --- a/src/lib/editor/imagePreviewPlugin.ts +++ b/src/lib/editor/imagePreviewPlugin.ts @@ -12,26 +12,35 @@ class ImagePreviewWidget extends WidgetType { return this.url === other.url; } - toDOM() { + toDOM(view: EditorView) { const wrap = document.createElement('div'); wrap.className = 'cm-image-preview-wrapper'; wrap.style.userSelect = 'none'; wrap.contentEditable = 'false'; + // 块级预览的间距必须计入自身高度,避免外边距折叠导致点击坐标偏移。 + wrap.style.padding = '8px 0'; const img = document.createElement('img'); + img.onload = img.onerror = () => view.requestMeasure(); img.src = this.url; img.className = 'cm-image-preview'; img.style.maxWidth = '100%'; img.style.maxHeight = '400px'; img.style.objectFit = 'contain'; img.style.display = 'block'; - img.style.marginTop = '8px'; - img.style.marginBottom = '8px'; + img.style.margin = '0'; img.style.border = '1px solid #e5e7eb'; wrap.appendChild(img); return wrap; } + + destroy(dom: HTMLElement) { + const img = dom.querySelector('img'); + if (img) { + img.onload = img.onerror = null; + } + } } function getImageDecorationsForState(state: EditorState) {