Ng update (#1040)

* Prepare for v17

* Temp

* Fix updates.

* Fix compilation errors.

* Fix leaflet.

* Update node version.

* Fix test build.

Dockerfile

@@ -43,7 +43,7 @@ RUN dotnet tool install --tool-path /tools dotnet-counters \
 #
 # Stage 2, Build Frontend
 #
-FROM squidex/frontend-build:18.10 as frontend
+FROM squidex/frontend-build:20.9 as frontend
 
 WORKDIR /src
 

dev/frontend-build/Dockerfile

@@ -1,4 +1,4 @@
-FROM node:18.10-slim
+FROM node:20.9.0-slim
 
 ENV CHROME_BIN=/usr/bin/chromium
 

frontend/.storybook/main.js

@@ -5,18 +5,17 @@
  * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
  */
 
-const customConfig = require('./../src/config/webpack.config');
 module.exports = {
   stories: ["../src/**/*.stories.@(js|jsx|ts|tsx)"],
-  addons: ["@storybook/addon-links", "@storybook/addon-essentials", "@storybook/addon-interactions"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions"
+  ],
   framework: {
     name: "@storybook/angular",
     options: {}
   },
-  webpackFinal: async config => {
-    customConfig(config, {}, {});
-    return config;
-  },
   docs: {
     autodocs: true
   }

frontend/.storybook/tsconfig.json

@@ -9,11 +9,10 @@
   "exclude": [
     "../src/test.ts",
     "../src/**/*.spec.ts",
-    "../projects/**/*.spec.ts"
   ],
   "include": [
-    "../src/**/*",
-    "../projects/**/*"
+    "../src/**/*.d.ts",
+    "../src/**/*.stories.ts",
   ],
   "files": [
     "./typings.d.ts"

frontend/angular.json

@@ -18,7 +18,7 @@
       "prefix": "sqx",
       "architect": {
         "build": {
-          "builder": "@angular-builders/custom-webpack:browser",
+          "builder": "@angular-devkit/build-angular:browser",
           "options": {
             "outputPath": "build",
             "index": "src/index.html",
@@ -47,7 +47,42 @@
               "slugify"
             ],
             "assets": [
-              "src/app/assets"
+              "src/app/assets",
+              {
+                "glob": "**/*",
+                "input": "./node_modules/tui-code-snippet/dist/",
+                "output": "./dependencies/tui-calendar/"
+              },
+              {
+                "glob": "**/*",
+                "input": "./node_modules/tui-calendar/dist/",
+                "output": "./dependencies/tui-calendar/"
+              },
+              {
+                "glob": "vis-network.min.js",
+                "input": "./node_modules/vis-network/standalone/umd/",
+                "output": "./dependencies/vis-network/"
+              },
+              {
+                "glob": "*.min.*",
+                "input": "/node_modules/video.js/dist/",
+                "output": "./dependencies/videojs/"
+              },
+              {
+                "glob": "**/*",
+                "input": "./node_modules/leaflet-control-geocoder/dist/",
+                "output": "./dependencies/leaflet/"
+              },
+              {
+                "glob": "**/*",
+                "input": "./node_modules/leaflet/dist/",
+                "output": "./dependencies/leaflet/"
+              },
+              {
+                "glob": "**/*",
+                "input": "./node_modules/ace-builds/src-min/",
+                "output": "./dependencies/ace/"
+              }
             ],
             "styles": [
               "src/styles.scss"
@@ -57,9 +92,6 @@
                 "./src/app/theme"
               ]
             },
-            "customWebpackConfig": {
-              "path": "./src/config/webpack.config.js"
-            },
             "scripts": []
           },
           "configurations": {
@@ -96,13 +128,13 @@
           "defaultConfiguration": "production"
         },
         "serve": {
-          "builder": "@angular-builders/custom-webpack:dev-server",
+          "builder": "@angular-devkit/build-angular:dev-server",
           "configurations": {
             "production": {
-              "browserTarget": "squidex:build:production"
+              "buildTarget": "squidex:build:production"
             },
             "development": {
-              "browserTarget": "squidex:build:development"
+              "buildTarget": "squidex:build:development"
             }
           },
           "options": {
@@ -114,7 +146,7 @@
           "defaultConfiguration": "development"
         },
         "test": {
-          "builder": "@angular-builders/custom-webpack:karma",
+          "builder": "@angular-devkit/build-angular:karma",
           "options": {
             "polyfills": [
               "zone.js",

frontend/package.json

@@ -15,130 +15,120 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "16.1.8",
-    "@angular/cdk": "16.1.7",
-    "@angular/cdk-experimental": "16.1.7",
-    "@angular/common": "16.1.8",
-    "@angular/core": "16.1.8",
-    "@angular/forms": "16.1.8",
-    "@angular/localize": "16.1.8",
-    "@angular/platform-browser": "16.1.8",
-    "@angular/platform-browser-dynamic": "16.1.8",
-    "@angular/platform-server": "16.1.8",
-    "@angular/router": "16.1.8",
-    "@babel/runtime": "^7.22.6",
+    "@angular/animations": "17.0.2",
+    "@angular/cdk": "17.0.0",
+    "@angular/cdk-experimental": "17.0.0",
+    "@angular/common": "17.0.2",
+    "@angular/core": "17.0.2",
+    "@angular/forms": "17.0.2",
+    "@angular/localize": "17.0.2",
+    "@angular/platform-browser": "17.0.2",
+    "@angular/platform-browser-dynamic": "17.0.2",
+    "@angular/platform-server": "17.0.2",
+    "@angular/router": "17.0.2",
     "@egjs/hammerjs": "2.0.17",
-    "@floating-ui/dom": "^1.5.1",
+    "@floating-ui/dom": "^1.5.3",
     "@graphiql/toolkit": "^0.9.1",
     "@iharbeck/ngx-virtual-scroller": "^16.0.0",
     "@lithiumjs/angular": "^7.3.0",
     "@lithiumjs/ngx-virtual-scroll": "^0.3.0",
     "@marker.io/browser": "^0.19.0",
-    "ace-builds": "1.23.4",
+    "ace-builds": "1.31.1",
     "angular-gridster2": "16.0.0",
     "angular-mentions": "1.5.0",
-    "babel-polyfill": "6.26.0",
     "bootstrap": "5.2.3",
-    "core-js": "3.32.0",
+    "core-js": "3.33.2",
     "cropperjs": "2.0.0-alpha.1",
     "date-fns": "2.30.0",
-    "font-awesome": "4.7.0",
-    "graphiql": "3.0.5",
+    "graphiql": "3.0.9",
     "graphql": "16.8.1",
-    "graphql-ws": "^5.14.0",
+    "graphql-ws": "^5.14.2",
     "image-focus": "1.2.1",
     "keycharm": "0.4.0",
     "leaflet": "1.9.4",
     "leaflet-control-geocoder": "2.4.0",
-    "marked": "6.0.0",
+    "marked": "10.0.0",
     "mersenne-twister": "1.1.0",
     "moment": "^2.29.4",
     "mousetrap": "1.6.5",
-    "ng2-charts": "^4.1.1",
-    "ngx-color-picker": "14.0.0",
+    "ng2-charts": "^5.0.3",
+    "ngx-color-picker": "15.0.0",
     "ngx-doc-viewer": "15.0.1",
-    "ngx-ui-tour-core": "^11.0.3",
-    "oidc-client-ts": "^2.2.4",
+    "ngx-ui-tour-core": "^11.0.6",
+    "oidc-client-ts": "^2.4.0",
     "pikaday": "1.8.2",
-    "progressbar.js": "1.1.0",
+    "progressbar.js": "1.1.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "rxjs": "7.8.1",
     "simplemde": "1.11.2",
     "slugify": "1.6.6",
-    "tslib": "2.6.1",
+    "tslib": "2.6.2",
     "tui-calendar": "^1.15.3",
     "typemoq": "^2.1.0",
-    "video.js": "8.3.0",
-    "vis-data": "7.1.6",
-    "vis-network": "9.1.6",
-    "vis-util": "5.0.3",
+    "video.js": "8.6.1",
+    "vis-data": "7.1.8",
+    "vis-network": "9.1.9",
+    "vis-util": "5.0.6",
     "y-protocols": "^1.0.6",
     "y-websocket": "^1.5.0",
-    "zone.js": "0.13.1"
+    "zone.js": "0.14.2"
   },
   "devDependencies": {
-    "@angular-builders/custom-webpack": "^16.0.0",
-    "@angular-devkit/build-angular": "^16.1.7",
-    "@angular-eslint/builder": "16.2.0",
-    "@angular-eslint/eslint-plugin": "16.2.0",
-    "@angular-eslint/eslint-plugin-template": "16.2.0",
-    "@angular-eslint/schematics": "16.2.0",
-    "@angular-eslint/template-parser": "16.2.0",
-    "@angular/cli": "^16.1.7",
-    "@angular/compiler": "^16.1.8",
-    "@angular/compiler-cli": "^16.1.8",
-    "@angular/elements": "^16.1.8",
-    "@babel/core": "^7.22.9",
-    "@compodoc/compodoc": "^1.1.21",
-    "@storybook/addon-actions": "^7.2.1",
-    "@storybook/addon-essentials": "^7.2.1",
-    "@storybook/addon-interactions": "^7.2.1",
-    "@storybook/addon-links": "^7.2.1",
-    "@storybook/angular": "^7.2.1",
-    "@storybook/testing-library": "^0.2.0",
-    "@types/codemirror": "5.60.8",
-    "@types/core-js": "2.5.5",
-    "@types/jasmine": "4.3.5",
+    "@angular-devkit/build-angular": "^17.0.0",
+    "@angular-eslint/builder": "17.0.1",
+    "@angular-eslint/eslint-plugin": "17.0.1",
+    "@angular-eslint/eslint-plugin-template": "17.0.1",
+    "@angular-eslint/schematics": "17.0.1",
+    "@angular-eslint/template-parser": "17.0.1",
+    "@angular/cli": "^17.0.0",
+    "@angular/compiler": "^17.0.2",
+    "@angular/compiler-cli": "^17.0.2",
+    "@angular/elements": "^17.0.2",
+    "@compodoc/compodoc": "^1.1.22",
+    "@storybook/addon-actions": "^7.5.3",
+    "@storybook/addon-essentials": "^7.5.3",
+    "@storybook/addon-interactions": "^7.5.3",
+    "@storybook/addon-links": "^7.5.3",
+    "@storybook/angular": "^7.5.3",
+    "@storybook/testing-library": "^0.2.2",
+    "@types/codemirror": "5.60.13",
+    "@types/core-js": "2.5.8",
+    "@types/jasmine": "5.1.2",
     "@types/marked": "5.0.1",
-    "@types/mersenne-twister": "1.1.3",
-    "@types/mousetrap": "1.6.11",
-    "@types/node": "20.4.7",
-    "@types/react": "18.2.18",
-    "@types/react-dom": "18.2.7",
-    "@types/simplemde": "1.11.8",
-    "@types/tapable": "2.2.3",
-    "@types/ws": "8.5.5",
-    "@typescript-eslint/eslint-plugin": "5.62.0",
-    "@typescript-eslint/parser": "5.62.0",
+    "@types/mersenne-twister": "1.1.7",
+    "@types/mousetrap": "1.6.14",
+    "@types/node": "20.9.0",
+    "@types/react": "18.2.37",
+    "@types/react-dom": "18.2.15",
+    "@types/simplemde": "1.11.11",
+    "@types/tapable": "2.2.7",
+    "@types/ws": "8.5.9",
+    "@typescript-eslint/eslint-plugin": "^6.10.0",
+    "@typescript-eslint/parser": "^6.10.0",
     "@webcomponents/custom-elements": "^1.6.0",
-    "babel-loader": "^9.1.3",
-    "copy-webpack-plugin": "11.0.0",
-    "eslint": "^8.49.0",
+    "eslint": "^8.53.0",
     "eslint-config-airbnb-typescript": "17.1.0",
-    "eslint-plugin-deprecation": "^1.5.0",
-    "eslint-plugin-import": "2.28.0",
-    "eslint-plugin-jsx-a11y": "6.7.1",
-    "eslint-plugin-storybook": "^0.6.13",
-    "eslint-webpack-plugin": "4.0.1",
-    "jasmine-core": "~5.1.0",
+    "eslint-plugin-deprecation": "^2.0.0",
+    "eslint-plugin-import": "2.29.0",
+    "eslint-plugin-jsx-a11y": "6.8.0",
+    "eslint-plugin-storybook": "^0.6.15",
+    "jasmine-core": "~5.1.1",
     "karma": "~6.4.2",
     "karma-chrome-launcher": "~3.2.0",
     "karma-coverage": "~2.2.1",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.1.0",
-    "raw-loader": "^4.0.2",
-    "storybook": "^7.2.1",
-    "stylelint": "15.10.2",
+    "storybook": "^7.5.3",
+    "stylelint": "15.11.0",
     "stylelint-config-standard": "34.0.0",
-    "stylelint-config-standard-scss": "^10.0.0",
-    "stylelint-scss": "5.0.1",
-    "stylelint-webpack-plugin": "4.1.1",
-    "typescript": "5.1.6"
+    "stylelint-config-standard-scss": "^11.1.0",
+    "stylelint-scss": "5.3.1",
+    "typescript": "5.2.2"
   },
   "overrides": {
     "ng2-charts": {
       "ng2-charts-schematics": "0.1.7"
     }
   }
-}
+}

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

@@ -76,7 +76,7 @@ export class GraphQLPageComponent implements AfterViewInit, OnInit {
             headers: {
                 Authorization: `Bearer ${accessToken}`,
             },
-            fetch: (input: RequestInfo | URL, init?: RequestInit) => {
+            fetch: (input: any, init?: RequestInit) => {
                 const isIntrospection = Types.isString(init?.body) && init!.body.indexOf('IntrospectionQuery') >= 0;
 
                 if (!isIntrospection) {

frontend/src/app/features/content/pages/calendar/calendar-page.component.html

@@ -29,13 +29,13 @@
     </ng-container>
 
     <ng-container content>
-        <div *ngIf="content && content.scheduleJob">
+        <div *ngIf="contentSelected && contentSelected.scheduleJob">
             <div class="form-group row">
                 <label class="col-4 col-form-label">{{ 'common.id' | sqxTranslate }}</label>
         
                 <div class="col-8">
                     <div class="input-group">
-                        <input readonly class="form-control" name="id" id="id" value="{{content.id}}" #inputId>
+                        <input readonly class="form-control" name="id" id="id" value="{{contentSelected.id}}" #inputId>
     
                         <button type="button" class="btn btn-outline-secondary" [sqxCopy]="inputId">
                             <i class="icon-copy"></i>
@@ -48,8 +48,8 @@
                 <label class="col-4 col-form-label">{{ 'common.content' | sqxTranslate }}</label>
         
                 <div class="col-8">
-                    <a class="truncate" [routerLink]="['../', content.schemaName, content.id]">
-                        {{createContentName(content)}}
+                    <a class="truncate" [routerLink]="['../', contentSelected.schemaName, contentSelected.id]">
+                        {{createContentName(contentSelected)}}
                     </a>
                 </div>
             </div>
@@ -58,8 +58,8 @@
                 <label class="col-4 col-form-label">{{ 'common.schema' | sqxTranslate }}</label>
         
                 <div class="col-8">
-                    <a class="truncate" [routerLink]="['../', content.schemaName]">
-                        {{content.schemaDisplayName}}
+                    <a class="truncate" [routerLink]="['../', contentSelected.schemaName]">
+                        {{contentSelected.schemaDisplayName}}
                     </a>
                 </div>
             </div>
@@ -70,8 +70,8 @@
                 <div class="col-8">
                     <sqx-content-status
                         layout="text"
-                        [status]="content.status"
-                        [statusColor]="content.statusColor"
+                        [status]="contentSelected.status"
+                        [statusColor]="contentSelected.statusColor"
                         small="true">
                     </sqx-content-status>
                 </div>
@@ -85,8 +85,8 @@
                 <div class="col-8">
                     <sqx-content-status
                         layout="text"
-                        [status]="content.scheduleJob.status"
-                        [statusColor]="content.scheduleJob.color"
+                        [status]="contentSelected.scheduleJob.status"
+                        [statusColor]="contentSelected.scheduleJob.color"
                         small="true">
                     </sqx-content-status>
                 </div>
@@ -96,7 +96,7 @@
                 <label class="col-4 col-form-label">{{ 'contents.scheduledAt' | sqxTranslate }}</label>
         
                 <div class="col-8">
-                    {{content.scheduleJob.dueTime | sqxFullDateTime}}
+                    {{contentSelected.scheduleJob.dueTime | sqxFullDateTime}}
                 </div>
             </div>
 
@@ -104,16 +104,16 @@
                 <label class="col-4 col-form-label">{{ 'contents.scheduledBy' | sqxTranslate }}</label>
         
                 <div class="col-8">
-                    <img class="user-picture" [src]="content.scheduleJob.scheduledBy | sqxUserPictureRef"> {{content.scheduleJob.scheduledBy | sqxUserNameRef}}
+                    <img class="user-picture" [src]="contentSelected.scheduleJob.scheduledBy | sqxUserPictureRef"> {{contentSelected.scheduleJob.scheduledBy | sqxUserNameRef}}
                 </div>
             </div>
 
-            <ng-container *ngIf="content.canCancelStatus">
+            <ng-container *ngIf="contentSelected.canCancelStatus">
                 <hr />
 
                 <div class="row">
                     <div class="col-8 offset-4">
-                        <button type="button" class="btn btn-outline-danger" [class.disabled]="!content.canCancelStatus"
+                        <button type="button" class="btn btn-outline-danger" [class.disabled]="!contentSelected.canCancelStatus"
                             (sqxConfirmClick)="cancelStatus()"
                             confirmTitle="i18n:contents.cancelStatusConfirmTitle"
                             confirmText="i18n:contents.cancelStatusConfirmText"

frontend/src/app/features/content/pages/calendar/calendar-page.component.ts

@@ -26,7 +26,7 @@ export class CalendarPageComponent implements AfterViewInit, OnDestroy, OnInit {
 
     public view: ViewMode = 'month';
 
-    public content?: ContentDto;
+    public contentSelected?: ContentDto;
     public contentDialog = new DialogModel();
 
     public title = '';
@@ -68,7 +68,7 @@ export class CalendarPageComponent implements AfterViewInit, OnDestroy, OnInit {
             });
 
             this.calendar.on('clickSchedule', (event: any) => {
-                this.content = event.schedule.raw;
+                this.contentSelected = event.schedule.raw;
                 this.contentDialog.show();
 
                 this.changeDetector.detectChanges();
@@ -123,12 +123,12 @@ export class CalendarPageComponent implements AfterViewInit, OnDestroy, OnInit {
     }
 
     public cancelStatus() {
-        this.contentsService.cancelStatus(this.appsState.appName, this.content!, this.content!.version)
+        this.contentsService.cancelStatus(this.appsState.appName, this.contentSelected!, this.contentSelected!.version)
             .subscribe(content => {
                 this.calendar?.deleteSchedule(content.id, '1');
 
                 this.contentDialog.hide();
-                this.content = undefined;
+                this.contentSelected = undefined;
             });
     }
 

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

@@ -146,7 +146,7 @@
                     </ng-container>
                     <ng-container *ngSwitchCase="'extension'">
                         <sqx-content-extension mode="referencing" *ngIf="schema.properties.contentEditorUrl && content"
-                            [content]="content" 
+                            [contentItem]="content" 
                             [contentSchema]="schema"
                             [url]="schema.properties.contentEditorUrl">
                         </sqx-content-extension>

frontend/src/app/features/content/pages/sidebar/sidebar-page.component.html

@@ -1,7 +1,7 @@
 <sqx-layout titleText="i18n:common.sidebar" width="20" white="true" padding="true" overflow="true">
     <sqx-content-extension
         [url]="url | async"
-        [content]="contentsState.selectedContent | async"
+        [contentItem]="contentsState.selectedContent | async"
         [contentSchema]="(schemasState.selectedSchema | async)!">
     </sqx-content-extension>
 </sqx-layout>

frontend/src/app/features/content/shared/content-extension.component.ts

@@ -24,7 +24,7 @@ export class ContentExtensionComponent {
     public iframe!: ElementRef<HTMLIFrameElement>;
 
     @Input({ required: true })
-    public content?: ContentDto | null;
+    public contentItem?: ContentDto | null;
 
     @Input({ required: true })
     public contentSchema!: SchemaDto;
@@ -54,7 +54,7 @@ export class ContentExtensionComponent {
             this.context['schemaId'] = this.contentSchema?.id;
         }
 
-        if (changes.content) {
+        if (changes.contentItem) {
             this.sendContent();
         }
     }
@@ -86,7 +86,7 @@ export class ContentExtensionComponent {
     }
 
     private sendContent() {
-        this.sendMessage('contentChanged', { content: this.content });
+        this.sendMessage('contentChanged', { content: this.contentItem });
     }
 
     private sendMessage(type: string, payload: any) {

frontend/src/app/features/rules/shared/triggers/comment-trigger.component.html

@@ -18,7 +18,7 @@
             <li class="help-example">
                 {{ 'rules.conditions.commentUser' | sqxTranslate }}:<br>
 
-                <sqx-code>event.mentionedUser.email === 'mail2stehle@gmail.com'</sqx-code>
+                <sqx-code>event.mentionedUser.email === 'mail2stehle&#64;gmail.com'</sqx-code>
             </li>
             <li class="help-example">
                 {{ 'rules.conditions.commentKeyword' | sqxTranslate }}:<br>

frontend/src/app/features/rules/shared/triggers/content-changed-trigger.component.html

@@ -95,7 +95,7 @@
             <li class="help-example">
                 {{ 'rules.conditions.updatedBy' | sqxTranslate }}:<br>
                 
-                <sqx-code>user.email === 'user@squidex.io'</sqx-code>
+                <sqx-code>user.email === 'user&#64;squidex.io'</sqx-code>
             </li>
         </ul>
     </div>

frontend/src/app/features/settings/pages/workflows/workflow-diagram.component.ts

@@ -45,7 +45,7 @@ export class WorkflowDiagramComponent implements AfterViewInit, OnDestroy {
 
     private updateNetwork() {
         if (this.chartContainer?.nativeElement && this.workflow) {
-            this.resourceLoader.loadLocalScript('dependencies/vis-network.min.js')
+            this.resourceLoader.loadLocalScript('dependencies/vis-network/vis-network.min.js')
                 .then(() => {
                     this.network?.destroy();
 

frontend/src/app/framework/angular/forms/editors/code-editor.component.scss

@@ -18,6 +18,15 @@
         background: $color-white;
         border: 1px solid $color-input;
         border-radius: 0;
+        line-height: 1.6;
+        padding-left: 30px;
+        padding-right: 5px;
+        white-space: normal;
+
+        .ace_icon {
+            @include absolute(5px, null, null, 5px);
+            white-space: pre;
+        }
     }
 
     .ace_active-line,

frontend/src/app/framework/angular/forms/editors/code-editor.component.ts

@@ -144,14 +144,14 @@ export class CodeEditorComponent extends StatefulControlComponent<{}, any> imple
 
         Promise.all([
             this.resourceLoader.loadLocalScript('dependencies/ace/ace.js'),
-            this.resourceLoader.loadLocalScript('dependencies/ace/ext/modelist.js'),
-            this.resourceLoader.loadLocalScript('dependencies/ace/ext/language_tools.js'),
+            this.resourceLoader.loadLocalScript('dependencies/ace/ext-modelist.js'),
+            this.resourceLoader.loadLocalScript('dependencies/ace/ext-language_tools.js'),
         ]).then(() => {
-            this.modelist = ace.require('ace/ext/modelist');
+            this.modelist = ace.require('ace/ext-modelist');
 
             this.aceEditor = ace.edit(this.editor.nativeElement);
             this.aceEditor.setFontSize(14);
-            this.aceTools = ace.require('ace/ext/language_tools');
+            this.aceTools = ace.require('ace/ext-language_tools');
 
             this.setValue(this.value);
             this.setMode();

frontend/src/app/framework/angular/video-player.component.ts

@@ -51,7 +51,7 @@ export class VideoPlayerComponent implements AfterViewInit, OnDestroy {
     public ngAfterViewInit() {
         Promise.all([
             this.resourceLoader.loadLocalScript('dependencies/videojs/video.min.js'),
-            this.resourceLoader.loadLocalStyle('dependencies/videojs/video-js.min.css'),
+            this.resourceLoader.loadLocalStyle('dependencies/videojs/videojs.min.css'),
         ]).then(() => {
             this.renderer.removeClass(this.video.nativeElement, 'hidden');
 

frontend/src/app/framework/utils/markdown.ts

@@ -53,9 +53,9 @@ export function renderMarkdown(input: string | undefined | null, inline: boolean
     }
 
     if (inline) {
-        return marked(input, { renderer: RENDERER_INLINE, mangle: false, headerIds: false });
+        return marked(input, { renderer: RENDERER_INLINE });
     } else {
-        return marked(input, { renderer: RENDERER_DEFAULT, mangle: false, headerIds: false });
+        return marked(input, { renderer: RENDERER_DEFAULT });
     }
 }
 

frontend/src/app/shared/components/forms/geolocation-editor.component.html

@@ -8,30 +8,32 @@
         <input [class.hidden]="!isGoogleMaps" class="form-control search-control" [disabled]="snapshot.isDisabled" placeholder="{{ 'common.searchGoogleMaps' | sqxTranslate }}" #searchBox>
     </form>
 
-    <div class="row mt-2">
-        <form class="col form-inline g-0" [formGroup]="geolocationForm" (change)="updateValueByInput()" (ngSubmit)="updateValueByInput()">
-            <div class="form-group col-auto pe-2" *ngIf="!snapshot.isCompact">
-                <label for="latitude">{{ 'common.latitudeShort' | sqxTranslate }}: </label>
-            </div>
-            <div class="form-group pe-2">
-                <sqx-control-errors for="latitude" style="z-index: 10000;"></sqx-control-errors>
-
-                <input type="number" class="form-control" id="latitude" formControlName="latitude" step="any">
-            </div>
-
-            <div class="form-group col-auto pe-2" *ngIf="!snapshot.isCompact">
-                <label for="longitude">{{ 'common.longitudeShort' | sqxTranslate }}: </label>
-            </div>
-            <div class="form-group pe-2">
-                <sqx-control-errors for="longitude" style="z-index: 10000;"></sqx-control-errors>
-                
-                <input type="number" class="form-control" id="longitude" formControlName="longitude" step="any">
-            </div>
-
-            <div class="form-group col-auto" *ngIf="!snapshot.isCompact">
-                <button [class.hidden]="!hasValue" type="button" class="btn btn-text clear" [disabled]="snapshot.isDisabled" (click)="clearValue()">
-                    {{ 'common.clear' | sqxTranslate }}
-                </button>
+    <div class="row g-0 mt-2">
+        <form class="col form-inline" [formGroup]="geolocationForm" (change)="updateValueByInput()" (ngSubmit)="updateValueByInput()">
+            <div class="row g-2 align-items-center">
+                <div class="col-auto mb pe-2" *ngIf="!snapshot.isCompact">
+                    <label for="latitude">{{ 'common.latitudeShort' | sqxTranslate }}: </label>
+                </div>
+                <div class="col">
+                    <sqx-control-errors for="latitude" style="z-index: 10000;"></sqx-control-errors>
+    
+                    <input type="number" class="form-control" id="latitude" formControlName="latitude" step="any">
+                </div>
+    
+                <div class="col col-auto ps-2" *ngIf="!snapshot.isCompact">
+                    <label for="longitude">{{ 'common.longitudeShort' | sqxTranslate }}: </label>
+                </div>
+                <div class="col">
+                    <sqx-control-errors for="longitude" style="z-index: 10000;"></sqx-control-errors>
+                    
+                    <input type="number" class="form-control" id="longitude" formControlName="longitude" step="any">
+                </div>
+    
+                <div class="col col-auto" *ngIf="!snapshot.isCompact">
+                    <button type="button" class="btn btn-text clear" [disabled]="snapshot.isDisabled" (click)="clearValue()">
+                        {{ 'common.clear' | sqxTranslate }}
+                    </button>
+                </div>
             </div>
         </form>
         <div class="col-auto">

frontend/src/app/shared/components/help/help-markdown.pipe.ts

@@ -25,7 +25,7 @@ renderer.link = (href, _, text) => {
 export class HelpMarkdownPipe implements PipeTransform {
     public transform(text: string | undefined | null): string {
         if (text) {
-            return marked(text, { renderer, mangle: false, headerIds: false });
+            return marked(text, { renderer });
         } else {
             return '';
         }

frontend/src/config/webpack.config.js

@@ -1,65 +0,0 @@
-const process = require('process');
-const plugins = {
-    // https://webpack.js.org/plugins/eslint-webpack-plugin/
-    ESLintPlugin: require('eslint-webpack-plugin'),
-    // https://github.com/webpack-contrib/stylelint-webpack-plugin
-    StylelintPlugin: require('stylelint-webpack-plugin'),
-    // https://github.com/webpack-contrib/mini-css-extract-plugin
-    MiniCssExtractPlugin: require('mini-css-extract-plugin'),
-    // https://webpack.js.org/plugins/copy-webpack-plugin/
-    CopyPlugin: require('copy-webpack-plugin'),
-};
-
-process.on('uncaughtException', err => {
-    // Prevent ECONNRESET errors
-    console.log(err);
-});
-
-module.exports = (config, _, options) => {
-    /*
-     * Copy lazy loaded libraries to output.
-     */
-    config.plugins.push(new plugins.CopyPlugin({
-        patterns: [
-            { from: './node_modules/tui-code-snippet/dist', to: 'dependencies/tui-calendar' },
-            { from: './node_modules/tui-calendar/dist', to: 'dependencies/tui-calendar' },
-
-            { from: './node_modules/ace-builds/src-min/ace.js', to: 'dependencies/ace/ace.js' },
-            { from: './node_modules/ace-builds/src-min/ext-language_tools.js', to: 'dependencies/ace/ext/language_tools.js' },
-            { from: './node_modules/ace-builds/src-min/ext-modelist.js', to: 'dependencies/ace/ext/modelist.js' },
-            { from: './node_modules/ace-builds/src-min/mode-*.js', to: 'dependencies/ace/[name][ext]' },
-            { from: './node_modules/ace-builds/src-min/snippets', to: 'dependencies/ace/snippets' },
-            { from: './node_modules/ace-builds/src-min/worker-*.js', to: 'dependencies/ace/[name][ext]' },
-
-            { from: './node_modules/leaflet-control-geocoder/dist/Control.Geocoder.css', to: 'dependencies/leaflet' },
-            { from: './node_modules/leaflet-control-geocoder/dist/Control.Geocoder.min.js', to: 'dependencies/leaflet' },
-            { from: './node_modules/leaflet/dist/leaflet.js', to: 'dependencies/leaflet' },
-            { from: './node_modules/leaflet/dist/leaflet.css', to: 'dependencies/leaflet' },
-            { from: './node_modules/leaflet/dist/images', to: 'dependencies/leaflet/images' },
-
-            { from: './node_modules/video.js/dist/video.min.js', to: 'dependencies/videojs' },
-            { from: './node_modules/video.js/dist/video-js.min.css', to: 'dependencies/videojs' },
-
-            { from: './node_modules/font-awesome/css/font-awesome.min.css', to: 'dependencies/font-awesome/css' },
-            { from: './node_modules/font-awesome/fonts', to: 'dependencies/font-awesome/fonts' },
-
-            { from: './node_modules/vis-network/standalone/umd/vis-network.min.js', to: 'dependencies' },
-        ],
-    }));
-
-    config.plugins.push(new plugins.StylelintPlugin({
-        files: '**/*.scss',
-    }));
-
-    if (options.target === 'build') {
-        config.plugins.push(
-            new plugins.ESLintPlugin({
-                files: [
-                    './app/**/*.ts',
-                ],
-            }),
-        );
-    }
-
-    return config;
-};