Sanity Studio freezes when validating slug with custom regex

This is a known issue with certain regex patterns causing catastrophic backtracking, which completely freezes the browser. The problem occurs when the regex engine gets stuck trying to match invalid slugs, especially as they get longer.

The issue is with patterns like these:

/^[a-z]([a-z0-9/]*(?:-[a-z0-9]+)*)+$/
^[A-Za-z0-9]+(?:-[A-Za-z0-9]+)*$

These patterns have nested quantifiers (like * inside +) that cause exponential time complexity when matching fails. When you type something like lorem-ipsum-lorem-ipsum-lorem-ipsum- (ending with a dash), the regex engine tries countless possible ways to match the pattern, causing the freeze.

The solution is to rewrite your regex to avoid nested quantifiers. Based on the discussion thread, this pattern works well:

{
  name: "slug",
  type: "slug",
  title: "Slug",
  validation: (Rule) =>
    Rule.custom((slug) => {
      if (typeof slug === "undefined") {
        return "Slug is required.";
      }
      const regex = /^[a-z][a-z0-9]*((\/)|-)?[a-z0-9])*$/;
      if (regex.test(slug.current)) {
        return true;
      }
      return "Not a valid slug.";
    }),
}

This pattern:

• Must start with a lowercase letter
• Can contain lowercase letters or numbers
• Allows / or - between letters/numbers
• Doesn't have the nested quantifier problem

The key takeaway is to avoid patterns with nested repetition operators that can cause catastrophic backtracking. Test your regex patterns with tools like regex101.com to check for performance issues before using them in validation rules.