feat(docs): demo for Covalent Text/Markdown Editor (#804)

* feat(docs): Covalent Text/Markdown Editor Demo Added demo for Covalent Text/Markdown Editor into Covalent Docs * updating markdown demo example text * updating markdown demo example text * docs(text-editor): responsive side-by-side demo * docs(text-editor): update icon, text & color
Teradata · Aug 9, 2017 · 3127d76 · 3127d76
1 parent 1a7c71b
commit 3127d76
Show file tree

Hide file tree

Showing 9 changed files with 105 additions and 2 deletions.
diff --git a/package.json b/package.json
@@ -68,6 +68,7 @@
     "@angular/platform-server": "^4.2.0",
     "@angular/router": "^4.2.0",
     "@covalent/code-editor": "^1.0.0-alpha.6-7",
+    "@covalent/text-editor": "^1.0.0-alpha.1",
     "@ngx-translate/core": "7.0.0",
     "@ngx-translate/http-loader": "0.1.0",
     "@swimlane/ngx-charts": "5.3.1",

diff --git a/src/app/components/components/components.component.ts b/src/app/components/components/components.component.ts
@@ -111,7 +111,7 @@ export class ComponentsComponent implements AfterViewInit {
     description: 'Parse markdown code',
     icon: 'chrome_reader_mode',
     route: 'markdown',
-    title: 'Markdown',
+    title: 'Markdown Parser',
   }, {
     description: 'Build forms from a JS object',
     icon: 'format_align_center',
@@ -122,6 +122,11 @@ export class ComponentsComponent implements AfterViewInit {
     icon: 'featured_play_list',
     route: 'code-editor',
     title: 'Code Editor',
+  }, {
+    description: 'Text and Markdown editor component',
+    icon: 'keyboard',
+    route: 'text-editor',
+    title: 'Markdown Text Editor',
   }, {
     description: 'Http wrappers and helpers',
     icon: 'http',

diff --git a/src/app/components/components/components.module.ts b/src/app/components/components/components.module.ts
@@ -26,6 +26,7 @@ import { PagingDemoComponent } from './paging/paging.component';
 import { SearchDemoComponent } from './search/search.component';
 import { DynamicFormsDemoComponent } from './dynamic-forms/dynamic-forms.component';
 import { CodeEditorDemoComponent } from './code-editor/code-editor.component';
+import { TextEditorDemoComponent } from './text-editor/text-editor.component';
 import { NotificationsDemoComponent } from './notifications/notifications.component';
 import { NgxChartsDemoComponent } from './ngx-charts/ngx-charts.component';
 import { NgxTranslateDemoComponent } from './ngx-translate/ngx-translate.component';
@@ -46,6 +47,7 @@ import { CovalentHighlightModule } from '../../../platform/highlight';
 import { CovalentMarkdownModule } from '../../../platform/markdown';
 import { CovalentDynamicFormsModule } from '../../../platform/dynamic-forms';
 import { CovalentCodeEditorModule } from '../../../../node_modules/@covalent/code-editor';
+import { CovalentTextEditorModule } from '../../../../node_modules/@covalent/text-editor';
 
 import { DocumentationToolsModule } from '../../documentation-tools';
 
@@ -75,6 +77,7 @@ import { ToolbarModule } from '../../components/toolbar/toolbar.module';
     SearchDemoComponent,
     DynamicFormsDemoComponent,
     CodeEditorDemoComponent,
+    TextEditorDemoComponent,
     NotificationsDemoComponent,
     // External Dependencies
     NgxChartsDemoComponent,
@@ -121,6 +124,7 @@ import { ToolbarModule } from '../../components/toolbar/toolbar.module';
     CovalentDynamicFormsModule,
     CovalentMessageModule,
     CovalentCodeEditorModule,
+    CovalentTextEditorModule,
     DocumentationToolsModule,
     NgxChartsModule,
     TranslateModule,

diff --git a/src/app/components/components/components.routes.ts b/src/app/components/components/components.routes.ts
@@ -22,6 +22,7 @@ import { PagingDemoComponent } from './paging/paging.component';
 import { SearchDemoComponent } from './search/search.component';
 import { DynamicFormsDemoComponent } from './dynamic-forms/dynamic-forms.component';
 import { CodeEditorDemoComponent } from './code-editor/code-editor.component';
+import { TextEditorDemoComponent } from './text-editor/text-editor.component';
 import { NotificationsDemoComponent } from './notifications/notifications.component';
 import { NgxChartsDemoComponent } from './ngx-charts/ngx-charts.component';
 import { NgxTranslateDemoComponent } from './ngx-translate/ngx-translate.component';
@@ -93,6 +94,9 @@ const routes: Routes = [{
     }, {
       component: CodeEditorDemoComponent,
       path: 'code-editor',
+    }, {
+      component: TextEditorDemoComponent,
+      path: 'text-editor',
     }, {
       component: NgxChartsDemoComponent,
       path: 'ngx-charts',

diff --git a/src/app/components/components/overview/overview.component.ts b/src/app/components/components/overview/overview.component.ts
@@ -104,7 +104,7 @@ export class ComponentsOverviewComponent {
       color: 'orange-A700',
       icon: 'chrome_reader_mode',
       route: 'markdown',
-      title: 'Markdown',
+      title: 'Markdown Parser',
     }, {
       color: 'green-A700',
       icon: 'format_align_center',
@@ -115,6 +115,11 @@ export class ComponentsOverviewComponent {
       icon: 'featured_play_list',
       route: 'code-editor',
       title: 'Code Editor',
+    }, {
+      color: 'cyan-A700',
+      icon: 'keyboard',
+      route: 'text-editor',
+      title: 'Markdown Text Editor',
     }, {
       color: 'indigo-A700',
       icon: 'http',

diff --git a/src/app/components/components/text-editor/text-editor.component.html b/src/app/components/components/text-editor/text-editor.component.html
@@ -0,0 +1,39 @@
+<md-card>
+  <md-card-title>Markdown Text Editor</md-card-title>
+  <md-card-subtitle>Simple markdown text editor component</md-card-subtitle>
+  <md-divider></md-divider>
+  <md-card-content>
+    <p>With this component you can utilize SimpleMDE as an Angular Component.</p>
+  </md-card-content>
+  <md-divider></md-divider>
+  <md-card-actions>
+    <a md-button color="accent" href="https://github.com/Teradata/covalent-text-editor" target="_blank" class="text-upper">Github Repo</a>
+    <a md-button color="accent" href="https://www.npmjs.com/package/@covalent/text-editor" target="_blank" class="text-upper">npm Module</a>
+  </md-card-actions>
+</md-card>
+<md-card>
+  <md-card-title>Demo</md-card-title>
+  <md-card-subtitle>Edit the markdown in the left editor for a real-time preview</md-card-subtitle>
+  <md-divider></md-divider>
+  <md-toolbar hide show-gt-md>
+    <div layout="row" flex>
+      <span flex="55">Editor</span>
+      <span flex="45">Preview</span>
+    </div>
+  </md-toolbar>
+  <md-divider hide show-gt-md></md-divider>
+  <div layout-gt-md="row" class="bgc-grey-50" tdMediaToggle="gt-md" [mediaStyles]="{height: '650px'}">
+    <div flex-gt-md="55" layout-gt-md="column" class="pad-sm">
+      <td-text-editor flex-gt-md [(ngModel)]="editorVal"></td-text-editor>
+    </div>
+    <div flex-gt-md="45" layout-gt-md="column" class="md-content pad-sm">
+      <td-markdown flex-gt-md [content]="editorVal"></td-markdown>
+    </div>
+  </div>
+</md-card>
+
+<td-readme-loader resourceUrl="https://raw.githubusercontent.com/Teradata/covalent-text-editor/master/docs/API.md">
+</td-readme-loader>
+
+<td-readme-loader resourceUrl="https://raw.githubusercontent.com/Teradata/covalent-text-editor/master/docs/SETUP.md">
+</td-readme-loader>
diff --git a/src/app/components/components/text-editor/text-editor.component.scss b/src/app/components/components/text-editor/text-editor.component.scss
@@ -0,0 +1,3 @@
+.editor {
+    height: 200px;
+}
diff --git a/src/app/components/components/text-editor/text-editor.component.ts b/src/app/components/components/text-editor/text-editor.component.ts
@@ -0,0 +1,37 @@
+import { Component, HostBinding, ViewChild } from '@angular/core';
+import { slideInDownAnimation } from '../../../app.animations';
+import { TdTextEditorComponent } from '@covalent/text-editor';
+
+@Component({
+  selector: 'text-editor-demo',
+  styleUrls: [ './text-editor.component.scss' ],
+  templateUrl: './text-editor.component.html',
+  animations: [slideInDownAnimation],
+})
+export class TextEditorDemoComponent {
+
+  @ViewChild('editor') private _tdEditor: TdTextEditorComponent;
+  @HostBinding('@routeAnimation') routeAnimation: boolean = true;
+  @HostBinding('class.td-route-animation') classAnimation: boolean = true;
+
+  editorVal: string = `# Intro
+Go ahead, play around with the editor! Be sure to check out **bold** and *italic* styling, or even [links](https://google.com).
+You can type the Markdown syntax, use the toolbar, or use shortcuts like 'cmd-b' or 'ctrl-b'.
+
+## Lists
+Unordered lists can be started using the toolbar or by typing '* ', '- ', or '+ '. Ordered lists can be started by typing '1. '.
+
+#### Unordered
+* Lists are a piece of cake
+* They even auto continue as you type
+* A double enter will end them
+* Tabs and shift-tabs work too
+
+#### Ordered
+1. Numbered lists...
+2. ...work too!
+
+## What about images?
+![Yes](https://i.imgur.com/sZlktY7.png)
+`;
+}
diff --git a/src/app/components/toolbar/toolbar.component.ts b/src/app/components/toolbar/toolbar.component.ts
@@ -36,6 +36,11 @@ export class ToolbarComponent {
       icon: 'featured_play_list',
       route: '/components/code-editor',
       title: 'New component',
+    }, {
+      description: 'introducing covalent/text-editor',
+      icon: 'vertical_align_bottom',
+      route: '/components/text-editor',
+      title: 'New component',
     },
   ];