SystemSh0cker/monaco-editor
1
0
Fork 0
mirror of https://github.com/microsoft/monaco-editor.git synced 2025-12-22 22:02:55 +01:00
Code Issues Projects Releases Packages Activity

update /sample/browser-esm-vite-react

Browse source
This commit is contained in:
b4u7 2025-04-28 15:55:34 +02:00
parent c41951a02b
commit 76e1fd75b6
4 changed files with 1927 additions and 1619 deletions
Download patch file Download diff file Expand all files Collapse all files

3474
samples/browser-esm-vite-react/package-lock.json generated
View file

File diff suppressed because it is too large Load diff

12
samples/browser-esm-vite-react/package.json
View file

@ -9,12 +9,12 @@
"dependencies": {}, "dependencies": {},
"devDependencies": { "devDependencies": {
"monaco-editor": "^0.32.0", "monaco-editor": "^0.32.0",
"react": "^17.0.2", "react": "^19.1.0",
"react-dom": "^17.0.2", "react-dom": "^19.1.0",
"@types/react": "^17.0.39", "@types/react": "^19.1.2",
"@types/react-dom": "^17.0.11", "@types/react-dom": "^19.1.2",
"@vitejs/plugin-react": "^1.1.4", "@vitejs/plugin-react": "^4.4.1",
"typescript": "^5.4.5", "typescript": "^5.4.5",
"vite": "^2.9.17" "vite": "^6.3.3"
} }
} }

40
samples/browser-esm-vite-react/src/components/Editor.tsx
View file

@ -1,25 +1,25 @@
import { VFC, useRef, useState, useEffect } from 'react'; import * as monaco from 'monaco-editor/esm/vs/editor/editor.api'
import * as monaco from 'monaco-editor/esm/vs/editor/editor.api'; import { useEffect, useRef } from 'react'
import styles from './Editor.module.css';
export const Editor: VFC = () => { import styles from './Editor.module.css'
const [editor, setEditor] = useState<monaco.editor.IStandaloneCodeEditor | null>(null);
const monacoEl = useRef(null);
useEffect(() => { export function Editor() {
if (monacoEl) { const editorRef = useRef<monaco.editor.IStandaloneCodeEditor | null>(null)
setEditor((editor) => { const containerRef = useRef<HTMLDivElement>(null)
if (editor) return editor;
return monaco.editor.create(monacoEl.current!, { useEffect(() => {
value: ['function x() {', '\tconsole.log("Hello world!");', '}'].join('\n'), if (!containerRef.current) return
language: 'typescript'
});
});
}
return () => editor?.dispose(); editorRef.current = monaco.editor.create(
}, [monacoEl.current]); containerRef.current,
{
value: ['function x() {', '\tconsole.log("Hello world!");', '}'].join('\n'),
language: 'typescript',
},
)
return <div className={styles.Editor} ref={monacoEl}></div>; return editorRef.current.dispose.bind(editorRef.current)
}; }, [])
return <div ref={containerRef} className={styles.Editor} />
}

20
samples/browser-esm-vite-react/src/main.tsx
View file

@ -1,11 +1,11 @@
import React from 'react'; import { StrictMode } from 'react'
import ReactDOM from 'react-dom'; import { createRoot } from 'react-dom/client'
import { Editor } from './components/Editor'; import { Editor } from './components/Editor'
import './userWorker';
ReactDOM.render( import './userWorker'
<React.StrictMode>
<Editor /> createRoot(document.getElementById('root')!).render(
</React.StrictMode>, <StrictMode>
document.getElementById('root') <Editor />,
); </StrictMode>,
)