Codemirror fixes.

src/Squidex/app/app.ts

@@ -7,15 +7,6 @@
 
 import './theme/theme.scss';
 
-// icomoon
-import './theme/icomoon/style.css';
-
-// Pikaday
-import 'pikaday/css/pikaday.css';
-
-// Dragula
-import 'dragula/dist/dragula.css';
-
 import { enableProdMode } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 

src/Squidex/app/features/api/pages/graphql/graphql-page.component.scss

@@ -18,4 +18,8 @@
             overflow: hidden;
         }
     }
+
+    .CodeMirror-linenumbers {
+        min-width: 29px;
+    }
 }

src/Squidex/app/features/api/pages/graphql/graphql-page.component.ts

@@ -5,7 +5,7 @@
  * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
  */
 
-import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core';
 import { of } from 'rxjs';
 import { catchError } from 'rxjs/operators';
 
@@ -21,7 +21,7 @@ import { AppsState, GraphQlService } from '@app/shared';
     styleUrls: ['./graphql-page.component.scss'],
     templateUrl: './graphql-page.component.html'
 })
-export class GraphQLPageComponent implements OnInit {
+export class GraphQLPageComponent implements AfterViewInit {
     @ViewChild('graphiQLContainer')
     public graphiQLContainer: ElementRef;
 
@@ -31,7 +31,7 @@ export class GraphQLPageComponent implements OnInit {
     ) {
     }
 
-    public ngOnInit() {
+    public ngAfterViewInit() {
         ReactDOM.render(
             React.createElement(GraphiQL, {
                 fetcher: (params: any) => {

src/Squidex/app/features/content/pages/content/content-page.component.html

@@ -31,7 +31,7 @@
                 <sqx-shortcut keys="ctrl+s" (trigger)="saveAndPublish()"></sqx-shortcut>
             </ng-container>
             <ng-template #notNew>
-                <div class="dropdown dropdown-options" *ngIf="content">
+                <div class="dropdown dropdown-options ml-1" *ngIf="content">
                     <button type="button" class="btn btn-outline-secondary" (click)="dropdown.toggle()" [class.active]="dropdown.isOpen | async" #optionsButton>
                         <sqx-content-status 
                             [status]="content.status"
@@ -80,11 +80,11 @@
                 </div>        
 
                 <ng-container *ngIf="content.status !== 'Archived'">
-                    <button type="button" class="btn btn-secondary" (click)="saveAsProposal()" *ngIf="content.status === 'Published'">
+                    <button type="button" class="btn btn-secondary ml-1" (click)="saveAsProposal()" *ngIf="content.status === 'Published'">
                         Save as Draft
                     </button>
                     
-                    <button type="submit" class="btn btn-primary" title="CTRL + S">
+                    <button type="submit" class="btn btn-primary ml-1" title="CTRL + S">
                         Save
                     </button>
 

src/Squidex/app/features/content/shared/content-status.component.html

@@ -1,5 +1,5 @@
 <span *ngIf="!scheduledTo">
-    <span class="content-status content-status-{{displayStatus | lowercase}}" #statusIcon>
+    <span class="content-status content-status-{{displayStatus | lowercase}} mr-1" #statusIcon>
         <i class="icon-circle"></i>
     </span>
 
@@ -7,7 +7,7 @@
 </span>
 
 <span *ngIf="scheduledTo">
-    <span class="content-status content-status-{{scheduledTo | lowercase}}" #statusIcon>
+    <span class="content-status content-status-{{scheduledTo | lowercase}} mr-1" #statusIcon>
         <i class="icon-clock"></i>
     </span>
 

src/Squidex/app/shared/components/asset.component.html

@@ -16,17 +16,17 @@
                 <div class="file-overlay-background"></div>
                 
                 <div class="file-menu">
-                    <a class="file-edit" *ngIf="!isDisabled" (click)="renameDialog.show()">
+                    <a class="file-edit ml-1" *ngIf="!isDisabled" (click)="renameDialog.show()">
                         <i class="icon-pencil"></i>
                     </a>
-                    <a class="file-download" [attr.href]="asset | sqxAssetUrl" target="_blank" (click)="$event.stopPropagation()">
+                    <a class="file-download ml-1" [attr.href]="asset | sqxAssetUrl" target="_blank" (click)="$event.stopPropagation()">
                         <i class="icon-download"></i>
                     </a>
     
-                    <a class="file-delete" (click)="deleting.emit(asset); $event.stopPropagation()" *ngIf="!isDisabled && !removeMode">
+                    <a class="file-delete ml-1" (click)="deleting.emit(asset); $event.stopPropagation()" *ngIf="!isDisabled && !removeMode">
                         <i class="icon-delete"></i>
                     </a>
-                    <a class="file-delete" (click)="removing.emit(asset); $event.stopPropagation()" *ngIf="removeMode">
+                    <a class="file-delete ml-1" (click)="removing.emit(asset); $event.stopPropagation()" *ngIf="removeMode">
                         <i class="icon-close"></i>
                     </a>
                 </div>

src/Squidex/app/theme/theme.scss

@@ -3,9 +3,18 @@
 // Bootstrap
 @import '~bootstrap/scss/bootstrap.scss';
 
+// Pikaday
+@import '~pikaday/css/pikaday.css';
+
+// Dragula
+@import '~dragula/dist/dragula.css';
+
 // Bootstrap Overrides
 @import '_bootstrap.scss';
 
+// icomoon
+@import './icomoon/style.css';
+
 @import '_common';
 @import '_panels';
 @import '_forms';

src/Squidex/package.json

@@ -28,6 +28,7 @@
     "angular2-chartjs": "0.5.1",
     "babel-polyfill": "6.26.0",
     "bootstrap": "4.1.1",
+    "codemirror": "5.38.0",
     "core-js": "2.5.7",
     "dragula": "3.7.2",
     "graphiql": "0.11.11",

src/Squidex/tsconfig.json

@@ -18,5 +18,8 @@
         "app/*"
       ]
     }
+  },
+  "angularCompilerOptions": { 
+    "preserveWhitespaces": true 
   }
 }