From 84a727c691711e1e0fa39a54694721bafe21ba49 Mon Sep 17 00:00:00 2001
From: Ray Ma <maray@google.com>
Date: Fri, 13 Dec 2019 17:51:27 -0500
Subject: [PATCH] Fix autofold imports issue#1208

The original reported issue is that HTML is auto-folded.
But as of this PR, the observed behavior is that nothing
is auto-folded.

Changes:
- configure Monaco setting to `folding: true` - fixes all
  use cases of <code-demo-multitab-editor>
- add `autoFold` directive to <code-demo-editor> uses
---
 .../component-tree/component-tree.component.html |  5 +++++
 .../create-first-app.component.html              |  5 +++++
 .../create-first-app/mode/mode.component.html    |  3 +++
 .../custom-events/custom-events.component.html   |  2 ++
 .../dependency-injection.component.html          |  9 +++++++++
 .../codelabs/angular/pipes/pipes.component.html  | 16 ++++++++++++++--
 .../structural-directives.component.html         |  5 +++++
 .../typescript/typescript.component.html         |  3 +++
 .../src/lib/shared/monaco-config.service.ts      |  2 +-
 9 files changed, 47 insertions(+), 3 deletions(-)

diff --git a/apps/codelab/src/app/codelabs/angular/component-tree/component-tree.component.html b/apps/codelab/src/app/codelabs/angular/component-tree/component-tree.component.html
index 4ea1b88f9..4a6eb4f31 100644
--- a/apps/codelab/src/app/codelabs/angular/component-tree/component-tree.component.html
+++ b/apps/codelab/src/app/codelabs/angular/component-tree/component-tree.component.html
@@ -92,6 +92,7 @@ <h2 i18n>
       <div column-5>
         <code-demo-file-path path="box.component.ts"></code-demo-file-path>
         <code-demo-editor
+          autoFolding
           [fontSize]="15"
           [(ngModel)]="code.circleAndBox.other.boxNoParams"
           [codeDemoHighlight]="code.parentComponentSkeleton.match"
@@ -100,6 +101,7 @@ <h2 i18n>
       <div column-5>
         <code-demo-file-path path="circle.component.ts"></code-demo-file-path>
         <code-demo-editor
+          autoFolding
           [fontSize]="15"
           [(ngModel)]="code.circleAndBox.files[0].code"
           [codeDemoHighlight]="code.parentComponentSkeleton.match"
@@ -205,6 +207,7 @@ <h2 i18n>
         <div column-5>
           <code-demo-file-path path="box.component.ts"></code-demo-file-path>
           <code-demo-editor
+            autoFolding
             [fontSize]="15"
             [(ngModel)]="code.circleAndBox.files[1].code"
             [codeDemoHighlight]="code.parentComponentSkeleton.match"
@@ -213,6 +216,7 @@ <h2 i18n>
         <div column-5>
           <code-demo-file-path path="circle.component.ts"></code-demo-file-path>
           <code-demo-editor
+            autoFolding
             [fontSize]="15"
             [(ngModel)]="code.circleAndBox.files[0].code"
             [codeDemoHighlight]="code.parentComponentSkeleton.match"
@@ -223,6 +227,7 @@ <h2 i18n>
         <div column-5>
           <code-demo-file-path path="module.ts"></code-demo-file-path>
           <code-demo-editor
+            autoFolding
             [fontSize]="15"
             [(ngModel)]="code.circleAndBox.files[2].code"
             [codeDemoHighlight]="code.appModule.match"
diff --git a/apps/codelab/src/app/codelabs/angular/create-first-app/create-first-app.component.html b/apps/codelab/src/app/codelabs/angular/create-first-app/create-first-app.component.html
index 75ddd2b57..4a7a1cd8b 100644
--- a/apps/codelab/src/app/codelabs/angular/create-first-app/create-first-app.component.html
+++ b/apps/codelab/src/app/codelabs/angular/create-first-app/create-first-app.component.html
@@ -148,6 +148,7 @@ <h2 i18n>
       class, function, property or variable
     </h2>
     <code-demo-editor
+      autoFolding
       language="typescript"
       [fontSize]="30"
       [(ngModel)]="code.decorators.code"
@@ -445,6 +446,7 @@ <h2 i18n>Loading order: index -> main -> app.module -> app.component</h2>
         <code-demo-file-path path="index.html"></code-demo-file-path>
 
         <code-demo-editor
+          autoFolding
           style="height: 50vh"
           [fontSize]="18"
           [codeDemoHighlight]="code.indexHtmlMatches['index.html']"
@@ -456,6 +458,7 @@ <h2 i18n>Loading order: index -> main -> app.module -> app.component</h2>
         <code-demo-file-path path="bootstrap.ts"></code-demo-file-path>
 
         <code-demo-editor
+          autoFolding
           style="height: 50vh"
           [fontSize]="18"
           [(ngModel)]="code.angularApp['bootstrap.ts']"
@@ -467,6 +470,7 @@ <h2 i18n>Loading order: index -> main -> app.module -> app.component</h2>
         <code-demo-file-path path="app.module.ts"></code-demo-file-path>
 
         <code-demo-editor
+          autoFolding
           style="height: 50vh"
           [fontSize]="18"
           [(ngModel)]="code.angularApp['app.module.ts']"
@@ -476,6 +480,7 @@ <h2 i18n>Loading order: index -> main -> app.module -> app.component</h2>
         <code-demo-file-path path="app.component.ts"></code-demo-file-path>
 
         <code-demo-editor
+          autoFolding
           style="height: 50vh"
           [fontSize]="18"
           [codeDemoHighlight]="code.helloMatches['app.component.ts']"
diff --git a/apps/codelab/src/app/codelabs/angular/create-first-app/mode/mode.component.html b/apps/codelab/src/app/codelabs/angular/create-first-app/mode/mode.component.html
index 648df0149..673e3c37b 100644
--- a/apps/codelab/src/app/codelabs/angular/create-first-app/mode/mode.component.html
+++ b/apps/codelab/src/app/codelabs/angular/create-first-app/mode/mode.component.html
@@ -8,6 +8,7 @@ <h2 i18n>
       <code-demo-file-path path="app.module.ts"></code-demo-file-path>
 
       <code-demo-editor
+        autoFolding
         [fontSize]="30"
         [(ngModel)]="code.moduleAnatomy.code"
         style="height: 400px;"
@@ -27,6 +28,7 @@ <h2 i18n>With Angular we build mobile apps using NativeScript or Ionic.</h2>
   <div class="box-row">
     <div class="box-row-fill">
       <code-demo-editor
+        autoFolding
         [fontSize]="30"
         [(ngModel)]="code.moduleAnatomy.codeMobile"
         [codeDemoHighlight]="[code.moduleAnatomy.matches.importsArr]"
@@ -43,6 +45,7 @@ <h2 i18n>With Angular you can build VR apps with A-FRAME or WEBGL.</h2>
   <div class="box-row">
     <div class="box-row-fill">
       <code-demo-editor
+        autoFolding
         [fontSize]="30"
         [(ngModel)]="code.moduleAnatomy.codeVR"
       ></code-demo-editor>
diff --git a/apps/codelab/src/app/codelabs/angular/custom-events/custom-events.component.html b/apps/codelab/src/app/codelabs/angular/custom-events/custom-events.component.html
index a3e3f1994..cd4776c38 100644
--- a/apps/codelab/src/app/codelabs/angular/custom-events/custom-events.component.html
+++ b/apps/codelab/src/app/codelabs/angular/custom-events/custom-events.component.html
@@ -28,6 +28,7 @@ <h1>Custom Events / Passing data from child to parent</h1>
       <div column-5>
         <code-demo-file-path path="parent.ts"></code-demo-file-path>
         <code-demo-editor
+          autoFolding
           [fontSize]="15"
           [(ngModel)]="code.exercise1a.code"
           [codeDemoHighlight]="code.exercise1a.match"
@@ -40,6 +41,7 @@ <h1>
       <div column-5>
         <code-demo-file-path path="child.ts"></code-demo-file-path>
         <code-demo-editor
+          autoFolding
           [fontSize]="15"
           [(ngModel)]="code.exercise1b.code"
           [codeDemoHighlight]="code.exercise1a.match"
diff --git a/apps/codelab/src/app/codelabs/angular/dependency-injection/dependency-injection.component.html b/apps/codelab/src/app/codelabs/angular/dependency-injection/dependency-injection.component.html
index af9ddc5e5..ddf4fad9e 100644
--- a/apps/codelab/src/app/codelabs/angular/dependency-injection/dependency-injection.component.html
+++ b/apps/codelab/src/app/codelabs/angular/dependency-injection/dependency-injection.component.html
@@ -127,6 +127,7 @@ <h2 i18n>
       <div class="col-6">
         <code-demo-file-path path="person.ts"></code-demo-file-path>
         <code-demo-editor
+          autoFolding
           [fontSize]="15"
           [(ngModel)]="code.withOutDI.code"
           [codeDemoHighlight]="[code.withOutDI.matches.noDI, 'profession']"
@@ -139,6 +140,7 @@ <h2 class="comparision" i18n>
       <div class="col-6" style="margin-left: 10px;">
         <code-demo-file-path path="person-di.ts"></code-demo-file-path>
         <code-demo-editor
+          autoFolding
           [fontSize]="15"
           [(ngModel)]="code.withDI.code"
           [codeDemoHighlight]="[code.withDI.matches.constructor]"
@@ -158,6 +160,7 @@ <h2 class="comparision" i18n>
       <div class="col-6">
         <code-demo-file-path path="person.ts"></code-demo-file-path>
         <code-demo-editor
+          autoFolding
           [fontSize]="15"
           [(ngModel)]="code.withOutDI.code2"
           [codeDemoHighlight]="[code.withOutDI.matches.noDI]"
@@ -170,6 +173,7 @@ <h2 class="comparision" i18n>
       <div class="col-6" style="margin-left: 10px;">
         <code-demo-file-path path="person-di.ts"></code-demo-file-path>
         <code-demo-editor
+          autoFolding
           [fontSize]="15"
           [(ngModel)]="code.withDI.code"
           [codeDemoHighlight]="[code.withDI.matches.constructor]"
@@ -191,6 +195,7 @@ <h2 i18n>
       <div class="col-6">
         <code-demo-file-path path="person-di.ts"></code-demo-file-path>
         <code-demo-editor
+          autoFolding
           [fontSize]="15"
           [(ngModel)]="code.withDI.code"
         ></code-demo-editor>
@@ -198,6 +203,7 @@ <h2 i18n>
       <div class="col-6">
         <code-demo-file-path path="person-di.spec.ts"></code-demo-file-path>
         <code-demo-editor
+          autoFolding
           [fontSize]="15"
           [(ngModel)]="code.withDITesting.code"
         ></code-demo-editor>
@@ -229,6 +235,7 @@ <h2 i18n>
     </h2>
     <code-demo-file-path path="unit-converter-service.ts"></code-demo-file-path>
     <code-demo-editor
+      autoFolding
       [(ngModel)]="code.classAsInjectable.code"
       [codeDemoHighlight]="[code.classAsInjectable.matches.injectable]"
     ></code-demo-editor>
@@ -246,6 +253,7 @@ <h2 i18n>
     </h2>
     <code-demo-file-path path="app.module.ts"></code-demo-file-path>
     <code-demo-editor
+      autoFolding
       [(ngModel)]="code.provideInjectable.code"
       [codeDemoHighlight]="[
         code.provideInjectable.matches.providers,
@@ -266,6 +274,7 @@ <h2 i18n>Consume the Injectable in the component</h2>
       path="unit-conversion.component.ts"
     ></code-demo-file-path>
     <code-demo-editor
+      autoFolding
       [(ngModel)]="code.consumeInjectable.code"
       [codeDemoHighlight]="[code.consumeInjectable.matches.constructor]"
     ></code-demo-editor>
diff --git a/apps/codelab/src/app/codelabs/angular/pipes/pipes.component.html b/apps/codelab/src/app/codelabs/angular/pipes/pipes.component.html
index 233c6bc27..cef09fe56 100644
--- a/apps/codelab/src/app/codelabs/angular/pipes/pipes.component.html
+++ b/apps/codelab/src/app/codelabs/angular/pipes/pipes.component.html
@@ -83,7 +83,11 @@ <h2>
   <!--  PIPES WITH ARGUMENT -->
   <div *slide id="argument-pipes" milestone="Pipes">
     <h1>Pipes with arguments:</h1>
-    <code-demo-editor [(ngModel)]="code.argumentPipes.template" language="html">
+    <code-demo-editor
+      autoFolding
+      [(ngModel)]="code.argumentPipes.template"
+      language="html"
+    >
     </code-demo-editor>
     <div class="info" milestone="Pipes">
       To add parameters to a pipe, append a colon ( : ) followed by the
@@ -94,7 +98,11 @@ <h1>Pipes with arguments:</h1>
   <!--  PIPES AS FILTERS  -->
   <div *slide id="pipes-as-filters" milestone="Pipes">
     <h1>Using custom pipes to filter data</h1>
-    <code-demo-editor [(ngModel)]="code.filterPipes.template" language="html">
+    <code-demo-editor
+      autoFolding
+      [(ngModel)]="code.filterPipes.template"
+      language="html"
+    >
     </code-demo-editor>
   </div>
 
@@ -102,6 +110,7 @@ <h1>Using custom pipes to filter data</h1>
   <div *slide id="crating-pipe" milestone="Pipes">
     <h1>Creating a pipe</h1>
     <code-demo-editor
+      autoFolding
       [fontSize]="25"
       [(ngModel)]="code.creatingAPipe.template"
       [codeDemoHighlight]="code.creatingAPipe.matches.exportClass"
@@ -114,6 +123,7 @@ <h2>A pipe is a class decorated with pipe metadata.</h2>
   <div *slide id="pipeTransform" milestone="Pipes">
     <h1>Creating a pipe</h1>
     <code-demo-editor
+      autoFolding
       [fontSize]="25"
       [(ngModel)]="code.creatingAPipe.template"
       [codeDemoHighlight]="code.creatingAPipe.matches.pipeTransform"
@@ -126,6 +136,7 @@ <h2>The pipe class implements the PipeTransform interface.</h2>
   <div *slide id="pipe-transform-method" milestone="Pipes">
     <h1>Creating a pipe</h1>
     <code-demo-editor
+      autoFolding
       [fontSize]="25"
       [(ngModel)]="code.creatingAPipe.template"
       [codeDemoHighlight]="code.creatingAPipe.matches.method"
@@ -141,6 +152,7 @@ <h2>
   <div *slide id="pipe-decorator" milestone="Pipes">
     <h1>Creating a pipe</h1>
     <code-demo-editor
+      autoFolding
       [fontSize]="25"
       [(ngModel)]="code.creatingAPipe.template"
       [codeDemoHighlight]="code.creatingAPipe.matches.decorator"
diff --git a/apps/codelab/src/app/codelabs/angular/structural-directives/structural-directives.component.html b/apps/codelab/src/app/codelabs/angular/structural-directives/structural-directives.component.html
index adc98650a..3c3b4af42 100644
--- a/apps/codelab/src/app/codelabs/angular/structural-directives/structural-directives.component.html
+++ b/apps/codelab/src/app/codelabs/angular/structural-directives/structural-directives.component.html
@@ -110,6 +110,7 @@ <h1>Structural directives ngIf</h1>
     <div>
       <code-demo-file-path path="before"></code-demo-file-path>
       <code-demo-editor
+        autoFolding
         [fontSize]="fontSize"
         [minLines]="3"
         language="html"
@@ -120,6 +121,7 @@ <h2>Desugars into</h2>
       <br /><br />
       <code-demo-file-path path="after"></code-demo-file-path>
       <code-demo-editor
+        autoFolding
         [fontSize]="fontSize"
         [minLines]="3"
         language="html"
@@ -133,6 +135,7 @@ <h1>Structural directives ngFor</h1>
     <div>
       <code-demo-file-path path="before"></code-demo-file-path>
       <code-demo-editor
+        autoFolding
         [fontSize]="fontSize"
         [minLines]="3"
         language="html"
@@ -143,6 +146,7 @@ <h2>Desugars into</h2>
       <br /><br />
       <code-demo-file-path path="after"></code-demo-file-path>
       <code-demo-editor
+        autoFolding
         [fontSize]="fontSize"
         [minLines]="3"
         language="html"
@@ -156,6 +160,7 @@ <h1>Angular MicroSyntax</h1>
     <div>
       <code-demo-file-path path="before"></code-demo-file-path>
       <code-demo-editor
+        autoFolding
         language="text"
         readonly="false"
         [fontSize]="fontSize"
diff --git a/apps/codelab/src/app/codelabs/angular/typescript/typescript/typescript.component.html b/apps/codelab/src/app/codelabs/angular/typescript/typescript/typescript.component.html
index 52dc91ec7..30b46e7e6 100644
--- a/apps/codelab/src/app/codelabs/angular/typescript/typescript/typescript.component.html
+++ b/apps/codelab/src/app/codelabs/angular/typescript/typescript/typescript.component.html
@@ -222,6 +222,7 @@ <h2 i18n>Below are more types we can use</h2>
 
     <code-demo-file-path path="types.ts"></code-demo-file-path>
     <code-demo-editor
+      autoFolding
       style="height: 400px;"
       language="typescript"
       [lineNumbers]="false"
@@ -239,6 +240,7 @@ <h2 i18n>
     </h2>
     <code-demo-file-path path="puppies.ts"></code-demo-file-path>
     <code-demo-editor
+      autoFolding
       style="height: 400px;"
       language="typescript"
       [lineNumbers]="false"
@@ -327,6 +329,7 @@ <h2 i18n>
 
     <code-demo-file-path path="puppy.ts"></code-demo-file-path>
     <code-demo-editor
+      autoFolding
       style="height: 400px;"
       [codeDemoHighlight]="[code.classDescription.matches.exportMatch]"
       language="typescript"
diff --git a/libs/code-demos/src/lib/shared/monaco-config.service.ts b/libs/code-demos/src/lib/shared/monaco-config.service.ts
index 160c3cf82..8df697c61 100644
--- a/libs/code-demos/src/lib/shared/monaco-config.service.ts
+++ b/libs/code-demos/src/lib/shared/monaco-config.service.ts
@@ -21,7 +21,7 @@ export const MONACO_DEFAULTS = {
   lineNumbers: false,
   automaticLayout: true,
   fontSize: 12,
-  folding: false,
+  folding: true,
   minimap: {
     enabled: false
   }