Load ace only if needed

Signed-off-by: Julius Härtl <jus@bitgrid.net>

4 files changed, 61 insertions, 32 deletions

diff --git a/js/ImportAce.js b/js/ImportAce.js
new file mode 100644
index 0000000..37d1e77
--- /dev/null
+++ b/js/ImportAce.js
@@ -0,0 +1,25 @@
+/*
+ * @copyright Copyright (c) 2019 Julius Härtl <jus@bitgrid.net>
+ *
+ * @author Julius Härtl <jus@bitgrid.net>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+export default function() {
+	return import(/* webpackChunkName: "ace" */'brace')
+}
diff --git a/js/editor.js b/js/editor.js
index 7b0d914..37ac928 100644
--- a/js/editor.js
+++ b/js/editor.js
@@ -1,8 +1,10 @@
 import {getSyntaxMode} from './SyntaxMode';
+import importAce from './ImportAce';
 
 /** @type array[] supportedMimeTypes */
 const supportedMimeTypes = require('./supported_mimetypes.json');
 
+let ace;
 export const Texteditor = {
 
 	/**
@@ -187,14 +189,17 @@ export const Texteditor = {
 		this.file.name = filename;
 		this.file.dir = context.dir;
 		this.fileList = context.fileList;
-		this.loadEditor(
-			Texteditor.$container,
-			Texteditor.file
-		);
-		history.pushState({
-			file: filename,
-			dir: context.dir
-		}, 'Editor', '#editor');
+		importAce().then((_ace) => {
+			ace = _ace;
+			this.loadEditor(
+				Texteditor.$container,
+				Texteditor.file
+			);
+			history.pushState({
+				file: filename,
+				dir: context.dir
+			}, 'Editor', '#editor');
+		});
 	},
 
 	/**
@@ -265,7 +270,6 @@ export const Texteditor = {
 			+'<div id="preview_wrap"><div id="preview"></div></div></div></div>');
 		$('#content').append(container);
 
-
 		// Get the file data
 		this.loadFile(
 			file.dir,
diff --git a/js/index.js b/js/index.js
index 5e75c35..a8e96e3 100644
--- a/js/index.js
+++ b/js/index.js
@@ -8,7 +8,6 @@
  * @copyright Tom Needham 2015
  */
 
-import * as ace from 'brace';
 import {SidebarPreview} from './sidebarpreview';
 import {Texteditor} from './editor';
 import {newFileMenuPlugin} from './newfileplugin';
@@ -18,8 +17,6 @@ __webpack_require__.p = OC.filePath('files_texteditor', 'js', '../build/');
 const script = document.querySelector('[nonce]');
 __webpack_require__.nc = script['nonce'] || script.getAttribute('nonce');
 
-window.ace = ace;
-
 OCA.Files_Texteditor = Texteditor;
 
 OC.Plugins.register('OCA.Files.NewFileMenu', newFileMenuPlugin);
diff --git a/js/sidebarpreview.js b/js/sidebarpreview.js
index 30a6ab6..15a4b89 100644
--- a/js/sidebarpreview.js
+++ b/js/sidebarpreview.js
@@ -9,6 +9,7 @@
  */
 
 import {getSyntaxMode} from "./SyntaxMode";
+import importAce from './ImportAce';
 
 /** @type array[] supportedMimeTypes */
 const supportedMimeTypes = require('./supported_mimetypes.json');
@@ -32,28 +33,30 @@ export class SidebarPreview {
 			$editorDiv.text(content);
 			$thumbnailDiv.children('.stretcher').remove();
 			$thumbnailDiv.append($editorDiv);
-			const editor = ace.edit('sidebar_editor');
-			editor.setReadOnly(true);
-			let syntaxModePromise;
-			if (model.get('mimetype') === 'text/html') {
-				syntaxModePromise = getSyntaxMode('html');
-			} else {
-				// Set the syntax mode based on the file extension
-				syntaxModePromise = getSyntaxMode(
-					model.get('name').split('.')[model.get('name').split('.').length - 1]
-				);
-			}
-			syntaxModePromise.then(function (mode) {
-				if (mode) {
-					editor.getSession().setMode(`ace/mode/${mode}`);
+			importAce().then((imports) => {
+				const editor = imports.edit('sidebar_editor');
+				editor.setReadOnly(true);
+				let syntaxModePromise;
+				if (model.get('mimetype') === 'text/html') {
+					syntaxModePromise = getSyntaxMode('html');
+				} else {
+					// Set the syntax mode based on the file extension
+					syntaxModePromise = getSyntaxMode(
+						model.get('name').split('.')[model.get('name').split('.').length - 1]
+					);
 				}
+				syntaxModePromise.then(function (mode) {
+					if (mode) {
+						editor.getSession().setMode(`ace/mode/${mode}`);
+					}
+				});
+				// Set the theme
+				import('brace/theme/clouds').then(() => {
+					editor.setTheme("ace/theme/clouds");
+				});
+				$editorDiv.css("height", previewHeight);
+				$editorDiv.css("width", previewWidth);
 			});
-			// Set the theme
-			import('brace/theme/clouds').then(() => {
-				editor.setTheme("ace/theme/clouds");
-			});
-			$editorDiv.css("height", previewHeight);
-			$editorDiv.css("width", previewWidth);
 		}, function () {
 			fallback();
 		});