How to use the dompurify function in dompurify

// test api keys, will be replaced with environment vars when time comes to productionise
    this.contentfulClient = contentful.createClient({
      space: process.env.CONTENTFUL_SPACE,
      accessToken: process.env.CONTENTFUL_TOKEN,
    });

    marked.setOptions({
      highlight: (code) => { return highlightjs.highlightAuto(code).value; },
    });
    const window = jsdom.jsdom('', {
      features: {
        FetchExternalResources: false,
        ProcessExternalResources: false,
      },
    }).defaultView;
    this.DOMPurify = createDOMPurify(window);

    this.preloadedState = {
      activePage: {
        page: {
          fields: {
            name: null,
            route: null,
          },
        },
        route: null,
        title: null,
        isLoading: true,
        hasErrored: false,
      },
      utils: {
        drawerOpen: false,

export const countHandler = ({ mongo, i18n }: CountOptions): RequestHandler => {
  const window = new JSDOM("").window;
  const DOMPurify = createDOMPurify(window);

  return async (req, res, next) => {
    try {
      // Tenant is guaranteed at this point.
      const coral = req.coral!;
      const tenant = coral.tenant!;

      const story = await find(mongo, tenant, {
        id: req.query.id,
        url: req.query.url,
      });
      if (!story) {
        throw new Error("Story not found");
      }

      const count = calculateTotalPublishedCommentCount(

* All rights reserved.
 *
 * This source code is licensed under the BSD-style license found in the
 * LICENSE file in the root directory of this source tree. An additional grant
 * of patent rights can be found in the PATENTS file in the same directory.
 *
 * @flow
 * @format
 */

import invariant from 'assert';
import * as React from 'react';
import {shell} from 'electron';
import createDOMPurify from 'dompurify';

const domPurify = createDOMPurify();

type DiagnosticsMessageTextProps = {
  preserveNewlines?: boolean, // defaults to true
  message: {
    html?: string,
    text?: string,
  },
};

type UrlOrText =
  | {
      isUrl: true,
      url: string,
    }
  | {
      isUrl: false,

import Autolinker from 'autolinker';
import createDOMPurify from 'dompurify';
import Twemoji from 'twemoji';
import { NOTIF_TYPES } from '../consts/types';
import EmojiData from './emojis.json';

const DOMPurify = createDOMPurify(window);


export const getRandomInt = () => Math.floor(Math.random() * ((3000 - 0) + 1));

export const getUID = () => 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
    let r = Math.random() * 16 | 0, //eslint-disable-line
      v = c == 'x' ? r : (r & 0x3 | 0x8); //eslint-disable-line
  return v.toString(16);
});

// eslint-disable-next-line
export const escapeRegExp = str => str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");

export const getNotifText = (type, username, isCollab = false) => {
  switch (type) {
    case NOTIF_TYPES.COMMENT.MENTION:

import styled from 'styled-components';
import tw from 'tailwind.macro';
import { createFragmentContainer, graphql } from 'react-relay';
import Head from 'next/head';
import Link from 'next/link';
import format from 'date-fns/format';
import { Value } from 'slate';
import Html from 'slate-html-serializer';
import DOMPurify from 'dompurify';
import { TiSocialFacebook, TiSocialTwitter } from 'react-icons/ti';
import { config } from '../../config';
import { PublicStory_story } from './__generated__/PublicStory_story.graphql';
import { getProfileRoute } from '../../utils/routes';
import { Container } from '../../components';

let dompurify = DOMPurify();

// During ssr we need jsdom to make dompurify work
if (typeof window === 'undefined') {
  /* eslint-disable @typescript-eslint/no-var-requires */
  const { JSDOM } = require('jsdom');
  const { window } = new JSDOM('');
  dompurify = DOMPurify(window);
}

const StoryContainer = styled(Container)`
  ${tw`py-8`};
  max-width: 768px;

  @media (min-width: ${config.breakpoints.sm}px) {
    ${tw`py-16`};
  }

import createDOMPurify from 'dompurify';

import ActionPipelineManager from './action-pipeline';
import {GitError} from './git-shell-out-strategy';
import {deleteFileOrFolder, getCommitMessagePath, getCommitMessageEditors, destroyFilePatchPaneItems} from './helpers';

const DOMPurify = createDOMPurify();

// Note: Middleware that catches errors should re-throw the errors so that they propogate
// and other middleware in the pipeline can be made aware of the errors.
// Ultimately, the views are responsible for catching the errors and handling them accordingly

export default function({confirm, notificationManager, workspace}) {
  const pipelineManager = new ActionPipelineManager({
    actionNames: ['PUSH', 'PULL', 'FETCH', 'COMMIT', 'CHECKOUT'],
  });

  const pushPipeline = pipelineManager.getPipeline(pipelineManager.actionKeys.PUSH);
  pushPipeline.addMiddleware('confirm-force-push', async (next, repository, branchName, options) => {
    if (options.force) {
      const choice = confirm({
        message: 'Are you sure you want to force push?',
        detailedMessage: 'This operation could result in losing data on the remote.',

import validator from 'validator'
import { JSDOM } from 'jsdom'
import DOMPurify from 'dompurify'
const { window } = new JSDOM('')
const domPurify = DOMPurify(window)

export class TextUtils {

  public static sanitize (unsafeText: string): string {
    return domPurify.sanitize(unsafeText);
  }

  public static validateWebURL (url: string): boolean {
    return validator.isURL(url);
  }

  public static validateEmailAddress (email: string) {
    var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    return re.test(String(email).toLowerCase());
  }

import createDOMPurify from 'dompurify';

import universalWindow from 'core/window';

export default createDOMPurify(universalWindow);

import PropTypes from 'prop-types';
import React, { Component } from 'react';
import AutoSave from '../components/auto-save';
import handleInputChange from '../lib/handle-input-change';
import createDOMPurify from 'dompurify';

const DOMPurify = createDOMPurify(window);

class DisplayNameSlugEditor extends Component {
  constructor(props) {
    super(props);
    this.getResourceUrl = this.getResourceUrl.bind(this);
    this.undoNameChange = this.undoNameChange.bind(this);
    this.warnURLChange = this.warnURLChange.bind(this);
    this.state = {
      currentSlug: props.resource.slug,
      currentName: props.resource.display_name,
      url: null,
    };
  }

  componentDidMount() {
    this.getResourceUrl();

export const sanitize = (html, options) => {
  const DOMPurify = createDOMPurify(window)
  return DOMPurify.sanitize(escapeInBlockHtml(html), options)
}