diff --git a/.changeset/mighty-stingrays-pay.md b/.changeset/mighty-stingrays-pay.md
new file mode 100644
index 000000000..f1b222387
--- /dev/null
+++ b/.changeset/mighty-stingrays-pay.md
@@ -0,0 +1,5 @@
+---
+"@headstartwp/core": minor
+---
+
+Introduces `SafeHtml` and `HtmlDecoder` components.
diff --git a/.changeset/two-cats-vanish.md b/.changeset/two-cats-vanish.md
new file mode 100644
index 000000000..b63ce069a
--- /dev/null
+++ b/.changeset/two-cats-vanish.md
@@ -0,0 +1,5 @@
+---
+"@headstartwp/core": minor
+---
+
+Introduces the `decodeHtmlSpecialChars` function.
diff --git a/docs/documentation/03- Utilities/sanitization.md b/docs/documentation/03- Utilities/sanitization.md
new file mode 100644
index 000000000..4baf7138f
--- /dev/null
+++ b/docs/documentation/03- Utilities/sanitization.md
@@ -0,0 +1,66 @@
+---
+slug: /utilities/sanitization
+sidebar_label: Escaping & Sanitization
+---
+
+# Escaping & Sanitization
+As you're probably aware, React won't render raw HTML by default. If you want to do so you must use [dangerouslySetInnerHTML](https://react.dev/reference/react-dom/components/common#dangerously-setting-the-inner-html).
+
+This page describes some of the utility functions and components provided by the framework to help with escaping & sanitization when rendering raw markup.
+
+## wpKsesPost
+
+This function sanitizes HTML content with requirements similar to [wp_kses_post](https://developer.wordpress.org/reference/functions/wp_kses_post/). If you are rendering arbitrary HTML markup you should probably run the markup through this function first.
+
+```jsx
+import { wpKsesPost } from '@headstartwp/core';
+
+const markup = { __html: wpKsesPost('
some raw html
') };
+return ;
+```
+
+## stripTags
+
+This function simply strips any html tags from a string. This can be useful in contexts where you don't want any HTML to be rendered.
+
+```jsx
+import { stripTags } from '@headstartwp/core';
+
+return {stripTags('this is a title without a span')}
;
+```
+
+## BlocksRenderer
+
+When using [BlocksRenderer](/learn/gutenberg/rendering-blocks) your markup already goes through `wpKsesPost` so there's nothing else you need to worry about.
+
+## HtmlDecoder
+
+Sometimes you might just want to decode some HTML entities without actually rendering any HTML tags. For this purpose you can use the `HtmlDecoder` component.
+
+```jsx
+import { HtmlDecoder } from '@headstartwp/core/react';
+
+
+
+
+```
+
+## SafeHtml
+
+The `SafeHtml` component provides an easy way to safely render HTML markup. It runs the markup through `wpKsesPost` just like `BlocksRenderer`.
+
+```jsx
+import { SafeHtml } from '@headstartwp/core/react';
+
+
+```
+
+## decodeHtmlSpeciaChars
+
+This function will decode a pre-defined set of html special chars.
+
+```js
+import { decodeHtmlSpeciaChars } from '@headstartwp/core';
+
+decodeHtmlSpeciaChars('Hello world! – foo bar –');
+```
\ No newline at end of file
diff --git a/docs/package-lock.json b/docs/package-lock.json
index b6988da04..41d9d56de 100644
--- a/docs/package-lock.json
+++ b/docs/package-lock.json
@@ -229,9 +229,9 @@
}
},
"node_modules/@babel/core/node_modules/semver": {
- "version": "6.3.0",
- "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
- "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+ "version": "6.3.1",
+ "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+ "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
"bin": {
"semver": "bin/semver.js"
}
@@ -303,9 +303,9 @@
}
},
"node_modules/@babel/helper-compilation-targets/node_modules/semver": {
- "version": "6.3.0",
- "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
- "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+ "version": "6.3.1",
+ "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+ "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
"bin": {
"semver": "bin/semver.js"
}
@@ -362,9 +362,9 @@
}
},
"node_modules/@babel/helper-define-polyfill-provider/node_modules/semver": {
- "version": "6.3.0",
- "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
- "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+ "version": "6.3.1",
+ "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+ "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
"bin": {
"semver": "bin/semver.js"
}
@@ -1612,9 +1612,9 @@
}
},
"node_modules/@babel/plugin-transform-runtime/node_modules/semver": {
- "version": "6.3.0",
- "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
- "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+ "version": "6.3.1",
+ "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+ "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
"bin": {
"semver": "bin/semver.js"
}
@@ -1824,9 +1824,9 @@
}
},
"node_modules/@babel/preset-env/node_modules/semver": {
- "version": "6.3.0",
- "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
- "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+ "version": "6.3.1",
+ "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+ "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
"bin": {
"semver": "bin/semver.js"
}
@@ -2817,9 +2817,9 @@
}
},
"node_modules/@mdx-js/mdx/node_modules/semver": {
- "version": "5.7.1",
- "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
- "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+ "version": "5.7.2",
+ "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
+ "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
"bin": {
"semver": "bin/semver"
}
@@ -4251,9 +4251,9 @@
}
},
"node_modules/babel-plugin-polyfill-corejs2/node_modules/semver": {
- "version": "6.3.0",
- "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
- "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+ "version": "6.3.1",
+ "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+ "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
"bin": {
"semver": "bin/semver.js"
}
@@ -8035,9 +8035,9 @@
}
},
"node_modules/make-dir/node_modules/semver": {
- "version": "6.3.0",
- "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
- "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+ "version": "6.3.1",
+ "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+ "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
"bin": {
"semver": "bin/semver.js"
}
@@ -8668,9 +8668,9 @@
}
},
"node_modules/package-json/node_modules/semver": {
- "version": "6.3.0",
- "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
- "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+ "version": "6.3.1",
+ "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+ "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
"bin": {
"semver": "bin/semver.js"
}
@@ -10251,9 +10251,9 @@
}
},
"node_modules/remark-mdx/node_modules/semver": {
- "version": "5.7.1",
- "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
- "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+ "version": "5.7.2",
+ "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
+ "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
"bin": {
"semver": "bin/semver"
}
@@ -10702,9 +10702,9 @@
}
},
"node_modules/semver": {
- "version": "7.3.8",
- "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz",
- "integrity": "sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==",
+ "version": "7.5.4",
+ "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
+ "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
"dependencies": {
"lru-cache": "^6.0.0"
},
@@ -10727,9 +10727,9 @@
}
},
"node_modules/semver-diff/node_modules/semver": {
- "version": "6.3.0",
- "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
- "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+ "version": "6.3.1",
+ "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+ "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
"bin": {
"semver": "bin/semver.js"
}
@@ -13139,9 +13139,9 @@
},
"dependencies": {
"semver": {
- "version": "6.3.0",
- "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
- "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw=="
+ "version": "6.3.1",
+ "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+ "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA=="
}
}
},
@@ -13196,9 +13196,9 @@
},
"dependencies": {
"semver": {
- "version": "6.3.0",
- "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
- "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw=="
+ "version": "6.3.1",
+ "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+ "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA=="
}
}
},
@@ -13239,9 +13239,9 @@
},
"dependencies": {
"semver": {
- "version": "6.3.0",
- "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
- "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw=="
+ "version": "6.3.1",
+ "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+ "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA=="
}
}
},
@@ -14049,9 +14049,9 @@
},
"dependencies": {
"semver": {
- "version": "6.3.0",
- "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
- "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw=="
+ "version": "6.3.1",
+ "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+ "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA=="
}
}
},
@@ -14206,9 +14206,9 @@
},
"dependencies": {
"semver": {
- "version": "6.3.0",
- "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
- "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw=="
+ "version": "6.3.1",
+ "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+ "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA=="
}
}
},
@@ -14958,9 +14958,9 @@
}
},
"semver": {
- "version": "5.7.1",
- "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
- "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ=="
+ "version": "5.7.2",
+ "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
+ "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g=="
},
"source-map": {
"version": "0.5.7",
@@ -16002,9 +16002,9 @@
},
"dependencies": {
"semver": {
- "version": "6.3.0",
- "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
- "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw=="
+ "version": "6.3.1",
+ "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+ "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA=="
}
}
},
@@ -18735,9 +18735,9 @@
},
"dependencies": {
"semver": {
- "version": "6.3.0",
- "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
- "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw=="
+ "version": "6.3.1",
+ "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+ "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA=="
}
}
},
@@ -19170,9 +19170,9 @@
},
"dependencies": {
"semver": {
- "version": "6.3.0",
- "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
- "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw=="
+ "version": "6.3.1",
+ "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+ "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA=="
}
}
},
@@ -20285,9 +20285,9 @@
}
},
"semver": {
- "version": "5.7.1",
- "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
- "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ=="
+ "version": "5.7.2",
+ "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
+ "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g=="
},
"source-map": {
"version": "0.5.7",
@@ -20600,9 +20600,9 @@
}
},
"semver": {
- "version": "7.3.8",
- "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz",
- "integrity": "sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==",
+ "version": "7.5.4",
+ "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
+ "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
"requires": {
"lru-cache": "^6.0.0"
}
@@ -20616,9 +20616,9 @@
},
"dependencies": {
"semver": {
- "version": "6.3.0",
- "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
- "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw=="
+ "version": "6.3.1",
+ "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+ "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA=="
}
}
},
diff --git a/package-lock.json b/package-lock.json
index 86fd61b52..dd52e6fe4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1895,9 +1895,9 @@
}
},
"node_modules/@changesets/apply-release-plan/node_modules/semver": {
- "version": "5.7.1",
- "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
- "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+ "version": "5.7.2",
+ "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
+ "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
"dev": true,
"bin": {
"semver": "bin/semver"
@@ -1918,9 +1918,9 @@
}
},
"node_modules/@changesets/assemble-release-plan/node_modules/semver": {
- "version": "5.7.1",
- "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
- "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+ "version": "5.7.2",
+ "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
+ "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
"dev": true,
"bin": {
"semver": "bin/semver"
@@ -1980,9 +1980,9 @@
}
},
"node_modules/@changesets/cli/node_modules/semver": {
- "version": "5.7.1",
- "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
- "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+ "version": "5.7.2",
+ "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
+ "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
"dev": true,
"bin": {
"semver": "bin/semver"
@@ -2026,9 +2026,9 @@
}
},
"node_modules/@changesets/get-dependents-graph/node_modules/semver": {
- "version": "5.7.1",
- "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
- "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+ "version": "5.7.2",
+ "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
+ "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
"dev": true,
"bin": {
"semver": "bin/semver"
@@ -5600,9 +5600,9 @@
}
},
"node_modules/@typescript-eslint/eslint-plugin/node_modules/semver": {
- "version": "7.5.0",
- "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.0.tgz",
- "integrity": "sha512-+XC0AD/R7Q2mPSRuy2Id0+CGTZ98+8f+KvwirxOKIEyid+XSx6HbC63p+O4IndTHuX5Z+JxQ0TghCkO5Cg/2HA==",
+ "version": "7.5.4",
+ "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
+ "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
"dev": true,
"dependencies": {
"lru-cache": "^6.0.0"
@@ -5744,9 +5744,9 @@
}
},
"node_modules/@typescript-eslint/typescript-estree/node_modules/semver": {
- "version": "7.5.0",
- "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.0.tgz",
- "integrity": "sha512-+XC0AD/R7Q2mPSRuy2Id0+CGTZ98+8f+KvwirxOKIEyid+XSx6HbC63p+O4IndTHuX5Z+JxQ0TghCkO5Cg/2HA==",
+ "version": "7.5.4",
+ "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
+ "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
"dev": true,
"dependencies": {
"lru-cache": "^6.0.0"
@@ -5809,9 +5809,9 @@
}
},
"node_modules/@typescript-eslint/utils/node_modules/semver": {
- "version": "7.5.0",
- "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.0.tgz",
- "integrity": "sha512-+XC0AD/R7Q2mPSRuy2Id0+CGTZ98+8f+KvwirxOKIEyid+XSx6HbC63p+O4IndTHuX5Z+JxQ0TghCkO5Cg/2HA==",
+ "version": "7.5.4",
+ "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
+ "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
"dev": true,
"dependencies": {
"lru-cache": "^6.0.0"
@@ -8537,9 +8537,9 @@
}
},
"node_modules/conventional-commits-parser/node_modules/semver": {
- "version": "7.5.0",
- "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.0.tgz",
- "integrity": "sha512-+XC0AD/R7Q2mPSRuy2Id0+CGTZ98+8f+KvwirxOKIEyid+XSx6HbC63p+O4IndTHuX5Z+JxQ0TghCkO5Cg/2HA==",
+ "version": "7.5.4",
+ "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
+ "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
"dev": true,
"dependencies": {
"lru-cache": "^6.0.0"
@@ -10482,9 +10482,9 @@
}
},
"node_modules/eslint-plugin-jsdoc/node_modules/semver": {
- "version": "7.5.1",
- "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.1.tgz",
- "integrity": "sha512-Wvss5ivl8TMRZXXESstBA4uR5iXgEN/VC5/sOcuXdVLzcdkz4HWetIoRfG5gb5X+ij/G9rw9YoGn3QoQ8OCSpw==",
+ "version": "7.5.4",
+ "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
+ "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
"dev": true,
"peer": true,
"dependencies": {
@@ -11653,9 +11653,9 @@
}
},
"node_modules/find-cache-dir/node_modules/semver": {
- "version": "5.7.1",
- "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
- "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+ "version": "5.7.2",
+ "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
+ "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
"peer": true,
"bin": {
"semver": "bin/semver"
@@ -12188,9 +12188,9 @@
}
},
"node_modules/git-raw-commits/node_modules/semver": {
- "version": "7.5.0",
- "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.0.tgz",
- "integrity": "sha512-+XC0AD/R7Q2mPSRuy2Id0+CGTZ98+8f+KvwirxOKIEyid+XSx6HbC63p+O4IndTHuX5Z+JxQ0TghCkO5Cg/2HA==",
+ "version": "7.5.4",
+ "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
+ "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
"dev": true,
"dependencies": {
"lru-cache": "^6.0.0"
@@ -15476,9 +15476,9 @@
"dev": true
},
"node_modules/jest-snapshot/node_modules/semver": {
- "version": "7.5.0",
- "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.0.tgz",
- "integrity": "sha512-+XC0AD/R7Q2mPSRuy2Id0+CGTZ98+8f+KvwirxOKIEyid+XSx6HbC63p+O4IndTHuX5Z+JxQ0TghCkO5Cg/2HA==",
+ "version": "7.5.4",
+ "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
+ "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
"dev": true,
"dependencies": {
"lru-cache": "^6.0.0"
@@ -17636,9 +17636,9 @@
}
},
"node_modules/normalize-package-data/node_modules/semver": {
- "version": "5.7.1",
- "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
- "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+ "version": "5.7.2",
+ "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
+ "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
"dev": true,
"bin": {
"semver": "bin/semver"
@@ -19984,9 +19984,9 @@
"integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
},
"node_modules/semver": {
- "version": "6.3.0",
- "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
- "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+ "version": "6.3.1",
+ "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+ "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
"bin": {
"semver": "bin/semver.js"
}
@@ -21803,9 +21803,9 @@
}
},
"node_modules/tough-cookie": {
- "version": "4.1.2",
- "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.2.tgz",
- "integrity": "sha512-G9fqXWoYFZgTc2z8Q5zaHy/vJMjm+WV0AkAeHxVCQiEB1b+dGvWzFW6QV07cY5jQ5gRkeid2qIkzkxUnmoQZUQ==",
+ "version": "4.1.3",
+ "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.3.tgz",
+ "integrity": "sha512-aX/y5pVRkfRnfmuX+OdbSdXvPe6ieKX/G2s7e98f4poJHnqH3281gDPm/metm6E/WRamfx7WC4HUqkWHfQHprw==",
"dev": true,
"dependencies": {
"psl": "^1.1.33",
@@ -21923,9 +21923,9 @@
}
},
"node_modules/ts-jest/node_modules/semver": {
- "version": "7.5.0",
- "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.0.tgz",
- "integrity": "sha512-+XC0AD/R7Q2mPSRuy2Id0+CGTZ98+8f+KvwirxOKIEyid+XSx6HbC63p+O4IndTHuX5Z+JxQ0TghCkO5Cg/2HA==",
+ "version": "7.5.4",
+ "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
+ "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
"dev": true,
"dependencies": {
"lru-cache": "^6.0.0"
diff --git a/packages/core/src/dom/__tests__/stripTags.ts b/packages/core/src/dom/__tests__/stripTags.ts
new file mode 100644
index 000000000..87e9d7052
--- /dev/null
+++ b/packages/core/src/dom/__tests__/stripTags.ts
@@ -0,0 +1,11 @@
+import { stripTags } from '../stripTags';
+
+describe('stripTags', () => {
+ test('it strips tags', () => {
+ expect(stripTags('test
')).toBe('test');
+ expect(stripTags('')).toBe('test test');
+ expect(stripTags('')).toBe(
+ 'alert()hello world',
+ );
+ });
+});
diff --git a/packages/core/src/dom/index.ts b/packages/core/src/dom/index.ts
index 8ba02a4c6..987e65661 100644
--- a/packages/core/src/dom/index.ts
+++ b/packages/core/src/dom/index.ts
@@ -342,3 +342,4 @@ export function isBlockByName(node: DOMNode, name: string) {
}
export * from './wpKsesPost';
+export * from './stripTags';
diff --git a/packages/core/src/dom/stripTags.ts b/packages/core/src/dom/stripTags.ts
new file mode 100644
index 000000000..67e3dbb42
--- /dev/null
+++ b/packages/core/src/dom/stripTags.ts
@@ -0,0 +1,10 @@
+/**
+ * Utility functions to strip any tags
+ *
+ * @param html The html string
+ *
+ * @returns
+ */
+export function stripTags(html) {
+ return html.replace(/(<([^>]+)>)/gi, '');
+}
diff --git a/packages/core/src/react/components/HtmlDecoder.tsx b/packages/core/src/react/components/HtmlDecoder.tsx
new file mode 100644
index 000000000..c9f0996d8
--- /dev/null
+++ b/packages/core/src/react/components/HtmlDecoder.tsx
@@ -0,0 +1,33 @@
+import { FC } from 'react';
+import parse from 'html-react-parser';
+import { stripTags } from '../../dom';
+
+export interface HtmlDecodeProps {
+ /**
+ * The string with html entities to decode
+ *
+ * ```jsx
+ *
+ * ```
+ */
+ html: string;
+}
+
+/**
+ * The `HtmlDecoder` simply decodes html entities
+ *
+ * Any actual html markup gets stripped before decoding html entities. If you need to render HTML use {@link SafeHtml}
+ *
+ * ## Usage
+ *
+ * ```jsx
+ *
+ * ```
+ *
+ * @param props Component properties
+ *
+ * @category React Components
+ */
+export const HtmlDecoder: FC = ({ html }) => {
+ return <>{parse(stripTags(html))}>;
+};
diff --git a/packages/core/src/react/components/SafeHtml.tsx b/packages/core/src/react/components/SafeHtml.tsx
new file mode 100644
index 000000000..76770fa7f
--- /dev/null
+++ b/packages/core/src/react/components/SafeHtml.tsx
@@ -0,0 +1,46 @@
+import { FC } from 'react';
+import parse from 'html-react-parser';
+import type { IWhiteList } from 'xss';
+import { wpKsesPost } from '../../dom';
+
+export interface SafeHtmlProps {
+ /**
+ * The HTML string to be rendered.
+ *
+ * ```jsx
+ *
+ * ```
+ */
+ html: string;
+
+ /**
+ * The allow list for the parser
+ *
+ * ```jsx
+ *
+ * ```
+ */
+ ksesAllowList?: IWhiteList;
+}
+
+/**
+ * The `SafeHtml` component provides an easy way to safely render HTML
+ *
+ * The html prop is sanitized through {@link wpKsesPost} so it's safe for rendering arbitrary html markup.
+ *
+ * ## Usage
+ *
+ * ```jsx
+ *
+ * ```
+ *
+ * @param props Component properties
+ *
+ * @category React Components
+ */
+export const SafeHtml: FC = ({ html, ksesAllowList }) => {
+ return <>{parse(wpKsesPost(html, ksesAllowList))}>;
+};
diff --git a/packages/core/src/react/components/__tests__/HtmlDecoder.tsx b/packages/core/src/react/components/__tests__/HtmlDecoder.tsx
new file mode 100644
index 000000000..02d5bfae8
--- /dev/null
+++ b/packages/core/src/react/components/__tests__/HtmlDecoder.tsx
@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { render } from '@testing-library/react';
+import { HtmlDecoder } from '../HtmlDecoder';
+
+describe('HtmlDecoder', () => {
+ it('decodes entities', () => {
+ const { container } = render(
+ ,
+ );
+
+ expect(container.firstChild).toMatchInlineSnapshot(
+ `Hello world! – foo bar – ‘\\@£#?,’\\[]`,
+ );
+ });
+
+ it('does not render arbitrary markup', () => {
+ const { container } = render();
+ expect(container).toMatchInlineSnapshot(`
+
+ This is a title
+
+ `);
+ });
+});
diff --git a/packages/core/src/react/components/__tests__/SafeHtml.tsx b/packages/core/src/react/components/__tests__/SafeHtml.tsx
new file mode 100644
index 000000000..c5b4b2972
--- /dev/null
+++ b/packages/core/src/react/components/__tests__/SafeHtml.tsx
@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { render } from '@testing-library/react';
+import { SafeHtml } from '../SafeHtml';
+
+describe('SafeHtml', () => {
+ it('renders entities', () => {
+ const { container } = render(
+ ,
+ );
+
+ expect(container.firstChild).toMatchInlineSnapshot(
+ `Hello world! – foo bar – ‘\\@£#?,’\\[]`,
+ );
+ });
+
+ it('renders arbitrary markup', () => {
+ const { container } = render();
+ expect(container).toMatchInlineSnapshot(`
+
+ This is a
+
+ title
+
+
+ `);
+ });
+});
diff --git a/packages/core/src/react/components/index.ts b/packages/core/src/react/components/index.ts
index b1e7b1f15..7e1f33709 100644
--- a/packages/core/src/react/components/index.ts
+++ b/packages/core/src/react/components/index.ts
@@ -1,2 +1,4 @@
export * from './BlocksRenderer';
export * from './Menu';
+export * from './SafeHtml';
+export * from './HtmlDecoder';
diff --git a/packages/core/src/utils/__tests__/decodeHtmlSpeciaChars.ts b/packages/core/src/utils/__tests__/decodeHtmlSpeciaChars.ts
new file mode 100644
index 000000000..f60ead438
--- /dev/null
+++ b/packages/core/src/utils/__tests__/decodeHtmlSpeciaChars.ts
@@ -0,0 +1,18 @@
+import { decodeHtmlSpeciaChars } from '../decodeHtmlSpeciaChars';
+
+describe('decodeHtmlSpeciaChars', () => {
+ it('decodes html entities', () => {
+ expect(decodeHtmlSpeciaChars('’Hello’')).toBe('’Hello’');
+ expect(decodeHtmlSpeciaChars('’Hi & Hello’')).toBe('’Hi & Hello’');
+ expect(decodeHtmlSpeciaChars('“Hi & Hello”–Bye')).toBe(
+ '“Hi & Hello”–Bye',
+ );
+ expect(decodeHtmlSpeciaChars('"Hi & Hello"…Bye')).toBe(
+ '"Hi & Hello"…Bye',
+ );
+
+ expect(decodeHtmlSpeciaChars('"<Hi & Hello>"…Bye')).toBe(
+ '""…Bye',
+ );
+ });
+});
diff --git a/packages/core/src/utils/decodeHtmlSpeciaChars.ts b/packages/core/src/utils/decodeHtmlSpeciaChars.ts
new file mode 100644
index 000000000..99a696741
--- /dev/null
+++ b/packages/core/src/utils/decodeHtmlSpeciaChars.ts
@@ -0,0 +1,24 @@
+/**
+ * Decodes HTML special chars entities
+ *
+ * @param text The text we want to decode
+ *
+ * @returns text with decoded html entities
+ */
+export function decodeHtmlSpeciaChars(text: string) {
+ if (!text) {
+ return '';
+ }
+
+ return text
+ .replace(/’/g, '’')
+ .replace(/&/g, '&')
+ .replace(/“/g, '“')
+ .replace(/”/g, '”')
+ .replace(/–/g, '–')
+ .replace(/…/g, '…')
+ .replace(/"/g, '"')
+ .replace(/&/g, '&')
+ .replace(/</g, '<')
+ .replace(/>/g, '>');
+}
diff --git a/packages/core/src/utils/index.ts b/packages/core/src/utils/index.ts
index 4b53f1aa1..0446a8d50 100644
--- a/packages/core/src/utils/index.ts
+++ b/packages/core/src/utils/index.ts
@@ -7,3 +7,4 @@ export * from './errors';
export * from './isInternalLink';
export * from './url';
export * from './log';
+export * from './decodeHtmlSpeciaChars';
diff --git a/projects/wp-nextjs/src/components/PageContent.js b/projects/wp-nextjs/src/components/PageContent.js
index e73308a20..3a35cea6c 100644
--- a/projects/wp-nextjs/src/components/PageContent.js
+++ b/projects/wp-nextjs/src/components/PageContent.js
@@ -1,6 +1,7 @@
import PropTypes from 'prop-types';
import { usePost } from '@headstartwp/next';
import dynamic from 'next/dynamic';
+import { HtmlDecoder } from '@headstartwp/core/react';
const Blocks = dynamic(() => import('./Blocks'));
@@ -19,7 +20,9 @@ export const PageContent = ({ params }) => {
return (
<>
- {data.post.title.rendered}
+
+
+
>
);