feat: add support for array values in preview text (#749)

Author: stevenle

.changeset/real-poets-drive.md

@@ -0,0 +1,5 @@
+---
+'@blinkk/root-cms': patch
+---
+
+feat: add support for array values in preview text (#749)

packages/root-cms/ui/utils/objects.test.ts

@@ -0,0 +1,47 @@
+import {describe, it, expect} from 'vitest';
+import {getNestedValue} from './objects.js';
+
+describe('getNestedValue', () => {
+  it('returns a nested property when using dot notation', () => {
+    const data = {meta: {title: 'Foo'}};
+
+    expect(getNestedValue(data, 'meta.title')).toBe('Foo');
+  });
+
+  it('returns the first defined value from a list of keys', () => {
+    const data = {meta: {title: 'Foo', description: 'Bar'}};
+
+    expect(
+      getNestedValue(data, ['meta.missing', 'meta.description', 'meta.title'])
+    ).toBe('Bar');
+  });
+
+  it('resolves bracket notation against real arrays', () => {
+    const data = {items: [{title: 'First'}, {title: 'Second'}]};
+
+    expect(getNestedValue(data, 'items[1].title')).toBe('Second');
+  });
+
+  it('resolves bracket notation against array objects using the _array key', () => {
+    const data = {
+      items: {
+        _array: ['item1', 'item2'],
+        item1: {title: 'Foo'},
+        item2: {title: 'Bar'},
+      },
+    };
+
+    expect(getNestedValue(data, 'items[0].title')).toBe('Foo');
+  });
+
+  it('returns undefined when the array object index does not exist', () => {
+    const data = {
+      items: {
+        _array: ['item1'],
+        item1: {title: 'Foo'},
+      },
+    };
+
+    expect(getNestedValue(data, 'items[1].title')).toBeUndefined();
+  });
+});

packages/root-cms/ui/utils/objects.ts

@@ -28,17 +28,70 @@ export function getNestedValue(data: any, key: string | string[]): any {
     }
     return undefined;
   }
-  if (!key.includes('.')) {
-    return (data || {})[key];
+
+  const segments = key.split('.');
+  let current = data;
+  for (const segment of segments) {
+    if (current === undefined || current === null) {
+      return undefined;
+    }
+
+    current = resolveSegment(current, segment);
   }
-  const keys = key.split('.');
+  return current;
+}
+
+function resolveSegment(data: any, segment: string): any {
+  if (!segment) {
+    return data;
+  }
+
+  // eslint-disable-next-line no-useless-escape
+  const matcher = /([^\[\]]+)|\[(\d+)\]/g;
   let current = data;
-  for (const segment of keys) {
+
+  let match: RegExpExecArray | null;
+  while ((match = matcher.exec(segment))) {
     if (current === undefined || current === null) {
       return undefined;
     }
-    current = current[segment];
+
+    const property = match[1];
+    const index = match[2];
+    if (property !== undefined) {
+      current = current[property];
+      continue;
+    }
+
+    if (index === undefined) {
+      return undefined;
+    }
+    const arrayIndex = Number(index);
+    if (Array.isArray(current)) {
+      current = current[arrayIndex];
+      continue;
+    }
+
+    if (isObject(current) && Array.isArray(current._array)) {
+      const key = current._array[arrayIndex];
+      if (key === undefined) {
+        return undefined;
+      }
+      current = current[key];
+      continue;
+    }
+
+    if (
+      isObject(current) &&
+      Object.prototype.hasOwnProperty.call(current, String(arrayIndex))
+    ) {
+      current = current[String(arrayIndex)];
+      continue;
+    }
+
+    return undefined;
   }
+
   return current;
 }