zzxming commented 1 week ago

PR

效果如下：

PR Checklist

Please check if your PR fulfills the following requirements:

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

PR Type

What kind of change does this PR introduce?

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

What is the current behavior?

Issue Number: close #98

What is the new behavior?

Does this PR introduce a breaking change?

[ ] Yes
[x] No

Other information

Summary by CodeRabbit

Release Notes

New Features
- Enhanced toolbar with new alignment options: left, center, right, and justify.
- Added tooltip functionality to the toolbar for improved user guidance.
- Introduced dynamic tooltip text that adapts to language changes.
Bug Fixes
- Improved handling of toolbar input elements for better user interaction.
Style
- Updated styles for tooltips and reorganized SCSS imports for better maintainability.
Documentation
- Restructured localization strings for better organization and accessibility in the editor.

coderabbitai[bot] commented 1 week ago

Walkthrough

This pull request introduces several enhancements to the Fluent Editor's toolbar and styling. Key changes include the addition of multiple alignment options in the toolbar configuration, the introduction of a tooltip feature for toolbar icons, and a reorganization of localization strings for better categorization. Additionally, new SCSS variables for styling management are added, and existing styles are updated to support these features. The overall functionality of the editor remains intact while expanding its capabilities, particularly in terms of user interface and internationalization.

Changes

File Path	Change Summary
`packages/docs/fluent-editor/demos/custom-toolbar.vue`	Updated `TOOLBAR_CONFIG` to include multiple alignment options and reorganized list configuration.
`packages/fluent-editor/package.json`	Added new dependency: `quill-toolbar-tip` with version `^0.0.4`.
`packages/fluent-editor/src/assets/common.scss`	Removed `$defaultFontSize`, reorganized import structure, and added new configuration import.
`packages/fluent-editor/src/assets/common/config.scss`	Added new SCSS variables for font size and z-index management.
`packages/fluent-editor/src/assets/editor.scss`	Added new import for configuration, defined `editor` mixin, and expanded styles for various elements.
`packages/fluent-editor/src/assets/fullscreen.scss`	Updated z-index variables to use newly defined SCSS variables.
`packages/fluent-editor/src/assets/toolbar.scss`	Added tooltip styles and a new import for the Quill toolbar tip CSS.
`packages/fluent-editor/src/config/i18n/en-us.ts`	Restructured localization strings, removing and adding several keys for better organization.
`packages/fluent-editor/src/config/i18n/zh-cn.ts`	Similar restructuring of localization strings for Chinese.
`packages/fluent-editor/src/fluent-editor.ts`	Registered new `ToolbarTip` module and updated toolbar defaults.
`packages/fluent-editor/src/fullscreen/handler.ts`	Integrated `ToolbarTip` functionality into fullscreen handling.
`packages/fluent-editor/src/toolbar/index.ts`	Enhanced `BetterToolbar` class and added export for `toolbar-tip`.
`packages/fluent-editor/src/toolbar/toolbar-tip.ts`	Introduced `ToolbarTip` class for managing tooltip text based on language settings.

Assessment against linked issues

Objective	Addressed	Explanation
Implement tooltip functionality for toolbar icons (Issue #98)	✅

Possibly related PRs

#102: Enhances toolbar configuration by adding a fullscreen option, related to fullscreen functionality.
#117: Focuses on improving the styling and layout of toolbar components, relevant to hover and active states.
#86: Addresses alignment and styling of toolbar icons, aligning with visual feedback changes.
#127: Enhances localization and language management, connecting with internationalization support.

Suggested reviewers

kagol

Poem

🐰 In the editor's realm, where tools align,
New tips and tricks, oh how they shine!
With colors and styles, all set to play,
Hover for hints, guiding the way.
A hop, a skip, through text we glide,
In this vibrant world, let creativity ride! 🌟

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

❤️ Share

- [X](https://twitter.com/intent/tweet?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A&url=https%3A//coderabbit.ai) - [Mastodon](https://mastodon.social/share?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A%20https%3A%2F%2Fcoderabbit.ai) - [Reddit](https://www.reddit.com/submit?title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&text=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code.%20Check%20it%20out%3A%20https%3A//coderabbit.ai) - [LinkedIn](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fcoderabbit.ai&mini=true&title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&summary=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code)

🪧 Tips

### Chat There are 3 ways to chat with [CodeRabbit](https://coderabbit.ai): - Review comments: Directly reply to a review comment made by CodeRabbit. Example: - `I pushed a fix in commit , please review it.` - `Generate unit testing code for this file.` - `Open a follow-up GitHub issue for this discussion.` - Files and specific lines of code (under the "Files changed" tab): Tag `@coderabbitai` in a new review comment at the desired location with your query. Examples: - `@coderabbitai generate unit testing code for this file.` - `@coderabbitai modularize this function.` - PR comments: Tag `@coderabbitai` in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples: - `@coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.` - `@coderabbitai read src/utils.ts and generate unit testing code.` - `@coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.` - `@coderabbitai help me debug CodeRabbit configuration file.` Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. ### CodeRabbit Commands (Invoked using PR comments) - `@coderabbitai pause` to pause the reviews on a PR. - `@coderabbitai resume` to resume the paused reviews. - `@coderabbitai review` to trigger an incremental review. This is useful when automatic reviews are disabled for the repository. - `@coderabbitai full review` to do a full review from scratch and review all the files again. - `@coderabbitai summary` to regenerate the summary of the PR. - `@coderabbitai resolve` resolve all the CodeRabbit review comments. - `@coderabbitai configuration` to show the current CodeRabbit configuration for the repository. - `@coderabbitai help` to get help. ### Other keywords and placeholders - Add `@coderabbitai ignore` anywhere in the PR description to prevent this PR from being reviewed. - Add `@coderabbitai summary` to generate the high-level summary at a specific location in the PR description. - Add `@coderabbitai` anywhere in the PR title to generate the title automatically. ### CodeRabbit Configuration File (`.coderabbit.yaml`) - You can programmatically configure CodeRabbit by adding a `.coderabbit.yaml` file to the root of your repository. - Please see the [configuration documentation](https://docs.coderabbit.ai/guides/configure-coderabbit) for more information. - If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: `# yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json` ### Documentation and Community - Visit our [Documentation](https://docs.coderabbit.ai) for detailed information on how to use CodeRabbit. - Join our [Discord Community](http://discord.gg/coderabbit) to get help, request features, and share feedback. - Follow us on [X/Twitter](https://twitter.com/coderabbitai) for updates and announcements.

autofix-troubleshooter commented 1 week ago

Hi! I'm the autofix.ci troubleshooter bot.

It looks like you correctly set up a CI job that uses the autofix.ci GitHub Action, but the autofix.ci GitHub App has not been installed for this repository. This means that autofix.ci unfortunately does not have the permissions to fix this pull request. If you are the repository owner, please install the app and then restart the CI workflow! 😃

kagol commented 2 days ago

@zzxming 已安装 autofix.ci

zzxming commented 2 days ago

@kagol 这个pr使用到了包 quill-toolbar-tip，有必要把包直接移动到 fluent-editor 里面吗