From bdcf32fa430b39a757177cbfbdf42f26364c7cae Mon Sep 17 00:00:00 2001 From: Ruud Date: Tue, 16 Jun 2020 19:29:39 +0200 Subject: [PATCH] Include Markdown editor and richtext editor in squidex instead of via CDN (#533) * add markdown and rich text editor as dependencies * version update of simplemde types * use copy plugin to copy files to output and lazy-load them * Revert "add markdown and rich text editor as dependencies" This reverts commit 0151ad36c1942ce572bcf03929a8c6852b4726ee. * revert version update * npm i * load via dependencies folder * add dependencies * check for localhost when loading scripts (due frontend/backend seperation). * add ace modes * I thought I was clear that I wanted to revert this * subdirectory is build, use that in non-localhost environments * satisfy build? * load dependencies from npm, copy required content to output/dependencies * remove dependencies folder * change resourceLoader for easier re-using local loading * smaller * one more * add font-awesome as local dependency as well * hide block by default, if outdatedbrowser.min.js can be loaded, it will set display to 'block'. Also fixed bug of actually calling oudatedBrowser * spacing Co-authored-by: Ruud Faessen --- frontend/app-config/webpack.config.js | 27 +- .../forms/editors/code-editor.component.ts | 2 +- .../forms/editors/json-editor.component.ts | 2 +- .../services/resource-loader.service.ts | 10 + frontend/app/index.html | 15 +- .../forms/markdown-editor.component.ts | 5 +- .../components/forms/rich-editor.component.ts | 2 +- frontend/package-lock.json | 479 ++++++++++++++++++ frontend/package.json | 6 + 9 files changed, 535 insertions(+), 13 deletions(-) diff --git a/frontend/app-config/webpack.config.js b/frontend/app-config/webpack.config.js index 6ca13d48f..e2e13750f 100644 --- a/frontend/app-config/webpack.config.js +++ b/frontend/app-config/webpack.config.js @@ -32,7 +32,9 @@ const plugins = { // https://www.npmjs.com/package/webpack-bundle-analyzer BundleAnalyzerPlugin: require('webpack-bundle-analyzer').BundleAnalyzerPlugin, // https://www.npmjs.com/package/@angular-devkit/build-optimizer - BuildOptimizerWebpackPlugin: require('@angular-devkit/build-optimizer').BuildOptimizerWebpackPlugin + BuildOptimizerWebpackPlugin: require('@angular-devkit/build-optimizer').BuildOptimizerWebpackPlugin, + // https://webpack.js.org/plugins/copy-webpack-plugin/ + CopyPlugin : require('copy-webpack-plugin') }; module.exports = function (env) { @@ -204,6 +206,29 @@ module.exports = function (env) { // Add errors to webpack instead of warnings failOnError: true }), + new plugins.CopyPlugin({ + patterns: [ + { from: './node_modules/simplemde/dist', to: 'dependencies/simplemde' }, + + { from: './node_modules/tinymce/tinymce.min.js', to: 'dependencies/tinymce/tinymce.min.js' }, + { from: './node_modules/tinymce/plugins/advlist', to: 'dependencies/tinymce/plugins/advlist' }, + { from: './node_modules/tinymce/plugins/code', to: 'dependencies/tinymce/plugins/code' }, + { from: './node_modules/tinymce/plugins/image', to: 'dependencies/tinymce/plugins/image' }, + { from: './node_modules/tinymce/plugins/link', to: 'dependencies/tinymce/plugins/link' }, + { from: './node_modules/tinymce/plugins/lists', to: 'dependencies/tinymce/plugins/lists' }, + { from: './node_modules/tinymce/plugins/media', to: 'dependencies/tinymce/plugins/media' }, + { from: './node_modules/tinymce/plugins/paste', to: 'dependencies/tinymce/plugins/paste' }, + { from: './node_modules/tinymce/skins', to: 'dependencies/tinymce/skins' }, + { from: './node_modules/tinymce/themes/silver', to: 'dependencies/tinymce/themes/silver' }, + + { from: './node_modules/ace-builds/src-min/ace.js', to: 'dependencies/ace/ace.js' }, + { from: './node_modules/ace-builds/src-min/mode-javascript.js', to: 'dependencies/ace/mode-javascript.js' }, + { from: './node_modules/ace-builds/src-min/worker-javascript.js', to: 'dependencies/ace/worker-javascript.js' }, + + { from: './node_modules/font-awesome/css/font-awesome.min.css', to: 'dependencies/font-awesome/css/font-awesome.min.css' }, + { from: './node_modules/font-awesome/fonts', to: 'dependencies/font-awesome/fonts' }, + ], + }), ], devServer: { diff --git a/frontend/app/framework/angular/forms/editors/code-editor.component.ts b/frontend/app/framework/angular/forms/editors/code-editor.component.ts index f2cb279a6..b460774f2 100644 --- a/frontend/app/framework/angular/forms/editors/code-editor.component.ts +++ b/frontend/app/framework/angular/forms/editors/code-editor.component.ts @@ -83,7 +83,7 @@ export class CodeEditorComponent extends StatefulControlComponent { + this.resourceLoader.loadLocalScript('dependencies/ace/ace.min.js').then(() => { this.aceEditor = ace.edit(this.editor.nativeElement); this.aceEditor.getSession().setMode(this.mode); diff --git a/frontend/app/framework/angular/forms/editors/json-editor.component.ts b/frontend/app/framework/angular/forms/editors/json-editor.component.ts index 8e114304f..89538127b 100644 --- a/frontend/app/framework/angular/forms/editors/json-editor.component.ts +++ b/frontend/app/framework/angular/forms/editors/json-editor.component.ts @@ -59,7 +59,7 @@ export class JsonEditorComponent extends StatefulControlComponent<{}, string> im this.editor.nativeElement.style.height = `${this.height}px`; } - this.resourceLoader.loadScript('https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/ace.js').then(() => { + this.resourceLoader.loadLocalScript('dependencies/ace/ace.min.js').then(() => { this.aceEditor = ace.edit(this.editor.nativeElement); this.aceEditor.getSession().setMode('ace/mode/javascript'); diff --git a/frontend/app/framework/services/resource-loader.service.ts b/frontend/app/framework/services/resource-loader.service.ts index 1b0e94509..8aa7d331d 100644 --- a/frontend/app/framework/services/resource-loader.service.ts +++ b/frontend/app/framework/services/resource-loader.service.ts @@ -59,4 +59,14 @@ export class ResourceLoaderService { return result; } + + public loadLocalScript(url: string): Promise { + return process.env.NODE_ENV !== 'production' ? + this.loadScript(`https://localhost:3000/${url}`) : this.loadScript(`build/${url}`); + } + + public loadLocalStyle(url: string): Promise { + return process.env.NODE_ENV !== 'production' ? + this.loadStyle(`https://localhost:3000/${url}`) : this.loadStyle(`build/${url}`); + } } \ No newline at end of file diff --git a/frontend/app/index.html b/frontend/app/index.html index 849e44dec..ac283d960 100644 --- a/frontend/app/index.html +++ b/frontend/app/index.html @@ -7,27 +7,27 @@ Squidex Headless CMS - + -