[UIK-2766][website] add ASCII characters handling for sandbox

semcore/dropdown/__tests__/filters-with-dropdown/competitive-density.browser-test.tsx

@@ -121,7 +121,7 @@ test.describe(`${TAG.FUNCTIONAL} `, () => {
 
       await expect(locators.trigger(page)).toBeFocused();
 
-      await expect(locators.triggerText(page)).toHaveText('Com.: 2-7');
+      await expect(locators.triggerText(page)).toHaveText('Com.: 2–7');
     });
 
     await test.step('Verify hint on close button and trigger keyboard navigation', async () => {
@@ -166,7 +166,7 @@ test.describe(`${TAG.FUNCTIONAL} `, () => {
       await locators.textbox(page).nth(1).fill('8');
       await locators.button(page, 'Apply').click();
       await locators.button(page, 'Apply').waitFor({ state: 'hidden' });
-      await expect(locators.triggerText(page)).toHaveText('Com.: 1-8');
+      await expect(locators.triggerText(page)).toHaveText('Com.: 1–8');
       await expect(locators.button(page, 'Clear')).toBeVisible();
     });
 

semcore/select/__tests__/filters-with-select/filter-kd-positions-volume.browser-test.tsx

@@ -127,7 +127,7 @@ test.describe(TAG.FUNCTIONAL, () => {
       await locators.popper(page).waitFor({ state: 'hidden' });
 
       await expect(locators.trigger(page)).toBeFocused();
-      await expect(locators.trigger(page)).toHaveText(/Volume:\s*1,001-10,000/);
+      await expect(locators.trigger(page)).toHaveText(/Volume:\s*1,001–10,000/);
     });
 
     await test.step('Verify hint on close button and trigger keyboard navigation', async () => {
@@ -177,7 +177,7 @@ test.describe(TAG.FUNCTIONAL, () => {
       await page.keyboard.press('Tab');
       await page.keyboard.press('Enter');
       await locators.popper(page).waitFor({ state: 'hidden' });
-      await expect(locators.trigger(page)).toHaveText(/Volume:\s*1-5+/);
+      await expect(locators.trigger(page)).toHaveText(/Volume:\s*1–5+/);
     });
   });
 
@@ -200,7 +200,7 @@ test.describe(TAG.FUNCTIONAL, () => {
       await locators.popper(page).waitFor({ state: 'hidden' });
 
       await expect(locators.popper(page)).toBeHidden();
-      await expect(locators.trigger(page)).toHaveText(/Volume:\s*1,001-10,000/);
+      await expect(locators.trigger(page)).toHaveText(/Volume:\s*1,001–10,000/);
       await expect(locators.filterTriggerClear(page)).toHaveCount(1);
     });
 
@@ -231,7 +231,7 @@ test.describe(TAG.FUNCTIONAL, () => {
       await locators.textboxes(page).nth(1).fill('5');
       await locators.apply(page).click();
       await locators.popper(page).waitFor({ state: 'hidden' });
-      await expect(locators.trigger(page)).toHaveText(/Volume:\s*1-5/);
+      await expect(locators.trigger(page)).toHaveText(/Volume:\s*1–5/);
     });
   });
 });

stories/patterns/filters/filter-custom-range/docs/examples/basic-example.tsx

@@ -86,7 +86,7 @@ const InputRange: React.FC<InputRangeProps> = ({ value: valueState, changeValue,
 
 const setTriggerText = ({ from, to }: { from: string; to: string }): string | null => {
   if (from !== '' && to !== '') {
-    return from === to ? `${from}` : `${from}-${to}`;
+    return from === to ? `${from}` : `${from}–${to}`;
   }
   return null;
 };

stories/patterns/filters/filter-custom-range/docs/examples/presets.tsx

@@ -175,7 +175,7 @@ const Demo = () => {
       </Select.Trigger>
       <Select.Popper w={224} aria-label='Volume'>
         <Select.List aria-label='Presets'>
-          {['100,001+', '10,001-100,000', '1,001-10,000', '101-1,000', '11-100', '1-10'].map(
+          {['100,001+', '10,001–100,000', '1,001–10,000', '101–1,000', '11–100', '1–10'].map(
             (item) => (
               <Select.Option key={item} value={item}>
                 {item}

website/docs/.vitepress/renderSandbox.ts

@@ -190,8 +190,8 @@ export const renderSandbox = (
         tokens[idx + 1].executableCode = executableCode;
       }
 
-      const encodedHtmlCode = btoa(htmlCode);
-      const encodedRawCode = btoa(displayedCode);
+      const encodedHtmlCode = Buffer.from(htmlCode).toString('base64');
+      const encodedRawCode = Buffer.from(displayedCode).toString('base64');
 
       const sandboxArgs: Record<string, string | boolean> = {
         playgroundId: playgroundId,
@@ -201,7 +201,7 @@ export const renderSandbox = (
       };
 
       if (mockData) {
-        sandboxArgs.mockData = btoa(mockData);
+        sandboxArgs.mockData = Buffer.from(mockData).toString('base64');
       }
 
       const args = Object.entries(sandboxArgs).reduce((acc, [key, value]) => {

website/docs/.vitepress/theme/Sandbox.vue

@@ -33,8 +33,11 @@ const dataToLzCompressedJson = (data) => {
 };
 
 const { playgroundId, htmlCode: codeEncoded, rawCode: rawCodeEncoded, hideCode: hideCodeEncoded, stylesIsolation, mockData: mockDataEncoded } = defineProps({ playgroundId: String, htmlCode: String, rawCode: String, hideCode: String, stylesIsolation: Boolean, mockData: String })
+
+const decodeBase64 = (str: string) => new TextDecoder().decode(Uint8Array.from(atob(str), c => c.charCodeAt(0)));
+
 const htmlCode = computed(() => {
-  let code = atob(codeEncoded!);
+  let code = decodeBase64(codeEncoded!);
   return code.replace('tabindex="0" v-pre=""><code>', 'v-pre=""><code>');
 });
 
@@ -116,9 +119,9 @@ root.render(<App />);
   return `https://codesandbox.io/api/v1/sandboxes/define?parameters=${codesandboxParameters}`;
 })
 
-let rawCode = atob(rawCodeEncoded!);
+let rawCode = decodeBase64(rawCodeEncoded!);
 const hideCode = hideCodeEncoded === 'true';
-const mockData = mockDataEncoded && atob(mockDataEncoded);
+const mockData = mockDataEncoded && decodeBase64(mockDataEncoded);
 
 let reactRoot;