feat(frontend): add sanitizer for tag input

paulrobertlloyd · paulrobertlloyd · commit e0b47dbc6e55 · 2024-04-12T20:41:56.000+01:00
diff --git a/packages/frontend/components/tag-input/sanitizer.js b/packages/frontend/components/tag-input/sanitizer.js
@@ -0,0 +1,27 @@
+export const tagInputSanitizer = {
+  customSanitizer: (value) => {
+    try {
+      // Entered using progressively enhanced tag input, for example:
+      // `["foo", "bar"]`
+      return JSON.parse(value);
+    } catch {
+      // Entered using comma separated values, for example:
+      // `foo, bar`
+
+      // Convert string to Array
+      let tags = value.split(",");
+
+      // Trim whitespace
+      tags = tags.map((tag) => String(tag).trim());
+
+      // Remove empty values
+      tags = tags.filter((tag) => tag !== "");
+
+      // Remove duplicate values
+      tags = [...new Set(tags)];
+
+      // Return sanitized array
+      return tags;
+    }
+  },
+};
diff --git a/packages/frontend/index.js b/packages/frontend/index.js
@@ -5,3 +5,5 @@ export { appIcon } from "./lib/app-icon.js";
 export { templates } from "./lib/nunjucks.js";
 export { styles } from "./lib/lightningcss.js";
 export { scripts } from "./lib/rollup.js";
+
+export { tagInputSanitizer } from "./components/tag-input/sanitizer.js";
diff --git a/packages/frontend/test/unit/components/tag-input.js b/packages/frontend/test/unit/components/tag-input.js
@@ -0,0 +1,16 @@
+import { strict as assert } from "node:assert";
+import { describe, it } from "node:test";
+import { tagInputSanitizer } from "../../../components/tag-input/sanitizer.js";
+
+describe("frontend/components/tag-input/sanitizer", () => {
+  it("Excerpts a string", () => {
+    assert.deepEqual(tagInputSanitizer.customSanitizer("foo, bar, bar,"), [
+      "foo",
+      "bar",
+    ]);
+    assert.deepEqual(tagInputSanitizer.customSanitizer(`["foo","bar"]`), [
+      "foo",
+      "bar",
+    ]);
+  });
+});
