fix code editor classes and styles

src/components/AutoSuggestion/AutoSuggestion.scss

@@ -27,37 +27,50 @@
     }
 }
 
+.#{$eccgui}-autosuggestion__inputfield {
+    background-color: $eccgui-color-textfield-background;
+}
+
 .#{$eccgui}-singlelinecodeeditor {
-    position: relative;
-    padding: 0 1px;
+    padding: 0;
 
     [class^="cm-theme"] {
         width: 100%;
     }
 
+    &:has(.cm-editor.cm-focused) {
+        box-shadow: input-transition-shadow($input-shadow-color-focus, true), $input-box-shadow-focus;
+    }
+
     .cm-editor {
-        top: 2px;
+        top: 1px;
         height: calc(#{$eccgui-size-textfield-height-regular} - 2px);
         padding: 0;
         margin: 0;
         overflow: hidden;
+        background-color: transparent;
+        border-radius: 0;
+        box-shadow: none;
 
         &.cm-focused {
             outline: none;
+            box-shadow: none;
         }
 
         .cm-scroller {
+            height: 100%;
             padding: 0;
             margin: 0;
             overflow: auto hidden !important;
         }
 
-        .CodeMirror-vscrollbar {
-            display: none !important;
-        }
-
         .cm-content {
-            vertical-align: middle;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            height: 100%;
+            min-height: 100%;
+            padding: 0;
             border: none;
         }
 

src/components/index.scss

@@ -38,6 +38,5 @@
 @import "./Typography/typography";
 @import "./Workspace/workspace";
 @import "./Accordion/accordion";
-@import "./AutoSuggestion/AutoSuggestion";
 @import "./Badge/badge";
 @import "./PropertyValuePair/propertyvalue";

src/extensions/_index.scss

@@ -1,9 +1,4 @@
 @import "./react-flow/react-flow";
-
-/*
-CodeMirror styles are already included by the base component styles
-because it is used as lib for elements there already. 
 @import "./codemirror/codemirror";
-*/
-
+@import "./../components/AutoSuggestion/AutoSuggestion"; // the whole element should moved to extensions forlder
 @import "./uppy/fileupload";

src/extensions/codemirror/CodeMirror.tsx

@@ -92,7 +92,7 @@ export interface CodeEditorProps {
     /** Long lines are wrapped and displayed on multiple lines */
     wrapLines?: boolean;
 
-    outerDivAttributes?: Partial<AllHTMLAttributes<HTMLDivElement>>;
+    outerDivAttributes?: Omit<React.HTMLAttributes<HTMLDivElement>, "id" | "data-test-id">;
 
     /**
      * Size in spaces that is used for a tabulator key.
@@ -276,11 +276,15 @@ export const CodeEditor = ({
 
     return (
         <div
-            id={id ? id : `codemirror-${name}`}
+            {...outerDivAttributes}
+            // overwrite/extend some attributes
+            id={id ? id : name ? `codemirror-${name}` : undefined}
             ref={parent}
             data-test-id="codemirror-wrapper"
-            className={`${eccgui}-codeeditor ${eccgui}-codeeditor--mode-${mode}`}
-            {...outerDivAttributes}
+            className={
+                `${eccgui}-codeeditor ${eccgui}-codeeditor--mode-${mode}` +
+                (outerDivAttributes?.className ? ` ${outerDivAttributes?.className}` : "")
+            }
         />
     );
 };

src/extensions/codemirror/_codemirror.scss

@@ -29,7 +29,6 @@ $eccgui-color-codeeditor-background: $eccgui-color-textfield-background !default
             // fix size to prevent wrong calculation of other elements
             padding: 0;
             margin: 1px;
-            cursor: text;
         }
 
         &.cm-focused {
@@ -54,6 +53,7 @@ $eccgui-color-codeeditor-background: $eccgui-color-textfield-background !default
         }
 
         .cm-content {
+            cursor: text;
             border-right-width: $eccgui-size-inline-whitespace !important;
         }
 

src/index.scss

@@ -50,7 +50,6 @@ $prefix-carbon: $prefix;
 // == Load basic components styles =============================================
 
 @import "./components";
-@import "./extensions/codemirror/codemirror";
 
 // set more readable variable for prefix
 $prefix-eccgui: $eccgui;