Skip to content
This repository has been archived by the owner on Mar 22, 2024. It is now read-only.

Commit

Permalink
WIP
Browse files Browse the repository at this point in the history
  • Loading branch information
kaisalmen committed Apr 13, 2023
1 parent 862b033 commit 01c3b08
Show file tree
Hide file tree
Showing 17 changed files with 226 additions and 287 deletions.
15 changes: 3 additions & 12 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 0 additions & 1 deletion packages/examples/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@
"http-server": "~14.1.1",
"langium": "~1.1.0",
"langium-statemachine-dsl": "~1.1.0",
"monaco-editor": "0.36.1",
"monaco-editor-wrapper": "2.0.0-next.1",
"@typefox/monaco-editor-react": "1.0.0-next.8",
"monaco-editor-workers": "0.36.0",
Expand Down
5 changes: 3 additions & 2 deletions packages/examples/src/langium/langiumWrapperConfig.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { GlobalConfig } from 'monaco-editor-wrapper';
import { UserConfig } from 'monaco-editor-wrapper';

export const createLangiumGlobalConfig = async (): Promise<GlobalConfig> => {
export const createLangiumGlobalConfig = async (htmlElement: HTMLElement): Promise<UserConfig> => {
const exampleStatemachineUrl = new URL('./src/langium/example.statemachine', window.location.href).href;
const responseStatemachine = await fetch(exampleStatemachineUrl);
const code = await responseStatemachine.text();
Expand All @@ -16,6 +16,7 @@ export const createLangiumGlobalConfig = async (): Promise<GlobalConfig> => {
console.log(`Langium worker URL: ${workerUrl}`);

return {
htmlElement: htmlElement,
wrapperConfig: {
useVscodeConfig: true,
monacoVscodeApiConfig: {
Expand Down
4 changes: 2 additions & 2 deletions packages/examples/src/langium/reactLangium.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,9 @@ import { MonacoEditorReactComp } from '@typefox/monaco-editor-react';
import { createLangiumGlobalConfig } from './langiumWrapperConfig.js';

const startEditor = async () => {
const langiumGlobalConfig = await createLangiumGlobalConfig();
const langiumGlobalConfig = await createLangiumGlobalConfig(document.getElementById('root')!);
const comp = <MonacoEditorReactComp
globalConfig={langiumGlobalConfig}
userConfig={langiumGlobalConfig}
style={{
'paddingTop': '5px',
'height': '80vh',
Expand Down
8 changes: 4 additions & 4 deletions packages/examples/src/langium/wrapperLangium.ts
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,10 @@ const startEditor = async () => {
alert('Editor was already started!');
return;
}
const langiumGlobalConfig = await createLangiumGlobalConfig();
wrapper.init(langiumGlobalConfig);

wrapper.startEditor(document.getElementById('monaco-editor-root') as HTMLElement)
const langiumGlobalConfig = await createLangiumGlobalConfig(document.getElementById('monaco-editor-root') as HTMLElement);
wrapper
.init(langiumGlobalConfig)
.startEditor()
.then((s: unknown) => {
console.log(s);

Expand Down
12 changes: 9 additions & 3 deletions packages/examples/src/reactTs.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,10 @@ buildWorkerDefinition('../../../../node_modules/monaco-editor-workers/dist/worke
import React from 'react';
import ReactDOM from 'react-dom/client';
import { MonacoEditorReactComp } from '@typefox/monaco-editor-react/allLanguages';
import { GlobalConfig } from 'monaco-editor-wrapper';
import { UserConfig } from 'monaco-editor-wrapper';

const globalConfig: GlobalConfig = {
const userConfig: UserConfig = {
htmlElement: document.getElementById('root')!,
wrapperConfig: {
useVscodeConfig: false,
monacoEditorConfig: {
Expand All @@ -26,13 +27,18 @@ const globalConfig: GlobalConfig = {
}
};

const onTextChanged = (text: string, isDirty: boolean) => {
console.log(`Dirty? ${isDirty} Content: ${text}`);
};

const comp = <MonacoEditorReactComp
globalConfig={globalConfig}
userConfig={userConfig}
style={{
'paddingTop': '5px',
'height': '80vh',
'width': '100%'
}}
onTextChanged={onTextChanged}
/>;

const root = ReactDOM.createRoot(document.getElementById('root')!);
Expand Down
51 changes: 28 additions & 23 deletions packages/examples/src/wrapperAdvanced.ts
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ const startWrapper42 = () => {
wrapperConfig: {
useVscodeConfig: false
},
htmlElement: document.getElementById('monaco-editor-root-42') as HTMLElement,
languageClientConfig: {
enabled: true,
useWebSocket: true,
Expand All @@ -27,24 +28,25 @@ const startWrapper42 = () => {
useDiffEditor: true,
theme: 'vs-light',
automaticLayout: true,
codeOriginal: `This line is equal.
This number is different 2002
Misspeelled!
Same again.`,
code: `This line is equal.
This number is different 2022
Misspelled!
Same again.`,
codeModified: `This line is equal.
This number is different 2002
Misspeelled!
Same again.`
}
});

wrapper42.startEditor(document.getElementById('monaco-editor-root-42') as HTMLElement)
wrapper42.startEditor()
.catch((e: Error) => console.error(e));
};

const startWrapper43 = () => {
wrapper43.init({
id: '43',
htmlElement: document.getElementById('monaco-editor-root-43') as HTMLElement,
wrapperConfig: {
useVscodeConfig: false
},
Expand All @@ -56,21 +58,22 @@ const startWrapper43 = () => {
useDiffEditor: true,
theme: 'vs-light',
automaticLayout: true,
code: 'This line is equal.\nThis number is different 3022.\nMisspelled!Same again.',
codeModified: 'This line is equal.\nThis number is different 3002.\nMisspelled!Same again.',
codeOriginal: 'This line is equal.\nThis number is different 3022.\nMisspelled!Same again.',
code: 'This line is equal.\nThis number is different 3002.\nMisspelled!Same again.',
diffEditorOptions: {
lineNumbers: 'off'
}
}
});

wrapper43.startEditor(document.getElementById('monaco-editor-root-43') as HTMLElement)
wrapper43.startEditor()
.catch((e: Error) => console.error(e));
};

const startWrapper44 = () => {
wrapper44.init({
id: '44',
htmlElement: document.getElementById('monaco-editor-root-44') as HTMLElement,
wrapperConfig: {
useVscodeConfig: false
},
Expand All @@ -93,7 +96,7 @@ const startWrapper44 = () => {
}
});

wrapper44.startEditor(document.getElementById('monaco-editor-root-44') as HTMLElement)
wrapper44.startEditor()
.catch((e: Error) => console.error(e));
};

Expand All @@ -105,31 +108,33 @@ const sleepOne = (milliseconds: number) => {
setTimeout(() => {
alert(`Updating editors after ${milliseconds}ms`);

const config42 = wrapper42.getRuntimeConfig();
// TODO: Update model can only work on same editor
const config42 = wrapper42.getUserConfig();
config42.editorConfig.languageId = 'javascript';
config42.editorConfig.useDiffEditor = false;
config42.editorConfig.code = `function logMe() {
console.log('Hello swap editors!');
};`;
wrapper42.startEditor(document.getElementById('monaco-editor-root-42') as HTMLElement)
wrapper42.startEditor()
.catch((e: Error) => console.error(e));

const config43 = wrapper43.getRuntimeConfig();
config43.editorConfig.languageId = 'javascript';
config43.editorConfig.code = 'text 1234';
config43.editorConfig.codeModified = 'text 5678';
wrapper43.startEditor(document.getElementById('monaco-editor-root-43') as HTMLElement)
.catch((e: Error) => console.error(e));
wrapper43.updateModel({
useDiffEditor: true,
languageId: 'javascript',
code: 'text 5678',
codeOriginal: 'text 1234'
});

const config44 = wrapper44.getRuntimeConfig();
const config44 = wrapper44.getUserConfig();
config44.editorConfig.languageId = 'text/plain';
config44.editorConfig.useDiffEditor = true;
config44.editorConfig.code = 'oh la la la!';
config44.editorConfig.codeModified = 'oh lo lo lo!';
config44.editorConfig.codeOriginal = 'oh la la la!';
config44.editorConfig.code = 'oh lo lo lo!';
// This affects all editors globally and is only effective
// if it is not in contrast to one configured later
config44.editorConfig.theme = 'vs-light';
wrapper44.startEditor(document.getElementById('monaco-editor-root-44') as HTMLElement)
wrapper44.startEditor()
.catch((e: Error) => console.error(e));
}, milliseconds);
};
Expand All @@ -140,10 +145,10 @@ const sleepTwo = (milliseconds: number) => {
setTimeout(() => {
alert(`Updating last editor after ${milliseconds}ms`);

const config44 = wrapper44.getRuntimeConfig();
const config44 = wrapper44.getUserConfig();
config44.editorConfig.useDiffEditor = false;
config44.editorConfig.theme = 'vs-dark';
wrapper44.startEditor(document.getElementById('monaco-editor-root-44') as HTMLElement)
wrapper44.startEditor()
.catch((e: Error) => console.error(e));
}, milliseconds);
};
Expand Down
29 changes: 16 additions & 13 deletions packages/examples/src/wrapperTs.ts
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@ const monacoEditorConfig: editor.IStandaloneEditorConstructionOptions = {

const wrapper = new MonacoEditorLanguageClientWrapper();
wrapper.init({
htmlElement: document.getElementById('monaco-editor-root') as HTMLElement,
wrapperConfig: {
useVscodeConfig: false
},
Expand All @@ -47,9 +48,9 @@ wrapper.init({
},
editorConfig: {
languageId: languageId,
code: codeMain,
code: codeOrg,
useDiffEditor: false,
codeModified: codeOrg,
codeOriginal: codeMain,
editorOptions: monacoEditorConfig,
diffEditorOptions: monacoEditorConfig,
theme: 'vs-dark',
Expand All @@ -65,7 +66,7 @@ function startEditor() {
configureCodeEditors();

toggleSwapDiffButton(true);
wrapper.startEditor(document.getElementById('monaco-editor-root') as HTMLElement)
wrapper.startEditor()
.then((s: unknown) => {
console.log(s);
logEditorInfo(wrapper);
Expand All @@ -78,31 +79,31 @@ function startEditor() {
}

function configureCodeEditors() {
const runtimeConfig = wrapper.getRuntimeConfig();
const runtimeConfig = wrapper.getUserConfig();
if (runtimeConfig.editorConfig.useDiffEditor) {
runtimeConfig.editorConfig.code = codeOrg;
runtimeConfig.editorConfig.codeModified = codeMain;
runtimeConfig.editorConfig.code = codeMain;
runtimeConfig.editorConfig.codeOriginal = codeOrg;
} else {
runtimeConfig.editorConfig.code = codeMain;
}
}

function saveMainCode(saveFromDiff: boolean, saveFromMain: boolean) {
if (saveFromDiff) {
codeMain = wrapper.getDiffCode()!;
codeMain = wrapper.getModel(true)!.getValue();
}
if (saveFromMain) {
codeMain = wrapper.getMainCode()!;
codeMain = wrapper.getModel()!.getValue();
}
}

function swapEditors() {
const runtimeConfig = wrapper.getRuntimeConfig();
const runtimeConfig = wrapper.getUserConfig();
runtimeConfig.editorConfig.useDiffEditor = !runtimeConfig.editorConfig.useDiffEditor;
saveMainCode(!runtimeConfig.editorConfig.useDiffEditor, false);
configureCodeEditors();

wrapper.startEditor(document.getElementById('monaco-editor-root') as HTMLElement)
wrapper.startEditor()
.then((s: string) => {
console.log(s);
logEditorInfo(wrapper);
Expand All @@ -113,7 +114,7 @@ function swapEditors() {
async function disposeEditor() {
wrapper.reportStatus();
toggleSwapDiffButton(false);
const useDiffEditor = wrapper.getRuntimeConfig().editorConfig.useDiffEditor;
const useDiffEditor = wrapper.getUserConfig().editorConfig.useDiffEditor;
saveMainCode(useDiffEditor, !useDiffEditor);
await wrapper.dispose()
.then(() => {
Expand All @@ -131,8 +132,10 @@ function toggleSwapDiffButton(enabled: boolean) {

function logEditorInfo(client: MonacoEditorLanguageClientWrapper) {
console.log(`# of configured languages: ${languages.getLanguages().length}`);
console.log(`Main code: ${client.getMainCode()}`);
console.log(`Modified code: ${client.getDiffCode()}`);
console.log(`Main code: ${client.getModel(true)!.getValue()}`);
if (wrapper.getUserConfig().editorConfig.useDiffEditor) {
console.log(`Modified code: ${client.getModel()!.getValue()}`);
}
}

document.querySelector('#button-start')?.addEventListener('click', startEditor);
Expand Down
Loading

0 comments on commit 01c3b08

Please sign in to comment.