Merge pull request #9 from prathamVaidya/issue-8-autosave-without-switching-modes

prathamVaidya · web-flow · commit a01ba8345e26 · 2024-08-19T05:00:24.000+05:30
🎨  Added autosave without switching modes
diff --git a/package.json b/package.json
@@ -1,10 +1,10 @@
 {
   "name": "supercode-tinymce-plugin",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "description": "An Enhanced and open source Code editor for TinyMCE with improved integration with TinyMCE view",
   "main": "index.js",
   "scripts": {
-    "build": "cp src/* supercode/ -r && vite build",
+    "build": "cp -r src/* supercode/ && vite build",
     "start": "rm -rf public/tinymce && cp -r node_modules/tinymce public && storybook dev -p 6006",
     "build-storybook": "cp -r node_modules/tinymce public && storybook build",
     "test": "echo \"Error: no test specified\" && exit 1"
diff --git a/src/plugin.js b/src/plugin.js
@@ -5,7 +5,7 @@
  * Repository: https://github.com/prathamVaidya/supercode-tinymce-plugin
  * Author: Pratham Vaidya
  * License: GPL-3.0
- * Version: 1.2.0
+ * Version: 1.2.1
  * 
  * Released under the GPL-3.0 License.
  */
@@ -192,6 +192,14 @@
         document.head.append(style);
     }
 
+    const debounce = (func, delay) => {
+        let timeoutId;
+        return (...args) => {
+            clearTimeout(timeoutId);
+            timeoutId = setTimeout(() => func.apply(null, args), delay);
+        };
+    };
+
     // on plugin load
     const mainPlugin = function(editor) {
 
@@ -450,20 +458,34 @@
                 modal.element.style.display = 'none';
             }, 10)
         };
+
+        // Save editor content to tinymce editor on ace editor change
+        const liveSave = () => {
+            editor.undoManager.transact(function() {
+                let value = aceEditor.getValue();
+                if(Config.renderer){
+                    value = Config.renderer(value);
+                }
+                editor.setContent(value);
+            });
+            editor.nodeChanged(); 
+        };
     
         const onSaveHandler = () => {
             editor.focus();
-            editor.undoManager.transact(function() {
-            let value = aceEditor.getValue();
-            if(Config.renderer){
-                value = Config.renderer(value);
+            if (Config.fallbackModal) {
+                editor.undoManager.transact(function() {
+                let value = aceEditor.getValue();
+                if(Config.renderer){
+                    value = Config.renderer(value);
+                }
+                editor.setContent(value);
+                });
+                editor.selection.setCursorLocation();
+                editor.nodeChanged();
             }
-            editor.setContent(value);
-            });
-            editor.selection.setCursorLocation();
-            editor.nodeChanged();
             editor.execCommand('ToggleView', false, 'supercode');
-        }
+        };
 
         const onKeyDownHandler = (e) => {
             if((e.key === ' ' && e.ctrlKey) || e.key === 'Escape'){
@@ -484,6 +506,11 @@
             if(!session){
                 session = ace.createEditSession(content, `ace/mode/${Config.language}`);
                 session.setUseWrapMode(Config.wrap);
+                // Attach live save to ace editor for in-editor source view
+                if (!Config.fallbackModal) {
+                    const debouncedSave = debounce(liveSave, 300);
+                    session.on('change', debouncedSave);
+                }
             }
             aceEditor.setSession(session);
             session.setValue(content);
diff --git a/stories/TinymceEditor.jsx b/stories/TinymceEditor.jsx
@@ -2,8 +2,6 @@ import React, { useRef } from 'react';
 import { Editor } from '@tinymce/tinymce-react';
 import '../public/tinymce/tinymce.js'
 
-
-
 const sizes = {
   'none': {
   
@@ -22,20 +20,7 @@ const sizes = {
   }
 }
 
-export default function TinymceEditor({ skin = 'oxide', mode, value, size = 'none'}) {
-  const editorRef = useRef(null);
-
-    const commonConfiguration = {
-    skin,
-    base_url: '/tinymce',
-    promotion: false,
-    statusbar: false,
-    menubar: false,
-    highlight_on_focus: false,
-    content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }',
-      }
-
-  const modes = {
+const modes = {
     "super" : {
       plugins: [
         'advlist', 'autolink', 'lists', 'link', 'anchor',
@@ -45,6 +30,9 @@ export default function TinymceEditor({ skin = 'oxide', mode, value, size = 'non
         'bold italic forecolor | alignleft aligncenter ' +
         'alignright alignjustify | bullist numlist outdent indent | ' +
         'codeeditor | supercode',
+        supercode: {
+          fontSize: 12,
+        }
     },
     "classic" : {
       plugins: [
@@ -58,6 +46,22 @@ export default function TinymceEditor({ skin = 'oxide', mode, value, size = 'non
     }
   }
 
+export default function TinymceEditor({ skin = 'oxide', mode, value, size = 'none'}) {
+  const editorRef = useRef(null);
+
+    const commonConfiguration = {
+    skin,
+    base_url: '/tinymce',
+    promotion: false,
+    statusbar: false,
+    menubar: false,
+    highlight_on_focus: false,
+    content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }',
+
+      }
+
+
+
   React.useEffect(() => {
     console.debug('skin reloaded');
   }, [skin])
diff --git a/supercode/plugin.js b/supercode/plugin.js
@@ -5,7 +5,7 @@
  * Repository: https://github.com/prathamVaidya/supercode-tinymce-plugin
  * Author: Pratham Vaidya
  * License: GPL-3.0
- * Version: 1.2.0
+ * Version: 1.2.1
  * 
  * Released under the GPL-3.0 License.
  */
@@ -192,6 +192,14 @@
         document.head.append(style);
     }
 
+    const debounce = (func, delay) => {
+        let timeoutId;
+        return (...args) => {
+            clearTimeout(timeoutId);
+            timeoutId = setTimeout(() => func.apply(null, args), delay);
+        };
+    };
+
     // on plugin load
     const mainPlugin = function(editor) {
 
@@ -450,20 +458,34 @@
                 modal.element.style.display = 'none';
             }, 10)
         };
+
+        // Save editor content to tinymce editor on ace editor change
+        const liveSave = () => {
+            editor.undoManager.transact(function() {
+                let value = aceEditor.getValue();
+                if(Config.renderer){
+                    value = Config.renderer(value);
+                }
+                editor.setContent(value);
+            });
+            editor.nodeChanged(); 
+        };
     
         const onSaveHandler = () => {
             editor.focus();
-            editor.undoManager.transact(function() {
-            let value = aceEditor.getValue();
-            if(Config.renderer){
-                value = Config.renderer(value);
+            if (Config.fallbackModal) {
+                editor.undoManager.transact(function() {
+                let value = aceEditor.getValue();
+                if(Config.renderer){
+                    value = Config.renderer(value);
+                }
+                editor.setContent(value);
+                });
+                editor.selection.setCursorLocation();
+                editor.nodeChanged();
             }
-            editor.setContent(value);
-            });
-            editor.selection.setCursorLocation();
-            editor.nodeChanged();
             editor.execCommand('ToggleView', false, 'supercode');
-        }
+        };
 
         const onKeyDownHandler = (e) => {
             if((e.key === ' ' && e.ctrlKey) || e.key === 'Escape'){
@@ -484,6 +506,11 @@
             if(!session){
                 session = ace.createEditSession(content, `ace/mode/${Config.language}`);
                 session.setUseWrapMode(Config.wrap);
+                // Attach live save to ace editor for in-editor source view
+                if (!Config.fallbackModal) {
+                    const debouncedSave = debounce(liveSave, 300);
+                    session.on('change', debouncedSave);
+                }
             }
             aceEditor.setSession(session);
             session.setValue(content);
diff --git a/supercode/plugin.min.js b/supercode/plugin.min.js
@@ -1,20 +1,20 @@
 !function() {
   let e = null;
   tinymce.PluginManager.add("supercode", function(o) {
-    let t, n, r, d = 0, a = false;
+    let t, n, r, a = 0, d = false;
     const c = { theme: "chrome", fontSize: 14, wrap: true, icon: void 0, iconName: "sourcecode", autocomplete: false, language: "html", renderer: null, parser: null, shortcut: true, aceCss: null, fontFamily: null, fallbackModal: false, modalPrimaryColor: "#ffffff", modalSecondaryColor: "#222f3e", dark: false, debug: true }, s = () => {
       const e2 = {};
       c.autocomplete && (e2.enableLiveAutocompletion = true), c.fontFamily && (e2.fontFamily = c.fontFamily), r.setOptions(e2), r.setTheme(`ace/theme/${c.theme}`), r.setFontSize(c.fontSize), r.setShowPrintMargin(false);
-    }, i = (e2, o2) => {
+    }, l = (e2, o2) => {
       const t2 = o2.cloneNode(true);
       t2.style.position = "relative";
       const n2 = t2.querySelector(".tox-menubar");
       n2 && (n2.innerHTML = "<b style='font-size: 14px; font-weight: bold; padding: 11px 9px;'>Source Code Editor</b>");
-      let r2 = null, d2 = false;
+      let r2 = null, a2 = false;
       t2.querySelectorAll(".tox-tbtn, .tox-split-button").forEach((e3) => {
-        "supercode" != e3.getAttribute("data-mce-name") ? ("overflow-button" === e3.getAttribute("data-mce-name") && (r2 = e3), e3.classList.remove("tox-tbtn--enabled"), e3.classList.add("tox-tbtn--disabled"), e3.removeAttribute("data-mce-name")) : (d2 = true, e3.setAttribute("data-mce-name", "supercode-toggle"), e3.classList.add("tox-tbtn--enabled"), e3.onclick = y);
-      }), !d2 && r2 && (r2.classList = "tox-tbtn tox-tbtn--enabled", r2.innerHTML = `<span class="tox-icon tox-tbtn__icon-wrap">${c.icon}</span>`, r2.onclick = y), e2.innerHTML = "", e2.append(t2);
-    }, l = (e2, o2) => {
+        "supercode" != e3.getAttribute("data-mce-name") ? ("overflow-button" === e3.getAttribute("data-mce-name") && (r2 = e3), e3.classList.remove("tox-tbtn--enabled"), e3.classList.add("tox-tbtn--disabled"), e3.removeAttribute("data-mce-name")) : (a2 = true, e3.setAttribute("data-mce-name", "supercode-toggle"), e3.classList.add("tox-tbtn--enabled"), e3.onclick = b);
+      }), !a2 && r2 && (r2.classList = "tox-tbtn tox-tbtn--enabled", r2.innerHTML = `<span class="tox-icon tox-tbtn__icon-wrap">${c.icon}</span>`, r2.onclick = b), e2.innerHTML = "", e2.append(t2);
+    }, i = (e2, o2) => {
       e2.style.width = o2 + "px", e2.style.height = "100%", e2.style.position = "relative", ((e3) => {
         if (e3.attachShadow({ mode: "open" }), c.aceCss) {
           const o4 = new CSSStyleSheet();
@@ -84,43 +84,57 @@ Use debug:false option to disable this warning`)), c.fallbackModal || (true ===
         })("\n\n    :root{\n        --supercode-modal-primary: #ffffff;\n        --supercode-modal-secondary: #222f3e;\n        --supercode-modal-border: rgba(0, 0, 0, 0.1);\n    }\n\n    /* Media query for mobile devices */\n    @media only screen and (max-width: 767px) {\n        #supercode-modal {\n            width: 100% !important;\n            height: 100% !important;\n            border-radius: 0 !important;\n        }\n    }\n    .disable-scroll {\n        overflow: hidden;\n    }\n    #supercode-modal-container {\n        position: fixed;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        z-index: 990;\n        display: none;\n        opacity: 0;\n        transition: opacity 0.1s linear;\n    }\n    #supercode-backdrop {\n        position: absolute;\n        top: 0;\n        left: 0;\n        background: black;\n        opacity: 0.7;\n        width: 100%;\n        height: 100%;\n        z-index: 1;\n    }\n    #supercode-modal {\n        width: 90%;\n        height: 80%;\n        max-width: 1200px;\n        z-index: 2;\n        overflow: hidden;\n        border-radius: 10px;\n        display: flex;\n        flex-direction: column;\n        background: var(--supercode-modal-primary);\n    }\n    #supercode-header {\n        display: flex;\n        padding: 0.5rem 1rem;\n        border-bottom: 1px solid var(--supercode-modal-border);\n        color: var(--supercode-modal-secondary);\n    }\n    #supercode-modal h1 {\n        flex-grow: 1;\n        margin: auto;\n        font-size: 14px;\n    }\n    #supercode-close-btn {\n        background: none;\n        border: none;\n        padding: 0;\n        height: 100%;\n        cursor: pointer;\n        fill: var(--supercode-modal-secondary);\n    }\n    #supercode-editor {\n        width: 100%;\n        height: 100%;\n        position: relative;\n    }\n    #supercode-footer {\n        padding: 0.5rem 1rem;\n        display: flex;\n        justify-content: end;\n        gap: 1rem;\n        border-top: 1px solid var(--supercode-modal-border);\n    }\n    #supercode-footer button {\n        padding: 0.5rem 1rem;\n        border-radius: 5px;\n        font-weight: bold;\n        border: none;\n        cursor: pointer;\n        min-width: 5rem;\n        transition: opacity 0.1s linear;\n    }\n    #supercode-footer button:hover {\n        opacity: 0.8;\n    }\n    #supercode-cancel-btn {\n        background: transparent;\n        color: var(--supercode-modal-secondary);\n    }\n    #supercode-save-btn {\n        background: var(--supercode-modal-secondary);\n        color: var(--supercode-modal-primary);\n    }\n    "), document.body.append(o2), e = { element: o2, editor: ace.edit(o2.querySelector("#supercode-editor")) };
       }
       r = e.editor, s(), e.element.querySelector("#supercode-backdrop").onclick = m, e.element.querySelector("#supercode-close-btn").onclick = m, e.element.querySelector("#supercode-cancel-btn").onclick = m, e.element.querySelector("#supercode-save-btn").onclick = () => {
-        y(), m();
+        b(), m();
       }, c.shortcut && e.element.querySelector("#supercode-editor").addEventListener("keydown", u), document.querySelector("body").classList.add("disable-scroll"), document.body.style.setProperty("--supercode-modal-primary", c.modalPrimaryColor), document.body.style.setProperty("--supercode-modal-secondary", c.modalSecondaryColor), c.dark && document.body.style.setProperty("--supercode-modal-border", "rgba(255, 255, 255, 0.1)"), e.element.querySelector("#supercode-close-btn").innerHTML = ((_c = (_b = (_a = o.ui.registry).getAll) == null ? void 0 : _b.call(_a).icons) == null ? void 0 : _c.close) ?? '<svg width="24" height="24"><path d="M17.3 8.2 13.4 12l3.9 3.8a1 1 0 0 1-1.5 1.5L12 13.4l-3.8 3.9a1 1 0 0 1-1.5-1.5l3.9-3.8-3.9-3.8a1 1 0 0 1 1.5-1.5l3.8 3.9 3.8-3.9a1 1 0 0 1 1.5 1.5Z" fill-rule="evenodd"></path></svg>', e.element.style.display = "flex", setTimeout(() => {
         e.element.style.opacity = 1;
-      }, 10), h();
+      }, 10), f();
     }, m = () => {
       c.shortcut && removeEventListener("keydown", u), document.querySelector("body").classList.remove("disable-scroll"), e.element.style.opacity = 0, o.focus(), setTimeout(() => {
         e.element.style.display = "none";
       }, 10);
     }, y = () => {
-      o.focus(), o.undoManager.transact(function() {
+      o.undoManager.transact(function() {
         let e2 = r.getValue();
         c.renderer && (e2 = c.renderer(e2)), o.setContent(e2);
-      }), o.selection.setCursorLocation(), o.nodeChanged(), o.execCommand("ToggleView", false, "supercode");
-    }, b = (e2) => {
-      (" " === e2.key && e2.ctrlKey || "Escape" === e2.key) && y();
-    }, h = () => {
+      }), o.nodeChanged();
+    }, b = () => {
+      o.focus(), c.fallbackModal && (o.undoManager.transact(function() {
+        let e2 = r.getValue();
+        c.renderer && (e2 = c.renderer(e2)), o.setContent(e2);
+      }), o.selection.setCursorLocation(), o.nodeChanged()), o.execCommand("ToggleView", false, "supercode");
+    }, h = (e2) => {
+      (" " === e2.key && e2.ctrlKey || "Escape" === e2.key) && b();
+    }, f = () => {
       let e2 = (t2 = o.getContent(), c.parser ? c.parser(t2) : html_beautify(t2));
       var t2;
-      n || (n = ace.createEditSession(e2, `ace/mode/${c.language}`), n.setUseWrapMode(c.wrap)), r.setSession(n), n.setValue(e2), r.gotoLine(1 / 0), r.focus();
-    }, f = function() {
+      if (!n && (n = ace.createEditSession(e2, `ace/mode/${c.language}`), n.setUseWrapMode(c.wrap), !c.fallbackModal)) {
+        const e3 = /* @__PURE__ */ ((e4, o2) => {
+          let t3;
+          return (...n2) => {
+            clearTimeout(t3), t3 = setTimeout(() => e4.apply(null, n2), o2);
+          };
+        })(y, 300);
+        n.on("change", e3);
+      }
+      r.setSession(n), n.setValue(e2), r.gotoLine(1 / 0), r.focus();
+    }, g = function() {
       if (c.fallbackModal)
         p();
       else {
         const e2 = o.getContainer();
-        d && (a = d != e2.clientWidth), d = e2.clientWidth, !a && t || (t = e2.querySelector(".tox-editor-header")), o.execCommand("ToggleView", false, "supercode");
+        a && (d = a != e2.clientWidth), a = e2.clientWidth, !d && t || (t = e2.querySelector(".tox-editor-header")), o.execCommand("ToggleView", false, "supercode");
       }
     };
     if (!c.fallbackModal) {
       const e2 = { onShow: (e3) => {
         const o2 = e3.getContainer();
-        a && (i(o2.querySelector(".supercode-header"), t), o2.querySelector(".supercode-body ").style.width = d + "px", r.resize()), 0 === o2.childElementCount && (o2.style.padding = 0, o2.style.display = "flex", o2.style.flexDirection = "column", o2.innerHTML = '<div class="supercode-header"></div><div class="supercode-body"></div>', c.shortcut && o2.addEventListener("keydown", b), i(o2.querySelector(".supercode-header"), t), l(o2.querySelector(".supercode-body "), d)), h();
+        d && (l(o2.querySelector(".supercode-header"), t), o2.querySelector(".supercode-body ").style.width = a + "px", r.resize()), 0 === o2.childElementCount && (o2.style.padding = 0, o2.style.display = "flex", o2.style.flexDirection = "column", o2.innerHTML = '<div class="supercode-header"></div><div class="supercode-body"></div>', c.shortcut && o2.addEventListener("keydown", h), l(o2.querySelector(".supercode-header"), t), i(o2.querySelector(".supercode-body "), a)), f();
       }, onHide: () => {
-        c.shortcut && removeEventListener("keydown", b);
+        c.shortcut && removeEventListener("keydown", h);
       } };
       o.ui.registry.addView("supercode", e2);
     }
-    return o.ui.registry.addButton("supercode", { icon: c.iconName, tooltip: "Source Code Editor (Ctrl + space)", onAction: f }), o.ui.registry.addMenuItem("supercode", { icon: c.iconName, text: "Source Code", onAction: f }), o.ui.registry.addContextMenu("supercode", { update: (e2) => "supercode" }), c.shortcut && o.shortcuts.add("ctrl+32", "Toggles Source Code Editing Mode", f), { getMetadata: function() {
+    return o.ui.registry.addButton("supercode", { icon: c.iconName, tooltip: "Source Code Editor (Ctrl + space)", onAction: g }), o.ui.registry.addMenuItem("supercode", { icon: c.iconName, text: "Source Code", onAction: g }), o.ui.registry.addContextMenu("supercode", { update: (e2) => "supercode" }), c.shortcut && o.shortcuts.add("ctrl+32", "Toggles Source Code Editing Mode", g), { getMetadata: function() {
       return { name: "Supercode", url: "https://github.com/prathamVaidya/supercode-tinymce-plugin" };
     } };
   });
