Remove handling for old core block attributes

rage · Oct 16, 2024 · b8ad4ee · b8ad4ee
1 parent 1e16cf0
commit b8ad4ee
Show file tree

Hide file tree

Showing 20 changed files with 65 additions and 150 deletions.
diff --git a/services/course-material/src/components/ContentRenderer/core/common/Audio/AudioBlock.tsx b/services/course-material/src/components/ContentRenderer/core/common/Audio/AudioBlock.tsx
@@ -8,9 +8,9 @@ import withErrorBoundary from "@/shared-module/common/utils/withErrorBoundary"
 const AudioBlock: React.FC<React.PropsWithChildren<BlockRendererProps<AudioAttributes>>> = ({
   data,
 }) => {
-  const { anchor, autoplay, caption, loop, preload, src } = data.attributes
+  const { autoplay, caption, loop, preload, src } = data.attributes
   return (
-    <figure {...(anchor && { id: anchor })}>
+    <figure>
       {/* Gutenberg schema has no support for captions */}
       {/* eslint-disable-next-line jsx-a11y/media-has-caption */}
       <audio

diff --git a/services/course-material/src/components/ContentRenderer/core/common/File/FileBlock.tsx b/services/course-material/src/components/ContentRenderer/core/common/File/FileBlock.tsx
@@ -16,7 +16,6 @@ const FileBlock: React.FC<React.PropsWithChildren<BlockRendererProps<FileAttribu
     showDownloadButton,
     // previewHeight,
     // align,
-    anchor,
     // className,
     // displayPreview,
     downloadButtonText,
@@ -28,12 +27,7 @@ const FileBlock: React.FC<React.PropsWithChildren<BlockRendererProps<FileAttribu
   return (
     <div>
       <span>
-        <a
-          href={href}
-          {...(textLinkTarget && { target: textLinkTarget })}
-          {...(anchor && { id: anchor })}
-          rel="noopener"
-        >
+        <a href={href} {...(textLinkTarget && { target: textLinkTarget })} rel="noopener">
           {fileName}
           {textLinkTarget && textLinkTarget.includes("_blank") && (
             <div>

diff --git a/services/course-material/src/components/ContentRenderer/core/common/Heading/HeadingBlock.tsx b/services/course-material/src/components/ContentRenderer/core/common/Heading/HeadingBlock.tsx
@@ -5,7 +5,6 @@ import { DetailedHTMLProps, HTMLAttributes } from "react"
 
 import { BlockRendererProps } from "../../.."
 import { HeadingAttributes } from "../../../../../../types/GutenbergBlockAttributes"
-import colorMapper from "../../../../../styles/colorMapper"
 import { fontSizeMapper } from "../../../../../styles/fontSizeMapper"
 import { marginTopHeadingMapper } from "../../../../../styles/headerMarginMapper"
 import { sanitizeCourseMaterialHtml } from "../../../../../utils/sanitizeCourseMaterialHtml"
@@ -20,14 +19,11 @@ const HeadingBlock: React.FC<React.PropsWithChildren<BlockRendererProps<HeadingA
     content,
     level,
     // align,
-    anchor,
-    backgroundColor,
     // className,
     fontSize,
     // placeholder,
     // style,
     textAlign,
-    textColor,
   } = data.attributes
 
   const headingProps: DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement> = {
@@ -42,13 +38,9 @@ const HeadingBlock: React.FC<React.PropsWithChildren<BlockRendererProps<HeadingA
         margin-top: ${marginTopHeadingMapper(level)};
         font-weight: 600;
         ${textAlign && `text-align: ${textAlign};`}
-        ${textColor && `color: ${colorMapper(textColor, "#000000")};`}
-      ${backgroundColor && `background-color: ${colorMapper(backgroundColor)};`}
-      ${fontSize && `font-size: ${fontSizeMapper(fontSize)};`}
-      ${backgroundColor && "padding: 2.66rem 5rem !important;"}
+        ${fontSize && `font-size: ${fontSizeMapper(fontSize)};`}
       `,
     ),
-    ...(anchor ? { id: anchor } : {}),
   }
   switch (level) {
     case 1:

diff --git a/services/course-material/src/components/ContentRenderer/core/common/Image/ImageBlock.tsx b/services/course-material/src/components/ContentRenderer/core/common/Image/ImageBlock.tsx
@@ -10,18 +10,20 @@ import { parseText } from "../../../util/textParsing"
 
 import withErrorBoundary from "@/shared-module/common/utils/withErrorBoundary"
 
-const ImageBlock: React.FC<React.PropsWithChildren<BlockRendererProps<ImageAttributes>>> = ({
-  data,
-}) => {
+interface ExtraAttributes {
+  align?: string
+}
+
+const ImageBlock: React.FC<
+  React.PropsWithChildren<BlockRendererProps<ImageAttributes & ExtraAttributes>>
+> = ({ data }) => {
   const { t } = useTranslation()
   const {
     alt,
     // blurDataUrl,
     // linkDestination, // is custom if image link defined manually, can send user out from our web page
     align,
-    anchor,
     caption,
-    className,
     height,
     href,
     linkClass,
@@ -72,7 +74,6 @@ const ImageBlock: React.FC<React.PropsWithChildren<BlockRendererProps<ImageAttri
           ${align === "left" && "margin-right: 1rem;"}
           `}
           `}
-          {...(anchor && { id: anchor })}
         >
           <div
             className={css`
@@ -95,7 +96,6 @@ const ImageBlock: React.FC<React.PropsWithChildren<BlockRendererProps<ImageAttri
                   margin: 1rem 0;
                   ${scale && `transform: scale(${scale});`}
                   ${aspectRatio && `aspect-ratio: ${aspectRatio};`}
-                  ${className === "is-style-rounded" && "border-radius: 9999px"}
                 `}
                 src={url}
                 alt={alt}

diff --git a/services/course-material/src/components/ContentRenderer/core/common/List/ListBlock.tsx b/services/course-material/src/components/ContentRenderer/core/common/List/ListBlock.tsx
@@ -4,7 +4,6 @@ import { useContext } from "react"
 import { BlockRendererProps } from "../../.."
 import { ListAttributes } from "../../../../../../types/GutenbergBlockAttributes"
 import { GlossaryContext } from "../../../../../contexts/GlossaryContext"
-import colorMapper from "../../../../../styles/colorMapper"
 import { fontSizeMapper, mobileFontSizeMapper } from "../../../../../styles/fontSizeMapper"
 import InnerBlocks from "../../../util/InnerBlocks"
 import { parseText } from "../../../util/textParsing"
@@ -21,16 +20,12 @@ const ListBlock: React.FC<React.PropsWithChildren<BlockRendererProps<ListAttribu
   const {
     ordered,
     values,
-    anchor,
-    backgroundColor,
     // className,
     fontSize,
-    gradient,
     // placeholder,
     reversed,
     start,
     // style,
-    textColor,
     // type,
   } = props.data.attributes
 
@@ -40,11 +35,8 @@ const ListBlock: React.FC<React.PropsWithChildren<BlockRendererProps<ListAttribu
   const listItemClass = cx(
     css`
       ${fontSize && `font-size: ${mobileFontSizeMapper(fontSize)};`}
-      ${textColor && `color: ${colorMapper(textColor)};`}
-    ${backgroundColor && `background: ${colorMapper(backgroundColor)};`}
-    ${gradient && `background: ${colorMapper(gradient)};`}
-    ${backgroundColor && `padding: 1.25em 2.375em !important;`}
-    padding-inline-start: 2.5rem !important;
+
+      padding-inline-start: 2.5rem !important;
       overflow-wrap: break-word;
 
       ${respondToOrLarger.md} {
@@ -76,7 +68,6 @@ const ListBlock: React.FC<React.PropsWithChildren<BlockRendererProps<ListAttribu
       // eslint-disable-next-line react/no-danger-with-children
       <ol
         className={listItemClass}
-        {...(anchor && { id: anchor })}
         {...(start && { start: start })}
         reversed={reversed}
         dangerouslySetInnerHTML={dangerouslySetInnerHTML}
@@ -89,7 +80,6 @@ const ListBlock: React.FC<React.PropsWithChildren<BlockRendererProps<ListAttribu
       // eslint-disable-next-line react/no-danger-with-children
       <ul
         className={listItemClass}
-        {...(anchor && { id: anchor })}
         dangerouslySetInnerHTML={dangerouslySetInnerHTML}
         // eslint-disable-next-line react/no-children-prop
         children={children}

diff --git a/services/course-material/src/components/ContentRenderer/core/common/List/ListItemBlock.tsx b/services/course-material/src/components/ContentRenderer/core/common/List/ListItemBlock.tsx
@@ -14,7 +14,7 @@ import withErrorBoundary from "@/shared-module/common/utils/withErrorBoundary"
 const ListItemBlock: React.FC<React.PropsWithChildren<BlockRendererProps<ListItemAttributes>>> = (
   props,
 ) => {
-  const { content, fontFamily, fontSize } = props.data.attributes
+  const { content, fontSize } = props.data.attributes
 
   const { terms } = useContext(GlossaryContext)
 
@@ -24,8 +24,6 @@ const ListItemBlock: React.FC<React.PropsWithChildren<BlockRendererProps<ListIte
         props.wrapperClassName,
         css`
           font-size: 18px;
-          ${fontFamily && `font-family: ${fontFamily};`}
-
           ${respondToOrLarger.md} {
             font-size: ${fontSizeMapper(fontSize)};
           }

diff --git a/services/course-material/src/components/ContentRenderer/core/common/Paragraph/index.tsx b/services/course-material/src/components/ContentRenderer/core/common/Paragraph/index.tsx
@@ -30,8 +30,13 @@ const hasDropCap = css`
   }
 `
 
+interface ExtraAttributes {
+  backgroundColor?: string
+  textColor?: string
+}
+
 const ParagraphBlock: React.FC<
-  React.PropsWithChildren<BlockRendererProps<ParagraphAttributes>>
+  React.PropsWithChildren<BlockRendererProps<ParagraphAttributes & ExtraAttributes>>
 > = ({ data, id, editing, selectedBlockId, setEdits }) => {
   const {
     textColor,
@@ -40,8 +45,6 @@ const ParagraphBlock: React.FC<
     content,
     dropCap,
     align,
-    anchor,
-    fontFamily,
     // className, Additional classNames added in Advanced menu
     // direction, If read from right to left or left to right
     // style,
@@ -76,7 +79,6 @@ const ParagraphBlock: React.FC<
             min-width: 1px;
             color: ${textColor};
             background-color: ${backgroundColor};
-            ${fontFamily && `font-family: ${fontFamily};`}
             font-size: ${fontSizeMapper(fontSize)};
             ${backgroundColor && `padding: 1.25em 2.375em;`}
             border: 1px;
@@ -154,7 +156,6 @@ const ParagraphBlock: React.FC<
       dangerouslySetInnerHTML={{
         __html: parsedText,
       }}
-      {...(anchor ? { id: anchor } : {})}
     />
   )
 }

diff --git a/services/course-material/src/components/ContentRenderer/core/common/Quote/QuoteBlock.tsx b/services/course-material/src/components/ContentRenderer/core/common/Quote/QuoteBlock.tsx
@@ -9,8 +9,12 @@ import { parseText } from "../../../util/textParsing"
 
 import withErrorBoundary from "@/shared-module/common/utils/withErrorBoundary"
 
-const QuoteBlock: React.FC<BlockRendererProps<QuoteAttributes>> = (props) => {
-  const { citation, value, anchor, align } = props.data.attributes
+interface ExtraAttributes {
+  align?: string
+}
+
+const QuoteBlock: React.FC<BlockRendererProps<QuoteAttributes & ExtraAttributes>> = (props) => {
+  const { citation, value, align } = props.data.attributes
   const { terms } = useContext(GlossaryContext)
 
   const styleLeftDefault = css`
@@ -42,7 +46,6 @@ const QuoteBlock: React.FC<BlockRendererProps<QuoteAttributes>> = (props) => {
           margin-bottom: 1.75rem;
         `}
         cite={citation}
-        {...(anchor && { id: anchor })}
       >
         <div>
           {value && (!props.data.innerBlocks || props.data.innerBlocks.length === 0) && value}

diff --git a/...s/course-material/src/components/ContentRenderer/core/embeds/variants/VimeoEmbedBlock.tsx b/...s/course-material/src/components/ContentRenderer/core/embeds/variants/VimeoEmbedBlock.tsx
@@ -15,7 +15,9 @@ import { baseTheme } from "@/shared-module/common/styles/theme"
 const VIMEO_MAX_WIDTH = 780
 
 export const VimeoEmbedBlock: React.FC<
-  React.PropsWithChildren<EmbedAttributes & { dontAllowBlockToBeWiderThanContainerWidth: boolean }>
+  React.PropsWithChildren<
+    EmbedAttributes & { dontAllowBlockToBeWiderThanContainerWidth: boolean; className?: string }
+  >
 > = (props) => {
   const [embedHtml, setEmbedHtml] = useState(undefined)
   const [fetching, setFetching] = useState(true)

diff --git a/...course-material/src/components/ContentRenderer/core/embeds/variants/YoutubeEmbedBlock.tsx b/...course-material/src/components/ContentRenderer/core/embeds/variants/YoutubeEmbedBlock.tsx
@@ -9,7 +9,10 @@ import BreakFromCentered from "@/shared-module/common/components/Centering/Break
 import { baseTheme } from "@/shared-module/common/styles/theme"
 
 export const YoutubeEmbedBlock: React.FC<
-  React.PropsWithChildren<EmbedAttributes> & { dontAllowBlockToBeWiderThanContainerWidth: boolean }
+  React.PropsWithChildren<EmbedAttributes> & {
+    dontAllowBlockToBeWiderThanContainerWidth: boolean
+    className?: string
+  }
 > = (props) => {
   const { t } = useTranslation()
   const { url } = props

diff --git a/services/course-material/src/components/ContentRenderer/core/formatting/CodeBlock/index.tsx b/services/course-material/src/components/ContentRenderer/core/formatting/CodeBlock/index.tsx
@@ -21,7 +21,7 @@ const CodeBlock: React.FC<React.PropsWithChildren<BlockRendererProps<CodeAttribu
   data,
   dontAllowBlockToBeWiderThanContainerWidth,
 }) => {
-  const { anchor, content } = data.attributes
+  const { content } = data.attributes
   const fontSizePx = useMemo(() => {
     const longestLine = (content ?? "")
       .split("\n")
@@ -54,7 +54,6 @@ const CodeBlock: React.FC<React.PropsWithChildren<BlockRendererProps<CodeAttribu
           white-space: pre-wrap;
           overflow-wrap: break-word;
         `}
-        {...(anchor && { id: anchor })}
       >
         <SyntaxHighlightedContainer content={content} />
       </pre>

diff --git a/...ices/course-material/src/components/ContentRenderer/core/formatting/PreformattedBlock.tsx b/...ices/course-material/src/components/ContentRenderer/core/formatting/PreformattedBlock.tsx
@@ -2,7 +2,6 @@ import { css } from "@emotion/css"
 
 import { BlockRendererProps } from "../.."
 import { PreformattedAttributes } from "../../../../../types/GutenbergBlockAttributes"
-import colorMapper from "../../../../styles/colorMapper"
 import { fontSizeMapper } from "../../../../styles/fontSizeMapper"
 import { sanitizeCourseMaterialHtml } from "../../../../utils/sanitizeCourseMaterialHtml"
 
@@ -12,19 +11,15 @@ import withErrorBoundary from "@/shared-module/common/utils/withErrorBoundary"
 const PreformattedBlock: React.FC<
   React.PropsWithChildren<BlockRendererProps<PreformattedAttributes>>
 > = ({ data }) => {
-  const { content, anchor, backgroundColor, fontSize, gradient, textColor } = data.attributes
+  const { content, fontSize } = data.attributes
   return (
     <pre
       className={css`
-        ${textColor && `color: ${colorMapper(textColor)};`}
         ${fontSize && `font-size: ${fontSizeMapper(fontSize)};`}
-        ${backgroundColor && `background-color: ${colorMapper(backgroundColor)};`}
-        ${gradient && `background-color: ${colorMapper(gradient)};`}
         white-space: pre-wrap;
         font-family: ${monospaceFont};
         overflow-wrap: break-word;
       `}
-      {...(anchor && { id: anchor })}
       dangerouslySetInnerHTML={{ __html: sanitizeCourseMaterialHtml(content ?? "") }}
     />
   )

diff --git a/services/course-material/src/components/ContentRenderer/core/formatting/PullquoteBlock.tsx b/services/course-material/src/components/ContentRenderer/core/formatting/PullquoteBlock.tsx
@@ -2,7 +2,6 @@ import { css } from "@emotion/css"
 
 import { BlockRendererProps } from "../.."
 import { PullquoteAttributes } from "../../../../../types/GutenbergBlockAttributes"
-import colorMapper from "../../../../styles/colorMapper"
 import { sanitizeCourseMaterialHtml } from "../../../../utils/sanitizeCourseMaterialHtml"
 
 import { baseTheme, headingFont } from "@/shared-module/common/styles"
@@ -22,44 +21,26 @@ const PullquoteBlock: React.FC<
 > = ({ data }) => {
   const {
     citation,
-    align,
-    anchor,
-    backgroundColor,
     // borderColor, // Border color is same as textColor in CMS
     // className,
-    gradient,
     // style,
     textAlign,
-    textColor,
     fontSize = "medium",
     value,
   } = data.attributes
 
-  const textAlignNotCenterWidth =
-    textAlign && textAlign !== "center" && !align ? "max-width: 26.25rem;" : null
-
   const size = FONT_SIZES[fontSize]
 
   return (
-    <div
-      className={css`
-        ${textAlignNotCenterWidth}
-      `}
-    >
+    <div>
       <figure
         className={css`
-          ${textColor && `color: ${colorMapper(textColor)};`}
-          ${backgroundColor && `background: ${colorMapper(backgroundColor)};`}
-          ${gradient && `background: ${colorMapper(gradient)};`}
           text-align: center;
           ${textAlign && `text-align: ${textAlign};`}
           border-top: 0.25rem solid #d5dbdf;
           border-bottom: 0.25rem solid #d5dbdf;
           padding: 3rem 0rem !important;
-          ${align && `float: ${align};`}
-          ${align === "right" ? "margin-left: 1rem;" : "margin-right: 1rem;"}
         `}
-        {...(anchor && { id: anchor })}
       >
         <blockquote
           className={css`