diff --git a/starters/nextjs-starter-approuter-ts/components/article-view.tsx b/starters/nextjs-starter-approuter-ts/components/article-view.tsx index 957e2abe..1233fb47 100644 --- a/starters/nextjs-starter-approuter-ts/components/article-view.tsx +++ b/starters/nextjs-starter-approuter-ts/components/article-view.tsx @@ -6,8 +6,34 @@ import { ArticleRenderer, useArticleTitle, } from "@pantheon-systems/pcc-react-sdk/components"; +import React from "react"; import { clientSmartComponentMap } from "./smart-components/client-components"; +const ELEMENT_STYLES_TO_OVERRIDE = [ + /fontSize/, + /fontWeight/, + /padding(Left|Right|Top|Bottom)*/, + /margin(Left|Right|Top|Bottom)*/, + /lineHeight/, + /height/, +]; +const overrideElementStyles = (tag: keyof HTMLElementTagNameMap) => { + function resultFunc({ children, id, style, ...attrs }: any) { + const newStyles = { ...style }; + ELEMENT_STYLES_TO_OVERRIDE.forEach((s) => { + Object.keys(newStyles).forEach((key) => { + if (s.test(key)) delete newStyles[key]; + }); + }); + return React.createElement( + tag, + { id, style: newStyles, ...attrs }, + children, + ); + } + return resultFunc; +}; + type ArticleViewProps = { article: Article; onlyContent?: boolean; @@ -47,6 +73,16 @@ export default function ArticleView({ { + function resultFunc({ children, id, style, ...attrs }: any) { + const newStyles = { ...style }; + ELEMENT_STYLES_TO_OVERRIDE.forEach((s) => { + Object.keys(newStyles).forEach((key) => { + if (s.test(key)) delete newStyles[key]; + }); + }); + return React.createElement( + tag, + { id, style: newStyles, ...attrs }, + children, + ); + } + return resultFunc; +}; + type ArticleViewProps = { article: Article; onlyContent?: boolean; @@ -56,6 +81,17 @@ export function StaticArticleView({ article, onlyContent }: ArticleViewProps) { ) : null} { + function resultFunc({ children, id, style, ...attrs }) { + const newStyles = { ...style }; + ELEMENT_STYLES_TO_OVERRIDE.forEach((s) => { + Object.keys(newStyles).forEach((key) => { + if (s.test(key)) delete newStyles[key]; + }); + }); + return React.createElement( + tag, + { id, style: newStyles, ...attrs }, + children, + ); + } + return resultFunc; +}; + export default function ArticleView({ article, onlyContent }) { const { data } = useArticle( article.id, @@ -48,6 +73,16 @@ export function StaticArticleView({ article, onlyContent }) {