fix: fix element inline issue

phodal · Apr 3, 2020 · dc3115e · dc3115e
1 parent cb008a7
commit dc3115e
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 11 deletions.
diff --git a/src/app/presentation/ledge-helper/ledge-helper.component.scss b/src/app/presentation/ledge-helper/ledge-helper.component.scss
@@ -13,6 +13,7 @@
 
 .sample {
   height: 100%;
+  width: 50%;
   flex-shrink: 0;
   overflow-y: scroll;
 }
diff --git a/src/app/shared/ledge-render/ledge-render.component.html b/src/app/shared/ledge-render/ledge-render.component.html
@@ -1,4 +1,4 @@
-<cdk-virtual-scroll-viewport [itemSize]="markdownData.length" class="ledge-render">
+<cdk-virtual-scroll-viewport [itemSize]="markdownData.length" class="ledge-render" autosize>
   <div *cdkVirtualFor="let item of markdownData" class="markdown render-item">
     <div [ngSwitch]="item.type">
       <div *ngSwitchCase="'chart'">
@@ -84,7 +84,7 @@
       <div *ngSwitchCase="'list-style'">
         <div class="list-style list-style-{{item.config.type}}">
           <div *ngFor="let listItem of item.data;let index = index;" class="list-style-item item-{{index}}">
-            {{listItem.name}}
+            <div [innerHTML]="listItem.name"></div>
 
             <ng-template #recursiveList let-list>
               <div *ngFor="let item of list" class="sub-item">
@@ -124,8 +124,7 @@ <h6 *ngIf="item.depth === 6" [innerHTML]="item.text"></h6>
 
       <div *ngSwitchCase="'list'">
         <ng-template #recursiveList let-list>
-          <li *ngFor="let item of list" class="sub-item">
-            {{item.body.name}}
+          <li *ngFor="let item of list" class="sub-item" [innerHTML]="item.body.name">
             <ul *ngIf="item.body.children.children && item.body.children.children.length > 0">
               <ng-container
                 *ngTemplateOutlet="recursiveList; context:{ $implicit: item.body.children.children }"></ng-container>
@@ -143,4 +142,4 @@ <h6 *ngIf="item.depth === 6" [innerHTML]="item.text"></h6>
       </div>
     </div>
   </div>
-<cdk-virtual-scroll-viewport itemSize="50" class="example-viewport">
+</cdk-virtual-scroll-viewport>
diff --git a/src/app/shared/ledge-render/ledge-render.component.scss b/src/app/shared/ledge-render/ledge-render.component.scss
@@ -1,10 +1,12 @@
 .ledge-render  {
-  min-width: 960px;
   width: 100%;
-  margin: 4em auto 0;
-  height: calc(100% - 64px);
+  height: 100vh;
 }
 
 .render-item {
-  height: auto;
+  height: 100%;
+}
+
+.chart {
+  height: 500px;
 }
diff --git a/src/app/shared/ledge-render/ledge-render.component.ts b/src/app/shared/ledge-render/ledge-render.component.ts
@@ -113,7 +113,6 @@ export class LedgeRenderComponent implements OnInit, AfterViewInit, OnChanges {
 
         this.listQueue.pop();
         if (this.listQueue.length === 0) {
-          console.log(listBody);
           this.markdownData.push({ type: 'list', data: listBody, ordered });
         }
 
@@ -146,7 +145,10 @@ export class LedgeRenderComponent implements OnInit, AfterViewInit, OnChanges {
 
         while (this.next().type !== 'list_item_end') {
           if (!loose && this.token.type === 'text') {
-            itemBody.name += this.parseText();
+            itemBody.name += marked.inlineLexer(
+              this.parseText(),
+              this.tokens.links
+            );
           } else {
             itemBody.children = this.tok();
           }