Allow pinning the code editor popup

The code editor popup now has a button to allow 'pinning' the editor to
the screen so that it does not disappear when you click outside of it.
This currently only works if the right panel stays open, so that means
you cannot click inside of the app window unless it's on your component.
Anything else will dismiss the right panel and the popup will disappear,
even if pinned.

Author: snowe2010

client/packages/lowcoder-design/src/icons/index.ts

@@ -22,6 +22,8 @@ export { ReactComponent as ClickLinkIcon } from "./icon-clickLink.svg";
 export { ReactComponent as CloseEyeIcon } from "./icon-closeEye.svg";
 export { ReactComponent as CodeEditorCloseIcon } from "./icon-code-editor-close.svg";
 export { ReactComponent as CodeEditorOpenIcon } from "./icon-code-editor-open.svg";
+export { ReactComponent as CodeEditorPinnedIcon} from "./remix/pushpin-2-fill.svg"
+export { ReactComponent as CodeEditorUnPinnedIcon} from "./remix/pushpin-line.svg"
 export { ReactComponent as ColorHexIcon } from "./icon-colorHex.svg";
 export { ReactComponent as ContainerDragIcon } from "./icon-container-drag.svg";
 export { ReactComponent as CopyIcon } from "./icon-copy.svg";

client/packages/lowcoder/src/pages/editor/codeEditorPanel.tsx

@@ -1,7 +1,7 @@
 import styled from "styled-components";
 import { ReactNode, useContext, useMemo, useRef, useState } from "react";
 import { Layers } from "../../constants/Layers";
-import { CodeEditorOpenIcon } from "lowcoder-design";
+import { CodeEditorOpenIcon, CodeEditorPinnedIcon, CodeEditorUnPinnedIcon } from "lowcoder-design";
 import { CodeEditorCloseIcon } from "lowcoder-design";
 import { DragIcon } from "lowcoder-design";
 import Trigger from "rc-trigger";
@@ -74,6 +74,11 @@ const OpenButton = styled.div`
     }
   }
 `;
+const Buttons = styled.div`
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+`
 const CloseButton = styled.div`
   display: flex;
   justify-content: space-between;
@@ -98,6 +103,30 @@ const CloseButton = styled.div`
     }
   }
 `;
+const PinButton = styled.div`
+    width: 32px;
+    height: 26px;
+    border: 1px solid #d7d9e0;
+    border-radius: 4px;
+    color: #333333;
+    padding: 2px ;
+    cursor: pointer;
+
+    &:hover {
+        background: #f5f5f6;
+
+        svg g g {
+            stroke: #222222;
+        }
+    }
+
+    // fixes the icon when there's no text in the container
+    svg {
+        width: 100%;
+        height: 100%;
+        fill: currentColor; 
+    }
+`;
 
 export const CodeEditorPanel = (props: {
   editor: ReactNode;
@@ -106,6 +135,8 @@ export const CodeEditorPanel = (props: {
 }) => {
   const draggableRef = useRef<HTMLDivElement>(null);
   const [unDraggable, setUnDraggable] = useState(true);
+  const [pinned, setPinned] = useState(false);
+
   const [bounds, setBounds] = useState({
     left: 0,
     top: 0,
@@ -126,7 +157,8 @@ export const CodeEditorPanel = (props: {
       action={["click"]}
       zIndex={Layers.codeEditorPanel}
       popupStyle={{ opacity: 1, display: visible ? "block" : "none" }}
-      maskClosable={true}
+      maskClosable={!pinned}
+      mask={true}
       onPopupVisibleChange={(visible) => setVisible(visible)}
       afterPopupVisibleChange={(visible) => props.onVisibleChange(visible)}
       getPopupContainer={(node: any) => node.parentNode.parentNode}
@@ -169,10 +201,15 @@ export const CodeEditorPanel = (props: {
                   <StyledDragIcon />
                   {[compName, ...(props.breadcrumb ?? [])].filter((t) => !isEmpty(t)).join(" / ")}
                 </TitleWrapper>
-                <CloseButton onClick={() => setVisible(false)}>
-                  <CodeEditorCloseIcon />
-                  {trans("codeEditor.fold")}
-                </CloseButton>
+                <Buttons>
+                  <PinButton onClick={() => setPinned(!pinned) }> 
+                    {pinned ? <CodeEditorPinnedIcon/> : <CodeEditorUnPinnedIcon/>}
+                  </PinButton>
+                  <CloseButton onClick={() => setVisible(false)}>
+                    <CodeEditorCloseIcon />
+                    {trans("codeEditor.fold")}
+                  </CloseButton>
+                </Buttons>
               </HeaderWrapper>
 
               <BodyWrapper>{props.editor}</BodyWrapper>