small cleanup and editor/preview edit draft

Models/Editor.js

@@ -1,16 +1,18 @@
+import { Markdown } from '../../../jsOMS/Utils/Parser/Markdown.js';
+
 export class Editor {
     constructor (id)
     {
-        this.id     = id;
+        this.id       = id;
-        this.editor = document.getElementById(id);
+        this.editor   = document.getElementById(id);
+        this.markdown = new Markdown.Converter({extensions: [], sanitize: true});
     };
 
     bind ()
     {
         const editorButtons = document.querySelectorAll('#' + this.id + '-tools .editor-button'),
-            editorTitle     = this.editor.getElementsByClassName('editor-title')[0],
+            editorContent   = this.editor.getElementsByTagName('textarea')[0],
-            editorContent   = this.editor.getElementsByClassName('editor-content')[0],
+            editorPreview   = this.editor.getElementsByTagName('article')[0],
-            editorPreview   = this.editor.getElementsByClassName('editor-preview')[0],
             length          = editorButtons.length,
             self            = this;
 
@@ -20,6 +22,10 @@ export class Editor {
                 self.toolsButton(this, event);
             });
         }
+
+        editorContent.addEventListener('change', function() {
+            editorPreview.innerHTML = self.markdown.makeHtml(editorContent.value);
+        })
     };
 
     toolsButton (e, event)

Theme/Backend/Components/Editor/BaseView.php

@@ -47,9 +47,9 @@ class BaseView extends View
         $this->addData('text', $view);
     }
 
-    public function getId() : string
+    public function renderId() : string
     {
-        return $this->id;
+        return $this->printHtml($this->id);
     }
 
     /**

Theme/Backend/Components/Editor/TextView.php

@@ -47,39 +47,39 @@ class TextView extends View
         $this->setTemplate('/Modules/Editor/Theme/Backend/Components/Editor/inline-editor');
     }
 
-    public function getId() : string
+    public function renderId() : string
     {
-        return $this->id;
+        return $this->printHtml($this->id);
     }
 
-    public function getName() : string
+    public function renderName() : string
     {
-        return $this->name;
+        return $this->printHtml($this->name);
     }
 
-    public function getForm() : string
+    public function renderForm() : string
     {
-        return $this->form;
+        return $this->printHtml($this->form);
     }
 
-    public function getPreview() : string
+    public function renderPreview() : string
     {
         return $this->preview;
     }
 
-    public function getPlain() : string
+    public function renderPlain() : string
     {
-        return $this->plain;
+        return $this->printHtml($this->plain);
     }
 
-    public function getTplText() : string
+    public function renderTplText() : string
     {
-        return $this->tplText;
+        return $this->printHtml($this->tplText);
     }
 
-    public function getTplValue() : string
+    public function renderTplValue() : string
     {
-        return $this->tplValue;
+        return $this->printHtml($this->tplValue);
     }
 
     /**

Theme/Backend/Components/Editor/inline-editor-tools.tpl.php

@@ -1,5 +1,5 @@
 <!-- todo: here is a bug! Somehow this causes the main flex to not work properly (example tasks and click edit and make windows smaller to see the nav side bar freak out) somehow the overflow-x is messing something up. -->
-<div id="<?= $this->printHtml($this->getId()); ?>" class="slider click">
+<div id="<?= $this->renderId(); ?>" class="slider click">
     <ul class="h-list">
         <li><i data-editor-button="a" class="btn editor-button fa fa-lg fa-undo"></i>
         <li><i data-editor-button="a" class="btn editor-button fa fa-lg fa-repeat"></i>

Theme/Backend/Components/Editor/inline-editor.tpl.php

@@ -1,26 +1,26 @@
-<div id="<?= $this->printHtml($this->getId()); ?>" class="tabview tab-2 m-editor">
+<div id="<?= $this->renderId(); ?>" class="tabview tab-2 m-editor">
     <ul class="tab-links">
-        <li><label for="<?= $this->printHtml($this->getId()); ?>-c-tab-1"><?= $this->getHtml('Text', 'Editor'); ?></label>
+        <li><label for="<?= $this->renderId(); ?>-c-tab-1"><?= $this->getHtml('Text', 'Editor'); ?></label>
-        <li><label for="<?= $this->printHtml($this->getId()); ?>-c-tab-2"><?= $this->getHtml('Preview', 'Editor'); ?></label>
+        <li><label for="<?= $this->renderId(); ?>-c-tab-2"><?= $this->getHtml('Preview', 'Editor'); ?></label>
     </ul>
     <div class="tab-content">
-        <input type="radio" id="<?= $this->printHtml($this->getId()); ?>-c-tab-1" name="tabular-1" checked>
+        <input type="radio" id="<?= $this->renderId(); ?>-c-tab-1" name="tabular-1" checked>
         <div class="tab">
             <textarea
                 style="height: 300px"
                 placeholder="&#xf040;"
-                name="<?= $this->printHtml($this->getName()); ?>"
+                name="<?= $this->renderName(); ?>"
-                form="<?= $this->printHtml($this->getForm()); ?>"
+                form="<?= $this->renderForm(); ?>"
-                data-tpl-text="<?= $this->printHtml($this->getTplText()); ?>"
+                data-tpl-text="<?= $this->renderTplText(); ?>"
-                data-tpl-value="<?= $this->printHtml($this->getTplValue()); ?>">
+                data-tpl-value="<?= $this->renderTplValue(); ?>">
-                <?= $this->printHtml($this->getPlain()); ?>
+                <?= $this->renderPlain(); ?>
-            </textarea><input type="hidden" id="<?= $this->printHtml($this->getId()); ?>-parsed">
+            </textarea><input type="hidden" id="<?= $this->renderId(); ?>-parsed">
         </div>
 
-        <input type="radio" id="<?= $this->printHtml($this->getId()); ?>-c-tab-2" name="tabular-1">
+        <input type="radio" id="<?= $this->renderId(); ?>-c-tab-2" name="tabular-1">
         <div class="tab">
             <section class="box wf-100">
-                <article><?= $this->getPreview(); ?></article>
+                <article data-tpl-text="<?= $this->renderTplText(); ?>" data-tpl-value="<?= $this->renderTplValue(); ?>"><?= $this->renderPreview(); ?></article>
             </section>
         </div>
     </div>