Updates

components/lib/editors/AceEditor.tsx

@@ -69,7 +69,13 @@ export default function AceEditor({
                 theme: darkMode
                     ? "ace/theme/tomorrow_night_eighties"
                     : "ace/theme/ace_light",
-                value: content,
+                value: (() => {
+                    try {
+                        return JSON.stringify(JSON.parse(content), null, 4);
+                    } catch (error) {
+                        return content;
+                    }
+                })(),
                 placeholder: placeholder ? placeholder : "",
                 enableBasicAutocompletion: true,
                 enableLiveAutocompletion: true,
@@ -108,7 +114,7 @@ export default function AceEditor({
             return function () {
                 editor.destroy();
             };
-        }, [refresh, darkMode, ready, externalRefresh]);
+        }, [refresh, darkMode, ready, externalRefresh, content]);
 
         React.useEffect(() => {
             const htmlClassName = document.documentElement.className;

components/lib/editors/TinyMCE/index.tsx

@@ -84,7 +84,7 @@ export default function TinyMCEEditor<KeyType extends string>({
                 if (defaultValue) editor.setContent(defaultValue);
                 setReady(true);
 
-                editor.on("input", (e) => {
+                editor.on("change", (e) => {
                     changeHandler?.(editor.getContent());
                 });
 
@@ -92,7 +92,7 @@ export default function TinyMCEEditor<KeyType extends string>({
                     useParentStyles(editor);
                 }
             },
-            base_url: "https://datasquirel.com/tinymce-public",
+            base_url: "https://www.datasquirel.com/tinymce-public",
             body_class: "twui-tinymce",
             placeholder,
             relative_urls: true,
@@ -118,6 +118,9 @@ export default function TinyMCEEditor<KeyType extends string>({
                 "bg-background-light dark:bg-background-dark",
                 wrapperWrapperProps?.className
             )}
+            onInput={(e) => {
+                console.log(`Input Detected`);
+            }}
         >
             {showLabel && (
                 <label

components/lib/editors/TinyMCE/useTinyMCE.tsx

@@ -16,7 +16,8 @@ export default function useTinyMCE() {
         }
 
         const script = document.createElement("script");
-        script.src = "https://datasquirel.com/tinymce-public/tinymce.min.js";
+        script.src =
+            "https://www.datasquirel.com/tinymce-public/tinymce.min.js";
         script.async = true;
 
         document.head.appendChild(script);