Move things around

Author: kirjs

apps/codelab/src/app/admin/content/presentation-editor/preview/slide-preview/dynamic-renderer/dynamic-renderer.component.ts

@@ -16,7 +16,7 @@ import { CodelabCodeDemoPreviewComponent } from '../../../wrappers/custom-compon
 import { NgxdResolver } from '@ngxd/core';
 import { CodelabExerciseEditorComponent } from '../../../wrappers/custom-component-editors/codelab-exercise-preview-editor/codelab-exercise-editor.component';
 import { TitleSlideComponent } from '../../../../../../components/slides/title-slide/title-slide.component';
-import { CodelabCodeDemoConsoleViewerComponent } from '../../../wrappers/custom-components-viewers/codelab-code-demo-console-viewer.component';
+import { CodelabCodeDemoConsoleViewerComponent } from '../../../wrappers/custom-components-viewers/codelab-code-demo-console-viewer/codelab-code-demo-console-viewer.component';
 
 @Injectable({ providedIn: 'root' })
 export class PreviewDynamicComponentResolver extends NgxdResolver<string, any> {
@@ -55,7 +55,7 @@ export class ViewDynamicComponentResolver extends NgxdResolver<string, any> {
     super([
       { type: 'codelab-title-slide', component: TitleSlideComponent },
       {
-        type: 'codelab-code-demo-console-editor',
+        type: 'codelab-code-demo-console-viewer',
         component: CodelabCodeDemoConsoleViewerComponent,
       },
     ]);

apps/codelab/src/app/admin/content/presentation-editor/slide-editor/action-bar/action-bar.component.html

@@ -12,7 +12,7 @@
   </button>
   <button
     mat-icon-button
-    (click)="addCustom('codelab-code-demo-console-editor', templates.simpleApp)"
+    (click)="addCustom('codelab-code-demo-console-viewer', templates.simpleApp)"
   >
     <mat-icon>web</mat-icon>
   </button>
@@ -24,15 +24,15 @@
     <button
       mat-menu-item
       (click)="
-        addCustom('codelab-code-demo-console-editor', templates.simpleApp)
+        addCustom('codelab-code-demo-console-viewer', templates.simpleApp)
       "
     >
       Simple / One File
     </button>
     <button
       mat-menu-item
       (click)="
-        addCustom('codelab-code-demo-console-editor', templates.angularApp)
+        addCustom('codelab-code-demo-console-viewer', templates.angularApp)
       "
     >
       Angular App

apps/codelab/src/app/admin/content/presentation-editor/wrappers/custom-component-editors/codelab-code-demo-console-editor/codelab-code-demo-console-editor.component.ts

@@ -23,7 +23,7 @@ interface Highlight {
 type Highlights2 = Record<string, IRange[]>;
 
 @Component({
-  selector: 'codelab-code-demo-console-editor',
+  selector: 'codelab-code-demo-console-viewer',
   templateUrl: './codelab-code-demo-console-editor.component.html',
   styleUrls: ['./codelab-code-demo-console-editor.component.scss'],
 })
@@ -50,7 +50,8 @@ export class CodelabCodeDemoConsoleEditorComponent implements OnInit {
   constructor(
     private readonly monacoConfigService: MonacoConfigService,
     private readonly contentService: ContentService
-  ) {}
+  ) {
+  }
 
   update() {
     this.inferVars();
@@ -69,24 +70,24 @@ export class CodelabCodeDemoConsoleEditorComponent implements OnInit {
   private inferVars() {
     this.files = Object.keys(this.code);
 
-    this.selectedFiles =
-      this.selectedFiles.length === 0
-        ? this.files.map((name, i) => ({
-            name,
-            selected: i === 0,
-            highlights: [],
-            highlights2: [],
-          }))
-        : this.selectedFiles;
 
+    if (this.selectedFiles.length === 0) {
+      console.log('regen');
+      this.selectedFiles = this.files.map((name, i) => ({
+        name,
+        selected: i === 0,
+        highlights: [],
+        highlights2: [],
+      }));
+    }
     this.highlights2 = this.selectedFiles.reduce((result, file) => {
       result[file.name] = file.highlights2 ?? [];
       return result;
     }, {});
 
     this.openFiles = this.selectedFiles
       .filter((file) => file.selected)
-      .map(({ name }) => name);
+      .map(({name}) => name);
   }
 
   updateFileName(index: number, oldName: string, newName: string) {

apps/codelab/src/app/admin/content/presentation-editor/wrappers/custom-components-viewers/codelab-code-demo-console-viewer.component.html renamed to apps/codelab/src/app/admin/content/presentation-editor/wrappers/custom-components-viewers/codelab-code-demo-console-viewer/codelab-code-demo-console-viewer.component.html

@@ -2,11 +2,11 @@ import { Component, Input, OnInit } from '@angular/core';
 
 import { CodeDemoModule, MonacoConfigService } from '@codelab/code-demos';
 
-import { ContentSlide, CustomBlock } from '../../types';
+import { ContentSlide, CustomBlock } from '../../../types';
 import { FormsModule } from '@angular/forms';
 
 @Component({
-  selector: 'codelab-code-demo-console-editor',
+  selector: 'codelab-code-demo-console-viewer',
   templateUrl: './codelab-code-demo-console-viewer.component.html',
   standalone: true,
   imports: [CodeDemoModule, FormsModule],
@@ -45,17 +45,7 @@ export class CodelabCodeDemoConsoleViewerComponent implements OnInit {
         : this.selectedFiles;
 
     this.highlights = this.selectedFiles.reduce((result, file) => {
-      result[file.name] = file.highlights.map((highlight) => {
-        if (typeof highlight.selection === 'string') {
-          try {
-            return new RegExp(highlight.selection);
-          } catch (e) {
-            console.error('Invalid regexp', highlight.selection);
-          }
-        }
-
-        return highlight.selection;
-      });
+      result[file.name] = file.highlights2;
       return result;
     }, {});
 

apps/codelab/src/app/admin/content/presentation-editor/wrappers/custom-components-viewers/codelab-code-demo-console-viewer.component.ts renamed to apps/codelab/src/app/admin/content/presentation-editor/wrappers/custom-components-viewers/codelab-code-demo-console-viewer/codelab-code-demo-console-viewer.component.ts

@@ -166,7 +166,7 @@ html {
 
 .monaco-editor.vs
   .highlighted-code-v2.highlighted-code-v2.highlighted-code-v2.highlighted-code-v2 {
-  background: #f5d8dd;
+  background: rgba(230, 255, 0, 0.58);
 }
 
 p {

apps/codelab/src/styles.scss

@@ -1,23 +1,12 @@
-import {
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  forwardRef,
-  Input,
-  OnChanges,
-  OnDestroy,
-  OnInit,
-  SimpleChanges,
-  NgZone,
-} from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, forwardRef, Input, NgZone, OnChanges, OnDestroy, OnInit, SimpleChanges, } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { editor } from 'monaco-editor';
 import { Subject, Subscription } from 'rxjs';
 import { debounceTime } from 'rxjs/operators';
 import { MonacoConfigService } from '../shared/monaco-config.service';
+import { assertObject } from '@codelab/code-demos/src/lib/shared/utils';
 import ITextModel = editor.ITextModel;
 import IStandaloneCodeEditor = editor.IStandaloneCodeEditor;
-import { assertObject } from '@codelab/code-demos/src/lib/shared/utils';
 
 declare const monaco;
 const extenstionToLang = {
@@ -49,8 +38,7 @@ type Code = Record<string, string>;
   ],
 })
 export class MultitabEditorComponent
-  implements OnChanges, OnInit, OnDestroy, ControlValueAccessor
-{
+  implements OnChanges, OnInit, OnDestroy, ControlValueAccessor {
   @Input() code: Code = {};
   @Input() solutions: Code = {};
   @Input() allowSwitchingFiles = true;
@@ -76,7 +64,8 @@ export class MultitabEditorComponent
     private zone: NgZone,
     readonly monacoConfigService: MonacoConfigService,
     readonly cdr: ChangeDetectorRef
-  ) {}
+  ) {
+  }
 
   ngOnInit(): void {
     assertObject(this.code);
@@ -91,11 +80,13 @@ export class MultitabEditorComponent
 
   ngOnChanges(changes: SimpleChanges): void {
     if ('setFiles' in changes) {
+      console.log(changes.setFiles);
       let files = this.setFiles;
       if (typeof files === 'string') {
         files = files.split(',');
       }
       this.files = files;
+      this.processFileChanges(changes.setFiles.currentValue, changes.setFiles.previousValue);
       this.updateOpenModels();
     }
 
@@ -104,7 +95,7 @@ export class MultitabEditorComponent
     }
   }
 
-  handleFileChange(index, { value }) {
+  handleFileChange(index, {value}) {
     if (this.models) {
       const m = this.getModelByFileName(value.path);
       m.model.setValue(m.model.getValue());
@@ -120,7 +111,8 @@ export class MultitabEditorComponent
     this.onChange = fn;
   }
 
-  registerOnTouched(fn: any): void {}
+  registerOnTouched(fn: any): void {
+  }
 
   loadSolution(file) {
     const model = this.getModelByFileName(file).model;
@@ -140,7 +132,7 @@ export class MultitabEditorComponent
 
   getModelByFileName(file): MonacoModel | undefined {
     if (this.models) {
-      return this.models.find(({ path }) => path === file);
+      return this.models.find(({path}) => path === file);
     }
   }
 
@@ -167,7 +159,7 @@ export class MultitabEditorComponent
         model.onDidChangeContent(() => {
           this.zone.run(() => {
             this.code[path] = model.getValue();
-            this.changeSubject.next({ ...this.code });
+            this.changeSubject.next({...this.code});
           });
         });
 
@@ -188,7 +180,7 @@ export class MultitabEditorComponent
 
   writeValue(code: Code): void {
     if (code) {
-      this.code = { ...code };
+      this.code = {...code};
       this.generateModels();
     }
   }
@@ -229,4 +221,8 @@ export class MultitabEditorComponent
       this.editor = null;
     }
   }
+
+  private processFileChanges(currentValue: string[], previousValue: string[]) {
+
+  }
 }