safetySetInnerHTML.ts

import * as React from 'react';
import removeHTMLTags from './removeHTMLTags';

const safetySetInnerHTML = (text?: string) => {
  if (!text) return null;

  const allowedTags = ['div', 'p', 'li', 'ul', 'ol', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6']
    .map((tag) => [`<${tag}>`, `</${tag}>`])
    .flat();

  const allowedTagsRegex = RegExp(`(${allowedTags.map((tag) => tag.replace('/', '\\/')).join('|')})`);

  const safetyText = text
    .split(allowedTagsRegex)
    .map((substr) => (allowedTags.includes(substr) ? substr : removeHTMLTags(substr))).join();

  return React.createElement('div', { dangerouslySetInnerHTML: { __html: safetyText } });
};

export default safetySetInnerHTML;