Make Highlights works

Author: kirjs

angular.json

@@ -721,5 +721,8 @@
     "@nrwl/angular:library": {
       "unitTestRunner": "jest"
     }
+  },
+  "cli": {
+    "analytics": false
   }
 }

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

@@ -11,12 +11,12 @@ import { CodelabCodeDemoFilePathEditorComponent } from '../../../wrappers/custom
 import { CodelabCodeDemoConsoleEditorComponent } from '../../../wrappers/custom-component-editors/codelab-code-demo-console-editor/codelab-code-demo-console-editor.component';
 import { CodeDemoEditorEditorComponent } from '../../../wrappers/custom-component-editors/codelab-code-demo-editor-editor/code-demo-editor.component';
 import { CodelabImageEditorComponent } from '../../../wrappers/custom-component-editors/codelab-image-editor/codelab-image-editor.component';
-import { BlankComponent } from '../blank/blank.component';
 import { CodelabCodeDemoPreviewComponent } from '../../../wrappers/custom-component-previews/codelab-code-demo-preview/codelab-code-demo-preview.component';
 
 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';
 
 @Injectable({ providedIn: 'root' })
 export class PreviewDynamicComponentResolver extends NgxdResolver<string, any> {
@@ -52,7 +52,13 @@ export class PreviewDynamicComponentResolver extends NgxdResolver<string, any> {
 @Injectable({ providedIn: 'root' })
 export class ViewDynamicComponentResolver extends NgxdResolver<string, any> {
   constructor() {
-    super([{ type: 'codelab-title-slide', component: TitleSlideComponent }]);
+    super([
+      { type: 'codelab-title-slide', component: TitleSlideComponent },
+      {
+        type: 'codelab-code-demo-console-editor',
+        component: CodelabCodeDemoConsoleViewerComponent,
+      },
+    ]);
   }
 }
 
@@ -127,51 +133,5 @@ export class DynamicRendererComponent implements OnChanges {
           break;
       }
     }
-
-    // async ngOnInit() {
-    //   const componentMap = {
-    //     preview: {
-    //       'codelab-title-slide': TitleSlideComponent,
-    //       'codelab-code-demo-console-editor': CodelabCodeDemoPreviewComponent,
-    //       'codelab-exercise-preview': CodelabCodeDemoPreviewComponent,
-    //       'codelab-exercise': CodelabCodeDemoPreviewComponent,
-    //       'codelab-closing-slide': CodelabTitleSlideEditorComponent,
-    //       'codelab-code-demo-file-path': CodelabCodeDemoPreviewComponent,
-    //       'codelab-code-demo-editor': CodelabCodeDemoPreviewComponent,
-    //       'codelab-image': CodelabImageEditorComponent
-    //     },
-    //     view: {
-    //       'codelab-title-slide': BlankComponent
-    //     },
-    //     edit: {
-    //       'codelab-title-slide': CodelabTitleSlideEditorComponent,
-    //       'codelab-code-demo-console-editor': CodelabCodeDemoConsoleEditorComponent,
-    //       'codelab-exercise-preview': CodelabExerciseComponent,
-    //       'codelab-exercise': CodelabExerciseComponent,
-    //       'codelab-closing-slide': CodelabTitleSlideEditorComponent,
-    //       'codelab-code-demo-file-path': CodelabCodeDemoFilePathEditorComponent,
-    //       'codelab-code-demo-editor': CodeDemoEditorEditorComponent,
-    //       'codelab-image': CodelabImageEditorComponent
-    //     }
-    //   };
-
-    //   const componentType = componentMap[this.mode][this.block.tag];
-    //   console.log(this.block);
-    //   console.log(componentType, this.block.props);
-    //   console.assert(componentType, this.block.tag);
-    //   const cf = this.componentFactoryResolver.resolveComponentFactory(
-    //     componentType
-    //   );
-    //   this.vcr.clear();
-    //   const componentRef = this.vcr.createComponent(cf);
-
-    //   for (const prop in this.block.props) {
-    //     if (this.block.props.hasOwnProperty(prop)) {
-    //       componentRef.instance[prop] = this.block.props[prop];
-    //     }
-    //   }
-
-    //   componentRef.changeDetectorRef.detectChanges();
-    // }
   }
 }

apps/codelab/src/app/admin/content/presentation-editor/services/content.service.ts

@@ -70,7 +70,7 @@ export class ContentService implements OnDestroy {
     // TODO: There should be a better way
     // this.goToSlide(router.routerState.snapshot.root.firstChild.firstChild.params.id || 0);
     this.state$
-      .pipe(auditTime(5000), takeUntil(this.onDestroy$))
+      .pipe(auditTime(2000), takeUntil(this.onDestroy$))
       .subscribe((presentations) => {
         this.presentations.doc('presentations').set({ presentations });
       });

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

@@ -10,65 +10,6 @@
       <button mat-icon-button (click)="deleteFile(file.name)">
         <mat-icon>cancel</mat-icon>
       </button>
-      <div class="highlights">
-        <div class="highlights-header">
-          <h3>Highlights</h3>
-          <ng-container *ngIf="selection$ | async as selection">
-            <button
-              mat-button
-              *ngIf="selection.file === file.name"
-              (click)="addHighlight(file, selection)"
-            >
-              (add selected)
-            </button>
-          </ng-container>
-          <ng-container *ngIf="!(selection$ | async)">
-            <button mat-button (click)="addRegexHighlight(file)">
-              (Add regex)
-            </button>
-          </ng-container>
-        </div>
-
-        <div
-          class="highlight"
-          *ngFor="let highlight of file.highlights; let highlightIndex = index"
-        >
-          <ng-container
-            *ngIf="
-              highlight.selection?.selectionStartLineNumber !== undefined;
-              else highlightInput
-            "
-          >
-            {{ highlight.text | slice: 0:20 }}
-          </ng-container>
-          <ng-template #highlightInput>
-            <mat-form-field>
-              <mat-label>Regex</mat-label>
-
-              <input
-                [(ngModel)]="highlight.selection"
-                [validateInputMatchesText]="code[file.name]"
-                matInput
-                #model="ngModel"
-                (ngModelChange)="model.valid && update()"
-              />
-
-              <mat-error *ngIf="model.errors?.invalidRegex"
-                >Invalid regex</mat-error
-              >
-              <mat-error *ngIf="model.errors?.regexDoesNotMatch"
-                >Regex doesn't match</mat-error
-              >
-            </mat-form-field>
-          </ng-template>
-          <button
-            mat-icon-button
-            (click)="deleteHighlight(file, highlightIndex)"
-          >
-            <mat-icon>cancel</mat-icon>
-          </button>
-        </div>
-      </div>
     </div>
     <button
       mat-button
@@ -89,12 +30,15 @@ <h3>Highlights</h3>
     </mat-checkbox>
   </div>
 </div>
-
+<slides-highlight-button
+  [(ngModel)]="highlights2"
+  (ngModelChange)="updateHighlights($event)"
+></slides-highlight-button>
 <code-demo
   [showPreview]="showPreview"
   [allowSwitchingFiles]="allowSwitchingFiles"
-  [highlights]="highlights"
   [(ngModel)]="code"
+  [highlights]="highlights2"
   [displayFileName]="!allowSwitchingFiles"
   (ngModelChange)="update()"
   [files]="openFiles"

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

@@ -2,13 +2,15 @@ import { Component, Input, OnInit } from '@angular/core';
 import { ContentService } from '../../../services/content.service';
 import { ContentSlide, CustomBlock } from '../../../types';
 import { MonacoConfigService } from '@codelab/code-demos';
-import { Observable } from 'rxjs';
-import { Selection } from 'monaco-editor';
+import { IRange, Selection } from 'monaco-editor';
+import { assert } from '@codelab/code-demos/src/lib/shared/utils';
+import { rangeToJSON } from './highlight-button/highlight-button.component';
 
 interface SelectableFile {
+  highlights2: IRange[];
   selected: boolean;
   name: string;
-  highlights: Highlight[];
+  highlights: IRange[];
 }
 
 interface Highlight {
@@ -18,6 +20,8 @@ interface Highlight {
   text: string;
 }
 
+type Highlights2 = Record<string, IRange[]>;
+
 @Component({
   selector: 'codelab-code-demo-console-editor',
   templateUrl: './codelab-code-demo-console-editor.component.html',
@@ -36,35 +40,8 @@ export class CodelabCodeDemoConsoleEditorComponent implements OnInit {
   @Input() displayFileName = false;
   readonly defaultNewFileName = 'new.ts';
 
-  readonly selection$ = new Observable<Highlight | undefined>((subscriber) => {
-    // TODO: Unsubscribe
-    MonacoConfigService.monacoReady.then((monaco: any) => {
-      monaco.editor.onDidCreateEditor((editor) => {
-        const subscription = editor.onDidChangeCursorPosition(() => {
-          const selection = editor.getSelection();
-          const text = editor.getModel().getValueInRange(selection);
-          const match = editor
-            .getModel()
-            .uri.path.match(/prefix\/(.+?)\/(.*)$/);
-          if (text === '') {
-            subscriber.next();
-            return;
-          }
-          if (!match) {
-            return;
-          }
-          const [, prefix, file] = match;
-
-          subscriber.next({ file, prefix, selection, text });
-        });
-
-        editor.onDidDispose(() => subscription.dispose());
-      });
-    });
-  });
-
   openFiles: string[] = [];
-  highlights: Record<string, Selection>;
+  highlights2: Highlights2 = {};
 
   async ngOnInit() {
     this.inferVars();
@@ -75,7 +52,7 @@ export class CodelabCodeDemoConsoleEditorComponent implements OnInit {
     private readonly contentService: ContentService
   ) {}
 
-  update(e?: any) {
+  update() {
     this.inferVars();
 
     this.contentService.updateBlock(this.presentationId, this.slide.id, {
@@ -98,21 +75,12 @@ export class CodelabCodeDemoConsoleEditorComponent implements OnInit {
             name,
             selected: i === 0,
             highlights: [],
+            highlights2: [],
           }))
         : 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;
-      });
+    this.highlights2 = this.selectedFiles.reduce((result, file) => {
+      result[file.name] = file.highlights2 ?? [];
       return result;
     }, {});
 
@@ -137,6 +105,7 @@ export class CodelabCodeDemoConsoleEditorComponent implements OnInit {
         name: this.defaultNewFileName,
         selected: false,
         highlights: [],
+        highlights2: [],
       });
       this.code[this.defaultNewFileName] = '// code';
     }
@@ -149,23 +118,13 @@ export class CodelabCodeDemoConsoleEditorComponent implements OnInit {
     );
   }
 
-  addHighlight(file: SelectableFile, highlight: Highlight) {
-    file.highlights.push(JSON.parse(JSON.stringify(highlight)));
-    this.update();
-  }
-
-  deleteHighlight(file: SelectableFile, highlightIndex: number) {
-    file.highlights.splice(highlightIndex, 1);
-    this.update();
-  }
+  updateHighlights(hightlighs: Highlights2) {
+    const filenames = Object.keys(this.highlights2);
+    for (const file of filenames) {
+      assert(this.selectedFiles.find((a) => a.name === file)).highlights2 =
+        hightlighs[file].map(rangeToJSON);
+    }
 
-  addRegexHighlight(file: SelectableFile) {
-    file.highlights.push({
-      text: 'hi',
-      prefix: 'hi',
-      file: 'dsd',
-      selection: '/dsdasdsad/',
-    });
     this.update();
   }
 }

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

@@ -0,0 +1,11 @@
+<button
+  mat-button
+  color="primary"
+  *ngIf="selection$ | async as sel; else dis"
+  (click)="addHighlight(sel)"
+>
+  Highlight
+</button>
+<ng-template #dis>
+  <button mat-button color="primary" [disabled]="true">Highlight</button>
+</ng-template>

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

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HighlightButtonComponent } from './highlight-button.component';
+
+describe('HighlightButtonComponent', () => {
+  let component: HighlightButtonComponent;
+  let fixture: ComponentFixture<HighlightButtonComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [HighlightButtonComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(HighlightButtonComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});