fix #1160 WIP fixing <Editor> and <HTMLRender>

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

@@ -5,13 +5,15 @@ import { HTMLRender } from '.'
 const html = `
     <h1>heading h1</h1>
     <h2>heading h2</h2>
+    <b>Bold with entities&nbsp;</b>
     <div>
         <b>bold</b>
     </div>
     <div><i>italic</i></div>
     <div><u>underline</u></div>
     <pre>pre tag</pre>
     <strike>strike</strike>
+    <a href="http://google.com">Link</a>
     <div>
         <ul>
             <li>bullet points</li>

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

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

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

@@ -10,7 +10,10 @@ export interface Element {
 }
 
 const sortContentType = (domItem: Element, index: number, diffing: boolean) => {
-  return domItem.type === 'text' ? domItem.content || null : rendererModule.sortTags(domItem, index, diffing)
+  // using DOMParse to parse HTML entities like  
+  return domItem.type === 'text'
+    ? new DOMParser().parseFromString(domItem.content || '', 'text/html').documentElement.textContent || null
+    : rendererModule.sortTags(domItem, index, diffing)
 }
 
 const getChildren = (domTag: Element, diffing: boolean) => {
@@ -20,8 +23,16 @@ const getChildren = (domTag: Element, diffing: boolean) => {
 }
 
 const getAttributes = (domTag: Element, index: number) => {
-  const attributes = domTag.attributes || {}
-  return { ...attributes, style: {}, key: index }
+  const attributes = domTag.attributes || []
+  // convert to react-compatible props
+  const reactPropsAttributes = attributes.reduce(
+    (acc, { key, value }) => ({
+      ...acc,
+      [key]: value,
+    }),
+    {},
+  )
+  return { ...reactPropsAttributes, key: index, style: {} }
 }
 
 const sortTags = (domTag: Element, index: number, diffing: boolean) => {
@@ -34,7 +45,14 @@ const sortTags = (domTag: Element, index: number, diffing: boolean) => {
     case 'p':
       return <p {...attributes}>{children}</p>
     case 'a':
-      return <a {...attributes}>{children}</a>
+      return (
+        <div className="a-wrapper">
+          <div className="tool-tip-href">{attributes.href}</div>
+          <a target="_blank" rel="noopener" {...attributes}>
+            {children}
+          </a>
+        </div>
+      )
     case 'b':
       return <b {...attributes}>{children}</b>
     case 'u':

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

@@ -0,0 +1,25 @@
+@import '../base/colors.scss';
+
+.html-editor {
+  & .a-wrapper {
+    display: inline-block;
+    position: relative;
+    & > a {
+      color: $reapit-mid-blue;
+    }
+    & > .tool-tip-href {
+      display: none;
+      position: absolute;
+      top: -2rem;
+      background: $white;
+      color: $black;
+      padding: 0.2rem;
+    }
+    &:hover > .tool-tip-href {
+      display: block;
+    }
+  }
+  & ul {
+    list-style-position: inside;
+  }
+}

packages/elements/src/styles/index.scss

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

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

@@ -14,6 +14,7 @@ $pell-content-padding: 10px !default;
   border-radius: 0;
   overflow: hidden;
   color: $black;
+  height: 180px;
 
   &--is-danger {
     border: 1px solid $reapit-red;
@@ -24,6 +25,8 @@ $pell-content-padding: 10px !default;
   outline: none;
   padding: $pell-content-padding;
   min-height: $pell-content-height;
+  height: 75%;
+  overflow-y: scroll;
   box-sizing: border-box;
   background-color: $white;
 
@@ -66,6 +69,8 @@ $pell-content-padding: 10px !default;
   background-color: $white;
   border-bottom: 1px solid $grey;
   padding-left: 8px;
+  min-height: $pell-button-height;
+  height: 25%;
 }
 
 .pell-button {

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

@@ -309,6 +309,7 @@ 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)

packages/marketplace/src/components/ui/diff-render-html.tsx

@@ -8,7 +8,6 @@ export interface DiffRenderHTMLProps {
 }
 
 const DiffRenderHTML = ({ currentString, changedString }: DiffRenderHTMLProps) => {
-  console.log(currentString, changedString)
   const isDiff = currentString !== changedString
   return (
     <div className={styles.container}>

packages/marketplace/src/styles/blocks/diff-render-html.scss

@@ -8,6 +8,16 @@
   color: $black;
   display: flex;
   align-items: center;
+
+  & ul,
+  & ol {
+    margin-top: 0;
+    margin-left: 0;
+    list-style-position: inside;
+    & li div {
+      display: inline-block;
+    }
+  }
 }
 
 .green {