add directive to set width to 100% for images in notes

Author: 4drianMatei

frontend/src/app/shared/directive/marked-image-width.directive.ts

@@ -0,0 +1,20 @@
+import { AfterViewChecked, Directive, ElementRef } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
+
+@Directive({
+  selector: '[appMarkedImageWidth]'
+})
+export class MarkedImageWidthDirective implements AfterViewChecked {
+
+  public images: any[] = [];
+
+  constructor(private el: ElementRef, public dialog: MatDialog) {
+  }
+
+  ngAfterViewChecked() {
+    const imgElements = this.el.nativeElement.querySelectorAll('img');
+    imgElements.forEach(img => {
+      img.style.width = '100%';
+    });
+  }
+}

frontend/src/app/shared/note-details/note-card-body/note-content.component.html

@@ -1,4 +1,4 @@
-<div #noteContentDiv>
+<div #noteContentDiv appMarkedImageWidth>
   <div *ngIf="inList && viewHeight > 180 else wholeText">
     <div [ngClass]="{more_text: showMoreText, less_text: !showMoreText}">
       <p [innerHtml]="note.content | md2html"></p>

frontend/src/app/shared/shared.module.ts

@@ -45,6 +45,7 @@ import { PageNavigationBarComponent } from './page-navigation-bar/page-navigatio
 import { NoteDetailsComponent } from './note-details/note-details.component';
 import { NoteContentComponent } from './note-details/note-card-body/note-content.component';
 import { AsyncNoteListComponent } from './async-note-list/async-note-list.component';
+import { MarkedImageWidthDirective } from './directive/marked-image-width.directive';
 
 
 /**
@@ -65,7 +66,7 @@ import { AsyncNoteListComponent } from './async-note-list/async-note-list.compon
     HighlightModule,
     MatFormFieldModule,
     MatChipsModule,
-    MatIconModule
+    MatIconModule,
   ],
   declarations: [
     HighLightPipe,
@@ -78,6 +79,7 @@ import { AsyncNoteListComponent } from './async-note-list/async-note-list.compon
     AsyncSearchResultListComponent,
     BookmarkTextComponent,
     TagsValidatorDirective,
+    MarkedImageWidthDirective,
     DeleteResourceDialogComponent,
     SocialShareDialogComponent,
     LoginRequiredDialogComponent,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "Codever",
-  "version": "7.0.1",
+  "version": "7.0.2",
   "description": "Codever - bookmarks and snippets manager for developers & co",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",