Advanced select's documentation copies invalid JSON when used without dark classes

[Gordi90]

Steps to reproduce

1. Go to any of the advanced select's documentation page:

• https://preline.co/plugins/html/advanced-select.html
• https://preline.co/docs/advanced-select.html

2. Set the setting of "Copy to clipboard with dark: classes" to false next to an example copy button
3. Copy the example code with the copy button
4. In the copied code the JSON for data-hs-select is invalid. Here is the given JSON for the country selector example

{
  "hasSearch": true,
  "searchPlaceholder": "Search...",
  "searchClasses": "block w-full text-sm border-gray-200 rounded-lg focus:border-blue-500 focus:ring-blue-500 before:absolute before:inset-0 before:z-[1] py-2 px-3",
  "searchWrapperClasses": "bg-white p-2 -mx-1 sticky top-0",
  "placeholder": "Select country...",
  "toggleTag": "<button type=\"button\"><span class=\"me-2\" data-icon></span><span class=\"text-gray-800" data-title></span></button>",
  "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative py-3 px-4 pe-9 flex text-nowrap w-full cursor-pointer bg-white border border-gray-200 rounded-lg text-start text-sm focus:border-blue-500 focus:ring-blue-500 before:absolute before:inset-0 before:z-[1]",
  "dropdownClasses": "mt-2 max-h-72 pb-1 px-1 space-y-0.5 z-20 w-full bg-white border border-gray-200 rounded-lg overflow-hidden overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-track]:bg-gray-100 [&::-webkit-scrollbar-thumb]:bg-gray-300",
  "optionClasses": "py-2 px-4 w-full text-sm text-gray-800 cursor-pointer hover:bg-gray-100 rounded-lg focus:outline-none focus:bg-gray-100",
  "optionTemplate": "<div><div class=\"flex items-center\"><div class=\"me-2\" data-icon></div><div class=\"text-gray-800" data-title></div></div></div>",
  "extraMarkup": "<div class=\"absolute top-1/2 end-3 -translate-y-1/2\"><svg class=\"flex-shrink-0 size-3.5 text-gray-500" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m7 15 5 5 5-5\"/><path d=\"m7 9 5-5 5 5\"/></svg></div>"
}

Validator screenshot:

I didn't check all the examples, but https://preline.co/plugins/html/advanced-select.html#example is also affected

Suspected cause

Probably wrong regex is used to remove the dark classes. It seems that with the dark classes the following escape characters are removed as well. In my example "text-gray-800" should be "text-gray-800\" in two occasions at "toggleTag" and "optionTemplate". The text-gray-500" should be text-gray-500\" for the "extraMarkup" as well.

Probably other examples are affected as well.

[f-tepel]

I have the same problem here. I can confirm that the escaping is indeed the problem. After fixing it i get weird borders in my inputs which I can not get away tho. @Gordi90 did you solve this problem somehow?

[Gordi90]

I suggest to check your "fix". I have no display issues after removing the dark classes properly.

[f-tepel]

Can you please paste your corrected version @Gordi90 ?

[jahaganiev]

Hey @Gordi90 - please check out the latest version, the issue has been fixed. Thanks!