diff --git a/.angular-cli.json b/.angular-cli.json index 3fb527e599..abcbed6c30 100644 --- a/.angular-cli.json +++ b/.angular-cli.json @@ -9,6 +9,7 @@ "outDir": "dist", "assets": [ { "glob": "**/*", "input": "../docs", "output": "./docs/" }, + { "glob": "**/*", "input": "../node_modules/@covalent/code-editor/assets/monaco", "output": "./assets/monaco/" }, "app/assets", "platform", "favicon.ico" diff --git a/package.json b/package.json index 6f33faa1a4..fdf5632d60 100644 --- a/package.json +++ b/package.json @@ -66,6 +66,7 @@ "@angular/platform-browser-dynamic": "^4.2.0", "@angular/platform-server": "^4.2.0", "@angular/router": "^4.2.0", + "@covalent/code-editor": "^1.0.0-alpha.5", "@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/code-editor/code-editor.component.html b/src/app/components/components/code-editor/code-editor.component.html new file mode 100644 index 0000000000..7c148cc76b --- /dev/null +++ b/src/app/components/components/code-editor/code-editor.component.html @@ -0,0 +1,53 @@ + + Code Editor + Multi-language code editor for Browser and Electron + + +

With this component you can utilize the Monaco Editor as an Angular Component in a Browser or Electron.

+ + + + Github Repo + npm Module + + + + Basic example + Editor running in browser
(change language, theme, right click context menu, syntax highlighting, and more) + + +
+ +
+ + + +
+ Editor Language + + SQL + JavaScript + HTML + +
+ +
+ Editor Theme + + Light + Dark + High Contrast + +
+ + + + + + + + + + + + \ No newline at end of file diff --git a/src/app/components/components/code-editor/code-editor.component.scss b/src/app/components/components/code-editor/code-editor.component.scss new file mode 100644 index 0000000000..7836b2ab95 --- /dev/null +++ b/src/app/components/components/code-editor/code-editor.component.scss @@ -0,0 +1,3 @@ +.editor { + height: 200px; +} \ No newline at end of file diff --git a/src/app/components/components/code-editor/code-editor.component.ts b/src/app/components/components/code-editor/code-editor.component.ts new file mode 100644 index 0000000000..4f0a8ff8da --- /dev/null +++ b/src/app/components/components/code-editor/code-editor.component.ts @@ -0,0 +1,39 @@ +import { Component, HostBinding, ViewChild } from '@angular/core'; +import { slideInDownAnimation } from '../../../app.animations'; +import { TdCodeEditorComponent } from '@covalent/code-editor'; + +@Component({ + selector: 'code-editor-demo', + styleUrls: [ './code-editor.component.scss' ], + templateUrl: './code-editor.component.html', + animations: [slideInDownAnimation], +}) +export class CodeEditorDemoComponent { + + @ViewChild('editor') private _tdEditor: TdCodeEditorComponent; + @HostBinding('@routeAnimation') routeAnimation: boolean = true; + @HostBinding('class.td-route-animation') classAnimation: boolean = true; + + editorTheme: string = 'hc-black'; + editorLanguage: string = 'sql'; + editorVal: string = `SELECT department_number, sampleid +FROM department +SAMPLE .25, .25, .50 +ORDER BY sampleid; + +SELECT department_number, sampleid +FROM department +SAMPLE 3, 5, 8 +ORDER BY sampleid; +`; + + // Theme + changeTheme(): void { + this._tdEditor.theme = this.editorTheme; + } + + // Language + changeLanguage(): void { + this._tdEditor.language = this.editorLanguage; + } +} diff --git a/src/app/components/components/components.component.ts b/src/app/components/components/components.component.ts index fecd248123..fad3773dbc 100644 --- a/src/app/components/components/components.component.ts +++ b/src/app/components/components/components.component.ts @@ -117,6 +117,11 @@ export class ComponentsComponent implements AfterViewInit { icon: 'format_align_center', route: 'dynamic-forms', title: 'Dynamic Forms', + }, { + description: 'Multi-languge code editor for Browser and Electron', + icon: 'featured_play_list', + route: 'code-editor', + title: 'Code 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 index 470c785334..14f56f2f93 100644 --- a/src/app/components/components/components.module.ts +++ b/src/app/components/components/components.module.ts @@ -25,6 +25,7 @@ import { DataTableDemoComponent } from './data-table/data-table.component'; 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 { NotificationsDemoComponent } from './notifications/notifications.component'; import { NgxChartsDemoComponent } from './ngx-charts/ngx-charts.component'; import { NgxTranslateDemoComponent } from './ngx-translate/ngx-translate.component'; @@ -44,6 +45,7 @@ import { CovalentCommonModule, CovalentLayoutModule, CovalentMediaModule, Covale 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 { DocumentationToolsModule } from '../../documentation-tools'; @@ -72,6 +74,7 @@ import { ToolbarModule } from '../../components/toolbar/toolbar.module'; PagingDemoComponent, SearchDemoComponent, DynamicFormsDemoComponent, + CodeEditorDemoComponent, NotificationsDemoComponent, // External Dependencies NgxChartsDemoComponent, @@ -117,6 +120,7 @@ import { ToolbarModule } from '../../components/toolbar/toolbar.module'; CovalentMarkdownModule, CovalentDynamicFormsModule, CovalentMessageModule, + CovalentCodeEditorModule, DocumentationToolsModule, NgxChartsModule, TranslateModule, diff --git a/src/app/components/components/components.routes.ts b/src/app/components/components/components.routes.ts index 32a376d135..6b78d4f10a 100644 --- a/src/app/components/components/components.routes.ts +++ b/src/app/components/components/components.routes.ts @@ -21,6 +21,7 @@ import { DataTableDemoComponent } from './data-table/data-table.component'; 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 { NotificationsDemoComponent } from './notifications/notifications.component'; import { NgxChartsDemoComponent } from './ngx-charts/ngx-charts.component'; import { NgxTranslateDemoComponent } from './ngx-translate/ngx-translate.component'; @@ -89,6 +90,9 @@ const routes: Routes = [{ }, { component: DynamicFormsDemoComponent, path: 'dynamic-forms', + }, { + component: CodeEditorDemoComponent, + path: 'code-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 index ff796eec12..07af6860a0 100644 --- a/src/app/components/components/overview/overview.component.ts +++ b/src/app/components/components/overview/overview.component.ts @@ -110,6 +110,11 @@ export class ComponentsOverviewComponent { icon: 'format_align_center', route: 'dynamic-forms', title: 'Dynamic Forms', + }, { + color: 'purple-A700', + icon: 'featured_play_list', + route: 'code-editor', + title: 'Code Editor', }, { color: 'indigo-A700', icon: 'http', diff --git a/tsconfig.json b/tsconfig.json index c524c5a415..ef146eb4b8 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -16,7 +16,11 @@ "./node_modules/@types" ], "paths": { - "@covalent/*": ["./platform/*"] + "@covalent/core": ["./platform/core"], + "@covalent/dynamic-forms": ["./platform/dynamic-forms"], + "@covalent/highlight": ["./platform/highlight"], + "@covalent/http": ["./platform/http"], + "@covalent/markdown": ["./platform/markdown"] }, "noUnusedParameters": false, "noUnusedLocals": false,