= ({
}) => {
max = max || items.length
const remainder = items.length - max
- const tags = items.slice(0, max)
+ // filter out empty array items, and restrict to `max`
+ const tags = items.filter((tag) => tag !== '').slice(0, max)
const shouldShowMore = showMore && remainder > 0
const classes = className ? `${styles.tags} ${className}` : styles.tags
diff --git a/src/components/pages/Publish/Preview.tsx b/src/components/pages/Publish/Preview.tsx
index f1a3fecf1..fa18ecf6e 100644
--- a/src/components/pages/Publish/Preview.tsx
+++ b/src/components/pages/Publish/Preview.tsx
@@ -7,6 +7,7 @@ import styles from './Preview.module.css'
import File from '../../atoms/File'
import { MetadataPublishForm } from '../../../@types/MetaData'
import Button from '../../atoms/Button'
+import { transformTags } from './utils'
export default function Preview({
values
@@ -72,7 +73,7 @@ export default function Preview({
Download Sample
)}
- {values.tags && }
+ {values.tags && }
diff --git a/src/components/pages/Publish/utils.ts b/src/components/pages/Publish/utils.ts
index 7814f2025..76c89849b 100644
--- a/src/components/pages/Publish/utils.ts
+++ b/src/components/pages/Publish/utils.ts
@@ -1,6 +1,13 @@
import { MetadataMarket, MetadataPublishForm } from '../../../@types/MetaData'
import { toStringNoMS } from '../../../utils'
import AssetModel from '../../../models/Asset'
+import slugify from '@sindresorhus/slugify'
+
+export function transformTags(value: string): string[] {
+ const originalTags = value?.split(',')
+ const transformedTags = originalTags?.map((tag) => slugify(tag).toLowerCase())
+ return transformedTags
+}
export function transformPublishFormToMetadata(
data: Partial
@@ -33,7 +40,7 @@ export function transformPublishFormToMetadata(
...AssetModel.additionalInformation,
description,
copyrightHolder,
- tags: tags?.split(','),
+ tags: transformTags(tags),
links: typeof links !== 'string' && links,
termsAndConditions
}