fix #1160 fixing <Editor> and <HTMLRender>

packages/elements/src/components/HtmlRender/__stubs__/html.ts

@@ -24,7 +24,7 @@ export const htmlElements: Element[] = [
       },
       {
         type: 'text',
-        content: ' ...and I liked it. ',
+        content: '...and I liked it. ',
       },
     ],
   },

packages/elements/src/components/HtmlRender/__tests__/__snapshots__/index.tsx.snap

@@ -2,119 +2,85 @@
 
 exports[`HTMLRender should render match to snapshot 1`] = `
 <Component
-  className=""
+  className="html-render"
 >
-  
-        
   <div
     key="1"
     style={Object {}}
   >
-    
-          
     <b
       key="1"
       style={Object {}}
     >
       bold
     </b>
-    
-        
   </div>
-  
-        
   <div
     key="3"
     style={Object {}}
   >
-    
-          
     <i
       key="1"
       style={Object {}}
     >
       italic
     </i>
-    
-        
   </div>
-  
-        
   <div
     key="5"
     style={Object {}}
   >
-    
-          
     <u
       key="1"
       style={Object {}}
     >
       underline
     </u>
-    
-        
   </div>
-  
-        
   <Component
     key="7"
     style={Object {}}
   >
     heading
   </Component>
-  
-        
   <div
     key="9"
     style={Object {}}
   >
-    
-          
     <ul
       key="1"
       style={Object {}}
     >
-      
-            
       <li
         key="1"
         style={Object {}}
       >
         bullet points
       </li>
-      
-            
       <li
         key="3"
         style={Object {}}
       >
         bullet points
       </li>
-      
-          
     </ul>
-    
-        
   </div>
-  
-
 </Component>
 `;
 
 exports[`sortTags should match a snapshot and be of correct type for the returned component from domTag a 1`] = `
 <a
-  id="some-id"
   key="0"
+  rel="noopener"
   style={Object {}}
+  target="_blank"
 >
   Test Text
 </a>
 `;
 
 exports[`sortTags should match a snapshot and be of correct type for the returned component from domTag b 1`] = `
 <b
-  id="some-id"
   key="0"
   style={Object {}}
 >
@@ -124,7 +90,6 @@ exports[`sortTags should match a snapshot and be of correct type for the returne
 
 exports[`sortTags should match a snapshot and be of correct type for the returned component from domTag blockquote 1`] = `
 <blockquote
-  id="some-id"
   key="0"
   style={Object {}}
 >
@@ -135,7 +100,7 @@ exports[`sortTags should match a snapshot and be of correct type for the returne
 exports[`sortTags should match a snapshot and be of correct type for the returned component from domTag h1 1`] = `
 <h4
   className="title is-4  "
-  id="some-id"
+  id=""
 >
   Test Text
 </h4>
@@ -144,23 +109,21 @@ exports[`sortTags should match a snapshot and be of correct type for the returne
 exports[`sortTags should match a snapshot and be of correct type for the returned component from domTag h2 1`] = `
 <h5
   className="title is-5  "
-  id="some-id"
+  id=""
 >
   Test Text
 </h5>
 `;
 
 exports[`sortTags should match a snapshot and be of correct type for the returned component from domTag hr 1`] = `
 <hr
-  id="some-id"
   key="0"
   style={Object {}}
 />
 `;
 
 exports[`sortTags should match a snapshot and be of correct type for the returned component from domTag i 1`] = `
 <i
-  id="some-id"
   key="0"
   style={Object {}}
 >
@@ -170,7 +133,6 @@ exports[`sortTags should match a snapshot and be of correct type for the returne
 
 exports[`sortTags should match a snapshot and be of correct type for the returned component from domTag li 1`] = `
 <li
-  id="some-id"
   key="0"
   style={Object {}}
 >
@@ -180,7 +142,6 @@ exports[`sortTags should match a snapshot and be of correct type for the returne
 
 exports[`sortTags should match a snapshot and be of correct type for the returned component from domTag ol 1`] = `
 <ol
-  id="some-id"
   key="0"
   style={Object {}}
 >
@@ -190,7 +151,6 @@ exports[`sortTags should match a snapshot and be of correct type for the returne
 
 exports[`sortTags should match a snapshot and be of correct type for the returned component from domTag p 1`] = `
 <p
-  id="some-id"
   key="0"
   style={Object {}}
 >
@@ -200,7 +160,6 @@ exports[`sortTags should match a snapshot and be of correct type for the returne
 
 exports[`sortTags should match a snapshot and be of correct type for the returned component from domTag pre 1`] = `
 <pre
-  id="some-id"
   key="0"
   style={Object {}}
 >
@@ -210,7 +169,6 @@ exports[`sortTags should match a snapshot and be of correct type for the returne
 
 exports[`sortTags should match a snapshot and be of correct type for the returned component from domTag u 1`] = `
 <u
-  id="some-id"
   key="0"
   style={Object {}}
 >
@@ -220,7 +178,6 @@ exports[`sortTags should match a snapshot and be of correct type for the returne
 
 exports[`sortTags should match a snapshot and be of correct type for the returned component from domTag ul 1`] = `
 <ul
-  id="some-id"
   key="0"
   style={Object {}}
 >

packages/elements/src/components/HtmlRender/__tests__/index.tsx

@@ -122,11 +122,11 @@ describe('getChildren', () => {
 
 describe('getAttributes', () => {
   it('should get the tag attributes if there are any, kill any styles add an index as key', () => {
-    const attributes = {
-      style: 'width: 100px',
-      id: 'my-id',
-      src: 'some-src',
-    }
+    const attributes = [
+      { key: 'id', value: 'my-id' },
+      { key: 'src', value: 'some-src' },
+      { key: 'style', value: 'width: "10px"' },
+    ]
     const index = 0
     const expected = {
       id: 'my-id',

packages/elements/src/components/HtmlRender/html-render.stories.tsx

@@ -13,7 +13,7 @@ const html = `
     <div><u>underline</u></div>
     <pre>pre tag</pre>
     <strike>strike</strike>
-    <a href="http://google.com">Link</a>
+    <p><a href="http://google.com">Link</a></p>
     <div>
         <ul>
             <li>bullet points</li>

packages/elements/src/components/HtmlRender/index.tsx

@@ -12,7 +12,7 @@ export interface HTMLRenderProps {
 export const HTMLRender: React.SFC<HTMLRenderProps> = ({
   html,
   diffing = false,
-  className = 'html-editor',
+  className = 'html-render',
 }: HTMLRenderProps) => {
   const jsonElements = parse(html)
   return <Content className={className}>{renderer(jsonElements, diffing)}</Content>

packages/elements/src/components/HtmlRender/utils.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { H4, H5 } from '../Typography'
+import { H4, H5, H6 } from '../Typography'
 
 export interface Element {
   type: string
@@ -25,7 +25,7 @@ const getChildren = (domTag: Element, diffing: boolean) => {
 const getAttributes = (domTag: Element, index: number) => {
   const attributes = domTag.attributes || []
   // convert to react-compatible props
-  const reactPropsAttributes = attributes.reduce(
+  const reactPropsAttributes = Array.from(attributes as { [key: string]: any }[]).reduce(
     (acc, { key, value }) => ({
       ...acc,
       [key]: value,
@@ -46,12 +46,9 @@ const sortTags = (domTag: Element, index: number, diffing: boolean) => {
       return <p {...attributes}>{children}</p>
     case 'a':
       return (
-        <div className="a-wrapper">
-          <div className="tool-tip-href">{attributes.href}</div>
-          <a target="_blank" rel="noopener" {...attributes}>
-            {children}
-          </a>
-        </div>
+        <a target="_blank" rel="noopener" {...attributes}>
+          {children}
+        </a>
       )
     case 'b':
       return <b {...attributes}>{children}</b>
@@ -67,6 +64,8 @@ const sortTags = (domTag: Element, index: number, diffing: boolean) => {
       return <H4 {...attributes}>{children}</H4>
     case 'h2':
       return <H5 {...attributes}>{children}</H5>
+    case 'h6':
+      return <H6 {...attributes}>{children}</H6>
     case 'i':
       return <i {...attributes}>{children}</i>
     case 'strike':

packages/elements/src/styles/components/html-render.scss

@@ -0,0 +1,20 @@
+@import '../base/colors.scss';
+
+.html-render {
+  & a {
+    color: $reapit-mid-blue;
+    font-weight: bold;
+  }
+  & ul,
+  & ol {
+    margin-top: 0;
+    margin-left: 0;
+    list-style-position: inside;
+    & li div {
+      display: inline-block;
+    }
+  }
+  & p {
+    margin: 1rem 0;
+  }
+}

packages/elements/src/styles/index.scss

@@ -32,4 +32,4 @@
 @import './components/notification.scss';
 @import './components/upload-progress.scss';
 @import './components/dropdown-select.scss';
-@import './components/html-editor.scss';
+@import './components/html-render.scss';

packages/elements/src/styles/vendor/pell.scss

@@ -34,6 +34,15 @@ $pell-content-padding: 10px !default;
     box-shadow: 0 0 0 0.125em rgba(35, 164, 222, 0.25);
   }
 
+  p {
+    margin: 1rem 0;
+  }
+
+  a {
+    color: $reapit-mid-blue;
+    font-weight: bold;
+  }
+
   h1 {
     display: block;
     font-size: 2em;
@@ -54,6 +63,16 @@ $pell-content-padding: 10px !default;
     font-weight: bold;
   }
 
+  h6 {
+    display: block;
+    font-size: 1em;
+    margin-block-start: 0.83em;
+    margin-block-end: 0.83em;
+    margin-inline-start: 0px;
+    margin-inline-end: 0px;
+    font-weight: bold;
+  }
+
   ul {
     list-style: disc outside none;
     padding-inline-start: 25px;

packages/marketplace/src/components/pages/developer-submit-app.tsx

@@ -309,7 +309,6 @@ export const handleDeclineTerms = (setIsAgreedTerms, setTermModalIsOpen) => () =
  * and validate all fields
  */
 export const handleBeforeSubmit = (validateFunction, setIsSubmitModalOpen) => (values: CustomCreateAppModel) => {
-  console.log(values)
   const firstSubmitCookie = getCookieString(COOKIE_FIRST_SUBMIT)
   if (!firstSubmitCookie) {
     setIsSubmitModalOpen(true)