WIP: Version switcher

client/components/Dropdown/DropdownMenu.jsx

@@ -8,7 +8,15 @@ import { DropdownWrapper } from '../Dropdown';
 
 const DropdownMenu = forwardRef(
   (
-    { children, anchor, 'aria-label': ariaLabel, align, className, classes },
+    {
+      children,
+      anchor,
+      'aria-label': ariaLabel,
+      align,
+      className,
+      classes,
+      maxHeight
+    },
     ref
   ) => {
     // Note: need to use a ref instead of a state to avoid stale closures.
@@ -32,7 +40,7 @@ const DropdownMenu = forwardRef(
       focusedRef.current = false;
       setTimeout(() => {
         if (!focusedRef.current) {
-          close();
+          // close();
         }
       }, 200);
     };
@@ -59,6 +67,7 @@ const DropdownMenu = forwardRef(
             }}
             onBlur={handleBlur}
             onFocus={handleFocus}
+            style={maxHeight && { maxHeight, overflowY: 'auto' }}
           >
             {children}
           </DropdownWrapper>
@@ -84,14 +93,16 @@ DropdownMenu.propTypes = {
   classes: PropTypes.shape({
     button: PropTypes.string,
     list: PropTypes.string
-  })
+  }),
+  maxHeight: PropTypes.string
 };
 
 DropdownMenu.defaultProps = {
   anchor: null,
   align: 'right',
   className: '',
-  classes: {}
+  classes: {},
+  maxHeight: undefined
 };
 
 export default DropdownMenu;

client/constants.js

@@ -10,6 +10,7 @@ export const STOP_ACCESSIBLE_OUTPUT = 'STOP_ACCESSIBLE_OUTPUT';
 
 export const OPEN_PREFERENCES = 'OPEN_PREFERENCES';
 export const CLOSE_PREFERENCES = 'CLOSE_PREFERENCES';
+export const SET_PREFERENCES_TAB = 'SET_PREFERENCES_TAB';
 export const SET_FONT_SIZE = 'SET_FONT_SIZE';
 export const SET_LINE_NUMBERS = 'SET_LINE_NUMBERS';
 

client/modules/IDE/actions/preferences.js

@@ -14,6 +14,13 @@ function updatePreferences(formParams, dispatch) {
     });
 }
 
+export function setPreferencesTab(value) {
+  return {
+    type: ActionTypes.SET_PREFERENCES_TAB,
+    value
+  };
+}
+
 export function setFontSize(value) {
   return (dispatch, getState) => {
     // eslint-disable-line

client/modules/IDE/components/Editor/index.jsx

@@ -72,6 +72,7 @@ import UnsavedChangesIndicator from '../UnsavedChangesIndicator';
 import { EditorContainer, EditorHolder } from './MobileEditor';
 import { FolderIcon } from '../../../../common/icons';
 import IconButton from '../../../../common/IconButton';
+import VersionIndicator from '../VersionIndicator';
 
 emmet(CodeMirror);
 
@@ -104,6 +105,7 @@ class Editor extends React.Component {
     this.showFind = this.showFind.bind(this);
     this.showReplace = this.showReplace.bind(this);
     this.getContent = this.getContent.bind(this);
+    this.updateFileContent = this.updateFileContent.bind(this);
   }
 
   componentDidMount() {
@@ -223,7 +225,8 @@ class Editor extends React.Component {
       tidyCode: this.tidyCode,
       showFind: this.showFind,
       showReplace: this.showReplace,
-      getContent: this.getContent
+      getContent: this.getContent,
+      updateFileContent: this.updateFileContent
     });
   }
 
@@ -257,6 +260,9 @@ class Editor extends React.Component {
       if (!prevProps.unsavedChanges) {
         setTimeout(() => this.props.setUnsavedChanges(false), 400);
       }
+    } else if (this.getContent().content !== this.props.file.content) {
+      // TODO: make this not break regular edits!
+      // this._cm.setValue(this.props.file.content);
     }
     if (this.props.fontSize !== prevProps.fontSize) {
       this._cm.getWrapperElement().style[
@@ -332,7 +338,8 @@ class Editor extends React.Component {
       tidyCode: this.tidyCode,
       showFind: this.showFind,
       showReplace: this.showReplace,
-      getContent: this.getContent
+      getContent: this.getContent,
+      updateFileContent: this.updateFileContent
     });
   }
 
@@ -369,6 +376,16 @@ class Editor extends React.Component {
     return updatedFile;
   }
 
+  updateFileContent(id, src) {
+    const file = this._docs[id];
+    if (file) {
+      this._docs[id] = CodeMirror.Doc(src, this._docs[id].modeOption);
+      if (id === this.props.file.id) {
+        this._cm.swapDoc(this._docs[id]);
+      }
+    }
+  }
+
   handleKeyUp = () => {
     const lineNumber = parseInt(this._cm.getCursor().line + 1, 10);
     this.setState({ currentLine: lineNumber });
@@ -562,6 +579,9 @@ class Editor extends React.Component {
                   </span>
                   <Timer />
                 </div>
+                <div className="editor__library-version">
+                  <VersionIndicator />
+                </div>
               </div>
               <article
                 ref={(element) => {