Full Code edit support in posts

4 files changed, 867 insertions, 181 deletions

diff --git a/blog/views.py b/blog/views.py
index f1966994..e2dd28f5 100644
--- a/blog/views.py
+++ b/blog/views.py
@@ -158,7 +158,7 @@ def post(request, slug):
 
         # code stored in .ql-syntax class
         soup = BeautifulSoup(post.body, 'html.parser')
-        code_blocks = soup.find_all('pre', class_='ql-syntax')
+        code_blocks = soup.find_all('pre')
         for code_block in code_blocks:
             data_language = code_block.get('data-language')
             if data_language == 'true':
diff --git a/static/css/styles.css b/static/css/styles.css
index 326148c5..87149669 100644
--- a/static/css/styles.css
+++ b/static/css/styles.css
@@ -410,6 +410,10 @@ blockquote {
     max-width: 710px;
 }
 
+#preview img.block {
+    max-width: 100%;
+}
+
 #article-body h2,
 #article-body h1,
 #editor-container h2,
diff --git a/static/js/editor-theme.js b/static/js/editor-theme.js
new file mode 100644
index 00000000..0a2772f1
--- /dev/null
+++ b/static/js/editor-theme.js
@@ -0,0 +1,682 @@
+const themeData = {
+  base: "vs-dark",
+  inherit: true,
+  rules: [
+    {
+      background: "011627",
+      token: "",
+    },
+    {
+      foreground: "637777",
+      token: "comment",
+    },
+    {
+      foreground: "addb67",
+      token: "string",
+    },
+    {
+      foreground: "ecc48d",
+      token: "vstring.quoted",
+    },
+    {
+      foreground: "ecc48d",
+      token: "variable.other.readwrite.js",
+    },
+    {
+      foreground: "5ca7e4",
+      token: "string.regexp",
+    },
+    {
+      foreground: "5ca7e4",
+      token: "string.regexp keyword.other",
+    },
+    {
+      foreground: "5f7e97",
+      token: "meta.function punctuation.separator.comma",
+    },
+    {
+      foreground: "f78c6c",
+      token: "constant.numeric",
+    },
+    {
+      foreground: "f78c6c",
+      token: "constant.character.numeric",
+    },
+    {
+      foreground: "addb67",
+      token: "variable",
+    },
+    {
+      foreground: "c792ea",
+      token: "keyword",
+    },
+    {
+      foreground: "c792ea",
+      token: "punctuation.accessor",
+    },
+    {
+      foreground: "c792ea",
+      token: "storage",
+    },
+    {
+      foreground: "c792ea",
+      token: "meta.var.expr",
+    },
+    {
+      foreground: "c792ea",
+      token:
+        "meta.class meta.method.declaration meta.var.expr storage.type.jsm",
+    },
+    {
+      foreground: "c792ea",
+      token: "storage.type.property.js",
+    },
+    {
+      foreground: "c792ea",
+      token: "storage.type.property.ts",
+    },
+    {
+      foreground: "c792ea",
+      token: "storage.type.property.tsx",
+    },
+    {
+      foreground: "82aaff",
+      token: "storage.type",
+    },
+    {
+      foreground: "ffcb8b",
+      token: "entity.name.class",
+    },
+    {
+      foreground: "ffcb8b",
+      token: "meta.class entity.name.type.class",
+    },
+    {
+      foreground: "addb67",
+      token: "entity.other.inherited-class",
+    },
+    {
+      foreground: "82aaff",
+      token: "entity.name.function",
+    },
+    {
+      foreground: "addb67",
+      token: "punctuation.definition.variable",
+    },
+    {
+      foreground: "d3423e",
+      token: "punctuation.section.embedded",
+    },
+    {
+      foreground: "d6deeb",
+      token: "punctuation.terminator.expression",
+    },
+    {
+      foreground: "d6deeb",
+      token: "punctuation.definition.arguments",
+    },
+    {
+      foreground: "d6deeb",
+      token: "punctuation.definition.array",
+    },
+    {
+      foreground: "d6deeb",
+      token: "punctuation.section.array",
+    },
+    {
+      foreground: "d6deeb",
+      token: "meta.array",
+    },
+    {
+      foreground: "d9f5dd",
+      token: "punctuation.definition.list.begin",
+    },
+    {
+      foreground: "d9f5dd",
+      token: "punctuation.definition.list.end",
+    },
+    {
+      foreground: "d9f5dd",
+      token: "punctuation.separator.arguments",
+    },
+    {
+      foreground: "d9f5dd",
+      token: "punctuation.definition.list",
+    },
+    {
+      foreground: "d3423e",
+      token: "string.template meta.template.expression",
+    },
+    {
+      foreground: "d6deeb",
+      token: "string.template punctuation.definition.string",
+    },
+    {
+      foreground: "c792ea",
+      fontStyle: "italic",
+      token: "italic",
+    },
+    {
+      foreground: "addb67",
+      fontStyle: "bold",
+      token: "bold",
+    },
+    {
+      foreground: "82aaff",
+      token: "constant.language",
+    },
+    {
+      foreground: "82aaff",
+      token: "punctuation.definition.constant",
+    },
+    {
+      foreground: "82aaff",
+      token: "variable.other.constant",
+    },
+    {
+      foreground: "7fdbca",
+      token: "support.function.construct",
+    },
+    {
+      foreground: "7fdbca",
+      token: "keyword.other.new",
+    },
+    {
+      foreground: "82aaff",
+      token: "constant.character",
+    },
+    {
+      foreground: "82aaff",
+      token: "constant.other",
+    },
+    {
+      foreground: "f78c6c",
+      token: "constant.character.escape",
+    },
+    {
+      foreground: "addb67",
+      token: "entity.other.inherited-class",
+    },
+    {
+      foreground: "d7dbe0",
+      token: "variable.parameter",
+    },
+    {
+      foreground: "7fdbca",
+      token: "entity.name.tag",
+    },
+    {
+      foreground: "cc2996",
+      token: "punctuation.definition.tag.html",
+    },
+    {
+      foreground: "cc2996",
+      token: "punctuation.definition.tag.begin",
+    },
+    {
+      foreground: "cc2996",
+      token: "punctuation.definition.tag.end",
+    },
+    {
+      foreground: "addb67",
+      token: "entity.other.attribute-name",
+    },
+    {
+      foreground: "addb67",
+      token: "entity.name.tag.custom",
+    },
+    {
+      foreground: "82aaff",
+      token: "support.function",
+    },
+    {
+      foreground: "82aaff",
+      token: "support.constant",
+    },
+    {
+      foreground: "7fdbca",
+      token: "upport.constant.meta.property-value",
+    },
+    {
+      foreground: "addb67",
+      token: "support.type",
+    },
+    {
+      foreground: "addb67",
+      token: "support.class",
+    },
+    {
+      foreground: "addb67",
+      token: "support.variable.dom",
+    },
+    {
+      foreground: "7fdbca",
+      token: "support.constant",
+    },
+    {
+      foreground: "7fdbca",
+      token: "keyword.other.special-method",
+    },
+    {
+      foreground: "7fdbca",
+      token: "keyword.other.new",
+    },
+    {
+      foreground: "7fdbca",
+      token: "keyword.other.debugger",
+    },
+    {
+      foreground: "7fdbca",
+      token: "keyword.control",
+    },
+    {
+      foreground: "c792ea",
+      token: "keyword.operator.comparison",
+    },
+    {
+      foreground: "c792ea",
+      token: "keyword.control.flow.js",
+    },
+    {
+      foreground: "c792ea",
+      token: "keyword.control.flow.ts",
+    },
+    {
+      foreground: "c792ea",
+      token: "keyword.control.flow.tsx",
+    },
+    {
+      foreground: "c792ea",
+      token: "keyword.control.ruby",
+    },
+    {
+      foreground: "c792ea",
+      token: "keyword.control.module.ruby",
+    },
+    {
+      foreground: "c792ea",
+      token: "keyword.control.class.ruby",
+    },
+    {
+      foreground: "c792ea",
+      token: "keyword.control.def.ruby",
+    },
+    {
+      foreground: "c792ea",
+      token: "keyword.control.loop.js",
+    },
+    {
+      foreground: "c792ea",
+      token: "keyword.control.loop.ts",
+    },
+    {
+      foreground: "c792ea",
+      token: "keyword.control.import.js",
+    },
+    {
+      foreground: "c792ea",
+      token: "keyword.control.import.ts",
+    },
+    {
+      foreground: "c792ea",
+      token: "keyword.control.import.tsx",
+    },
+    {
+      foreground: "c792ea",
+      token: "keyword.control.from.js",
+    },
+    {
+      foreground: "c792ea",
+      token: "keyword.control.from.ts",
+    },
+    {
+      foreground: "c792ea",
+      token: "keyword.control.from.tsx",
+    },
+    {
+      foreground: "ffffff",
+      background: "ff2c83",
+      token: "invalid",
+    },
+    {
+      foreground: "ffffff",
+      background: "d3423e",
+      token: "invalid.deprecated",
+    },
+    {
+      foreground: "7fdbca",
+      token: "keyword.operator",
+    },
+    {
+      foreground: "c792ea",
+      token: "keyword.operator.relational",
+    },
+    {
+      foreground: "c792ea",
+      token: "keyword.operator.assignement",
+    },
+    {
+      foreground: "c792ea",
+      token: "keyword.operator.arithmetic",
+    },
+    {
+      foreground: "c792ea",
+      token: "keyword.operator.bitwise",
+    },
+    {
+      foreground: "c792ea",
+      token: "keyword.operator.increment",
+    },
+    {
+      foreground: "c792ea",
+      token: "keyword.operator.ternary",
+    },
+    {
+      foreground: "637777",
+      token: "comment.line.double-slash",
+    },
+    {
+      foreground: "cdebf7",
+      token: "object",
+    },
+    {
+      foreground: "ff5874",
+      token: "constant.language.null",
+    },
+    {
+      foreground: "d6deeb",
+      token: "meta.brace",
+    },
+    {
+      foreground: "c792ea",
+      token: "meta.delimiter.period",
+    },
+    {
+      foreground: "d9f5dd",
+      token: "punctuation.definition.string",
+    },
+    {
+      foreground: "ff5874",
+      token: "constant.language.boolean",
+    },
+    {
+      foreground: "ffffff",
+      token: "object.comma",
+    },
+    {
+      foreground: "7fdbca",
+      token: "variable.parameter.function",
+    },
+    {
+      foreground: "80cbc4",
+      token: "support.type.vendor.property-name",
+    },
+    {
+      foreground: "80cbc4",
+      token: "support.constant.vendor.property-value",
+    },
+    {
+      foreground: "80cbc4",
+      token: "support.type.property-name",
+    },
+    {
+      foreground: "80cbc4",
+      token: "meta.property-list entity.name.tag",
+    },
+    {
+      foreground: "57eaf1",
+      token: "meta.property-list entity.name.tag.reference",
+    },
+    {
+      foreground: "f78c6c",
+      token: "constant.other.color.rgb-value punctuation.definition.constant",
+    },
+    {
+      foreground: "ffeb95",
+      token: "constant.other.color",
+    },
+    {
+      foreground: "ffeb95",
+      token: "keyword.other.unit",
+    },
+    {
+      foreground: "c792ea",
+      token: "meta.selector",
+    },
+    {
+      foreground: "fad430",
+      token: "entity.other.attribute-name.id",
+    },
+    {
+      foreground: "80cbc4",
+      token: "meta.property-name",
+    },
+    {
+      foreground: "c792ea",
+      token: "entity.name.tag.doctype",
+    },
+    {
+      foreground: "c792ea",
+      token: "meta.tag.sgml.doctype",
+    },
+    {
+      foreground: "d9f5dd",
+      token: "punctuation.definition.parameters",
+    },
+    {
+      foreground: "ecc48d",
+      token: "string.quoted",
+    },
+    {
+      foreground: "ecc48d",
+      token: "string.quoted.double",
+    },
+    {
+      foreground: "ecc48d",
+      token: "string.quoted.single",
+    },
+    {
+      foreground: "addb67",
+      token: "support.constant.math",
+    },
+    {
+      foreground: "addb67",
+      token: "support.type.property-name.json",
+    },
+    {
+      foreground: "addb67",
+      token: "support.constant.json",
+    },
+    {
+      foreground: "c789d6",
+      token: "meta.structure.dictionary.value.json string.quoted.double",
+    },
+    {
+      foreground: "80cbc4",
+      token: "string.quoted.double.json punctuation.definition.string.json",
+    },
+    {
+      foreground: "ff5874",
+      token:
+        "meta.structure.dictionary.json meta.structure.dictionary.value constant.language",
+    },
+    {
+      foreground: "d6deeb",
+      token: "variable.other.ruby",
+    },
+    {
+      foreground: "ecc48d",
+      token: "entity.name.type.class.ruby",
+    },
+    {
+      foreground: "ecc48d",
+      token: "keyword.control.class.ruby",
+    },
+    {
+      foreground: "ecc48d",
+      token: "meta.class.ruby",
+    },
+    {
+      foreground: "7fdbca",
+      token: "constant.language.symbol.hashkey.ruby",
+    },
+    {
+      foreground: "e0eddd",
+      background: "a57706",
+      fontStyle: "italic",
+      token: "meta.diff",
+    },
+    {
+      foreground: "e0eddd",
+      background: "a57706",
+      fontStyle: "italic",
+      token: "meta.diff.header",
+    },
+    {
+      foreground: "ef535090",
+      fontStyle: "italic",
+      token: "markup.deleted",
+    },
+    {
+      foreground: "a2bffc",
+      fontStyle: "italic",
+      token: "markup.changed",
+    },
+    {
+      foreground: "a2bffc",
+      fontStyle: "italic",
+      token: "meta.diff.header.git",
+    },
+    {
+      foreground: "a2bffc",
+      fontStyle: "italic",
+      token: "meta.diff.header.from-file",
+    },
+    {
+      foreground: "a2bffc",
+      fontStyle: "italic",
+      token: "meta.diff.header.to-file",
+    },
+    {
+      foreground: "219186",
+      background: "eae3ca",
+      token: "markup.inserted",
+    },
+    {
+      foreground: "d3201f",
+      token: "other.package.exclude",
+    },
+    {
+      foreground: "d3201f",
+      token: "other.remove",
+    },
+    {
+      foreground: "269186",
+      token: "other.add",
+    },
+    {
+      foreground: "ff5874",
+      token: "constant.language.python",
+    },
+    {
+      foreground: "82aaff",
+      token: "variable.parameter.function.python",
+    },
+    {
+      foreground: "82aaff",
+      token: "meta.function-call.arguments.python",
+    },
+    {
+      foreground: "b2ccd6",
+      token: "meta.function-call.python",
+    },
+    {
+      foreground: "b2ccd6",
+      token: "meta.function-call.generic.python",
+    },
+    {
+      foreground: "d6deeb",
+      token: "punctuation.python",
+    },
+    {
+      foreground: "addb67",
+      token: "entity.name.function.decorator.python",
+    },
+    {
+      foreground: "8eace3",
+      token: "source.python variable.language.special",
+    },
+    {
+      foreground: "82b1ff",
+      token: "markup.heading.markdown",
+    },
+    {
+      foreground: "c792ea",
+      fontStyle: "italic",
+      token: "markup.italic.markdown",
+    },
+    {
+      foreground: "addb67",
+      fontStyle: "bold",
+      token: "markup.bold.markdown",
+    },
+    {
+      foreground: "697098",
+      token: "markup.quote.markdown",
+    },
+    {
+      foreground: "80cbc4",
+      token: "markup.inline.raw.markdown",
+    },
+    {
+      foreground: "ff869a",
+      token: "markup.underline.link.markdown",
+    },
+    {
+      foreground: "ff869a",
+      token: "markup.underline.link.image.markdown",
+    },
+    {
+      foreground: "d6deeb",
+      token: "string.other.link.title.markdown",
+    },
+    {
+      foreground: "d6deeb",
+      token: "string.other.link.description.markdown",
+    },
+    {
+      foreground: "82b1ff",
+      token: "punctuation.definition.string.markdown",
+    },
+    {
+      foreground: "82b1ff",
+      token: "punctuation.definition.string.begin.markdown",
+    },
+    {
+      foreground: "82b1ff",
+      token: "punctuation.definition.string.end.markdown",
+    },
+    {
+      foreground: "82b1ff",
+      token: "meta.link.inline.markdown punctuation.definition.string",
+    },
+    {
+      foreground: "7fdbca",
+      token: "punctuation.definition.metadata.markdown",
+    },
+    {
+      foreground: "82b1ff",
+      token: "beginning.punctuation.definition.list.markdown",
+    },
+  ],
+  colors: {
+    "editor.foreground": "#d6deeb",
+    "editor.background": "#011627",
+    "editor.selectionBackground": "#5f7e9779",
+    "editor.lineHighlightBackground": "#010E17",
+    "editorCursor.foreground": "#80a4c2",
+    "editorWhitespace.foreground": "#2e2040",
+    "editorIndentGuide.background": "#5e81ce52",
+    "editor.selectionHighlightBorder": "#122d42",
+  },
+};
diff --git a/templates/blog_admin/edit_post.html b/templates/blog_admin/edit_post.html
index ae17ff9d..ecef6a0a 100644
--- a/templates/blog_admin/edit_post.html
+++ b/templates/blog_admin/edit_post.html
@@ -1,202 +1,202 @@
-{% extends 'blog/partials/base.html' %} {% block content %} {% load static %}
-<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet" />
-<style>
-  button {
-    color: #444;
-  }
-  textarea#body {
-    margin: 10px 0 0 0;
-    width: 710px;
-    height: 400px;
-  }
-</style>
+{% extends 'blog/partials/base.html' %} {% load static %} {% block content %}
+<link
+  rel="stylesheet"
+  href="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.40.0/min/vs/editor/editor.main.min.css"
+/>
 <h1>Editing Post: {{ post.title }}</h1>
-<div style="max-width: 730px">
-  <div id="toolbar-container">
-    <span class="ql-formats">
-      <button class="ql-header" value="1"></button>
-      <button class="ql-header" value="2"></button>
-    </span>
-    <span class="ql-formats">
-      <button class="ql-bold"></button>
-      <button class="ql-italic"></button>
-      <button class="ql-underline"></button>
-      <button class="ql-strike"></button>
-    </span>
-    <span class="ql-formats">
-      <button class="ql-blockquote"></button>
-      <button class="ql-code-block"></button>
-    </span>
-    <span class="ql-formats">
-      <button class="ql-script" value="sub"></button>
-      <button class="ql-script" value="super"></button>
-    </span>
-    <span class="ql-formats">
-      <button class="ql-list" value="ordered"></button>
-      <button class="ql-list" value="bullet"></button>
-    </span>
-    <span class="ql-formats">
-      <select class="ql-align"></select>
-    </span>
-    <span class="ql-formats">
-      <button class="ql-link"></button>
-      <button class="ql-image"></button>
-    </span>
-    <span class="ql-formats">
-      <button class="ql-clean"></button>
-      <button class="ql-html" onclick="toggleHTML()">HTML</button>
-    </span>
+<div id="post-actions-bar" class="mtsbitem" style="width: 730px">
+  <a class="pa-btn" href="javascript:toggleArea('editor');">Code</a>
+  <a class="pa-btn" href="javascript:toggleArea('preview');">Preview</a>
+  <a class="pa-btn" href="javascript:addImage('block');">Image (Block)</a>
+  <a class="pa-btn" href="javascript:addImage('inline');">Image (Inline)</a>
+</div>
+<div
+  id="edit-area"
+  style="
+    border-bottom: solid 1px #311b4f;
+    border-left: solid 1px #311b4f;
+    border-right: solid 1px #311b4f;
+  "
+>
+  <div id="editor" style="width: 730px;"></div>
+  <div id="article-body" style="width: 730px;">
+    <div id="preview" style="padding: 1px 10px;"></div>
   </div>
-  <div id="editor-container"></div>
-  <form action="{% url 'blog-admin:edit-post' post.slug %}" method="post">
-    {% csrf_token %}
-    <div style="display: none" id="HTMLContent">
-      <textarea name="body" id="body">{{ post.body }}</textarea>
-    </div>
-    <br />
-    <button type="submit" class="button button-special">Save</button>
-  </form>
 </div>
-{% endblock %} {% block scripts %}
-<script src="https://cdn.quilljs.com/1.3.6/quill.min.js"></script>
+<div style="padding: 20px 0">
+  <button type="submit" class="button button-special" onclick="savePost()">
+    Save
+  </button>
+</div>
+{% endblock content %} {% block scripts %}
+<script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.40.0/min/vs/loader.js"></script>
+<script src="{% static 'js/editor-theme.js' %}"></script>
 <script>
-  const Delta = Quill.import("delta");
-  let BlockEmbed = Quill.import("blots/block/embed");
+  const postBody = `{{ post.body|safe }}`;
+  var editorInstance;
 
-  class ImageBlock extends BlockEmbed {
-    static create(value) {
-      let node = super.create();
-      node.setAttribute("src", value.url);
+  // default loads
+  $("#editor").css("min-height", $(window).height() + "px");
+  toggleArea("preview");
+  updatePreview(postBody);
 
-      if (value.size == "block") {
-        node.classList.add("block");
+  function toggleArea(areaName) {
+    areas = ["editor", "preview"];
+    const currentArea = areas.find((area) => {
+      return $(`#${area}`).is(":visible");
+    });
+    if (currentArea == areaName) {
+      return;
+    }
+
+    $(`#${areaName}`).toggle();
+    $(`#${areaName}`).promise().done(function() {
+      if ($(`#${areaName}`).is(":visible")) {
+        areas.forEach((area) => {
+          if (area != areaName) {
+            $(`#${area}`).hide();
+          }
+        });
       }
+    });
+  }
 
-      return node;
-    }
+  function updatePreview(HTMLContent) {
+    $("#preview").html(HTMLContent);
+  }
 
-    static value(node) {
-      return {
-        url: node.getAttribute("src"),
-      };
-    }
+  function savePost() {
 
-    html() {
-      const { url } = this.value();
-      return `<img src="${url}">`;
-    }
+    const editor = monaco.editor.getModels()[0];
+    const body = editor.getValue();
+    const formURL = "{% url 'blog-admin:edit-post' post.slug %}";
+    const csrfToken = "{{ csrf_token }}";
+
+    const form = document.createElement("form");
+    form.setAttribute("action", formURL);
+    form.setAttribute("method", "post");
+
+    const csrfTokenInput = document.createElement("input");
+    csrfTokenInput.setAttribute("type", "hidden");
+    csrfTokenInput.setAttribute("name", "csrfmiddlewaretoken");
+    csrfTokenInput.setAttribute("value", csrfToken);
+
+    const bodyInput = document.createElement("textarea");
+    bodyInput.setAttribute("name", "body");
+    bodyInput.setAttribute("id", "body");
+    bodyInput.innerHTML = body;
+
+    form.appendChild(csrfTokenInput);
+    form.appendChild(bodyInput);
 
-    static blotName = "image";
-    static tagName = "img";
+    document.body.appendChild(form);
+    form.submit();
   }
 
-  Quill.register(ImageBlock);
-
-  function imageUpload(formData, quill, range, size) {
-    const imageURL = "{% url 'ignis:upload_image' %}";
-    const headers = {
-      "X-CSRFToken": "{{ csrf_token }}",
-    };
-    $.ajax({
-      url: imageURL,
-      type: "POST",
-      headers: headers,
-      data: formData,
-      processData: false,
-      contentType: false,
-      success: function (data) {
-        const imageURL = data.url;
-        quill.updateContents(
-          new Delta()
-            .retain(range.index)
-            .delete(range.length)
-            .insert({ image: { url: imageURL, size: size } })
-        );
-      },
-      error: function (err) {
-        console.log(err);
-      },
+  function addImage(size) {
+    const fileInput = document.createElement("input");
+    fileInput.setAttribute("type", "file");
+    fileInput.setAttribute("accept", "image/*");
+    fileInput.click();
+
+    fileInput.addEventListener("change", function () {
+      const file = fileInput.files[0];
+      const formURL = "{% url 'ignis:upload_image' %}";
+      const csrfToken = "{{ csrf_token }}";
+
+      const formData = new FormData();
+      formData.append("image", file);
+      formData.append("id", "{{ post.id }}");
+      formData.append("csrfmiddlewaretoken", csrfToken);
+
+      $.ajax({
+        url: formURL,
+        type: "POST",
+        data: formData,
+        processData: false,
+        contentType: false,
+        success: function (data) {
+          const imageURL = data.url;
+          const imageHTML = `<img src="${imageURL}" class="${size}">`;
+          const editor = monaco.editor.getModels()[0];
+          if (editorInstance) {
+            const selection = editorInstance.getSelection();
+            const id = {
+              major: 1,
+              minor: 1,
+            };
+            const text = imageHTML;
+            const op = {
+              identifier: id,
+              range: {
+                startLineNumber: selection?.selectionStartLineNumber || 1,
+                startColumn: selection?.selectionStartColumn || 1,
+                endLineNumber: selection?.positionLineNumber || 1,
+                endColumn: selection?.positionColumn || 1,
+              },
+              text: text,
+              forceMoveMarkers: true,
+            };
+            editorInstance.executeEdits("editor", [op]);
+          }
+        }, // success
+        error: function (data) {
+          console.log("error");
+          console.log(data);
+        }, // error
+      });
     });
   }
-  
-  class CodeBlock extends Quill.import("formats/code-block") {
-    static create(value) {
-      let domNode = super.create();
-      domNode.setAttribute("data-language", value);
-      return domNode;
-    }
-  }
 
-  CodeBlock.blotName = "code-block";
-  CodeBlock.tagName = "pre";
-  Quill.register(CodeBlock);
-
-  const quill = new Quill("#editor-container", {
-    modules: {
-      toolbar: {
-        container: "#toolbar-container",
-        handlers: {
-          "code-block": function() {
-            const language = prompt("Enter language", "text");
-            this.quill.format("code-block", language);
-
-          },
-          image: function () {
-            var size = prompt(
-              "Set Image Size: 0 (default) for inline, 1 for block",
-              "0"
-            );
-            if (size == "0") {
-              size = "";
-            } else if (size == "1") {
-              size = "block";
-            } else {
-              size = "";
-            }
-            let fileInput = this.container.querySelector(
-              "input.ql-image[type=file]"
-            );
-            if (fileInput == null) {
-              fileInput = document.createElement("input");
-              fileInput.setAttribute("type", "file");
-              fileInput.setAttribute(
-                "accept",
-                "image/png, image/gif, image/jpeg, image/bmp, image/x-icon"
-              );
-              fileInput.classList.add("ql-image");
-              fileInput.addEventListener("change", () => {
-                if (fileInput.files != null && fileInput.files[0] != null) {
-                  let range = this.quill.getSelection(true);
-                  const formData = new FormData();
-                  formData.append("image", fileInput.files[0]);
-                  formData.append("id", "{{ post.id }}");
-                  const imageURL = imageUpload(formData, this.quill, range, size);
-                  fileInput.value = "";
-                }
-              });
-              this.container.appendChild(fileInput);
-            }
-            fileInput.click();
-          },
-        },
-      },
+  require.config({
+    paths: {
+      vs: "https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.40.0/min/vs",
     },
-    placeholder: "Compose an epic...",
-    theme: "snow",
   });
+  require(["vs/editor/editor.main"], function () {
+    var editor = monaco.editor.create(document.getElementById("editor"), {
+      language: "html",
+      automaticLayout: true,
+      autoClosingBrackets: "languageDefined",
+      autoClosingQuotes: "always",
+      autoIndent: true,
+      autoSurround: "languageDefined",
+      contextmenu: true,
+      cursorBlinking: "blink",
+      cursorSmoothCaretAnimation: "on",
+      find: {
+        autoFindInSelection: "never",
+        seedSearchStringFromSelection: true,
+        cursorMoveOnType: true,
+        loop: true,
+      },
+      minimap: {
+        enabled: false,
+      },
+      padding: { top: 12, right: 0, bottom: 12, left: 0 },
+      overviewRulerLanes: 0,
+      overviewRulerBorder: false,
+      suggest: {
+        filterGraceful: false,
+        enabled: true,
+        snippetsPreventQuickSuggestions: true,
+        localityBonus: true,
+        showWords: true,
+        showIcons: true,
+      },
+      wordWrap: "on",
+      wrappingIndent: "same",
+      value: postBody,
+    });
 
-  var content = $("#body").val();
-  content = content.replace(/<p><br><\/p>/g, "");
-  //quill.setContents(quill.clipboard.convert(content), "silent");
-  quill.clipboard.dangerouslyPasteHTML(0, content);
-  quill.on("text-change", function (delta, oldDelta, source) {
-      document.getElementById("body").value = quill.root.innerHTML;
-  });
+    editor.onDidChangeModelContent(function (e) {
+      updatePreview(editor.getValue());
+    });
 
-  function toggleHTML() {
-    $("#HTMLContent").toggle();
-  }
+    editorInstance = editor;
 
-  
+    monaco.editor.defineTheme("NightOwl", themeData);
+    monaco.editor.setTheme("NightOwl");
+  });
 </script>
-{% endblock %} 
\ No newline at end of file
+{% endblock scripts %}