feat: ✨ Codepanel

* fix: 🐛 move bar z-index

https://linear.app/illa/issue/BUG-631

* feat: 🚸 improve codesandbox

* feat: ✨  movableModal

* feat: ✨ codeEditor into movableModal

* feat: ✨ update all action panel's title with modalCodeEditor

.npmrc

@@ -0,0 +1 @@
+registry = https://registry.npmjs.org/

apps/builder/src/components/CodeEditor/CodeMirror/core.tsx

@@ -44,10 +44,10 @@ export const ILLACodeMirrorCore: FC<ILLACodeMirrorProps> = (props) => {
     hasError = false,
     resultType = VALIDATION_TYPES.STRING,
     canShowCompleteInfo = false,
-    wrapperCss,
     sqlScheme = {},
     singleLine,
     onChange,
+    tooltipContainer,
   } = props
 
   const [isFocus, setIsFocus] = useState(false)
@@ -229,13 +229,11 @@ export const ILLACodeMirrorCore: FC<ILLACodeMirrorProps> = (props) => {
       result={!result ? '""' : result}
       hasError={hasError}
       resultType={resultType}
+      toolTipContainer={tooltipContainer}
     >
       <div
         ref={editorWrapperRef}
-        css={[
-          applyEditorWrapperStyle(hasError, isFocus, editable, readOnly),
-          wrapperCss,
-        ]}
+        css={applyEditorWrapperStyle(hasError, isFocus, editable, readOnly)}
       />
     </HintToolTip>
   )

apps/builder/src/components/CodeEditor/CodeMirror/extensions/completionSources/TernServer/defs/ecmascript.json

@@ -1900,7 +1900,6 @@
       }
     }
   },
-  "window": {},
   "uuid": {},
   "numbro": {
     "!type": "fn(number)",

apps/builder/src/components/CodeEditor/CodeMirror/interface.ts

@@ -1,5 +1,6 @@
 import { Extension } from "@codemirror/state"
 import { SerializedStyles } from "@emotion/react"
+import { RefObject } from "react"
 import { ICodeMirrorOptions } from "@/components/CodeEditor/CodeMirror/extensions/interface"
 import { HintTooltipProps } from "@/components/CodeEditor/HintToolTip/interface"
 
@@ -18,5 +19,5 @@ export interface ILLACodeMirrorProps
   editable?: boolean
   readOnly?: boolean
   placeholder?: string
-  wrapperCss?: SerializedStyles
+  tooltipContainer?: RefObject<HTMLElement>
 }

apps/builder/src/components/CodeEditor/CodeMirror/style.ts

@@ -32,6 +32,7 @@ export const applyEditorWrapperStyle = (
         `
   return css`
     width: 100%;
+    height: 100%;
     .cm-editor {
       border: 1px solid
         ${getEditorWrapperBorderColor(hasError, isFocused, false)};

apps/builder/src/components/CodeEditor/HintToolTip/index.tsx

@@ -47,7 +47,14 @@ export const HintTooltipContent: FC<HintTooltipContentProps> = (props) => {
 }
 
 export const HintToolTip: FC<HintTooltipProps> = (props) => {
-  const { isEditorFocused, result, hasError, resultType, children } = props
+  const {
+    isEditorFocused,
+    result,
+    hasError,
+    resultType,
+    children,
+    toolTipContainer,
+  } = props
   const [isHovered, setIsHovered] = useState(false)
 
   return (
@@ -60,7 +67,7 @@ export const HintToolTip: FC<HintTooltipProps> = (props) => {
       popupVisible={isEditorFocused || isHovered}
       position="bottom-start"
       colorScheme="white"
-      renderInBody={false}
+      popupContainer={toolTipContainer}
       content={
         <HintTooltipContent
           hasError={hasError}

apps/builder/src/components/CodeEditor/HintToolTip/interface.ts

@@ -1,4 +1,4 @@
-import { Dispatch, ReactNode, SetStateAction } from "react"
+import { Dispatch, ReactNode, RefObject, SetStateAction } from "react"
 import { VALIDATION_TYPES } from "@/utils/validationFactory"
 
 export interface HintTooltipProps {
@@ -7,6 +7,7 @@ export interface HintTooltipProps {
   resultType?: VALIDATION_TYPES
   result?: string
   children: ReactNode
+  toolTipContainer?: RefObject<HTMLElement>
 }
 
 export interface HintTooltipContentProps

apps/builder/src/components/CodeEditor/ModalCodeMirror/content.tsx

@@ -0,0 +1,61 @@
+import { cloneDeep } from "lodash"
+import { FC, useLayoutEffect, useRef, useState } from "react"
+import useMeasure from "react-use-measure"
+import { CodeEditor } from "@/components/CodeEditor"
+import { ModalBodyContent } from "@/components/CodeEditor/ModalCodeMirror/interface"
+import {
+  applyCodeMirrorWrapperStyle,
+  codeMirrorContainerStyle,
+  contentWrapperStyle,
+  descriptionStyle,
+} from "@/components/CodeEditor/ModalCodeMirror/style"
+
+export const ModalContent: FC<ModalBodyContent> = (props) => {
+  const { description, lang, expectValueType, onChange, value, placeholder } =
+    props
+
+  const descriptionRef = useRef<HTMLParagraphElement | null>(null)
+  const [canRender, setCanRender] = useState(false)
+  const [descriptionHeight, setDescriptionHeight] = useState(0)
+
+  useLayoutEffect(() => {
+    if (descriptionRef.current) {
+      const { height } = descriptionRef.current.getBoundingClientRect()
+      setDescriptionHeight(height)
+    }
+    setCanRender(true)
+    return () => {
+      if (descriptionRef.current) {
+        descriptionRef.current = null
+      }
+    }
+  }, [])
+
+  return (
+    <div css={contentWrapperStyle}>
+      {description && (
+        <p css={descriptionStyle} ref={descriptionRef}>
+          {description}
+        </p>
+      )}
+      {canRender && (
+        <div css={applyCodeMirrorWrapperStyle(descriptionHeight)}>
+          <CodeEditor
+            placeholder={placeholder}
+            showLineNumbers
+            height="100%"
+            minHeight="88px"
+            maxHeight="100%"
+            value={value}
+            lang={lang}
+            canShowCompleteInfo
+            expectValueType={expectValueType}
+            wrapperCss={codeMirrorContainerStyle}
+            onChange={onChange}
+            canExpand={false}
+          />
+        </div>
+      )}
+    </div>
+  )
+}

apps/builder/src/components/CodeEditor/ModalCodeMirror/footer.tsx

@@ -0,0 +1,19 @@
+import { FC } from "react"
+import { useTranslation } from "react-i18next"
+import { Button } from "@illa-design/react"
+import { FooterContentProps } from "@/components/CodeEditor/ModalCodeMirror/interface"
+import { saveButtonStyle } from "@/components/CodeEditor/ModalCodeMirror/style"
+
+export const FooterContent: FC<FooterContentProps> = (props) => {
+  const { t } = useTranslation()
+  const { onClickSaveButton } = props
+  return (
+    <Button
+      colorScheme="techPurple"
+      onClick={onClickSaveButton}
+      _css={saveButtonStyle}
+    >
+      {t("save")}
+    </Button>
+  )
+}

apps/builder/src/components/CodeEditor/ModalCodeMirror/index.tsx

@@ -0,0 +1,46 @@
+import { FC } from "react"
+import { useTranslation } from "react-i18next"
+import { ModalContent } from "@/components/CodeEditor/ModalCodeMirror/content"
+import { FooterContent } from "@/components/CodeEditor/ModalCodeMirror/footer"
+import { ModalCodeMirrorProps } from "@/components/CodeEditor/ModalCodeMirror/interface"
+import { MovableModal } from "@/components/MovableModal"
+
+export const ModalCodeMirror: FC<ModalCodeMirrorProps> = (props) => {
+  const {
+    title,
+    value,
+    description,
+    lang,
+    expectValueType,
+    onChange,
+    onClickSaveButton,
+    onClose,
+    placeholder,
+  } = props
+  const { t } = useTranslation()
+
+  return (
+    <MovableModal
+      title={title || t("editor.inspect.setter_label.code.write_code")}
+      bodyContent={
+        <ModalContent
+          description={
+            description ||
+            t("editor.inspect.setter_description.code.write_code")
+          }
+          lang={lang}
+          expectValueType={expectValueType}
+          value={value}
+          onChange={onChange}
+          placeholder={placeholder}
+        />
+      }
+      footerContent={
+        onClickSaveButton ? (
+          <FooterContent onClickSaveButton={onClickSaveButton} />
+        ) : null
+      }
+      onClose={onClose}
+    />
+  )
+}

apps/builder/src/components/CodeEditor/ModalCodeMirror/interface.ts

@@ -0,0 +1,21 @@
+import { CodeEditorProps } from "@/components/CodeEditor/interface"
+import { MovableModalProps } from "@/components/MovableModal/interface"
+
+export interface ModalBodyContent {
+  description?: string
+  placeholder?: string
+  lang?: CodeEditorProps["lang"]
+  expectValueType?: CodeEditorProps["expectValueType"]
+  onChange?: CodeEditorProps["onChange"]
+  value: string
+}
+
+export interface FooterContentProps {
+  onClickSaveButton: () => void
+}
+
+export interface ModalCodeMirrorProps
+  extends Omit<MovableModalProps, "bodyContent" | "footerContent">,
+    ModalBodyContent {
+  onClickSaveButton?: () => void
+}

apps/builder/src/components/CodeEditor/ModalCodeMirror/style.ts

@@ -0,0 +1,32 @@
+import { css } from "@emotion/react"
+import { getColor } from "@illa-design/react"
+
+export const descriptionStyle = css`
+  font-size: 14px;
+  color: ${getColor("grayBlue", "04")};
+  font-weight: 400;
+  line-height: 22px;
+  margin: 0;
+`
+
+export const applyCodeMirrorWrapperStyle = (desHeight: number) => css`
+  width: 100%;
+  height: max(88px, calc(100% - ${desHeight}px - 16px));
+`
+
+export const codeMirrorContainerStyle = css`
+  height: 100%;
+`
+
+export const saveButtonStyle = css`
+  position: absolute;
+  right: 16px;
+`
+
+export const contentWrapperStyle = css`
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+`