@exdst-sitecore-content-sdk/astro 0.0.5 → 0.0.6

package/src/components/RichText.astro

@@ -1,59 +1,59 @@
----
-import { EditableFieldProps } from './sharedTypes';
-import {
-  FieldMetadata,
-  isFieldValueEmpty,
-} from '@sitecore-content-sdk/core/layout';
-import WithEmptyFieldEditingComponent from '../enhancers/WithEmptyFieldEditingComponent.astro';
-import WithFieldMetadata from '../enhancers/WithFieldMetadata.astro';
-import DefaultEmptyFieldEditingComponentText from './DefaultEmptyFieldEditingComponentText.astro';
-
-export interface RichTextField extends FieldMetadata {
-  value?: string;
-}
-
-export interface RichTextProps extends EditableFieldProps {
-  [htmlAttributes: string]: unknown;
-  /** The text field data. */
-  field: RichTextField;
-  /**
-   * The HTML element that will wrap the contents of the field.
-   */
-  tag?: string;
-}
-
-const {
-  field,
-  tag = 'div',
-  editable = true,
-  emptyFieldEditingComponent,
-} = Astro.props as RichTextProps;
-
-const isEmptyField = isFieldValueEmpty(field);
-
-const Tag = tag;
-
-const attrs = (function () {
-  const { field, ...attrs } = Astro.props;
-  const { tag, ...finalAttrs } = attrs;
-  return finalAttrs;
-})();
----
-
-{
-  (
-    <WithFieldMetadata field={field} editable={editable}>
-      <WithEmptyFieldEditingComponent
-        field={field}
-        editable={editable}
-        defaultEmptyFieldEditingComponent={
-          DefaultEmptyFieldEditingComponentText
-        }
-        emptyFieldEditingComponent={emptyFieldEditingComponent}
-        {...attrs}
-      >
-        {!isEmptyField && <Tag {...attrs} set:html={field.value} />}
-      </WithEmptyFieldEditingComponent>
-    </WithFieldMetadata>
-  )
-}
+---
+import { EditableFieldProps } from './sharedTypes';
+import {
+  FieldMetadata,
+  isFieldValueEmpty,
+} from '@sitecore-content-sdk/core/layout';
+import WithEmptyFieldEditingComponent from '../enhancers/WithEmptyFieldEditingComponent.astro';
+import WithFieldMetadata from '../enhancers/WithFieldMetadata.astro';
+import DefaultEmptyFieldEditingComponentText from './DefaultEmptyFieldEditingComponentText.astro';
+
+export interface RichTextField extends FieldMetadata {
+  value?: string;
+}
+
+export interface RichTextProps extends EditableFieldProps {
+  [htmlAttributes: string]: unknown;
+  /** The text field data. */
+  field: RichTextField;
+  /**
+   * The HTML element that will wrap the contents of the field.
+   */
+  tag?: string;
+}
+
+const {
+  field,
+  tag = 'div',
+  editable = true,
+  emptyFieldEditingComponent,
+} = Astro.props as RichTextProps;
+
+const isEmptyField = isFieldValueEmpty(field);
+
+const Tag = tag;
+
+const attrs = (function () {
+  const { field, ...attrs } = Astro.props;
+  const { tag, ...finalAttrs } = attrs;
+  return finalAttrs;
+})();
+---
+
+{
+  (
+    <WithFieldMetadata field={field} editable={editable}>
+      <WithEmptyFieldEditingComponent
+        field={field}
+        editable={editable}
+        defaultEmptyFieldEditingComponent={
+          DefaultEmptyFieldEditingComponentText
+        }
+        emptyFieldEditingComponent={emptyFieldEditingComponent}
+        {...attrs}
+      >
+        {!isEmptyField && <Tag {...attrs} set:html={field.value} />}
+      </WithEmptyFieldEditingComponent>
+    </WithFieldMetadata>
+  )
+}

package/src/components/Text.astro

@@ -1,97 +1,97 @@
----
-import {
-  FieldMetadata,
-  isFieldValueEmpty,
-} from '@sitecore-content-sdk/core/layout';
-import { EditableFieldProps } from './sharedTypes';
-import WithFieldMetadata from '../enhancers/WithFieldMetadata.astro';
-import WithEmptyFieldEditingComponent from '../enhancers/WithEmptyFieldEditingComponent.astro';
-import DefaultEmptyFieldEditingComponentText from './DefaultEmptyFieldEditingComponentText.astro';
-
-export interface TextField extends FieldMetadata {
-  value?: string | number;
-}
-
-export interface TextProps extends EditableFieldProps {
-  [htmlAttributes: string]: unknown;
-  /** The text field data. */
-  field: TextField;
-  /**
-   * The HTML element that will wrap the contents of the field.
-   */
-  tag?: string;
-  /**
-   * If false, HTML-encoding of the field value is disabled and the value is rendered as-is.
-   */
-  encode?: boolean;
-}
-
-const {
-  field,
-  tag,
-  editable = true,
-  encode = true,
-  emptyFieldEditingComponent,
-  ...otherProps
-} = Astro.props as TextProps;
-
-const isEmptyField = isFieldValueEmpty(field);
-
-// can't use editable value if we want to output unencoded
-const isEditable = !encode ? false : editable;
-
-let output: string | number | string[] = '';
-if (!isEmptyField) {
-  output = field.value === undefined ? '' : field.value;
-
-  // when string value isn't formatted, we should format line breaks
-  const splitted = String(output).split('\n');
-
-  if (splitted.length) {
-    const formatted: string[] = [];
-
-    splitted.forEach((str, i) => {
-      const isLast = i === splitted.length - 1;
-
-      formatted.push(str);
-
-      if (!isLast) {
-        formatted.push('<br />');
-      }
-    });
-
-    output = formatted;
-  }
-}
-
-const Tag = tag || 'span';
-
-const attrs: {
-  [htmlAttributes: string]: unknown;
-} = {
-  ...otherProps,
-};
----
-
-{
-  (
-    <WithFieldMetadata field={field} editable={isEditable}>
-      <WithEmptyFieldEditingComponent
-        field={field}
-        editable={isEditable}
-        defaultEmptyFieldEditingComponent={
-          DefaultEmptyFieldEditingComponentText
-        }
-        emptyFieldEditingComponent={emptyFieldEditingComponent}
-        {...attrs}
-      >
-        {!isEmptyField && (
-          <>
-            {(tag || !encode) && <Tag {...attrs} set:html={output} />}
-            {(!tag || encode) && <Fragment {...attrs} set:html={output} />}
-          </>
-        )}
-      </WithEmptyFieldEditingComponent>
-    </WithFieldMetadata>
-  )
-}
+---
+import {
+  FieldMetadata,
+  isFieldValueEmpty,
+} from '@sitecore-content-sdk/core/layout';
+import { EditableFieldProps } from './sharedTypes';
+import WithFieldMetadata from '../enhancers/WithFieldMetadata.astro';
+import WithEmptyFieldEditingComponent from '../enhancers/WithEmptyFieldEditingComponent.astro';
+import DefaultEmptyFieldEditingComponentText from './DefaultEmptyFieldEditingComponentText.astro';
+
+export interface TextField extends FieldMetadata {
+  value?: string | number;
+}
+
+export interface TextProps extends EditableFieldProps {
+  [htmlAttributes: string]: unknown;
+  /** The text field data. */
+  field: TextField;
+  /**
+   * The HTML element that will wrap the contents of the field.
+   */
+  tag?: string;
+  /**
+   * If false, HTML-encoding of the field value is disabled and the value is rendered as-is.
+   */
+  encode?: boolean;
+}
+
+const {
+  field,
+  tag,
+  editable = true,
+  encode = true,
+  emptyFieldEditingComponent,
+  ...otherProps
+} = Astro.props as TextProps;
+
+const isEmptyField = isFieldValueEmpty(field);
+
+// can't use editable value if we want to output unencoded
+const isEditable = !encode ? false : editable;
+
+let output: string | number | string[] = '';
+if (!isEmptyField) {
+  output = field.value === undefined ? '' : field.value;
+
+  // when string value isn't formatted, we should format line breaks
+  const splitted = String(output).split('\n');
+
+  if (splitted.length) {
+    const formatted: string[] = [];
+
+    splitted.forEach((str, i) => {
+      const isLast = i === splitted.length - 1;
+
+      formatted.push(str);
+
+      if (!isLast) {
+        formatted.push('<br />');
+      }
+    });
+
+    output = formatted;
+  }
+}
+
+const Tag = tag || 'span';
+
+const attrs: {
+  [htmlAttributes: string]: unknown;
+} = {
+  ...otherProps,
+};
+---
+
+{
+  (
+    <WithFieldMetadata field={field} editable={isEditable}>
+      <WithEmptyFieldEditingComponent
+        field={field}
+        editable={isEditable}
+        defaultEmptyFieldEditingComponent={
+          DefaultEmptyFieldEditingComponentText
+        }
+        emptyFieldEditingComponent={emptyFieldEditingComponent}
+        {...attrs}
+      >
+        {!isEmptyField && (
+          <>
+            {(tag || !encode) && <Tag {...attrs} set:html={output} />}
+            {(!tag || encode) && <Fragment {...attrs} set:html={output} />}
+          </>
+        )}
+      </WithEmptyFieldEditingComponent>
+    </WithFieldMetadata>
+  )
+}

package/src/enhancers/WithEmptyFieldEditingComponent.astro

@@ -1,56 +1,56 @@
----
-/**
- *  Returns the passed field component or default component in case field value is empty and edit mode is 'metadata'
- */
-
-import {
-  GenericFieldValue,
-  Field,
-  isFieldValueEmpty,
-  FieldMetadata,
-} from '@sitecore-content-sdk/core/layout';
-import { AstroContentSdkComponent } from '../sharedTypes/component-props';
-
-interface FieldComponentProps {
-  // Partial<T> type is used here because _field.value_ could be required or optional for the different field types
-  field?: (Partial<Field> | GenericFieldValue) & FieldMetadata;
-  editable?: boolean;
-  emptyFieldEditingComponent?: AstroContentSdkComponent;
-  defaultEmptyFieldEditingComponent: AstroContentSdkComponent;
-}
-
-const getEmptyFieldEditingComponent = (
-  props: FieldComponentProps
-): AstroContentSdkComponent | null => {
-  const { editable = true } = props;
-  if (props.field?.metadata && editable && isFieldValueEmpty(props.field)) {
-    return props.emptyFieldEditingComponent || props.defaultEmptyFieldEditingComponent;
-  }
-
-  return null;
-};
-
-const props = Astro.props as FieldComponentProps;
-const { editable = true } = props;
-
-const isEmptyEditableField = props.field?.metadata && editable && isFieldValueEmpty(props.field);
-
-const EmptyComponent = getEmptyFieldEditingComponent(props);
-
-let { defaultEmptyFieldEditingComponent, emptyFieldEditingComponent, ...resolvedProps } = props;
-
-// If no custom empty field editing component is provided, we can omit unnecessary props
-// to do not insert them to html
-if (!props.emptyFieldEditingComponent) {
-  resolvedProps = {
-    ...resolvedProps,
-    editable: undefined,
-    field: undefined,
-  };
-}
----
-
-<>
-  {isEmptyEditableField && EmptyComponent && <EmptyComponent {...resolvedProps} />}
-  {!isEmptyEditableField && <slot />}
-</>
+---
+/**
+ *  Returns the passed field component or default component in case field value is empty and edit mode is 'metadata'
+ */
+
+import {
+  GenericFieldValue,
+  Field,
+  isFieldValueEmpty,
+  FieldMetadata,
+} from '@sitecore-content-sdk/core/layout';
+import { AstroContentSdkComponent } from '../sharedTypes/component-props';
+
+interface FieldComponentProps {
+  // Partial<T> type is used here because _field.value_ could be required or optional for the different field types
+  field?: (Partial<Field> | GenericFieldValue) & FieldMetadata;
+  editable?: boolean;
+  emptyFieldEditingComponent?: AstroContentSdkComponent;
+  defaultEmptyFieldEditingComponent: AstroContentSdkComponent;
+}
+
+const getEmptyFieldEditingComponent = (
+  props: FieldComponentProps
+): AstroContentSdkComponent | null => {
+  const { editable = true } = props;
+  if (props.field?.metadata && editable && isFieldValueEmpty(props.field)) {
+    return props.emptyFieldEditingComponent || props.defaultEmptyFieldEditingComponent;
+  }
+
+  return null;
+};
+
+const props = Astro.props as FieldComponentProps;
+const { editable = true } = props;
+
+const isEmptyEditableField = props.field?.metadata && editable && isFieldValueEmpty(props.field);
+
+const EmptyComponent = getEmptyFieldEditingComponent(props);
+
+let { defaultEmptyFieldEditingComponent, emptyFieldEditingComponent, ...resolvedProps } = props;
+
+// If no custom empty field editing component is provided, we can omit unnecessary props
+// to do not insert them to html
+if (!props.emptyFieldEditingComponent) {
+  resolvedProps = {
+    ...resolvedProps,
+    editable: undefined,
+    field: undefined,
+  };
+}
+---
+
+<>
+  {isEmptyEditableField && EmptyComponent && <EmptyComponent {...resolvedProps} />}
+  {!isEmptyEditableField && <slot />}
+</>

package/src/enhancers/WithFieldMetadata.astro

@@ -1,31 +1,31 @@
----
-/**
- *  Wraps the field component with metadata markup intended to be used for chromes hydration in Pages
- */
-
-import FieldMetadata from '../components/FieldMetadata.astro';
-
-interface WithMetadataProps {
-  field?: {
-    metadata?: { [key: string]: unknown };
-  };
-  editable?: boolean;
-}
-
-const componentProps = Astro.props as WithMetadataProps;
-
-const { editable = true } = componentProps;
-const metadata = componentProps.field?.metadata;
-const isEditable = metadata && editable;
----
-
-<>
-  {!isEditable && <slot />}
-  {
-    isEditable && (
-      <FieldMetadata metadata={metadata}>
-        <slot />
-      </FieldMetadata>
-    )
-  }
-</>
+---
+/**
+ *  Wraps the field component with metadata markup intended to be used for chromes hydration in Pages
+ */
+
+import FieldMetadata from '../components/FieldMetadata.astro';
+
+interface WithMetadataProps {
+  field?: {
+    metadata?: { [key: string]: unknown };
+  };
+  editable?: boolean;
+}
+
+const componentProps = Astro.props as WithMetadataProps;
+
+const { editable = true } = componentProps;
+const metadata = componentProps.field?.metadata;
+const isEditable = metadata && editable;
+---
+
+<>
+  {!isEditable && <slot />}
+  {
+    isEditable && (
+      <FieldMetadata metadata={metadata}>
+        <slot />
+      </FieldMetadata>
+    )
+  }
+</>