[PE-275] chore: editor line spacing variables

[1akhanBaheti]

Editor Line Spacing Variables

This pull request focuses on enhancing the editor's configuration options, particularly around line spacing, and improving the maintainability of the styles by using CSS variables.

Enhancements to editor configuration:

• Added lineSpacing to DEFAULT_DISPLAY_CONFIG to allow configuration of line spacing.
• Introduced TEditorLineSpacing type and added lineSpacing to TDisplayConfig.

Refactoring of CSS for maintainability:

• Added CSS variables for different line spacing configurations (regular and small).

Summary by CodeRabbit

• New Features

  • Introduced dynamic line spacing configuration, enabling users to benefit from adjustable line spacing options (regular or small) that influence the overall text layout.

• Style

  • Enhanced the styling of lists, headings, paragraphs, and dividers by switching from fixed spacing values to CSS variable–driven values, allowing for more flexible and consistent theming.

[coderabbitai]

Walkthrough

This pull request adjusts styling configurations and refines code organization in the editor package. The changes include reordering imports and updating a component’s CSS class to dynamically incorporate line spacing from the display configuration. New configuration options and types related to line spacing have been introduced, and the CSS has been updated to use CSS variables instead of fixed spacing values for lists, headings, paragraphs, and dividers.

Changes

File(s)	Change Summary
packages/editor/src/core/components/.../editor-container.tsx	Reordered import statements and updated the div class to dynamically include displayConfig.lineSpacing via a template literal.
packages/editor/src/core/constants/config.ts, packages/editor/src/core/types/config.ts	Added a new lineSpacing property (defaulting to "regular") and introduced the TEditorLineSpacing type in the display configuration.
packages/editor/src/core/extensions/core-without-props.ts, packages/editor/src/core/extensions/extensions.tsx, packages/editor/src/core/extensions/read-only-extensions.tsx	Updated list element (bulletList and orderedList) HTML attributes to replace fixed spacing with the CSS variable --list-spacing-y.
packages/editor/src/styles/editor.css	Replaced fixed padding values for horizontal rules, headings, and paragraphs with corresponding CSS variables.
packages/editor/src/styles/variables.css	Added new classes .line-spacing-regular and .line-spacing-small with defined CSS variable values for headings, paragraphs, lists, and dividers.

Possibly related PRs

• style: updated margins and font styles for editor #5978: Adjustments to vertical spacing in the CustomHorizontalRule extension align with the spacing configuration updates in this PR.
• [PE-237] fix: editor placeholder and muted text color #6430: Modifications to dynamic class names using displayConfig.lineSpacing relate to the changes involving the new CSS variable --list-spacing-y.
• [PE-210] feat: editor performance #6269: Introduction of a new lineSpacing property for display settings is a direct precursor to the dynamic styling updates in this PR.

Suggested labels

🌐frontend, 🌟improvement

Suggested reviewers

• SatishGandham
• aaryan610

Poem

I'm a rabbit, hopping through lines of code,
Watching new classes and configs gracefully explode.
Imports gracefully reordered, styles now leap and bound,
Dynamic spacing in the fields where CSS is found.
Hoppy days of improvements, in each commit I'm proud!
🥕🐰

---

📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 6356bb1 and 6f0695d.

📒 Files selected for processing (8)

• packages/editor/src/core/components/editors/editor-container.tsx (2 hunks)
• packages/editor/src/core/constants/config.ts (1 hunks)
• 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/core/types/config.ts (1 hunks)
• packages/editor/src/styles/editor.css (4 hunks)
• packages/editor/src/styles/variables.css (1 hunks)

✅ Files skipped from review due to trivial changes (1)

• packages/editor/src/core/extensions/extensions.tsx

⏰ Context from checks skipped due to timeout of 90000ms (2)

• GitHub Check: Analyze (javascript)
• GitHub Check: Analyze (python)

🔇 Additional comments (22)

packages/editor/src/core/constants/config.ts (1)

7-7: Great addition of line spacing configuration!

Adding the lineSpacing property with a default value of "regular" enhances the editor's configuration options and provides better control over the content presentation.

packages/editor/src/core/types/config.ts (2)

22-22: Good type definition for line spacing options.

The type definition clearly specifies the valid options for line spacing as either "regular" or "small".

---

27-27: Appropriate extension of TDisplayConfig type.

Adding the optional lineSpacing property to TDisplayConfig maintains backward compatibility while enhancing the configuration options.

packages/editor/src/core/extensions/core-without-props.ts (2)

29-29: Excellent use of CSS variables for bullet list spacing.

Replacing the hardcoded spacing value with a CSS variable (--list-spacing-y) allows for dynamic adjustment based on the configured line spacing, improving maintainability and customization options.

---

34-34: Good consistency with ordered list spacing.

Using the same CSS variable approach for ordered lists ensures consistent spacing behavior across different list types.

packages/editor/src/core/extensions/read-only-extensions.tsx (2)

49-49: Good consistency in read-only bullet list styling.

Using the same CSS variable approach in the read-only editor ensures consistent presentation between editable and read-only modes.

---

54-54: Consistent ordered list styling in read-only mode.

Matching the ordered list spacing with the editable mode implementation ensures visual consistency across the application.

packages/editor/src/core/components/editors/editor-container.tsx (2)

2-2: Reordering imports is a good practice.

The import statements have been reordered with React imports moved after the third-party library import, which maintains consistency in import ordering.

---

74-74: Good enhancement to make line spacing configurable.

Adding dynamic line spacing to the editor container allows for better customization of the editor's appearance. The fallback to DEFAULT_DISPLAY_CONFIG.lineSpacing handles cases where the property might be undefined.

packages/editor/src/styles/editor.css (11)

255-255: Nice improvement using CSS variables for divider spacing.

Replacing hardcoded padding values with CSS variables (--divider-padding-top and --divider-padding-bottom) improves maintainability and makes the styling more configurable.

---

338-341: Good refactoring for h1 heading spacing.

Replacing static padding values with CSS variables (--heading-1-padding-top and --heading-1-padding-bottom) makes the editor's typography more flexible and easier to maintain.

---

349-352: Good refactoring for h2 heading spacing.

Replacing static padding values with CSS variables makes it easier to adjust spacing for different line spacing configurations.

---

360-363: Good refactoring for h3 heading spacing.

Using CSS variables for padding values enables consistent application of spacing configurations across different heading levels.

---

371-374: Good refactoring for h4 heading spacing.

The consistent approach to using variables for padding continues with h4 headings, maintaining a uniform pattern throughout the codebase.

---

382-385: Good refactoring for h5 heading spacing.

Similar to other heading levels, h5 padding is now controlled via CSS variables, enhancing consistency and maintainability.

---

393-396: Good refactoring for h6 heading spacing.

The pattern of using CSS variables for padding is consistently applied to all heading levels, completing the typography spacing configuration.

---

408-408: Effective refactoring for paragraph spacing.

Replacing static padding with the CSS variable --paragraph-padding-top improves the flexibility of paragraph spacing in different line spacing configurations.

---

413-413: Good use of variables for last paragraph spacing.

Using the CSS variable --paragraph-padding-bottom for the bottom padding of the last paragraph maintains consistency with the variable-based approach.

---

417-417: Nice improvement for paragraph spacing between elements.

Using the CSS variable --paragraph-padding-between for spacing between paragraphs completes the set of paragraph spacing configurations.

---

426-426: Good consistency in paragraph spacing configuration.

Ensuring that the spacing between consecutive paragraphs also uses the CSS variable --paragraph-padding-between maintains the consistency of the styling approach.

packages/editor/src/styles/variables.css (2)

61-81: Well-structured configuration for regular line spacing.

The addition of the .line-spacing-regular class with a comprehensive set of CSS variables for headings, paragraphs, lists, and dividers provides a solid foundation for the default line spacing configuration. The values chosen are appropriate for comfortable readability.

---

83-102: Excellent addition of small line spacing option.

The .line-spacing-small class introduces a more compact spacing configuration, with reduced padding values that still maintain readability. This gives users the flexibility to choose between different line spacing options based on their preferences.

✨ Finishing Touches

• 📝 Generate Docstrings (Beta)

---

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
• Mastodon
• Reddit
• LinkedIn

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, 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 generate docstrings to generate docstrings for this PR. (Beta)
• @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 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 for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.