Markdown Previewer - Using DOMPurify causes Test #6 to fail

skyeaoki · June 17, 2020, 8:22pm

I can see the Markdown rendered properly in my preview, but this test reports as failing:

“6. When my markdown previewer first loads, the default markdown in the #editor field should be rendered as HTML in the #preview element”

I have a react application using the marked library recommended in the project instructions. The marked library documentation recommends DOMPurify to sanitize the input. When I remove my DOMPurify call (in the handler function for editor changes) and insert the raw input it passes test #6. Curiously, the test is about when the page first loads and the function which calls DOMPurify isn’t even triggered until after the user starts updating the editor? Again, everything is displaying properly, but the test won’t pass unless I remove the sanitization.

github.com

skyeaoki/markdown-previewer/blob/master/src/App.js

import React, { Component } from 'react';
import './App.css';
import Editor from './components/Editor';
import Preview from './components/Preview';
import defaultText from './utils/defaultText';
import marked from 'marked';
import DOMPurify from 'dompurify';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      editor: defaultText,
      preview: marked(defaultText)
    };
  }

  onEditorChange = (event) => {
    // First convert user input to markdown
    let markdown = marked(event.target.value);

This file has been truncated. show original