[NEW] Only Load CodeMirror code when it is needed (RocketChat#15351)

allanbritos · Sep 13, 2019 · 212621f · 212621f
1 parent aaa6d91
commit 212621f
Show file tree

Hide file tree

Showing 6 changed files with 20 additions and 13 deletions.
diff --git a/app/ui-admin/client/admin.html b/app/ui-admin/client/admin.html
@@ -135,8 +135,8 @@
 															<div class="title">
 																{{label}}
 															</div>
-															{{> CodeMirror name=_id options=getEditorOptions code=value }}
-															{{setEditorOnBlur _id}}
+															{{> CodeMirror name=_id options=getEditorOptions code=value editorOnBlur=setEditorOnBlur}}
+
 															<div class="buttons">
 																<button class="rc-button rc-button--primary button-fullscreen">{{_ "Full_Screen"}}</button>
 																<button class="rc-button rc-button--primary button-restore">{{_ "Exit_Full_Screen"}}</button>

diff --git a/app/ui-admin/client/admin.js b/app/ui-admin/client/admin.js
@@ -292,8 +292,8 @@ Template.admin.helpers({
 			readOnly,
 		};
 	},
-	setEditorOnBlur(_id) {
-		Meteor.defer(function() {
+	setEditorOnBlur() {
+		return function(_id) {
 			if (!$(`.code-mirror-box[data-editor-id="${ _id }"] .CodeMirror`)[0]) {
 				return;
 			}
@@ -308,7 +308,7 @@ Template.admin.helpers({
 			const onChangeDelayed = _.debounce(onChange, 500);
 			codeMirror.on('change', onChangeDelayed);
 			codeMirror.changeAdded = true;
-		});
+		};
 	},
 	assetAccept(fileConstraints) {
 		if (fileConstraints.extensions && fileConstraints.extensions.length) {

diff --git a/app/ui/client/index.js b/app/ui/client/index.js
@@ -5,7 +5,7 @@ import './lib/iframeCommands';
 import './lib/menu';
 import './lib/Modernizr';
 import './lib/parentTemplate';
-import './lib/codeMirror/codeMirror';
+import './lib/codeMirror';
 import './lib/textarea-cursor';
 import './views/cmsPage.html';
 import './views/404/roomNotFound.html';

diff --git a/app/ui/client/lib/codeMirror/codeMirror.js b/app/ui/client/lib/codeMirror/codeMirror.js
@@ -1,6 +1,3 @@
-import './codeMirrorComponent.html';
-import './codeMirrorComponent.js';
-
 import 'codemirror/addon/fold/brace-fold.js';
 import 'codemirror/addon/fold/comment-fold.js';
 import 'codemirror/addon/fold/foldcode.js';

diff --git a/app/ui/client/lib/codeMirror/codeMirrorComponent.js b/app/ui/client/lib/codeMirror/codeMirrorComponent.js
@@ -1,17 +1,25 @@
 import { Meteor } from 'meteor/meteor';
 import { Session } from 'meteor/session';
 import { Template } from 'meteor/templating';
-import 'codemirror/lib/codemirror.css';
-import CodeMirror from 'codemirror/lib/codemirror.js';
+import './codeMirrorComponent.html';
 
 const CodeMirrors = {};
 
-Template.CodeMirror.rendered = function() {
+Template.CodeMirror.onRendered(async function() {
+	const CodeMirror = await import('codemirror/lib/codemirror.js');
+
+	await import('./codeMirror');
+	await import('codemirror/lib/codemirror.css');
+
+
 	const options = this.data.options || { lineNumbers: true };
 	const textarea = this.find('textarea');
 	const editor = CodeMirror.fromTextArea(textarea, options);
 
 	CodeMirrors[this.data.id || 'code-mirror-textarea'] = editor;
+	if (this.data && this.data.editorOnBlur) {
+		this.data.editorOnBlur(this.data.name);
+	}
 
 	const self = this;
 	editor.on('change', function(doc) {
@@ -34,7 +42,8 @@ Template.CodeMirror.rendered = function() {
 	Meteor.defer(function() {
 		editor.refresh();
 	});
-};
+});
+
 
 Template.CodeMirror.destroyed = function() {
 	delete CodeMirrors[this.data.id || 'code-mirror-textarea'];

diff --git a/app/ui/client/lib/codeMirror/index.js b/app/ui/client/lib/codeMirror/index.js
@@ -0,0 +1 @@
+import './codeMirrorComponent';