fix: lang select in code block is insanity

libs/components/editor-blocks/src/blocks/code/CodeView.tsx

@@ -116,7 +116,7 @@ const CodeBlock = styled('div')(({ theme }) => ({
         flexWrap: 'wrap',
         justifyContent: 'space-between',
         opacity: 0,
-        transition: 'opacity 1.5s',
+        transition: 'opacity .15s',
     },
     '.copy-block': {
         padding: '0px 10px',
@@ -139,10 +139,21 @@ const CodeBlock = styled('div')(({ theme }) => ({
         outline: 'none !important',
     },
 }));
+const StyledOperationalPanel = styled('div')<{ show: boolean }>(({ show }) => {
+    return {
+        display: 'flex',
+        flexWrap: 'wrap',
+        justifyContent: 'space-between',
+        opacity: show ? 1 : 0,
+        transition: 'opacity .15s',
+    };
+});
 export const CodeView = ({ block, editor }: CreateCodeView) => {
     const initValue: string = block.getProperty('text')?.value?.[0]?.text;
     const langType: string = block.getProperty('lang');
     const [extensions, setExtensions] = useState<Extension[]>();
+    const [showOperationPanel, setShowOperationPanel] = useState(false);
+    const isSelecting = useRef(false);
     const codeMirror = useRef<ReactCodeMirrorRef>();
     const focusCode = () => {
         if (codeMirror.current) {
@@ -181,8 +192,15 @@ export const CodeView = ({ block, editor }: CreateCodeView) => {
                 onKeyDown={e => {
                     e.stopPropagation();
                 }}
+                onMouseEnter={() => {
+                    isSelecting.current = false;
+                    setShowOperationPanel(true);
+                }}
+                onMouseLeave={() => {
+                    !isSelecting.current && setShowOperationPanel(false);
+                }}
             >
-                <div className="operation">
+                <StyledOperationalPanel show={showOperationPanel}>
                     <div className="select">
                         <Select
                             width={128}
@@ -192,6 +210,9 @@ export const CodeView = ({ block, editor }: CreateCodeView) => {
                             onChange={(selectedValue: string) => {
                                 handleLangChange(selectedValue);
                             }}
+                            onListboxOpenChange={() => {
+                                isSelecting.current = true;
+                            }}
                         >
                             {Object.keys(langs).map(item => {
                                 return (
@@ -208,7 +229,7 @@ export const CodeView = ({ block, editor }: CreateCodeView) => {
                             Copy
                         </div>
                     </div>
-                </div>
+                </StyledOperationalPanel>
 
                 <CodeMirror
                     ref={codeMirror}

libs/components/ui/src/select/Select.tsx

@@ -41,7 +41,14 @@ export const Select = forwardRef(function CustomSelect<TValue>(
     ref: ForwardedRef<HTMLUListElement>
 ) {
     const [isOpen, setIsOpen] = useState(false);
-    const { width = '100%', style, listboxStyle, placeholder } = props;
+    const {
+        width = '100%',
+        style,
+        listboxStyle,
+        placeholder,
+        onListboxOpenChange,
+        onChange,
+    } = props;
     const components: SelectUnstyledProps<TValue>['components'] = {
         // Root: generateStyledRoot({ width, ...style }),
         Root: forwardRef((rootProps, rootRef) => {
@@ -80,14 +87,15 @@ export const Select = forwardRef(function CustomSelect<TValue>(
 
     return (
         <SelectUnstyled
-            listboxOpen={isOpen}
-            onListboxOpenChange={() => {
-                setIsOpen(true);
-            }}
             {...props}
+            listboxOpen={isOpen}
+            onListboxOpenChange={open => {
+                setIsOpen(open);
+                onListboxOpenChange?.(open);
+            }}
             onChange={v => {
                 setIsOpen(false);
-                props.onChange && props.onChange(v);
+                onChange?.(v);
             }}
             ref={ref}
             components={components}