Merge pull request #30 from FatttSnake/feat/tool_theme

Support load global js and css variables
2024-11-02 15:51:54 +08:00
parent 60d1309610 216d3fd41c
commit 23a3a6354b
17 changed files with 2023 additions and 23 deletions
--- a/src/components/Playground/CodeEditor/Editor/index.tsx
+++ b/src/components/Playground/CodeEditor/Editor/index.tsx
@@ -24,6 +24,7 @@ interface EditorProps {
    options?: IEditorOptions
    onJumpFile?: (fileName: string) => void
    extraLibs?: ExtraLib[]
+    onEditorDidMount?: (editor: editor.IStandaloneCodeEditor, monaco: Monaco) => void
 }

 const Editor = ({
@@ -35,7 +36,8 @@ const Editor = ({
    onChange,
    options,
    onJumpFile,
-    extraLibs = []
+    extraLibs = [],
+    onEditorDidMount
 }: EditorProps) => {
    const { styles } = useStyles()
    const editorRef = useRef<editor.IStandaloneCodeEditor>()
@@ -98,6 +100,8 @@ const Editor = ({
            monaco.languages.typescript.typescriptDefaults.addExtraLib(item.content, item.path)
        )

+        onEditorDidMount?.(editor, monaco)
+
        void autoLoadExtraLib(editor, monaco, file.value, onWatch)
    }

--- a/src/components/Playground/CodeEditor/index.tsx
+++ b/src/components/Playground/CodeEditor/index.tsx
@@ -1,3 +1,5 @@
+import { Monaco } from '@monaco-editor/react'
+import { editor } from 'monaco-editor'
 import _ from 'lodash'
 import useStyles from '@/components/Playground/CodeEditor/index.style'
 import FlexBox from '@/components/common/FlexBox'
@@ -22,6 +24,7 @@ interface CodeEditorProps {
    selectedFileName?: string
    options?: IEditorOptions
    extraLibs?: ExtraLib[]
+    onEditorDidMount?: (editor: editor.IStandaloneCodeEditor, monaco: Monaco) => void
    onSelectedFileChange?: (fileName: string) => void
    onAddFile?: (fileName: string, files: IFiles) => void
    onRemoveFile?: (fileName: string, files: IFiles) => void
@@ -46,6 +49,7 @@ const CodeEditor = ({
    onChangeFileContent,
    onError,
    extraLibs,
+    onEditorDidMount,
    ...props
 }: CodeEditorProps) => {
    const { styles } = useStyles()
@@ -157,6 +161,7 @@ const CodeEditor = ({
                    onChange={handleOnChangeFileContent}
                    onJumpFile={handleOnChangeSelectedFile}
                    extraLibs={extraLibs}
+                    onEditorDidMount={onEditorDidMount}
                />
                {errorMsg && <div className={styles.errorMessage}>{errorMsg}</div>}
            </FlexBox>
--- a/src/components/Playground/Output/Preview/Render.tsx
+++ b/src/components/Playground/Output/Preview/Render.tsx
@@ -11,14 +11,18 @@ interface RenderProps {
    iframeKey: string
    compiledCode: string
    mobileMode?: boolean
+    globalJsVariables?: Record<string, unknown>
+    globalCssVariables?: string
 }

 interface IMessage {
-    type: 'LOADED' | 'ERROR' | 'UPDATE' | 'DONE'
+    type: 'LOADED' | 'ERROR' | 'UPDATE' | 'DONE' | 'GLOBAL_VARIABLES'
    msg: string
    data: {
        compiledCode?: string
        zoom?: number
+        globalJsVariables?: Record<string, unknown>
+        globalCssVariables?: string
    }
 }

@@ -28,7 +32,13 @@ const getIframeUrl = (iframeRaw: string) => {

 const iframeUrl = getIframeUrl(iframeRaw)

-const Render = ({ iframeKey, compiledCode, mobileMode = false }: RenderProps) => {
+const Render = ({
+    iframeKey,
+    compiledCode,
+    mobileMode = false,
+    globalJsVariables,
+    globalCssVariables
+}: RenderProps) => {
    const { styles, theme } = useStyles()
    const { isDarkMode } = useContext(AppContext)
    const iframeRef = useRef<HTMLIFrameElement>(null)
@@ -57,6 +67,16 @@ const Render = ({ iframeKey, compiledCode, mobileMode = false }: RenderProps) =>
        setIsRotate(!isRotate)
    }

+    const loadGlobalVariables = () => {
+        iframeRef.current?.contentWindow?.postMessage(
+            {
+                type: 'GLOBAL_VARIABLES',
+                data: { globalJsVariables, globalCssVariables }
+            } as IMessage,
+            '*'
+        )
+    }
+
    useEffect(() => {
        if (!isLoaded) {
            return
@@ -68,8 +88,16 @@ const Render = ({ iframeKey, compiledCode, mobileMode = false }: RenderProps) =>
            } as IMessage,
            '*'
        )
+        loadGlobalVariables()
    }, [isLoaded, compiledCode])

+    useEffect(() => {
+        if (!isLoaded) {
+            return
+        }
+        loadGlobalVariables()
+    }, [isLoaded, globalJsVariables, globalCssVariables])
+
    return mobileMode ? (
        <>
            <ReactFlow
--- a/src/components/Playground/Output/Preview/iframe.html
+++ b/src/components/Playground/Output/Preview/iframe.html
@@ -4,13 +4,14 @@
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Preview</title>
+  <style id="global-css-variable"></style>
 </head>
 <body>
 <script>
  window.addEventListener("message", ({ data }) => {
    if (data?.type === "UPDATE") {
      // Record old styles that need to be removed
-      const appStyleElement = document.querySelectorAll("style:not(style[id$=\"_oxygen_base_style.css\"])") || [];
+      const appStyleElement = document.querySelectorAll("style:not(:is(style[id$=\"_oxygen_base_style.css\"], style[id=\"global-css-variable\"]))") || [];

      // Remove old app
      const appSrcElement = document.querySelector("#appSrc");
@@ -35,6 +36,13 @@
      document.body.appendChild(script);
      URL.revokeObjectURL(oldSrc);
    }
+
+    if (data?.type === "GLOBAL_VARIABLES") {
+      document.querySelector("#global-css-variable").textContent = data.data.globalCssVariables;
+      for (const key in data.data.globalJsVariables) {
+        globalThis[key] = data.data.globalJsVariables[key]
+      }
+    }
  });
 </script>
 <script type="module" id="appSrc"></script>
--- a/src/components/Playground/Output/Preview/index.tsx
+++ b/src/components/Playground/Output/Preview/index.tsx
@@ -11,6 +11,8 @@ interface PreviewProps {
    preExpansionCode?: string
    postExpansionCode?: string
    mobileMode?: boolean
+    globalJsVariables?: Record<string, unknown>
+    globalCssVariables?: string
 }

 const Preview = ({
@@ -20,7 +22,9 @@ const Preview = ({
    entryPoint,
    preExpansionCode = '',
    postExpansionCode = '',
-    mobileMode = false
+    mobileMode = false,
+    globalJsVariables,
+    globalCssVariables
 }: PreviewProps) => {
    const { styles } = useStyles()
    const [errorMsg, setErrorMsg] = useState('')
@@ -44,7 +48,13 @@ const Preview = ({

    return (
        <div className={styles.root}>
-            <Render iframeKey={iframeKey} compiledCode={compiledCode} mobileMode={mobileMode} />
+            <Render
+                iframeKey={iframeKey}
+                compiledCode={compiledCode}
+                mobileMode={mobileMode}
+                globalJsVariables={globalJsVariables}
+                globalCssVariables={globalCssVariables}
+            />
            {errorMsg && <div className={styles.errorMessage}>{errorMsg}</div>}
        </div>
    )
--- a/src/components/Playground/Output/Preview/simulation.style.ts
+++ b/src/components/Playground/Output/Preview/simulation.style.ts
@@ -2,7 +2,7 @@ import { createStyles } from 'antd-style'

 export default createStyles(({ token }) => ({
    renderRoot: {
-        border: 'none',
+        border: `1px solid ${token.colorBorder}`,
        height: '100%',
        width: '100%',
        flex: 1
--- a/src/components/Playground/Output/index.tsx
+++ b/src/components/Playground/Output/index.tsx
@@ -13,6 +13,8 @@ interface OutputProps {
    preExpansionCode?: string
    postExpansionCode?: string
    mobileMode?: boolean
+    globalJsVariables?: Record<string, unknown>
+    globalCssVariables?: string
 }

 const Output = ({
@@ -23,7 +25,9 @@ const Output = ({
    entryPoint,
    preExpansionCode,
    postExpansionCode,
-    mobileMode = false
+    mobileMode = false,
+    globalJsVariables,
+    globalCssVariables
 }: OutputProps) => {
    const [selectedTab, setSelectedTab] = useState('Preview')

@@ -47,6 +51,8 @@ const Output = ({
                    preExpansionCode={preExpansionCode}
                    postExpansionCode={postExpansionCode}
                    mobileMode={mobileMode}
+                    globalJsVariables={globalJsVariables}
+                    globalCssVariables={globalCssVariables}
                />
            )}
            {selectedTab === 'Transform' && (
--- a/src/pages/System/Tools/Base.tsx
+++ b/src/pages/System/Tools/Base.tsx
@@ -7,7 +7,7 @@ import {
    DATABASE_SELECT_SUCCESS,
    DATABASE_UPDATE_SUCCESS
 } from '@/constants/common.constants'
-import { message, modal } from '@/util/common'
+import { addExtraCssVariables, message, modal } from '@/util/common'
 import { utcToLocalTime } from '@/util/datetime'
 import { hasPermission } from '@/util/auth'
 import editorExtraLibs from '@/util/editorExtraLibs'
@@ -1113,6 +1113,7 @@ const Base = () => {
                                        !hasPermission('system:tool:modify:base')
                                    }
                                    extraLibs={editorExtraLibs}
+                                    onEditorDidMount={(_, monaco) => addExtraCssVariables(monaco)}
                                />
                                <div
                                    className={styles.closeEditorBtn}
--- a/src/pages/System/Tools/Code.tsx
+++ b/src/pages/System/Tools/Code.tsx
@@ -2,7 +2,7 @@ import Draggable from 'react-draggable'
 import Icon from '@ant-design/icons'
 import useStyles from '@/assets/css/pages/system/tools/code.style'
 import { DATABASE_NO_RECORD_FOUND, DATABASE_SELECT_SUCCESS } from '@/constants/common.constants'
-import { message, modal, checkDesktop } from '@/util/common'
+import { message, modal, checkDesktop, addExtraCssVariables } from '@/util/common'
 import { navigateToExecute, navigateToRepository } from '@/util/navigation'
 import editorExtraLibs from '@/util/editorExtraLibs'
 import { r_sys_tool_get_one } from '@/services/system'
@@ -93,6 +93,7 @@ const Code = () => {
                        selectedFileName={selectedFileName}
                        onSelectedFileChange={setSelectedFileName}
                        extraLibs={editorExtraLibs}
+                        onEditorDidMount={(_, monaco) => addExtraCssVariables(monaco)}
                    />
                </Card>

--- a/src/pages/System/Tools/Execute.tsx
+++ b/src/pages/System/Tools/Execute.tsx
@@ -1,8 +1,14 @@
 import useStyles from '@/assets/css/pages/system/tools/execute.style'
 import { DATABASE_NO_RECORD_FOUND, DATABASE_SELECT_SUCCESS } from '@/constants/common.constants'
-import { checkDesktop, message } from '@/util/common'
+import {
+    checkDesktop,
+    generateThemeCssVariables,
+    message,
+    removeUselessAttributes
+} from '@/util/common'
 import { navigateToTools } from '@/util/navigation'
 import { r_sys_tool_get_one } from '@/services/system'
+import { AppContext } from '@/App'
 import FitFullscreen from '@/components/common/FitFullscreen'
 import Card from '@/components/common/Card'
 import Playground from '@/components/Playground'
@@ -11,7 +17,8 @@ import { IImportMap } from '@/components/Playground/shared'
 import { base64ToFiles, base64ToStr, IMPORT_MAP_FILE_NAME } from '@/components/Playground/files'

 const Execute = () => {
-    const { styles } = useStyles()
+    const { styles, theme } = useStyles()
+    const { isDarkMode } = useContext(AppContext)
    const navigate = useNavigate()
    const { id } = useParams()
    const [isLoading, setIsLoading] = useState(false)
@@ -94,6 +101,10 @@ const Execute = () => {
                    iframeKey={`${id}`}
                    compiledCode={compiledCode}
                    mobileMode={isMobileMode}
+                    globalJsVariables={{
+                        OxygenTheme: { ...removeUselessAttributes(theme), isDarkMode }
+                    }}
+                    globalCssVariables={generateThemeCssVariables(theme).styles}
                />
            </Card>
        </FitFullscreen>
--- a/src/pages/System/Tools/Template.tsx
+++ b/src/pages/System/Tools/Template.tsx
@@ -7,7 +7,7 @@ import {
    DATABASE_SELECT_SUCCESS,
    DATABASE_UPDATE_SUCCESS
 } from '@/constants/common.constants'
-import { message, modal } from '@/util/common'
+import { addExtraCssVariables, message, modal } from '@/util/common'
 import { utcToLocalTime } from '@/util/datetime'
 import { hasPermission } from '@/util/auth'
 import editorExtraLibs from '@/util/editorExtraLibs'
@@ -1056,6 +1056,7 @@ const Template = () => {
                                        !hasPermission('system:tool:modify:template')
                                    }
                                    extraLibs={editorExtraLibs}
+                                    onEditorDidMount={(_, monaco) => addExtraCssVariables(monaco)}
                                />
                                <div
                                    className={styles.closeEditorBtn}
--- a/src/pages/Tools/Create.tsx
+++ b/src/pages/Tools/Create.tsx
@@ -5,7 +5,7 @@ import {
    DATABASE_INSERT_SUCCESS,
    DATABASE_SELECT_SUCCESS
 } from '@/constants/common.constants'
-import { message } from '@/util/common'
+import { generateThemeCssVariables, message, removeUselessAttributes } from '@/util/common'
 import { navigateToEdit } from '@/util/navigation'
 import {
    r_tool_category_get,
@@ -13,6 +13,7 @@ import {
    r_tool_template_get,
    r_tool_template_get_one
 } from '@/services/tool'
+import { AppContext } from '@/App'
 import compiler from '@/components/Playground/compiler'
 import { IImportMap } from '@/components/Playground/shared'
 import { base64ToFiles, base64ToStr, IMPORT_MAP_FILE_NAME } from '@/components/Playground/files'
@@ -23,7 +24,8 @@ import HideScrollbar from '@/components/common/HideScrollbar'
 import Playground from '@/components/Playground'

 const Create = () => {
-    const { styles } = useStyles()
+    const { styles, theme } = useStyles()
+    const { isDarkMode } = useContext(AppContext)
    const navigate = useNavigate()
    const [form] = AntdForm.useForm<ToolCreateParam>()
    const formValues = AntdForm.useWatch([], form)
@@ -380,6 +382,10 @@ const Create = () => {
                                iframeKey={previewTemplate}
                                compiledCode={compiledCode}
                                mobileMode={formValues.platform === 'ANDROID'}
+                                globalJsVariables={{
+                                    OxygenTheme: { ...removeUselessAttributes(theme), isDarkMode }
+                                }}
+                                globalCssVariables={generateThemeCssVariables(theme).styles}
                            />
                        ) : (
                            <span className={styles.noPreview}>暂无预览</span>
--- a/src/pages/Tools/Edit.tsx
+++ b/src/pages/Tools/Edit.tsx
@@ -8,7 +8,12 @@ import {
    TOOL_HAS_BEEN_PUBLISHED,
    TOOL_UNDER_REVIEW
 } from '@/constants/common.constants'
-import { message } from '@/util/common'
+import {
+    addExtraCssVariables,
+    generateThemeCssVariables,
+    message,
+    removeUselessAttributes
+} from '@/util/common'
 import { navigateToRepository } from '@/util/navigation'
 import editorExtraLibs from '@/util/editorExtraLibs'
 import { r_tool_category_get, r_tool_detail, r_tool_update } from '@/services/tool'
@@ -28,7 +33,7 @@ import LoadingMask from '@/components/common/LoadingMask'
 import Card from '@/components/common/Card'

 const Edit = () => {
-    const { styles } = useStyles()
+    const { styles, theme } = useStyles()
    const { isDarkMode } = useContext(AppContext)
    const blocker = useBlocker(
        ({ currentLocation, nextLocation }) =>
@@ -457,6 +462,7 @@ const Edit = () => {
                                onChangeFileContent={handleOnChangeFileContent}
                                onSelectedFileChange={setSelectedFileName}
                                extraLibs={editorExtraLibs}
+                                onEditorDidMount={(_, monaco) => addExtraCssVariables(monaco)}
                            />
                            <Playground.Output
                                isDarkMode={isDarkMode}
@@ -466,6 +472,10 @@ const Edit = () => {
                                entryPoint={entryPoint}
                                postExpansionCode={baseDist}
                                mobileMode={toolData?.platform === 'ANDROID'}
+                                globalJsVariables={{
+                                    OxygenTheme: { ...removeUselessAttributes(theme), isDarkMode }
+                                }}
+                                globalCssVariables={generateThemeCssVariables(theme).styles}
                            />
                        </LoadingMask>
                        {isShowDraggableMask && <div className={styles.draggableMask} />}
--- a/src/pages/Tools/Source.tsx
+++ b/src/pages/Tools/Source.tsx
@@ -1,6 +1,6 @@
 import useStyles from '@/assets/css/pages/tools/source.style'
 import { DATABASE_NO_RECORD_FOUND, DATABASE_SELECT_SUCCESS } from '@/constants/common.constants'
-import { message } from '@/util/common'
+import { addExtraCssVariables, message } from '@/util/common'
 import { getLoginStatus } from '@/util/auth'
 import { navigateToRepository, navigateToSource } from '@/util/navigation'
 import editorExtraLibs from '@/util/editorExtraLibs'
@@ -98,6 +98,7 @@ const Source = () => {
                    selectedFileName={selectedFileName}
                    onSelectedFileChange={setSelectedFileName}
                    extraLibs={editorExtraLibs}
+                    onEditorDidMount={(_, monaco) => addExtraCssVariables(monaco)}
                />
            </Card>
        </FitFullscreen>
--- a/src/pages/Tools/View.tsx
+++ b/src/pages/Tools/View.tsx
@@ -1,9 +1,15 @@
 import useStyles from '@/assets/css/pages/tools/view.style'
 import { DATABASE_NO_RECORD_FOUND, DATABASE_SELECT_SUCCESS } from '@/constants/common.constants'
-import { checkDesktop, message } from '@/util/common'
+import {
+    checkDesktop,
+    generateThemeCssVariables,
+    message,
+    removeUselessAttributes
+} from '@/util/common'
 import { getLoginStatus } from '@/util/auth'
 import { navigateToRepository, navigateToRoot, navigateToView } from '@/util/navigation'
 import { r_tool_detail } from '@/services/tool'
+import { AppContext } from '@/App'
 import compiler from '@/components/Playground/compiler'
 import { IImportMap } from '@/components/Playground/shared'
 import { base64ToFiles, base64ToStr, IMPORT_MAP_FILE_NAME } from '@/components/Playground/files'
@@ -12,7 +18,8 @@ import Playground from '@/components/Playground'
 import Card from '@/components/common/Card'

 const View = () => {
-    const { styles } = useStyles()
+    const { styles, theme } = useStyles()
+    const { isDarkMode } = useContext(AppContext)
    const navigate = useNavigate()
    const { username, toolId, ver } = useParams()
    const [searchParams] = useSearchParams({
@@ -134,6 +141,10 @@ const View = () => {
                    iframeKey={`${username}:${toolId}:${ver}`}
                    compiledCode={compiledCode}
                    mobileMode={isMobileMode}
+                    globalJsVariables={{
+                        OxygenTheme: { ...removeUselessAttributes(theme), isDarkMode }
+                    }}
+                    globalCssVariables={generateThemeCssVariables(theme).styles}
                />
            </Card>
        </FitFullscreen>
--- a/src/util/common.tsx
+++ b/src/util/common.tsx
@@ -1,4 +1,10 @@
 import { createRoot } from 'react-dom/client'
+import { editor, languages, Position } from 'monaco-editor'
+import { Monaco } from '@monaco-editor/react'
+import { MessageInstance } from 'antd/es/message/interface'
+import { HookAPI } from 'antd/es/modal/useModal'
+import { NotificationInstance } from 'antd/es/notification/interface'
+import { css, AntdToken, Theme } from 'antd-style'
 import { floor } from 'lodash'
 import {
    STORAGE_COLLAPSE_SIDEBAR_KEY,
@@ -10,9 +16,6 @@ import {
 } from '@/constants/common.constants'
 import { getLocalStorage, setLocalStorage } from '@/util/browser'
 import FullscreenLoadingMask from '@/components/common/FullscreenLoadingMask'
-import { MessageInstance } from 'antd/es/message/interface'
-import { NotificationInstance } from 'antd/es/notification/interface'
-import { HookAPI } from 'antd/es/modal/useModal'

 export type ThemeMode = typeof THEME_FOLLOW_SYSTEM | typeof THEME_LIGHT | typeof THEME_DARK

@@ -241,3 +244,316 @@ export const getThemeMode = (): ThemeMode => {
 export const setThemeMode = (themeMode: ThemeMode) => {
    setLocalStorage(STORAGE_THEME_MODE_KEY, themeMode)
 }
+
+const cssColors = [
+    'blue',
+    'purple',
+    'cyan',
+    'green',
+    'magenta',
+    'pink',
+    'red',
+    'orange',
+    'yellow',
+    'volcano',
+    'geekblue',
+    'gold',
+    'lime'
+].reduce((prev: string[], current) => {
+    let temp: string[] = []
+    for (let i = 1; i <= 10; i++) {
+        temp = [...temp, `${current}${i}`]
+    }
+    return [...prev, current, ...temp]
+}, [])
+
+const cssVariables: string[] = [
+    ...cssColors,
+    'colorPrimary',
+    'colorSuccess',
+    'colorWarning',
+    'colorError',
+    'colorInfo',
+    'colorLink',
+    'colorTextBase',
+    'colorBgBase',
+    'fontFamily',
+    'fontFamilyCode',
+    'fontSize',
+    'lineWidth',
+    'lineType',
+    'motionUnit',
+    'motionBase',
+    'motionEaseOutCirc',
+    'motionEaseInOutCirc',
+    'motionEaseOut',
+    'motionEaseInOut',
+    'motionEaseOutBack',
+    'motionEaseInBack',
+    'motionEaseInQuint',
+    'motionEaseOutQuint',
+    'borderRadius',
+    'sizeUnit',
+    'sizeStep',
+    'sizePopupArrow',
+    'controlHeight',
+    'zIndexBase',
+    'zIndexPopupBase',
+    'opacityImage',
+    'colorLinkHover',
+    'colorText',
+    'colorTextSecondary',
+    'colorTextTertiary',
+    'colorTextQuaternary',
+    'colorFill',
+    'colorFillSecondary',
+    'colorFillTertiary',
+    'colorFillQuaternary',
+    'colorBgSolid',
+    'colorBgSolidHover',
+    'colorBgSolidActive',
+    'colorBgLayout',
+    'colorBgContainer',
+    'colorBgElevated',
+    'colorBgSpotlight',
+    'colorBgBlur',
+    'colorBorder',
+    'colorBorderSecondary',
+    'colorPrimaryBg',
+    'colorPrimaryBgHover',
+    'colorPrimaryBorder',
+    'colorPrimaryBorderHover',
+    'colorPrimaryHover',
+    'colorPrimaryActive',
+    'colorPrimaryTextHover',
+    'colorPrimaryText',
+    'colorPrimaryTextActive',
+    'colorSuccessBg',
+    'colorSuccessBgHover',
+    'colorSuccessBorder',
+    'colorSuccessBorderHover',
+    'colorSuccessHover',
+    'colorSuccessActive',
+    'colorSuccessTextHover',
+    'colorSuccessText',
+    'colorSuccessTextActive',
+    'colorErrorBg',
+    'colorErrorBgHover',
+    'colorErrorBgFilledHover',
+    'colorErrorBgActive',
+    'colorErrorBorder',
+    'colorErrorBorderHover',
+    'colorErrorHover',
+    'colorErrorActive',
+    'colorErrorTextHover',
+    'colorErrorText',
+    'colorErrorTextActive',
+    'colorWarningBg',
+    'colorWarningBgHover',
+    'colorWarningBorder',
+    'colorWarningBorderHover',
+    'colorWarningHover',
+    'colorWarningActive',
+    'colorWarningTextHover',
+    'colorWarningText',
+    'colorWarningTextActive',
+    'colorInfoBg',
+    'colorInfoBgHover',
+    'colorInfoBorder',
+    'colorInfoBorderHover',
+    'colorInfoHover',
+    'colorInfoActive',
+    'colorInfoTextHover',
+    'colorInfoText',
+    'colorInfoTextActive',
+    'colorLinkActive',
+    'colorBgMask',
+    'colorWhite',
+    'fontSizeSM',
+    'fontSizeLG',
+    'fontSizeXL',
+    'fontSizeHeading1',
+    'fontSizeHeading2',
+    'fontSizeHeading3',
+    'fontSizeHeading4',
+    'fontSizeHeading5',
+    'lineHeight',
+    'lineHeightLG',
+    'lineHeightSM',
+    'lineHeightHeading1',
+    'lineHeightHeading2',
+    'lineHeightHeading3',
+    'lineHeightHeading4',
+    'lineHeightHeading5',
+    'sizeXXL',
+    'sizeXL',
+    'sizeLG',
+    'sizeMD',
+    'sizeMS',
+    'size',
+    'sizeSM',
+    'sizeXS',
+    'sizeXXS',
+    'controlHeightSM',
+    'controlHeightXS',
+    'controlHeightLG',
+    'motionDurationFast',
+    'motionDurationMid',
+    'motionDurationSlow',
+    'lineWidthBold',
+    'borderRadiusXS',
+    'borderRadiusSM',
+    'borderRadiusLG',
+    'borderRadiusOuter',
+    'colorFillContent',
+    'colorFillContentHover',
+    'colorFillAlter',
+    'colorBgContainerDisabled',
+    'colorBorderBg',
+    'colorSplit',
+    'colorTextPlaceholder',
+    'colorTextDisabled',
+    'colorTextHeading',
+    'colorTextLabel',
+    'colorTextDescription',
+    'colorTextLightSolid',
+    'colorHighlight',
+    'colorBgTextHover',
+    'colorBgTextActive',
+    'colorIcon',
+    'colorIconHover',
+    'colorErrorOutline',
+    'colorWarningOutline',
+    'fontSizeIcon',
+    'lineWidthFocus',
+    'controlOutlineWidth',
+    'controlInteractiveSize',
+    'controlItemBgHover',
+    'controlItemBgActive',
+    'controlItemBgActiveHover',
+    'controlItemBgActiveDisabled',
+    'controlOutline',
+    'fontWeightStrong',
+    'opacityLoading',
+    'linkDecoration',
+    'linkHoverDecoration',
+    'linkFocusDecoration',
+    'controlPaddingHorizontal',
+    'controlPaddingHorizontalSM',
+    'paddingXXS',
+    'paddingXS',
+    'paddingSM',
+    'padding',
+    'paddingMD',
+    'paddingLG',
+    'paddingXL',
+    'paddingContentHorizontalLG',
+    'paddingContentVerticalLG',
+    'paddingContentHorizontal',
+    'paddingContentVertical',
+    'paddingContentHorizontalSM',
+    'paddingContentVerticalSM',
+    'marginXXS',
+    'marginXS',
+    'marginSM',
+    'margin',
+    'marginMD',
+    'marginLG',
+    'marginXL',
+    'marginXXL',
+    'boxShadow',
+    'boxShadowSecondary',
+    'boxShadowTertiary',
+    'screenXS',
+    'screenXSMin',
+    'screenXSMax',
+    'screenSM',
+    'screenSMMin',
+    'screenSMMax',
+    'screenMD',
+    'screenMDMin',
+    'screenMDMax',
+    'screenLG',
+    'screenLGMin',
+    'screenLGMax',
+    'screenXL',
+    'screenXLMin',
+    'screenXLMax',
+    'screenXXL',
+    'screenXXLMin'
+]
+
+export const generateThemeCssVariables = (theme: AntdToken) => {
+    const cssContent = cssVariables
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-expect-error
+        .map((variable) => `--${variable}: ${theme[variable]};`)
+        .join('\n')
+
+    return css`
+        :root {
+            ${cssContent}
+        }
+    `
+}
+
+export const addExtraCssVariables = (monaco: Monaco) => {
+    monaco.languages.registerCompletionItemProvider('css', {
+        provideCompletionItems: (
+            model: editor.ITextModel,
+            position: Position
+        ): languages.ProviderResult<languages.CompletionList> => {
+            const textUntilPosition = model.getValueInRange({
+                startLineNumber: 1,
+                startColumn: 1,
+                endLineNumber: position.lineNumber,
+                endColumn: position.column
+            })
+            if (!textUntilPosition.match(/var\(([^)]*)$/)) {
+                return { suggestions: [] }
+            }
+
+            const word = model.getWordUntilPosition(position)
+            const range = new monaco.Range(
+                position.lineNumber,
+                word.startColumn,
+                position.lineNumber,
+                word.endColumn
+            )
+
+            return {
+                suggestions: cssVariables.map(
+                    (variable): languages.CompletionItem => ({
+                        label: `--${variable}`,
+                        kind: monaco.languages.CompletionItemKind.Variable,
+                        insertText: `--${variable}`,
+                        range,
+                        detail: 'Oxygen Theme Variable'
+                    })
+                )
+            }
+        }
+    })
+}
+
+export const removeUselessAttributes = (theme: Omit<Theme, 'prefixCls'>) => {
+    const {
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-expect-error
+        Tree,
+        appearance,
+        browserPrefers,
+        isDarkMode,
+        setAppearance,
+        setThemeMode,
+        stylish,
+        themeMode,
+        wireframe,
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-expect-error
+        _tokenKey,
+        ...result
+    } = theme
+
+    return result
+}
--- a/src/util/editorExtraLibs/_index.d.ts
+++ b/src/util/editorExtraLibs/_index.d.ts