@chamn/engine 0.0.4 → 0.0.7

package/src/Engine.module.scss.d.ts

@@ -0,0 +1,5 @@
+import globalClassNames from './style.d';
+declare const classNames: typeof globalClassNames & {
+  readonly engineContainer: 'engineContainer';
+};
+export = classNames;

package/src/_dev_/page/Editor/index.tsx

@@ -3,7 +3,7 @@ import { Button, message, Modal } from 'antd';
 import React, { useCallback, useEffect, useState } from 'react';
 import ReactDOM from 'react-dom';
 import ReactDOMClient from 'react-dom/client';
-import Engine, { EnginContext } from '../../..';
+import { Engine, EnginContext } from '../../..';
 import '../../index.css';
 import { DEFAULT_PLUGIN_LIST } from '../../../plugins';
 import { DesignerExports } from '../../../plugins/Designer';

package/src/component/CSSEditor/index.tsx

@@ -1,9 +1,9 @@
 import { waitReactUpdate } from '@/utils';
 import { formatCSSProperty, StyleArr, styleArr2Obj } from '@/utils/css';
 import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
-import { Card, Collapse, Dropdown, Segmented, Space } from 'antd';
+import { Card, Collapse, Dropdown, Space } from 'antd';
 import CheckableTag from 'antd/es/tag/CheckableTag';
-import { MutableRefObject, Ref, RefObject, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { MutableRefObject, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { CSSPropertiesEditor, CSSPropertiesEditorRef } from '../CSSPropertiesEditor';
 import styles from './style.module.scss';
 // state: 'normal' | 'hover' | 'active' | 'focus' | 'first' | 'last' | 'even' | 'odd';
@@ -139,7 +139,6 @@ export const CSSEditor = (props: CSSEditorProps) => {
 
   const updateCssVal = useCallback(
     (mediaKey: string, val: StyleArr) => {
-      console.log(cssVal, selectedStateTag, mediaKey, val);
       const newVal = {
         ...cssVal,
         [selectedStateTag]: {
@@ -220,7 +219,7 @@ export const CSSEditor = (props: CSSEditorProps) => {
             marginBottom: '10px',
           }}
         >
-          <Collapse.Panel header={<span className={styles.header}>Normal</span>} key="normal">
+          <Collapse.Panel header={<span>Normal</span>} key="normal">
             <CSSPropertiesEditor
               ref={(ref) => {
                 cssPropertyRefMap.current['normal'] = ref;
@@ -231,7 +230,7 @@ export const CSSEditor = (props: CSSEditorProps) => {
           </Collapse.Panel>
           {mediaQueryList.map((el) => {
             return (
-              <Collapse.Panel header={<span className={styles.header}>{el.label}</span>} key={el.key}>
+              <Collapse.Panel header={<span>{el.label}</span>} key={el.key}>
                 <CSSPropertiesEditor
                   ref={(ref) => {
                     cssPropertyRefMap.current[el.key] = ref;

package/src/component/CSSEditor/style.module.scss.d.ts

@@ -0,0 +1,6 @@
+import globalClassNames from '../../style.d';
+declare const classNames: typeof globalClassNames & {
+  readonly stateTag: 'stateTag';
+  readonly stateTagClose: 'stateTagClose';
+};
+export = classNames;

package/src/component/CSSPropertiesEditor/index.tsx

@@ -181,11 +181,7 @@ export const SinglePropertyEditor = forwardRef<SinglePropertyEditorRef, SinglePr
           style={{
             width: `${keyInputWidth}px`,
           }}
-          className={clsx([
-            styles.cssKeyLabel,
-            isCreate && styles.inputAuto,
-            isCreate && focusState.key && styles.active,
-          ])}
+          className={clsx([isCreate && styles.inputAuto, isCreate && focusState.key && styles.active])}
           onFocus={() => {
             setFocusState({
               key: true,

package/src/component/CSSPropertiesEditor/style.module.scss.d.ts

@@ -0,0 +1,15 @@
+import globalClassNames from '../../style.d';
+declare const classNames: typeof globalClassNames & {
+  readonly cssFieldBox: 'cssFieldBox';
+  readonly 'ant-select-selector': 'ant-select-selector';
+  readonly 'ant-select-single': 'ant-select-single';
+  readonly 'ant-select-selection-search': 'ant-select-selection-search';
+  readonly 'ant-select-status-error': 'ant-select-status-error';
+  readonly inputAuto: 'inputAuto';
+  readonly active: 'active';
+  readonly cssBox: 'cssBox';
+  readonly 'ant-collapse-borderless': 'ant-collapse-borderless';
+  readonly 'ant-collapse-item': 'ant-collapse-item';
+  readonly 'ant-collapse-content-box': 'ant-collapse-content-box';
+};
+export = classNames;

package/src/component/CSSPropertiesVariableBindEditor/index.tsx

@@ -160,7 +160,7 @@ const SinglePropertyEditor = forwardRef<SinglePropertyEditorRef, SinglePropertyE
                 style={{
                   width: `${keyInputWidth}px`,
                 }}
-                className={clsx([styles.inputBox, focusState.key && styles.active])}
+                className={clsx([styles.inputBox])}
                 onFocus={() => {
                   setFocusState({
                     key: true,

package/src/component/CSSPropertiesVariableBindEditor/style.module.scss.d.ts

@@ -0,0 +1,15 @@
+import globalClassNames from '../../style.d';
+declare const classNames: typeof globalClassNames & {
+  readonly cssFieldBox: 'cssFieldBox';
+  readonly 'ant-select-selector': 'ant-select-selector';
+  readonly row: 'row';
+  readonly fieldLabel: 'fieldLabel';
+  readonly leftBox: 'leftBox';
+  readonly rightBox: 'rightBox';
+  readonly inputBox: 'inputBox';
+  readonly cssBox: 'cssBox';
+  readonly 'ant-collapse-borderless': 'ant-collapse-borderless';
+  readonly 'ant-collapse-item': 'ant-collapse-item';
+  readonly 'ant-collapse-content-box': 'ant-collapse-content-box';
+};
+export = classNames;

package/src/component/CustomSchemaForm/components/Form/Field/style.module.scss.d.ts

@@ -0,0 +1,8 @@
+import globalClassNames from '../../../../../style.d';
+declare const classNames: typeof globalClassNames & {
+  readonly fieldBox: 'fieldBox';
+  readonly label: 'label';
+  readonly tipsLabel: 'tipsLabel';
+  readonly content: 'content';
+};
+export = classNames;

package/src/component/CustomSchemaForm/components/SetterSwitcher/style.module.scss.d.ts

@@ -0,0 +1,7 @@
+import globalClassNames from '../../../../style.d';
+declare const classNames: typeof globalClassNames & {
+  readonly switchBtn: 'switchBtn';
+  readonly shapeFieldBox: 'shapeFieldBox';
+  readonly collapseHeader: 'collapseHeader';
+};
+export = classNames;

package/src/component/CustomSchemaForm/components/Setters/ArraySetter/style.module.scss.d.ts

@@ -0,0 +1,7 @@
+import globalClassNames from '../../../../../style.d';
+declare const classNames: typeof globalClassNames & {
+  readonly dragItem: 'dragItem';
+  readonly sortModalBox: 'sortModalBox';
+  readonly addOneBtn: 'addOneBtn';
+};
+export = classNames;

package/src/component/CustomSchemaForm/components/Setters/CSSValueSetter/style.module.scss.d.ts

@@ -0,0 +1,6 @@
+import globalClassNames from '../../../../../style.d';
+declare const classNames: typeof globalClassNames & {
+  readonly inputAuto: 'inputAuto';
+  readonly active: 'active';
+};
+export = classNames;

package/src/component/CustomSchemaForm/style.module.scss.d.ts

@@ -0,0 +1,11 @@
+import globalClassNames from '../../style.d';
+declare const classNames: typeof globalClassNames & {
+  readonly CFromRenderBox: 'CFromRenderBox';
+  readonly 'ant-collapse': 'ant-collapse';
+  readonly 'ant-collapse-content': 'ant-collapse-content';
+  readonly 'ant-collapse-content-box': 'ant-collapse-content-box';
+  readonly 'ant-collapse-item': 'ant-collapse-item';
+  readonly 'ant-collapse-header': 'ant-collapse-header';
+  readonly 'ant-collapse-expand-icon': 'ant-collapse-expand-icon';
+};
+export = classNames;

package/src/component/MonacoEditor/index.tsx

@@ -1,49 +1,9 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import * as monaco from 'monaco-editor';
 
-// import 'monaco-editor/esm/vs/editor/standalone/browser/accessibilityHelp/accessibilityHelp.js';
-// import 'monaco-editor/esm/vs/editor/standalone/browser/iPadShowKeyboard/iPadShowKeyboard.js';
-// import 'monaco-editor/esm/vs/editor/standalone/browser/inspectTokens/inspectTokens.js';
-// import 'monaco-editor/esm/vs/editor/standalone/browser/quickAccess/standaloneHelpQuickAccess.js';
-// import 'monaco-editor/esm/vs/editor/standalone/browser/quickAccess/standaloneGotoLineQuickAccess.js';
-// import 'monaco-editor/esm/vs/editor/standalone/browser/quickAccess/standaloneGotoSymbolQuickAccess.js';
-// import 'monaco-editor/esm/vs/editor/standalone/browser/quickAccess/standaloneCommandsQuickAccess.js';
-// import 'monaco-editor/esm/vs/editor/standalone/browser/referenceSearch/standaloneReferenceSearch.js';
-
-// import 'monaco-editor/esm/vs/language/typescript/monaco.contribution';
-// // import 'monaco-editor/esm/vs/language/typescript/monaco.contribution';
-// // import 'monaco-editor/esm/vs/language/css/monaco.contribution';
-// import 'monaco-editor/esm/vs/language/json/monaco.contribution';
-// // import 'monaco-editor/esm/vs/language/html/monaco.contribution';
-// // import 'monaco-editor/esm/vs/basic-languages/monaco.contribution';
-// import 'monaco-editor/esm/vs/basic-languages/javascript/javascript.contribution';
-
-import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
-import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
-// import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker';
-// import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker';
-import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';
 import { useRef } from 'react';
 import * as monacoEditor from 'monaco-editor/esm/vs/editor/editor.api';
 
-self.MonacoEnvironment = {
-  getWorker(_, label) {
-    if (label === 'json') {
-      return new jsonWorker();
-    }
-    // if (label === 'css' || label === 'scss' || label === 'less') {
-    //   return new cssWorker();
-    // }
-    // if (label === 'html' || label === 'handlebars' || label === 'razor') {
-    //   return new htmlWorker();
-    // }
-    if (label === 'typescript' || label === 'javascript') {
-      return new tsWorker();
-    }
-    return new editorWorker();
-  },
-};
-
 export type MonacoEditorInstance = monacoEditor.editor.IStandaloneCodeEditor;
 
 export type MonacoEditorProps = {

package/src/component/Workbench/style.module.scss.d.ts

@@ -0,0 +1,26 @@
+import globalClassNames from '../../style.d';
+declare const classNames: typeof globalClassNames & {
+  readonly workbenchContainer: 'workbenchContainer';
+  readonly topToolBarBox: 'topToolBarBox';
+  readonly logo: 'logo';
+  readonly topToolBarView: 'topToolBarView';
+  readonly bodyContent: 'bodyContent';
+  readonly leftBox: 'leftBox';
+  readonly pluginIconBar: 'pluginIconBar';
+  readonly pluginIconItem: 'pluginIconItem';
+  readonly active: 'active';
+  readonly pluginPanelBoxResizeBox: 'pluginPanelBoxResizeBox';
+  readonly pluginHeader: 'pluginHeader';
+  readonly pluginNameText: 'pluginNameText';
+  readonly closeBtn: 'closeBtn';
+  readonly fixedBtn: 'fixedBtn';
+  readonly pluginPanelBox: 'pluginPanelBox';
+  readonly rightResizeBox: 'rightResizeBox';
+  readonly arrowCursor: 'arrowCursor';
+  readonly rightBox: 'rightBox';
+  readonly centerBox: 'centerBox';
+  readonly subTopToolbarBox: 'subTopToolbarBox';
+  readonly canvasBox: 'canvasBox';
+  readonly scrollBox: 'scrollBox';
+};
+export = classNames;

package/src/core/pluginManager.ts

@@ -1,4 +1,4 @@
-import Engine from '@/Engine';
+import { Engine } from '@/index';
 import { AssetPackage, CPage } from '@chamn/model';
 import { i18n } from 'i18next';
 import mitt, { Emitter } from 'mitt';

package/src/index.tsx

@@ -21,7 +21,7 @@ export type EngineProps = {
   onReady?: (ctx: EnginContext) => void;
 };
 
-class Engine extends React.Component<EngineProps> {
+export class Engine extends React.Component<EngineProps> {
   currentSelectNode: CNode | CRootNode | null;
 
   pluginManager!: PluginManager;
@@ -136,4 +136,7 @@ class Engine extends React.Component<EngineProps> {
   }
 }
 
-export default Engine;
+export * as plugins from './plugins';
+export * from '@chamn/layout';
+
+export * from './material/innerMaterial';

package/src/plugins/AdvancePanel/style.module.scss.d.ts

@@ -0,0 +1,7 @@
+import globalClassNames from '../../style.d';
+declare const classNames: typeof globalClassNames & {
+  readonly advanceBox: 'advanceBox';
+  readonly 'ant-input-affix-wrapper': 'ant-input-affix-wrapper';
+  readonly 'ant-input-prefix': 'ant-input-prefix';
+};
+export = classNames;

package/src/plugins/ComponentLibrary/components/DragItem/style.module.scss.d.ts

@@ -0,0 +1,9 @@
+import globalClassNames from '../../../../style.d';
+declare const classNames: typeof globalClassNames & {
+  readonly square: 'square';
+  readonly componentItem: 'componentItem';
+  readonly iconImg: 'iconImg';
+  readonly iconBox: 'iconBox';
+  readonly iconText: 'iconText';
+};
+export = classNames;

package/src/plugins/ComponentLibrary/components/ListView/index.tsx

@@ -30,7 +30,6 @@ export const ListView = (props: ListViewProps) => {
                     id={it.id!}
                     key={it.id!}
                     name={it.title}
-                    containerClassName={styles.itemBox}
                     icon={it.snapshot || it.snapshotText}
                     iconText={it.snapshotText}
                     description={it.description || ''}

package/src/plugins/ComponentLibrary/components/ListView/style.module.scss.d.ts

@@ -0,0 +1,12 @@
+import globalClassNames from '../../../../style.d';
+declare const classNames: typeof globalClassNames & {
+  readonly ListBox: 'ListBox';
+  readonly 'ant-collapse': 'ant-collapse';
+  readonly 'ant-collapse-content': 'ant-collapse-content';
+  readonly 'ant-collapse-content-box': 'ant-collapse-content-box';
+  readonly 'ant-collapse-header': 'ant-collapse-header';
+  readonly 'ant-collapse-expand-icon': 'ant-collapse-expand-icon';
+  readonly 'ant-collapse-item': 'ant-collapse-item';
+  readonly collapsePanel: 'collapsePanel';
+};
+export = classNames;

package/src/plugins/ComponentLibrary/style.module.scss.d.ts

@@ -0,0 +1,11 @@
+import globalClassNames from '../../style.d';
+declare const classNames: typeof globalClassNames & {
+  readonly container: 'container';
+  readonly 'ant-tabs': 'ant-tabs';
+  readonly 'ant-tabs-tab': 'ant-tabs-tab';
+  readonly 'ant-tabs-content': 'ant-tabs-content';
+  readonly 'ant-tabs-content-top': 'ant-tabs-content-top';
+  readonly 'ant-tabs-nav': 'ant-tabs-nav';
+  readonly tabTitle: 'tabTitle';
+};
+export = classNames;

package/src/plugins/Designer/components/DefaultSelectToolBar/style.module.scss.d.ts

@@ -0,0 +1,11 @@
+import globalClassNames from '../../../../style.d';
+declare const classNames: typeof globalClassNames & {
+  readonly toolBarBox: 'toolBarBox';
+  readonly item: 'item';
+  readonly layoutSelectBox: 'layoutSelectBox';
+  readonly hoverBox: 'hoverBox';
+  readonly hoverBoxActive: 'hoverBoxActive';
+  readonly hoverItem: 'hoverItem';
+  readonly placeholder: 'placeholder';
+};
+export = classNames;

package/src/plugins/Designer/style.module.scss.d.ts

@@ -0,0 +1,5 @@
+import globalClassNames from '../../style.d';
+declare const classNames: typeof globalClassNames & {
+  readonly hoverTips: 'hoverTips';
+};
+export = classNames;

package/src/plugins/DisplaySourceSchema/index.tsx

@@ -3,7 +3,7 @@ import { Modal } from 'antd';
 import { MonacoEditor, MonacoEditorInstance } from '../../component/MonacoEditor';
 import { CPage } from '@chamn/model';
 import { waitReactUpdate } from '../../utils';
-import { EnginContext } from '../../Engine';
+import { EnginContext } from '../../index';
 import { DesignerExports } from '../Designer';
 
 export type DisplaySourceSchemaProps = {

package/src/plugins/GlobalStatePanel/style.module.scss.d.ts

@@ -0,0 +1,5 @@
+import globalClassNames from '../../style.d';
+declare const classNames: typeof globalClassNames & {
+  readonly box: 'box';
+};
+export = classNames;

package/src/plugins/OutlineTree/components/TreeView/style.module.scss.d.ts

@@ -0,0 +1,16 @@
+import globalClassNames from '../../../../style.d';
+declare const classNames: typeof globalClassNames & {
+  readonly contentBox: 'contentBox';
+  readonly nodeBox: 'nodeBox';
+  readonly toolbarBox: 'toolbarBox';
+  readonly iconItem: 'iconItem';
+  readonly nodeContent: 'nodeContent';
+  readonly selected: 'selected';
+  readonly nodeArrow: 'nodeArrow';
+  readonly expanded: 'expanded';
+  readonly nodeRenderView: 'nodeRenderView';
+  readonly nodeChildren: 'nodeChildren';
+  readonly dropAnchorLine: 'dropAnchorLine';
+  readonly arrowSpan: 'arrowSpan';
+};
+export = classNames;

package/src/plugins/PropertyPanel/style.module.scss.d.ts

@@ -0,0 +1,10 @@
+import globalClassNames from '../../style.d';
+declare const classNames: typeof globalClassNames & {
+  readonly CFromRenderBox: 'CFromRenderBox';
+  readonly 'ant-collapse': 'ant-collapse';
+  readonly 'ant-collapse-content': 'ant-collapse-content';
+  readonly 'ant-collapse-content-box': 'ant-collapse-content-box';
+  readonly 'ant-collapse-item': 'ant-collapse-item';
+  readonly 'ant-collapse-header': 'ant-collapse-header';
+};
+export = classNames;

package/src/plugins/RightPanel/style.module.scss.d.ts

@@ -0,0 +1,10 @@
+import globalClassNames from '../../style.d';
+declare const classNames: typeof globalClassNames & {
+  readonly rightPanelContainer: 'rightPanelContainer';
+  readonly 'ant-tabs': 'ant-tabs';
+  readonly 'ant-tabs-tab': 'ant-tabs-tab';
+  readonly 'ant-tabs-content': 'ant-tabs-content';
+  readonly 'ant-tabs-content-top': 'ant-tabs-content-top';
+  readonly 'ant-tabs-tabpane': 'ant-tabs-tabpane';
+};
+export = classNames;

package/src/plugins/VisualPanelPlus/index.tsx

@@ -54,7 +54,9 @@ export const VisualPanelPlus = (props: { node: CNode | CRootNode; pluginCtx: CPl
   };
 
   const onUpdateCss = (val: CSSVal) => {
-    node.value.css = formatCssToNodeVal(node.id, val);
+    // class name 不能以数字开头，这里使用c_前缀
+    node.value.css = formatCssToNodeVal(`c_${node.id}`, val);
+    console.log(' node.value.css', node.value.css);
     node.updateValue();
   };
 
@@ -72,24 +74,6 @@ export const VisualPanelPlus = (props: { node: CNode | CRootNode; pluginCtx: CPl
           }}
         />
       </div>
-      <Collapse
-        defaultActiveKey={['origin-css-edit']}
-        bordered={false}
-        style={{
-          marginBottom: '10px',
-        }}
-      >
-        <Collapse.Panel header={<span className={styles.header}>Style</span>} key="origin-css-edit">
-          <CSSPropertiesEditor
-            key={node.id}
-            ref={cssPropertyEditorRef}
-            onValueChange={(val) => {
-              onUpdateStyle([...val, ...formatStyle.expressionProperty]);
-            }}
-            initialValue={formatStyle.normalProperty}
-          />
-        </Collapse.Panel>
-      </Collapse>
       <Collapse
         defaultActiveKey={['origin-css-edit']}
         bordered={false}

package/src/plugins/VisualPanelPlus/style.module.scss.d.ts

@@ -0,0 +1,10 @@
+import globalClassNames from '../../style.d';
+declare const classNames: typeof globalClassNames & {
+  readonly visualPanelBox: 'visualPanelBox';
+  readonly header: 'header';
+  readonly 'ant-collapse': 'ant-collapse';
+  readonly 'ant-collapse-item': 'ant-collapse-item';
+  readonly 'ant-collapse-header': 'ant-collapse-header';
+  readonly 'ant-collapse-expand-icon': 'ant-collapse-expand-icon';
+};
+export = classNames;

package/src/plugins/index.tsx

@@ -4,6 +4,7 @@ import { DesignerPlugin } from './Designer';
 import { OutlineTreePlugin } from './OutlineTree';
 import { RightPanelPlugin } from './RightPanel';
 import { GlobalStatePanelPlugin } from './GlobalStatePanel';
+import { DisplaySourceSchema } from './DisplaySourceSchema';
 import { HistoryPlugin } from './History';
 
 export const DEFAULT_PLUGIN_LIST: CPlugin[] = [
@@ -15,10 +16,11 @@ export const DEFAULT_PLUGIN_LIST: CPlugin[] = [
   HistoryPlugin,
 ];
 
-export default {
+export {
   DesignerPlugin,
   ComponentLibPlugin,
   RightPanelPlugin,
   GlobalStatePanelPlugin,
   HistoryPlugin,
+  DisplaySourceSchema,
 };

package/src/style.d.ts

@@ -0,0 +1,2 @@
+declare const classNames: {};
+export = classNames;

package/src/typing.d.ts

@@ -2,3 +2,8 @@ declare module '*.scss' {
   const content: { [key: string]: any };
   export = content;
 }
+
+declare module '*.worker?worker' {
+  const content: any;
+  export = content;
+}

package/dist/typing.d.ts

@@ -1,4 +0,0 @@
-declare module '*.scss' {
-  const content: { [key: string]: any };
-  export = content;
-}

package/dist/vite-env.d.ts

@@ -1 +0,0 @@
-/// <reference types="vite/client" />

package/public/typing.d.ts

@@ -1,4 +0,0 @@
-declare module '*.scss' {
-  const content: { [key: string]: any };
-  export = content;
-}

package/public/vite-env.d.ts

@@ -1 +0,0 @@
-/// <reference types="vite/client" />

package/src/component/MonacoEditor/index copy.tsx

@@ -1,119 +0,0 @@
-import React, { useEffect } from 'react';
-import * as monaco from 'monaco-editor';
-
-// import 'monaco-editor/esm/vs/editor/standalone/browser/accessibilityHelp/accessibilityHelp.js';
-// import 'monaco-editor/esm/vs/editor/standalone/browser/iPadShowKeyboard/iPadShowKeyboard.js';
-// import 'monaco-editor/esm/vs/editor/standalone/browser/inspectTokens/inspectTokens.js';
-// import 'monaco-editor/esm/vs/editor/standalone/browser/quickAccess/standaloneHelpQuickAccess.js';
-// import 'monaco-editor/esm/vs/editor/standalone/browser/quickAccess/standaloneGotoLineQuickAccess.js';
-// import 'monaco-editor/esm/vs/editor/standalone/browser/quickAccess/standaloneGotoSymbolQuickAccess.js';
-// import 'monaco-editor/esm/vs/editor/standalone/browser/quickAccess/standaloneCommandsQuickAccess.js';
-// import 'monaco-editor/esm/vs/editor/standalone/browser/referenceSearch/standaloneReferenceSearch.js';
-
-// import 'monaco-editor/esm/vs/language/typescript/monaco.contribution';
-// // import 'monaco-editor/esm/vs/language/typescript/monaco.contribution';
-// // import 'monaco-editor/esm/vs/language/css/monaco.contribution';
-// import 'monaco-editor/esm/vs/language/json/monaco.contribution';
-// // import 'monaco-editor/esm/vs/language/html/monaco.contribution';
-// // import 'monaco-editor/esm/vs/basic-languages/monaco.contribution';
-// import 'monaco-editor/esm/vs/basic-languages/javascript/javascript.contribution';
-
-import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
-import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
-// import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker';
-// import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker';
-import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';
-import { useRef } from 'react';
-import * as monacoEditor from 'monaco-editor/esm/vs/editor/editor.api';
-
-self.MonacoEnvironment = {
-  getWorker(_, label) {
-    if (label === 'json') {
-      return new jsonWorker();
-    }
-    // if (label === 'css' || label === 'scss' || label === 'less') {
-    //   return new cssWorker();
-    // }
-    // if (label === 'html' || label === 'handlebars' || label === 'razor') {
-    //   return new htmlWorker();
-    // }
-    if (label === 'typescript' || label === 'javascript') {
-      return new tsWorker();
-    }
-    return new editorWorker();
-  },
-};
-
-export type MonacoEditorInstance = monacoEditor.editor.IStandaloneCodeEditor;
-
-export type MonacoEditorProps = {
-  beforeMount?: (monaco: typeof monacoEditor) => void;
-  onDidMount?: (editor: MonacoEditorInstance) => void;
-  options?: monaco.editor.IStandaloneEditorConstructionOptions;
-  override?: monaco.editor.IEditorOverrideServices;
-  onChange?: (val: string) => void;
-  onDidChangeMarkers?: (markers: monaco.editor.IMarker[]) => void;
-  initialValue?: string;
-  language?: 'json' | 'javascript' | 'typescript';
-};
-
-export const MonacoEditor = (props: MonacoEditorProps) => {
-  const editorDomRef = useRef<HTMLDivElement>(null);
-  const onChangeRef = useRef<MonacoEditorProps['onChange'] | undefined>();
-  onChangeRef.current = props.onChange;
-  const onDidChangeMarkersRef = useRef<MonacoEditorProps['onDidChangeMarkers'] | undefined>();
-  onDidChangeMarkersRef.current = props.onDidChangeMarkers;
-  const editorInstance = useRef<MonacoEditorInstance | null>(null);
-
-  useEffect(() => {
-    if (!editorDomRef.current) {
-      return;
-    }
-    props.beforeMount?.(monaco);
-    const editor = monaco.editor.create(
-      editorDomRef.current,
-      {
-        ...(props.options || {}),
-        value: props.initialValue || props.options?.value,
-        language: props.language || props.options?.language,
-      },
-      { ...(props.override || {}) }
-    );
-
-    editorInstance.current = editor;
-    props.onDidMount?.(editor);
-    const subscription = editor.getModel()?.onDidChangeContent(() => {
-      onChangeRef.current?.(editor.getValue());
-    });
-
-    monaco.editor.onDidChangeMarkers((uris) => {
-      const editorModel = editor.getModel();
-      if (!editorModel) {
-        return;
-      }
-      const editorUri = editorModel.uri;
-      const changeUri = uris.find((el) => el.path === editorUri.path);
-      if (changeUri) {
-        const res = monaco.editor.getModelMarkers({
-          resource: editorUri,
-        });
-        onDidChangeMarkersRef.current?.(res);
-      }
-    });
-
-    () => {
-      editor.dispose();
-      subscription?.dispose();
-    };
-  }, []);
-
-  return (
-    <div
-      style={{
-        width: '100%',
-        height: '100%',
-      }}
-      ref={editorDomRef}
-    ></div>
-  );
-};