Resolved Header Placeholder Overlap and Style Issues

[juliopavila]

Issue:
closes #239

Description:

This PR addresses the issue: Header placeholder elements cover the top of the image block and have incorrect styles. The placeholders for the headers were causing an overlap with the top of the image block and had incorrect styles applied.

Changes:

1. EditorBlock.tsx - Implemented a new function handleTop() to ensure correct spacing from the top, depending on the header type. It includes different return values for various header types ranging from "header-one" to "header-six".

Code snippet:

const handleTop = (): number => {
  switch (type) {
    case "header-one":
      return 12
    case "header-two":
      return 2
    case "header-three":
      return 10
    case "header-four":
      return 6
    case "header-five":
      return 4
    case "header-six":
      return 2
    default:
      return 0
  }
}

Also updated the styling for the Typography component. The top property now uses handleTop to correctly position the placeholder.

Code snippet:

<Typography
  variant="body1"
  className="rich-editor-placeholder"
  sx={{
    position: "absolute",
    top: handleTop,
    left: type.includes("ordered-list-item" || "unordered-list-item") ? 30 : 0,
    color: palette.grays[600],
  }}
/>

2. theme/index.ts - Added specific styles for the .rich-editor-placeholder class. This ensures the placeholders have the correct font family, font size, and line height.

Code snippet:

.rich-editor-placeholder{
  font-family: ${fontFamilies.serif} !important;
  font-size: 16px !important;
  line-height: 1.75 !important;
}

These changes resolve the issue with header placeholder overlap and incorrect styles. Now, the placeholders display correctly according to their respective header types and do not overlap with image blocks.

Test Plan:

To verify these changes, create blocks with different header types and observe the placeholder position and style. There should no longer be any overlap with image blocks, and the placeholders should be styled correctly.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
tabula	✅ Ready (Inspect)	Visit Preview	Jul 20, 2023 1:38pm

[cedricwaxwing]

Works great!