WIP

TypeFox · Apr 13, 2023 · 01c3b08 · 01c3b08
1 parent 862b033
commit 01c3b08
Show file tree

Hide file tree

Showing 17 changed files with 226 additions and 287 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/examples/package.json b/packages/examples/package.json
@@ -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",

diff --git a/packages/examples/src/langium/langiumWrapperConfig.ts b/packages/examples/src/langium/langiumWrapperConfig.ts
@@ -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();
@@ -16,6 +16,7 @@ export const createLangiumGlobalConfig = async (): Promise<GlobalConfig> => {
     console.log(`Langium worker URL: ${workerUrl}`);
 
     return {
+        htmlElement: htmlElement,
         wrapperConfig: {
             useVscodeConfig: true,
             monacoVscodeApiConfig: {

diff --git a/packages/examples/src/langium/reactLangium.tsx b/packages/examples/src/langium/reactLangium.tsx
@@ -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',

diff --git a/packages/examples/src/langium/wrapperLangium.ts b/packages/examples/src/langium/wrapperLangium.ts
@@ -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);
 

diff --git a/packages/examples/src/reactTs.tsx b/packages/examples/src/reactTs.tsx
@@ -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: {
@@ -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')!);

diff --git a/packages/examples/src/wrapperAdvanced.ts b/packages/examples/src/wrapperAdvanced.ts
@@ -12,6 +12,7 @@ const startWrapper42 = () => {
         wrapperConfig: {
             useVscodeConfig: false
         },
+        htmlElement: document.getElementById('monaco-editor-root-42') as HTMLElement,
         languageClientConfig: {
             enabled: true,
             useWebSocket: true,
@@ -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
         },
@@ -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
         },
@@ -93,7 +96,7 @@ const startWrapper44 = () => {
         }
     });
 
-    wrapper44.startEditor(document.getElementById('monaco-editor-root-44') as HTMLElement)
+    wrapper44.startEditor()
         .catch((e: Error) => console.error(e));
 };
 
@@ -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);
 };
@@ -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);
 };

diff --git a/packages/examples/src/wrapperTs.ts b/packages/examples/src/wrapperTs.ts
@@ -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
     },
@@ -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',
@@ -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);
@@ -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);
@@ -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(() => {
@@ -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);