{"_id":"@astii/monaco-editor","_rev":"3-e596b21afeb109b0c09d306088be49f8","name":"@astii/monaco-editor","dist-tags":{"latest":"0.0.4"},"versions":{"0.0.2":{"name":"@astii/monaco-editor","version":"0.0.2","keywords":["monaco-editor","react"],"license":"MIT","_id":"@astii/monaco-editor@0.0.2","maintainers":[{"name":"tangxiaoxin","email":"1302947749@qq.com"}],"dist":{"shasum":"982fc8b84b72d4a1b063eda2a2e3f69fd6c7ea83","tarball":"https://registry.npmjs.org/@astii/monaco-editor/-/monaco-editor-0.0.2.tgz","fileCount":66,"integrity":"sha512-CG2Ds9kpTikO9Nvudpc1My4IvyW8sSXz3XwKcBuL8bL6yQtFn/trWzEIzc5YyyGYAilPqyvtyC7kFGvgDi9Lkg==","signatures":[{"sig":"MEUCIDtCMukhrSi+vK4rQXABGko9c1pJNLMcouei+o25f1k3AiEApJiPiTh5+xKfjuE/OcKs6wFM0YOTzXl7iHMvwM1seB8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":157762},"main":"lib/index.js","types":"esm/index.d.ts","module":"esm/index.js","authors":["1302947749@qq.com"],"gitHead":"1542a7c7c3cc46317275f376c2026cf12e7ada7c","scripts":{"dev":"father dev","build":"father build","build:deps":"father prebundle","prepublishOnly":"father doctor && npm run build"},"_npmUser":{"name":"tangxiaoxin","email":"1302947749@qq.com"},"_npmVersion":"10.8.2","description":"base on monaco-editor/react","directories":{},"_nodeVersion":"18.19.0","dependencies":{"classnames":"^2.5.1","@monaco-editor/react":"^4.6.0","monaco-jsx-syntax-highlight":"^1.2.0"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.2.0","father":"^4.5.1","@types/react":"^18.2.48","@types/react-dom":"^18.3.0","@types/babel__core":"^7.20.5","@types/babel__standalone":"^7.1.7","@types/react-syntax-highlighter":"^15.5.13"},"peerDependencies":{"react":"^18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/monaco-editor_0.0.2_1735893630350_0.3436063415367756","host":"s3://npm-registry-packages-npm-production"}},"0.0.3":{"name":"@astii/monaco-editor","version":"0.0.3","keywords":["monaco-editor","react"],"license":"MIT","_id":"@astii/monaco-editor@0.0.3","maintainers":[{"name":"tangxiaoxin","email":"1302947749@qq.com"}],"dist":{"shasum":"de9d71caac295c1e4fb7918c8f75ff35417d6621","tarball":"https://registry.npmjs.org/@astii/monaco-editor/-/monaco-editor-0.0.3.tgz","fileCount":66,"integrity":"sha512-ZzxsoJAf8CB8q7x85zpj9eOScZvuZICTBRmlv7kDtrHLtqgrHFVbUvEWr6ksvg494sNWy+rgYnPl1Draz0qP+Q==","signatures":[{"sig":"MEQCIDzdBP58YelwyPdhhv+OEXrtMFwru8Me4WIhil5OeeVbAiAqXSuVu3YLgjegfiaKXDUU1UgtW5rrv6tWEZwui+he8w==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":166547},"main":"lib/index.js","types":"esm/index.d.ts","module":"esm/index.js","authors":["1302947749@qq.com"],"gitHead":"ce7cfdbca2ff2f6b29331c66738ddbac27acf10d","scripts":{"dev":"father dev","build":"father build","build:deps":"father prebundle","prepublishOnly":"father doctor && npm run build"},"_npmUser":{"name":"tangxiaoxin","email":"1302947749@qq.com"},"_npmVersion":"10.8.2","description":"base on monaco-editor/react","directories":{},"_nodeVersion":"18.19.0","dependencies":{"classnames":"^2.5.1","@monaco-editor/react":"^4.6.0","monaco-jsx-syntax-highlight":"^1.2.0"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org"},"_hasShrinkwrap":false,"devDependencies":{"father":"^4.5.1","@types/react":"^18.2.48","@types/react-dom":"^18.3.0","@types/babel__core":"^7.20.5","@types/babel__standalone":"^7.1.7","@types/react-syntax-highlighter":"^15.5.13"},"peerDependencies":{"react":"^17.0.2"},"_npmOperationalInternal":{"tmp":"tmp/monaco-editor_0.0.3_1741851661044_0.41220522065593146","host":"s3://npm-registry-packages-npm-production"}},"0.0.4":{"name":"@astii/monaco-editor","version":"0.0.4","description":"base on monaco-editor/react","main":"lib/index.js","module":"esm/index.js","types":"esm/index.d.ts","scripts":{"dev":"father dev","build":"father build","build:deps":"father prebundle","prepublishOnly":"father doctor && npm run build"},"keywords":["monaco-editor","react"],"authors":["1302947749@qq.com"],"license":"MIT","publishConfig":{"access":"public","registry":"https://registry.npmjs.org"},"devDependencies":{"@types/babel__core":"^7.20.5","@types/babel__standalone":"^7.1.7","@types/react":"^18.2.48","@types/react-dom":"^18.3.0","@types/react-syntax-highlighter":"^15.5.13","father":"^4.5.1"},"dependencies":{"@monaco-editor/react":"^4.6.0","classnames":"^2.5.1","monaco-jsx-syntax-highlight":"^1.2.0"},"peerDependencies":{"react":"^17.0.2"},"_id":"@astii/monaco-editor@0.0.4","gitHead":"b292dc2ecb8ec6ccbb008f18cb96f331ddc208d0","_nodeVersion":"18.19.0","_npmVersion":"10.8.2","dist":{"integrity":"sha512-qcEP4FRs0LkNrpULFIX5QcwzPefn1pqC/06mp/HyTESTNid2Rs0QAYTmgATC/q4sgIK02EUgJS3T6fvIUUViWg==","shasum":"5519d9b4237c5a3990ea65045e33148f96c1f5fb","tarball":"https://registry.npmjs.org/@astii/monaco-editor/-/monaco-editor-0.0.4.tgz","fileCount":66,"unpackedSize":166547,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDMt13lWauLAHlKvtswIS7Ak4xZHdsqqrbqS88TncFx4AIhAObFTtG2RtJ+y90okLT8W5TWe6tC4L/TMel4hRWAEE7a"}]},"_npmUser":{"name":"tangxiaoxin","email":"1302947749@qq.com"},"directories":{},"maintainers":[{"name":"tangxiaoxin","email":"1302947749@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/monaco-editor_0.0.4_1742216330540_0.22807351890864824"},"_hasShrinkwrap":false}},"time":{"created":"2025-01-03T08:40:30.185Z","modified":"2025-03-17T12:58:50.960Z","0.0.2":"2025-01-03T08:40:30.527Z","0.0.3":"2025-03-13T07:41:01.234Z","0.0.4":"2025-03-17T12:58:50.761Z"},"license":"MIT","keywords":["monaco-editor","react"],"description":"base on monaco-editor/react","maintainers":[{"name":"tangxiaoxin","email":"1302947749@qq.com"}],"readme":"# @astii/monaco-editor\n\n[![NPM version](https://img.shields.io/npm/v/@astii/monaco-editor.svg?style=flat)](https://npmjs.com/package/@astii/monaco-editor)\n[![NPM downloads](http://img.shields.io/npm/dm/@astii/monaco-editor.svg?style=flat)](https://npmjs.com/package/@astii/monaco-editor)\n\n![alt text](https://p4-ec.eckwai.com/kos/nlav12333/monaco/image.png)\n\nMonaco Editor component for React. which based on [@monaco-editor/react](https://www.npmjs.com/package/@monaco-editor/react). Provide more custom configurations and capabilities\n\n## Features\n\n- [x] Support tsx theme and syntax highlight\n- [x] Support ts(x) compile and babel-standalone\n- [x] Support extraLibs\n- [x] Support more monaco-editor events\n- [x] Support AI copilot with [@astii/monaco-copilot](https://www.npmjs.com/package/@astii/monaco-copilot)\n- [x] Support AI code chat with [@astii/monaco-chat](https://www.npmjs.com/package/@astii/monaco-chat)\n\n## Install\n\n```bash\n$ yarn add @astii/monaco-editor\n```\n\n## Usage\n\n```jsx\nimport React, { useCallback, useRef, useState } from \"react\";\nimport { Code, type EditorProps, type HandlerType, type Editor } from \"@astii/monaco-editor\";\nexport default () => {\n  const codeIns = useRef<HandlerType>();\n  const [value, setValue] = useState<string | undefined>(`const Test = () => {\n    const num: number = 123\n    return (\n      <div className='test'>\n        {num}\n        <h3 style={{color: '#00FF00'}}>这是一个React组件</h3>\n      </div>\n    )\n  }\n  `);\n\n  const handleFormat = () => {\n    codeIns.current?.format();\n  };\n\n  const handleCompile = useCallback(async () => {\n    const code = await codeIns.current.compile(value);\n    console.log(code);\n  }, [value]);\n\n  return (\n    <div>\n      <button onClick={handleFormat}>format</button>\n      <button onClick={handleCompile}>compile</button>\n      <div style={{height: 300}}>\n        <Editor\n          ref={codeIns}\n          value={value}\n          language=\"typescript\"\n          isTsx={true}\n          height={800}\n          path={\"index.tsx\"}\n          onMount={(editor, monaco) => {\n            console.log(\"editor mounted\", editor, monaco);\n          }}\n          onChange={(value) => setValue(value)}\n        />\n      </div>\n    </div>\n  );\n};\n\n```\n\n## Options\n\n```ts\ntype EditorProps = {\n  /**\n   * Default value of the current model\n   */\n  defaultValue?: string;\n  /**\n   * Default language of the current model\n   */\n  defaultLanguage?: string;\n  /**\n   * Default path of the current model\n   * Will be passed as the third argument to `.createModel` method\n   * `monaco.editor.createModel(..., ..., monaco.Uri.parse(defaultPath))`\n   */\n  defaultPath?: string;\n  /**\n   * Value of the current model\n   */\n  value?: string;\n  /**\n   * Language of the current model\n   */\n  language?: string;\n  /**\n   * Path of the current model\n   * Will be passed as the third argument to `.createModel` method\n   * `monaco.editor.createModel(..., ..., monaco.Uri.parse(defaultPath))`\n   */\n  path?: string;\n  /**\n   * The theme for the monaco\n   * Available options \"vs-dark\" | \"light\"\n   * Define new themes by `monaco.editor.defineTheme`\n   * @default \"light\"\n   */\n  theme?: Theme | string;\n  /**\n   * The line to jump on it\n   */\n  line?: number;\n  /**\n   * The loading screen before the editor will be mounted\n   * @default \"Loading...\"\n   */\n  loading?: ReactNode;\n  /**\n   * IStandaloneEditorConstructionOptions\n   */\n  options?: editor.IStandaloneEditorConstructionOptions;\n  /**\n   * IEditorOverrideServices\n   */\n  overrideServices?: editor.IEditorOverrideServices;\n  /**\n   * Indicator whether to save the models' view states between model changes or not\n   * Defaults to true\n   */\n  saveViewState?: boolean;\n  /**\n   * Indicator whether to dispose the current model when the Editor is unmounted or not\n   * @default false\n   */\n  keepCurrentModel?: boolean;\n  /**\n   * Width of the editor wrapper\n   * @default \"100%\"\n   */\n  width?: number | string;\n  /**\n   * Height of the editor wrapper, must set the height of parentNode\n   * @default \"100%\"\n   */\n  height?: number | string;\n  /**\n   * Class name for the editor container\n   */\n  className?: string;\n  /**\n   * Props applied to the wrapper element\n   */\n  wrapperProps?: object;\n  /**\n   * Signature: function(monaco: Monaco) => void\n   * An event is emitted before the editor is mounted\n   * It gets the monaco instance as a first argument\n   * Defaults to \"noop\"\n   */\n  beforeMount?: BeforeMount;\n  /**\n   * Signature: function(editor: monaco.editor.IStandaloneCodeEditor, monaco: Monaco) => void\n   * An event is emitted when the editor is mounted\n   * It gets the editor instance as a first argument and the monaco instance as a second\n   * Defaults to \"noop\"\n   */\n  onMount?: OnMount;\n  /**\n   * Signature: function(value: string | undefined, ev: monaco.editor.IModelContentChangedEvent) => void\n   * An event is emitted when the content of the current model is changed\n   */\n  onChange?: OnChange;\n  /**\n   * Signature: function(markers: monaco.editor.IMarker[]) => void\n   * An event is emitted when the content of the current model is changed\n   * and the current model markers are ready\n   * Defaults to \"noop\"\n   */\n  onValidate?: OnValidate;\n};\n\ninterface CoderProps extends EditorProps {\n  extraLib?: { name: string; content: string }[];\n  isTsx?: boolean;\n  loaderConfig?: {\n    paths: {\n      vs: string;\n    };\n  };\n  eslint?: Partial<{\n    src: string;\n    config: Record<string, any>;\n  }>;\n  /**\n   * babel-standalone\n   * @default \"https://unpkg.com/@babel/standalone/babel.min.js\"\n   */\n  babel?: Partial<{\n    standalone: string;\n    options: TransformOptions;\n  }>;\n  onBlur?: (editor: editor) => void;\n  onFocus?: (editor: editor) => void;\n}\n```\n\n## Handler\n```ts\ntype HandlerType = {\n  format(): void;\n  compile(value?: string, options?: TransformOptions): Promise<string>;\n  transform(\n    options?: Partial<{ ignores: string[]; semantic: boolean }>\n  ): Promise<EmitOutput[\"outputFiles\"] | Diagnostic[]>;\n  getSemanticDiagnostics(): Promise<Diagnostic[]>;\n  anchorDiagnostic(diagnostic: Diagnostic): void;\n};\n```\n\n## LICENSE\n\nMIT\n","readmeFilename":"README.md"}