| 286 | // Custom comparison for memo - only re-render when content/className/dataTestId change |
| 287 | // Ignore onEdit since it's stored in a ref and changes every parent render |
| 288 | function arePropsEqual(prevProps: MarkdownViewProps, nextProps: MarkdownViewProps): boolean { |
| 289 | const key = nextProps.dataTestId || '__default__'; |
| 290 | const expectedContent = pendingCheckboxUpdates.get(key); |
| 291 | |
| 292 | // Check if this content change was from a checkbox toggle we already handled |
| 293 | if (expectedContent !== undefined && nextProps.content === expectedContent) { |
| 294 | console.log('[MarkdownView] Skipping re-render - checkbox update already applied to DOM'); |
| 295 | pendingCheckboxUpdates.delete(key); |
| 296 | return true; // Skip re-render, we already updated the DOM |
| 297 | } |
| 298 | |
| 299 | // Clean up if content doesn't match (user edited content differently) |
| 300 | if (expectedContent !== undefined) { |
| 301 | pendingCheckboxUpdates.delete(key); |
| 302 | } |
| 303 | |
| 304 | const equal = |
| 305 | prevProps.content === nextProps.content && |
| 306 | prevProps.className === nextProps.className && |
| 307 | prevProps.dataTestId === nextProps.dataTestId; |
| 308 | if (!equal) { |
| 309 | console.log('[MarkdownView] Props changed, will re-render'); |
| 310 | } |
| 311 | return equal; |
| 312 | } |
| 313 | |
| 314 | // Use memo to prevent re-renders when parent state changes (e.g., drag, selection) |
| 315 | // This prevents image flickering caused by dangerouslySetInnerHTML re-injecting the DOM |