import DOMPurify from "dompurify";

const TIPTAP_ALLOWED_TAGS = [
  "a",
  "article",
  "aside",
  "blockquote",
  "br",
  "div",
  "em",
  "figcaption",
  "figure",
  "footer",
  "h1",
  "h2",
  "h3",
  "h4",
  "h5",
  "h6",
  "header",
  "hr",
  "i",
  "iframe",
  "img",
  "li",
  "mark",
  "nav",
  "oembed",
  "ol",
  "p",
  "section",
  "span",
  "strong",
  "sub",
  "sup",
  "table",
  "tbody",
  "td",
  "th",
  "thead",
  "tr",
  "u",
  "ul",
  "var",
  "video",
  "source",
] as const;

const TIPTAP_ALLOWED_ATTR = [
  "align",
  "alt",
  "allowfullscreen",
  "border",
  "cellpadding",
  "cellspacing",
  "class",
  "colspan",
  "controls",
  "data-model",
  "data-type",
  "datetime",
  "frameborder",
  "height",
  "href",
  "poster",
  "preload",
  "rel",
  "rowspan",
  "scope",
  "src",
  "style",
  "target",
  "title",
  "type",
  "url",
  "valign",
  "width",
] as const;

const SANITIZE_OPTIONS = {
  ALLOWED_TAGS: [...TIPTAP_ALLOWED_TAGS],
  ALLOWED_ATTR: [...TIPTAP_ALLOWED_ATTR],
  FORBID_TAGS: ["script", "style"],
  ALLOW_UNKNOWN_PROTOCOLS: false,
};

export const sanitizeRichHtml = (html: string): string =>
  DOMPurify.sanitize(html, SANITIZE_OPTIONS);

export const toSanitizedHtml = (html: string): { __html: string } => ({
  __html: sanitizeRichHtml(html),
});