Merge pull request #240 from gnosis/issue-#239_editor_placeholder

Resolved Header Placeholder Overlap and Style Issues
gnosisguild · Jul 20, 2023 · 9a6bc14 · 9a6bc14
2 parents f05fbab + f848a72
commit 9a6bc14
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 0 deletions.
diff --git a/packages/app/src/components/commons/Editor/EditorBlock.tsx b/packages/app/src/components/commons/Editor/EditorBlock.tsx
@@ -25,6 +25,24 @@ const EditorBlockItem: React.FC<EditorBlockItemProps> = (props) => {
   const isFocused = props.blockProps.isFocused
   const type = props.block.getType()
 
+  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
+    }
+  }
   return (
     <Box
       sx={{
@@ -39,8 +57,10 @@ const EditorBlockItem: React.FC<EditorBlockItemProps> = (props) => {
       {isBlockFocused && isEmpty && isFocused && (
         <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],
           }}

diff --git a/packages/app/src/theme/index.ts b/packages/app/src/theme/index.ts
@@ -238,6 +238,11 @@ let theme = createTheme({
           overflow: auto;
           padding: 1rem;
         }
+        .rich-editor-placeholder{
+          font-family: ${fontFamilies.serif} !important;
+          font-size: 16px !important;
+          line-height: 1.75 !important;
+        }
         .public-DraftStyleDefault-pre {
           background-color: initial;
           border-radius: initial;