From ecac6a3bcc242fc8d273d5e24823fe0c9ef688a5 Mon Sep 17 00:00:00 2001 From: Cuong Vu Date: Fri, 8 May 2020 16:53:33 +0700 Subject: [PATCH] fix #1160 WIP fixing and --- .../HtmlRender/html-render.stories.tsx | 2 ++ .../src/components/HtmlRender/index.tsx | 6 ++++- .../src/components/HtmlRender/utils.tsx | 26 ++++++++++++++++--- .../src/styles/components/html-editor.scss | 25 ++++++++++++++++++ packages/elements/src/styles/index.scss | 1 + packages/elements/src/styles/vendor/pell.scss | 5 ++++ .../components/pages/developer-submit-app.tsx | 1 + .../src/components/ui/diff-render-html.tsx | 1 - .../src/styles/blocks/diff-render-html.scss | 10 +++++++ 9 files changed, 71 insertions(+), 6 deletions(-) create mode 100644 packages/elements/src/styles/components/html-editor.scss diff --git a/packages/elements/src/components/HtmlRender/html-render.stories.tsx b/packages/elements/src/components/HtmlRender/html-render.stories.tsx index 92c40bcac3..6ddc36b75b 100644 --- a/packages/elements/src/components/HtmlRender/html-render.stories.tsx +++ b/packages/elements/src/components/HtmlRender/html-render.stories.tsx @@ -5,6 +5,7 @@ import { HTMLRender } from '.' const html = `

heading h1

heading h2

+ Bold with entities 
bold
@@ -12,6 +13,7 @@ const html = `
underline
pre tag
strike + Link
  • bullet points
    • diff --git a/packages/elements/src/components/HtmlRender/index.tsx b/packages/elements/src/components/HtmlRender/index.tsx index f864cf7b7f..ccdf563bfc 100644 --- a/packages/elements/src/components/HtmlRender/index.tsx +++ b/packages/elements/src/components/HtmlRender/index.tsx @@ -9,7 +9,11 @@ export interface HTMLRenderProps { className?: string } -export const HTMLRender: React.SFC = ({ html, diffing = false, className = '' }: HTMLRenderProps) => { +export const HTMLRender: React.SFC = ({ + html, + diffing = false, + className = 'html-editor', +}: HTMLRenderProps) => { const jsonElements = parse(html) return {renderer(jsonElements, diffing)} } diff --git a/packages/elements/src/components/HtmlRender/utils.tsx b/packages/elements/src/components/HtmlRender/utils.tsx index ce15a4887b..906166e0e7 100644 --- a/packages/elements/src/components/HtmlRender/utils.tsx +++ b/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

    {children}

    case 'a': - return {children} + return ( +
    +
    {attributes.href}
    + + {children} + +
    + ) case 'b': return {children} case 'u': diff --git a/packages/elements/src/styles/components/html-editor.scss b/packages/elements/src/styles/components/html-editor.scss new file mode 100644 index 0000000000..01afd9e753 --- /dev/null +++ b/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; + } +} diff --git a/packages/elements/src/styles/index.scss b/packages/elements/src/styles/index.scss index 44c31a0e4e..3aab57301b 100644 --- a/packages/elements/src/styles/index.scss +++ b/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'; diff --git a/packages/elements/src/styles/vendor/pell.scss b/packages/elements/src/styles/vendor/pell.scss index 6278003435..098ca0329f 100644 --- a/packages/elements/src/styles/vendor/pell.scss +++ b/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 { diff --git a/packages/marketplace/src/components/pages/developer-submit-app.tsx b/packages/marketplace/src/components/pages/developer-submit-app.tsx index e0cde0833c..222bacf937 100644 --- a/packages/marketplace/src/components/pages/developer-submit-app.tsx +++ b/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) diff --git a/packages/marketplace/src/components/ui/diff-render-html.tsx b/packages/marketplace/src/components/ui/diff-render-html.tsx index 4c21ea15dc..6695ac1c00 100644 --- a/packages/marketplace/src/components/ui/diff-render-html.tsx +++ b/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 (
    diff --git a/packages/marketplace/src/styles/blocks/diff-render-html.scss b/packages/marketplace/src/styles/blocks/diff-render-html.scss index eb45616e32..68d06b8ddb 100644 --- a/packages/marketplace/src/styles/blocks/diff-render-html.scss +++ b/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 {