Full Code edit support in posts

1 files changed, 180 insertions, 180 deletions

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 %}