fix cursor jump issue while typing

Author: raheeliftikhar5

client/packages/lowcoder/src/base/codeEditor/codeEditor.tsx

@@ -14,6 +14,7 @@ import { CodeEditorPanel } from "../../pages/editor/codeEditorPanel";
 import type { CodeEditorProps, StyleName } from "./codeEditorTypes";
 import { useClickCompNameEffect } from "./clickCompName";
 import { Layers } from "../../constants/Layers";
+import { debounce } from "lodash";
 
 type StyleConfig = {
   minHeight: string;
@@ -219,12 +220,12 @@ function useCodeMirror(
   const showLineNum = props.showLineNum ?? getStyle(props.styleName).showLineNum;
 
   const handleChange = useCallback(
-    (state: EditorState) => {
+    debounce((state: EditorState) => {
       window.clearTimeout(isTypingRef.current);
       isTypingRef.current = window.setTimeout(() => (isTypingRef.current = 0), 100);
       onChange?.(state);
-    },
-    [onChange]
+    }, 100)
+    , [onChange]
   );
 
   const { extensions, reconfigure, isFocus } = useExtensions({

client/packages/lowcoder/src/comps/controls/codeControl.tsx

@@ -100,18 +100,18 @@ export function codeControl<
       this._exposingNode = withFunction(this._node, (x) => x.value);
 
       // make sure handleChange's reference only changes when the instance changes, avoid CodeEditor frequent reconfigure
-      this.handleChange = debounce((state: EditorState) => {
+      this.handleChange = (state: EditorState) => {
         this.dispatchChangeValueAction(state.doc.toString());
-      }, 50);
+      };
     }
 
     override changeDispatch(dispatch: DispatchType) {
       // need to re-bind handleChange when dispatch changes, otherwise old instance's dispatch is still in use
       const comp = setFieldsNoTypeCheck(this, {
         dispatch,
-        handleChange: debounce((state: EditorState) => {
+        handleChange: (state: EditorState) => {
           comp.dispatchChangeValueAction(state.doc.toString());
-        }, 50),
+        },
       });
       return comp;
     }

client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx

@@ -75,11 +75,11 @@ export function ExtendedPropertyView<
   const [compVersions, setCompVersions] = useState(['latest']);
   const [compName, setCompName] = useState('');
   const editorState = useContext(EditorContext);
-  const selectedComp = values(editorState.selectedComps())[0];
-  const compType = selectedComp.children.compType.getView() as UICompType;
+  const selectedComp = values(editorState?.selectedComps())[0];
+  const compType = selectedComp?.children?.compType?.getView() as UICompType;
 
   useEffect(() => {
-    setCompName(uiCompRegistry[compType].compName || '');
+    setCompName(uiCompRegistry[compType]?.compName || '');
   }, [compType]);
 
   useEffect(() => {