Add bracket notations support for entity references

- Implemented  function to extract base and accessors from dot notations.
- Implemented  function to convert dot notations to bracket notations.
- Implemented  function to verify that each dot notation has a corresponding bracket notation.
- Enhanced the functions to handle dynamic base objects (e.g., , ) and various accessor combinations.
- Added examples to demonstrate usage and verification.

frontend/src/_helpers/editorHelpers.js

@@ -146,6 +146,40 @@ export function isOnlyLayoutUpdate(diffState) {
   return componentDiff.length > 0;
 }
 
+function findNotations(jsString) {
+  const dotNotationRegex = /(\w+)\.(\w+(\.\w+)*)/g;
+  const matches = [];
+  let match;
+
+  while ((match = dotNotationRegex.exec(jsString)) !== null) {
+    matches.push({
+      base: match[1],
+      accessors: match[2].split('.'),
+    });
+  }
+
+  return matches;
+}
+
+function convertToBracketNotation(base, accessors) {
+  return `${base}${accessors.map((accessor) => `['${accessor}']`).join('')}`;
+}
+
+function verifyDotAndBracketNotations(jsString) {
+  const notations = findNotations(jsString);
+
+  for (const { base, accessors } of notations) {
+    const dotNotation = `${base}.${accessors.join('.')}`;
+    const bracketNotation = convertToBracketNotation(base, accessors);
+
+    if (jsString.includes(dotNotation) && !jsString.includes(bracketNotation)) {
+      return false;
+    }
+  }
+
+  return true;
+}
+
 function findReferenceInComponent(node, changedCurrentState) {
   if (!node) return false;
 
@@ -159,7 +193,7 @@ function findReferenceInComponent(node, changedCurrentState) {
         ) {
           // Check if the referenced entity is in the state
 
-          if (changedCurrentState.some((state) => value.includes(state))) {
+          if (changedCurrentState.some((state) => value.includes(state) || verifyDotAndBracketNotations(value))) {
             return true;
           }
         } else if (typeof value === 'object') {