feat(wiki): add autocomplete, refactoring

angular.json

@@ -49,7 +49,8 @@
             },
             "scripts": [
               "node_modules/ngx-markdown-editor/assets/highlight.js/highlight.min.js",
-              "node_modules/ngx-markdown-editor/assets/marked.min.js"
+              "node_modules/ngx-markdown-editor/assets/marked.min.js",
+              "src/assets/js/ace/snippetsMarkdown.js"
             ]
           },
           "configurations": {

package.json

@@ -43,13 +43,14 @@
     "ace-builds": "^1.42.0",
     "chart.js": "^4.4.9",
     "diff": "^8.0.2",
+    "markdown-it": "^14.1.0",
+    "markdown-it-video": "^0.6.3",
     "ngx-markdown-editor": "^5.3.4",
     "primeflex": "^4.0.0",
     "primeicons": "^7.0.0",
     "primeng": "^19.0.9",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
-    "turndown": "^7.2.0",
     "zone.js": "~0.15.0"
   },
   "devDependencies": {
@@ -60,7 +61,7 @@
     "@commitlint/config-conventional": "^19.7.1",
     "@types/jasmine": "~5.1.0",
     "@types/jest": "^29.5.14",
-    "@types/turndown": "^5.0.5",
+    "@types/markdown-it": "^14.1.2",
     "angular-eslint": "19.1.0",
     "angularx-qrcode": "^19.0.0",
     "eslint": "^9.20.0",

src/@types/markdown-it-video.d.ts

@@ -0,0 +1,9 @@
+declare module 'markdown-it-video' {
+  import { PluginSimple } from 'markdown-it';
+
+  const videoPlugin: PluginSimple;
+  export default videoPlugin;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+declare const ace: any;

src/app/app.config.ts

@@ -1,6 +1,7 @@
 import { withNgxsReduxDevtoolsPlugin } from '@ngxs/devtools-plugin';
 import { provideStore } from '@ngxs/store';
 
+import { provideMarkdown } from 'ngx-markdown';
 import { TranslateModule } from '@ngx-translate/core';
 
 import { ConfirmationService, MessageService } from 'primeng/api';
@@ -42,5 +43,6 @@ export const appConfig: ApplicationConfig = {
     ConfirmationService,
     MessageService,
     { provide: ErrorHandler, useClass: GlobalErrorHandler },
+    provideMarkdown(),
   ],
 };

src/app/features/project/overview/components/overview-wiki/overview-wiki.component.html

@@ -4,7 +4,9 @@ <h2>{{ 'project.overview.wiki.title' | translate }}</h2>
     <p-skeleton width="100%" height="5rem" />
   } @else {
     @if (wikiContent()) {
-      <osf-truncated-text [text]="wikiContent()" />
+      <osf-truncated-text [text]="wikiContent()" [hasContent]="true">
+        <osf-markdown [markdownText]="wikiContent()"></osf-markdown>
+      </osf-truncated-text>
     } @else {
       <div [innerHtml]="'project.overview.wiki.noWikiMessage' | translate"></div>
     }

src/app/features/project/overview/components/overview-wiki/overview-wiki.component.ts

@@ -7,11 +7,11 @@ import { Skeleton } from 'primeng/skeleton';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 
 import { WikiSelectors } from '@osf/features/project/wiki/store';
-import { TruncatedTextComponent } from '@shared/components';
+import { MarkdownComponent, TruncatedTextComponent } from '@shared/components';
 
 @Component({
   selector: 'osf-project-wiki',
-  imports: [Skeleton, TranslatePipe, TruncatedTextComponent],
+  imports: [Skeleton, TranslatePipe, TruncatedTextComponent, MarkdownComponent],
   templateUrl: './overview-wiki.component.html',
   styleUrl: './overview-wiki.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,

src/app/features/project/wiki/components/compare-section/compare-section.component.ts

@@ -10,7 +10,6 @@ import { FormsModule } from '@angular/forms';
 import { WikiVersion } from '../../models';
 
 import * as Diff from 'diff';
-import TurndownService from 'turndown';
 
 @Component({
   selector: 'osf-compare-section',
@@ -39,10 +38,7 @@ export class CompareSectionComponent {
   ]);
 
   content = computed(() => {
-    const changes = Diff.diffWords(
-      this.convertHtmlToMarkdown(this.versionContent()),
-      this.convertHtmlToMarkdown(this.previewContent())
-    );
+    const changes = Diff.diffWords(this.versionContent(), this.previewContent());
     return changes
       .map((change) => {
         if (change.added) {
@@ -61,18 +57,6 @@ export class CompareSectionComponent {
       this.selectVersion.emit(this.selectedVersion);
     });
   }
-  convertHtmlToMarkdown(html: string): string {
-    const turndownService = new TurndownService({
-      headingStyle: 'atx',
-      emDelimiter: '*',
-      strongDelimiter: '**',
-      hr: '---',
-      linkStyle: 'inlined',
-      bulletListMarker: '-',
-      codeBlockStyle: 'indented',
-    });
-    return turndownService.turndown(html);
-  }
   onVersionChange(versionId: string): void {
     this.selectedVersion = versionId;
     this.selectVersion.emit(versionId);

src/app/features/project/wiki/components/edit-section/edit-section.component.html

@@ -22,7 +22,7 @@ <h2 class="mr-2">{{ 'project.wiki.edit' | translate }}</h2>
       [(ngModel)]="content"
       [options]="options"
       (onEditorLoaded)="onEditorLoaded($event)"
-      (onPreviewDomChanged)="onPreviewDomChanged($event)"
+      (onPreviewDomChanged)="onPreviewDomChanged()"
       height="100%"
     >
       <slot custom-btns>
@@ -32,10 +32,19 @@ <h2 class="mr-2">{{ 'project.wiki.edit' | translate }}</h2>
         <button class="btn btn-sm btn-default" title="Redo" (click)="redo()">
           <i class="fas fa-rotate-right"></i>
         </button>
-        <div class="btn-group">
-          <button class="btn btn-sm btn-default" title="Horizontal rule <hr>" (click)="doHorizontalRule()">
-            <i class="fas fa-grip-lines"></i>
-          </button>
+        <button class="btn btn-sm btn-default" title="Horizontal rule <hr>" (click)="doHorizontalRule()">
+          <i class="fas fa-grip-lines"></i>
+        </button>
+        <div class="btn btn-sm btn-default flex align-items-center">
+          <p-checkbox
+            inputId="autoComplete"
+            [value]="autoCompleteEnabled"
+            size="small"
+            variant="outlined"
+            binary
+            (onChange)="toggleAutocomplete()"
+          />
+          <label for="autoComplete" class="ml-2 mb-0"> Autocomplete </label>
         </div>
         <button class="btn btn-sm btn-default" title="Wiki syntax help" (click)="openSyntaxHelpDialog()">
           <i class="fas fa-question"></i>

src/app/features/project/wiki/components/edit-section/edit-section.component.ts

@@ -2,28 +2,31 @@ import { LMarkdownEditorModule, MdEditorOption } from 'ngx-markdown-editor';
 import { TranslatePipe, TranslateService } from '@ngx-translate/core';
 
 import { Button } from 'primeng/button';
+import { Checkbox } from 'primeng/checkbox';
 import { DialogService } from 'primeng/dynamicdialog';
 import { PanelModule } from 'primeng/panel';
 
-import { ChangeDetectionStrategy, Component, inject, input, OnInit, output } from '@angular/core';
+import { ChangeDetectionStrategy, Component, effect, inject, input, OnInit, output } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 
+import 'ace-builds/src-noconflict/ext-language_tools';
+
 import { WikiSyntaxHelpDialogComponent } from '../wiki-syntax-help-dialog/wiki-syntax-help-dialog.component';
 
 @Component({
   selector: 'osf-edit-section',
-  imports: [PanelModule, Button, TranslatePipe, FormsModule, LMarkdownEditorModule],
+  imports: [PanelModule, Button, TranslatePipe, FormsModule, LMarkdownEditorModule, Checkbox],
   templateUrl: './edit-section.component.html',
   styleUrl: './edit-section.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
   providers: [DialogService],
 })
 export class EditSectionComponent implements OnInit {
   readonly currentContent = input.required<string>();
+  readonly versionContent = input.required<string>();
   readonly isSaving = input<boolean>(false);
   readonly contentChange = output<string>();
   readonly saveContent = output<string>();
-  private htmlContent = '';
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   private editorInstance: any;
   content = '';
@@ -41,6 +44,18 @@ export class EditSectionComponent implements OnInit {
     hideIcons: [''],
   };
 
+  autoCompleteEnabled = false;
+
+  constructor() {
+    effect(() => {
+      const versionContent = this.versionContent();
+      if (!this.initialContent) {
+        this.content = versionContent;
+        this.initialContent = versionContent;
+      }
+    });
+  }
+
   ngOnInit(): void {
     this.content = this.currentContent();
     this.initialContent = this.currentContent();
@@ -50,15 +65,20 @@ export class EditSectionComponent implements OnInit {
   onEditorLoaded(editor: any) {
     this.editorInstance = editor;
     editor.setShowPrintMargin(false);
+    const langTools = ace.require('ace/ext/language_tools');
+    editor.setOptions({
+      enableBasicAutocompletion: this.autoCompleteEnabled,
+      enableLiveAutocompletion: this.autoCompleteEnabled,
+      enableSnippets: [langTools.snippetCompleter],
+    });
   }
 
-  onPreviewDomChanged(event: HTMLElement) {
-    this.htmlContent = event.innerHTML;
-    this.contentChange.emit(event.innerHTML);
+  onPreviewDomChanged() {
+    this.contentChange.emit(this.editorInstance?.getValue());
   }
 
   save() {
-    this.saveContent.emit(this.htmlContent);
+    this.saveContent.emit(this.editorInstance?.getValue());
   }
 
   revert() {
@@ -85,4 +105,14 @@ export class EditSectionComponent implements OnInit {
       modal: true,
     });
   }
+
+  toggleAutocomplete() {
+    if (this.editorInstance) {
+      this.autoCompleteEnabled = !this.autoCompleteEnabled;
+      this.editorInstance.setOptions({
+        enableBasicAutocompletion: this.autoCompleteEnabled,
+        enableLiveAutocompletion: this.autoCompleteEnabled,
+      });
+    }
+  }
 }

src/app/features/project/wiki/components/view-section/view-section.component.html

@@ -22,7 +22,7 @@ <h2 class="mr-2">{{ 'project.wiki.view' | translate }}</h2>
     <p-panel class="view-panel" showHeader="false">
       <div class="editor-view-mode mt-3">
         @if (content()) {
-          <div class="md-editor-container" [innerHTML]="content() | safeHtml"></div>
+          <osf-markdown [markdownText]="content()"></osf-markdown>
         } @else {
           <p class="font-italic">{{ 'project.wiki.version.noContent' | translate }}</p>
         }

src/app/features/project/wiki/components/view-section/view-section.component.ts

@@ -1,18 +1,19 @@
 import { TranslatePipe } from '@ngx-translate/core';
 
-import { SafeHtmlPipe } from 'primeng/menu';
 import { PanelModule } from 'primeng/panel';
 import { Select } from 'primeng/select';
 import { Skeleton } from 'primeng/skeleton';
 
 import { ChangeDetectionStrategy, Component, computed, effect, input, output, signal } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 
+import { MarkdownComponent } from '@osf/shared/components';
+
 import { WikiVersion } from '../../models';
 
 @Component({
   selector: 'osf-view-section',
-  imports: [PanelModule, Select, FormsModule, TranslatePipe, SafeHtmlPipe, Skeleton],
+  imports: [PanelModule, Select, FormsModule, TranslatePipe, Skeleton, MarkdownComponent],
   templateUrl: './view-section.component.html',
   styleUrl: './view-section.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,

src/app/features/project/wiki/services/wiki.service.ts

@@ -67,8 +67,7 @@ export class WikiService {
             return of('');
           }
           return this.#http.get(downloadLink, { responseType: 'text' });
-        }),
-        map((content) => (content ? content.replace(/\n/g, '<br>') : ''))
+        })
       );
   }
 

src/app/features/project/wiki/wiki.component.html

@@ -40,6 +40,7 @@
   @if (wikiModes().edit) {
     <osf-edit-section
       [currentContent]="previewContent()"
+      [versionContent]="versionContent()"
       (contentChange)="updateWikiPreviewContent($event)"
       [isSaving]="isWikiVersionSubmitting()"
       (saveContent)="onSaveContent($event)"

src/app/features/project/wiki/wiki.component.ts

@@ -93,7 +93,6 @@ export class WikiComponent {
   protected wikiIdFromQueryParams = this.route.snapshot.queryParams['wiki'];
 
   constructor() {
-    this.actions.getWikiContent(this.projectId());
     this.actions
       .getWikiList(this.projectId())
       .pipe(

src/app/shared/components/index.ts

@@ -11,6 +11,7 @@ export { FullScreenLoaderComponent } from './full-screen-loader/full-screen-load
 export { IconComponent } from './icon/icon.component';
 export { LineChartComponent } from './line-chart/line-chart.component';
 export { LoadingSpinnerComponent } from './loading-spinner/loading-spinner.component';
+export { MarkdownComponent } from './markdown/markdown.component';
 export { MyProjectsTableComponent } from './my-projects-table/my-projects-table.component';
 export { PasswordInputHintComponent } from './password-input-hint/password-input-hint.component';
 export { PieChartComponent } from './pie-chart/pie-chart.component';

src/app/shared/components/markdown/markdown.component.html

@@ -0,0 +1 @@
+<div class="md-editor-container" [innerHTML]="renderedHtml()"></div>

src/app/shared/components/markdown/markdown.component.spec.ts

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

src/app/shared/components/markdown/markdown.component.ts

@@ -0,0 +1,36 @@
+import { ChangeDetectionStrategy, Component, computed, inject, input, Signal } from '@angular/core';
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+
+import MarkdownIt from 'markdown-it';
+import markdownItVideo from 'markdown-it-video';
+
+@Component({
+  selector: 'osf-markdown',
+  imports: [],
+  templateUrl: './markdown.component.html',
+  styleUrl: './markdown.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MarkdownComponent {
+  markdownText = input<string>('');
+
+  private md: MarkdownIt;
+  private sanitizer = inject(DomSanitizer);
+
+  renderedHtml: Signal<SafeHtml> = computed(() => {
+    const result = this.md.render(this.markdownText());
+    return this.sanitizer.bypassSecurityTrustHtml(result);
+  });
+
+  constructor() {
+    this.md = new MarkdownIt({
+      html: true,
+      linkify: true,
+      typographer: true,
+      breaks: true,
+    }).use(markdownItVideo, {
+      youtube: { width: 560, height: 315 },
+      vimeo: { width: 560, height: 315 },
+    });
+  }
+}