Fix #27

instance-oom · Feb 18, 2019 · d4a4a63 · d4a4a63
1 parent 6d46e17
commit d4a4a63
Show file tree

Hide file tree

Showing 14 changed files with 307 additions and 199 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,7 @@
+## 1.2.0
+
+- Fix [#27](https://github.com/lon-yang/ngx-markdown-editor/issues/27), Support resizeable for component
+
 ## 1.1.11
 
 - Fix [#25](https://github.com/lon-yang/ngx-markdown-editor/issues/25), Support config markedjs

diff --git a/README.md b/README.md
@@ -69,6 +69,7 @@ export class AppModule { }
     hideIcons?: Array<string>  // ['Bold', 'Italic', 'Heading', 'Refrence', 'Link', 'Image', 'Ul', 'Ol', 'Code', 'TogglePreview', 'FullScreen']. Default is empty
     scrollPastEnd?: number     // The option for ace editor. Default is 0
     enablePreviewContentClick?: boolean  // Allow user fire the click event on the preview panel, like href etc. Default is false
+    resizable?: boolean           // Allow resize the editor
     markedjsOpt?: MarkedjsOption  // The markedjs option, see https://marked.js.org/#/USING_ADVANCED.md#options
   }
   ```

diff --git a/demo/src/app/app.component.html b/demo/src/app/app.component.html
@@ -8,6 +8,10 @@
     <button class="btn btn-default" (click)="togglePreviewClick()">
       {{ options?.enablePreviewContentClick ? 'Disable' : 'Enable' }} PreviewContentClick
     </button>
+    &nbsp;&nbsp;
+    <button class="btn btn-default" (click)="toggleResizeAble()">
+      {{ options?.resizable ? 'Disable' : 'Enable' }} Resizeable
+    </button>
   </div>
   <div class="well well-sm">
     <label class="control-label">NgModel:</label>

diff --git a/demo/src/app/app.component.ts b/demo/src/app/app.component.ts
@@ -9,7 +9,8 @@ import { UploadResult, MdEditorOption } from './../../../src/public_api';
 export class AppComponent {
 
   public options: MdEditorOption = {
-    enablePreviewContentClick: false
+    enablePreviewContentClick: false,
+    resizable: true
   };
   public content: string;
   public mode: string = 'editor';
@@ -47,6 +48,11 @@ export class AppComponent {
     this.options = Object.assign({}, this.options);
   }
 
+  toggleResizeAble() {
+    this.options.resizable = !this.options.resizable;
+    this.options = Object.assign({}, this.options);
+  }
+
   doUpload(files: Array<File>): Promise<Array<UploadResult>> {
     return new Promise((resolve, reject) => {
       setTimeout(() => {

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ngx-markdown-editor",
-  "version": "1.1.11",
+  "version": "1.2.0",
   "description": "Angular markdown editor based on ace editor",
   "main": "index.js",
   "scripts": {

diff --git a/src/lib/md-editor.component.ts b/src/lib/md-editor.component.ts
@@ -9,7 +9,7 @@ declare let hljs: any;
 
 @Component({
   selector: 'md-editor',
-  styleUrls: ['./md-editor.css'],
+  styleUrls: ['./md-editor.scss'],
   templateUrl: './md-editor.html',
   providers: [
     {
@@ -86,13 +86,15 @@ export class MarkdownEditorComponent implements ControlValueAccessor, Validator
   private _markdownValue: any;
 
   private _editor: any;
+  private _editorResizeTimer: any;
   private _renderMarkTimeout: any;
   private _markedOpt: any;
   private _defaultOption: MdEditorOption = {
     showBorder: true,
     hideIcons: [],
     scrollPastEnd: 0,
-    enablePreviewContentClick: false
+    enablePreviewContentClick: false,
+    resizable: false
   };
   private get _hasUploadFunction(): boolean {
     return this.upload && this.upload instanceof Function;
@@ -259,13 +261,17 @@ export class MarkdownEditorComponent implements ControlValueAccessor, Validator
     this.editorResize();
   }
 
+  mdEditorResize(size: any) {
+    this.editorResize();
+  }
+
   editorResize(timeOut: number = 100) {
-    if (this._editor) {
-      setTimeout(() => {
-        this._editor.resize();
-        this._editor.focus();
-      }, timeOut);
-    }
+    if (!this._editor) return
+    if (this._editorResizeTimer) clearTimeout(this._editorResizeTimer);
+    this._editorResizeTimer = setTimeout(() => {
+      this._editor.resize();
+      this._editor.focus();
+    }, timeOut);
   }
 
   onDragover(evt: DragEvent) {

diff --git a/src/lib/md-editor.css b/src/lib/md-editor.css
diff --git a/src/lib/md-editor.html b/src/lib/md-editor.html
@@ -1,71 +1,88 @@
-<div class="md-editor-container" [class.fullscreen]="isFullScreen">
-  <div class="tool-bar" *ngIf="!hideToolbar && mode != 'preview'">
-    <div class="btn-group">
-      <button class="btn btn-sm btn-default" type="button" title="Bold" (click)="insertContent('Bold')" *ngIf="!hideIcons.Bold">
-        <i class="fa fa-bold"></i>
-      </button>
-      <button class="btn btn-sm btn-default" type="button" title="Italic" (click)="insertContent('Italic')" *ngIf="!hideIcons.Italic">
-        <i class="fa fa-italic"></i>
-      </button>
-      <button class="btn btn-sm btn-default" type="button" title="Heading" (click)="insertContent('Heading')" *ngIf="!hideIcons.Heading">
-        <i class="fa fa-header"></i>
-      </button>
-      <button class="btn btn-sm btn-default" type="button" title="Refrence" (click)="insertContent('Refrence')" *ngIf="!hideIcons.Refrence">
-        <i class="fa fa-quote-left"></i>
-      </button>
-    </div>
-    <div class="btn-group">
-      <button class="btn btn-sm btn-default" type="button" title="Link" (click)="insertContent('Link')" *ngIf="!hideIcons.Link">
-        <i class="fa fa-link"></i>
-      </button>
-      <button class="btn btn-sm btn-default" type="button" title="Image" (click)="insertContent('Image')" *ngIf="!hideIcons.Image">
-        <i class="fa fa-image"></i>
-      </button>
-    </div>
-    <div class="btn-group">
-      <button class="btn btn-sm btn-default" type="button" title="Unordered List" (click)="insertContent('Ul')" *ngIf="!hideIcons.Ul">
-        <i class="fa fa-list-ul"></i>
-      </button>
-      <button class="btn btn-sm btn-default" type="button" title="Ordered List" (click)="insertContent('Ol')" *ngIf="!hideIcons.Ol">
-        <i class="fa fa-list-ol"></i>
-      </button>
-      <button class="btn btn-sm btn-default" type="button" title="Code Block" (click)="insertContent('Code')" *ngIf="!hideIcons.Code">
-        <i class="fa fa-file-code-o"></i>
-      </button>
-    </div>
-    <div class="btn-group">
-      <button class="btn btn-sm btn-default" type="button" [attr.title]="showPreviewPanel ? 'Hide Preview' : 'Show Preview'"
-        (click)="togglePreview()" *ngIf="!hideIcons.TogglePreview">
-        <i class="fa" [class.fa-eye]="!showPreviewPanel" [class.fa-eye-slash]="showPreviewPanel"></i>
-      </button>
-    </div>
-    <div class="btn-group pull-right hide-split">
-      <button class="btn btn-sm btn-default" type="button" [class.active]="isFullScreen" (click)="fullScreen()" *ngIf="!hideIcons.FullScreen">
-        <i class="fa fa-arrows-alt"></i>
-      </button>
+<div class="md-editor-container" [class.fullscreen]="isFullScreen" [class.md-editor-resizable]="options?.resizable"
+  [style.height]="height">
+  <div class="md-layout">
+    <div class="tool-bar" *ngIf="!hideToolbar && mode != 'preview'">
+      <div class="btn-group">
+        <button class="btn btn-sm btn-default" type="button" title="Bold" (click)="insertContent('Bold')"
+          *ngIf="!hideIcons.Bold">
+          <i class="fa fa-bold"></i>
+        </button>
+        <button class="btn btn-sm btn-default" type="button" title="Italic" (click)="insertContent('Italic')"
+          *ngIf="!hideIcons.Italic">
+          <i class="fa fa-italic"></i>
+        </button>
+        <button class="btn btn-sm btn-default" type="button" title="Heading" (click)="insertContent('Heading')"
+          *ngIf="!hideIcons.Heading">
+          <i class="fa fa-header"></i>
+        </button>
+        <button class="btn btn-sm btn-default" type="button" title="Refrence" (click)="insertContent('Refrence')"
+          *ngIf="!hideIcons.Refrence">
+          <i class="fa fa-quote-left"></i>
+        </button>
+      </div>
+      <div class="btn-group">
+        <button class="btn btn-sm btn-default" type="button" title="Link" (click)="insertContent('Link')"
+          *ngIf="!hideIcons.Link">
+          <i class="fa fa-link"></i>
+        </button>
+        <button class="btn btn-sm btn-default" type="button" title="Image" (click)="insertContent('Image')"
+          *ngIf="!hideIcons.Image">
+          <i class="fa fa-image"></i>
+        </button>
+      </div>
+      <div class="btn-group">
+        <button class="btn btn-sm btn-default" type="button" title="Unordered List" (click)="insertContent('Ul')"
+          *ngIf="!hideIcons.Ul">
+          <i class="fa fa-list-ul"></i>
+        </button>
+        <button class="btn btn-sm btn-default" type="button" title="Ordered List" (click)="insertContent('Ol')"
+          *ngIf="!hideIcons.Ol">
+          <i class="fa fa-list-ol"></i>
+        </button>
+        <button class="btn btn-sm btn-default" type="button" title="Code Block" (click)="insertContent('Code')"
+          *ngIf="!hideIcons.Code">
+          <i class="fa fa-file-code-o"></i>
+        </button>
+      </div>
+      <div class="btn-group">
+        <button class="btn btn-sm btn-default" type="button"
+          [attr.title]="showPreviewPanel ? 'Hide Preview' : 'Show Preview'" (click)="togglePreview()"
+          *ngIf="!hideIcons.TogglePreview">
+          <i class="fa" [class.fa-eye]="!showPreviewPanel" [class.fa-eye-slash]="showPreviewPanel"></i>
+        </button>
+      </div>
+      <div class="btn-group pull-right hide-split">
+        <button class="btn btn-sm btn-default" type="button" [class.active]="isFullScreen" (click)="fullScreen()"
+          *ngIf="!hideIcons.FullScreen">
+          <i class="fa fa-arrows-alt"></i>
+        </button>
+      </div>
     </div>
-  </div>
-  <div class="editor-container">
-    <div [class.dragover]="dragover" [style.display]="mode == 'preview' ? 'none' : null" (dragover)="onDragover($event)">
-      <div class="drag-container">
-        <div class="upload-loading">
-          <i class="fa fa-upload" *ngIf="!isUploading"></i>
-          <i class="fa fa-spinner fa-pulse fa-fw" *ngIf="isUploading"></i>
-          <div class="text">{{ isUploading ? 'Uploading' : 'Drag it here' }}</div>
+    <div class="editor-container">
+      <div [class.dragover]="dragover" [style.display]="mode == 'preview' ? 'none' : null"
+        (dragover)="onDragover($event)">
+        <div class="drag-container">
+          <div class="upload-loading">
+            <i class="fa fa-upload" *ngIf="!isUploading"></i>
+            <i class="fa fa-spinner fa-pulse fa-fw" *ngIf="isUploading"></i>
+            <div class="text">{{ isUploading ? 'Uploading' : 'Drag it here' }}</div>
+          </div>
+        </div>
+        <div class="drag-container drag-container-mask" (drop)="onDrop($event)" (dragleave)="onDragleave($event)"></div>
+        <div class="editor-panel">
+          <div class="ace-editor" #aceEditor></div>
         </div>
       </div>
-      <div class="drag-container drag-container-mask" (drop)="onDrop($event)" (dragleave)="onDragleave($event)"></div>
-      <div class="editor-panel" [style.height]="height">
-        <div class="ace-editor" #aceEditor></div>
+      <div [style.display]="showPreviewPanel ? 'block' : 'none'" (click)="previewPanelClick($event)">
+        <div class="preview-panel" [innerHtml]="previewHtml"></div>
       </div>
     </div>
-    <div [style.display]="showPreviewPanel ? 'block' : 'none'" (click)="previewPanelClick($event)">
-      <div class="preview-panel" [innerHtml]="previewHtml" [style.height]="height"></div>
-    </div>
-  </div>
-  <div *ngIf="maxlength > 0 && mode != 'preview'">
-    <div class="text-right md-footer">
-      {{ markdownValue?.length }} / {{ maxlength }}
+    <div class="md-footer" *ngIf="maxlength > 0 && mode != 'preview'">
+      <div class="text-right length-view">
+        {{ markdownValue?.length }} / {{ maxlength }}
+      </div>
+      <div class="resize-btn"></div>
     </div>
   </div>
+  <md-editor-resize-sensor *ngIf="options?.resizable" (resize)="mdEditorResize($event)"></md-editor-resize-sensor>
 </div>