fix(code-editor): add disable scroll option for code editor (#2258)

Teradata · Oct 29, 2024 · 3e8584d · 3e8584d
1 parent 62ccccc
commit 3e8584d
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 6 deletions.
diff --git a/libs/components/src/code-editor/code-editor.stories.js b/libs/components/src/code-editor/code-editor.stories.js
@@ -26,13 +26,16 @@ export default {
     theme: 'cv-light',
     code: sqlContent,
     language: 'sql',
+    disableScroll: false,
   },
 };
 
-const Template = ({ theme, language, code }) => {
+const Template = ({ theme, language, code, disableScroll }) => {
   return `
   <div style="width: 800px; height: 100%">
-    <cv-code-editor language="${language}" theme="${theme}" code="${code}">
+    <cv-code-editor language="${language}" theme="${theme}" code="${code}" ${
+    disableScroll ? 'disableScroll' : ''
+  }>
     </cv-code-editor>
   </div>
    `;

diff --git a/libs/components/src/code-editor/code-editor.ts b/libs/components/src/code-editor/code-editor.ts
@@ -41,6 +41,10 @@ export class CovalentCodeEditor extends LitElement {
    * Code entered into the editor
    */
   @property() code?: string;
+  /**
+   * Disable scroll bar and set the editor height based on content
+   */
+  @property({ type: Boolean, reflect: true }) disableScroll?: boolean = false;
   /**
    * Options that can be set for the editor
    */
@@ -155,10 +159,12 @@ export class CovalentCodeEditor extends LitElement {
         );
       });
 
-      // Adjust the height of the editor when content changes, to avoid vertical scroll bar
-      this.editor?.onDidContentSizeChange(() => {
-        this.adjustHeight();
-      });
+      if (this.disableScroll) {
+        // Adjust the height of the editor when content changes, to avoid vertical scroll bar
+        this.editor?.onDidContentSizeChange(() => {
+          this.adjustHeight();
+        });
+      }
 
       this.adjustHeight();
 

diff --git a/libs/components/src/notebook-cell/notebook-cell.ts b/libs/components/src/notebook-cell/notebook-cell.ts
@@ -227,6 +227,7 @@ export class CovalentNotebookCell extends LitElement {
           .language="${this.language}"
           .options="${this.editorOptions}"
           .theme="${this.editorTheme}"
+          disableScroll
         ></cv-code-editor>`
       : html`<cv-code-snippet hideHeader .language="${this.language}"
           >${this.code}</cv-code-snippet