From ff9c1926d591613aa6d7a1ad898f1008655b52c4 Mon Sep 17 00:00:00 2001
From: DrMint <29893320+DrMint@users.noreply.github.com>
Date: Fri, 10 May 2024 20:40:06 +0200
Subject: [PATCH] Icon field validation

---
 package-lock.json                 | 29 ++++++++++++++++++++++-------
 package.json                      |  1 +
 src/collections/Pages/Pages.ts    |  1 +
 src/fields/iconField/iconField.ts |  9 +++++++++
 4 files changed, 33 insertions(+), 7 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 925e31a..e2fb1c2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
       "license": "MIT",
       "dependencies": {
         "@fontsource/vollkorn": "5.0.20",
+        "@iconify-json/material-symbols": "^1.1.79",
         "@payloadcms/bundler-webpack": "1.0.6",
         "@payloadcms/db-mongodb": "1.5.1",
         "@payloadcms/richtext-lexical": "0.10.0",
@@ -1960,6 +1961,19 @@
         "@hapi/hoek": "^9.0.0"
       }
     },
+    "node_modules/@iconify-json/material-symbols": {
+      "version": "1.1.79",
+      "resolved": "https://registry.npmjs.org/@iconify-json/material-symbols/-/material-symbols-1.1.79.tgz",
+      "integrity": "sha512-/OvCxrxPQ/qncjGAPZkNk6LEpVX1nIK6e6BhMsbXMT5pEpnrePsRsVOYsiB8bJn3x67HP8zBrxZSYisDCKf8ow==",
+      "dependencies": {
+        "@iconify/types": "*"
+      }
+    },
+    "node_modules/@iconify/types": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@iconify/types/-/types-2.0.0.tgz",
+      "integrity": "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg=="
+    },
     "node_modules/@img/sharp-darwin-arm64": {
       "version": "0.33.3",
       "resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.33.3.tgz",
@@ -4316,9 +4330,9 @@
       }
     },
     "node_modules/acorn": {
-      "version": "8.10.0",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.10.0.tgz",
-      "integrity": "sha512-F0SAmZ8iUtS//m8DmCTA0jlh6TDKkHQyK6xc6V4KDTyZKA9dnvX9/3sRTVQrWm79glUAZbnmmNcdYwUIHWVybw==",
+      "version": "8.11.3",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz",
+      "integrity": "sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==",
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -12351,14 +12365,15 @@
       }
     },
     "node_modules/svgo": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/svgo/-/svgo-3.0.2.tgz",
-      "integrity": "sha512-Z706C1U2pb1+JGP48fbazf3KxHrWOsLme6Rv7imFBn5EnuanDW1GPaA/P1/dvObE670JDePC3mnj0k0B7P0jjQ==",
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/svgo/-/svgo-3.3.2.tgz",
+      "integrity": "sha512-OoohrmuUlBs8B8o6MB2Aevn+pRIH9zDALSR+6hhqVfa6fRwG/Qw9VUMSMW9VNg2CFc/MTIfabtdOVl9ODIJjpw==",
       "dependencies": {
         "@trysound/sax": "0.2.0",
         "commander": "^7.2.0",
         "css-select": "^5.1.0",
-        "css-tree": "^2.2.1",
+        "css-tree": "^2.3.1",
+        "css-what": "^6.1.0",
         "csso": "^5.0.5",
         "picocolors": "^1.0.0"
       },
diff --git a/package.json b/package.json
index 0c72433..16f1426 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
   },
   "dependencies": {
     "@fontsource/vollkorn": "5.0.20",
+    "@iconify-json/material-symbols": "^1.1.79",
     "@payloadcms/bundler-webpack": "1.0.6",
     "@payloadcms/db-mongodb": "1.5.1",
     "@payloadcms/richtext-lexical": "0.10.0",
diff --git a/src/collections/Pages/Pages.ts b/src/collections/Pages/Pages.ts
index d7e5136..8e97b68 100644
--- a/src/collections/Pages/Pages.ts
+++ b/src/collections/Pages/Pages.ts
@@ -115,6 +115,7 @@ export const Pages = buildVersionedCollectionConfig({
           },
           editor: createEditor({
             images: true,
+            relations: true,
             inlines: true,
             alignment: true,
             blocks: [sectionBlock, transcriptBlock, breakBlock],
diff --git a/src/fields/iconField/iconField.ts b/src/fields/iconField/iconField.ts
index dfce027..3a25d49 100644
--- a/src/fields/iconField/iconField.ts
+++ b/src/fields/iconField/iconField.ts
@@ -1,7 +1,10 @@
+import { icons } from "@iconify-json/material-symbols";
 import { TextField } from "payload/types";
 
 type Props = Omit<TextField, "type" | "hasMany" | "maxRows" | "minRows">;
 
+const validNames = Object.keys(icons.icons).map((name) => `material-symbols:${name}`);
+
 export const iconField = (props: Props): TextField => ({
   ...props,
   type: "text",
@@ -9,4 +12,10 @@ export const iconField = (props: Props): TextField => ({
     description:
       "Select an icon from here: https://icones.js.org/collection/material-symbols. Only outline and regular variants are usable on the website.",
   },
+  validate: (value) => {
+    if (!validNames.includes(value)) {
+      return `The icon "${value}" doesn't exist in material-symbols`;
+    }
+    return true;
+  },
 });