feat(code snippet): allow code to be rendered as is

libs/components/src/code-snippet/code-snippet.spec.ts

@@ -1,11 +1,38 @@
 /**
  * @vitest-environment jsdom
  */
-import { it, describe, expect } from 'vitest';
+import { describe, expect, it } from 'vitest';
 import { CovalentCodeSnippet } from './code-snippet';
 
 describe('Code snippet', () => {
   it('should work', () => {
     expect(new CovalentCodeSnippet()).toBeDefined();
   });
+
+  it('should trim surrounding whitespace by default', async () => {
+    const snippet = new CovalentCodeSnippet();
+    (snippet as any)._code = '  const answer = 42;  ';
+    document.body.appendChild(snippet);
+
+    await snippet.updateComplete;
+
+    const code = snippet.shadowRoot?.querySelector('code');
+    expect(code?.textContent).toBe('const answer = 42;');
+
+    document.body.removeChild(snippet);
+  });
+
+  it('should preserve surrounding whitespace when skipTrim is true', async () => {
+    const snippet = new CovalentCodeSnippet();
+    (snippet as any)._code = '  const answer = 42;  ';
+    snippet.skipTrim = true;
+    document.body.appendChild(snippet);
+
+    await snippet.updateComplete;
+
+    const code = snippet.shadowRoot?.querySelector('code');
+    expect(code?.textContent).toBe('  const answer = 42;  ');
+
+    document.body.removeChild(snippet);
+  });
 });

libs/components/src/code-snippet/code-snippet.stories.js

@@ -33,11 +33,12 @@ SELECT * FROM load_to_teradata (
 `;
 
 const codeSnippetTemplate = ({
-  inline,
   content,
-  hideHeader,
   label,
   language,
+  hideHeader,
+  inline,
+  skipTrim,
   maxHeight,
 }) => {
   document.addEventListener(
@@ -60,17 +61,19 @@ const codeSnippetTemplate = ({
     },
     { once: true },
   );
+  // do not add extra spaces in the HTML code
   return `
     <cv-code-snippet
-        label="${label}"
-        maxHeight="${maxHeight}"
-        language="${language}"
-        ${hideHeader ? 'hideHeader' : ''}
-        ${inline ? 'inline' : ''}>
-    <cv-icon-button slot="actionItems" id="theme-toggle"></cv-icon-button>
-    <cv-icon-button slot="actionItems" icon="content_copy"></cv-icon-button>
-    ${content}
-    </cv-code-snippet>`;
+      label="${label}"
+      maxHeight="${maxHeight}"
+      language="${language}"
+      ${hideHeader ? 'hideHeader' : ''}
+      ${inline ? 'inline' : ''}
+      ${skipTrim ? 'skipTrim' : ''}
+    ><cv-icon-button slot="actionItems" id="theme-toggle"
+    ></cv-icon-button><cv-icon-button
+    slot="actionItems" icon="content_copy"
+    ></cv-icon-button>${content}</cv-code-snippet>`;
 };
 
 const dialogTemplate = (args) => {
@@ -101,7 +104,8 @@ export default {
   args: {
     hideHeader: false,
     inline: false,
-    label: 'Example.sql',
+    skipTrim: false,
+    label: 'Explain plan',
     language: 'sql',
     content: sqlContent,
     maxHeight: 0,
@@ -129,6 +133,15 @@ export const HiddenHeader = {
   },
 };
 
+export const SkipTrim = {
+  args: {
+    content:
+      '  1) First, we lock TABLE_NAME in DB_NAME for\n\n     access, and we lock TABLE_NAME2 in DB_NAME2 for access.\n\n  2) Next, we do an all-AMPs JOIN step in DB_NAME from\n\n     TABLE_NAME by way of an all-rows scan with no\n',
+    language: 'plaintext',
+    skipTrim: true,
+  },
+};
+
 export const Dialog = {
   render: dialogTemplate,
   args: {

libs/components/src/code-snippet/code-snippet.ts

@@ -1,8 +1,8 @@
-import { css, LitElement, html, unsafeCSS } from 'lit';
+import hljs from 'highlight.js/lib/common';
+import { css, html, LitElement, unsafeCSS } from 'lit';
 import { customElement, property, queryAssignedNodes } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import styles from './code-snippet.scss?inline';
-import hljs from 'highlight.js/lib/common';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -30,6 +30,9 @@ export class CovalentCodeSnippet extends LitElement {
   @property({ type: Boolean, reflect: true })
   hideHeader = false;
 
+  @property({ type: Boolean, reflect: true })
+  skipTrim = false;
+
   @queryAssignedNodes({})
   _codeItems!: Array<Node>;
 
@@ -68,7 +71,7 @@ export class CovalentCodeSnippet extends LitElement {
     };
     classes[`language-${this.language}`] = true;
     const container = document.createElement('div');
-    container.innerHTML = this._code.trim();
+    container.innerHTML = this.skipTrim ? this._code : this._code.trim();
 
     let styleHeight;
     if (this.maxHeight && this.maxHeight > 0) {