Merge pull request #307 from pantheon-systems/od/pcc-1532/bugfix/pagi…

…nation Article View: Removed element styles for specific tags
pantheon-systems · Sep 2, 2024 · 82fec5c · 82fec5c
2 parents 8282cc5 + 588b2c8
commit 82fec5c
Show file tree

Hide file tree

Showing 3 changed files with 119 additions and 2 deletions.
diff --git 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({
       </div>
       <ArticleRenderer
         article={hydratedArticle}
+        componentMap={{
+          h1: overrideElementStyles("h1"),
+          h2: overrideElementStyles("h2"),
+          h3: overrideElementStyles("h3"),
+          h4: overrideElementStyles("h4"),
+          h5: overrideElementStyles("h5"),
+          h6: overrideElementStyles("h6"),
+          p: overrideElementStyles("p"),
+          span: overrideElementStyles("span"),
+        }}
         smartComponentMap={clientSmartComponentMap}
         __experimentalFlags={{
           disableAllStyles: !!onlyContent,
@@ -78,6 +114,16 @@ export function StaticArticleView({ article, onlyContent }: ArticleViewProps) {
       </div>
       <ArticleRenderer
         article={article}
+        componentMap={{
+          h1: overrideElementStyles("h1"),
+          h2: overrideElementStyles("h2"),
+          h3: overrideElementStyles("h3"),
+          h4: overrideElementStyles("h4"),
+          h5: overrideElementStyles("h5"),
+          h6: overrideElementStyles("h6"),
+          p: overrideElementStyles("p"),
+          span: overrideElementStyles("span"),
+        }}
         smartComponentMap={clientSmartComponentMap}
         __experimentalFlags={{
           disableAllStyles: !!onlyContent,

diff --git a/starters/nextjs-starter-ts/components/article-view.tsx b/starters/nextjs-starter-ts/components/article-view.tsx
@@ -4,9 +4,34 @@ import {
   ArticleRenderer,
   useArticleTitle,
 } from "@pantheon-systems/pcc-react-sdk/components";
-import { useMemo } from "react";
+import React, { useMemo } from "react";
 import { clientSmartComponentMap } from "./smart-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;
@@ -56,6 +81,17 @@ export function StaticArticleView({ article, onlyContent }: ArticleViewProps) {
         ) : null}
       </div>
       <ArticleRenderer
+        componentMap={{
+          h1: overrideElementStyles("h1"),
+          h2: overrideElementStyles("h2"),
+          h3: overrideElementStyles("h3"),
+          h4: overrideElementStyles("h4"),
+          h5: overrideElementStyles("h5"),
+          h6: overrideElementStyles("h6"),
+          p: overrideElementStyles("p"),
+          li: overrideElementStyles("li"),
+          span: overrideElementStyles("span"),
+        }}
         article={article}
         smartComponentMap={clientSmartComponentMap}
         __experimentalFlags={{

diff --git a/starters/nextjs-starter/components/article-view.jsx b/starters/nextjs-starter/components/article-view.jsx
@@ -3,9 +3,34 @@ import {
   ArticleRenderer,
   useArticleTitle,
 } from "@pantheon-systems/pcc-react-sdk/components";
-import { useMemo } from "react";
+import React, { useMemo } from "react";
 import { clientSmartComponentMap } from "./smart-components";
 
+const ELEMENT_STYLES_TO_OVERRIDE = [
+  /fontSize/,
+  /fontWeight/,
+  /padding(Left|Right|Top|Bottom)*/,
+  /margin(Left|Right|Top|Bottom)*/,
+  /lineHeight/,
+  /height/,
+];
+const overrideElementStyles = (tag) => {
+  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 }) {
       </div>
       <ArticleRenderer
         article={article}
+        componentMap={{
+          h1: overrideElementStyles("h1"),
+          h2: overrideElementStyles("h2"),
+          h3: overrideElementStyles("h3"),
+          h4: overrideElementStyles("h4"),
+          h5: overrideElementStyles("h5"),
+          h6: overrideElementStyles("h6"),
+          p: overrideElementStyles("p"),
+          span: overrideElementStyles("span"),
+        }}
         smartComponentMap={clientSmartComponentMap}
         __experimentalFlags={{
           useUnintrusiveTitleRendering: true,