How to use the dompurify.addHook function in dompurify

}
});

const ISOTOPE_WHITELISTED_URL = '#IsotopeEmbedded';

// 1/2 Replaces "insecure" blob: uris before sanitation for controlled ones
sanitize.addHook('uponSanitizeAttribute', (node, hookEvent) => {
  if (node.nodeName === 'IMG' && hookEvent.attrName === 'src' && hookEvent.attrValue.indexOf('blob:') === 0) {
    node.src = `${node.src.substring(5)}${ISOTOPE_WHITELISTED_URL}`;
    hookEvent.attrValue = node.src;
  }
});

// 2/2 Replaces previously parsed "insecure" urls to original ones -> Whitelist effect
// Hides cid: images that are being loaded
sanitize.addHook('afterSanitizeAttributes', node => {
  if (node.nodeName === 'IMG' && node.src && node.src.indexOf(ISOTOPE_WHITELISTED_URL) > -1) {
    node.src = `blob:${node.src.replace(ISOTOPE_WHITELISTED_URL, '')}`;
  }
  if (node.nodeName === 'IMG' && node.src && node.src.indexOf('cid:') === 0) {
    const spinner = document.createElement('div');
    spinner.innerHTML = ReactDOMServer.renderToStaticMarkup(renderSpinner());
    spinner.getElementsByClassName('canvas')[0].style.height = node.height ? node.height : '22px';
    node.parentElement.replaceChild(spinner, node);
  }
});
export default sanitize;

export function domPurifyOpenLinksInNewWindow() {
  // Add a hook to make all DOMPurify'd links open a new window
  // See: https://github.com/cure53/DOMPurify/tree/master/demos#hook-to-open-all-links-in-a-new-window-link
  DOMPurify.addHook('afterSanitizeAttributes', function(node: any) {
    // set all elements owning target to target=_blank
    if ('target' in node) {
      node.setAttribute('target', '_blank');
      // prevent https://www.owasp.org/index.php/Reverse_Tabnabbing
      node.setAttribute('rel', 'noopener noreferrer');
    }
    // set non-HTML/MathML links to xlink:show=new
    if (!node.hasAttribute('target') && (node.hasAttribute('xlink:href') || node.hasAttribute('href'))) {
      node.setAttribute('xlink:show', 'new');
    }
    return node;
  });
}

*
 * <svg viewBox="0 0 100 100">
 *   
 * </svg>
 *
 * @param {Object} node - Node to sanitize
 */
const sanitizeSvgIcon = (node) =&gt; {
  removeUnsafeHref(node, 'href');

  // Note: `xlink:href` is deprecated, but still in use
  // https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/xlink:href
  removeUnsafeHref(node, 'xlink:href');
};

addHook('afterSanitizeAttributes', (node) =&gt; {
  if (node.tagName.toLowerCase() === 'use') {
    sanitizeSvgIcon(node);
  }
});

export const sanitize = (val, config = defaultConfig) =&gt; dompurifySanitize(val, config);

import DOMPurify from 'dompurify';

export const HtmlPreview = ({html, className}) => (
    <div>
);

HtmlPreview.propTypes = {
    html: PropTypes.string.isRequired,
    className: PropTypes.string,
};

// Make sure that links are opened in a new tab
DOMPurify.addHook('afterSanitizeAttributes', (node) =&gt; {
    node.setAttribute('target', '_blank');
});
</div>

import React from "react"
import PropTypes from "prop-types"
import Remarkable from "remarkable"
import DomPurify from "dompurify"
import cx from "classnames"

DomPurify.addHook("beforeSanitizeElements", function (current, ) {
  // Attach safe `rel` values to all elements that contain an `href`,
  // i.e. all anchors that are links.
  // We _could_ just look for elements that have a non-self target,
  // but applying it more broadly shouldn't hurt anything, and is safer.
  if (current.href) {
    current.setAttribute("rel", "noopener noreferrer")
  }
  return current
})

function Markdown({ source, className = "" }) {
    if (typeof source !== "string") {
      return null
    }

    const md = new Remarkable({

created() {
    //open link in a new tab
    const renderer = new marked.Renderer();
    renderer.link = function(href, title, text) {
      var link = marked.Renderer.prototype.link.call(this, href, title, text);
      return link.replace(" {

static addMiddleware(middlewareName, middlewareFn = () => {}) {
        if (!middlewareNames.includes(middlewareName)) {
            Shopware.Utils.debug.warn(
                'Sanitizer',
                `No middleware found for name "${middlewareName}", 
                the following are available: ${middlewareNames.join(', ')}`
            );
            return false;
        }

        domPurify.addHook(middlewareName, middlewareFn);
        return true;
    }

constructor(
        @Inject(DOMPURIFY_CONFIG)
        private readonly config: NgDompurifyConfig,
        @Inject(SANITIZE_STYLE)
        private readonly sanitizeStyle: SanitizeStyle,
        @Inject(DOMPURIFY_HOOKS)
        hooks: ReadonlyArray,
    ) {
        super();

        addHook('uponSanitizeElement', createUponSanitizeElementHook(this.sanitizeStyle));
        addHook(
            'afterSanitizeAttributes',
            createAfterSanitizeAttributes(this.sanitizeStyle),
        );

        hooks.forEach(({name, hook}) => {
            addHook(name, hook);
        });
    }

import purify from 'dompurify';

purify.addHook('afterSanitizeAttributes', node => {
  if (
    node.tagName === 'use' &&
    node.hasAttribute('href') &&
    !node.getAttribute('href').match(/^#/)
  ) {
    node.remove();
  }

  if ('target' in node) {
    node.setAttribute('target', '_blank');
  }
});

export default purify;