Updated view multilevel headings and menu

src/common-elements/headers.ts

@@ -4,9 +4,12 @@ const headerFontSize = {
   1: '1.85714em',
   2: '1.57143em',
   3: '1.27em',
+  4: '1.17em',
+  5: '1.07em',
+  6: '1em',
 };
 
-export const headerCommonMixin = level => css`
+export const headerCommonMixin = (level) => css`
   font-family: ${({ theme }) => theme.typography.headings.fontFamily};
   font-weight: ${({ theme }) => theme.typography.headings.fontWeight};
   font-size: ${headerFontSize[level]};
@@ -27,13 +30,37 @@ export const H2 = styled.h2`
   ${extensionsHook('H2')};
 `;
 
-export const H3 = styled.h2`
+export const H3 = styled.h3`
   ${headerCommonMixin(3)};
   color: black;
 
   ${extensionsHook('H3')};
 `;
 
+export const H4 = styled.h4`
+  ${headerCommonMixin(4)};
+  color: black;
+
+  ${extensionsHook('H4')};
+`;
+
+export const H5 = styled.h5`
+  ${headerCommonMixin(5)};
+  color: black;
+
+  ${extensionsHook('H5')};
+`;
+
+export const H6 = styled.h6`
+  ${headerCommonMixin(6)};
+
+  ${extensionsHook('H6')};
+`;
+
+export const headings = () => {
+  return { H1, H2, H3, H4, H5, H6 };
+};
+
 export const RightPanelHeader = styled.h3`
   color: ${({ theme }) => theme.rightPanel.textColor};
 

src/components/ContentItems/ContentItems.tsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 
 import { ExternalDocumentation } from '../ExternalDocumentation/ExternalDocumentation';
 import { AdvancedMarkdown } from '../Markdown/AdvancedMarkdown';
-import { H1, H2, MiddlePanel, Row, Section, ShareLink } from '../../common-elements';
+import { headings, MiddlePanel, Row, Section, ShareLink } from '../../common-elements';
 import { ContentItemModel } from '../../services/MenuBuilder';
 import { GroupModel, OperationModel } from '../../services/models';
 import { Operation } from '../Operation/Operation';
@@ -17,7 +17,7 @@ export class ContentItems extends React.Component<{
     if (items.length === 0) {
       return null;
     }
-    return items.map(item => {
+    return items.map((item) => {
       return <ContentItem key={item.id} item={item} />;
     });
   }
@@ -61,22 +61,24 @@ export class ContentItem extends React.Component<ContentItemProps> {
   }
 }
 
-const middlePanelWrap = component => <MiddlePanel compact={true}>{component}</MiddlePanel>;
+const middlePanelWrap = (component) => <MiddlePanel compact={true}>{component}</MiddlePanel>;
 
 @observer
 export class SectionItem extends React.Component<ContentItemProps> {
   render() {
     const { name, description, externalDocs, level } = this.props.item as GroupModel;
 
-    const Header = level === 2 ? H2 : H1;
+    const Header = headings()[`H${level}`];
     return (
       <>
         <Row>
           <MiddlePanel compact={false}>
-            <Header>
-              <ShareLink to={this.props.item.id} />
-              {name}
-            </Header>
+            {Header && (
+              <Header>
+                <ShareLink to={this.props.item.id} />
+                {name}
+              </Header>
+            )}
           </MiddlePanel>
         </Row>
         <AdvancedMarkdown source={description || ''} htmlWrap={middlePanelWrap} />

src/components/SideMenu/styled.elements.ts

@@ -135,7 +135,7 @@ export const MenuItemLabel = styled.label.attrs((props: MenuItemLabelType) => ({
   margin: 0;
   padding: 12.5px ${props => props.theme.spacing.unit * 4}px;
   ${({ depth, type, theme }) =>
-    (type === 'section' && depth > 1 && 'padding-left: ' + theme.spacing.unit * 8 + 'px;') || ''}
+    (type === 'section' && depth > 1 && 'padding-left: ' + theme.spacing.unit * depth * 4 + 'px;') || ''}
   display: flex;
   justify-content: space-between;
   font-family: ${props => props.theme.typography.headings.fontFamily};

src/services/MarkdownRenderer.ts

@@ -120,7 +120,8 @@ export class MarkdownRenderer {
       prevHeading.description = rawText
         .substring(prevPos, currentPos)
         .replace(prevRegexp, '')
-        .trim();
+        .trim()
+        .replace(/#+$/gi, '');
 
       prevHeading = heading;
       prevRegexp = regexp;
@@ -130,13 +131,15 @@ export class MarkdownRenderer {
   }
 
   headingRule = (text: string, level: HeadingLevelType, raw: string, slugger: marked.Slugger) => {
-    const prevHeading = this.headingsMap[level - 1];
-    this.headingsMap[level] = this.saveHeading(
-      text,
-      level,
-      prevHeading && prevHeading.items,
-      prevHeading && prevHeading.id,
-    );
+    if (level <= 6) {
+      const prevHeading = this.headingsMap[level - 1];
+      this.headingsMap[level] = this.saveHeading(
+        text,
+        level,
+        prevHeading && prevHeading.items,
+        prevHeading && prevHeading.id,
+      );
+    }
 
     return this.originalHeadingRule(text, level, raw, slugger);
   };
@@ -144,9 +147,7 @@ export class MarkdownRenderer {
   renderMd(rawText: string, extractHeadings: boolean = false): string {
     const opts = extractHeadings ? { renderer: this.headingEnhanceRenderer } : undefined;
 
-    const res = marked(rawText.toString(), opts);
-
-    return res;
+    return marked(rawText.toString(), opts);
   }
 
   extractHeadings(rawText: string): MarkdownHeading[] {