Highlights

Author: NothingEverHappens

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

@@ -1,6 +1,7 @@
 <div class="wrapper">
   <div class="file-editor">
     <div *ngFor="let file of selectedFiles; let i = index">
+      [{{ selection$ | async | json }}]$$
       <mat-checkbox [(ngModel)]="file.selected" (ngModelChange)="update()">
         <input
           [ngModel]="file.name"
@@ -10,6 +11,28 @@
       <button mat-icon-button (click)="deleteFile(file.name)">
         <mat-icon>cancel</mat-icon>
       </button>
+      <div>
+        <div
+          *ngFor="let highlight of file.highlights; let highlightIndex = index"
+        >
+          {{ highlight.text | slice: 0:20 }}
+          <button
+            mat-icon-button
+            (click)="deleteHighlight(file, highlightIndex)"
+          >
+            <mat-icon>cancel</mat-icon>
+          </button>
+        </div>
+        <ng-container *ngIf="selection$ | async as selection">
+          <button
+            mat-button
+            *ngIf="selection.file === file.name"
+            (click)="addHighlight(file, selection)"
+          >
+            Highlight selected
+          </button>
+        </ng-container>
+      </div>
     </div>
     <button
       mat-button
@@ -34,6 +57,7 @@
 <code-demo
   [showPreview]="showPreview"
   [allowSwitchingFiles]="allowSwitchingFiles"
+  [highlights]="highlights"
   [(ngModel)]="code"
   [displayFileName]="!allowSwitchingFiles"
   (ngModelChange)="update()"

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

@@ -1,10 +1,22 @@
 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 { tap } from 'rxjs/operators';
 
-interface SelectableFiles {
+interface SelectableFile {
   selected: boolean;
   name: string;
+  highlights: Highlight[];
+}
+
+interface Highlight {
+  file: string;
+  selection: Selection;
+  prefix: string;
+  text: string;
 }
 
 @Component({
@@ -19,18 +31,48 @@ export class CodelabCodeDemoConsoleEditorComponent implements OnInit {
   @Input() block!: CustomBlock;
   @Input() slide!: ContentSlide;
   @Input() presentationId!: string;
-  @Input() selectedFiles: SelectableFiles[] = [];
+  @Input() selectedFiles: SelectableFile[] = [];
   @Input() showPreview = true;
   @Input() allowSwitchingFiles = true;
   @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.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>;
 
-  ngOnInit() {
+  async ngOnInit() {
     this.inferVars();
   }
-  constructor(private readonly contentService: ContentService) {}
+
+  constructor(
+    private readonly monacoConfigService: MonacoConfigService,
+    private readonly contentService: ContentService
+  ) {}
 
   update() {
     this.inferVars();
@@ -48,14 +90,23 @@ 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
+            selected: i === 0,
+            highlights: []
           }))
         : this.selectedFiles;
 
+    this.highlights = this.selectedFiles.reduce((result, file) => {
+      result[file.name] = file.highlights.map(h => h.selection);
+      return result;
+    }, {});
+
+    console.log(this.highlights);
+
     this.openFiles = this.selectedFiles
       .filter(file => file.selected)
       .map(({ name }) => name);
@@ -75,7 +126,8 @@ export class CodelabCodeDemoConsoleEditorComponent implements OnInit {
     if (!this.code[this.defaultNewFileName]) {
       this.selectedFiles.push({
         name: this.defaultNewFileName,
-        selected: false
+        selected: false,
+        highlights: []
       });
       this.code[this.defaultNewFileName] = '// code';
     }
@@ -85,4 +137,14 @@ export class CodelabCodeDemoConsoleEditorComponent implements OnInit {
     delete this.code[name];
     this.selectedFiles = this.selectedFiles.filter(file => file.name !== name);
   }
+
+  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();
+  }
 }

libs/code-demos/src/lib/code-demo-editor/directives/code-demo-editor.highlight.directive.ts

@@ -39,17 +39,14 @@ export class CodeDemoEditorHighlightDirective
 
     const editor = this.editorInjector.editor;
     if (editor) {
-      if (!this.codeDemoHighlight) {
+      if (!this.codeDemoHighlight || !editor.getModel()) {
         return;
       }
 
       if (!Array.isArray(this.codeDemoHighlight)) {
         this.codeDemoHighlight = [this.codeDemoHighlight];
       }
 
-      if (!editor.getModel()) {
-        return;
-      }
       const code = editor.getModel().getValue();
 
       if (!code.length) {
@@ -61,17 +58,23 @@ export class CodeDemoEditorHighlightDirective
           typeof match !== 'string' && match.match ? match : { match }
         )
         .reduce((ranges, { match, className }) => {
-          const { indexStart, lineStart, indexEnd, lineEnd } = findPosition(
-            code,
-            match
-          );
+          let range: [number, number, number, number];
+          if (match.endColumn) {
+            range = [
+              match.selectionStartLineNumber,
+              match.selectionStartColumn,
+              match.endLineNumber,
+              match.endColumn
+            ];
+          } else {
+            const position = findPosition(code, match);
+
+            const { indexStart, lineStart, indexEnd, lineEnd } = position;
+            range = [lineStart, indexStart, lineEnd, indexEnd];
+          }
+
           ranges.push({
-            range: new this.monacoConfigService.monaco.Range(
-              lineStart,
-              indexStart,
-              lineEnd,
-              indexEnd
-            ),
+            range: new this.monacoConfigService.monaco.Range(...range),
             options: { inlineClassName: className || 'highlighted-code' }
           });