Merge pull request #216 from eccenca/feature/supportPathAutoCompletio…

…nInEditorsUpdated-CMEM-5454 Improve CodeAutocompleteField (CMEM-5454)
eccenca · Nov 13, 2024 · 9885f99 · 9885f99
2 parents ae79a80 + 048ef68
commit 9885f99
Show file tree

Hide file tree

Showing 9 changed files with 55 additions and 42 deletions.
diff --git a/src/components/Application/_config.scss b/src/components/Application/_config.scss
@@ -5,7 +5,7 @@
 */
 
 /// should be already imported
-//@import '~@carbon/react/scss/colors';
+// @import '~@carbon/react/scss/colors';
 
 /*
 //----------------------------------------------------------------------------

diff --git a/src/components/AutoSuggestion/AutoSuggestion.scss b/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;
         }
 

diff --git a/src/components/AutoSuggestion/AutoSuggestion.tsx b/src/components/AutoSuggestion/AutoSuggestion.tsx
@@ -609,6 +609,25 @@ const AutoSuggestion = ({
         []
     );
 
+    const codeEditor = React.useMemo(() => {
+        return <ExtendedCodeEditor
+            mode={mode}
+            setCM={setCM}
+            onChange={handleChange}
+            onCursorChange={handleCursorChange}
+            initialValue={initialValue}
+            onFocusChange={handleInputFocus}
+            onKeyDown={handleInputEditorKeyPress}
+            enableTab={useTabForCompletions}
+            placeholder={placeholder}
+            onSelection={onSelection}
+            showScrollBar={showScrollBar}
+            multiline={multiline}
+            onMouseDown={handleInputMouseDown}
+        />
+
+    }, [mode, setCM, handleChange, initialValue, useTabForCompletions, placeholder, showScrollBar, multiline, handleInputMouseDown])
+
     const hasError = !!value.current && !pathIsValid && !pathValidationPending;
     const autoSuggestionInput = (
         <div
@@ -642,21 +661,7 @@ const AutoSuggestion = ({
                         />
                     }
                 >
-                    <ExtendedCodeEditor
-                        mode={mode}
-                        setCM={setCM}
-                        onChange={handleChange}
-                        onCursorChange={handleCursorChange}
-                        initialValue={initialValue}
-                        onFocusChange={handleInputFocus}
-                        onKeyDown={handleInputEditorKeyPress}
-                        enableTab={useTabForCompletions}
-                        placeholder={placeholder}
-                        onSelection={onSelection}
-                        showScrollBar={showScrollBar}
-                        multiline={multiline}
-                        onMouseDown={handleInputMouseDown}
-                    />
+                    {codeEditor}
                 </ContextOverlay>
                 {!!value.current && (
                     <span className={BlueprintClassNames.INPUT_ACTION} ref={inputactionsDisplayed}>

diff --git a/src/components/TextField/textfield.scss b/src/components/TextField/textfield.scss
@@ -4,8 +4,7 @@
 // own vars
 $eccgui-size-textfield-height-small: $eccgui-size-block-whitespace * 2 !default;
 $eccgui-size-textfield-height-regular: $eccgui-size-textfield-height-small * $eccgui-size-type-levelratio !default;
-$eccgui-size-textfield-height-large: $eccgui-size-textfield-height-regular * $eccgui-size-type-levelratio *
-    $eccgui-size-type-levelratio !default;
+$eccgui-size-textfield-height-large: $eccgui-size-textfield-height-regular * $eccgui-size-type-levelratio * $eccgui-size-type-levelratio !default;
 $eccgui-size-textfield-padding-horizontal-regular: $eccgui-size-inline-whitespace !default;
 $eccgui-size-textfield-padding-horizontal-small: $eccgui-size-inline-whitespace * 0.5 !default;
 $eccgui-typo-textfield-fontweight: $eccgui-font-weight-regular !default;

diff --git a/src/components/index.scss b/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";
diff --git a/src/extensions/_index.scss b/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";
diff --git a/src/extensions/codemirror/CodeMirror.tsx b/src/extensions/codemirror/CodeMirror.tsx
@@ -1,13 +1,11 @@
-import React, { AllHTMLAttributes, useRef } from "react";
+import React, { useRef } from "react";
 import { defaultKeymap, indentWithTab } from "@codemirror/commands";
 import { foldKeymap } from "@codemirror/language";
 import { EditorState, Extension } from "@codemirror/state";
 import { DOMEventHandlers, EditorView, KeyBinding, keymap, Rect, ViewUpdate } from "@codemirror/view";
-//CodeMirror
 import { minimalSetup } from "codemirror";
 
 import { markField } from "../../components/AutoSuggestion/extensions/markText";
-//constants
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
 //hooks
@@ -27,6 +25,7 @@ import {
     adaptedLineNumbers,
     adaptedPlaceholder,
 } from "./tests/codemirrorTestHelper";
+
 export interface CodeEditorProps {
     // Is called with the editor instance that allows access via the CodeMirror API
     setEditorView?: (editor: EditorView | undefined) => any;
@@ -92,7 +91,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 +275,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}` : "")
+            }
         />
     );
 };

diff --git a/src/extensions/codemirror/_codemirror.scss b/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;
         }
 

diff --git a/src/index.scss b/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;