Multiple editors in a page throws error

[maheshstms]

Hi,
When I try loading multiple editors in a tab view, the second editor throws error.

<md-tab label="JS">
     <td-code-editor style="height: 200px" theme="vs" flex language="javascript" [(ngModel)]="jsCode" id="js"></td-code-editor>  
</md-tab>
<md-tab label="HTML">
     <td-code-editor style="height: 200px" theme="vs" flex language="HTML" [(ngModel)]="html" id="html"></td-code-editor>  
</md-tab>

error

loader.js:7 Duplicate definition of module '===anonymous1==='
  | s.defineModule | @ | loader.js:7
-- | -- | -- | --
  | t | @ | loader.js:7
  | onGotAmdLoader | @ | code-editor.component.ts:508
  | webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask | @ | zone.js:424
  | onInvokeTask | @ | core.es5.js:3881
  | webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask | @ | zone.js:423
  | webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask | @ | zone.js:191
  | ZoneTask.invoke | @ | zone.js:486

How to solve this problem, please help

[jeremysmartt]

Hello @maheshstms
I see this as well and will get a fix out shortly.

[maheshstms]

The functionality did not work, only one editor is shown. The console error is now gone.

          <md-tab label="app code">
            <td-code-editor style="height: 200px" theme="vs" flex language="javascript" [(ngModel)]='frontEndJSCode' id="js"></td-code-editor>  
          </md-tab>
          <md-tab label="HTML">
            <td-code-editor style="height: 200px" theme="vs" flex language="HTML" [(ngModel)]='frontEndHTMLCode' id="html"></td-code-editor>  
          </md-tab>
          <md-tab label="CSS">
            <td-code-editor style="height: 200px" theme="vs" flex language="css" [(ngModel)]='frontEndCSSCode' id="css"></td-code-editor>  
          </md-tab>

[jeremysmartt]

@maheshstms
It looks like multiple editor works if you have them all in say a div tag. The issue with what you are doing is they are in an md-tab. The Monaco Editor doesn't resize itself when you click on the tab to bring it into view. You can see this discussed here:
Issue: microsoft/monaco-editor#28

So what I added to covalent-code-editor is the automaticLayout input that is in the monaco editor. When you set this it will on an interval check the container of the editor and resize it accordingly. I also added a layout() method that you can call directly (maybe on an event or something) and it will cause the editor to resize itself. Changes are located here:

PR: #13

I tested these two use cases with the following and it works:

    <md-tab-group>
      <md-tab label="app code">
        <td-code-editor automaticLayout="true" style="height: 200px" theme="vs" flex language="javascript" [(ngModel)]='frontEndJSCode' id="js"></td-code-editor>  
      </md-tab>
      <md-tab label="HTML">
        <td-code-editor automaticLayout="true" style="height: 200px" theme="vs" flex language="HTML" [(ngModel)]='frontEndHTMLCode' id="html"></td-code-editor>  
      </md-tab>
      <md-tab label="CSS">
        <td-code-editor #editor style="height: 200px" theme="vs" flex language="css" [(ngModel)]='frontEndCSSCode' id="css"></td-code-editor>  
      </md-tab>
    </md-tab-group>
    <button md-raised-button color="accent" (click)="editor.layout()" class="text-upper">SetLayout</button>

[maheshstms]

Thanks for taking it Jeremy.

[jeremysmartt]

@maheshstms you should be able to try this out now

[maheshstms]

Hi Jeremy,
The problem is not solved and it has brought in latency in tab navigation. Attached a video of the experience

[jeremysmartt]

@maheshstms I am not seeing this issue. Maybe you can give me some more info, like code snippets, what browser you are using, etc. I am doing this in Chrome and see no problem. I noticed you are using the Covalent Quickstart so I tried it in there as well. Here is what I did:

package.json

"dependencies": {
"@covalent/code-editor": "^1.0.0-alpha.6-8"
...

.angular-cli.json

"apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        { "glob": "**/*", "input": "../node_modules/@covalent/code-editor/assets/monaco", "output": "./assets/monaco/" }
...

app.module.ts

...
import { CovalentCodeEditorModule } from '@covalent/code-editor';
...
imports: [
    CovalentCodeEditorModule,
...

dashboard.component.ts

export class DashboardComponent implements OnInit {

  items: Object[];
  users: IUser[];
  products: Object[];
  alerts: Object[];

  frontEndJSCode: string = `function something() { 
    console.log(1);
  }`;
  frontEndHTMLCode: string = `<div>blaa</div>`;
  frontEndCSSCode: string = `.thing {
    background-color: lightblue;
  }`;
...

dashboard.component.html

...
<div layout-gt-sm="row" tdMediaToggle="gt-xs" [mediaClasses]="['push-sm']">
    <div flex-gt-sm="60">
      <md-card>
        <md-card-title>Products Sales</md-card-title>
        <md-card-subtitle>usage stats for our products</md-card-subtitle>
        <md-divider></md-divider>
        <div class="chart-height push-top push-right-sm">
          <ngx-charts-area-chart-stacked
            [scheme]="colorScheme"
            [results]="multi"
            [gradient]="gradient"
            [xAxis]="showXAxis"
            [yAxis]="showYAxis"
            [legend]="showLegend"
            [showXAxisLabel]="showXAxisLabel"
            [showYAxisLabel]="showYAxisLabel"
            [xAxisLabel]="xAxisLabel"
            [yAxisLabel]="yAxisLabel"
            [yAxisTickFormatting]="axisDigits">
          </ngx-charts-area-chart-stacked>
        </div>
        <md-tab-group>
          <md-tab label="app code">
            <td-code-editor automaticLayout style="height: 200px" theme="vs" flex language="javascript" [(ngModel)]='frontEndJSCode' id="js"></td-code-editor>  
          </md-tab>
          <md-tab label="HTML">
            <td-code-editor automaticLayout style="height: 200px" theme="vs" flex language="HTML" [(ngModel)]='frontEndHTMLCode' id="html"></td-code-editor>  
          </md-tab>
          <md-tab label="CSS">
            <td-code-editor automaticLayout style="height: 200px" theme="vs" flex language="css" [(ngModel)]='frontEndCSSCode' id="css"></td-code-editor>  
          </md-tab>
        </md-tab-group>
      </md-card>
...

Demo of it running:

[maheshstms]

Thanks Jermy,

I am using Chome version 59.0.3071.115. Still have problem :(

Have shared the code with you by mail. Please help.

Thanks
Mahesh

[jeremysmartt]

I see you are missing the automaticLayout attribute

<td-code-editor automaticLayout

You need to add that or use the layout method whenever you want to manually update the editor size:

      <md-tab label="CSS">
        <td-code-editor #editor style="height: 200px" theme="vs" flex language="css" [(ngModel)]='frontEndCSSCode' id="css"></td-code-editor>  
      </md-tab>
    </md-tab-group>
    <button md-raised-button color="accent" (click)="editor.layout()" class="text-upper">SetLayout</button>

[maheshstms]

Sorry Jeremy I missed it. It works fine now

[jeremysmartt]

👍

[rgorai]

@maheshstms what was the issue / solution? I am having this same problem with @monaco-editor/react and can't find anything about it. I have 2 monaco editors in separate components (one in my react app and one in an NPM package I wrote and linked) and only one of them loads at a time. I tried the layout options mentioned above but nothing works. Any help would be greatly appreciated.