@exdst-sitecore-content-sdk/astro 0.0.16 → 0.0.19

package/src/components/Placeholder/placeholder-utils.test.ts

@@ -3,8 +3,13 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { expect } from 'chai';
 import { createSandbox } from 'sinon';
-import { getPlaceholderRenderings, getSXAParams } from './placeholder-utils';
-import { ComponentRendering } from '@sitecore-content-sdk/core/layout';
+import {
+  getChildComponentProps,
+  getPlaceholderRenderings,
+  getSXAParams,
+} from './placeholder-utils';
+import { ComponentRendering } from '@sitecore-content-sdk/content/layout';
+import { PlaceholderProps } from './models';
 
 describe('placeholder-utils', () => {
   const sandbox = createSandbox();
@@ -79,8 +84,8 @@ describe('placeholder-utils', () => {
       // Test non-editing mode - should replace dynamic placeholder
       const result = getPlaceholderRenderings(rendering, 'container-1', false);
       expect(result).to.deep.equal(expectedRenderings);
-      expect(rendering.placeholders['container-1']).to.deep.equal(expectedRenderings);
-      expect(rendering.placeholders['container-{*}']).to.be.undefined;
+      expect(rendering.placeholders?.['container-1']).to.deep.equal(expectedRenderings);
+      expect(rendering.placeholders?.['container-{*}']).to.be.undefined;
 
       // Reset rendering for editing mode test
       rendering.placeholders = {
@@ -148,7 +153,7 @@ describe('placeholder-utils', () => {
       });
     });
 
-    it('should return empty object when no params', () => {
+    it('should return empty styles string when no params', () => {
       const rendering: ComponentRendering = {
         componentName: 'TestComponent',
         uid: 'test-uid',
@@ -156,7 +161,149 @@ describe('placeholder-utils', () => {
 
       const result = getSXAParams(rendering);
 
-      expect(result).to.deep.equal({});
+      expect(result).to.deep.equal({ styles: '' });
+    });
+  });
+
+  describe('getChildComponentProps', () => {
+    it('should merge placeholder and rendering fields', () => {
+      const placeholderProps: PlaceholderProps = {
+        name: 'test-placeholder',
+        rendering: { componentName: 'Test', uid: 'test-uid' },
+        page: {
+          layout: {},
+          locale: 'en',
+          mode: {
+            name: 'normal',
+            isNormal: true,
+            isPreview: false,
+            isEditing: false,
+            isDesignLibrary: false,
+            designLibrary: { isVariantGeneration: false },
+          },
+        },
+        fields: {
+          placeholderField: { value: 'placeholder-value' },
+          sharedField: { value: 'placeholder-shared-value' },
+        },
+      };
+
+      const componentRendering: ComponentRendering = {
+        componentName: 'TestComponent',
+        uid: 'test-uid',
+        fields: {
+          renderingField: { value: 'rendering-value' },
+          sharedField: { value: 'rendering-shared-value' },
+        },
+      };
+
+      const result = getChildComponentProps(placeholderProps, componentRendering);
+
+      expect(result.fields).to.deep.equal({
+        placeholderField: { value: 'placeholder-value' },
+        renderingField: { value: 'rendering-value' },
+        sharedField: { value: 'rendering-shared-value' }, // rendering should override placeholder
+      });
+      expect(result.rendering).to.equal(componentRendering);
+    });
+
+    it('should merge placeholder and rendering params', () => {
+      const placeholderProps: PlaceholderProps = {
+        name: 'test-placeholder',
+        rendering: { componentName: 'Test', uid: 'test-uid' },
+        page: {
+          layout: {},
+          locale: 'en',
+          mode: {
+            name: 'normal',
+            isNormal: true,
+            isPreview: false,
+            isEditing: false,
+            isDesignLibrary: false,
+            designLibrary: { isVariantGeneration: false },
+          },
+        },
+        params: {
+          placeholderParam: 'placeholder-param-value',
+          sharedParam: 'placeholder-shared-param',
+        },
+      };
+
+      const componentRendering: ComponentRendering = {
+        componentName: 'TestComponent',
+        uid: 'test-uid',
+        params: {
+          renderingParam: 'rendering-param-value',
+          sharedParam: 'rendering-shared-param',
+          GridParameters: 'col-lg-6',
+          Styles: 'custom-class',
+        },
+      };
+
+      const result = getChildComponentProps(placeholderProps, componentRendering);
+
+      expect(result.params).to.deep.equal({
+        placeholderParam: 'placeholder-param-value',
+        renderingParam: 'rendering-param-value',
+        sharedParam: 'rendering-shared-param', // rendering should override placeholder
+        GridParameters: 'col-lg-6',
+        Styles: 'custom-class',
+        styles: 'col-lg-6 custom-class', // SXA styles should be added
+      });
+      expect(result.rendering).to.equal(componentRendering);
+    });
+
+    it('should return minimal child component props object', () => {
+      const placeholderProps: PlaceholderProps = {
+        name: 'test-placeholder',
+        rendering: { componentName: 'Test', uid: 'test-uid' },
+        page: {
+          layout: {},
+          locale: 'en',
+          mode: {
+            name: 'normal',
+            isNormal: true,
+            isPreview: false,
+            isEditing: false,
+            isDesignLibrary: false,
+            designLibrary: { isVariantGeneration: false },
+          },
+        },
+        componentMap: new Map(),
+        customProp: 'custom-value',
+        // missingComponentComponent: MissingComponent,
+        // hiddenRenderingComponent: HiddenRendering,
+      };
+
+      const componentRendering: ComponentRendering = {
+        componentName: 'TestComponent',
+        uid: 'test-uid',
+        fields: {
+          testField: { value: 'test-value' },
+        },
+        params: {
+          testParam: 'test-param',
+        },
+      };
+
+      const result = getChildComponentProps(placeholderProps, componentRendering);
+
+      // getChildComponentProps returns only fields, params, and rendering
+      expect(result.rendering).to.equal(componentRendering);
+      expect(result.fields).to.deep.equal({
+        testField: { value: 'test-value' },
+      });
+      expect(result.params).to.deep.equal({
+        testParam: 'test-param',
+      });
+
+      // getChildComponentProps does not include these props
+      expect((result as any).key).to.be.undefined;
+      expect((result as any).customProp).to.be.undefined;
+      expect((result as any).componentMap).to.be.undefined;
+      expect((result as any).missingComponentComponent).to.be.undefined;
+      expect((result as any).hiddenRenderingComponent).to.be.undefined;
+      expect((result as any).name).to.be.undefined;
     });
   });
 });

package/src/components/Placeholder/placeholder-utils.ts

@@ -3,10 +3,11 @@ import {
   RouteData,
   isDynamicPlaceholder,
   getDynamicPlaceholderPattern,
-} from '@sitecore-content-sdk/core/layout';
+} from '@sitecore-content-sdk/content/layout';
+import { ChildComponentProps, PlaceholderProps } from './models';
 
 /**
- * Get the renderings for the specified placeholder from the rendering data.
+ * Get the renderings for the specified placeholder from the rendering layout data.
  * @param {ComponentRendering | RouteData } rendering rendering data
  * @param {string} name placeholder name
  * @param {boolean} isEditing whether components should be rendered in editing mode
@@ -26,19 +27,17 @@ export const getPlaceholderRenderings = (
    * For Metadata EditMode, we need to keep the raw placeholder name in place.
    */
   if (rendering?.placeholders) {
-    Object.keys(rendering.placeholders).forEach((placeholder) => {
-      const patternPlaceholder = isDynamicPlaceholder(placeholder)
-        ? getDynamicPlaceholderPattern(placeholder)
+    Object.entries(rendering.placeholders).forEach(([key, value]) => {
+      const patternPlaceholder = isDynamicPlaceholder(key)
+        ? getDynamicPlaceholderPattern(key)
         : null;
 
       if (patternPlaceholder && patternPlaceholder.test(phName)) {
         if (isEditing) {
-          phName = placeholder;
+          phName = key;
         } else {
-          // @ts-ignore
-          rendering.placeholders[phName] = rendering.placeholders[placeholder];
-          // @ts-ignore
-          delete rendering.placeholders[placeholder];
+          rendering.placeholders![phName] = value;
+          delete rendering.placeholders![key];
         }
       }
     });
@@ -68,7 +67,7 @@ export const getPlaceholderRenderings = (
  * @returns {object} converted SXA params
  */
 export const getSXAParams = (rendering: ComponentRendering) => {
-  if (!rendering.params) return {};
+  if (!rendering.params) return { styles: '' };
 
   const { GridParameters, Styles } = rendering.params;
 
@@ -78,3 +77,26 @@ export const getSXAParams = (rendering: ComponentRendering) => {
     }
   );
 };
+
+/**
+ * Merge specific placeholder props with component field and params content props.
+ * @param {PlaceholderProps} placeholderProps placeholder props
+ * @param {ComponentRendering} componentRendering component rendering
+ * @returns {ComponentProps} merged props
+ */
+export function getChildComponentProps<T extends PlaceholderProps>(
+  placeholderProps: T,
+  componentRendering: ComponentRendering
+): ChildComponentProps {
+  const fields = { ...(placeholderProps.fields || {}), ...(componentRendering.fields || {}) };
+  const params = { ...(placeholderProps.params || {}), ...(componentRendering.params || {}) };
+  return {
+    fields,
+    params: {
+      ...params,
+      // Provide SXA styles
+      ...getSXAParams(componentRendering),
+    },
+    rendering: componentRendering,
+  };
+}

package/src/components/RichText.astro

@@ -3,15 +3,23 @@ import { EditableFieldProps } from './sharedTypes';
 import {
   FieldMetadata,
   isFieldValueEmpty,
-} from '@sitecore-content-sdk/core/layout';
+} from '@sitecore-content-sdk/content/layout';
 import WithEmptyFieldEditingComponent from '../enhancers/WithEmptyFieldEditingComponent.astro';
 import WithFieldMetadata from '../enhancers/WithFieldMetadata.astro';
 import DefaultEmptyFieldEditingComponentText from './DefaultEmptyFieldEditingComponentText.astro';
 
+/**
+ * The interface for the RichText field.
+ * @public
+ */
 export interface RichTextField extends FieldMetadata {
   value?: string;
 }
 
+/**
+ * The interface for the RichText component props.
+ * @public
+ */
 export interface RichTextProps extends EditableFieldProps {
   [htmlAttributes: string]: unknown;
   /** The text field data. */

package/src/components/RichText.astro.test.ts

@@ -0,0 +1,205 @@
+import { describe, test, expect } from 'vitest';
+import { renderAstroComponent } from '../tests/astro-helpers';
+import RichText from './RichText.astro';
+import EmptyFieldEditingComponent from '../tests/test-components/EmptyFieldEditingComponent.astro';
+
+describe('<RichText />', () => {
+  test('should render nothing with missing field', async () => {
+    const field = null!;
+
+    const rendered = (
+      await renderAstroComponent(RichText, {
+        props: { field: field },
+      })
+    ).querySelectorAll('div');
+
+    expect(rendered).to.have.length(0);
+  });
+
+  test('should render nothing with empty value', async () => {
+    const field = {
+      value: '',
+    };
+
+    const rendered = (
+      await renderAstroComponent(RichText, {
+        props: { field: field },
+      })
+    ).querySelectorAll('div');
+
+    expect(rendered).to.have.length(0);
+  });
+
+  test('should render nothing with missing value', async () => {
+    const field = {};
+    const rendered = (
+      await renderAstroComponent(RichText, {
+        props: { field: field },
+      })
+    ).querySelectorAll('div');
+    expect(rendered).to.have.length(0);
+  });
+
+  test('should render value with editing explicitly disabled', async () => {
+    const field = {
+      value: 'value',
+    };
+    const rendered = (
+      await renderAstroComponent(RichText, {
+        props: { field: field, editable: false },
+      })
+    ).querySelectorAll('div');
+
+    expect(rendered).to.have.length(1);
+    expect(rendered[0].innerHTML).to.contain('value');
+  });
+
+  test('should render value with with just a value', async () => {
+    const field = {
+      value: 'value',
+    };
+    const rendered = (
+      await renderAstroComponent(RichText, {
+        props: { field: field },
+      })
+    ).querySelectorAll('div');
+
+    expect(rendered).to.have.length(1);
+    expect(rendered[0].innerHTML).to.contain('value');
+  });
+
+  test('should render embedded html as-is', async () => {
+    const field = {
+      value: '<input type="text">some crazy stuff<script code="whaaaat">uh oh</script>',
+    };
+    const rendered = (
+      await renderAstroComponent(RichText, {
+        props: { field: field },
+      })
+    ).querySelectorAll('div');
+
+    expect(rendered).to.have.length(1);
+    expect(rendered[0].innerHTML).to.contain(field.value);
+  });
+
+  test('should render tag with a tag provided', async () => {
+    const field = {
+      value: 'value',
+    };
+    const rendered = (
+      await renderAstroComponent(RichText, {
+        props: { field: field, tag: 'p' },
+      })
+    ).querySelectorAll('p');
+
+    expect(rendered).to.have.length(1);
+    expect(rendered[0].innerHTML).to.contain('value');
+  });
+
+  test('should render other attributes with other props provided', async () => {
+    const field = {
+      value: 'value',
+    };
+    const rendered = (
+      await renderAstroComponent(RichText, {
+        props: { field: field, tag: 'h1', class: 'cssClass', id: 'lorem' },
+      })
+    ).querySelectorAll('h1');
+    expect(rendered).to.have.length(1);
+    expect(rendered[0].outerHTML).to.contain('<h1 class="cssClass" id="lorem">');
+    expect(rendered[0].outerHTML).to.contain('value');
+  });
+
+  describe('edit mode', () => {
+    const testMetadata = {
+      contextItem: {
+        id: '{09A07660-6834-476C-B93B-584248D3003B}',
+        language: 'en',
+        revision: 'a0b36ce0a7db49418edf90eb9621e145',
+        version: 1,
+      },
+      fieldId: '{414061F4-FBB1-4591-BC37-BFFA67F745EB}',
+      fieldType: 'single-line',
+      rawValue: 'Test1',
+    };
+
+    test('should render field metadata component when metadata property is present', async () => {
+      const field = {
+        value: 'value',
+        metadata: testMetadata,
+      };
+
+      const rendered = await renderAstroComponent(RichText, {
+        props: { field: field },
+      });
+
+      expect(rendered.innerHTML).to.equal(
+        [
+          `<code type="text/sitecore" chrometype="field" class="scpm" kind="open">${JSON.stringify(
+            testMetadata
+          )}</code>`,
+          '<div>value</div>',
+          '<code type="text/sitecore" chrometype="field" class="scpm" kind="close"></code>',
+        ].join('')
+      );
+    });
+
+    test('should render default empty field component when field value is empty', async () => {
+      const field = {
+        value: '',
+        metadata: testMetadata,
+      };
+
+      const rendered = await renderAstroComponent(RichText, {
+        props: { field: field },
+      });
+
+      expect(rendered.innerHTML).to.equal(
+        [
+          `<code type="text/sitecore" chrometype="field" class="scpm" kind="open">${JSON.stringify(
+            testMetadata
+          )}</code>`,
+          '<span>[No text in field]</span>',
+          '<code type="text/sitecore" chrometype="field" class="scpm" kind="close"></code>',
+        ].join('')
+      );
+    });
+
+    test('should render custom empty field component when provided, when field value is empty', async () => {
+      const field = {
+        value: '',
+        metadata: testMetadata,
+      };
+
+      const rendered = await renderAstroComponent(RichText, {
+        props: {
+          field: field,
+          emptyFieldEditingComponent: EmptyFieldEditingComponent,
+        },
+      });
+
+      expect(rendered.innerHTML).to.equal(
+        [
+          `<code type="text/sitecore" chrometype="field" class="scpm" kind="open">${JSON.stringify(
+            testMetadata
+          )}</code>`,
+          '<span class="empty-field-value-placeholder">Custom Empty field value</span>',
+          '<code type="text/sitecore" chrometype="field" class="scpm" kind="close"></code>',
+        ].join('')
+      );
+    });
+
+    test('should render nothing when field value is empty, when editing is explicitly disabled ', async () => {
+      const field = {
+        value: '',
+        metadata: testMetadata,
+      };
+
+      const rendered = await renderAstroComponent(RichText, {
+        props: { field: field, editable: false },
+      });
+
+      expect(rendered.innerHTML).to.equal('');
+    });
+  });
+});

package/src/components/Text.astro

@@ -2,16 +2,24 @@
 import {
   FieldMetadata,
   isFieldValueEmpty,
-} from '@sitecore-content-sdk/core/layout';
+} from '@sitecore-content-sdk/content/layout';
 import { EditableFieldProps } from './sharedTypes';
 import WithFieldMetadata from '../enhancers/WithFieldMetadata.astro';
 import WithEmptyFieldEditingComponent from '../enhancers/WithEmptyFieldEditingComponent.astro';
 import DefaultEmptyFieldEditingComponentText from './DefaultEmptyFieldEditingComponentText.astro';
 
+/**
+ * The interface for the Text field.
+ * @public
+ */
 export interface TextField extends FieldMetadata {
   value?: string | number;
 }
 
+/**
+ * The interface for the Text component props.
+ * @public
+ */
 export interface TextProps extends EditableFieldProps {
   [htmlAttributes: string]: unknown;
   /** The text field data. */
@@ -87,8 +95,12 @@ const attrs: {
       >
         {!isEmptyField && (
           <>
-            {(tag || !encode) && <Tag {...attrs} set:html={output} />}
-            {(!tag || encode) && <Fragment {...attrs} set:html={output} />}
+            {(field?.metadata || tag || !encode) && (
+              <Tag {...attrs} set:html={output} />
+            )}
+            {!field?.metadata && (!tag || encode) && (
+              <Fragment {...attrs} set:html={output} />
+            )}
           </>
         )}
       </WithEmptyFieldEditingComponent>