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}