fix(CopySnippet): various improvements (#562)

Author: tenphi

.changeset/few-seahorses-agree.md

@@ -0,0 +1,5 @@
+---
+'@cube-dev/ui-kit': patch
+---
+
+Change PrismCode default font and add selection styles.

.changeset/sharp-bulldogs-press.md

@@ -0,0 +1,5 @@
+---
+'@cube-dev/ui-kit': patch
+---
+
+Improve CopySnippet formatting to clear CR symbols and remove spaces at the end of each line.

src/components/GlobalStyles.tsx

@@ -243,7 +243,7 @@ const GlobalStylesElement = createGlobalStyle<GlobalStylesElementProps>`
   pre[class*="language-"] {
     color: var(--dark-color);
     background: none;
-    font-family: "Source Code Pro", Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+    font-family: var(--monospace-font);
     text-align: left;
     font-weight: normal;
     font-size: 14px;
@@ -268,13 +268,13 @@ const GlobalStylesElement = createGlobalStyle<GlobalStylesElementProps>`
   pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
   code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
     text-shadow: none;
-    /*background: #b3d4fc;*/
+    background: rgba(var(--purple-color-rgb), .2);
   }
 
   pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
   code[class*="language-"]::selection, code[class*="language-"] ::selection {
     text-shadow: none;
-    /*background: #b3d4fc;*/
+    background: rgba(var(--purple-color-rgb), .2);
   }
 
   @media print {

src/components/content/CopySnippet/CopySnippet.stories.tsx

@@ -116,6 +116,13 @@ JavascriptSyntax.args = {
 });`,
 };
 
+export const DAX = Template.bind({});
+DAX.args = {
+  language: 'javascript',
+  height: 'max 30x',
+  code: 'DEFINE\r\n\tVAR __DS0FilterTable = \r\n\t\tTREATAS({"Computers",\r\n\t\t\t"Electronics",\r\n\t\t\t"Home"}, \'orders\'[product_category])\r\n\r\n\tVAR __DS0Core = \r\n\t\tSUMMARIZECOLUMNS(\r\n\t\t\tROLLUPADDISSUBTOTAL(\'orders\'[product_category], "IsGrandTotalRowTotal"),\r\n\t\t\t__DS0FilterTable,\r\n\t\t\t"revenue", \'orders\'[revenue],\r\n\t\t\t"count", \'orders\'[count],\r\n\t\t\t"completed_count", \'orders\'[completed_count],\r\n\t\t\t"completed_percentage", \'orders\'[completed_percentage]\r\n\t\t)\r\n\r\n\tVAR __DS0PrimaryWindowed = \r\n\t\tTOPN(502, __DS0Core, [IsGrandTotalRowTotal], 0, [revenue], 0, \'orders\'[product_category], 1)\r\n\r\nEVALUATE\r\n\t__DS0PrimaryWindowed\r\n\r\nORDER BY\r\n\t[IsGrandTotalRowTotal] DESC, [revenue] DESC, \'orders\'[product_category]',
+};
+
 export const Complex = Template.bind({});
 Complex.args = {
   language: 'javascript',

src/components/content/CopySnippet/CopySnippet.tsx

@@ -186,8 +186,9 @@ function CopySnippet(allProps: CubeCopySnippetProps) {
 
   const multiline = pristineCode.includes('\n') && !nowrap;
   let formattedCode = pristineCode
+    .replace(/\r/g, '')
     .split(/\n/g)
-    .map((line) => `${prefix}${line} `)
+    .map((line) => `${prefix}${line}`)
     .join('\n')
     .trim();