fix: fix scrollbar for editor && fixed #45

phodal · Apr 5, 2020 · 0b0896d · 0b0896d
1 parent 104470c
commit 0b0896d
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 23 deletions.
diff --git a/src/app/presentation/ledge-helper/ledge-helper.component.html b/src/app/presentation/ledge-helper/ledge-helper.component.html
@@ -1,5 +1,6 @@
 <div class="helper">
- <textarea class="source" cols="25" [ngModel]="content" (ngModelChange)="changeContent($event)">
- </textarea>
+ <div class="source">
+ <textarea matInput cols="25" [ngModel]="content" (ngModelChange)="changeContent($event)"></textarea>
+ </div>
  <ledge-render class="sample" [content]="content"></ledge-render>
 </div>
diff --git a/src/app/presentation/ledge-helper/ledge-helper.component.scss b/src/app/presentation/ledge-helper/ledge-helper.component.scss
@@ -3,12 +3,19 @@
  flex-grow: 1;
 
  height: calc(100vh - 68px);
- overflow-y: scroll;
+ overflow-y: hidden;
  padding: 0 0.2em;
 }
 
 .source {
  flex: 1;
+
+ textarea {
+ font-size: 14px;
+ margin-left: 1em;
+ width: 100%;
+ height: 100%;
+ }
 }
 
 .sample {

diff --git a/src/app/presentation/ledge-helper/ledge-helper.component.ts b/src/app/presentation/ledge-helper/ledge-helper.component.ts
@@ -9,26 +9,6 @@ export class LedgeHelperComponent implements OnInit {
  content = `
 # Ledge 语法帮助
 
- - list
- - item
-
-> spliqt
-
- + a
- + a
- + a
- + b
-
-这是一个正常无比的段落。
-
-> blockquote
-
-## [Link in Heading](https://devops.phodal.com/design)
-
-<a href="https://www.phodal.com/">phodal.com</a>
-
-----
-
 \`\`\`list-style
  - 开源工具采用
  - 商业采购
@@ -268,6 +248,28 @@ console.log('hello, world');
 
 config: {"type": "bar", "multiset": true}
 \`\`\`
+
+
+ - list
+ - item
+
+> spliqt
+
+ + a
+ + a
+ + a
+ + b
+
+这是一个正常无比的段落。
+
+> blockquote
+
+## [Link in Heading](https://devops.phodal.com/design)
+
+<a href="https://www.phodal.com/">phodal.com</a>
+
+----
+
 `;
 
  constructor() {}

diff --git a/src/app/shared/custom-material.module.ts b/src/app/shared/custom-material.module.ts
@@ -12,6 +12,7 @@ import {
 } from '@angular/material/dialog';
 import { ScrollingModule } from '@angular/cdk/scrolling';
 import { MatCardModule } from '@angular/material/card';
+import { MatInputModule } from '@angular/material/input';
 
 const modules = [
  MatToolbarModule,
@@ -23,6 +24,7 @@ const modules = [
  MatIconModule,
  MatDialogModule,
  MatCardModule,
+ MatInputModule,
 
  ScrollingModule,
 ];