= ({ 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}
+
+
+
);