feat(tiptap): extend theme CSS variables, voice-block copy-clear, and rebuild dist

[dengzhongyuan365-dev]

What changed

Extends the Tiptap editor frontend with full theme CSS variable linkage, a voice-block copy-clear plugin, context-menu probe scripts, and a rebuilt dist bundle.

• tiptap-channel.js (applyTheme): add six new CSS variables (--dvn-panel-bg, --dvn-panel-border, --dvn-toolbar-border, --dvn-hover-bg, --dvn-clear-btn-bg, --dvn-active-outline) consumed by image-interactions.js and format-toolbar.js for full light/dark theme linkage.
• voice-block.js (voiceBlockCopyClear): ProseMirror plugin that clears transcription text, regenerates voiceId, and resets translateUnfold on copy/cut, preventing stale state when pasting duplicated voice blocks.
• tiptap-editor.js / voice-block.js: add context-menu probe scripts for selection type and position detection.
• Tests: add frontend unit tests for theme variable consumption and voice-block copy-clear behavior.
• dist: rebuild web-editor/dist/tiptap-editor.js (qrc points to dist).

Why

The Tiptap editor (debug-only) only changed the background color on theme switch and lacked voice-block copy-clear behavior, leaving host interactions inconsistent with the legacy editor. This brings the frontend to parity for theme, voice-block copy, and context-menu detection.

How verified

• Frontend unit tests: npm test — 158 pass, 0 fail (including new theme-variable and copy-clear tests).
• Build: npm run build succeeds; dist bundle regenerated and includes all changes.
• Debug mode is off by default; no behavior change in release builds.

Summary by Sourcery

Align the Tiptap editor frontend with the host theme and interaction model by wiring new CSS variables into toolbar and image menus, improving voice block copy behavior and metadata exposure for context menus, adding scroll reporting and editor exposure for host integrations, and extending tests to cover these new behaviors.

New Features:

• Add theme-linked CSS variables for Tiptap panels, toolbars, and image context menus to support light/dark styling.
• Expose voice block metadata via data attributes for host right-click menu integration.
• Report editor scroll position to the host for driving title bar visual state.
• Expose the Tiptap editor instance on window for external debugging and integration.

Bug Fixes:

• Ensure copied voice blocks clear transcription text, regenerate voiceId, and reset translate state to avoid stale duplicated state.
• Prevent transformCopied from altering non-voiceBlock content during copy operations.

Enhancements:

• Make the format toolbar and color picker fully theme-aware using shared CSS variables.
• Update image context menu hover styles to respect theme CSS variables.

Tests:

• Add unit tests validating voice-block copy-clear behavior via transformCopied.
• Add unit tests verifying image context menu styling consumes theme CSS variables.

[sourcery-ai]

Sorry @dengzhongyuan365-dev, your pull request is larger than the review limit of 150000 diff characters

[deepin-ci-robot]

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by: dengzhongyuan365-dev

The full list of commands accepted by this bot can be found here.

Details

Needs approval from an approver in each of these files:

• debian/deepin/OWNERS

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

[sourcery-ai]

Reviewer's Guide

Extends the Tiptap debug editor with theme-aware CSS variables, a voice-block copy-clear ProseMirror plugin, context-menu/scroll reporting hooks, and corresponding tests plus rebuilt dist.

Sequence diagram for voice-block copy-clear behavior on copy

sequenceDiagram
  actor User
  participant ProseMirrorEditor
  participant voiceBlockCopyClearPlugin
  participant Clipboard

  User->>ProseMirrorEditor: copy
  ProseMirrorEditor->>voiceBlockCopyClearPlugin: transformCopied(slice)
  voiceBlockCopyClearPlugin->>voiceBlockCopyClearPlugin: transformFragment(fragment)
  voiceBlockCopyClearPlugin->>voiceBlockCopyClearPlugin: generateVoiceId()
  voiceBlockCopyClearPlugin-->>ProseMirrorEditor: Slice(newContent, openStart, openEnd)
  ProseMirrorEditor-->>Clipboard: write(modifiedSlice)

Loading

File-Level Changes

Change	Details	Files
Introduce theme-linked CSS variables and consume them in toolbar and image context menu UI.	Extend applyTheme to set six dvn-* CSS variables based on theme and highlight color. Update format toolbar color picker, toolbar chrome, and groups to use the new CSS variables for background, borders, and active outlines. Update image context menu styles to read panel and hover colors from the new CSS variables. Add a unit test verifying image context menu styling references the dvn CSS variables.	web-editor/src/runtime/tiptap-channel.js web-editor/src/runtime/format-toolbar.js web-editor/src/runtime/image-interactions.js web-editor/test/image-interactions.test.mjs
Add voice-block copy-clear behavior and context-menu metadata for host integration.	Add buildVoiceMenuJson helper and set data-voice-meta on initial render and updates for voiceBlock nodes. Introduce voiceBlockCopyClear ProseMirror plugin using transformCopied to clear text, regenerate voiceId, and reset translateUnfold on copied voiceBlock slices while leaving originals untouched. Ensure non-voiceBlock slices are returned unchanged by transformCopied. Add tests covering voiceBlock copy-clear behavior and non-voiceBlock copy behavior.	web-editor/src/extensions/voice-block.js web-editor/test/voice-block-runtime.test.mjs
Expose the debug Tiptap editor instance globally and add scroll reporting to the host bridge.	Attach the created Tiptap editor instance to window.__dvnTiptapEditor in the debug entrypoint for external probing or context-menu scripts. Wire scroll listeners on the editor DOM and window to call bridge.jsReportScroll with current scroll position when available.	web-editor/src/runtime/tiptap-editor.js web-editor/src/runtime/tiptap-channel.js
Regenerate dist bundle to include new runtime, styling, and plugin behavior.	Rebuild web-editor/dist/tiptap-editor.js so qrc-based consumers use the updated debug editor with theme linkage, voice copy-clear, and scroll reporting.	web-editor/dist/tiptap-editor.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

• Contact our support team for questions or feedback.
• Visit our documentation for detailed guides and information.
• Keep in touch with the Sourcery team by following us on X/Twitter, LinkedIn or GitHub.