From 5d71f31bf197fc5e8747d2b38dbb345175769a70 Mon Sep 17 00:00:00 2001
From: Sagar Deshmukh <sagarsdeshmukh@users.noreply.github.com>
Date: Wed, 17 Apr 2024 11:27:43 +0530
Subject: [PATCH] PLANET-7175 Fix timeline block editor error (#2250)

Ref. https://jira.greenpeace.org/browse/PLANET-7175

The error was caused by conflicts between the underscore and lodash libraries.
---
 .../blocks/Timeline/TimelineEditorScript.js   | 11 +++++++-
 assets/src/functions/isLodash.js              | 27 +++++++++++++++++++
 2 files changed, 37 insertions(+), 1 deletion(-)
 create mode 100644 assets/src/functions/isLodash.js

diff --git a/assets/src/blocks/Timeline/TimelineEditorScript.js b/assets/src/blocks/Timeline/TimelineEditorScript.js
index 75f36f9aa2..9826f100fb 100644
--- a/assets/src/blocks/Timeline/TimelineEditorScript.js
+++ b/assets/src/blocks/Timeline/TimelineEditorScript.js
@@ -14,6 +14,7 @@ import {Timeline} from './Timeline';
 import {languages} from './TimelineLanguages';
 import {URLDescriptionHelp} from './URLDescriptionHelp';
 import {debounce} from '@wordpress/compose';
+import {isLodash} from '../../functions/isLodash';
 
 const {__} = wp.i18n;
 const TIMELINE_JS_VERSION = '3.8.12';
@@ -24,9 +25,17 @@ const positions = [
 ];
 
 const loadAssets = () => {
+  const revertLodash = function() {
+    // Address conflicts between the underscore and lodash libraries.
+    if (isLodash()) {
+      // eslint-disable-next-line no-undef
+      _.noConflict();
+    }
+  };
   // eslint-disable-next-line no-unused-vars
   const [scriptLoaded, scriptError] = useScript(
-    `https://cdn.knightlab.com/libs/timeline3/${TIMELINE_JS_VERSION}/js/timeline-min.js`
+    `https://cdn.knightlab.com/libs/timeline3/${TIMELINE_JS_VERSION}/js/timeline-min.js`,
+    revertLodash
   );
 
   // eslint-disable-next-line no-unused-vars
diff --git a/assets/src/functions/isLodash.js b/assets/src/functions/isLodash.js
new file mode 100644
index 0000000000..4a0ecce34d
--- /dev/null
+++ b/assets/src/functions/isLodash.js
@@ -0,0 +1,27 @@
+// Determines if _ is lodash or not.
+export const isLodash = () => {
+  let isItLodash = false;
+
+  // If _ is defined and the function _.forEach exists then we know underscore OR lodash are in place
+  // eslint-disable-next-line no-undef
+  if ('undefined' !== typeof (_) && 'function' === typeof (_.forEach)) {
+    // A small sample of some of the functions that exist in lodash but not underscore
+    const funcs = ['get', 'set', 'at', 'cloneDeep'];
+
+    // Simplest if assume exists to start
+    isItLodash = true;
+
+    funcs.forEach(func => {
+      // If just one of the functions do not exist, then not lodash
+      // eslint-disable-next-line no-undef
+      isItLodash = ('function' !== typeof (_[func])) ? false : isItLodash;
+    });
+  }
+
+  if (isItLodash) {
+    // We know that lodash is loaded in the _ variable
+    return true;
+  }
+  // We know that lodash is NOT loaded
+  return false;
+};