packages/examples/verify_alt.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Verify: Monaco Editor Wrapper: Diff</title>
    <!--
    <link rel="stylesheet" href="./libs/monaco-editor-wrapper/assets/style.css">
    -->
</head>

<body>
    <div id="monaco-editor-root" style="height: 80vh;"></div>
    <script type="module">
        import getKeybindingsServiceOverride from '@codingame/monaco-vscode-keybindings-service-override';
        import 'monaco-editor/esm/vs/basic-languages/javascript/javascript.contribution.js';
        import 'monaco-editor/esm/vs/basic-languages/typescript/typescript.contribution.js';
        import 'monaco-editor/esm/vs/language/typescript/monaco.contribution.js';
        import { MonacoEditorLanguageClientWrapper } from 'monaco-editor-wrapper';
        import { addMonacoStyles } from 'monaco-editor-wrapper/styles';

        import { buildWorkerDefinition } from 'monaco-editor-workers';
        buildWorkerDefinition('../../../node_modules/monaco-editor-workers/dist/workers', import.meta.url, false);

        // alternatively use the stylesheet link from the head
        addMonacoStyles('monaco-styles-helper');

        const wrapper = new MonacoEditorLanguageClientWrapper();
        const startWrapper = async () => {
            const wrapperConfig = {
                wrapperConfig: {
                    useVscodeConfig: false,
                    serviceConfig: {
                        userServices: {
                            ...getKeybindingsServiceOverride(),
                        },
                        debugLogging: true
                    },
                    editorAppConfig: {
                        $type: 'classic',
                        languageId: 'javascript',
                        useDiffEditor: true,
                        theme: 'vs-dark',
                        codeOriginal: `function logOriginal() {
    console.log('Hello original editor!');
};`,
                        code: `function logModified() {
    console.log('Hello modified editor!');
};`
                    }
                }
            };
            await wrapper.initAndStart(wrapperConfig, document.getElementById('monaco-editor-root'));
            console.log('wrapper was started.');
        };

        startWrapper();
    </script>
</body>

</html>