fix: stop table flicker in md live preview via NodeView - #622
Conversation
1. Replace post-render DOM wrapping with NodeViews for table/code_block 2. Old renderEnhancer wrappers were torn down by renderDescs each rerender 3. Register via $viewAsync on <schema>.node to avoid view race and undefined id 4. Add browser harness asserting wrapper DOM identity survives rerender Log: Table no longer flickers in markdown live preview while editing source Influence: 1. Open a .md with tables in live preview and keep typing: table card must not flash 2. Edit table content from the source pane: wrapper stays, cells update in place 3. Collapse a code block and keep typing: it stays collapsed and copy still works fix: 实时阅览表格闪烁——包裹层改为 NodeView 渲染 1. 表格/代码块视觉包裹由渲染后处理改为 ProseMirror NodeView 2. 原 renderEnhancer 的包裹层每次重渲染被 renderDescs 拆除再重包,产生中间帧 3. 用 $viewAsync 且传 <schema>.node 注册,规避 view 竞态与组合 id 为空两个坑 4. 新增浏览器 harness,断言重渲染后包裹层 DOM 身份保留 Log: 实时阅览下编辑源码时,右侧渲染区表格不再闪烁 Influence: 1. 打开含表格的 md 进入实时阅览连续输入:表格卡片不再闪烁 2. 源码区编辑表格内容:包裹结构保留,单元格原地更新 3. 折叠代码块后继续输入:保持折叠状态,复制按钮可用 PMS: BUG-378271
There was a problem hiding this comment.
Sorry @pengfeixx, you've used your own review budget of 250,000 diff characters for the last 7 days.
You can request another review in 4 days and 22 hours by commenting @sourcery-ai review. Upgrade to get a review now.
Reviewer's GuideThe preview now renders table and code-block wrappers as ProseMirror-owned NodeViews rather than asynchronously post-processing DOM, allowing compatible rerenders to update content in place while retaining wrapper identity and code-block UI state; a standalone browser harness validates the no-flicker behavior. Sequence diagram for stable markdown preview rerenderingsequenceDiagram
participant Source as Markdown source
participant Render as renderMarkdown
participant PM as ProseMirror
participant TableView as tableView NodeView
participant CodeView as codeBlockView NodeView
Source->>Render: renderMarkdown(markdown)
Render->>PM: replaceAll(markdown)
PM->>TableView: create table NodeView
PM->>CodeView: create codeBlock NodeView
TableView-->>PM: dom and contentDOM
CodeView-->>PM: dom and contentDOM
Source->>Render: renderMarkdown(updatedMarkdown)
Render->>PM: replaceAll(updatedMarkdown)
PM->>TableView: update(node)
TableView-->>PM: retain wrapper DOM and update table content
PM->>CodeView: update(node)
CodeView-->>PM: retain wrapper DOM and code-block state
File-Level Changes
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
|
[APPROVALNOTIFIER] This PR is NOT APPROVED This pull-request has been approved by: lzwind, pengfeixx The full list of commands accepted by this bot can be found here. DetailsNeeds approval from an approver in each of these files:Approvers can indicate their approval by writing |
fix: stop table flicker in md live preview via NodeView
Log: Table no longer flickers in markdown live preview while editing source
Influence:
fix: 实时阅览表格闪烁——包裹层改为 NodeView 渲染
Log: 实时阅览下编辑源码时,右侧渲染区表格不再闪烁
Influence:
PMS: https://pms.uniontech.com/bug-view-378271.html
Summary by Sourcery
Eliminate live-preview flicker by rendering table and code-block wrappers as persistent ProseMirror NodeViews.
Bug Fixes:
Enhancements:
Build:
Tests:
Chores: