search

Teradata / covalent

Teradata UI Platform built on Angular Material
https://teradata.github.io/covalent/
MIT License
2.23k stars 358 forks source link

Editor is not shown in Electron #1620

Closed Stevertus closed 2 years ago

Stevertus commented 6 years ago

I had the same error as here: https://github.com/Teradata/covalent-code-editor/issues/22 I followed the instructions and the error is gone, however the editor is still not displayed.

<td-code-editor _ngcontent-c1="" automaticlayout="" id="editWindow" _nghost-c4="" ng-reflect-language="mcscript" ng-reflect-theme="mcfunction" ng-reflect-automatic-layout="" class="ng-untouched ng-valid ng-dirty" style="display: block;" ng-reflect-model="">
<div _ngcontent-c4="" class="editorContainer">
<webview nodeintegration="true" disablewebsecurity="true" src="data:text/html;base64,PCFET0NUWVBFIGh0bWw+CiAgICAgICAgICAgIDxodG1sIHN0eWxlPSJoZWlnaHQ6MTAwJSI+CiAgICAgICAgICAgIDxoZWFkPgogICAgICAgICAgICAgICAgPG1ldGEgaHR0cC1lcXVpdj0iWC1VQS1Db21wYXRpYmxlIiBjb250ZW50PSJJRT1lZGdlIiAvPgogICAgICAgICAgICAgICAgPG1ldGEgaHR0cC1lcXVpdj0iQ29udGVudC1UeXBlIiBjb250ZW50PSJ0ZXh0L2h0bWw7Y2hhcnNldD11dGYtOCIgPgogICAgICAgICAgICAgICAgPGxpbmsgcmVsPSJzdHlsZXNoZWV0IiBkYXRhLW5hbWU9InZzL2VkaXRvci9lZGl0b3IubWFpbiIKICAgICAgICAgICAgICAgICAgICBocmVmPSJmaWxlOi8vL2Fzc2V0cy9tb25hY28vdnMvZWRpdG9yL2VkaXRvci5tYWluLmNzcyI+CiAgICAgICAgICAgIDwvaGVhZD4KICAgICAgICAgICAgPGJvZHkgc3R5bGU9ImhlaWdodDoxMDAlO3dpZHRoOiAxMDAlO21hcmdpbjogMDtwYWRkaW5nOiAwO292ZXJmbG93OiBoaWRkZW47Ij4KICAgICAgICAgICAgPGRpdiBpZD0iZWRpdG9ySW5uZXJDb250YWluZXIwIiBzdHlsZT0id2lkdGg6MTAwJTtoZWlnaHQ6MTAwJTt3aWR0aDoxMDAlO2hlaWdodDoxMDAlO2JvcmRlcjoxcHggc29saWQgZ3JleTsiPjwvZGl2PgogICAgICAgICAgICA8c2NyaXB0PgogICAgICAgICAgICAgICAgLy8gR2V0IHRoZSBpcGNSZW5kZXJlciBvZiBlbGVjdHJvbiBmb3IgY29tbXVuaWNhdGlvbgogICAgICAgICAgICAgICAgY29uc3Qge2lwY1JlbmRlcmVyfSA9IHJlcXVpcmUoJ2VsZWN0cm9uJyk7CiAgICAgICAgICAgIDwvc2NyaXB0PgogICAgICAgICAgICA8c2NyaXB0IHNyYz0iZmlsZTovLy9hc3NldHMvbW9uYWNvL3ZzL2xvYWRlci5qcyI+PC9zY3JpcHQ+CiAgICAgICAgICAgIDxzY3JpcHQ+CiAgICAgICAgICAgICAgICB2YXIgZWRpdG9yOwogICAgICAgICAgICAgICAgdmFyIHRoZW1lID0gJ21jZnVuY3Rpb24nOwogICAgICAgICAgICAgICAgdmFyIHZhbHVlID0gJyc7CiAgICAgICAgICAgICAgICByZXF1aXJlLmNvbmZpZyh7CiAgICAgICAgICAgICAgICAgICAgYmFzZVVybDogJ0M6L3dlYmRldi9hbmd1bGFyIDQvbWNzRWRpdG9yL2Fzc2V0cy9tb25hY28nCiAgICAgICAgICAgICAgICB9KTsKICAgICAgICAgICAgICAgIHNlbGYubW9kdWxlID0gdW5kZWZpbmVkOwogICAgICAgICAgICAgICAgc2VsZi5wcm9jZXNzLmJyb3dzZXIgPSB0cnVlOwogICAgICAgICAgICAgICAgcmVxdWlyZShbJ3ZzL2VkaXRvci9lZGl0b3IubWFpbiddLCBmdW5jdGlvbigpIHsKICAgICAgICAgICAgICAgICAgICBlZGl0b3IgPSBtb25hY28uZWRpdG9yLmNyZWF0ZShkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnZWRpdG9ySW5uZXJDb250YWluZXIwJyksIE9iamVjdC5hc3NpZ24oewogICAgICAgICAgICAgICAgICAgICAgICB2YWx1ZTogdmFsdWUsCiAgICAgICAgICAgICAgICAgICAgICAgIGxhbmd1YWdlOiAnbWNzY3JpcHQnLAogICAgICAgICAgICAgICAgICAgICAgICB0aGVtZTogJ21jZnVuY3Rpb24nLAogICAgICAgICAgICAgICAgICAgIH0sIHt9KSk7CiAgICAgICAgICAgICAgICAgICAgZWRpdG9yLmdldE1vZGVsKCkub25EaWRDaGFuZ2VDb250ZW50KCAoZSk9PiB7CiAgICAgICAgICAgICAgICAgICAgICAgIGlwY1JlbmRlcmVyLnNlbmRUb0hvc3QoIm9uRWRpdG9yQ29udGVudENoYW5nZSIsIGVkaXRvci5nZXRWYWx1ZSgpKTsKICAgICAgICAgICAgICAgICAgICB9KTsKICAgICAgICAgICAgICAgICAgICBpcGNSZW5kZXJlci5zZW5kVG9Ib3N0KCJvbkVkaXRvckluaXRpYWxpemVkIiwgJycpOwogICAgICAgICAgICAgICAgfSk7CiAgICAgICAgICAgICAgICAvLyByZXR1cm4gYmFjayB0aGUgdmFsdWUgaW4gdGhlIGVkaXRvciB0byB0aGUgbWFpbnZpZXcKICAgICAgICAgICAgICAgIGlwY1JlbmRlcmVyLm9uKCdnZXRFZGl0b3JDb250ZW50JywgZnVuY3Rpb24oKXsKICAgICAgICAgICAgICAgICAgICBpcGNSZW5kZXJlci5zZW5kVG9Ib3N0KCJlZGl0b3JDb250ZW50IiwgZWRpdG9yLmdldFZhbHVlKCkpOwogICAgICAgICAgICAgICAgfSk7CiAgICAgICAgICAgICAgICAvLyBzZXQgdGhlIHZhbHVlIG9mIHRoZSBlZGl0b3IgZnJvbSB3aGF0IHdhcyBzZW50IGZyb20gdGhlIG1haW52aWV3CiAgICAgICAgICAgICAgICBpcGNSZW5kZXJlci5vbignc2V0RWRpdG9yQ29udGVudCcsIGZ1bmN0aW9uKGV2ZW50LCBkYXRhKXsKICAgICAgICAgICAgICAgICAgICB2YWx1ZSA9IGRhdGE7CiAgICAgICAgICAgICAgICAgICAgZWRpdG9yLnNldFZhbHVlKGRhdGEpOwogICAgICAgICAgICAgICAgfSk7CiAgICAgICAgICAgICAgICAvLyBzZXQgdGhlIHN0eWxlIG9mIHRoZSBlZGl0b3IgY29udGFpbmVyIGRpdgogICAgICAgICAgICAgICAgaXBjUmVuZGVyZXIub24oJ3NldEVkaXRvclN0eWxlJywgZnVuY3Rpb24oZXZlbnQsIGRhdGEpewogICAgICAgICAgICAgICAgICAgIHZhciBlZGl0b3JEaXYgPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnZWRpdG9ySW5uZXJDb250YWluZXIwJyk7CiAgICAgICAgICAgICAgICAgICAgZWRpdG9yRGl2LnN0eWxlID0gZGF0YS5zdHlsZTsKICAgICAgICAgICAgICAgICAgICB2YXIgY3VycmVudFZhbHVlID0gZWRpdG9yLmdldFZhbHVlKCk7CiAgICAgICAgICAgICAgICAgICAgZWRpdG9yLmRpc3Bvc2UoKTsKICAgICAgICAgICAgICAgICAgICBlZGl0b3IgPSBtb25hY28uZWRpdG9yLmNyZWF0ZShkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnZWRpdG9ySW5uZXJDb250YWluZXIwJyksIE9iamVjdC5hc3NpZ24oewogICAgICAgICAgICAgICAgICAgICAgICB2YWx1ZTogY3VycmVudFZhbHVlLAogICAgICAgICAgICAgICAgICAgICAgICBsYW5ndWFnZTogZGF0YS5sYW5ndWFnZSwKICAgICAgICAgICAgICAgICAgICAgICAgdGhlbWU6IGRhdGEudGhlbWUsCiAgICAgICAgICAgICAgICAgICAgfSwge30pKTsKICAgICAgICAgICAgICAgIH0pOwogICAgICAgICAgICAgICAgLy8gc2V0IHRoZSBvcHRpb25zIG9mIHRoZSBlZGl0b3IgZnJvbSB3aGF0IHdhcyBzZW50IGZyb20gdGhlIG1haW52aWV3CiAgICAgICAgICAgICAgICBpcGNSZW5kZXJlci5vbignc2V0RWRpdG9yT3B0aW9ucycsIGZ1bmN0aW9uKGV2ZW50LCBkYXRhKXsKICAgICAgICAgICAgICAgICAgICBlZGl0b3IudXBkYXRlT3B0aW9ucyhkYXRhKTsKICAgICAgICAgICAgICAgICAgICBpcGNSZW5kZXJlci5zZW5kVG9Ib3N0KCJvbkVkaXRvckNvbmZpZ3VyYXRpb25DaGFuZ2VkIiwgJycpOwogICAgICAgICAgICAgICAgfSk7CiAgICAgICAgICAgICAgICAvLyBzZXQgdGhlIGxhbmd1YWdlIG9mIHRoZSBlZGl0b3IgZnJvbSB3aGF0IHdhcyBzZW50IGZyb20gdGhlIG1haW52aWV3CiAgICAgICAgICAgICAgICBpcGNSZW5kZXJlci5vbignc2V0TGFuZ3VhZ2UnLCBmdW5jdGlvbihldmVudCwgZGF0YSl7CiAgICAgICAgICAgICAgICAgICAgdmFyIGN1cnJlbnRWYWx1ZSA9IGVkaXRvci5nZXRWYWx1ZSgpOwogICAgICAgICAgICAgICAgICAgIGVkaXRvci5kaXNwb3NlKCk7CiAgICAgICAgICAgICAgICAgICAgZWRpdG9yID0gbW9uYWNvLmVkaXRvci5jcmVhdGUoZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ2VkaXRvcklubmVyQ29udGFpbmVyMCcpLCBPYmplY3QuYXNzaWduKHsKICAgICAgICAgICAgICAgICAgICAgICAgdmFsdWU6IGN1cnJlbnRWYWx1ZSwKICAgICAgICAgICAgICAgICAgICAgICAgbGFuZ3VhZ2U6IGRhdGEsCiAgICAgICAgICAgICAgICAgICAgICAgIHRoZW1lOiB0aGVtZSwKICAgICAgICAgICAgICAgICAgICB9LCB7fSkpOwogICAgICAgICAgICAgICAgICAgIGlwY1JlbmRlcmVyLnNlbmRUb0hvc3QoIm9uRWRpdG9yQ29uZmlndXJhdGlvbkNoYW5nZWQiLCAnJyk7CiAgICAgICAgICAgICAgICAgICAgaXBjUmVuZGVyZXIuc2VuZFRvSG9zdCgib25FZGl0b3JMYW5ndWFnZUNoYW5nZWQiLCAnJyk7CiAgICAgICAgICAgICAgICB9KTsKICAgICAgICAgICAgICAgIC8vIHJlZ2lzdGVyIGEgbmV3IGxhbmd1YWdlIHdpdGggZWRpdG9yCiAgICAgICAgICAgICAgICBpcGNSZW5kZXJlci5vbigncmVnaXN0ZXJMYW5ndWFnZScsIGZ1bmN0aW9uKGV2ZW50LCBkYXRhKXsKICAgICAgICAgICAgICAgICAgICB2YXIgY3VycmVudFZhbHVlID0gZWRpdG9yLmdldFZhbHVlKCk7CiAgICAgICAgICAgICAgICAgICAgZWRpdG9yLmRpc3Bvc2UoKTsKICAgICAgICAgICAgICAgICAgICBmb3IgKHZhciBpID0gMDsgaSA8IGRhdGEuY29tcGxldGlvbkl0ZW1Qcm92aWRlci5sZW5ndGg7IGkrKykgewogICAgICAgICAgICAgICAgICAgICAgICB2YXIgcHJvdmlkZXIgPSBkYXRhLmNvbXBsZXRpb25JdGVtUHJvdmlkZXJbaV07CiAgICAgICAgICAgICAgICAgICAgICAgIHByb3ZpZGVyLmtpbmQgPSBldmFsKHByb3ZpZGVyLmtpbmQpOwogICAgICAgICAgICAgICAgICAgIH0KICAgICAgICAgICAgICAgICAgICBmb3IgKHZhciBpID0gMDsgaSA8IGRhdGEubW9uYXJjaFRva2Vuc1Byb3ZpZGVyLmxlbmd0aDsgaSsrKSB7CiAgICAgICAgICAgICAgICAgICAgICAgIHZhciBtb25hcmNoVG9rZW5zID0gZGF0YS5tb25hcmNoVG9rZW5zUHJvdmlkZXJbaV07CiAgICAgICAgICAgICAgICAgICAgICAgIG1vbmFyY2hUb2tlbnNbMF0gPSBldmFsKG1vbmFyY2hUb2tlbnNbMF0pOwogICAgICAgICAgICAgICAgICAgIH0KICAgICAgICAgICAgICAgICAgICBtb25hY28ubGFuZ3VhZ2VzLnJlZ2lzdGVyKHsgaWQ6IGRhdGEuaWQgfSk7CiAgICAgICAgICAgICAgICAgICAgbW9uYWNvLmxhbmd1YWdlcy5zZXRNb25hcmNoVG9rZW5zUHJvdmlkZXIoZGF0YS5pZCwgewogICAgICAgICAgICAgICAgICAgICAgICB0b2tlbml6ZXI6IHsKICAgICAgICAgICAgICAgICAgICAgICAgICAgIHJvb3Q6IGRhdGEubW9uYXJjaFRva2Vuc1Byb3ZpZGVyCiAgICAgICAgICAgICAgICAgICAgICAgIH0KICAgICAgICAgICAgICAgICAgICB9KTsKICAgICAgICAgICAgICAgICAgICAvLyBEZWZpbmUgYSBuZXcgdGhlbWUgdGhhdCBjb25zdGFpbnMgb25seSBydWxlcyB0aGF0IG1hdGNoIHRoaXMgbGFuZ3VhZ2UKICAgICAgICAgICAgICAgICAgICBtb25hY28uZWRpdG9yLmRlZmluZVRoZW1lKGRhdGEuY3VzdG9tVGhlbWUuaWQsIGRhdGEuY3VzdG9tVGhlbWUudGhlbWUpOwogICAgICAgICAgICAgICAgICAgIHRoZW1lID0gZGF0YS5jdXN0b21UaGVtZS5pZDsKICAgICAgICAgICAgICAgICAgICBtb25hY28ubGFuZ3VhZ2VzLnJlZ2lzdGVyQ29tcGxldGlvbkl0ZW1Qcm92aWRlcihkYXRhLmlkLCB7CiAgICAgICAgICAgICAgICAgICAgICAgIHByb3ZpZGVDb21wbGV0aW9uSXRlbXM6ICgpID0+IHsKICAgICAgICAgICAgICAgICAgICAgICAgICAgIHJldHVybiBkYXRhLmNvbXBsZXRpb25JdGVtUHJvdmlkZXIKICAgICAgICAgICAgICAgICAgICAgICAgfQogICAgICAgICAgICAgICAgICAgIH0pOwogICAgICAgICAgICAgICAgICAgIHZhciBjc3MgPSBkb2N1bWVudC5jcmVhdGVFbGVtZW50KCJzdHlsZSIpOwogICAgICAgICAgICAgICAgICAgIGNzcy50eXBlID0gInRleHQvY3NzIjsKICAgICAgICAgICAgICAgICAgICBjc3MuaW5uZXJIVE1MID0gZGF0YS5tb25hcmNoVG9rZW5zUHJvdmlkZXJDU1M7CiAgICAgICAgICAgICAgICAgICAgZG9jdW1lbnQuYm9keS5hcHBlbmRDaGlsZChjc3MpOwogICAgICAgICAgICAgICAgICAgIGlwY1JlbmRlcmVyLnNlbmRUb0hvc3QoIm9uRWRpdG9yQ29uZmlndXJhdGlvbkNoYW5nZWQiLCAnJyk7CiAgICAgICAgICAgICAgICB9KTsKICAgICAgICAgICAgICAgIC8vIEluc3RydWN0IHRoZSBlZGl0b3IgdG8gcmVtZWFzdXJlIGl0cyBjb250YWluZXIKICAgICAgICAgICAgICAgIGlwY1JlbmRlcmVyLm9uKCdsYXlvdXQnLCBmdW5jdGlvbigpewogICAgICAgICAgICAgICAgICAgIGVkaXRvci5sYXlvdXQoKTsKICAgICAgICAgICAgICAgIH0pOwogICAgICAgICAgICAgICAgLy8gbmVlZCB0byBtYW51YWxseSByZXNpemUgdGhlIGVkaXRvciBhbnkgdGltZSB0aGUgd2luZG93IHNpemUKICAgICAgICAgICAgICAgIC8vIGNoYW5nZXMuIFNlZTogaHR0cHM6Ly9naXRodWIuY29tL01pY3Jvc29mdC9tb25hY28tZWRpdG9yL2lzc3Vlcy8yOAogICAgICAgICAgICAgICAgd2luZG93LmFkZEV2ZW50TGlzdGVuZXIoInJlc2l6ZSIsIGZ1bmN0aW9uIHJlc2l6ZUVkaXRvcigpIHsKICAgICAgICAgICAgICAgICAgICBlZGl0b3IubGF5b3V0KCk7CiAgICAgICAgICAgICAgICB9KTsKICAgICAgICAgICAgPC9zY3JpcHQ+CiAgICAgICAgICAgIDwvYm9keT4KICAgICAgICAgICAgPC9odG1sPg==" style="display:inline-flex; width:100%; height:100%" tabindex="-1" guestinstance="4">
</webview>
</div>
</td-code-editor>

But the webview with the base64 string is loaded. In the browser it works perfectly.

I don´t know what I am doing wrong here(I also specify a custom language on the component)

in my source html:

<td-code-editor (keydown)="test($event)" [style.display]="(selectedTab || selectedTab.content != '\t\r') ? 'block' : 'none' " [theme]="editorOptions.theme" automaticLayout [language]="editorOptions.language" [(ngModel)]="selectedTab.content" id="editWindow" #editWindow></td-code-editor>
nagug commented 6 years ago

With 2 beta. This seems to be the same issue :( no errors just not rendering

jeremysmartt commented 6 years ago

I see you are using [(ngModel)] For that to work make sure in your app.module.ts you import the FormsModule:

import { FormsModule } from '@angular/forms';
...
@NgModule({
...
  imports: [
    FormsModule,
...

I tried with this and your snippit of:

<td-code-editor (keydown)="test($event)" [style.display]="(selectedTab || selectedTab.content != '\t\r') ? 'block' : 'none' " [theme]="editorOptions.theme" automaticLayout [language]="editorOptions.language" [(ngModel)]="selectedTab.content" id="editWindow" #editWindow></td-code-editor>

And it worked fine in both the browser and using Covalent-Electron. If by doing this it still doesn't work then can you post a stackblitz of your full code example?

mohitsharma23 commented 6 years ago

Is this issue solved, I'm not getting any error but the editor is still not loading. Using Angular v6 with Electron and trying to implement this editor.

szuni commented 6 years ago

Issue is still present, can't get the editor work based on this boilerpalte: https://github.com/maximegris/angular-electron When I run the app as angular only the editor shows, but it doesn't show in electron.

Stevertus commented 6 years ago

Yes I upgraded to angular 6 and the newest Beta of covalent-code-editor, but the issue is still there. Didn't find a solution yet

nagug commented 6 years ago

Issue is still present, can't get the editor work based on this boilerpalte: https://github.com/maximegris/angular-electron When I run the app as angular only the editor shows, but it doesn't show in electron.

Same issue. I tried with same electron code.

jeremysmartt commented 6 years ago

@szuni @Stevertus @nagug mohitsharma23 Are you also seeing the error when trying with Covalent Electron: https://github.com/Teradata/covalent-electron

Perhaps there is a difference between how Angular-Electron and Covalent-Electron load?

szuni commented 6 years ago

@szuni @Stevertus @nagug mohitsharma23 Are you also seeing the error when trying with Covalent Electron: https://github.com/Teradata/covalent-electron

Perhaps there is a difference between how Angular-Electron and Covalent-Electron load?

Build process is definitely different, because Angular-Electron is built with webpack not gulp. To tell the truth our big application builds much faster with webpack than Covalent-Electron. Could you please help to get code editor work with Angular-Electron?

szuni commented 6 years ago

I could make it work with a dirty solution. First I realized I forgot to copy the file protocol interceptior into electron main.js.

    protocol.interceptFileProtocol('file', function(req, callback) {
      var url = req.url.substr(7);
      const filePath = path.normalize(__dirname + '/../../dist' + url);
      callback( filePath );
    },function (error) {
      if (error) {
        console.error('Failed to register protocol');
      }
    });

Problem is with this solution that there is no dist folder (and any of the assets) generated for development build, application runs somehow from node_modules only. But if I build is frist and then run in dev mode I can use the built assets.

Next problem is with TdCodeEditorComponent. Is uses this._appPath = electron.remote.app.getAppPath().split('\\').join('/');

In my app electron.remote.app.getAppPath() = "P:\ProdDev.Cne-Edit\config-tool\node_modules\electron\dist\resources\default_app.asar" This is for the electron core, not the renderer. I tried to changed it to __dirname with devtool, but somehow that path got confused. With a fixed path it showed up in my electron app.

Any ideas?

nagug commented 6 years ago

@szuni i am also trying to use the same boiler plate as you. for the test home.component.html looks like this

<div class="container">
  <h1 class="title">
    <td-code-editor style="height: 200px" theme="vs-light" flex language="javascript"></td-code-editor>
  </h1>
</div>

what i see as error is in the line

this._appPath = electron.remote.app.getAppPath().split('\').join('/');

is "electron is not defined"!!!

Any advice on how you passed that?

nagug commented 6 years ago

passed that stage by adding electron loader to scripts in angular.json.

Now no errors and no editor :)

szuni commented 6 years ago

select <webview> tag in elements tab and enter $0.openDevtools() in console. Now you will see a new devtool window and the errors of embedded code editor.

nagug commented 6 years ago

That was super helpful. Now both my loader.js and editor.main.css are not found. place it has been looking for the both are 

file:///assets/monaco/vs/loader.js
file:///assets/monaco/vs/editor/editor.main.css

Now let me see, hot get that loaded..

nagug commented 6 years ago

These is getting round and round. looks like the dirpath logic inside webview is getting messed up, when using electron-angular. bit crazy :(

szuni commented 6 years ago

I discovered a path override logic used for unit tests. I used it in extended component and got it work:

export class MonacoEditorComponent extends TdCodeEditorComponent {

    constructor(zone: NgZone) {
        super(zone);
        let appPath = electron.remote.app.getAppPath();

        if (appPath.endsWith('default_app.asar')) {
            appPath = appPath.substring(0, appPath.indexOf('node_modules') - 1);
        }
        super.setEditorNodeModuleDirOverride(appPath.split('\\').join('/') + '/dist');
    }
}
nagug commented 6 years ago

@szuni good to hear progress made. I am still in the same stage.

following are my changes in the code compared to base boiler plate

in angular.json

"assets": [
              "src/assets",
              "src/favicon.ico",
              "src/favicon.png",
              "src/favicon.icns",
              "src/favicon.256x256.png",
              "src/favicon.512x512.png",
              "src/electron-load.js",
              {
                "glob": "**/*",
                "input": "node_modules/@covalent/code-editor/assets/monaco",
                "output": "/assets/monaco"
              }

in main.js createwindow function looks like

function createWindow() {
    var electronScreen = electron_1.screen;
    var size = electronScreen.getPrimaryDisplay().workAreaSize;
    protocol.interceptFileProtocol('file', function(req, callback) {
      var url = req.url.substr(7);
      const filePath = path.normalize(__dirname + '/../../dist' + url);
      callback( filePath );
    },function (error) {
      if (error) {
        console.error('Failed to register protocol');
      }
    });
    //Create the browser window.
    win = new electron_1.BrowserWindow({
        x: 0,
        y: 0,
        width: size.width,
        height: size.height,
        webPreferences: {
            webSecurity: false
        }
    });

index.html looks like

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>AngularElectron</title>
  <base href="">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <script src="electron-load.js"></script>
</head>
<body>
  <app-root>Loading...</app-root>
</body>
</html>

home component looks like

import { Component, NgZone } from '@angular/core';
import { TdCodeEditorComponent } from '@covalent/code-editor'
var electron = require('electron');

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
//export class HomeComponent implements OnInit {
export class HomeComponent extends TdCodeEditorComponent {
  constructor(zone: NgZone) {
    super(zone);
    let appPath = electron.remote.app.getAppPath();

    if (appPath.endsWith('default_app.asar')) {
        appPath = appPath.substring(0, appPath.indexOf('node_modules') - 1);
    }
    super.setEditorNodeModuleDirOverride(appPath.split('\\').join('/') + '/dist');
  }
}

home.compoenent.html looks like

<div class="container">
  <h1 class="title">
    {{ 'PAGES.HOME.TITLE' | translate }}
  </h1>
  <td-code-editor style="height: 300px" theme="vs-light" flex language="javascript"></td-code-editor>

</div>

currently the errors I get

in main console

zone-mix.js:3292 ERROR TypeError: Cannot read property 'nativeElement' of undefined
    at HomeComponent.push../node_modules/@covalent/code-editor/esm5/covalent-code-editor.js.TdCodeEditorComponent.ngOnInit (covalent-code-editor.js:464)
    at checkAndUpdateDirectiveInline (core.js:9243)
    at checkAndUpdateNodeInline (core.js:10507)
    at checkAndUpdateNode (core.js:10469)
    at debugCheckAndUpdateNode (core.js:11102)
    at debugCheckDirectivesFn (core.js:11062)
    at Object.eval [as updateDirectives] (HomeComponent_Host.ngfactory.js? [sm]:1)
    at Object.debugUpdateDirectives [as updateDirectives] (core.js:11054)
    at checkAndUpdateView (core.js:10451)
    at callViewAction (core.js:10692)

in webview console

Failed to load resource: net::ERR_FILE_NOT_FOUND editor.main.css
Failed to load resource: net::ERR_FILE_NOT_FOUND loader.js
require.config is not a function

path it is looking for editor.main.css and loader.js looks like 

file:///assets/monaco/vs/editor/editor.main.css
file:///assets/monaco/vs/loader.js

really appreciate any inputs.

szuni commented 6 years ago

@nagug try to delete protocol.interceptFileProtocol(...) part from main.js

nagug commented 6 years ago

@szuni Thanks for the input. unfortunately there was no effect.

after some digging, i found that it seems the path for editor.min.css and loader.js is alway wrong. It was never loading full path, but only relative path, causing things to break.

I did some "hardcoding" to covalent-code-editor.js and I was able to make things work.

@jeremysmartt looks like _editorNodeModuleDirOverride not initialised could have some issues on electron. Hence I made some changes like

this._isElectronApp = (( /** @type {?} */(window))['process']) ? true : false;
            if (this._isElectronApp) {
                this._appPath = electron.remote.app.getAppPath().split('\\').join('/');
                this._editorNodeModuleDirOverride = this._appPath;
            }

Now the challenge was the file paths were missing dist

hence I had to change the editorHTML to reflect path with dist included. This is not the right approach. Any suggestions on better approach.

nagug commented 6 years ago

Following are the changes, that made things work for me with angular-electron boiler plate.

in angular.json

"assets": [
              "src/assets",
              "src/favicon.ico",
              "src/favicon.png",
              "src/favicon.icns",
              "src/favicon.256x256.png",
              "src/favicon.512x512.png",
              "src/electron-load.js",
              {
                "glob": "**/*",
                "input": "node_modules/@covalent/code-editor/assets/monaco",
                "output": "/assets/monaco"
              }

main.ts will look like

function createWindow() {

  const electronScreen = screen;
  const size = electronScreen.getPrimaryDisplay().workAreaSize;

  // Create the browser window.
  win = new BrowserWindow({
    x: 0,
    y: 0,
    width: size.width,
    height: size.height,
    webPreferences: {
      webSecurity: false
    }
  });

index.html will look like

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>AngularElectron</title>
  <base href="">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <script src="electron-load.js"></script>
</head>
<body>
  <app-root>Loading...</app-root>
</body>
</html>

electron-load.js is the same file as in electron-covalent example. Just that my file only has the following code. 

var fs = require('fs');
var electron = require('electron');
var path = require('path');
var url = require('url');

home.component is a empty class

home.component.html is like

<div class="container">
  <h1 class="title">
    {{ 'PAGES.HOME.TITLE' | translate }}
  </h1>
  <td-code-editor style="height: 300px" theme="vs-light" flex language="javascript"></td-code-editor>

</div>

unfortunately the changes are in covalent-code-editor.js (I made the changes in ESM5 files, which is what I was using)

look for the following code

            if (this._isElectronApp) {
                this._appPath = electron.remote.app.getAppPath().split('\\').join('/');
            }

and replace with 

            if (this._isElectronApp) {
                this._appPath = electron.remote.app.getAppPath().split('\\').join('/');
                this._editorNodeModuleDirOverride = this._appPath;
            }

this ensures that _editorNodeModuleDirOverride is not empty.

Now need to compensate for delivering from "dist" folder.

Look for the editorHTML in TdCodeEditorComponent.prototype.ngOnInit function. and make the changes for path of the following (Search and change)

/assets/monaco/vs/editor/editor.main.css
/assets/monaco/vs/loader.js

to 

/dist/assets/monaco/vs/editor/editor.main.css
/dist/assets/monaco/vs/loader.js

and change the following code also in editorHTML

baseUrl: '" + this._appPath + "/assets/monaco'

to baseUrl: '" + this._appPath + "/dist/assets/monaco'

This is not fully tested for all APIs..so play around with paths.

Stevertus commented 6 years ago

@nagug Thanks that actually worked! Not the best way to fix it, but it is a way. Nevertheless, I hope this gets somehow fixed in the future

Stradivario commented 6 years ago

@nagug tried your solution it doesn't work... maybe i didn't configure it properly... hope it will be resolved soon!

nagug commented 6 years ago

@stradivario what errors are you getting?

Stradivario commented 6 years ago

@nagug sorry yesterday i was a sleep a bit and i didn't say it more correctly.

I don't have any error just my Editor is not showing. I try to change the paths but i think you say it correct "is not suitable for all API-s".

In browser it works perfectly fine.

Regards, K.T.

nagug commented 6 years ago

As @szuni posted.

select tag in elements tab and enter $0.openDevtools() in console. Now you will see a new devtool window and the errors of embedded code editor

This should give clear view of the error.

Stradivario commented 6 years ago

@nagug as @szuni said 

select <webview> tag in elements tab and enter $0.openDevtools() in console. Now you will see a new devtool window and the errors of embedded code editor.

I am selecting the element when i enter inside console it says 

VM797:1 Uncaught TypeError: $0.openDevtools is not a function
    at <anonymous>:1:4
(anonymous) @ VM797:1
$0.openDevtools()vv
VM803:1 Uncaught SyntaxError: Unexpected identifier
$0.openDevtools()
VM805:1 Uncaught TypeError: $0.openDevtools is not a function
    at <anonymous>:1:4

I don't understand what should i do ?

screenshot from 2018-10-07 19-59-52

Stradivario commented 5 years ago

Any update guys ?

Stradivario commented 5 years ago

Up ? @nagug @jeremysmartt @mohitsharma23 @szuni

Stradivario commented 5 years ago

I manage to select current code editor inside console it says:

Uncaught TypeError: require.config is not a function
    at data:text/html;base64,PCFET0NUWVBFIGh0bWw+CiAgICAgICAgICAgIDxodG1sIHN0eWxlPSJoZWlnaHQ6MTAwJSI+CiAgICAgICAgICAgIDxoZWFkPgogICAgICAgICAgICAgICAgPG1ldGEgaHR0cC1lcXVpdj0iWC1VQS1Db21wYXRpYmxlIiBjb250ZW50PSJJRT1lZGdlIiAvPgogICAgICAgICAgICAgICAgPG1ldGEgaHR0cC1lcXVpdj0iQ29udGVudC1UeXBlIiBjb250ZW50PSJ0ZXh0L2h0bWw7Y2hhcnNldD11dGYtOCIgPgogICAgICAgICAgICAgICAgPGxpbmsgcmVsPSJzdHlsZXNoZWV0IiBkYXRhLW5hbWU9InZzL2VkaXRvci9lZGl0b3IubWFpbiIKICAgICAgICAgICAgICAgICAgICBocmVmPSJmaWxlOi8vL2Fzc2V0cy9tb25hY28vdnMvZWRpdG9yL2VkaXRvci5tYWluLmNzcyI+CiAgICAgICAgICAgIDwvaGVhZD4KICAgICAgICAgICAgPGJvZHkgc3R5bGU9ImhlaWdodDoxMDAlO3dpZHRoOiAxMDAlO21hcmdpbjogMDtwYWRkaW5nOiAwO292ZXJmbG93OiBoaWRkZW47Ij4KICAgICAgICAgICAgPGRpdiBpZD0iZWRpdG9ySW5uZXJDb250YWluZXIwIiBzdHlsZT0id2lkdGg6MTAwJTtoZWlnaHQ6MTAwJTtib3JkZXI6MDsiPjwvZGl2PgogICAgICAgICAgICA8c2NyaXB0PgogICAgICAgICAgICAgICAgLy8gR2V0IHRoZSBpcGNSZW5kZXJlciBvZiBlbGVjdHJvbiBmb3IgY29tbXVuaWNhdGlvbgogICAgICAgICAgICAgICAgY29uc3Qge2lwY1JlbmRlcmVyfSA9IHJlcXVpcmUoJ2VsZWN0cm9uJyk7CiAgICAgICAgICAgIDwvc2NyaXB0PgogICAgICAgICAgICA8c2NyaXB0IHNyYz0iZmlsZTovLy9hc3NldHMvbW9uYWNvL3ZzL2xvYWRlci5qcyI+PC9zY3JpcHQ+CiAgICAgICAgICAgIDxzY3JpcHQ+CiAgICAgICAgICAgICAgICB2YXIgZWRpdG9yOwogICAgICAgICAgICAgICAgdmFyIHRoZW1lID0gJ3ZzLWRhcmsnOwogICAgICAgICAgICAgICAgdmFyIHZhbHVlID0gJyc7CgogICAgICAgICAgICAgICAgcmVxdWlyZS5jb25maWcoewogICAgICAgICAgICAgICAgICAgIGJhc2VVcmw6ICcvdG1wLy5tb3VudF9hbmd1bGFhSHFRNWkvcmVzb3VyY2VzL2FwcC5hc2FyL2Fzc2V0cy9tb25hY28nCiAgICAgICAgICAgICAgICB9KTsKICAgICAgICAgICAgICAgIHNlbGYubW9kdWxlID0gdW5kZWZpbmVkOwogICAgICAgICAgICAgICAgc2VsZi5wcm9jZXNzLmJyb3dzZXIgPSB0cnVlOwoKICAgICAgICAgICAgICAgIHJlcXVpcmUoWyd2cy9lZGl0b3IvZWRpdG9yLm1haW4nXSwgZnVuY3Rpb24oKSB7CiAgICAgICAgICAgICAgICAgICAgZWRpdG9yID0gbW9uYWNvLmVkaXRvci5jcmVhdGUoZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ2VkaXRvcklubmVyQ29udGFpbmVyMCcpLCBPYmplY3QuYXNzaWduKHsKICAgICAgICAgICAgICAgICAgICAgICAgdmFsdWU6IHZhbHVlLAogICAgICAgICAgICAgICAgICAgICAgICBsYW5ndWFnZTogJ3R5cGVzY3JpcHQnLAogICAgICAgICAgICAgICAgICAgICAgICB0aGVtZTogJ3ZzLWRhcmsnLAogICAgICAgICAgICAgICAgICAgIH0sIHsicmVhZE9ubHkiOmZhbHNlLCJmb250U2l6ZSI6MTR9KSk7CiAgICAgICAgICAgICAgICAgICAgZWRpdG9yLmdldE1vZGVsKCkub25EaWRDaGFuZ2VDb250ZW50KCAoZSk9PiB7CiAgICAgICAgICAgICAgICAgICAgICAgIGlwY1JlbmRlcmVyLnNlbmRUb0hvc3QoIm9uRWRpdG9yQ29udGVudENoYW5nZSIsIGVkaXRvci5nZXRWYWx1ZSgpKTsKICAgICAgICAgICAgICAgICAgICB9KTsKICAgICAgICAgICAgICAgICAgICBlZGl0b3IuYWRkQWN0aW9uKHsKICAgICAgICAgICAgICAgICAgICAgIC8vIEFuIHVuaXF1ZSBpZGVudGlmaWVyIG9mIHRoZSBjb250cmlidXRlZCBhY3Rpb24uCiAgICAgICAgICAgICAgICAgICAgICBpZDogJ2Z1bGxTY3JlZW4nLAogICAgICAgICAgICAgICAgICAgICAgLy8gQSBsYWJlbCBvZiB0aGUgYWN0aW9uIHRoYXQgd2lsbCBiZSBwcmVzZW50ZWQgdG8gdGhlIHVzZXIuCiAgICAgICAgICAgICAgICAgICAgICBsYWJlbDogJ0Z1bGwgU2NyZWVuJywKICAgICAgICAgICAgICAgICAgICAgIC8vIEFuIG9wdGlvbmFsIGFycmF5IG9mIGtleWJpbmRpbmdzIGZvciB0aGUgYWN0aW9uLgogICAgICAgICAgICAgICAgICAgICAgY29udGV4dE1lbnVHcm91cElkOiAnbmF2aWdhdGlvbicsCiAgICAgICAgICAgICAgICAgICAgICBrZXliaW5kaW5nczogW3VuZGVmaW5lZF0sCiAgICAgICAgICAgICAgICAgICAgICBjb250ZXh0TWVudU9yZGVyOiAxLjUsCiAgICAgICAgICAgICAgICAgICAgICAvLyBNZXRob2QgdGhhdCB3aWxsIGJlIGV4ZWN1dGVkIHdoZW4gdGhlIGFjdGlvbiBpcyB0cmlnZ2VyZWQuCiAgICAgICAgICAgICAgICAgICAgICAvLyBAcGFyYW0gZWRpdG9yIFRoZSBlZGl0b3IgaW5zdGFuY2UgaXMgcGFzc2VkIGluIGFzIGEgY29udmluaWVuY2UKICAgICAgICAgICAgICAgICAgICAgIHJ1bjogZnVuY3Rpb24oZWQpIHsKICAgICAgICAgICAgICAgICAgICAgICAgdmFyIGVkaXRvckRpdiA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdlZGl0b3JJbm5lckNvbnRhaW5lcjAnKTsKICAgICAgICAgICAgICAgICAgICAgICAgZWRpdG9yRGl2LndlYmtpdFJlcXVlc3RGdWxsc2NyZWVuKCk7CiAgICAgICAgICAgICAgICAgICAgICB9CiAgICAgICAgICAgICAgICAgICAgfSk7CiAgICAgICAgICAgICAgICAgICAgZWRpdG9yLmFkZEFjdGlvbih7CiAgICAgICAgICAgICAgICAgICAgICAvLyBBbiB1bmlxdWUgaWRlbnRpZmllciBvZiB0aGUgY29udHJpYnV0ZWQgYWN0aW9uLgogICAgICAgICAgICAgICAgICAgICAgaWQ6ICdleGl0ZnVsbFNjcmVlbicsCiAgICAgICAgICAgICAgICAgICAgICAvLyBBIGxhYmVsIG9mIHRoZSBhY3Rpb24gdGhhdCB3aWxsIGJlIHByZXNlbnRlZCB0byB0aGUgdXNlci4KICAgICAgICAgICAgICAgICAgICAgIGxhYmVsOiAnRXhpdCBGdWxsIFNjcmVlbicsCiAgICAgICAgICAgICAgICAgICAgICAvLyBBbiBvcHRpb25hbCBhcnJheSBvZiBrZXliaW5kaW5ncyBmb3IgdGhlIGFjdGlvbi4KICAgICAgICAgICAgICAgICAgICAgIGNvbnRleHRNZW51R3JvdXBJZDogJ25hdmlnYXRpb24nLAogICAgICAgICAgICAgICAgICAgICAga2V5YmluZGluZ3M6IFs5XSwKICAgICAgICAgICAgICAgICAgICAgIGNvbnRleHRNZW51T3JkZXI6IDEuNSwKICAgICAgICAgICAgICAgICAgICAgIC8vIE1ldGhvZCB0aGF0IHdpbGwgYmUgZXhlY3V0ZWQgd2hlbiB0aGUgYWN0aW9uIGlzIHRyaWdnZXJlZC4KICAgICAgICAgICAgICAgICAgICAgIC8vIEBwYXJhbSBlZGl0b3IgVGhlIGVkaXRvciBpbnN0YW5jZSBpcyBwYXNzZWQgaW4gYXMgYSBjb252aW5pZW5jZQogICAgICAgICAgICAgICAgICAgICAgcnVuOiBmdW5jdGlvbihlZCkgewogICAgICAgICAgICAgICAgICAgICAgICB2YXIgZWRpdG9yRGl2ID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ2VkaXRvcklubmVyQ29udGFpbmVyMCcpOwogICAgICAgICAgICAgICAgICAgICAgICBkb2N1bWVudC53ZWJraXRFeGl0RnVsbHNjcmVlbigpOwogICAgICAgICAgICAgICAgICAgICAgfQogICAgICAgICAgICAgICAgICAgIH0pOwogICAgICAgICAgICAgICAgICAgIGlwY1JlbmRlcmVyLnNlbmRUb0hvc3QoIm9uRWRpdG9ySW5pdGlhbGl6ZWQiLCB0aGlzLl9lZGl0b3IpOwogICAgICAgICAgICAgICAgfSk7CgogICAgICAgICAgICAgICAgLy8gcmV0dXJuIGJhY2sgdGhlIHZhbHVlIGluIHRoZSBlZGl0b3IgdG8gdGhlIG1haW52aWV3CiAgICAgICAgICAgICAgICBpcGNSZW5kZXJlci5vbignZ2V0RWRpdG9yQ29udGVudCcsIGZ1bmN0aW9uKCl7CiAgICAgICAgICAgICAgICAgICAgaXBjUmVuZGVyZXIuc2VuZFRvSG9zdCgiZWRpdG9yQ29udGVudCIsIGVkaXRvci5nZXRWYWx1ZSgpKTsKICAgICAgICAgICAgICAgIH0pOwoKICAgICAgICAgICAgICAgIC8vIHNldCB0aGUgdmFsdWUgb2YgdGhlIGVkaXRvciBmcm9tIHdoYXQgd2FzIHNlbnQgZnJvbSB0aGUgbWFpbnZpZXcKICAgICAgICAgICAgICAgIGlwY1JlbmRlcmVyLm9uKCdzZXRFZGl0b3JDb250ZW50JywgZnVuY3Rpb24oZXZlbnQsIGRhdGEpewogICAgICAgICAgICAgICAgICAgIHZhbHVlID0gZGF0YTsKICAgICAgICAgICAgICAgICAgICBlZGl0b3Iuc2V0VmFsdWUoZGF0YSk7CiAgICAgICAgICAgICAgICB9KTsKCiAgICAgICAgICAgICAgICAvLyBzZXQgdGhlIHN0eWxlIG9mIHRoZSBlZGl0b3IgY29udGFpbmVyIGRpdgogICAgICAgICAgICAgICAgaXBjUmVuZGVyZXIub24oJ3NldEVkaXRvclN0eWxlJywgZnVuY3Rpb24oZXZlbnQsIGRhdGEpewogICAgICAgICAgICAgICAgICAgIHZhciBlZGl0b3JEaXYgPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnZWRpdG9ySW5uZXJDb250YWluZXIwJyk7CiAgICAgICAgICAgICAgICAgICAgZWRpdG9yRGl2LnN0eWxlID0gZGF0YS5zdHlsZTsKICAgICAgICAgICAgICAgICAgICB2YXIgY3VycmVudFZhbHVlID0gZWRpdG9yLmdldFZhbHVlKCk7CiAgICAgICAgICAgICAgICAgICAgZWRpdG9yLmRpc3Bvc2UoKTsKICAgICAgICAgICAgICAgICAgICBlZGl0b3IgPSBtb25hY28uZWRpdG9yLmNyZWF0ZShkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnZWRpdG9ySW5uZXJDb250YWluZXIwJyksIE9iamVjdC5hc3NpZ24oewogICAgICAgICAgICAgICAgICAgICAgICB2YWx1ZTogY3VycmVudFZhbHVlLAogICAgICAgICAgICAgICAgICAgICAgICBsYW5ndWFnZTogZGF0YS5sYW5ndWFnZSwKICAgICAgICAgICAgICAgICAgICAgICAgdGhlbWU6IGRhdGEudGhlbWUsCiAgICAgICAgICAgICAgICAgICAgfSwgeyJyZWFkT25seSI6ZmFsc2UsImZvbnRTaXplIjoxNH0pKTsKICAgICAgICAgICAgICAgIH0pOwoKICAgICAgICAgICAgICAgIC8vIHNldCB0aGUgb3B0aW9ucyBvZiB0aGUgZWRpdG9yIGZyb20gd2hhdCB3YXMgc2VudCBmcm9tIHRoZSBtYWludmlldwogICAgICAgICAgICAgICAgaXBjUmVuZGVyZXIub24oJ3NldEVkaXRvck9wdGlvbnMnLCBmdW5jdGlvbihldmVudCwgZGF0YSl7CiAgICAgICAgICAgICAgICAgICAgZWRpdG9yLnVwZGF0ZU9wdGlvbnMoZGF0YSk7CiAgICAgICAgICAgICAgICAgICAgaXBjUmVuZGVyZXIuc2VuZFRvSG9zdCgib25FZGl0b3JDb25maWd1cmF0aW9uQ2hhbmdlZCIsICcnKTsKICAgICAgICAgICAgICAgIH0pOwoKICAgICAgICAgICAgICAgIC8vIHNldCB0aGUgbGFuZ3VhZ2Ugb2YgdGhlIGVkaXRvciBmcm9tIHdoYXQgd2FzIHNlbnQgZnJvbSB0aGUgbWFpbnZpZXcKICAgICAgICAgICAgICAgIGlwY1JlbmRlcmVyLm9uKCdzZXRMYW5ndWFnZScsIGZ1bmN0aW9uKGV2ZW50LCBkYXRhKXsKICAgICAgICAgICAgICAgICAgICB2YXIgY3VycmVudFZhbHVlID0gZWRpdG9yLmdldFZhbHVlKCk7CiAgICAgICAgICAgICAgICAgICAgZWRpdG9yLmRpc3Bvc2UoKTsKICAgICAgICAgICAgICAgICAgICBlZGl0b3IgPSBtb25hY28uZWRpdG9yLmNyZWF0ZShkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnZWRpdG9ySW5uZXJDb250YWluZXIwJyksIE9iamVjdC5hc3NpZ24oewogICAgICAgICAgICAgICAgICAgICAgICB2YWx1ZTogY3VycmVudFZhbHVlLAogICAgICAgICAgICAgICAgICAgICAgICBsYW5ndWFnZTogZGF0YSwKICAgICAgICAgICAgICAgICAgICAgICAgdGhlbWU6IHRoZW1lLAogICAgICAgICAgICAgICAgICAgIH0sIHsicmVhZE9ubHkiOmZhbHNlLCJmb250U2l6ZSI6MTR9KSk7CiAgICAgICAgICAgICAgICAgICAgaXBjUmVuZGVyZXIuc2VuZFRvSG9zdCgib25FZGl0b3JDb25maWd1cmF0aW9uQ2hhbmdlZCIsICcnKTsKICAgICAgICAgICAgICAgICAgICBpcGNSZW5kZXJlci5zZW5kVG9Ib3N0KCJvbkVkaXRvckxhbmd1YWdlQ2hhbmdlZCIsICcnKTsKICAgICAgICAgICAgICAgIH0pOwoKICAgICAgICAgICAgICAgIC8vIHJlZ2lzdGVyIGEgbmV3IGxhbmd1YWdlIHdpdGggZWRpdG9yCiAgICAgICAgICAgICAgICBpcGNSZW5kZXJlci5vbigncmVnaXN0ZXJMYW5ndWFnZScsIGZ1bmN0aW9uKGV2ZW50LCBkYXRhKXsKICAgICAgICAgICAgICAgICAgICB2YXIgY3VycmVudFZhbHVlID0gZWRpdG9yLmdldFZhbHVlKCk7CiAgICAgICAgICAgICAgICAgICAgZWRpdG9yLmRpc3Bvc2UoKTsKCiAgICAgICAgICAgICAgICAgICAgZm9yICh2YXIgaSA9IDA7IGkgPCBkYXRhLmNvbXBsZXRpb25JdGVtUHJvdmlkZXIubGVuZ3RoOyBpKyspIHsKICAgICAgICAgICAgICAgICAgICAgICAgdmFyIHByb3ZpZGVyID0gZGF0YS5jb21wbGV0aW9uSXRlbVByb3ZpZGVyW2ldOwogICAgICAgICAgICAgICAgICAgICAgICBwcm92aWRlci5raW5kID0gZXZhbChwcm92aWRlci5raW5kKTsKICAgICAgICAgICAgICAgICAgICB9CiAgICAgICAgICAgICAgICAgICAgZm9yICh2YXIgaSA9IDA7IGkgPCBkYXRhLm1vbmFyY2hUb2tlbnNQcm92aWRlci5sZW5ndGg7IGkrKykgewogICAgICAgICAgICAgICAgICAgICAgICB2YXIgbW9uYXJjaFRva2VucyA9IGRhdGEubW9uYXJjaFRva2Vuc1Byb3ZpZGVyW2ldOwogICAgICAgICAgICAgICAgICAgICAgICBtb25hcmNoVG9rZW5zWzBdID0gZXZhbChtb25hcmNoVG9rZW5zWzBdKTsKICAgICAgICAgICAgICAgICAgICB9CiAgICAgICAgICAgICAgICAgICAgbW9uYWNvLmxhbmd1YWdlcy5yZWdpc3Rlcih7IGlkOiBkYXRhLmlkIH0pOwoKICAgICAgICAgICAgICAgICAgICBtb25hY28ubGFuZ3VhZ2VzLnNldE1vbmFyY2hUb2tlbnNQcm92aWRlcihkYXRhLmlkLCB7CiAgICAgICAgICAgICAgICAgICAgICAgIHRva2VuaXplcjogewogICAgICAgICAgICAgICAgICAgICAgICAgICAgcm9vdDogZGF0YS5tb25hcmNoVG9rZW5zUHJvdmlkZXIKICAgICAgICAgICAgICAgICAgICAgICAgfQogICAgICAgICAgICAgICAgICAgIH0pOwoKICAgICAgICAgICAgICAgICAgICAvLyBEZWZpbmUgYSBuZXcgdGhlbWUgdGhhdCBjb25zdGFpbnMgb25seSBydWxlcyB0aGF0IG1hdGNoIHRoaXMgbGFuZ3VhZ2UKICAgICAgICAgICAgICAgICAgICBtb25hY28uZWRpdG9yLmRlZmluZVRoZW1lKGRhdGEuY3VzdG9tVGhlbWUuaWQsIGRhdGEuY3VzdG9tVGhlbWUudGhlbWUpOwogICAgICAgICAgICAgICAgICAgIHRoZW1lID0gZGF0YS5jdXN0b21UaGVtZS5pZDsKCiAgICAgICAgICAgICAgICAgICAgbW9uYWNvLmxhbmd1YWdlcy5yZWdpc3RlckNvbXBsZXRpb25JdGVtUHJvdmlkZXIoZGF0YS5pZCwgewogICAgICAgICAgICAgICAgICAgICAgICBwcm92aWRlQ29tcGxldGlvbkl0ZW1zOiAoKSA9PiB7CiAgICAgICAgICAgICAgICAgICAgICAgICAgICByZXR1cm4gZGF0YS5jb21wbGV0aW9uSXRlbVByb3ZpZGVyCiAgICAgICAgICAgICAgICAgICAgICAgIH0KICAgICAgICAgICAgICAgICAgICB9KTsKCiAgICAgICAgICAgICAgICAgICAgdmFyIGNzcyA9IGRvY3VtZW50LmNyZWF0ZUVsZW1lbnQoInN0eWxlIik7CiAgICAgICAgICAgICAgICAgICAgY3NzLnR5cGUgPSAidGV4dC9jc3MiOwogICAgICAgICAgICAgICAgICAgIGNzcy5pbm5lckhUTUwgPSBkYXRhLm1vbmFyY2hUb2tlbnNQcm92aWRlckNTUzsKICAgICAgICAgICAgICAgICAgICBkb2N1bWVudC5ib2R5LmFwcGVuZENoaWxkKGNzcyk7CgogICAgICAgICAgICAgICAgICAgIGlwY1JlbmRlcmVyLnNlbmRUb0hvc3QoIm9uRWRpdG9yQ29uZmlndXJhdGlvbkNoYW5nZWQiLCAnJyk7CiAgICAgICAgICAgICAgICB9KTsKCiAgICAgICAgICAgICAgICAvLyBJbnN0cnVjdCB0aGUgZWRpdG9yIHRvIHJlbWVhc3VyZSBpdHMgY29udGFpbmVyCiAgICAgICAgICAgICAgICBpcGNSZW5kZXJlci5vbignbGF5b3V0JywgZnVuY3Rpb24oKXsKICAgICAgICAgICAgICAgICAgICBlZGl0b3IubGF5b3V0KCk7CiAgICAgICAgICAgICAgICB9KTsKCiAgICAgICAgICAgICAgICAvLyBJbnN0cnVjdCB0aGUgZWRpdG9yIGdvIHRvIGZ1bGwgc2NyZWVuIG1vZGUKICAgICAgICAgICAgICAgIGlwY1JlbmRlcmVyLm9uKCdzaG93RnVsbFNjcmVlbkVkaXRvcicsIGZ1bmN0aW9uKCkgewogICAgICAgICAgICAgICAgICB2YXIgZWRpdG9yRGl2ID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ2VkaXRvcklubmVyQ29udGFpbmVyMCcpOwogICAgICAgICAgICAgICAgICBlZGl0b3JEaXYud2Via2l0UmVxdWVzdEZ1bGxzY3JlZW4oKTsKICAgICAgICAgICAgICAgIH0pOwoKICAgICAgICAgICAgICAgIC8vIEluc3RydWN0IHRoZSBlZGl0b3IgZXhpdCBmdWxsIHNjcmVlbiBtb2RlCiAgICAgICAgICAgICAgICBpcGNSZW5kZXJlci5vbignZXhpdEZ1bGxTY3JlZW5FZGl0b3InLCBmdW5jdGlvbigpIHsKICAgICAgICAgICAgICAgICAgdmFyIGVkaXRvckRpdiA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdlZGl0b3JJbm5lckNvbnRhaW5lcjAnKTsKICAgICAgICAgICAgICAgICAgZWRpdG9yRGl2LndlYmtpdEV4aXRGdWxsc2NyZWVuKCk7CiAgICAgICAgICAgICAgICB9KTsKCiAgICAgICAgICAgICAgICBpcGNSZW5kZXJlci5vbignZGlzcG9zZScsIGZ1bmN0aW9uKCl7CiAgICAgICAgICAgICAgICAgIGVkaXRvci5kaXNwb3NlKCk7CiAgICAgICAgICAgICAgICB9KTsKCiAgICAgICAgICAgICAgICAvLyBuZWVkIHRvIG1hbnVhbGx5IHJlc2l6ZSB0aGUgZWRpdG9yIGFueSB0aW1lIHRoZSB3aW5kb3cgc2l6ZQogICAgICAgICAgICAgICAgLy8gY2hhbmdlcy4gU2VlOiBodHRwczovL2dpdGh1Yi5jb20vTWljcm9zb2Z0L21vbmFjby1lZGl0b3IvaXNzdWVzLzI4CiAgICAgICAgICAgICAgICB3aW5kb3cuYWRkRXZlbnRMaXN0ZW5lcigicmVzaXplIiwgZnVuY3Rpb24gcmVzaXplRWRpdG9yKCkgewogICAgICAgICAgICAgICAgICAgIGVkaXRvci5sYXlvdXQoKTsKICAgICAgICAgICAgICAgIH0pOwogICAgICAgICAgICA8L3NjcmlwdD4KICAgICAgICAgICAgPC9ib2R5PgogICAgICAgICAgICA8L2h0bWw+:21:25

Here on 21 line


<!DOCTYPE html>
            <html style="height:100%">
            <head>
                <meta http-equiv="X-UA-Compatible" content="IE=edge" />
                <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
                <link rel="stylesheet" data-name="vs/editor/editor.main"
                    href="file:///assets/monaco/vs/editor/editor.main.css">
            </head>
            <body style="height:100%;width: 100%;margin: 0;padding: 0;overflow: hidden;">
            <div id="editorInnerContainer0" style="width:100%;height:100%;border:0;"></div>
            <script>
                // Get the ipcRenderer of electron for communication
                const {ipcRenderer} = require('electron');
            </script>
            <script src="file:///assets/monaco/vs/loader.js"></script>
            <script>
                var editor;
                var theme = 'vs-dark';
                var value = '';

                require.config({
                    baseUrl: '/tmp/.mount_angulaaHqQ5i/resources/app.asar/assets/monaco'
                });
                self.module = undefined;
                self.process.browser = true;

                require(['vs/editor/editor.main'], function() {
                    editor = monaco.editor.create(document.getElementById('editorInnerContainer0'), Object.assign({
                        value: value,
                        language: 'typescript',
                        theme: 'vs-dark',
                    }, {"readOnly":false,"fontSize":14}));
                    editor.getModel().onDidChangeContent( (e)=> {
                        ipcRenderer.sendToHost("onEditorContentChange", editor.getValue());
                    });
                    editor.addAction({
                      // An unique identifier of the contributed action.
                      id: 'fullScreen',
                      // A label of the action that will be presented to the user.
                      label: 'Full Screen',
                      // An optional array of keybindings for the action.
                      contextMenuGroupId: 'navigation',
                      keybindings: [undefined],
                      contextMenuOrder: 1.5,
                      // Method that will be executed when the action is triggered.
                      // @param editor The editor instance is passed in as a convinience
                      run: function(ed) {
                        var editorDiv = document.getElementById('editorInnerContainer0');
                        editorDiv.webkitRequestFullscreen();
                      }
                    });
                    editor.addAction({
                      // An unique identifier of the contributed action.
                      id: 'exitfullScreen',
                      // A label of the action that will be presented to the user.
                      label: 'Exit Full Screen',
                      // An optional array of keybindings for the action.
                      contextMenuGroupId: 'navigation',
                      keybindings: [9],
                      contextMenuOrder: 1.5,
                      // Method that will be executed when the action is triggered.
                      // @param editor The editor instance is passed in as a convinience
                      run: function(ed) {
                        var editorDiv = document.getElementById('editorInnerContainer0');
                        document.webkitExitFullscreen();
                      }
                    });
                    ipcRenderer.sendToHost("onEditorInitialized", this._editor);
                });

                // return back the value in the editor to the mainview
                ipcRenderer.on('getEditorContent', function(){
                    ipcRenderer.sendToHost("editorContent", editor.getValue());
                });

                // set the value of the editor from what was sent from the mainview
                ipcRenderer.on('setEditorContent', function(event, data){
                    value = data;
                    editor.setValue(data);
                });

                // set the style of the editor container div
                ipcRenderer.on('setEditorStyle', function(event, data){
                    var editorDiv = document.getElementById('editorInnerContainer0');
                    editorDiv.style = data.style;
                    var currentValue = editor.getValue();
                    editor.dispose();
                    editor = monaco.editor.create(document.getElementById('editorInnerContainer0'), Object.assign({
                        value: currentValue,
                        language: data.language,
                        theme: data.theme,
                    }, {"readOnly":false,"fontSize":14}));
                });

                // set the options of the editor from what was sent from the mainview
                ipcRenderer.on('setEditorOptions', function(event, data){
                    editor.updateOptions(data);
                    ipcRenderer.sendToHost("onEditorConfigurationChanged", '');
                });

                // set the language of the editor from what was sent from the mainview
                ipcRenderer.on('setLanguage', function(event, data){
                    var currentValue = editor.getValue();
                    editor.dispose();
                    editor = monaco.editor.create(document.getElementById('editorInnerContainer0'), Object.assign({
                        value: currentValue,
                        language: data,
                        theme: theme,
                    }, {"readOnly":false,"fontSize":14}));
                    ipcRenderer.sendToHost("onEditorConfigurationChanged", '');
                    ipcRenderer.sendToHost("onEditorLanguageChanged", '');
                });

                // register a new language with editor
                ipcRenderer.on('registerLanguage', function(event, data){
                    var currentValue = editor.getValue();
                    editor.dispose();

                    for (var i = 0; i < data.completionItemProvider.length; i++) {
                        var provider = data.completionItemProvider[i];
                        provider.kind = eval(provider.kind);
                    }
                    for (var i = 0; i < data.monarchTokensProvider.length; i++) {
                        var monarchTokens = data.monarchTokensProvider[i];
                        monarchTokens[0] = eval(monarchTokens[0]);
                    }
                    monaco.languages.register({ id: data.id });

                    monaco.languages.setMonarchTokensProvider(data.id, {
                        tokenizer: {
                            root: data.monarchTokensProvider
                        }
                    });

                    // Define a new theme that constains only rules that match this language
                    monaco.editor.defineTheme(data.customTheme.id, data.customTheme.theme);
                    theme = data.customTheme.id;

                    monaco.languages.registerCompletionItemProvider(data.id, {
                        provideCompletionItems: () => {
                            return data.completionItemProvider
                        }
                    });

                    var css = document.createElement("style");
                    css.type = "text/css";
                    css.innerHTML = data.monarchTokensProviderCSS;
                    document.body.appendChild(css);

                    ipcRenderer.sendToHost("onEditorConfigurationChanged", '');
                });

                // Instruct the editor to remeasure its container
                ipcRenderer.on('layout', function(){
                    editor.layout();
                });

                // Instruct the editor go to full screen mode
                ipcRenderer.on('showFullScreenEditor', function() {
                  var editorDiv = document.getElementById('editorInnerContainer0');
                  editorDiv.webkitRequestFullscreen();
                });

                // Instruct the editor exit full screen mode
                ipcRenderer.on('exitFullScreenEditor', function() {
                  var editorDiv = document.getElementById('editorInnerContainer0');
                  editorDiv.webkitExitFullscreen();
                });

                ipcRenderer.on('dispose', function(){
                  editor.dispose();
                });

                // need to manually resize the editor any time the window size
                // changes. See: https://github.com/Microsoft/monaco-editor/issues/28
                window.addEventListener("resize", function resizeEditor() {
                    editor.layout();
                });
            </script>
            </body>
            </html>
owilliams320 commented 2 years ago

covalent will not be supported with electron in future versions