From 666bd5f38e7bfe7954e8de5413c49fd288a98185 Mon Sep 17 00:00:00 2001 From: adarleyjrr <50996706+adarleyjrr@users.noreply.github.com> Date: Thu, 11 Mar 2021 14:37:42 -0500 Subject: [PATCH 1/3] fix: for WYSIWYGInput and HTMLParsedContent --- CHANGELOG.md | 5 +++ src/components/HTMLParsedContent/index.tsx | 3 ++ .../WYSIWYGInput/WYSIWYGInput.stories.tsx | 3 +- src/components/WYSIWYGInput/index.css | 17 ++++++-- src/utils/wysiwyg.tsx | 42 +++++++++---------- 5 files changed, 44 insertions(+), 26 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index e217367..f1e38c3 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -21,10 +21,15 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Changes +- Changed last example in the WYSIWYGInput docs to use the new HTMLParsedContent component to render the html generated by the input + ### Added ### Fixed +- Fixed a bug in the WYSIWYGInput where the margin between some kind of elements like paragraphs was not being applied in the editor +- Added the same sanitization rules from the WYSIWYGInput to the HTMLParsedContent + ## [1.4.3] - 2021-03-10 ### Fixed diff --git a/src/components/HTMLParsedContent/index.tsx b/src/components/HTMLParsedContent/index.tsx index 831f941..2a0db8f 100644 --- a/src/components/HTMLParsedContent/index.tsx +++ b/src/components/HTMLParsedContent/index.tsx @@ -2,6 +2,7 @@ import React from 'react'; import parse, { HTMLReactParserOptions } from 'html-react-parser'; import xss, { IFilterXSSOptions } from 'xss'; import classnames from 'classnames'; +import { editorSanitizeWhiteList } from '../../utils/wysiwyg'; export type HTMLParsedContentProps = React.DetailedHTMLProps, HTMLDivElement> & { /** @@ -50,6 +51,8 @@ export const HTMLParsedContent: React.FC = ({ } return undefined; }, + // Apply default whiteList + whiteList: editorSanitizeWhiteList, ...sanitizerOptions }) as string, parserOptions diff --git a/src/components/WYSIWYGInput/WYSIWYGInput.stories.tsx b/src/components/WYSIWYGInput/WYSIWYGInput.stories.tsx index 635faf7..f1660f8 100644 --- a/src/components/WYSIWYGInput/WYSIWYGInput.stories.tsx +++ b/src/components/WYSIWYGInput/WYSIWYGInput.stories.tsx @@ -3,6 +3,7 @@ import { Meta, Story } from '@storybook/react/types-6-0'; import React, { useRef, useState } from 'react'; import { WYSIWYGInput, WYSIWYGInputProps, WYSIWYGInputRef } from '.'; import { Button } from '../Button'; +import { HTMLParsedContent } from '../HTMLParsedContent'; export default { title: 'Components/Inputs/WYSIWYG', @@ -83,7 +84,7 @@ const HtmlTemplate: Story -
+
{htmlContent}
); diff --git a/src/components/WYSIWYGInput/index.css b/src/components/WYSIWYGInput/index.css index 9198b86..d7aa05a 100644 --- a/src/components/WYSIWYGInput/index.css +++ b/src/components/WYSIWYGInput/index.css @@ -95,6 +95,15 @@ .public-DraftEditor-content { /* The initial minimum height for the editor content */ min-height: 100px; + + div { + /* If not the first nor last editor element */ + >*:not(:first-child):not(:last-child) { + /* Adds a margin between editor elements */ + /* The prose class is not capable of applying margins to paragraph sections for intance */ + @apply my-5; + } + } } .public-DraftEditorPlaceholder-root { @@ -192,18 +201,18 @@ } .pui-wysiwyg-left { - @apply pui-wysiwyg-base text-left; + @apply pui-wysiwyg-base text-left my-4; } .pui-wysiwyg-center { - @apply pui-wysiwyg-base text-center; + @apply pui-wysiwyg-base text-center my-4; } .pui-wysiwyg-right { - @apply pui-wysiwyg-base text-right; + @apply pui-wysiwyg-base text-right my-4; } .pui-wysiwyg-justify { - @apply pui-wysiwyg-base text-justify; + @apply pui-wysiwyg-base text-justify my-4; } } diff --git a/src/utils/wysiwyg.tsx b/src/utils/wysiwyg.tsx index 100237e..e969cd9 100644 --- a/src/utils/wysiwyg.tsx +++ b/src/utils/wysiwyg.tsx @@ -1,5 +1,5 @@ import { EditorState } from 'draft-js'; -import xss from 'xss'; +import xss, { IWhiteList } from 'xss'; /** * A helper method to check whether this inline style should be active or not, from its type property @@ -109,28 +109,28 @@ export const getLinkIfAny = (editorState?: EditorState) => { return ''; }; +export const editorSanitizeWhiteList: IWhiteList = { + p: ['style'], + h1: ['style'], + h2: ['style'], + h3: ['style'], + h4: ['style'], + h5: ['style'], + h6: ['style'], + blockquote: [], + ul: [], + ol: [], + strong: [], + em: [], + ins: [], + li: [], + a: [], + br: [] +}; + /** * A helper method to sanitize the html content used by the rich text editor and prevent XSS vulnerability * * @param htmlData the html content */ -export const sanitizeHtml = (htmlData: string) => - xss(htmlData, { - whiteList: { - p: ['style'], - h1: ['style'], - h2: ['style'], - h3: ['style'], - h4: ['style'], - h5: ['style'], - h6: ['style'], - blockquote: [], - ul: [], - ol: [], - strong: [], - em: [], - ins: [], - li: [], - a: [] - } - }); +export const sanitizeHtml = (htmlData: string) => xss(htmlData, { whiteList: editorSanitizeWhiteList }); From e5d41efb2c9d953b9f09aa1cef59a45a2c5df89d Mon Sep 17 00:00:00 2001 From: adarleyjrr <50996706+adarleyjrr@users.noreply.github.com> Date: Thu, 11 Mar 2021 14:40:46 -0500 Subject: [PATCH 2/3] build: bumping version: 1.4.4 --- CHANGELOG.md | 10 ++++++++-- package.json | 2 +- 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index f1e38c3..12c2374 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -21,12 +21,18 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Changes -- Changed last example in the WYSIWYGInput docs to use the new HTMLParsedContent component to render the html generated by the input - ### Added ### Fixed +## [1.4.4] - 2021-03-11 + +### Changes + +- Changed last example in the WYSIWYGInput docs to use the new HTMLParsedContent component to render the html generated by the input + +### Fixed + - Fixed a bug in the WYSIWYGInput where the margin between some kind of elements like paragraphs was not being applied in the editor - Added the same sanitization rules from the WYSIWYGInput to the HTMLParsedContent diff --git a/package.json b/package.json index 85434a1..88846e4 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "@perimetre/ui", "description": "A component library made by @perimetre", - "version": "1.4.3", + "version": "1.4.4", "repository": { "type": "git", "url": "git+https://github.com/perimetre/ui.git" From 93a91313f9745ef2a478e43db44d642a2f5fd4e3 Mon Sep 17 00:00:00 2001 From: adarleyjrr <50996706+adarleyjrr@users.noreply.github.com> Date: Thu, 11 Mar 2021 14:47:02 -0500 Subject: [PATCH 3/3] fix: removed unused margin class --- src/components/WYSIWYGInput/index.css | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/WYSIWYGInput/index.css b/src/components/WYSIWYGInput/index.css index d7aa05a..265e645 100644 --- a/src/components/WYSIWYGInput/index.css +++ b/src/components/WYSIWYGInput/index.css @@ -201,18 +201,18 @@ } .pui-wysiwyg-left { - @apply pui-wysiwyg-base text-left my-4; + @apply pui-wysiwyg-base text-left; } .pui-wysiwyg-center { - @apply pui-wysiwyg-base text-center my-4; + @apply pui-wysiwyg-base text-center; } .pui-wysiwyg-right { - @apply pui-wysiwyg-base text-right my-4; + @apply pui-wysiwyg-base text-right; } .pui-wysiwyg-justify { - @apply pui-wysiwyg-base text-justify my-4; + @apply pui-wysiwyg-base text-justify; } }