style: add custom class to editor paragraph and heading blocks #6143
Conversation
WalkthroughThe changes in this pull request enhance the editor's extension configurations by adding specific HTML attributes for the Changes
Possibly related PRs
Suggested labels
Suggested reviewers
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/editor/src/core/extensions/extensions.tsx (1)
76-85: LGTM! Consider reducing configuration duplication.The custom classes are correctly implemented in the main editor configuration. However, these configurations are duplicated across three files.
Consider extracting these common configurations into a shared constant or helper function to maintain DRY principles:
// shared-config.ts export const EDITOR_BLOCK_CONFIGS = { paragraph: { HTMLAttributes: { class: "editor-paragraph-block", }, }, heading: { HTMLAttributes: { class: "editor-heading-block", }, }, }; // Usage in each file: StarterKit.configure({ ...otherConfigs, ...EDITOR_BLOCK_CONFIGS, });packages/editor/src/styles/editor.css (2)
325-331: Consider using attribute selector for better maintainabilityWhile the current implementation works well, consider using an attribute selector for better maintainability.
-h1.editor-heading-block, -h2.editor-heading-block, -h3.editor-heading-block, -h4.editor-heading-block, -h5.editor-heading-block, -h6.editor-heading-block, -p.editor-paragraph-block { +[class*="editor-heading-block"], +.editor-paragraph-block { margin: 0 !important; }
Line range hint
402-423: Consider alternative to !important for paragraph spacingWhile the paragraph styling is well-implemented, the use of
!importantfor consecutive paragraph spacing might make future maintenance challenging.Consider increasing selector specificity instead:
-p.editor-paragraph-block + p.editor-paragraph-block { +.prose p.editor-paragraph-block + p.editor-paragraph-block { - padding-top: 8px !important; + padding-top: 8px; }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (4)
packages/editor/src/core/extensions/core-without-props.ts(1 hunks)packages/editor/src/core/extensions/extensions.tsx(1 hunks)packages/editor/src/core/extensions/read-only-extensions.tsx(1 hunks)packages/editor/src/styles/editor.css(11 hunks)
🔇 Additional comments (6)
packages/editor/src/core/extensions/core-without-props.ts (1)
46-55: LGTM! Custom classes added for better styling control.
The addition of custom classes for paragraph and heading blocks is well-implemented and follows a consistent naming pattern.
Let's verify the CSS definitions for these new classes:
✅ Verification successful
CSS definitions are properly implemented for the custom classes
The CSS rules for both .editor-paragraph-block and .editor-heading-block are well-defined in packages/editor/src/styles/editor.css with comprehensive styling including:
- Proper margin and padding rules
- Heading-specific styles for h1-h6
- Special handling for paragraphs within lists
- Proper spacing between consecutive paragraphs
- Integration with the prose styling system
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Check for CSS definitions of the new editor block classes
# Expected: CSS rules for .editor-paragraph-block and .editor-heading-block
rg -l "editor-paragraph-block|editor-heading-block" --type css
Length of output: 102
Script:
#!/bin/bash
# Let's check the actual CSS definitions for these classes
rg "editor-(paragraph|heading)-block" packages/editor/src/styles/editor.css -A 3
Length of output: 2003
packages/editor/src/core/extensions/read-only-extensions.tsx (1)
68-77: LGTM! Consistent implementation in read-only mode.
The custom classes are correctly implemented in the read-only editor configuration, maintaining consistency with the core editor.
packages/editor/src/styles/editor.css (4)
136-136: LGTM: Task list styling changes properly scoped
The addition of .editor-paragraph-block class to task list paragraph selectors maintains existing functionality while properly scoping styles to editor-specific paragraphs.
Also applies to: 183-183, 194-194
Line range hint 336-400: LGTM: Consistent and well-structured heading styles
The heading styles are well-implemented with:
- Consistent spacing patterns across all levels
- Proper use of CSS variables for font sizes and line heights
- Correct scoping using the new editor-specific classes
427-428: LGTM: List typography properly scoped
The list typography changes correctly scope the styles to editor paragraphs while maintaining the existing font sizing system.
Line range hint 325-428: Verify style isolation
Let's verify that these editor-specific styles don't affect regular paragraphs and headings outside the editor.
✅ Verification successful
Based on the search results, I can now generate the final response:
The editor-specific styles are properly isolated and won't affect regular paragraphs and headings
The styles are well-scoped through specific class combinations (.editor-heading-block and .editor-paragraph-block) and are further isolated within the .prose context. The search results show:
- No other CSS files define conflicting
.prosestyles - No competing heading or paragraph styles outside the editor
- The only related files are
variables.csswhich defines the CSS variables used by the editor styles
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Search for any other CSS files that might style paragraphs or headings
# to ensure no conflicts with our new editor-specific classes
echo "Checking for other paragraph/heading styles that might conflict..."
rg -t css "(?:h[1-6]|p)\s*{" --glob '!packages/editor/src/styles/editor.css'
echo "Checking for other uses of our new editor classes..."
rg -t css "editor-(paragraph|heading)-block"
Length of output: 2501
Script:
#!/bin/bash
# Let's fix the regex and try again to find potential conflicting styles
echo "Checking for other paragraph/heading styles that might conflict..."
rg -t css "[hp][1-6]?\s*{|\.prose\s" --glob '!packages/editor/src/styles/editor.css'
# Also check for any other CSS files that might use the .prose class
echo -e "\nChecking for other .prose class usage..."
fd -e css -x grep -l "\.prose" {} \; | grep -v "editor.css"
Length of output: 510
Script:
#!/bin/bash
# Let's try a simpler approach to find potential style conflicts
echo "Checking for other heading styles..."
rg -t css "h[1-6]" --glob '!packages/editor/src/styles/editor.css'
echo -e "\nChecking for other paragraph styles..."
rg -t css "p\s*{|p\." --glob '!packages/editor/src/styles/editor.css'
echo -e "\nChecking for other .prose styles..."
rg -t css "\.prose" --glob '!packages/editor/src/styles/editor.css'
Length of output: 3247
Improvements:
This PR adds custom classes to editor's heading and paragraph blocks to distinguish between the editor specific blocks and external blocks.
This ensures all styles only get applied to the paragraph and heading tags inside the editor and don't affect the other blocks.
Summary by CodeRabbit
New Features
Bug Fixes
Style