Wiring of markdown-preview

src/app/editor/code-view/view.base.ts

@@ -7,6 +7,7 @@ import { TabsService } from '../../common/services/editor/tabs/tabs.service';
 import { EditorsService } from '../../common/services/editor/editors.service';
 import { FilesService } from '../../common/services/files.service';
 import { SearchReplaceService } from '../../common/services/editor/search-replace/search-replace.service';
+import { MarkdownPreviewService } from '../../common/services/editor/markdown-preview/markdown-preview.service';
 
 import { EditorSettings } from "../../common/configs/editor.config";
 import { NewtonFile } from '../../common/types/file.type';
@@ -23,12 +24,13 @@ export class CodeViewBase {
     public leftSiblingUUID!: string;
     public rightSiblingUUID!: string;
 
-    protected infoBarService: InfoBarService             = inject(InfoBarService);
-    protected filesModalService: FilesModalService       = inject(FilesModalService);
-    protected tabsService: TabsService                   = inject(TabsService);
-    protected editorsService: EditorsService             = inject(EditorsService);
-    protected filesService: FilesService                 = inject(FilesService);
-    protected searchReplaceService: SearchReplaceService = inject(SearchReplaceService);
+    protected infoBarService: InfoBarService                 = inject(InfoBarService);
+    protected filesModalService: FilesModalService           = inject(FilesModalService);
+    protected tabsService: TabsService                       = inject(TabsService);
+    protected editorsService: EditorsService                 = inject(EditorsService);
+    protected filesService: FilesService                     = inject(FilesService);
+    protected searchReplaceService: SearchReplaceService     = inject(SearchReplaceService);
+    protected markdownPreviewService: MarkdownPreviewService = inject(MarkdownPreviewService);
 
     @ViewChild('editor') editorElm!: ElementRef;
     @Input() editorSettings!: typeof EditorSettings;
@@ -95,6 +97,12 @@ export class CodeViewBase {
         this.editor.showKeyboardShortcuts();
     }
 
+    public markdownPreviewPopup() {
+        let message        = new ServiceMessage();
+        message.action     = "toggle-markdown-preview";
+        this.markdownPreviewService.sendMessage(message);
+    }
+
     public searchPopup() {
         let message        = new ServiceMessage();
         message.action     = "toggle-search-replace";

src/app/editor/code-view/view.component.ts

@@ -117,6 +117,11 @@ export class CodeViewComponent extends CodeViewBase {
             this.editorsService.sendMessage(message);
             this.searchReplaceService.sendMessage(message);
 
+            message            = new ServiceMessage();
+            message.action     = "set-active-editor";
+            message.rawData    = this;
+            this.markdownPreviewService.sendMessage(message);
+
             this.updateInfoBar();
         });
 

src/app/editor/markdown-preview/markdown-preview.component.html

@@ -0,0 +1,6 @@
+<div class="row">
+    <div class="col">
+        <div [innerHtml]="bodyHtml || defaultHtml">
+        </div>
+    </div>
+</div>

src/app/editor/markdown-preview/markdown-preview.component.ts

@@ -0,0 +1,96 @@
+import { Component, HostBinding, inject } from '@angular/core';
+import { Subject, takeUntil } from 'rxjs';
+
+import { MarkdownPreviewService } from '../../common/services/editor/markdown-preview/markdown-preview.service';
+
+import { ServiceMessage } from '../../common/types/service-message.type';
+
+
+
+@Component({
+    selector: 'markdown-preview',
+    standalone: true,
+    imports: [
+    ],
+    templateUrl: './markdown-preview.component.html',
+    styleUrl: './markdown-preview.component.css',
+    host: {
+        'class': 'container-fluid markdown-preview'
+    }
+})
+export class MarkdownPreviewComponent {
+    private unsubscribe: Subject<void>                     = new Subject();
+
+    private markdownPreviewService: MarkdownPreviewService = inject(MarkdownPreviewService);
+
+    @HostBinding("class.hidden") isHidden: boolean         = true;
+    converter: any                                         = new showdown.Converter();
+    defaultHtml: string                                    = "<h1>NOT a Markdown file...</h1>"
+    bodyHtml: string                                       = "";
+
+    private editorComponent!: any;
+
+
+    constructor() {
+    }
+
+
+    private ngAfterViewInit(): void {
+        this.loadSubscribers();
+    }
+
+    private ngOnDestroy() {
+        this.unsubscribe.next();
+        this.unsubscribe.complete();
+    }
+
+    private loadSubscribers() {
+        this.markdownPreviewService.getMessage$().pipe(
+            takeUntil(this.unsubscribe)
+        ).subscribe((message: ServiceMessage) => {
+            if (message.action === "toggle-markdown-preview") {
+                this.toggleMarkdownPreview(message);
+            } else if (message.action === "set-active-editor") {
+                this.setActiveEditor(message);
+            }
+        });
+    }
+
+    private toggleMarkdownPreview(message: ServiceMessage) {
+        this.isHidden = !this.isHidden;
+
+        setTimeout(() => {
+            this.updatePreview();
+        }, 200);
+    }
+
+    private setActiveEditor(message: ServiceMessage) {
+        if (this.editorComponent == message.rawData) return;
+
+        this.editorComponent = message.rawData;
+
+        if (this.isHidden) return;
+
+        this.updatePreview();
+    }
+
+    public updatePreview() {
+        let fileMode  = this.editorComponent.editor.session.getMode()["$id"];
+        let isMdFile  = (fileMode.includes("markdown"));
+        this.bodyHtml = "";
+
+        if (!isMdFile) return;
+
+        let mdStr     = this.editorComponent.editor.session.getValue();
+        let pathParts = this.editorComponent.activeFile.path.split("/");
+        let basePath  = "file://" + pathParts.slice(0, -1).join("/");
+        this.bodyHtml = this.converter.makeHtml(
+            mdStr.replaceAll("](images", `](${basePath}/images`)
+                .replaceAll("](imgs", `](${basePath}/imgs`)
+                .replaceAll("](pictures", `](${basePath}/pictures`)
+                .replaceAll("](pics", `](${basePath}/pics`)
+                .replaceAll("](screenshots", `](${basePath}/screenshots`)
+        );
+    }
+
+}

src/app/editor/search-replace/search-replace.component.ts

@@ -91,7 +91,7 @@ export class SearchReplaceComponent {
     }
 
     private setActiveEditor(message: ServiceMessage) {
-        if (!this.isHidden && this.editor == message.rawData) return;
+        if (this.editor == message.rawData) return;
 
         this.editor = message.rawData;