diff --git a/src/app/components/Editor.tsx b/src/app/components/Editor.tsx
index 43e1c10..3ba6700 100644
--- a/src/app/components/Editor.tsx
+++ b/src/app/components/Editor.tsx
@@ -42,6 +42,8 @@ import { getPubliccodeYmlVersionList } from "../contents/publiccode-yml-version"
import { isMinorThanLatest, toSemVerObject } from "../semver";
import { resetPubliccodeYmlLanguages, setPubliccodeYmlLanguages } from "../store/publiccodeYmlLanguages";
import yamlSerializer from "../yaml-serializer";
+import { removeDuplicate } from "../yaml-upload";
+import EditorUsedBy from "./EditorUsedBy";
const validatorFn = async (values: PublicCode) => await validator({ publiccode: JSON.stringify(values), baseURL: values.url });
@@ -189,6 +191,11 @@ export default function Editor() {
if (publicCode) {
const values = { ...defaultValues, ...publicCode } as PublicCode;
+
+ if (publicCode.usedBy) {
+ values.usedBy = removeDuplicate(publicCode.usedBy)
+ }
+
setLanguages(publicCode);
reset(values);
@@ -372,7 +379,9 @@ export default function Editor() {
filter="contains"
/>
-
+
+
+
fieldName="legal.license"
diff --git a/src/app/components/EditorUsedBy.tsx b/src/app/components/EditorUsedBy.tsx
new file mode 100644
index 0000000..69c5f8e
--- /dev/null
+++ b/src/app/components/EditorUsedBy.tsx
@@ -0,0 +1,78 @@
+import { Button, Icon, Input, InputGroup } from "design-react-kit";
+import { useState } from "react";
+import { useController, useFormContext } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import PublicCode from "../contents/publiccode";
+import { removeDuplicate } from "../yaml-upload";
+
+export default function EditorUsedBy(): JSX.Element {
+ const { control } = useFormContext();
+ const {
+ field: { onChange, value },
+ } = useController({
+ control,
+ name: `usedBy`,
+ shouldUnregister: true,
+ });
+ const { t } = useTranslation();
+
+ const usedBy: string[] = value ? (value as string[]) : [];
+ const [current, setCurrent] = useState("");
+
+ const label = t(`publiccodeyml.usedBy.label`);
+ const description = t(`publiccodeyml.usedBy.description`);
+
+ const add = () => {
+ onChange(removeDuplicate([...usedBy, current.trim()]));
+ setCurrent("");
+ };
+
+ const remove = (feat: string) => {
+ onChange(usedBy.filter((elem) => elem !== feat));
+ };
+
+
+ return (
+
+
+
+ {usedBy.map((feat) => (
+ -
+ {feat}
+
+
+ ))}
+
+
+ setCurrent(target.value)}
+ />
+
+
+
+
+
+
{description}
+
+ );
+}
diff --git a/src/app/yaml-upload.ts b/src/app/yaml-upload.ts
index ba04192..99c0fe0 100644
--- a/src/app/yaml-upload.ts
+++ b/src/app/yaml-upload.ts
@@ -9,4 +9,6 @@ export const isYamlFile = (file?: File | null) => Boolean(file?.type && yamlMime
export const hasYamlFileExtension = (value?: string) => {
const ext = value?.split(/[. ]+/).pop();
return ext === "yml" || ext === "yaml";
-}
\ No newline at end of file
+}
+
+export const removeDuplicate = (array: Array) => [...new Set(array)];
\ No newline at end of file