feat(component:ledge-mermaid): add support mermaid

README.md

@@ -116,7 +116,7 @@ todo: fix Angular elements bug
   - step-line。 多行带箭头 step 流程
   - table-step。 多行带箭头卡式流程图表
 - checklist。检查清单
-- <del>mermaid。使用 mermaid 可视化</del>
+- mermaid。使用 [mermaid](https://mermaid-js.github.io/mermaid/) 可视化
 - <del>webcomponents。调用 WebComponents 组件</del>
 - 工具
   - toolset。调用 Toolset 相关的组件

projects/ledge-render/src/lib/components/ledge-mermaid/ledge-mermaid.component.html

@@ -0,0 +1 @@
+<div [innerHTML]="code | tohtml"></div>

projects/ledge-render/src/lib/components/ledge-mermaid/ledge-mermaid.component.spec.ts

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

projects/ledge-render/src/lib/components/ledge-mermaid/ledge-mermaid.component.ts

@@ -0,0 +1,24 @@
+import { Component, OnInit, Input } from '@angular/core';
+import * as mermaid from 'mermaid';
+
+@Component({
+  selector: 'ledge-mermaid',
+  templateUrl: './ledge-mermaid.component.html',
+  styleUrls: ['./ledge-mermaid.component.scss'],
+})
+export class LedgeMermaidComponent implements OnInit {
+  @Input()
+  data: string;
+  code: string;
+  constructor() {}
+
+  ngOnInit(): void {
+    mermaid.default.mermaidAPI.render(
+      `mermaid-${Math.random().toString(32).slice(2)}`,
+      this.data,
+      (code) => {
+        this.code = code;
+      }
+    );
+  }
+}

projects/ledge-render/src/lib/ledge-render.component.html

@@ -194,6 +194,10 @@ <h6 *ngIf="item.depth === 6" [innerHTML]="item.text" class="ledge-heading" id="{
       <ledge-table-step [data]="item.data" [config]="item.config"></ledge-table-step>
     </div>
 
+    <div *ngSwitchCase="'mermaid'">
+      <ledge-mermaid [data]="item.data"></ledge-mermaid>
+    </div>
+
     <div *ngSwitchDefault>
       {{stringify(item)}}
     </div>

projects/ledge-render/src/lib/ledge-render.component.ts

@@ -321,6 +321,13 @@ export class LedgeRenderComponent implements OnInit, OnChanges {
           config: checklistData.config,
         });
         break;
+      case 'mermaid':
+        const mermaidData = codeBlock.text;
+        this.markdownData.push({
+          type: 'mermaid',
+          data: mermaidData,
+        });
+        break;
       default:
         this.markdownData.push(token);
         break;

projects/ledge-render/src/lib/ledge-render.module.ts

@@ -23,6 +23,8 @@ import { ComponentTodoComponent } from './components/component-todo/component-to
 import { ComponentChecklistComponent } from './components/component-checklist/component-checklist.component';
 import { LedgeStorageService } from './services/ledge-storage.service';
 import { LedgeChecklistComponent } from './components/ledge-checklist/ledge-checklist.component';
+import { LedgeMermaidComponent } from './components/ledge-mermaid/ledge-mermaid.component';
+import { TohtmlPipe } from './pipes/tohtml.pipe';
 
 const LedgeComponents = [
   LedgeRenderComponent,
@@ -42,15 +44,16 @@ const LedgeComponents = [
   LedgeTechRadarComponent,
   LedgeKanbanComponent,
   LedgeChecklistComponent,
+  LedgeMermaidComponent,
 
   ComponentTodoComponent,
-  ComponentChecklistComponent
+  ComponentChecklistComponent,
 ];
 
+const LedgePipes = [TohtmlPipe];
 
 @NgModule({
-  declarations: [
-    ...LedgeComponents],
+  declarations: [...LedgePipes, ...LedgeComponents],
   imports: [
     CommonModule,
     FormsModule,
@@ -59,10 +62,6 @@ const LedgeComponents = [
     VirtualScrollerModule,
   ],
   providers: [LedgeStorageService],
-  exports: [
-    LedgeRenderComponent,
-    ComponentChecklistComponent
-  ]
+  exports: [LedgeRenderComponent, ComponentChecklistComponent, ...LedgePipes],
 })
-export class LedgeRenderModule {
-}
+export class LedgeRenderModule {}

projects/ledge-render/src/lib/pipes/tohtml.pipe.spec.ts

@@ -0,0 +1,39 @@
+import { Component } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { LedgeRenderModule } from '../ledge-render.module';
+
+
+describe('Pipe: tohtml', () => {
+  let fixture: ComponentFixture<TestComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [LedgeRenderModule],
+      declarations: [TestComponent],
+    });
+    fixture = TestBed.createComponent(TestComponent);
+    fixture.detectChanges();
+  });
+
+  [
+    { value: '', result: `` },
+    { value: '<i>ledge</i>', result: `ledge` },
+  ].forEach((item: any) => {
+    it(`${item.value.toString()} muse be ${item.result}`, () => {
+      fixture.componentInstance.value = item.value;
+      fixture.detectChanges();
+      expect(
+        (fixture.debugElement.query(By.css('#result'))
+          .nativeElement as HTMLElement).textContent
+      ).toBe(item.result);
+    });
+  });
+});
+
+@Component({
+  template: `<div id="result" [innerHTML]="value | tohtml"></div> `,
+})
+class TestComponent {
+  value = '';
+}

projects/ledge-render/src/lib/pipes/tohtml.pipe.ts

@@ -0,0 +1,11 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+
+@Pipe({ name: 'tohtml' })
+export class TohtmlPipe implements PipeTransform {
+  constructor(private dom: DomSanitizer) {}
+
+  transform(html: string): string | SafeHtml {
+    return html ? this.dom.bypassSecurityTrustHtml(html) : '';
+  }
+}