diff --git a/src/Squidex/app/features/schemas/pages/schema/types/json-ui.component.html b/src/Squidex/app/features/schemas/pages/schema/types/json-ui.component.html index 9a0e7afd1..c41e111c6 100644 --- a/src/Squidex/app/features/schemas/pages/schema/types/json-ui.component.html +++ b/src/Squidex/app/features/schemas/pages/schema/types/json-ui.component.html @@ -1,3 +1,13 @@
- Nothing to setup +
+ + +
+ + + + Url to your plugin if you use a custom editor. + +
+
\ No newline at end of file diff --git a/src/Squidex/app/features/schemas/pages/schema/types/json-ui.component.scss b/src/Squidex/app/features/schemas/pages/schema/types/json-ui.component.scss index fbb752506..1f393a181 100644 --- a/src/Squidex/app/features/schemas/pages/schema/types/json-ui.component.scss +++ b/src/Squidex/app/features/schemas/pages/schema/types/json-ui.component.scss @@ -1,2 +1,6 @@ @import '_vars'; -@import '_mixins'; \ No newline at end of file +@import '_mixins'; + +.form-group { + margin: 0; +} \ No newline at end of file diff --git a/src/Squidex/app/framework/angular/ignore-scrollbar.directive.ts b/src/Squidex/app/framework/angular/ignore-scrollbar.directive.ts index 2174b14cc..384bcb25c 100644 --- a/src/Squidex/app/framework/angular/ignore-scrollbar.directive.ts +++ b/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 = diff --git a/src/Squidex/app/framework/angular/image-source.directive.ts b/src/Squidex/app/framework/angular/image-source.directive.ts index d525fc6cc..752584091 100644 --- a/src/Squidex/app/framework/angular/image-source.directive.ts +++ b/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 = diff --git a/src/Squidex/app/framework/angular/modals/onboarding-tooltip.component.ts b/src/Squidex/app/framework/angular/modals/onboarding-tooltip.component.ts index a7b0cd539..ba3347821 100644 --- a/src/Squidex/app/framework/angular/modals/onboarding-tooltip.component.ts +++ b/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)); } } diff --git a/src/Squidex/app/framework/angular/scroll-active.directive.ts b/src/Squidex/app/framework/angular/scroll-active.directive.ts index f10bbab92..56a998c8a 100644 --- a/src/Squidex/app/framework/angular/scroll-active.directive.ts +++ b/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; diff --git a/src/Squidex/app/framework/services/resource-loader.service.ts b/src/Squidex/app/framework/services/resource-loader.service.ts index c8a7fb039..601ef18e5 100644 --- a/src/Squidex/app/framework/services/resource-loader.service.ts +++ b/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 } = {}; + private readonly cache: { [path: string]: Promise } = {}; + private readonly renderer: Renderer2; + + constructor(rendererFactory: RendererFactory2) { + this.renderer = rendererFactory.createRenderer(null, null); + } public loadStyle(url: string): Promise { const key = url.toUpperCase(); @@ -18,18 +23,13 @@ export class ResourceLoaderService { if (!result) { result = new Promise((resolve, reject) => { - const style = document.createElement('link'); - style.rel = 'stylesheet'; - style.href = url; - style.type = 'text/css'; - - style.onload = () => { - resolve(); - }; + const style = this.renderer.createElement('link'); - 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'); - script.src = url; - script.async = true; - - script.onload = () => { - resolve(); - }; - - const node = document.getElementsByTagName('script')[0]; + const script = this.renderer.createElement('script'); - if (node.parentNode) { - node.parentNode.insertBefore(script, node); - } + this.renderer.listen(script, 'load', () => resolve()); + this.renderer.setProperty(script, 'src', url); + this.renderer.setProperty(script, 'async', true); + this.renderer.appendChild(document.body, script); }); this.cache[key] = result; diff --git a/src/Squidex/app/shared/components/markdown-editor.component.ts b/src/Squidex/app/shared/components/markdown-editor.component.ts index 23b829f87..548421435 100644 --- a/src/Squidex/app/shared/components/markdown-editor.component.ts +++ b/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); - } else { - this.container.nativeElement.appendChild(this.inner.nativeElement); + target = document.body; } + + this.renderer.appendChild(target, this.inner.nativeElement); }); this.simplemde.codemirror.on('blur', () => { diff --git a/src/Squidex/app/theme/_lists.scss b/src/Squidex/app/theme/_lists.scss index 9d58f63c0..ab2afbf5c 100644 --- a/src/Squidex/app/theme/_lists.scss +++ b/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;