fix(ui-markdown-editor): Overriding CSS - #327

Signed-off-by: d-e-v-esh <[email protected]>

Author: d-e-v-esh

packages/ui-markdown-editor/src/FormattingToolbar/StyleFormat/index.js

@@ -5,11 +5,11 @@ import { Dropdown } from 'semantic-ui-react';
 import StyleDropdownItem from './Item';
 import {
   DROPDOWN_STYLE,
-  DROPDOWN_STYLE_H1,
-  DROPDOWN_STYLE_H2,
-  DROPDOWN_STYLE_H3, 
-  DROPDOWN_STYLE_H4,
-  DROPDOWN_STYLE_H5,
+  TOOLBAR_DROPDOWN_STYLE_H1,
+  TOOLBAR_DROPDOWN_STYLE_H2,
+  TOOLBAR_DROPDOWN_STYLE_H3,
+  TOOLBAR_DROPDOWN_STYLE_H4,
+  TOOLBAR_DROPDOWN_STYLE_H5,
   TOOLBAR_DROPDOWN_STYLE_H6,
 } from '../../utilities/constants';
 import {
@@ -42,31 +42,31 @@ const StyleDropdown = ({ canBeFormatted, currentStyle }) => {
           <StyleDropdownItem
             editor={editor}
             type={H1}
-            style={DROPDOWN_STYLE_H1}
+            style={TOOLBAR_DROPDOWN_STYLE_H1}
             canBeFormatted={canBeFormatted}
           />
           <StyleDropdownItem
             editor={editor}
             type={H2}
-            style={DROPDOWN_STYLE_H2}
+            style={TOOLBAR_DROPDOWN_STYLE_H2}
             canBeFormatted={canBeFormatted}
           />
           <StyleDropdownItem
             editor={editor}
             type={H3}
-            style={DROPDOWN_STYLE_H3}
+            style={TOOLBAR_DROPDOWN_STYLE_H3}
             canBeFormatted={canBeFormatted}
           />
           <StyleDropdownItem
             editor={editor}
             type={H4}
-            style={DROPDOWN_STYLE_H4}
+            style={TOOLBAR_DROPDOWN_STYLE_H4}
             canBeFormatted={canBeFormatted}
           />
           <StyleDropdownItem
             editor={editor}
             type={H5}
-            style={DROPDOWN_STYLE_H5}
+            style={TOOLBAR_DROPDOWN_STYLE_H5}
             canBeFormatted={canBeFormatted}
           />
           <StyleDropdownItem

packages/ui-markdown-editor/src/components/index.js

@@ -10,12 +10,13 @@ import {
   HTML_INLINE, SOFTBREAK, LINEBREAK, HEADINGS
 } from '../utilities/schema';
 import {
-  DROPDOWN_STYLE_H1,
-  DROPDOWN_STYLE_H2,
-  DROPDOWN_STYLE_H3,
-  DROPDOWN_STYLE_H4,
-  DROPDOWN_STYLE_H5,
-  DROPDOWN_STYLE_H6
+  H1_STYLING,
+  H2_STYLING,
+  H3_STYLING,
+  H4_STYLING,
+  H5_STYLING,
+  H6_STYLING,
+  PARAGRAPH_STYLING
 } from '../utilities/constants';
 import generateId from '../utilities/generateId';
 
@@ -26,13 +27,13 @@ const Element = (props) => {
   const { type, data } = element;
   const headingId = HEADINGS.includes(type) ? generateId(element) : null;
   const baseElementRenderer = {
-    [PARAGRAPH]: () => (<p {...attributes}>{children}</p>),
-    [H1]: () => (<Heading id={headingId} as="h1" style={DROPDOWN_STYLE_H1} {...attributes}>{children}</Heading>),
-    [H2]: () => (<Heading id={headingId} as="h2" style={DROPDOWN_STYLE_H2} {...attributes}>{children}</Heading>),
-    [H3]: () => (<Heading id={headingId} as="h3" style={DROPDOWN_STYLE_H3} {...attributes}>{children}</Heading>),
-    [H4]: () => (<Heading id={headingId} as="h4" style={DROPDOWN_STYLE_H4} {...attributes}>{children}</Heading>),
-    [H5]: () => (<Heading id={headingId} as="h5" style={DROPDOWN_STYLE_H5} {...attributes}>{children}</Heading>),
-    [H6]: () => (<Heading id={headingId} as="h6" style={DROPDOWN_STYLE_H6} {...attributes}>{children}</Heading>),
+    [PARAGRAPH]: () => (<p style={PARAGRAPH_STYLING} {...attributes}>{children}</p>),
+    [H1]: () => (<Heading id={headingId} as="h1" style={H1_STYLING} {...attributes}>{children}</Heading>),
+    [H2]: () => (<Heading id={headingId} as="h2" style={H2_STYLING} {...attributes}>{children}</Heading>),
+    [H3]: () => (<Heading id={headingId} as="h3" style={H3_STYLING} {...attributes}>{children}</Heading>),
+    [H4]: () => (<Heading id={headingId} as="h4" style={H4_STYLING} {...attributes}>{children}</Heading>),
+    [H5]: () => (<Heading id={headingId} as="h5" style={H5_STYLING} {...attributes}>{children}</Heading>),
+    [H6]: () => (<Heading id={headingId} as="h6" style={H6_STYLING} {...attributes}>{children}</Heading>),
     [SOFTBREAK]: () => (<span className={SOFTBREAK} {...attributes}> {children}</span>),
     [LINEBREAK]: () => (<span {...attributes}>
       <span contentEditable={false} style={{ userSelect: 'none' }}>

packages/ui-markdown-editor/src/index.js

@@ -214,7 +214,7 @@ export const MarkdownEditor = (props) => {
       <Editable
         id="ap-rich-text-editor"
         style={{
-          padding: '20px',
+          padding: '0px 20px 10px 20px',
           border: '1px solid grey',
           borderRadius: '4px',
           minWidth: '600px'

packages/ui-markdown-editor/src/utilities/constants.js

@@ -37,61 +37,89 @@ export const DROPDOWN_STYLE = {
   width: '100px',
 };
 
-export const DROPDOWN_STYLE_H1 = {
+export const PARAGRAPH_STYLING = {
+  margin: '1rem 0rem 0rem 0rem'
+}
+
+export const H1_STYLING = {
   fontSize: '25px',
   lineHeight: '23px',
+  margin: '2rem 0rem 1rem 0rem',
   fontWeight: MISC_CONSTANTS.DROPDOWN_WEIGHT,
   color: MISC_CONSTANTS.DROPDOWN_COLOR,
   textAlign: 'center',
 };
 
-export const DROPDOWN_STYLE_H2 = {
+export const H2_STYLING = {
   fontSize: '25px',
   lineHeight: '23px',
+  margin: '1.8rem 0rem 0.9rem 0rem',
   fontWeight: MISC_CONSTANTS.DROPDOWN_WEIGHT,
   color: MISC_CONSTANTS.DROPDOWN_COLOR,
 };
 
-export const DROPDOWN_STYLE_H3 = {
+export const H3_STYLING = {
   fontSize: '20px',
   lineHeight: '20px',
+  margin: '1.6rem 0rem 0.8rem 0rem',
   fontWeight: MISC_CONSTANTS.DROPDOWN_WEIGHT,
   color: MISC_CONSTANTS.DROPDOWN_COLOR,
 };
 
-export const DROPDOWN_STYLE_H4 = {
+export const H4_STYLING = {
   fontSize: '18px',
   lineHeight: '18px',
+  margin: '1.4rem 0rem 0.7rem 0rem',
   fontWeight: MISC_CONSTANTS.DROPDOWN_WEIGHT,
   color: MISC_CONSTANTS.DROPDOWN_COLOR,
 };
 
-export const DROPDOWN_STYLE_H5 = {
-  fontSize: '16x',
+export const H5_STYLING = {
+  fontSize: '16px',
   lineHeight: '16px',
+  margin: '1.2rem 0rem 0.6rem 0rem',
   fontWeight: MISC_CONSTANTS.DROPDOWN_WEIGHT,
   color: MISC_CONSTANTS.DROPDOWN_COLOR,
 };
 
-export const DROPDOWN_STYLE_H6 = {
+export const H6_STYLING = {
   fontSize: '14px',
   lineHeight: '14px',
-  fontWeight: MISC_CONSTANTS.DROPDOWN_WEIGHT,
   color: '#949CA2',
   letterSpacing: '0.3px',
-  // This margin is to override default styling in chrome
-  margin: '0.7rem 0rem 1rem 0rem',
   textTransform: 'uppercase',
+  margin: '1.2rem 0rem 0.5rem 0rem',
+  fontWeight: MISC_CONSTANTS.DROPDOWN_WEIGHT,
+};
+
+export const TOOLBAR_DROPDOWN_STYLE_H1 = {
+  ...H1_STYLING,
+  margin: 0
+};
+
+export const TOOLBAR_DROPDOWN_STYLE_H2 = {
+  ...H2_STYLING,
+  margin: 0
+};
+
+export const TOOLBAR_DROPDOWN_STYLE_H3 = {
+  ...H3_STYLING,
+  margin: 0
+};
+
+export const TOOLBAR_DROPDOWN_STYLE_H4 = {
+  ...H4_STYLING,
+  margin: 0
+};
+
+export const TOOLBAR_DROPDOWN_STYLE_H5 = {
+  ...H5_STYLING,
+  margin: 0
 };
 
-// Separate styling for the toolbar without margin to make it look normal
 export const TOOLBAR_DROPDOWN_STYLE_H6 = {
-  fontSize: '14px',
-  lineHeight: '14px',
-  fontWeight: MISC_CONSTANTS.DROPDOWN_WEIGHT,
-  color: '#949CA2',
-  letterSpacing: '0.3px',
-  textTransform: 'uppercase',
+  ...H6_STYLING,
+  margin: 0
 };
 
 export const POPUP_STYLE = {