Minor style fix.

src/Squidex/app/features/schemas/pages/schema/types/json-ui.component.html

@@ -1,3 +1,13 @@
 <div [formGroup]="editForm">
-    <span>Nothing to setup</span>    
+    <div class="form-group row">
+        <label class="col col-3 col-form-label" for="{{field.fieldId}}_editorUrl">Editor Url</label>
+
+        <div class="col col-6">
+            <input type="text" class="form-control" id="{{field.fieldId}}_editorUrl" formControlName="editorUrl" />
+
+            <small class="form-text text-muted">
+                Url to your plugin if you use a custom editor.
+            </small>
+        </div>
+    </div>
 <div>

src/Squidex/app/features/schemas/pages/schema/types/json-ui.component.scss

@@ -1,2 +1,6 @@
 @import '_vars';
 @import '_mixins';
+
+.form-group {
+    margin: 0;
+}

src/Squidex/app/framework/angular/ignore-scrollbar.directive.ts

@@ -30,7 +30,7 @@ export class IgnoreScrollbarDirective implements OnDestroy, OnInit, AfterViewIni
 
     public ngOnInit() {
         if (!this.parent) {
-            this.parent = this.element.nativeElement.parentElement;
+            this.parent = this.renderer.parentNode(this.element.nativeElement);
         }
 
         this.resizeListener =

src/Squidex/app/framework/angular/image-source.directive.ts

@@ -43,7 +43,7 @@ export class ImageSourceDirective implements OnChanges, OnDestroy, OnInit, After
 
     public ngOnInit() {
         if (!this.parent) {
-            this.parent = this.element.nativeElement.parentElement;
+            this.parent = this.renderer.parentNode(this.element.nativeElement);
         }
 
         this.parentResizeListener =

src/Squidex/app/framework/angular/modals/onboarding-tooltip.component.ts

@@ -97,7 +97,7 @@ export class OnboardingTooltipComponent implements OnDestroy, OnInit {
         } if (this.for === underCursor) {
             return true;
         } else {
-            return this.isSameOrParent(underCursor.parentElement);
+            return this.isSameOrParent(this.renderer.parentNode(underCursor));
         }
     }
 

src/Squidex/app/framework/angular/scroll-active.directive.ts

@@ -38,14 +38,12 @@ export class ScrollActiveDirective implements AfterViewInit, OnChanges {
     }
 
     private scrollInView(parent: HTMLElement, target: HTMLElement) {
-        if (!parent.getBoundingClientRect || !target.getBoundingClientRect || !document.body) {
-            return;
-        }
-
         const parentRect = parent.getBoundingClientRect();
         const targetRect = target.getBoundingClientRect();
 
-        const offset = (targetRect.top + document.body.scrollTop) - (parentRect.top + document.body.scrollTop);
+        const body = document.body;
+
+        const offset = (targetRect.top + body.scrollTop) - (parentRect.top + body.scrollTop);
 
         const scroll = parent.scrollTop;
 

src/Squidex/app/framework/services/resource-loader.service.ts

@@ -5,11 +5,16 @@
  * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
  */
 
-import { Injectable } from '@angular/core';
+import { Injectable, Renderer2, RendererFactory2 } from '@angular/core';
 
 @Injectable()
 export class ResourceLoaderService {
-    private cache: { [path: string]: Promise<any> } = {};
+    private readonly cache: { [path: string]: Promise<any> } = {};
+    private readonly renderer: Renderer2;
+
+    constructor(rendererFactory: RendererFactory2) {
+        this.renderer = rendererFactory.createRenderer(null, null);
+    }
 
     public loadStyle(url: string): Promise<any> {
         const key = url.toUpperCase();
@@ -18,18 +23,13 @@ export class ResourceLoaderService {
 
         if (!result) {
             result = new Promise((resolve, reject) => {
-                const style = document.createElement('link');
+                const style = this.renderer.createElement('link');
-                style.rel  = 'stylesheet';
-                style.href = url;
-                style.type = 'text/css';
-
-                style.onload = () => {
-                    resolve();
-                };
-
-                const head = document.getElementsByTagName('head')[0];
 
-                head.appendChild(style);
+                this.renderer.listen(style, 'load', () => resolve());
+                this.renderer.setProperty(style, 'rel', 'stylesheet');
+                this.renderer.setProperty(style, 'href', url);
+                this.renderer.setProperty(style, 'type', 'text/css');
+                this.renderer.appendChild(document.head, style);
             });
 
             this.cache[key] = result;
@@ -45,19 +45,12 @@ export class ResourceLoaderService {
 
         if (!result) {
             result = new Promise((resolve, reject) => {
-                const script = document.createElement('script');
+                const script = this.renderer.createElement('script');
-                script.src = url;
-                script.async = true;
 
-                script.onload = () => {
+                this.renderer.listen(script, 'load', () => resolve());
-                    resolve();
+                this.renderer.setProperty(script, 'src', url);
-                };
+                this.renderer.setProperty(script, 'async', true);
-
+                this.renderer.appendChild(document.body, script);
-                const node = document.getElementsByTagName('script')[0];
-
-                if (node.parentNode) {
-                    node.parentNode.insertBefore(script, node);
-                }
             });
 
             this.cache[key] = result;

src/Squidex/app/shared/components/markdown-editor.component.ts

@@ -5,7 +5,7 @@
  * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
  */
 
-import { AfterViewInit, Component, ElementRef, forwardRef, ViewChild } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, forwardRef, Renderer2, ViewChild } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 
 import {
@@ -48,6 +48,7 @@ export class MarkdownEditorComponent implements ControlValueAccessor, AfterViewI
     public isFullscreen = false;
 
     constructor(
+        private readonly renderer: Renderer2,
         private readonly resourceLoader: ResourceLoaderService
     ) {
         this.resourceLoader.loadStyle('https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.css');
@@ -179,11 +180,13 @@ export class MarkdownEditorComponent implements ControlValueAccessor, AfterViewI
             this.simplemde.codemirror.on('refresh', () => {
                 this.isFullscreen = this.simplemde.isFullscreenActive();
 
+                let target = this.container.nativeElement;
+
                 if (this.isFullscreen) {
-                    document.body.appendChild(this.inner.nativeElement);
+                    target = document.body;
-                } else {
-                    this.container.nativeElement.appendChild(this.inner.nativeElement);
                 }
+
+                this.renderer.appendChild(target, this.inner.nativeElement);
             });
 
             this.simplemde.codemirror.on('blur', () => {

src/Squidex/app/theme/_lists.scss

@@ -156,9 +156,6 @@
     &-edit-button {
         & {
             color: $color-theme-blue;
-            line-height: 1rem;
-            font-size: 1rem;
-            font-weight: normal;
             padding-left: 0;
             padding-right: 0;
             width: 2.2rem;