Modal code editor for editing selected element html code.

css/editor.css

@@ -19630,3 +19630,6 @@ label.form-check .form-check-input {
 
 video, audio {
   max-width: 100%; }
+
+.modal .modal-content {
+    height: 100%; }

editor.html

@@ -609,8 +609,9 @@
 
 									<a id="up-btn" href="" title="Move element up"><i class="la la-arrow-up"></i></a>
 									<a id="down-btn" href="" title="Move element down"><i class="la la-arrow-down"></i></a>
+									<a id="edit-code-btn" href="" title="Edit html code"><i class="icon-code-outline"></i></a>
 
-								<a id="save-reusable-btn" href="" title="Save as reusable" class="mx-2"><i class="icon-save-outline"></i></i></a>
+									<a id="save-reusable-btn" href="" title="Save as reusable" class="mx-2"><i class="icon-save-outline"></i></i></a>
 									<a id="clone-btn" href="" title="Clone element"><i class="icon-copy-outline"></i></a>
 									<a id="delete-btn" href="" title="Remove element"><i class="icon-trash-outline"></i></i></a>
 								</div>
@@ -1446,6 +1447,39 @@ <h6><b>{%=title%}</b></h6>
 
 <!--// end templates -->
 
+<!-- code editor modal -->
+<div class="modal modal-full fade" id="codeEditorModal" tabindex="-1" aria-labelledby="codeEditorModal" role="dialog" aria-hidden="true">
+  <div class="modal-dialog modal-xl modal-dialog-scrollable" role="document">
+    <div class="modal-content">
+	  <input type="hidden" name="file" value="">  	
+
+      <div class="modal-header">
+        <span class="modal-title"></span>
+		<div class="float-end">
+			<button type="button" class="btn btn-secondary btn-icon" data-bs-dismiss="modal"><i class="la la-times"></i>Close</button>
+
+			<button class="btn btn-primary btn-icon save-btn" title="Save changes">
+				<span class="loading d-none">
+				<i class="la la-save"></i>
+				  <span class="spinner-border spinner-border-sm align-middle" role="status" aria-hidden="true">
+				  </span>
+				  <span>Saving </span> ... </span>
+
+				<span class="button-text">
+				  <i class="la la-save"></i> <span>Save changes</span>
+				</span>				
+			</button>
+		</div>
+      </div>
+
+      <div class="modal-body p-0">
+        <textarea class="form-control h-100"></textarea>
+      </div>
+
+
+    </div>
+  </div>
+</div>
 
 <!-- export html modal-->
 <div class="modal fade" id="textarea-modal" tabindex="-1" role="dialog" aria-labelledby="textarea-modal" aria-hidden="true">
@@ -1667,10 +1701,10 @@ <h6 class="modal-title text-primary fw-normal"><i class="la la-lg la-file"></i>
 
 <!-- 
 CKEditor plugin
-Unzip the latest ckeditor release zip from https://github.com/ckeditor/ckeditor4/releases to libs/ckeditor 
+Unzip the latest ckeditor release zip from https://github.com/ckeditor/ckeditor4/releases to libs/ckeditor or use the CDN
 -->
 <!--
-<script src="libs/ckeditor/ckeditor.js"></script>
+<script src="libs/ckeditor/ckeditor.js"></script> <script src="https://cdn.ckeditor.com/ckeditor5/39.0.2/classic/ckeditor.js"></script>
 <script src="libs/builder/plugin-ckeditor.js"></script>	
 -->
 

libs/builder/builder.js

@@ -1651,6 +1651,22 @@ Vvveb.Builder = {
 			return false;
 		});
 
+		$("#edit-code-btn").on("click", function(event) {
+			let selectedEl = Vvveb.Builder.selectedEl.get(0);
+			let value = selectedEl.innerHTML;
+			// uncomment to use outerHTML, not recommended
+			//let value = selectedEl.outerHTML;
+			Vvveb.ModalCodeEditor.show();
+			Vvveb.ModalCodeEditor.setValue(value);
+
+			$(window).one("vvveb.ModalCodeEditor.save",  function(event, value) {
+				selectedEl.innerHTML = value;
+				//selectedEl.outerHTML = value;
+			});
+
+			return false;
+		});
+
 		$("#delete-btn").on("click", function(event) {
 			$("#select-box").hide();
 
@@ -2000,6 +2016,53 @@ Vvveb.Builder = {
 
 };
 
+Vvveb.ModalCodeEditor = {
+	modal: false,
+	editor: false,
+
+	init: function(modal = false, editor = false) {
+		if (modal) {
+			this.modal = modal;
+		} else {
+			this.modal = $('#codeEditorModal');
+		}
+		if (editor) {
+			this.editor = editor;
+		} else {
+			this.editor = $('textarea', this.modal);
+		}
+
+		let self = this;
+
+		$('.save-btn', this.modal).on("click",  function(event) {
+			$(window).triggerHandler("vvveb.ModalCodeEditor.save", self.getValue());
+			self.hide();
+		});
+	},
+
+	show: function(value) {
+		if (!this.modal) {
+			this.init();
+		}
+		this.modal.modal('show');
+	},
+
+	hide: function(value) {
+		this.modal.modal('hide');
+	},
+
+	getValue: function() {
+		return this.editor.val();;
+	},
+
+	setValue: function(value) {
+		if (!this.modal) {
+			this.init();
+		}
+		this.editor.val(value);
+	},
+}
+
 Vvveb.CodeEditor = {
 
 	isActive: false,

libs/builder/plugin-codemirror.js

@@ -43,6 +43,10 @@ Vvveb.CodeEditor = {
 			var scrollInfo = this.codemirror.getScrollInfo();
 			this.codemirror.setValue(Vvveb.Builder.getHtml());
 			this.codemirror.scrollTo(scrollInfo.left, scrollInfo.top);
+			let self = this;
+			setTimeout(function() {
+				self.codemirror.refresh();
+			}, 300);
 		}
 	},
 
@@ -65,3 +69,37 @@ Vvveb.CodeEditor = {
 		this.destroy();
 	}
 }
+
+
+// override modal code editor to use code mirror
+Vvveb.ModalCodeEditor.init = function (modal = false, editor = false) {
+	this.modal  = $('#codeEditorModal');
+	this.editor = CodeMirror.fromTextArea(document.querySelector("#codeEditorModal textarea"), {
+		mode: 'text/html',
+		lineNumbers: true,
+		autofocus: true,
+		lineWrapping: true,
+		//viewportMargin:Infinity,
+		theme: 'material'
+	});
+
+	let self = this;
+	$('.save-btn', this.modal).on("click",  function(event) {
+		$(window).triggerHandler("vvveb.ModalCodeEditor.save", self.getValue());
+		self.hide();
+	});
+}
+
+Vvveb.ModalCodeEditor.setValue = function (value) {
+	var scrollInfo = this.editor.getScrollInfo();
+	this.editor.setValue(value);
+	this.editor.scrollTo(scrollInfo.left, scrollInfo.top);
+	let self = this;
+	setTimeout(function() {
+		self.editor.refresh();
+	}, 300);
+};
+
+Vvveb.ModalCodeEditor.getValue = function (value) {
+	return this.editor.getValue();
+};

scss/_builder.scss

@@ -2519,3 +2519,7 @@ body {
 		}*/
 	}
 }
+
+.modal .modal-content {
+    height: 100%;
+}