Skip to content

fix: stop table flicker in md live preview via NodeView - #622

Merged
pengfeixx merged 1 commit into
linuxdeepin:masterfrom
pengfeixx:fix/md-table-flicker-nodeview
Sep 24, 2026
Merged

pengfeixx merged 1 commit into
linuxdeepin:masterfrom
pengfeixx:fix/md-table-flicker-nodeview

Conversation

@pengfeixx

@pengfeixx pengfeixx commented Sep 24, 2026 •

Copy link
Copy Markdown
Contributor

fix: stop table flicker in md live preview via NodeView

  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 .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 且传 .node 注册,规避 view 竞态与组合 id 为空两个坑
  4. 新增浏览器 harness,断言重渲染后包裹层 DOM 身份保留

Log: 实时阅览下编辑源码时,右侧渲染区表格不再闪烁

Influence:

  1. 打开含表格的 md 进入实时阅览连续输入:表格卡片不再闪烁
  2. 源码区编辑表格内容:包裹结构保留,单元格原地更新
  3. 折叠代码块后继续输入:保持折叠状态,复制按钮可用

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:

  • Prevent table and code-block flicker during Markdown live-preview rerenders while preserving interactive state and wrapper DOM identity.

Enhancements:

  • Replace post-render table and code-block enhancement with ProseMirror NodeViews that update content in place and retain scrolling, collapse, and control state.
  • Support localized code-block labels and tooltips through active NodeView instances.

Build:

  • Add a dedicated Vite build configuration and npm script for the browser regression harness.

Tests:

  • Add a standalone browser harness covering table wrapping, DOM identity across rerenders, in-place table updates, code-block structure preservation, multiple tables, and absence of bare tables.

Chores:

  • Remove the obsolete render-enhancer implementation and integrate the new NodeViews into the Markdown editor plugin chain.

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

@sourcery-ai sourcery-ai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

@sourcery-ai

sourcery-ai Bot commented Sep 24, 2026

Copy link
Copy Markdown

Reviewer's Guide

The 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 rerendering

sequenceDiagram
    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
Loading

File-Level Changes

Change Details Files
Moved table and code-block visual wrappers into persistent ProseMirror NodeViews.
  • Registered asynchronous NodeViews against the table and code-block schema node plugins.
  • Used NodeView contentDOM for table rows/cells and code contents so document updates render in place.
  • Preserved code-block controls, collapsed state, copy behavior, and metadata across compatible node updates.
  • Removed the post-render wrapping and translation DOM-scanning implementation.
src/editor/markdown/web/nodeViews.js
src/editor/markdown/web/main.js
src/editor/markdown/web/renderEnhancer.js
Added standalone browser regression coverage for wrapper persistence and incremental updates.
  • Exposed a browser-only render hook when QWebChannel is unavailable.
  • Added checks for initial wrapping, DOM identity across rerenders, updated table content, code-block structure, newly added tables, and bare-table absence.
  • Added a dedicated Vite harness build configuration and package script.
src/editor/markdown/web/harness/harness.html
src/editor/markdown/web/harness/harness.js
src/editor/markdown/web/vite.harness.config.js
src/editor/markdown/web/package.json
Updated the generated browser bundle to include the NodeView runtime and application changes.
  • Embedded asynchronous view registration and NodeView implementations in the built bundle.
  • Removed legacy enhancement calls and routed translation refresh through active code-block views.
src/editor/markdown/web/build/main.bundle.js

Tips and commands

Interacting with Sourcery

  • Trigger a new review: Comment @sourcery-ai review on the pull request.
  • Continue discussions: Reply directly to Sourcery's review comments.
  • Generate a GitHub issue from a review comment: Ask Sourcery to create an
    issue from a review comment by replying to it. You can also reply to a
    review comment with @sourcery-ai issue to create an issue from it.
  • Generate a pull request title: Write @sourcery-ai anywhere in the pull
    request title to generate a title at any time. You can also comment
    @sourcery-ai title on the pull request to (re-)generate the title at any time.
  • Generate a pull request summary: Write @sourcery-ai summary anywhere in
    the pull request body to generate a PR summary at any time exactly where you
    want it. You can also comment @sourcery-ai summary on the pull request to
    (re-)generate the summary at any time.
  • Generate reviewer's guide: Comment @sourcery-ai guide on the pull
    request to (re-)generate the reviewer's guide at any time.
  • Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
    pull request to resolve all Sourcery comments. Useful if you've already
    addressed all the comments and don't want to see them anymore.
  • Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
    request to dismiss all existing Sourcery reviews. Especially useful if you
    want to start fresh with a new review - don't forget to comment
    @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

  • Enable or disable review features such as the Sourcery-generated pull request
    summary, the reviewer's guide, and others.
  • Change the review language.
  • Add, remove or edit custom review instructions.
  • Adjust other review settings.

Getting Help

@deepin-ci-robot

Copy link
Copy Markdown

[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.

Details Needs approval from an approver in each of these files:

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

@pengfeixx
pengfeixx merged commit 4a9067e into linuxdeepin:master Sep 24, 2026
16 of 17 checks passed
@pengfeixx
pengfeixx deleted the fix/md-table-flicker-nodeview branch September 24, 2026 09:11
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants