chore: comments (#2863)

web/projects/shared/src/components/markdown.component.ts

@@ -0,0 +1,51 @@
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core'
+import { toSignal } from '@angular/core/rxjs-interop'
+import { ActivatedRoute, Data } from '@angular/router'
+import { TuiDialogContext, TuiLoader, TuiNotification } from '@taiga-ui/core'
+import { injectContext, PolymorpheusComponent } from '@taiga-ui/polymorpheus'
+import { NgDompurifyModule } from '@tinkoff/ng-dompurify'
+import { catchError, ignoreElements, of } from 'rxjs'
+import { SafeLinksDirective } from '../directives/safe-links.directive'
+import { MarkdownPipe } from '../pipes/markdown.pipe'
+import { getErrorMessage } from '../services/error.service'
+
+@Component({
+  template: `
+    @if (error()) {
+      <tui-notification appearance="negative" safeLinks>
+        {{ error() }}
+      </tui-notification>
+    }
+
+    @if (content(); as result) {
+      <div safeLinks [innerHTML]="result | markdown | dompurify"></div>
+    } @else {
+      <tui-loader textContent="Loading" [style.height.%]="100" />
+    }
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  host: { class: 'g-subpage' },
+  imports: [
+    TuiNotification,
+    TuiLoader,
+    NgDompurifyModule,
+    MarkdownPipe,
+    SafeLinksDirective,
+  ],
+})
+export class MarkdownComponent {
+  private readonly data =
+    injectContext<TuiDialogContext<void, Data>>({ optional: true })?.data ||
+    inject(ActivatedRoute).snapshot.data
+
+  readonly content = toSignal<string>(this.data['content'])
+  readonly error = toSignal(
+    this.data['content'].pipe(
+      ignoreElements(),
+      catchError(e => of(getErrorMessage(e))),
+    ),
+  )
+}
+
+export const MARKDOWN = new PolymorpheusComponent(MarkdownComponent)

web/projects/shared/src/components/markdown/markdown.component.html

@@ -1,18 +0,0 @@
-<tui-notification
-  *ngIf="error$ | async as error"
-  appearance="negative"
-  safeLinks
->
-  {{ error }}
-</tui-notification>
-
-<div
-  *ngIf="content$ | async as result; else loading"
-  safeLinks
-  class="content-padding"
-  [innerHTML]="result | markdown | dompurify"
-></div>
-
-<ng-template #loading>
-  <tui-loader [textContent]="'Loading ' + title | titlecase" />
-</ng-template>

web/projects/shared/src/components/markdown/markdown.component.module.ts

@@ -1,22 +0,0 @@
-import { CommonModule } from '@angular/common'
-import { NgModule } from '@angular/core'
-import { TuiLoader, TuiNotification } from '@taiga-ui/core'
-import { NgDompurifyModule } from '@tinkoff/ng-dompurify'
-import { SafeLinksDirective } from '../../directives/safe-links.directive'
-
-import { MarkdownPipeModule } from '../../pipes/markdown/markdown.module'
-import { MarkdownComponent } from './markdown.component'
-
-@NgModule({
-  declarations: [MarkdownComponent],
-  imports: [
-    CommonModule,
-    MarkdownPipeModule,
-    SafeLinksDirective,
-    NgDompurifyModule,
-    TuiLoader,
-    TuiNotification,
-  ],
-  exports: [MarkdownComponent],
-})
-export class MarkdownModule {}

web/projects/shared/src/components/markdown/markdown.component.scss

@@ -1,18 +0,0 @@
-.content-padding {
-  padding: 0 16px 16px 16px;
-}
-
-:host ::ng-deep img {
-  border-radius: 0 !important;
-}
-
-:host ::ng-deep h1,
-:host ::ng-deep h2,
-:host ::ng-deep h3,
-:host ::ng-deep h4,
-:host ::ng-deep h5,
-:host ::ng-deep h6,
-:host ::ng-deep hr,
-:host ::ng-deep p {
-  margin: revert;
-}

web/projects/shared/src/components/markdown/markdown.component.ts

@@ -1,49 +0,0 @@
-import { Component, Inject } from '@angular/core'
-import { TuiDialogContext } from '@taiga-ui/core'
-import {
-  POLYMORPHEUS_CONTEXT,
-  PolymorpheusComponent,
-} from '@taiga-ui/polymorpheus'
-import {
-  catchError,
-  ignoreElements,
-  share,
-  defer,
-  isObservable,
-  Observable,
-  of,
-} from 'rxjs'
-
-import { getErrorMessage } from '../../services/error.service'
-
-@Component({
-  selector: 'markdown',
-  templateUrl: './markdown.component.html',
-  styleUrls: ['./markdown.component.scss'],
-})
-export class MarkdownComponent {
-  readonly content$ = defer(() =>
-    isObservable(this.context.data.content)
-      ? this.context.data.content
-      : of(this.context.data.content),
-  ).pipe(share())
-
-  readonly error$ = this.content$.pipe(
-    ignoreElements(),
-    catchError(e => of(getErrorMessage(e))),
-  )
-
-  constructor(
-    @Inject(POLYMORPHEUS_CONTEXT)
-    private readonly context: TuiDialogContext<
-      void,
-      { content: string | Observable<string> }
-    >,
-  ) {}
-
-  get title(): string {
-    return this.context.label || ''
-  }
-}
-
-export const MARKDOWN = new PolymorpheusComponent(MarkdownComponent)

web/projects/shared/src/pipes/markdown.pipe.ts

@@ -2,6 +2,7 @@ import { Pipe, PipeTransform } from '@angular/core'
 import { marked } from 'marked'
 
 @Pipe({
+  standalone: true,
   name: 'markdown',
 })
 export class MarkdownPipe implements PipeTransform {

web/projects/shared/src/pipes/markdown/markdown.module.ts

@@ -1,8 +0,0 @@
-import { NgModule } from '@angular/core'
-import { MarkdownPipe } from './markdown.pipe'
-
-@NgModule({
-  declarations: [MarkdownPipe],
-  exports: [MarkdownPipe],
-})
-export class MarkdownPipeModule {}

web/projects/shared/src/public-api.ts

@@ -10,11 +10,10 @@ export * from './components/initializing/initializing.component'
 export * from './components/loading/loading.component'
 export * from './components/loading/loading.component'
 export * from './components/loading/loading.service'
-export * from './components/markdown/markdown.component'
-export * from './components/markdown/markdown.component.module'
 export * from './components/ticker/ticker.component'
 export * from './components/ticker/ticker.module'
 export * from './components/drive.component'
+export * from './components/markdown.component'
 export * from './components/server.component'
 
 export * from './directives/drag-scroller.directive'
@@ -22,14 +21,13 @@ export * from './directives/safe-links.directive'
 
 export * from './pipes/exver/exver.module'
 export * from './pipes/exver/exver.pipe'
-export * from './pipes/markdown/markdown.module'
-export * from './pipes/markdown/markdown.pipe'
 export * from './pipes/shared/shared.module'
 export * from './pipes/shared/empty.pipe'
 export * from './pipes/shared/includes.pipe'
 export * from './pipes/shared/trust.pipe'
 export * from './pipes/unit-conversion/unit-conversion.module'
 export * from './pipes/unit-conversion/unit-conversion.pipe'
+export * from './pipes/markdown.pipe'
 
 export * from './services/copy.service'
 export * from './services/download-html.service'