fix#14979
[Bug]: mermaid transparent text in light theme
## Summary
Mermaid diagram preview in code blocks showed shapes and connectors but
no node or edge labels, with poor contrast in dark mode. This change
fixes rendering, sanitization, and display so labels are visible in both
light and dark themes.
## Root cause
1. **Mermaid 11 config** — `flowchart.htmlLabels: false` is ignored;
only root-level `htmlLabels` applies. Labels were still emitted in
`<foreignObject>`.
2. **SVG sanitization** — `sanitizeSvg()` removed all `foreignObject`
elements (and did not allow `<use>`), stripping most label content.
3. **Theme mismatch** — Preview always used Mermaid’s light `default`
theme while the preview panel follows AFFiNE light/dark, causing dark
text on dark backgrounds for edge and title text.
4. **Embedded CSS** — Mermaid’s inline SVG styles often do not apply
after sanitization, leaving text without a visible `fill`.
## Changes
### Classic renderer (`classic-mermaid.ts`)
- Set root-level `htmlLabels: false` (Mermaid 11+).
- Map `dark` theme to Mermaid’s built-in `dark` palette.
### Sanitization (`bridge.ts`)
- Allow `<use>` and `xlink:href` / `href` for label references.
- Allow `class`, `style`, and `id` on SVG nodes.
- **Sanitize** `foreignObject` inner HTML with DOMPurify instead of
deleting it.
### Preview UI (`mermaid-preview.ts`)
- Sync render theme with app `data-theme` (`default` / `dark`) and
re-render on theme change.
- Add CSS overrides so `text` / `tspan` and HTML inside `foreignObject`
use AFFiNE `text/primary`.
### Native / mobile (`preview.rs`)
- Map `dark` and `modern` themes to the modern renderer options (light
uses `default`).
### Types & tests
- Extend `MermaidRenderTheme` with `'dark'`.
- Update unit tests for sanitization and classic config.
- Add integration test (skips when the test environment cannot lay out
Mermaid).
## Test plan
- [ ] Hard refresh or restart `yarn dev`.
- [ ] Create a `mermaid` code block: `graph TD; A-->B` → enable
**Preview**.
- [ ] Confirm labels **A** and **B** appear inside nodes and on the
edge.
- [ ] Toggle AFFiNE **light** / **dark** theme; confirm preview updates
and text stays readable.
- [ ] Run unit tests:
```bash
yarn vitest run
packages/frontend/core/src/modules/code-block-preview-renderer/
```
- [ ] (Optional) With **Enable Native Mermaid Renderer** enabled in
experimental settings, repeat the manual check.
## Notes for reviewers
- Security: `foreignObject` content is sanitized with the HTML profile;
scripts are stripped.
- The integration test intentionally skips when Mermaid produces an
empty diagram (e.g. happy-dom without full browser layout).
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Mermaid diagrams now adapt to the app's dark or light theme and update
in real time.
* **Improvements**
* SVG sanitization now preserves diagram labels and foreignObject text
while removing unsafe content.
* Classic Mermaid rendering adjusted to keep text labels intact for
previews.
* **Tests**
* Added unit and integration tests covering Mermaid rendering and SVG
sanitization.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
This PR implements [feature request] #14845
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Add-block control that appears when hovering blocks in page mode to
insert and auto-focus a new paragraph; control hides after insertion.
* **Improvements**
* Improved hover and interaction handling to avoid accidental triggers
when interacting with the drag handle or add-block control.
* Consistent sizing, positioning, and visibility behavior for the
add-block control.
* **Style**
* Moved heading icon slightly for improved visual alignment.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: DarkSky <25152247+darkskygit@users.noreply.github.com>
This PR fixes#14040
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Code blocks can be collapsed and expanded via a toolbar toggle
(visible when the document is editable).
* Collapsed code blocks show a limited preview (~8 lines) with a bottom
fade overlay and reduced padding.
* Toolbar button updates icon and tooltip to reflect collapsed/expanded
state.
* Collapse state is preserved on the block so its current
collapsed/expanded setting is retained.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
This PR fixes#14874
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
## Release Notes
* **Bug Fixes**
* Removed height limitation on Mermaid diagram previews in code blocks,
allowing larger diagrams to render at their full size without being
constrained by a fixed maximum height.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Bug Resolved
#14795
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Bug Fixes**
* Made row and column sorting deterministic when items share the same
order value, reducing unexpected cell shifts.
* Adjusted comparator behavior to preserve tied-order grouping, which
may change displayed column/row sequence in edge cases.
* Improved consistency of table rendering and cell placement across
refreshes and edits.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
This PR fixes#14755 bug
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Bug Fixes**
* Fixed keyboard shortcut handling to properly distinguish between
locale input characters and actual shortcuts when using Alt+Meta key
combinations.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Ahsan Khaleeq