Merge e384dff into f01e83d

.changeset/famous-birds-compare.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/wonder-blocks-core": patch
+---
+
+Allow all special characters in IDs, except whitespace.

packages/wonder-blocks-core/src/util/__tests__/__snapshots__/unique-id-factory.test.ts.snap

@@ -1,7 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`UniqueIDFactory #constructor special characters in scope, throws 1`] = `"Invalid factory scope: invalid$%^&*("`;
-
 exports[`UniqueIDFactory #constructor whitespace in scope, throws 1`] = `"Invalid factory scope: not valid scope"`;
 
 exports[`UniqueIDFactory #constructor whitespace only scope, throws 1`] = `"Invalid factory scope:      "`;

packages/wonder-blocks-core/src/util/__tests__/unique-id-factory.test.ts

@@ -45,15 +45,15 @@ describe("UniqueIDFactory", () => {
             expect(underTest).toThrowErrorMatchingSnapshot();
         });
 
-        test("special characters in scope, throws", () => {
+        test("special characters in scope, should not throw", () => {
             // Arrange
             const scope = "invalid$%^&*(";
 
             // Act
             const underTest = () => new UniqueIDFactory(scope);
 
             // Assert
-            expect(underTest).toThrowErrorMatchingSnapshot();
+            expect(underTest).not.toThrow();
         });
     });
 

packages/wonder-blocks-core/src/util/unique-id-factory.ts

@@ -33,14 +33,13 @@ export default class UniqueIDFactory implements IIdentifierFactory {
      * identifier. It does not assert that a string IS a valid identifier (for
      * example, that it doesn't start with numbers). We don't need to do that
      * here because all identifiers are prefixed to avoid needing that check.
+     *
+     * According to this post:
+     * https://stackoverflow.com/questions/70579/html-valid-id-attribute-values/31773673#31773673
+     * The only characters that are not allowed in an id are whitespace characters.
      */
     _hasValidIdChars(value?: string | null): boolean {
-        if (typeof value !== "string") {
-            return false;
-        }
-
-        const invalidCharsReplaced = value.replace(/[^\d\w-]/g, "-");
-        return value === invalidCharsReplaced;
+        return typeof value === "string" ? !/\s/.test(value) : false;
     }
 
     /**