feat: add vitepress-demo-plugin and modify document demo

[wuyiping0628]

PR

PR Checklist

Please check if your PR fulfills the following requirements:

• The commit message follows our Commit Message Guidelines
• Tests for the changes have been added (for bug fixes / features)
• Docs have been added / updated (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

• Bugfix
• Feature
• Code style update (formatting, local variables)
• Refactoring (no functional changes, no api changes)
• Build related changes
• CI related changes
• Documentation content changes
• Other... Please describe:

What is the current behavior?

Issue Number: N/A

What is the new behavior?

Does this PR introduce a breaking change?

• Yes
• No

Other information

Summary by CodeRabbit

• Documentation

  • Standardized demo presentation format across all documentation pages with a new rendering approach for improved consistency.

• Chores

  • Added new plugin support for enhanced documentation demo functionality.
  • Updated VitePress configuration to optimize demo rendering and code block transformation in documentation.

[coderabbitai]

Walkthrough

The PR introduces vitepress-demo-plugin to the documentation site and migrates all demo embeddings from a custom markdown directive syntax (:::demo src=...:::) to a Vue component tag syntax (<demo vue="..."/>). Configuration changes enable the plugin with playground display and base URL code transformation.

Changes

Cohort / File(s)	Summary
VitePress Configuration packages/docs/fluent-editor/.vitepress/config.ts	Enables vitepress-demo-plugin with playground display and adds code transformer to resolve import.meta.env.BASE_URL references.
Demo Markdown Files packages/docs/fluent-editor/docs/demo/*	Migrates all demo embeddings from custom :::demo src=...::: directive syntax to inline <demo vue="..."/> component tag syntax across 30+ demo documentation files.
Dependencies packages/docs/package.json	Adds vitepress-demo-plugin v1.5.0 to both dependencies and devDependencies.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~15 minutes

Possibly related PRs

• refactor: refactor docs with vitepress #2: Implements the same documentation plugin migration by updating VitePress config to enable vitepress-demo-plugin, converting demo directives to component syntax, and adding the demo plugin dependency.

Suggested labels

refactoring

Poem

🐰 A plugin hops in, shiny and new,
Demo directives bid adieu,
Components now dance in the markdown light,
Playgrounds display, oh what a sight!
From colon-colons to JSX tags we flew! ✨

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly describes the main changes: adding vitepress-demo-plugin and converting demo embedding syntax across multiple documentation files.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

• 📝 Generate docstrings (stacked PR)
• 📝 Generate docstrings (commit on current branch)

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch wyp/demo-0304

Tip

Try Coding Plans. Let us write the prompt for your AI agent so you can ship faster (with fewer bugs).
Share your feedback on Discord.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@packages/docs/fluent-editor/.vitepress/config.ts`:
- Around line 104-109: Demo plugin uses process.env.VITEPRESS_BASE with a
hardcoded '/' fallback which mismatches the site base; update the
vitepressDemoPlugin codeTransformer to fall back to the same site base value
instead of '/' — reference the site base variable (the exported/configured base
used at top of this file) and use it in the replace call (i.e., replace the
hardcoded '/' fallback in process.env.VITEPRESS_BASE || '/' with the site base
variable) so vitepressDemoPlugin, codeTransformer and process.env.VITEPRESS_BASE
use a unified base.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: c2259b0c-7ada-4d78-aa33-63763bc10780

📥 Commits

Reviewing files that changed from the base of the PR and between a41f8f5 and 68178c1.

⛔ Files ignored due to path filters (1)

• pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml

📒 Files selected for processing (27)

• packages/docs/fluent-editor/.vitepress/config.ts
• packages/docs/fluent-editor/docs/demo/add-toolbar-item.md
• packages/docs/fluent-editor/docs/demo/ai.md
• packages/docs/fluent-editor/docs/demo/basic-usage.md
• packages/docs/fluent-editor/docs/demo/code-block-highlight.md
• packages/docs/fluent-editor/docs/demo/collaborative-editing.md
• packages/docs/fluent-editor/docs/demo/counter.md
• packages/docs/fluent-editor/docs/demo/custom-toolbar.md
• packages/docs/fluent-editor/docs/demo/emoji.md
• packages/docs/fluent-editor/docs/demo/file-upload.md
• packages/docs/fluent-editor/docs/demo/flow-chart.md
• packages/docs/fluent-editor/docs/demo/format-painter.md
• packages/docs/fluent-editor/docs/demo/formula.md
• packages/docs/fluent-editor/docs/demo/get-content.md
• packages/docs/fluent-editor/docs/demo/header-list.md
• packages/docs/fluent-editor/docs/demo/i18n.md
• packages/docs/fluent-editor/docs/demo/image-tool.md
• packages/docs/fluent-editor/docs/demo/markdown.md
• packages/docs/fluent-editor/docs/demo/mention.md
• packages/docs/fluent-editor/docs/demo/mind-map.md
• packages/docs/fluent-editor/docs/demo/readonly.md
• packages/docs/fluent-editor/docs/demo/screenshot.md
• packages/docs/fluent-editor/docs/demo/set-content.md
• packages/docs/fluent-editor/docs/demo/shortcut-key.md
• packages/docs/fluent-editor/docs/demo/table-up.md
• packages/docs/fluent-editor/docs/demo/toolbar-tip.md
• packages/docs/package.json

[kagol]

@wuyiping0628 先试用一段时间，没问题的话可以新开一个PR把：@vitepress-code-preview/plugin 移除掉