Changes needed for VSCode webview extension

src/index.html

@@ -175,6 +175,10 @@
           </span>
 
           <button class="bbcode-button" onclick="app.insertEmoji()" title="Emoji">😉</button>
+
+          <!-- ko if:vsCodeApi != null -->
+          <button class="bbcode-button" id="edit-node-in-vscode" onclick="app.editNodeInVisualStudioCodeEditor(app.editing())">🛠️ Edit in Visual Studio Code Text Editor</button>
+          <!-- /ko -->
 
           <div class="add-link" style="position: absolute;">
             <div class="menu">

src/js/classes/app.js

@@ -31,7 +31,7 @@ export var App = function(name, version) {
   this.setTheme = function(name, e) {
     let themeName = e ? e.target.value : name;
     const theme = document.getElementById('theme-stylesheet');
-    theme.href = `./public/themes/${themeName}.css`;
+    theme.href = Utils.getPublicPath(`themes/${themeName}.css`);
   };
 
   this.setLanguage = function(language, e) {
@@ -157,7 +157,12 @@ export var App = function(name, version) {
     $('#app').show();
     ko.applyBindings(self, $('#app')[0]);
 
-    self.newNode().title('Start');
+    // this is set in the VSCode extension YarnEditorPanel
+    // this is true when we're opening a file in the VSCode extension;
+    // adding that start node here was causing issues with arrows (because of race conditions)
+    if (!window.editingVsCodeFile) {
+      self.newNode().title('Start');
+    }
 
     self.settings.apply();
 
@@ -358,6 +363,27 @@ export var App = function(name, version) {
         );
       }
     };
+
+    // this is how the VSCode extension sends its messages back to the app
+    window.addEventListener('message', (event) => {
+      const message = event.data;
+
+      // sent whenever the temporary file that's open gets changed
+      if (message.type === 'UpdateNode') {
+        self.nodes().forEach(node => {
+          if (
+            node
+              .title()
+              .trim()
+              .toLowerCase() === message.payload.nodeName.trim().toLowerCase()
+          ) {
+            node.body(message.payload.nodeText);
+            self.updateVsCodeExtensionDocument();
+          }
+        });
+      }
+    });
+
     // Callback for embedding in other webapps
     var event = new CustomEvent('yarnReady');
     event.document = document;
@@ -418,6 +444,20 @@ export var App = function(name, version) {
     }
   };
 
+  // This should be called whenever we want to mark the document that the VSCcode extension has opened as changed.
+  // If we're not in the extension working on an open file, this is a no-op.
+  // This should be called after every action that will result in a changed document.
+  this.updateVsCodeExtensionDocument = function() {
+    if (window.vsCodeApi && window.editingVsCodeFile) {
+      window.vsCodeApi.postMessage({
+        type: 'DocumentEdit',
+
+        // we just send the whole doc here every time...
+        payload: data.getSaveData(data.editingType())
+      });
+    }
+  };
+
   this.recordNodeAction = function(action, node) {
     //we can't go forward in 'time' when
     //new actions have been made
@@ -443,6 +483,8 @@ export var App = function(name, version) {
     }
 
     self.nodeHistory.push(historyItem);
+
+    self.updateVsCodeExtensionDocument();
   };
 
   this.historyDirection = function(direction) {
@@ -475,6 +517,7 @@ export var App = function(name, version) {
       }
 
       self.nodeFuture.push(historyItem);
+      self.updateVsCodeExtensionDocument();
     } //redo undone actions
     else {
       if (action == 'created') {
@@ -484,6 +527,7 @@ export var App = function(name, version) {
       }
 
       self.nodeHistory.push(historyItem);
+      self.updateVsCodeExtensionDocument();
     }
   };
 
@@ -531,6 +575,7 @@ export var App = function(name, version) {
       self.workspace.removeNodesFromSelection(nodes[i]);
       nodes[i].remove();
     }
+    self.updateVsCodeExtensionDocument();
   };
 
   this.cloneNodeArray = function(nodeArray) {
@@ -601,6 +646,27 @@ export var App = function(name, version) {
     });
   };
 
+  // called by the "Edit in Visual Studio Code Text Editor" button
+  // this sends a message to the extension telling it to open the node in a text editor
+  this.editNodeInVisualStudioCodeEditor = function(node) {
+    if (window.vsCodeApi) {
+      // updating the document is actually a trick to force VSCode to think the open document is
+      // dirty so that if it's not "pinned" it won't close when the editor swaps
+      self.updateVsCodeExtensionDocument();
+
+      // tell VSCode extension to open our node in a new editor
+      window.vsCodeApi.postMessage({
+        type: "OpenNode",
+        payload: {
+          nodeName: node.title().trim().toLowerCase(),
+          nodeText: self.trimBodyLinks(node.body().trim())
+        }
+      });
+
+      return;
+    }
+  }
+
   this.editNode = function(node) {
     if (!node.active()) {
       return;
@@ -965,6 +1031,8 @@ export var App = function(name, version) {
           self.editing(null);
         });
       }
+
+      self.updateVsCodeExtensionDocument();
     }
   };
 

src/js/classes/data.js

@@ -404,6 +404,12 @@ export var data = {
   },
 
   save: function() {
+    if (window.editingVsCodeFile) {
+      // if we're editing a file in the VSCode extension, it handles
+      // saving the file on its end so we do nothing here
+      return;
+    }
+
     if (self.editingPath())
       self.trySaveCurrent();
     else

src/js/classes/node.js

@@ -132,11 +132,29 @@ export let Node = function(options = {}) {
 
   this.x = function(inX) {
     if (inX != undefined) $(self.element).css({ x: Math.floor(inX) });
+
+    // if we don't have a style here, it means this node is in the
+    // process of being created and self.element doesn't exist yet
+    if (!self.style) {
+      return;
+    }
+
+    // m41 here corresponds to the fourth row and first column of the matrix transform
+    // this is the X value of the transform
     return Math.floor(new WebKitCSSMatrix(self.style.webkitTransform).m41);
   };
 
   this.y = function(inY) {
     if (inY != undefined) $(self.element).css({ y: Math.floor(inY) });
+
+    // if we don't have a style here, it means this node is in the
+    // process of being created and self.element doesn't exist yet
+    if (!self.style) {
+      return;
+    }
+
+    // m42 here corresponds to the fourth row and second column of the matrix transform
+    // this is the X value of the transform
     return Math.floor(new WebKitCSSMatrix(self.style.webkitTransform).m42);
   };
 
@@ -160,6 +178,8 @@ export let Node = function(options = {}) {
     if (app.input.isShiftDown) app.matchConnectedColorID(self);
 
     if (self.selected) app.setSelectedColors(self);
+
+    app.updateVsCodeExtensionDocument();
   };
 
   this.cycleColorUp = function() {
@@ -171,6 +191,8 @@ export let Node = function(options = {}) {
     if (app.input.isShiftDown) app.matchConnectedColorID(self);
 
     if (self.selected) app.setSelectedColors(self);
+
+    app.updateVsCodeExtensionDocument();
   };
 
   this.doCycleColorDown = function() {
@@ -241,6 +263,9 @@ export let Node = function(options = {}) {
         }
 
         app.workspace.updateArrows();
+
+        // this will tell the VSCode extension that we've moved the node
+        app.updateVsCodeExtensionDocument();
       }
     });
 

src/js/classes/settings.js

@@ -1,6 +1,20 @@
+// Get the mechanism to use for storage.
+const getStorage = function() {
+  // if `window.vsCodeApi` exists, we're in the context of the VSCode extension
+  // which handles all of the settings internally, so we don't need to do anything here
+  if (window.vsCodeApi) {
+    return {
+      getItem: () => {},
+      setItem: () => {}
+    };
+  } else {
+    return window.localStorage;
+  }
+};
+
 export const Settings = function(app) {
   const self = this;
-  const storage = window.localStorage;
+  const storage = getStorage();
 
   ko.extenders.persist = function (target, option) {
     target.subscribe(function (newValue) {
@@ -16,6 +30,7 @@ export const Settings = function(app) {
     app.setTheme(self.theme());
     app.setLanguage(self.language());
     app.toggleNightMode();
+    app.setMarkupLanguage(self.markupLanguage());
     app.workspace.setThrottle(self.redrawThrottle());
   };
 

src/js/classes/utils.js

@@ -134,5 +134,18 @@ export var Utils = {
     Date.now ||
     function() {
       return new Date().getTime();
+    },
+
+  // If we're in the context of the VSCode extension webview, we have to use a function
+  // that it puts on window to get the path to public assets since it requires that
+  // they be loaded with fully-qualified, special scheme.
+  //
+  // The "path" parameter here should NOT have a leading slash.
+  getPublicPath: function(path) {
+    if (window.getPublicVsCodeWebviewUri) {
+      return window.getPublicVsCodeWebviewUri(path);
+    } else {
+      return `public${path ? `/${path}` : ''}`;
     }
+  }
 };

src/js/index.js

@@ -1,5 +1,7 @@
 import '../scss/index.scss';
 
+import { Utils } from './classes/utils';
+
 import * as OfflinePluginRuntime from 'offline-plugin/runtime';
 OfflinePluginRuntime.install();
 
@@ -12,7 +14,7 @@ import 'jquery-mousewheel';
 
 import ace from 'ace-builds/src-noconflict/ace';
 window.ace = ace;
-ace.config.set('basePath', 'public'); //needed to import yarn mode
+ace.config.set('basePath', Utils.getPublicPath()); //needed to import yarn mode
 window.define = ace.define;
 
 import 'ace-builds/src-min-noconflict/ext-language_tools';

src/js/libs/spellcheck_ace.js

@@ -7,8 +7,10 @@ var nspell = require('nspell');
 // You should configure these classes.
 var editor = 'editor'; // This should be the id of your editor element.
 
-var dicPath = 'public/dictionaries/en/index.dic';
-var affPath = 'public/dictionaries/en/index.aff';
+var utils = require('../classes/utils');
+
+var dicPath = utils.Utils.getPublicPath('dictionaries/en/index.dic');
+var affPath = utils.Utils.getPublicPath('dictionaries/en/index.aff');
 // var dicPath =
 //   "https://raw.githubusercontent.com/elastic/hunspell/master/dicts/en_US/en_US.dic";
 // var affPath =
@@ -28,8 +30,8 @@ var dictionary = null;
 
 function load_dictionary(dicLanguage) {
   console.info(`Loading ${dicLanguage} hunspell dictionary locally`);
-  dicPath = `public/dictionaries/${dicLanguage}/index.dic`;
-  affPath = `public/dictionaries/${dicLanguage}/index.aff`;
+  dicPath = utils.Utils.getPublicPath(`dictionaries/${dicLanguage}/index.dic`);
+  affPath = utils.Utils.getPublicPath(`dictionaries/${dicLanguage}/index.aff`);
 
   $.get(dicPath, function(data) {
     dicData = data;

src/scss/style.css

@@ -76,6 +76,8 @@ input[type='checkbox'] {
 
 #app {
   position: absolute;
+  top: 0px;
+  left: 0px;
   width: 100%;
   height: 100%;
   cursor: default;
@@ -552,6 +554,11 @@ input[type='checkbox'] {
   background-color: rgb(255, 255, 172);
 }
 
+#edit-node-in-vscode {
+  float: right;
+  font-size: 125%;
+}
+
 /* SPECIAL CHECKBOX START */
 .styled-checkbox input {
   -webkit-transition-duration: 0.4s; /* Safari */