hatching plans for detached editor

src/builtins/customcss.js

@@ -1,5 +1,5 @@
 import Builtin from "../structs/builtin";
-import {Settings, DataStore, React, Events} from "modules";
+import {Settings, DataStore, React, Utilities} from "modules";
 import CSSEditor from "../ui/customcss/editor";
 
 const electron = require("electron");
@@ -16,7 +16,12 @@ export default new class CustomCSS extends Builtin {
         this.css = "";
     }
 
-    enabled() {
+    async enabled() {
+        if (!window.ace) {
+            Utilities.injectJs("https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.9/ace.js").then(() => {
+                if (window.require.original) window.require = window.require.original;
+            });
+        }
         Settings.registerPanel(this.id, this.name, {
             order: 2,
             element: () => React.createElement(CSSEditor, {
@@ -62,5 +67,63 @@ export default new class CustomCSS extends Builtin {
 
     openDetached() {
         this.log("Should open detached");
+        const options = {
+            width: 500,
+            height: 550,
+            backgroundColor: "#282b30",
+            show: true,
+            resizable: false,
+            maximizable: false,
+            minimizable: false,
+            alwaysOnTop: true,
+            frame: true,
+            center: false,
+            webPreferences: {
+                nodeIntegration: true
+            }
+        };
+
+        const detached = new electron.remote.Browserdetached(options);
+        detached.setMenu(null);
+        detached.loadURL("about:blank");
+        detached.webContents.executeJavaScript(`var electron = require("electron");`);
+        detached.webContents.executeJavaScript(`var sender, receiver = electron.ipcRenderer;`);
+        detached.webContents.executeJavaScript(`receiver.on("bd-handshake", function(emitter, senderID) {
+            console.log(arguments);
+            sender = electron.remote.BrowserWindow.fromId(senderID);
+            receiver.removeAllListeners("bd-handshake");
+        });`);
+        detached.send("bd-handshake", electron.remote.getCurrentWindow().id);
+        React.createElement(CSSEditor, {
+            css: this.css,
+            save: this.saveCSS.bind(this),
+            update: this.insertCSS.bind(this),
+            openNative: this.openNative.bind(this)
+        });
     }
 };
+
+// function addListeners(){
+//     document.getElementById('test').addEventListener('mousedown', mouseDown, false);
+//     window.addEventListener('mouseup', mouseUp, false);
+
+// }
+
+// function mouseUp()
+// {
+//     window.removeEventListener('mousemove', divMove, true);
+// }
+
+// function mouseDown(e){
+//   var div = document.getElementById('test');
+//   offY= e.clientY-parseInt(div.offsetTop);
+//   offX= e.clientX-parseInt(div.offsetLeft);
+//  window.addEventListener('mousemove', divMove, true);
+// }
+
+// function divMove(e){
+//     var div = document.getElementById('test');
+//   div.style.position = 'absolute';
+//   div.style.top = (e.clientY-offY) + 'px';
+//   div.style.left = (e.clientX-offX) + 'px';
+// }

src/index.js

@@ -46,7 +46,7 @@ export default class CoreWrapper {
     }
 }
 
-export function patchModuleLoad() {
+function patchModuleLoad() {
     const namespace = "betterdiscord";
     const prefix = `${namespace}/`;
     const Module = require("module");
@@ -76,6 +76,8 @@ export function patchModuleLoad() {
     };
 }
 
+patchModuleLoad();
+
 // export function getPluginByModule(module) {
 //     return this.localContent.find(plugin => module.filename === plugin.contentPath || module.filename.startsWith(plugin.contentPath + path.sep));
 // }

src/modules/core.js

@@ -40,7 +40,7 @@ Core.prototype.init = async function() {
     //     // QuickEmoteMenu.init();
     // });
 
-    this.injectExternals();
+    // this.injectExternals();
 
     await this.checkForGuilds();
     BDV2.initialize();
@@ -83,11 +83,6 @@ Core.prototype.checkForGuilds = function() {
     });
 };
 
-Core.prototype.injectExternals = async function() {
-    await Utilities.injectJs("https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.9/ace.js");
-    if (window.require.original) window.require = window.require.original;
-};
-
 Core.prototype.initObserver = function () {
     const mainObserver = new MutationObserver((mutations) => {
 

src/ui/customcss/detached.jsx

@@ -0,0 +1,98 @@
+import {React, Settings} from "modules";
+
+import Checkbox from "./checkbox";
+import SettingsTitle from "../settings/title";
+
+export default class CssEditor extends React.Component {
+
+    constructor(props) {
+        super(props);
+
+        this.toggleLiveUpdate = this.toggleLiveUpdate.bind(this);
+        this.updateCss = this.updateCss.bind(this);
+        this.saveCss = this.saveCss.bind(this);
+        this.detach = this.detach.bind(this);
+        this.openNative = this.openNative.bind(this);
+    }
+
+    componentDidMount() {
+        this.editor = ace.edit("bd-customcss-editor");
+
+        // Add id to the ace menu container
+        const originalShow = this.editor.keyBinding.$defaultHandler.commands.showSettingsMenu.exec;
+        this.editor.keyBinding.$defaultHandler.commands.showSettingsMenu.exec = function() {
+            originalShow.apply(this, arguments);
+            const observer = new MutationObserver(mutations => {
+                for (const mutation of mutations) {
+                    if (!mutation.addedNodes.length || !(mutation.addedNodes[0] instanceof Element)) continue;
+                    const node = mutation.addedNodes[0];
+                    if (node.parentElement !== document.body || !node.querySelector("#ace_settingsmenu")) continue;
+                    node.id = "ace_settingsmenu_container";
+                    observer.disconnect();
+                }
+            });
+            observer.observe(document.body, {childList: true});
+        };
+
+        this.editor.setTheme("ace/theme/monokai");
+        this.editor.session.setMode("ace/mode/css");
+        this.editor.setShowPrintMargin(false);
+        this.editor.setFontSize(14);
+        this.editor.on("change", () => {
+            if (!Settings.get("settings", "customcss", "liveUpdate")) return;
+            this.saveCss();
+            this.updateCss();
+        });
+    }
+
+    componentWillUnmount() {
+        this.editor.destroy();
+    }
+
+    render() {
+
+        return [
+            <SettingsTitle text="Custom CSS Editor" />,
+            <div className="editor-wrapper">
+                <div id="bd-customcss-editor" className="editor">{this.props.css}</div>
+            </div>,
+            <div id="bd-customcss-attach-controls">
+                <div className="checkbox-group">
+                    <Checkbox text="Live Update" onChange={this.toggleLiveUpdate} checked={Settings.get("settings", "customcss", "liveUpdate")} />
+                </div>
+                <div id="bd-customcss-detach-controls-button">
+                    <button className="btn btn-primary" onClick={this.updateCss}>Update</button>
+                    <button className="btn btn-primary" onClick={this.saveCss}>Save</button>
+                    <button className="btn btn-primary" onClick={this.openNative}>Open Natively</button>
+                    <button className="btn btn-primary" onClick={this.detach}>Detach</button>
+                    <span className="small-notice">Unsaved changes are lost on detach</span>
+                    <div className="help-text">
+                        Press <code className="inline">ctrl</code>+<code className="inline">,</code> with the editor focused to access the editor&apos;s settings.
+                    </div>
+                </div>
+            </div>
+        ];
+    }
+
+    toggleLiveUpdate(checked) {
+        Settings.set("settings", "customcss", "liveUpdate", checked);
+    }
+
+    updateCss() {
+        const newCss = this.editor.session.getValue();
+        if (this.props.update) this.props.update(newCss);
+    }
+
+    saveCss() {
+        const newCss = this.editor.session.getValue();
+        if (this.props.save) this.props.save(newCss);
+    }
+
+    detach() {
+        if (this.props.openDetached) this.props.openDetached();
+    }
+
+    openNative() {
+        if (this.props.openNative) this.props.openNative();
+    }
+}