fix: fix font name display wrong when config custom font toolbar close #92 #93
Conversation
WalkthroughThe changes in this pull request involve updates to the font options in the Changes
Possibly related PRs
Suggested labels
Poem
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? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
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)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (3)
packages/docs/fluent-editor/demos/custom-toolbar.vue (1)
23-23: Approve changes with suggestions for improvementThe addition of font options is a good improvement and aligns with the PR objective. However, consider the following suggestions:
- Group the fonts by type (e.g., Chinese fonts, serif, sans-serif, decorative) or order them alphabetically for better organization.
- Add a comment explaining the rationale behind these specific font choices and whether they are guaranteed to be available across different systems.
Here's a suggested refactor with grouping and a comment:
- [{ font: ['songti', 'yahei', 'kaiti', 'heiti', 'lishu', 'mono', 'arial', 'arialblack', 'comic', 'impact', 'times'] }, { size: ['12px', '14px', '16px', '18px', '20px', '24px', '32px', '36px', '48px', '72px'] }], + // Font options: grouped by Chinese fonts, common Western fonts, and decorative fonts + // Ensure these fonts are available or have appropriate fallbacks in your CSS + [{ font: [ + // Chinese fonts + 'songti', 'yahei', 'kaiti', 'heiti', 'lishu', + // Common Western fonts + 'arial', 'times', 'mono', + // Decorative fonts + 'comic', 'impact', 'arialblack' + ] }, { size: ['12px', '14px', '16px', '18px', '20px', '24px', '32px', '36px', '48px', '72px'] }],This grouping makes the font list more organized and the comment provides context for future maintainers.
packages/fluent-editor/src/assets/font.scss (2)
4-4: LGTM: New parent class improves CSS structure.The introduction of the
.ql-formatsclass is a good step towards better organization of the CSS. This change improves the structure without altering the existing styles.Consider adding a comment explaining the purpose of this new class for better maintainability.
7-59: LGTM: Styles preserved with good language support.The nested styles maintain the existing functionality while supporting a wide range of fonts, which is excellent for internationalization and user preference.
Consider the following improvements:
- Use CSS variables for repeated values like widths and font families to improve maintainability.
- Explore using a loop or mixin in SCSS to reduce repetition in font definitions.
Example refactor for point 1:
.ql-formats { --ql-font-picker-width: 108px; --ql-font-label-width: 60px; .ql-font.ql-picker { width: var(--ql-font-picker-width); // ... rest of the styles } // ... other styles span[data-value='mono'].ql-picker-label::before, span[data-value='comic'].ql-picker-label::before, span[data-value='times'].ql-picker-label::before, span[data-value='arialblack'].ql-picker-label::before { width: var(--ql-font-label-width); // ... rest of the styles } }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (2)
- packages/docs/fluent-editor/demos/custom-toolbar.vue (1 hunks)
- packages/fluent-editor/src/assets/font.scss (1 hunks)
🧰 Additional context used
🔇 Additional comments (2)
packages/docs/fluent-editor/demos/custom-toolbar.vue (1)
23-23: Request clarification on toolbar closing behaviorThe changes improve the font options, which is great. However, the PR title mentions fixing an issue when the "custom font toolbar is closed". Could you please clarify how these changes address that specific scenario? It might be helpful to add a comment or implement additional logic if needed to handle the toolbar closing event.
To help verify this, could you provide more context on how the toolbar closing is handled? You might want to search for relevant event handlers or state management related to the toolbar's open/closed state. Here's a script to search for potential related code:
This will help us understand if there's any existing logic for handling toolbar state that might need to be updated along with these changes.
packages/fluent-editor/src/assets/font.scss (1)
5-6: Verify the impact of increased selector specificity.The nesting of
.ql-font.ql-pickerunder.ql-formatsis good for organization. However, this increases the specificity of the selectors.Please run the following script to check for any conflicting styles that might be affected by this change:
✅ Verification successful
Increased Selector Specificity Verified
No conflicting styles found for
.ql-formats .ql-font.ql-pickeroutside offont.scss.🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Check for potential conflicts with the new .ql-formats .ql-font.ql-picker selector # Search for other styles targeting .ql-font.ql-picker echo "Searching for other .ql-font.ql-picker styles:" rg --type css ".ql-font.ql-picker" --glob "!packages/fluent-editor/src/assets/font.scss" # Search for other styles within .ql-formats echo "Searching for other .ql-formats styles:" rg --type css ".ql-formats" --glob "!packages/fluent-editor/src/assets/font.scss"Length of output: 490
Script:
#!/bin/bash # Description: Extract the .ql-formats class definition from toolbar.scss rg "\.ql-formats\s*\{" packages/fluent-editor/src/assets/toolbar.scss -A 10Length of output: 578
PR
PR Checklist
Please check if your PR fulfills the following requirements:
PR Type
What kind of change does this PR introduce?
What is the current behavior?
Issue Number: #92
What is the new behavior?
Does this PR introduce a breaking change?
Other information
Summary by CodeRabbit
New Features
Style