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

3476
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": {},
"devDependencies": {
"monaco-editor": "^0.32.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"@types/react": "^17.0.39",
"@types/react-dom": "^17.0.11",
"@vitejs/plugin-react": "^1.1.4",
"react": "^19.1.0",
"react-dom": "^19.1.0",
"@types/react": "^19.1.2",
"@types/react-dom": "^19.1.2",
"@vitejs/plugin-react": "^4.4.1",
"typescript": "^5.4.5",
"vite": "^2.9.17"
"vite": "^6.3.3"
}
}

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

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

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