fix: nl2br warning (#1301)

Author: dennyscode

package.json

@@ -46,7 +46,6 @@
     "react-dom": "^18.3.1",
     "react-error-boundary": "^4.0.13",
     "react-i18next": "^15.0.1",
-    "react-nl2br": "^1.0.4",
     "react-router-dom": "^6.26.0",
     "sharp": "^0.33.4",
     "siwe": "^2.3.2",

src/components/Blog/CustomRichBlocks.tsx

@@ -10,7 +10,7 @@ import type { MediaAttributes } from '@/types/strapi';
 import { BlocksRenderer } from '@strapi/blocks-react-renderer';
 import type { RootNode } from 'node_modules/@strapi/blocks-react-renderer/dist/BlocksRenderer';
 import { isValidElement, type JSX, type ReactElement } from 'react';
-import nl2br from 'react-nl2br';
+import newlineToBr from 'src/utils/newlineToBr';
 import { BlogParagraphContainer } from './BlogArticle/BlogArticle.style';
 import type { BlogWidgetProps } from './BlogWidget';
 import { BlogWidget } from './BlogWidget';
@@ -238,12 +238,12 @@ export const CustomRichBlocks = ({
                     </BlogLink>
                   );
                 } else {
-                  const nl2brText: Array<ReactElement | string> = nl2br(
+                  const nl2brText: Array<ReactElement | string> = newlineToBr(
                     el.props.text,
                   );
                   return nl2brText.map((line, lineIndex: number) => {
                     if (isValidElement(line) && line.type === 'br') {
-                      // adds <br> from nl2br
+                      // adds <br>
                       return line;
                     }
                     return (
@@ -260,7 +260,7 @@ export const CustomRichBlocks = ({
                   });
                 }
               } else {
-                return <></>;
+                return null;
               }
             })}
           </BlogParagraphContainer>

src/utils/newlineToBr.ts

@@ -0,0 +1,17 @@
+import type { ReactElement } from 'react';
+import { createElement, Fragment } from 'react';
+
+const newlineToBr = (str: unknown): (string | ReactElement)[] => {
+  if (typeof str !== 'string') {
+    return [String(str)];
+  }
+
+  return str.split(/(\r\n|\r|\n)/g).map((line, index) => {
+    if (line.match(/(\r\n|\r|\n)/g)) {
+      return createElement('br', { key: index });
+    }
+    return createElement(Fragment, { key: index }, line);
+  });
+};
+
+export default newlineToBr;

yarn.lock

@@ -9520,7 +9520,6 @@ __metadata:
     react-dom: "npm:^18.3.1"
     react-error-boundary: "npm:^4.0.13"
     react-i18next: "npm:^15.0.1"
-    react-nl2br: "npm:^1.0.4"
     react-router-dom: "npm:^6.26.0"
     rollup-plugin-polyfill-node: "npm:^0.13.0"
     sharp: "npm:^0.33.4"
@@ -11306,15 +11305,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-nl2br@npm:^1.0.4":
-  version: 1.0.4
-  resolution: "react-nl2br@npm:1.0.4"
-  peerDependencies:
-    react: ^15.7.0 || ^16.14.0 || ^17.0.0 || ^18.0.0
-  checksum: 10/face38b19bec9ae9bf43e7efbf158a577f0810fd8d93650c464bdd80a37d61be6f59170cca4fe4993b44c8d5652c541d4f4786d30297ca3252fd99143b5b3816
-  languageName: node
-  linkType: hard
-
 "react-router-dom@npm:^6.26.0":
   version: 6.26.1
   resolution: "react-router-dom@npm:6.26.1"