Use createViewer in ExportTemplate

src/code_manager/view/EditorView.ts

@@ -22,10 +22,11 @@ export default class CodeEditorView extends View {
   render() {
     const { model, pfx, $el } = this;
     const obj = model.toJSON();
+    const toAppend = model.get('input') || (model as any).getElement?.();
     obj.pfx = pfx;
     $el.html(this.template(obj));
     $el.attr('class', `${pfx}editor-c`);
-    $el.find(`#${pfx}code`).append(model.get('input'));
+    $el.find(`#${pfx}code`).append(toAppend);
     return this;
   }
 }

src/commands/view/ExportTemplate.ts

@@ -18,10 +18,10 @@ export default {
     if (!this.$editors) {
       const oHtmlEd = this.buildEditor('htmlmixed', 'hopscotch', 'HTML');
       const oCsslEd = this.buildEditor('css', 'hopscotch', 'CSS');
-      this.htmlEditor = oHtmlEd.el;
-      this.cssEditor = oCsslEd.el;
+      this.htmlEditor = oHtmlEd.model;
+      this.cssEditor = oCsslEd.model;
       const $editors = $(`<div class="${pfx}export-dl"></div>`);
-      $editors.append(oHtmlEd.$el).append(oCsslEd.$el);
+      $editors.append(oHtmlEd.el).append(oCsslEd.el);
       this.$editors = $editors;
     }
 
@@ -42,23 +42,18 @@ export default {
   },
 
   buildEditor(codeName: string, theme: string, label: string) {
-    const input = document.createElement('textarea');
-    !this.codeMirror && (this.codeMirror = this.cm.getViewer('CodeMirror'));
-
-    const el = this.codeMirror.clone().set({
+    const cm = this.em.CodeManager;
+    const model = cm.createViewer({
       label,
       codeName,
       theme,
-      input,
     });
 
-    const $el = new this.cm.EditorView({
-      model: el,
-      config: this.cm.getConfig(),
-    }).render().$el;
-
-    el.init(input);
+    const el = new cm.EditorView({
+      model,
+      config: cm.getConfig(),
+    } as any).render().el;
 
-    return { el, $el };
+    return { model, el };
   },
 } as CommandObject<{}, { [k: string]: any }>;