Merge pull request #120 from CenterForOpenScience/feat/222-wiki-page-compare

feat(wiki): compare view

Author: nmykhalkevch-exoft

package.json

@@ -42,12 +42,14 @@
     "@primeng/themes": "^19.0.9",
     "ace-builds": "^1.42.0",
     "chart.js": "^4.4.9",
+    "diff": "^8.0.2",
     "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": {
@@ -58,6 +60,7 @@
     "@commitlint/config-conventional": "^19.7.1",
     "@types/jasmine": "~5.1.0",
     "@types/jest": "^29.5.14",
+    "@types/turndown": "^5.0.5",
     "angular-eslint": "19.1.0",
     "angularx-qrcode": "^19.0.0",
     "eslint": "^9.20.0",

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

@@ -19,10 +19,8 @@ <h2 class="mr-2">{{ 'project.wiki.compare' | translate }}</h2>
         styleClass="select-version"
       />
     </div>
-    <p-panel showHeader="false">
-      <p class="mt-3">
-        {{ versionContent() }}
-      </p>
+    <p-panel styleClass="compare-view" showHeader="false">
+      <div lass="mt-3" [innerHTML]="content()"></div>
     </p-panel>
   </p-panel>
 }

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

@@ -9,6 +9,9 @@ import { FormsModule } from '@angular/forms';
 
 import { WikiVersion } from '../../models';
 
+import * as Diff from 'diff';
+import TurndownService from 'turndown';
+
 @Component({
   selector: 'osf-compare-section',
   imports: [PanelModule, Select, FormsModule, TranslatePipe, Skeleton],
@@ -19,28 +22,57 @@ import { WikiVersion } from '../../models';
 export class CompareSectionComponent {
   versions = input.required<WikiVersion[]>();
   versionContent = input.required<string>();
+  previewContent = input.required<string>();
   isLoading = input.required<boolean>();
   selectVersion = output<string>();
 
   selectedVersion: string | null = null;
 
   mappedVersions = computed(() => [
     ...this.versions().map((version, index) => {
-      const labelPrefix = index === 0 ? '(Current)' : `(${index})`;
+      const labelPrefix = index === 0 ? '(Current)' : `(${this.versions().length - index})`;
       return {
         label: `${labelPrefix} ${version.createdBy}: (${new Date(version.createdAt).toLocaleString()})`,
         value: version.id,
       };
     }),
   ]);
 
+  content = computed(() => {
+    const changes = Diff.diffWords(
+      this.convertHtmlToMarkdown(this.versionContent()),
+      this.convertHtmlToMarkdown(this.previewContent())
+    );
+    return changes
+      .map((change) => {
+        if (change.added) {
+          return `<span class="added">${change.value}</span>`;
+        } else if (change.removed) {
+          return `<span class="removed">${change.value}</span>`;
+        }
+        return change.value;
+      })
+      .join('');
+  });
+
   constructor() {
     effect(() => {
-      this.versions();
-      this.selectedVersion = null;
+      this.selectedVersion = this.versions()[0].id;
+      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/view-section/view-section.component.ts

@@ -38,7 +38,7 @@ export class ViewSectionComponent {
   mappedVersions = computed(() => [
     this.previewOption,
     ...this.versions().map((version, index) => {
-      const labelPrefix = index === 0 ? '(Current)' : `(${index})`;
+      const labelPrefix = index === 0 ? '(Current)' : `(${this.versions().length - index})`;
       return {
         label: `${labelPrefix} ${version.createdBy}: (${new Date(version.createdAt).toLocaleString()})`,
         value: version.id,

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

@@ -48,6 +48,7 @@
   @if (wikiModes().compare) {
     <osf-compare-section
       [versions]="wikiVersions()"
+      [previewContent]="previewContent()"
       [versionContent]="compareVersionContent()"
       [isLoading]="isWikiVersionLoading()"
       (selectVersion)="onSelectCompareVersion($event)"

src/assets/styles/components/md-editor.scss

@@ -83,3 +83,15 @@
     display: none;
   }
 }
+
+.compare-view {
+  white-space: pre-wrap;
+
+  .added {
+    background-color: var(--green-2);
+  }
+
+  .removed {
+    background-color: var(--red-2);
+  }
+}