Merge pull request #24 from perimetre/1.4.3

1.4.3

CHANGELOG.md

@@ -25,6 +25,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Fixed
 
+## [1.4.3] - 2021-03-10
+
+### Fixed
+
+- Fixed a bug where the WYSIWYGInput styles were being all filtered out
+- Fixed a bug where the WYSIWYGInput inside a form was making the form submit when clicked on the styles or link buttons
+
 ## [1.4.2] - 2021-03-08
 
 ### Fixed

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@perimetre/ui",
   "description": "A component library made by @perimetre",
-  "version": "1.4.2",
+  "version": "1.4.3",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/perimetre/ui.git"

src/components/Tooltip/index.tsx

@@ -44,7 +44,11 @@ export const Tooltip: React.FC<TooltipProps> = forwardRef<Element, TooltipProps>
       )}
     >
       {/* For correct accessibility reasons, it's recommended that the tooltip element is a button */}
-      <button {...buttonProps} className={classnames('pui-btn-icon flex items-center', buttonProps?.className)}>
+      <button
+        type="button"
+        {...buttonProps}
+        className={classnames('pui-btn-icon flex items-center', buttonProps?.className)}
+      >
         {children}
       </button>
     </Tippy>

src/components/WYSIWYGInput/index.tsx

@@ -1,5 +1,4 @@
 import classnames from 'classnames';
-import xss from 'xss';
 import {
   CompositeDecorator,
   ContentState,
@@ -14,7 +13,7 @@ import {
 } from 'draft-js';
 import draftToHtml from 'draftjs-to-html';
 import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
-import { toggleBlockData } from '../../utils/wysiwyg';
+import { sanitizeHtml, toggleBlockData } from '../../utils/wysiwyg';
 import { blockStyleFn, getBlockDataByName } from './Blocks';
 import { linkDecorator } from './Decorators/Link';
 import { Toolbar } from './Toolbar';
@@ -175,7 +174,7 @@ export const WYSIWYGInput = forwardRef<WYSIWYGInputRef, WYSIWYGInputProps>(
       if (onHtmlChangeSlow) {
         // Ref(HTML part at the end): https://jpuri.github.io/react-draft-wysiwyg/#/docs
         const htmlData = draftToHtml(convertToRaw(editorState.getCurrentContent()));
-        onHtmlChangeSlow(xss(htmlData));
+        onHtmlChangeSlow(sanitizeHtml(htmlData));
       }
       // If the editor state changes
     }, [editorState, onHtmlChangeSlow]);
@@ -189,7 +188,7 @@ export const WYSIWYGInput = forwardRef<WYSIWYGInputRef, WYSIWYGInputProps>(
         const htmlToDraft = (await import('html-to-draftjs')).default;
 
         // Ref(HTML part at the end): https://jpuri.github.io/react-draft-wysiwyg/#/docs
-        const contentBlock = htmlToDraft(defaultHtmlValue ? xss(defaultHtmlValue) : '');
+        const contentBlock = htmlToDraft(defaultHtmlValue ? sanitizeHtml(defaultHtmlValue) : '');
 
         setEditorState(
           EditorState.createWithContent(
@@ -215,7 +214,7 @@ export const WYSIWYGInput = forwardRef<WYSIWYGInputRef, WYSIWYGInputProps>(
       getSanitizedHtml: () => {
         // Ref(HTML part at the end): https://jpuri.github.io/react-draft-wysiwyg/#/docs
         const htmlData = draftToHtml(convertToRaw(editorState.getCurrentContent()));
-        return xss(htmlData);
+        return sanitizeHtml(htmlData);
       },
       /**
        * Returns a plain text string from the current editor state

src/utils/wysiwyg.tsx

@@ -1,4 +1,5 @@
 import { EditorState } from 'draft-js';
+import xss from 'xss';
 
 /**
  * A helper method to check whether this inline style should be active or not, from its type property
@@ -107,3 +108,29 @@ export const getLinkIfAny = (editorState?: EditorState) => {
   // If nothing was returning up until here, there is no link
   return '';
 };
+
+/**
+ * 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: []
+    }
+  });