Merge pull request #25 from perimetre/1.4.4

1.4.4

CHANGELOG.md

@@ -25,6 +25,17 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### 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
+
 ## [1.4.3] - 2021-03-10
 
 ### Fixed

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"

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<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
   /**
@@ -50,6 +51,8 @@ export const HTMLParsedContent: React.FC<HTMLParsedContentProps> = ({
             }
             return undefined;
           },
+          // Apply default whiteList
+          whiteList: editorSanitizeWhiteList,
           ...sanitizerOptions
         }) as string,
         parserOptions

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<WYSIWYGInputProps & { content?: string; className?: st
       {/* Clear the onHtmlChangeSlow event that storybook provides automatically because it's slow */}
       <WYSIWYGInput ref={inputRef} {...props} onHtmlChangeSlow={undefined} />
       <Button onClick={() => setHtmlContent(inputRef?.current?.getSanitizedHtml() || '')}>Get HTML</Button>
-      <div className="min-w-full max-w-full mt-4 prose" dangerouslySetInnerHTML={{ __html: htmlContent }} />
+      <HTMLParsedContent className="min-w-full max-w-full mt-4" content={htmlContent} />
       <div className="max-w-full mb-4 border-t border-solid border-gray-300">{htmlContent}</div>
     </div>
   );

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 {

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 });