carlos/almeira-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(styles): allow whitespace rendering in rich text fields and retain inline styles

Browse Source
This commit is contained in:
Carlos (Almeira) 2026-04-15 16:35:27 -05:00
parent 9812d70c71
commit 242ea2f60f
3 changed files with 5 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/app/[slug]/page.tsx
View File

@ -108,13 +108,13 @@ export default async function NoticiaDetail({ params }: { params: Promise<{ slug
)} )}
<div <div
className="prose prose-invert prose-cyan max-w-none text-slate-300 leading-relaxed text-lg className="prose prose-invert prose-cyan max-w-none text-slate-300 leading-relaxed text-lg whitespace-pre-wrap break-words
prose-headings:font-outfit prose-headings:font-black prose-headings:text-white prose-headings:font-outfit prose-headings:font-black prose-headings:text-white
prose-p:mb-6 prose-strong:text-cyan-400" prose-p:mb-6 prose-strong:text-cyan-400 prose-p:empty:before:content-['\\00a0']"
dangerouslySetInnerHTML={{ dangerouslySetInnerHTML={{
__html: DOMPurify.sanitize(post.contenido, { __html: DOMPurify.sanitize(post.contenido, {
ADD_TAGS: ['iframe'], ADD_TAGS: ['iframe'],
ADD_ATTR: ['allow', 'allowfullscreen', 'frameborder', 'scrolling'] ADD_ATTR: ['allow', 'allowfullscreen', 'frameborder', 'scrolling', 'style', 'class']
}) })
}} }}
/> />

2
src/app/actions/entities.ts
View File

@ -11,7 +11,7 @@ import DOMPurify from 'isomorphic-dompurify';
const safeHtmlSchema = z.string().transform(html => const safeHtmlSchema = z.string().transform(html =>
DOMPurify.sanitize(html, { DOMPurify.sanitize(html, {
ADD_TAGS: ['iframe'], ADD_TAGS: ['iframe'],
ADD_ATTR: ['allow', 'allowfullscreen', 'frameborder', 'scrolling'] ADD_ATTR: ['allow', 'allowfullscreen', 'frameborder', 'scrolling', 'style', 'class']
}) })
); );

2
src/components/dashboard/RichTextEditor.tsx
View File

@ -250,7 +250,7 @@ export const RichTextEditor = ({ value, onChange, label }: RichTextEditorProps)
}, },
editorProps: { editorProps: {
attributes: { attributes: {
class: 'prose prose-invert max-w-none focus:outline-none min-h-[300px] p-6 text-slate-200 leading-relaxed custom-scrollbar', class: 'prose prose-invert max-w-none focus:outline-none min-h-[300px] p-6 text-slate-200 leading-relaxed custom-scrollbar whitespace-pre-wrap break-words prose-p:empty:before:content-["\\00a0"]',
}, },
}, },
}); });