🔀 merge from feature/mobile-header-dropdown-menu

2020-07-31 10:49:19 -03:00 · 2020-07-31 10:49:19 -03:00 · d42f10e114
commit d42f10e114
parent 6aeeed7ec0 78d4fc42a5
20 changed files with 476 additions and 372 deletions
--- a/client/components/Dropdown.jsx
+++ b/client/components/Dropdown.jsx
@ -16,6 +16,9 @@ const DropdownWrapper = styled.ul`
  right: ${props => (props.right ? 0 : 'initial')};
  left: ${props => (props.left ? 0 : 'initial')};

+  ${props => (props.align === 'right' && 'right: 0;')}
+  ${props => (props.align === 'left' && 'left: 0;')}
+

  text-align: left;
  width: ${remSize(180)};
@ -57,8 +60,8 @@ const DropdownWrapper = styled.ul`
 // TODO: Add Icon to the left of the items in the menu
 // const MaybeIcon = (Element, label) => Element && <Element aria-label={label} />;

-const Dropdown = ({ items, right, left }) => (
-  <DropdownWrapper right={right} left={left}>
+const Dropdown = ({ items, align }) => (
+  <DropdownWrapper align={align} >
    {/* className="nav__items-left" */}
    {items && items.map(({ title, icon, href }) => (
      <li key={`nav-${title && title.toLowerCase()}`}>
@ -73,8 +76,7 @@ const Dropdown = ({ items, right, left }) => (
 );

 Dropdown.propTypes = {
-  right: PropTypes.bool,
-  left: PropTypes.bool,
+  align: PropTypes.oneOf(['left', 'right']),
  items: PropTypes.arrayOf(PropTypes.shape({
    action: PropTypes.func,
    icon: PropTypes.func,
@ -84,8 +86,7 @@ Dropdown.propTypes = {

 Dropdown.defaultProps = {
  items: [],
-  right: false,
-  left: false,
+  align: null
 };

 export default Dropdown;
--- a/client/components/Nav.jsx
+++ b/client/components/Nav.jsx
@ -100,11 +100,11 @@ class Nav extends React.PureComponent {
    const { unsavedChanges, warnIfUnsavedChanges } = this.props;
    if (!unsavedChanges) {
      this.props.showToast(1500);
-      this.props.setToastText('Opened new sketch.');
+      this.props.setToastText('Toast.OpenedNewSketch');
      this.props.newProject();
    } else if (warnIfUnsavedChanges && warnIfUnsavedChanges()) {
      this.props.showToast(1500);
-      this.props.setToastText('Opened new sketch.');
+      this.props.setToastText('Toast.OpenedNewSketch');
      this.props.newProject();
    }
    this.setDropdown('none');
@ -172,7 +172,7 @@ class Nav extends React.PureComponent {
  handleLangSelection(event) {
    i18next.changeLanguage(event.target.value);
    this.props.showToast(1500);
-    this.props.setToastText('LangChange');
+    this.props.setToastText('Toast.LangChange');
    this.setDropdown('none');
  }

@ -240,13 +240,13 @@ class Nav extends React.PureComponent {
    return (
      <ul className="nav__items-left">
        <li className="nav__item-logo">
-          <LogoIcon role="img" aria-label="p5.js Logo" focusable="false" className="svg__logo" />
+          <LogoIcon role="img" aria-label={this.props.t('Common.p5logoARIA')} focusable="false" className="svg__logo" />
        </li>
        <li className="nav__item nav__item--no-icon">
          <Link to="/" className="nav__back-link">
            <CaretLeftIcon className="nav__back-icon" focusable="false" aria-hidden="true" />
            <span className="nav__item-header">
-              {this.props.t('BackEditor')}
+              {this.props.t('Nav.BackEditor')}
            </span>
          </Link>
        </li>
@ -258,7 +258,7 @@ class Nav extends React.PureComponent {
    return (
      <ul className="nav__items-left">
        <li className="nav__item-logo">
-          <LogoIcon role="img" aria-label="p5.js Logo" focusable="false" className="svg__logo" />
+          <LogoIcon role="img" aria-label={this.props.t('Common.p5logoARIA')} focusable="false" className="svg__logo" />
        </li>
        <li className={navDropdownState.file}>
          <button
@ -271,7 +271,7 @@ class Nav extends React.PureComponent {
              }
            }}
          >
-            <span className="nav__item-header">{this.props.t('File')}</span>
+            <span className="nav__item-header">{this.props.t('Nav.File.Title')}</span>
            <TriangleIcon className="nav__item-header-triangle" focusable="false" aria-hidden="true" />
          </button>
          <ul className="nav__dropdown">
@ -281,7 +281,7 @@ class Nav extends React.PureComponent {
                onFocus={this.handleFocusForFile}
                onBlur={this.handleBlur}
              >
-                {this.props.t('New')}
+                {this.props.t('Nav.File.New')}
              </button>
            </li>
            { getConfig('LOGIN_ENABLED') && (!this.props.project.owner || this.isUserOwner()) &&
@ -291,7 +291,7 @@ class Nav extends React.PureComponent {
                onFocus={this.handleFocusForFile}
                onBlur={this.handleBlur}
              >
-                {this.props.t('Save')}
+                {this.props.t('Common.Save')}
                <span className="nav__keyboard-shortcut">{metaKeyName}+S</span>
              </button>
            </li> }
@ -302,7 +302,7 @@ class Nav extends React.PureComponent {
                onFocus={this.handleFocusForFile}
                onBlur={this.handleBlur}
              >
-                {this.props.t('Duplicate')}
+                {this.props.t('Nav.File.Duplicate')}
              </button>
            </li> }
            { this.props.project.id &&
@ -312,7 +312,7 @@ class Nav extends React.PureComponent {
                onFocus={this.handleFocusForFile}
                onBlur={this.handleBlur}
              >
-                {this.props.t('Share')}
+                {this.props.t('Nav.File.Share')}
              </button>
            </li> }
            { this.props.project.id &&
@ -322,7 +322,7 @@ class Nav extends React.PureComponent {
                onFocus={this.handleFocusForFile}
                onBlur={this.handleBlur}
              >
-                {this.props.t('Download')}
+                {this.props.t('Nav.File.Download')}
              </button>
            </li> }
            { this.props.user.authenticated &&
@ -333,7 +333,7 @@ class Nav extends React.PureComponent {
                onBlur={this.handleBlur}
                onClick={this.setDropdownForNone}
              >
-                {this.props.t('Open')}
+                {this.props.t('Nav.File.Open')}
              </Link>
            </li> }
            {getConfig('UI_COLLECTIONS_ENABLED') &&
@ -346,7 +346,7 @@ class Nav extends React.PureComponent {
                  onBlur={this.handleBlur}
                  onClick={this.setDropdownForNone}
                >
-                  {this.props.t('AddToCollection')}
+                  {this.props.t('Nav.File.AddToCollection')}
                </Link>
              </li>}
            { getConfig('EXAMPLES_ENABLED') &&
@ -357,7 +357,7 @@ class Nav extends React.PureComponent {
                onBlur={this.handleBlur}
                onClick={this.setDropdownForNone}
              >
-                {this.props.t('Examples')}
+                {this.props.t('Nav.File.Examples')}
              </Link>
            </li> }
          </ul>
@ -373,7 +373,7 @@ class Nav extends React.PureComponent {
              }
            }}
          >
-            <span className="nav__item-header">{this.props.t('Edit')}</span>
+            <span className="nav__item-header">{this.props.t('Nav.Edit.Title')}</span>
            <TriangleIcon className="nav__item-header-triangle" focusable="false" aria-hidden="true" />
          </button>
          <ul className="nav__dropdown" >
@ -386,7 +386,7 @@ class Nav extends React.PureComponent {
                onFocus={this.handleFocusForEdit}
                onBlur={this.handleBlur}
              >
-                {this.props.t('TidyCode')}
+                {this.props.t('Nav.Edit.TidyCode')}
                <span className="nav__keyboard-shortcut">{'\u21E7'}+Tab</span>
              </button>
            </li>
@ -396,7 +396,7 @@ class Nav extends React.PureComponent {
                onFocus={this.handleFocusForEdit}
                onBlur={this.handleBlur}
              >
-                {this.props.t('Find')}
+                {this.props.t('Nav.Edit.Find')}
                <span className="nav__keyboard-shortcut">{metaKeyName}+F</span>
              </button>
            </li>
@ -406,7 +406,7 @@ class Nav extends React.PureComponent {
                onFocus={this.handleFocusForEdit}
                onBlur={this.handleBlur}
              >
-                {this.props.t('FindNext')}
+                {this.props.t('Nav.Edit.FindNext')}
                <span className="nav__keyboard-shortcut">{metaKeyName}+G</span>
              </button>
            </li>
@ -416,7 +416,7 @@ class Nav extends React.PureComponent {
                onFocus={this.handleFocusForEdit}
                onBlur={this.handleBlur}
              >
-                {this.props.t('FindPrevious')}
+                {this.props.t('Nav.Edit.FindPrevious')}
                <span className="nav__keyboard-shortcut">{'\u21E7'}+{metaKeyName}+G</span>
              </button>
            </li>
@ -433,7 +433,7 @@ class Nav extends React.PureComponent {
              }
            }}
          >
-            <span className="nav__item-header">{this.props.t('Sketch')}</span>
+            <span className="nav__item-header">{this.props.t('Nav.Sketch.Title')}</span>
            <TriangleIcon className="nav__item-header-triangle" focusable="false" aria-hidden="true" />
          </button>
          <ul className="nav__dropdown">
@ -443,7 +443,7 @@ class Nav extends React.PureComponent {
                onFocus={this.handleFocusForSketch}
                onBlur={this.handleBlur}
              >
-                {this.props.t('AddFile')}
+                {this.props.t('Nav.Sketch.AddFile')}
              </button>
            </li>
            <li className="nav__dropdown-item">
@ -452,7 +452,7 @@ class Nav extends React.PureComponent {
                onFocus={this.handleFocusForSketch}
                onBlur={this.handleBlur}
              >
-                {this.props.t('AddFolder')}
+                {this.props.t('Nav.Sketch.AddFolder')}
              </button>
            </li>
            <li className="nav__dropdown-item">
@ -461,7 +461,7 @@ class Nav extends React.PureComponent {
                onFocus={this.handleFocusForSketch}
                onBlur={this.handleBlur}
              >
-                {this.props.t('Run')}
+                {this.props.t('Nav.Sketch.Run')}
                <span className="nav__keyboard-shortcut">{metaKeyName}+Enter</span>
              </button>
            </li>
@ -471,7 +471,7 @@ class Nav extends React.PureComponent {
                onFocus={this.handleFocusForSketch}
                onBlur={this.handleBlur}
              >
-                {this.props.t('Stop')}
+                {this.props.t('Nav.Sketch.Stop')}
                <span className="nav__keyboard-shortcut">{'\u21E7'}+{metaKeyName}+Enter</span>
              </button>
            </li>
@ -508,7 +508,7 @@ class Nav extends React.PureComponent {
              }
            }}
          >
-            <span className="nav__item-header">{this.props.t('Help')}</span>
+            <span className="nav__item-header">{this.props.t('Nav.Help.Title')}</span>
            <TriangleIcon className="nav__item-header-triangle" focusable="false" aria-hidden="true" />
          </button>
          <ul className="nav__dropdown">
@ -518,7 +518,7 @@ class Nav extends React.PureComponent {
                onBlur={this.handleBlur}
                onClick={this.handleKeyboardShortcuts}
              >
-                {this.props.t('KeyboardShortcuts')}
+                {this.props.t('Nav.Help.KeyboardShortcuts')}
              </button>
            </li>
            <li className="nav__dropdown-item">
@ -529,7 +529,7 @@ class Nav extends React.PureComponent {
                onFocus={this.handleFocusForHelp}
                onBlur={this.handleBlur}
                onClick={this.setDropdownForNone}
-              >{this.props.t('Reference')}
+              >{this.props.t('Nav.Help.Reference')}
              </a>
            </li>
            <li className="nav__dropdown-item">
@ -539,7 +539,7 @@ class Nav extends React.PureComponent {
                onBlur={this.handleBlur}
                onClick={this.setDropdownForNone}
              >
-                {this.props.t('About')}
+                {this.props.t('Nav.Help.About')}
              </Link>
            </li>
          </ul>
@ -562,7 +562,7 @@ class Nav extends React.PureComponent {
              }
            }}
          >
-            <span className="nav__item-header"> {this.props.t('Lang')}</span>
+            <span className="nav__item-header"> {this.props.t('Nav.Lang')}</span>
            <TriangleIcon className="nav__item-header-triangle" focusable="false" aria-hidden="true" />
          </button>
          <ul className="nav__dropdown">
@ -608,13 +608,13 @@ class Nav extends React.PureComponent {
      <ul className="nav__items-right" title="user-menu">
        <li className="nav__item">
          <Link to="/login" className="nav__auth-button">
-            <span className="nav__item-header">{this.props.t('Login')}</span>
+            <span className="nav__item-header">{this.props.t('Nav.Login.Login')}</span>
          </Link>
        </li>
-        <span className="nav__item-or">{this.props.t('LoginOr')}</span>
+        <span className="nav__item-or">{this.props.t('Nav.Login.LoginOr')}</span>
        <li className="nav__item">
          <Link to="/signup" className="nav__auth-button">
-            <span className="nav__item-header">{this.props.t('SignUp')}</span>
+            <span className="nav__item-header">{this.props.t('Nav.Login.SignUp')}</span>
          </Link>
        </li>
      </ul>
@ -625,7 +625,7 @@ class Nav extends React.PureComponent {
    return (
      <ul className="nav__items-right" title="user-menu">
        <li className="nav__item">
-          <span>{this.props.t('Hello')}, {this.props.user.username}!</span>
+          <span>{this.props.t('Nav.Auth.Hello')}, {this.props.user.username}!</span>
        </li>
        <span className="nav__item-spacer">|</span>
        <li className={navDropdownState.account}>
@ -640,7 +640,7 @@ class Nav extends React.PureComponent {
              }
            }}
          >
-            {this.props.t('MyAccount')}
+            {this.props.t('Nav.Auth.MyAccount')}
            <TriangleIcon className="nav__item-header-triangle" focusable="false" aria-hidden="true" />
          </button>
          <ul className="nav__dropdown">
@ -651,7 +651,7 @@ class Nav extends React.PureComponent {
                onBlur={this.handleBlur}
                onClick={this.setDropdownForNone}
              >
-                {this.props.t('MySketches')}
+                {this.props.t('Nav.Auth.MySketches')}
              </Link>
            </li>
            {getConfig('UI_COLLECTIONS_ENABLED') &&
@ -662,7 +662,7 @@ class Nav extends React.PureComponent {
                  onBlur={this.handleBlur}
                  onClick={this.setDropdownForNone}
                >
-                  {this.props.t('MyCollections')}
+                  {this.props.t('Nav.Auth.MyCollections')}
                </Link>
              </li>
            }
@ -673,7 +673,7 @@ class Nav extends React.PureComponent {
                onBlur={this.handleBlur}
                onClick={this.setDropdownForNone}
              >
-                {this.props.t('MyAssets')}
+                {this.props.t('Nav.Auth.MyAssets')}
              </Link>
            </li>
            <li className="nav__dropdown-item">
@ -683,7 +683,7 @@ class Nav extends React.PureComponent {
                onBlur={this.handleBlur}
                onClick={this.setDropdownForNone}
              >
-                {this.props.t('Settings')}
+                {this.props.t('Preferences.Settings')}
              </Link>
            </li>
            <li className="nav__dropdown-item">
@ -692,7 +692,7 @@ class Nav extends React.PureComponent {
                onFocus={this.handleFocusForAccount}
                onBlur={this.handleBlur}
              >
-                {this.props.t('LogOut')}
+                {this.props.t('Nav.Auth.LogOut')}
              </button>
            </li>
          </ul>
@ -842,5 +842,5 @@ const mapDispatchToProps = {
  setAllAccessibleOutput
 };

-export default withTranslation('WebEditor')(withRouter(connect(mapStateToProps, mapDispatchToProps)(Nav)));
+export default withTranslation()(withRouter(connect(mapStateToProps, mapDispatchToProps)(Nav)));
 export { Nav as NavComponent };
--- a/client/components/test/snapshots/Nav.test.jsx.snap
+++ b/client/components/test/snapshots/Nav.test.jsx.snap
@ -14,7 +14,6 @@ exports[`Nav renders correctly 1`] = `
          class="nav__item-logo"
        >
          <test-file-stub
-            aria-label="p5.js Logo"
            classname="svg__logo"
            focusable="false"
            role="img"
--- a/client/components/useAsModal.jsx
+++ b/client/components/useAsModal.jsx
@ -0,0 +1,10 @@
+import React from 'react';
+import { useModalBehavior } from '../utils/custom-hooks';
+
+export default (component) => {
+  const [visible, trigger, setRef] = useModalBehavior();
+
+  const wrapper = () => <div ref={setRef}> {visible && component} </div>; // eslint-disable-line
+
+  return [trigger, wrapper];
+};
--- a/client/i18n.js
+++ b/client/i18n.js
@ -16,11 +16,10 @@ const options = {

 i18n
  .use(initReactI18next) // pass the i18n instance to react-i18next.
-  .use(LanguageDetector)// to detect the language from currentBrowser
+  // .use(LanguageDetector)// to detect the language from currentBrowser
  .use(Backend) // to fetch the data from server
  .init({
    lng: 'en-US',
-    defaultNS: 'WebEditor',
    fallbackLng, // if user computer language is not on the list of available languages, than we will be using the fallback language specified earlier
    debug: false,
    backend: options,
--- a/client/modules/IDE/actions/project.js
+++ b/client/modules/IDE/actions/project.js
@ -157,19 +157,19 @@ export function saveProject(selectedFile = null, autosave = false) {
          if (!autosave) {
            if (state.ide.justOpenedProject && state.preferences.autosave) {
              dispatch(showToast(5500));
-              dispatch(setToastText('Sketch saved.'));
-              setTimeout(() => dispatch(setToastText('Autosave enabled.')), 1500);
+              dispatch(setToastText('Toast.SketchSaved'));
+              setTimeout(() => dispatch(setToastText('Toast.AutosaveEnabled')), 1500);
              dispatch(resetJustOpenedProject());
            } else {
              dispatch(showToast(1500));
-              dispatch(setToastText('Sketch saved.'));
+              dispatch(setToastText('Toast.SketchSaved'));
            }
          }
        })
        .catch((error) => {
          const { response } = error;
          dispatch(endSavingProject());
-          dispatch(setToastText('Failed to save sketch.'));
+          dispatch(setToastText('Toast.SketchFailedSave'));
          dispatch(showToast(1500));
          if (response.status === 403) {
            dispatch(showErrorModal('staleSession'));
@ -199,19 +199,19 @@ export function saveProject(selectedFile = null, autosave = false) {
        if (!autosave) {
          if (state.preferences.autosave) {
            dispatch(showToast(5500));
-            dispatch(setToastText('Sketch saved.'));
-            setTimeout(() => dispatch(setToastText('Autosave enabled.')), 1500);
+            dispatch(setToastText('Toast.SketchSaved'));
+            setTimeout(() => dispatch(setToastText('Toast.AutosaveEnabled')), 1500);
            dispatch(resetJustOpenedProject());
          } else {
            dispatch(showToast(1500));
-            dispatch(setToastText('Sketch saved.'));
+            dispatch(setToastText('Toast.SketchSaved'));
          }
        }
      })
      .catch((error) => {
        const { response } = error;
        dispatch(endSavingProject());
-        dispatch(setToastText('Failed to save sketch.'));
+        dispatch(setToastText('Toast.SketchFailedSave'));
        dispatch(showToast(1500));
        if (response.status === 403) {
          dispatch(showErrorModal('staleSession'));
--- a/client/modules/IDE/components/About.jsx
+++ b/client/modules/IDE/components/About.jsx
@ -10,23 +10,13 @@ function About(props) {
  return (
    <div className="about__content">
      <Helmet>
-        <title>p5.js Web Editor | About </title>
+        <title> {t('About.TitleHelmet')} </title>
      </Helmet>
      <div className="about__content-column">
-        <SquareLogoIcon className="about__logo" role="img" aria-label="p5.js Logo" focusable="false" />
-        {/* Video button to hello p5 video page */}
-        {/* <p className="about__play-video">
-          <a
-            href="http://hello.p5js.org/"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <PlayIcon className="about__play-video-button" title="Play Hello Video" />
-          Play hello! video</a>
-        </p>  */}
+        <SquareLogoIcon className="about__logo" role="img" aria-label={t('Common.p5logoARIA')} focusable="false" />
      </div>
      <div className="about__content-column">
-        <h3 className="about__content-column-title">{t('NewP5')}</h3>
+        <h3 className="about__content-column-title">{t('About.NewP5')}</h3>
        <p className="about__content-column-list">
          <a
            href="https://p5js.org/examples/"
@ -34,7 +24,7 @@ function About(props) {
            rel="noopener noreferrer"
          >
            <AsteriskIcon className="about__content-column-asterisk" aria-hidden="true" focusable="false" />
-            {t('Examples')}
+            {t('About.Examples')}
          </a>
        </p>
        <p className="about__content-column-list">
@ -44,12 +34,12 @@ function About(props) {
            rel="noopener noreferrer"
          >
            <AsteriskIcon className="about__content-column-asterisk" aria-hidden="true" focusable="false" />
-            {t('Learn')}
+            {t('About.Learn')}
          </a>
        </p>
      </div>
      <div className="about__content-column">
-        <h3 className="about__content-column-title">{t('Resources')}</h3>
+        <h3 className="about__content-column-title">{t('About.Resources')}</h3>
        <p className="about__content-column-list">
          <a
            href="https://p5js.org/libraries/"
@ -57,7 +47,7 @@ function About(props) {
            rel="noopener noreferrer"
          >
            <AsteriskIcon className="about__content-column-asterisk" aria-hidden="true" focusable="false" />
-            {t('Libraries')}
+            {t('About.Libraries')}
          </a>
        </p>
        <p className="about__content-column-list">
@ -67,7 +57,7 @@ function About(props) {
            rel="noopener noreferrer"
          >
            <AsteriskIcon className="about__content-column-asterisk" aria-hidden="true" focusable="false" />
-            {t('Reference')}
+            {t('Nav.Help.Reference')}
          </a>
        </p>
        <p className="about__content-column-list">
@ -77,7 +67,7 @@ function About(props) {
            rel="noopener noreferrer"
          >
            <AsteriskIcon className="about__content-column-asterisk" aria-hidden="true" focusable="false" />
-            {t('Forum')}
+            {t('About.Forum')}
          </a>
        </p>
      </div>
@ -87,7 +77,7 @@ function About(props) {
            href="https://github.com/processing/p5.js-web-editor"
            target="_blank"
            rel="noopener noreferrer"
-          >{t('Contribute')}
+          >{t('About.Contribute')}
          </a>
        </p>
        <p className="about__footer-list">
@ -95,7 +85,7 @@ function About(props) {
            href="https://github.com/processing/p5.js-web-editor/issues/new"
            target="_blank"
            rel="noopener noreferrer"
-          >{t('Report')}
+          >{t('About.Report')}
          </a>
        </p>
        <p className="about__footer-list">
--- a/client/modules/IDE/components/KeyboardShortcutModal.jsx
+++ b/client/modules/IDE/components/KeyboardShortcutModal.jsx
@ -6,50 +6,50 @@ function KeyboardShortcutModal() {
  const { t } = useTranslation();
  return (
    <div className="keyboard-shortcuts">
-      <h3 className="keyboard-shortcuts__title">{t('CodeEditing')}</h3>
+      <h3 className="keyboard-shortcuts__title">{t('KeyboardShortcuts.CodeEditing.CodeEditing')}</h3>
      <p className="keyboard-shortcuts__description">
-        {t('Code editing keyboard shortcuts follow')} <a href="https://shortcuts.design/toolspage-sublimetext.html" target="_blank" rel="noopener noreferrer">{t('Sublime Text shortcuts')}</a>.
+        {t('KeyboardShortcuts.ShortcutsFollow')} <a href="https://shortcuts.design/toolspage-sublimetext.html" target="_blank" rel="noopener noreferrer">{t('KeyboardShortcuts.SublimeText')}</a>.
      </p>
      <ul className="keyboard-shortcuts__list">
        <li className="keyboard-shortcut-item">
          <span className="keyboard-shortcut__command">{'\u21E7'} + Tab</span>
-          <span>{t('Tidy')}</span>
+          <span>{t('KeyboardShortcuts.CodeEditing.Tidy')}</span>
        </li>
        <li className="keyboard-shortcut-item">
          <span className="keyboard-shortcut__command">
            {metaKeyName} + F
          </span>
-          <span>{t('FindText')}</span>
+          <span>{t('KeyboardShortcuts.CodeEditing.FindText')}</span>
        </li>
        <li className="keyboard-shortcut-item">
          <span className="keyboard-shortcut__command">
            {metaKeyName} + G
          </span>
-          <span>{t('FindNextTextMatch')}</span>
+          <span>{t('KeyboardShortcuts.CodeEditing.FindNextTextMatch')}</span>
        </li>
        <li className="keyboard-shortcut-item">
          <span className="keyboard-shortcut__command">
            {metaKeyName} + {'\u21E7'} + G
          </span>
-          <span>{t('FindPreviousTextMatch')}</span>
+          <span>{t('KeyboardShortcuts.CodeEditing.FindPreviousTextMatch')}</span>
        </li>
        <li className="keyboard-shortcut-item">
          <span className="keyboard-shortcut__command">
            {metaKeyName} + [
          </span>
-          <span>{t('IndentCodeLeft')}</span>
+          <span>{t('KeyboardShortcuts.CodeEditing.IndentCodeLeft')}</span>
        </li>
        <li className="keyboard-shortcut-item">
          <span className="keyboard-shortcut__command">
            {metaKeyName} + ]
          </span>
-          <span>{t('IndentCodeRight')}</span>
+          <span>{t('KeyboardShortcuts.CodeEditing.IndentCodeRight')}</span>
        </li>
        <li className="keyboard-shortcut-item">
          <span className="keyboard-shortcut__command">
            {metaKeyName} + /
          </span>
-          <span>{t('CommentLine')}</span>
+          <span>{t('KeyboardShortcuts.CodeEditing.CommentLine')}</span>
        </li>
      </ul>
      <h3 className="keyboard-shortcuts__title">General</h3>
@ -58,31 +58,31 @@ function KeyboardShortcutModal() {
          <span className="keyboard-shortcut__command">
            {metaKeyName} + S
          </span>
-          <span>{t('Save')}</span>
+          <span>{t('Common.Save')}</span>
        </li>
        <li className="keyboard-shortcut-item">
          <span className="keyboard-shortcut__command">
            {metaKeyName} + Enter
          </span>
-          <span>{t('StartSketch')}</span>
+          <span>{t('KeyboardShortcuts.General.StartSketch')}</span>
        </li>
        <li className="keyboard-shortcut-item">
          <span className="keyboard-shortcut__command">
            {metaKeyName} + {'\u21E7'} + Enter
          </span>
-          <span>{t('StopSketch')}</span>
+          <span>{t('KeyboardShortcuts.General.StopSketch')}</span>
        </li>
        <li className="keyboard-shortcut-item">
          <span className="keyboard-shortcut__command">
            {metaKeyName} + {'\u21E7'} + 1
          </span>
-          <span>{t('TurnOnAccessibleOutput')}</span>
+          <span>{t('KeyboardShortcuts.General.TurnOnAccessibleOutput')}</span>
        </li>
        <li className="keyboard-shortcut-item">
          <span className="keyboard-shortcut__command">
            {metaKeyName} + {'\u21E7'} + 2
          </span>
-          <span>{t('TurnOffAccessibleOutput')}</span>
+          <span>{t('KeyboardShortcuts.General.TurnOffAccessibleOutput')}</span>
        </li>
      </ul>
    </div>
--- a/client/modules/IDE/components/Preferences/index.jsx
+++ b/client/modules/IDE/components/Preferences/index.jsx
@ -99,59 +99,59 @@ class Preferences extends React.Component {
        <Tabs>
          <TabList>
            <div className="tabs__titles">
-              <Tab><h4 className="tabs__title">{this.props.t('GeneralSettings')}</h4></Tab>
-              <Tab><h4 className="tabs__title">{this.props.t('Accessibility')}</h4></Tab>
+              <Tab><h4 className="tabs__title">{this.props.t('Preferences.GeneralSettings')}</h4></Tab>
+              <Tab><h4 className="tabs__title">{this.props.t('Preferences.Accessibility')}</h4></Tab>
            </div>
          </TabList>
          <TabPanel>
            <div className="preference">
-              <h4 className="preference__title">{this.props.t('Theme')}</h4>
+              <h4 className="preference__title">{this.props.t('Preferences.Theme')}</h4>
              <div className="preference__options">
                <input
                  type="radio"
                  onChange={() => this.props.setTheme('light')}
-                  aria-label="light theme on"
+                  aria-label={this.props.t('Preferences.LightThemeARIA')}
                  name="light theme"
                  id="light-theme-on"
                  className="preference__radio-button"
                  value="light"
                  checked={this.props.theme === 'light'}
                />
-                <label htmlFor="light-theme-on" className="preference__option">{this.props.t('Light')}</label>
+                <label htmlFor="light-theme-on" className="preference__option">{this.props.t('Preferences.LightTheme')}</label>
                <input
                  type="radio"
                  onChange={() => this.props.setTheme('dark')}
-                  aria-label="dark theme on"
+                  aria-label={this.props.t('Preferences.DarkThemeARIA')}
                  name="dark theme"
                  id="dark-theme-on"
                  className="preference__radio-button"
                  value="dark"
                  checked={this.props.theme === 'dark'}
                />
-                <label htmlFor="dark-theme-on" className="preference__option">{this.props.t('Dark')}</label>
+                <label htmlFor="dark-theme-on" className="preference__option">{this.props.t('Preferences.DarkTheme')}</label>
                <input
                  type="radio"
                  onChange={() => this.props.setTheme('contrast')}
-                  aria-label="high contrast theme on"
+                  aria-label={this.props.t('Preferences.HighContrastThemeARIA')}
                  name="high contrast theme"
                  id="high-contrast-theme-on"
                  className="preference__radio-button"
                  value="contrast"
                  checked={this.props.theme === 'contrast'}
                />
-                <label htmlFor="high-contrast-theme-on" className="preference__option">{this.props.t('HighContrast')}</label>
+                <label htmlFor="high-contrast-theme-on" className="preference__option">{this.props.t('Preferences.HighContrastTheme')}</label>
              </div>
            </div>
            <div className="preference">
-              <h4 className="preference__title">{this.props.t('TextSize')}</h4>
+              <h4 className="preference__title">{this.props.t('Preferences.TextSize')}</h4>
              <button
                className="preference__minus-button"
                onClick={this.decreaseFontSize}
-                aria-label="decrease font size"
+                aria-label={this.props.t('Preferences.DecreaseFontARIA')}
                disabled={this.state.fontSize <= 8}
              >
                <MinusIcon focusable="false" aria-hidden="true" />
-                <h6 className="preference__label">{this.props.t('Decrease')}</h6>
+                <h6 className="preference__label">{this.props.t('Preferences.DecreaseFont')}</h6>
              </button>
              <form onSubmit={this.onFontInputSubmit}>
                <input
@ -168,133 +168,133 @@ class Preferences extends React.Component {
              <button
                className="preference__plus-button"
                onClick={this.increaseFontSize}
-                aria-label="increase font size"
+                aria-label={this.props.t('Preferences.IncreaseFontARIA')}
                disabled={this.state.fontSize >= 36}
              >
                <PlusIcon focusable="false" aria-hidden="true" />
-                <h6 className="preference__label">{this.props.t('Increase')}</h6>
+                <h6 className="preference__label">{this.props.t('Preferences.IncreaseFont')}</h6>
              </button>
            </div>
            <div className="preference">
-              <h4 className="preference__title">{this.props.t('Autosave')}</h4>
+              <h4 className="preference__title">{this.props.t('Preferences.Autosave')}</h4>
              <div className="preference__options">
                <input
                  type="radio"
                  onChange={() => this.props.setAutosave(true)}
-                  aria-label="autosave on"
+                  aria-label={this.props.t('Preferences.AutosaveOnARIA')}
                  name="autosave"
                  id="autosave-on"
                  className="preference__radio-button"
                  value="On"
                  checked={this.props.autosave}
                />
-                <label htmlFor="autosave-on" className="preference__option">{this.props.t('On')}</label>
+                <label htmlFor="autosave-on" className="preference__option">{this.props.t('Preferences.On')}</label>
                <input
                  type="radio"
                  onChange={() => this.props.setAutosave(false)}
-                  aria-label="autosave off"
+                  aria-label={this.props.t('Preferences.AutosaveOffARIA')}
                  name="autosave"
                  id="autosave-off"
                  className="preference__radio-button"
                  value="Off"
                  checked={!this.props.autosave}
                />
-                <label htmlFor="autosave-off" className="preference__option">{this.props.t('Off')}</label>
+                <label htmlFor="autosave-off" className="preference__option">{this.props.t('Preferences.Off')}</label>
              </div>
            </div>
            <div className="preference">
-              <h4 className="preference__title">{this.props.t('WordWrap')}</h4>
+              <h4 className="preference__title">{this.props.t('Preferences.WordWrap')}</h4>
              <div className="preference__options">
                <input
                  type="radio"
                  onChange={() => this.props.setLinewrap(true)}
-                  aria-label="linewrap on"
+                  aria-label={this.props.t('Preferences.LineWrapOnARIA')}
                  name="linewrap"
                  id="linewrap-on"
                  className="preference__radio-button"
                  value="On"
                  checked={this.props.linewrap}
                />
-                <label htmlFor="linewrap-on" className="preference__option">{this.props.t('On')}</label>
+                <label htmlFor="linewrap-on" className="preference__option">{this.props.t('Preferences.On')}</label>
                <input
                  type="radio"
                  onChange={() => this.props.setLinewrap(false)}
-                  aria-label="linewrap off"
+                  aria-label={this.props.t('Preferences.LineWrapOffARIA')}
                  name="linewrap"
                  id="linewrap-off"
                  className="preference__radio-button"
                  value="Off"
                  checked={!this.props.linewrap}
                />
-                <label htmlFor="linewrap-off" className="preference__option">{this.props.t('Off')}</label>
+                <label htmlFor="linewrap-off" className="preference__option">{this.props.t('Preferences.Off')}</label>
              </div>
            </div>
          </TabPanel>
          <TabPanel>
            <div className="preference">
-              <h4 className="preference__title">{this.props.t('LineNumbers')}</h4>
+              <h4 className="preference__title">{this.props.t('Preferences.LineNumbers')}</h4>
              <div className="preference__options">
                <input
                  type="radio"
                  onChange={() => this.props.setLineNumbers(true)}
-                  aria-label="line numbers on"
+                  aria-label={this.props.t('Preferences.LineNumbersOnARIA')}
                  name="line numbers"
                  id="line-numbers-on"
                  className="preference__radio-button"
                  value="On"
                  checked={this.props.lineNumbers}
                />
-                <label htmlFor="line-numbers-on" className="preference__option">{this.props.t('On')}</label>
+                <label htmlFor="line-numbers-on" className="preference__option">{this.props.t('Preferences.On')}</label>
                <input
                  type="radio"
                  onChange={() => this.props.setLineNumbers(false)}
-                  aria-label="line numbers off"
+                  aria-label={this.props.t('Preferences.LineNumbersOffARIA')}
                  name="line numbers"
                  id="line-numbers-off"
                  className="preference__radio-button"
                  value="Off"
                  checked={!this.props.lineNumbers}
                />
-                <label htmlFor="line-numbers-off" className="preference__option">{this.props.t('Off')}</label>
+                <label htmlFor="line-numbers-off" className="preference__option">{this.props.t('Preferences.Off')}</label>
              </div>
            </div>
            <div className="preference">
-              <h4 className="preference__title">{this.props.t('LintWarningSound')}</h4>
+              <h4 className="preference__title">{this.props.t('Preferences.LintWarningSound')}</h4>
              <div className="preference__options">
                <input
                  type="radio"
                  onChange={() => this.props.setLintWarning(true)}
-                  aria-label="lint warning on"
+                  aria-label={this.props.t('Preferences.LintWarningOnARIA')}
                  name="lint warning"
                  id="lint-warning-on"
                  className="preference__radio-button"
                  value="On"
                  checked={this.props.lintWarning}
                />
-                <label htmlFor="lint-warning-on" className="preference__option">{this.props.t('On')}</label>
+                <label htmlFor="lint-warning-on" className="preference__option">{this.props.t('Preferences.On')}</label>
                <input
                  type="radio"
                  onChange={() => this.props.setLintWarning(false)}
-                  aria-label="lint warning off"
+                  aria-label={this.props.t('Preferences.LintWarningOffARIA')}
                  name="lint warning"
                  id="lint-warning-off"
                  className="preference__radio-button"
                  value="Off"
                  checked={!this.props.lintWarning}
                />
-                <label htmlFor="lint-warning-off" className="preference__option">{this.props.t('Off')}</label>
+                <label htmlFor="lint-warning-off" className="preference__option">{this.props.t('Preferences.Off')}</label>
                <button
                  className="preference__preview-button"
                  onClick={() => beep.play()}
-                  aria-label="preview sound"
+                  aria-label={this.props.t('Preferences.PreviewSoundARIA')}
                >
-                  {this.props.t('PreviewSound')}
+                  {this.props.t('Preferences.PreviewSound')}
                </button>
              </div>
            </div>
            <div className="preference">
-              <h4 className="preference__title">{this.props.t('AccessibleTextBasedCanvas')}</h4>
-              <h6 className="preference__subtitle">{this.props.t('UsedScreenReader')}</h6>
+              <h4 className="preference__title">{this.props.t('Preferences.AccessibleTextBasedCanvas')}</h4>
+              <h6 className="preference__subtitle">{this.props.t('Preferences.UsedScreenReader')}</h6>

              <div className="preference__options">
                <input
@ -302,37 +302,37 @@ class Preferences extends React.Component {
                  onChange={(event) => {
                    this.props.setTextOutput(event.target.checked);
                  }}
-                  aria-label="text output on"
+                  aria-label={this.props.t('Preferences.TextOutputARIA')}
                  name="text output"
                  id="text-output-on"
                  value="On"
                  checked={(this.props.textOutput)}
                />
-                <label htmlFor="text-output-on" className="preference__option preference__canvas">{this.props.t('PlainText')}</label>
+                <label htmlFor="text-output-on" className="preference__option preference__canvas">{this.props.t('Preferences.PlainText')}</label>
                <input
                  type="checkbox"
                  onChange={(event) => {
                    this.props.setGridOutput(event.target.checked);
                  }}
-                  aria-label="table output on"
+                  aria-label={this.props.t('Preferences.TableOutputARIA')}
                  name="table output"
                  id="table-output-on"
                  value="On"
                  checked={(this.props.gridOutput)}
                />
-                <label htmlFor="table-output-on" className="preference__option preference__canvas">{this.props.t('TableText')}</label>
+                <label htmlFor="table-output-on" className="preference__option preference__canvas">{this.props.t('Preferences.TableText')}</label>
                <input
                  type="checkbox"
                  onChange={(event) => {
                    this.props.setSoundOutput(event.target.checked);
                  }}
-                  aria-label="sound output on"
+                  aria-label={this.props.t('Preferences.SoundOutputARIA')}
                  name="sound output"
                  id="sound-output-on"
                  value="On"
                  checked={(this.props.soundOutput)}
                />
-                <label htmlFor="sound-output-on" className="preference__option preference__canvas">{this.props.t('Sound')}</label>
+                <label htmlFor="sound-output-on" className="preference__option preference__canvas">{this.props.t('Preferences.Sound')}</label>
              </div>
            </div>
          </TabPanel>
@ -364,4 +364,4 @@ Preferences.propTypes = {
  t: PropTypes.func.isRequired,
 };

-export default withTranslation('WebEditor')(Preferences);
+export default withTranslation()(Preferences);
--- a/client/modules/IDE/components/Toast.jsx
+++ b/client/modules/IDE/components/Toast.jsx
@ -8,7 +8,7 @@ import * as ToastActions from '../actions/toast';
 import ExitIcon from '../../../images/exit.svg';

 function Toast(props) {
-  const { t } = useTranslation('WebEditor');
+  const { t } = useTranslation();
  return (
    <section className="toast">
      <p>
--- a/client/modules/IDE/components/Toolbar.jsx
+++ b/client/modules/IDE/components/Toolbar.jsx
@ -3,6 +3,7 @@ import React from 'react';
 import { connect } from 'react-redux';
 import { Link } from 'react-router';
 import classNames from 'classnames';
+import { withTranslation } from 'react-i18next';
 import * as IDEActions from '../actions/ide';
 import * as preferenceActions from '../actions/preferences';
 import * as projectActions from '../actions/project';
@ -115,7 +116,7 @@ class Toolbar extends React.Component {
            }}
          />
          <label htmlFor="autorefresh" className="toolbar__autorefresh-label">
-            Auto-refresh
+            {this.props.t('Toolbar.Auto-refresh')}
          </label>
        </div>
        <div className={nameContainerClass}>
@ -197,7 +198,8 @@ Toolbar.propTypes = {
  startSketch: PropTypes.func.isRequired,
  startAccessibleSketch: PropTypes.func.isRequired,
  saveProject: PropTypes.func.isRequired,
-  currentUser: PropTypes.string
+  currentUser: PropTypes.string,
+  t: PropTypes.func.isRequired
 };

 Toolbar.defaultProps = {
@ -224,4 +226,5 @@ const mapDispatchToProps = {
 };

 export const ToolbarComponent = Toolbar;
-export default connect(mapStateToProps, mapDispatchToProps)(Toolbar);
+// export default connect(mapStateToProps, mapDispatchToProps)(Toolbar);
+export default withTranslation()(connect(mapStateToProps, mapDispatchToProps)(Toolbar));
--- a/client/modules/IDE/components/Toolbar.test.jsx
+++ b/client/modules/IDE/components/Toolbar.test.jsx
@ -33,6 +33,7 @@ const renderComponent = (extraProps = {}) => {
      isEditingName: false,
      id: 'id',
    },
+    t: jest.fn()
  }, extraProps);

  render(<ToolbarComponent {...props} />);
--- a/client/modules/IDE/pages/IDEView.jsx
+++ b/client/modules/IDE/pages/IDEView.jsx
@ -64,7 +64,7 @@ function warnIfUnsavedChanges(props) {
    props.persistState();
    window.onbeforeunload = null;
  } else if (props.ide.unsavedChanges) {
-    if (!window.confirm(props.t('WarningUnsavedChanges'))) {
+    if (!window.confirm(props.t('Nav.WarningUnsavedChanges'))) {
      return false;
    }
    props.setUnsavedChanges(false);
@ -268,8 +268,8 @@ class IDEView extends React.Component {
        <Toolbar key={this.props.project.id} />
        {this.props.ide.preferencesIsVisible && (
          <Overlay
-            title={this.props.t('Settings')}
-            ariaLabel="settings"
+            title={this.props.t('Preferences.Settings')}
+            ariaLabel={this.props.t('Preferences.Settings')}
            closeOverlay={this.props.closePreferences}
          >
            <Preferences
@ -388,9 +388,7 @@ class IDEView extends React.Component {
              </SplitPane>
              <section className="preview-frame-holder">
                <header className="preview-frame__header">
-                  <h2 className="preview-frame__title">
-                    {this.props.t('Preview')}
-                  </h2>
+                  <h2 className="preview-frame__title">{this.props.t('Toolbar.Preview')}</h2>
                </header>
                <div className="preview-frame__content">
                  <div
@ -448,16 +446,16 @@ class IDEView extends React.Component {
        )}
        {this.props.location.pathname === '/about' && (
          <Overlay
-            title={this.props.t('About')}
+            title={this.props.t('About.Title')}
            previousPath={this.props.ide.previousPath}
-            ariaLabel="about"
+            ariaLabel={this.props.t('About.Title')}
          >
            <About previousPath={this.props.ide.previousPath} />
          </Overlay>
        )}
        {this.props.location.pathname === '/feedback' && (
          <Overlay
-            title="Submit Feedback"
+            title={this.props.t('IDEView.SubmitFeedback')}
            previousPath={this.props.ide.previousPath}
            ariaLabel="submit-feedback"
          >
@ -494,8 +492,8 @@ class IDEView extends React.Component {
        )}
        {this.props.ide.keyboardShortcutVisible && (
          <Overlay
-            title={this.props.t('KeyboardShortcuts')}
-            ariaLabel="keyboard shortcuts"
+            title={this.props.t('KeyboardShortcuts.Title')}
+            ariaLabel={this.props.t('KeyboardShortcuts.Title')}
            closeOverlay={this.props.closeKeyboardShortcutModal}
          >
            <KeyboardShortcutModal />
@ -504,7 +502,7 @@ class IDEView extends React.Component {
        {this.props.ide.errorType && (
          <Overlay
            title="Error"
-            ariaLabel="error"
+            ariaLabel={this.props.t('Common.Error')}
            closeOverlay={this.props.hideErrorModal}
          >
            <ErrorModal
@ -700,4 +698,5 @@ function mapDispatchToProps(dispatch) {
  );
 }

-export default withTranslation('WebEditor')(withRouter(connect(mapStateToProps, mapDispatchToProps)(IDEView)));
+
+export default withTranslation()(withRouter(connect(mapStateToProps, mapDispatchToProps)(IDEView)));
--- a/client/modules/IDE/pages/MobileIDEView.jsx
+++ b/client/modules/IDE/pages/MobileIDEView.jsx
@ -31,7 +31,7 @@ import Console from '../components/Console';
 import { remSize } from '../../../theme';
 // import OverlayManager from '../../../components/OverlayManager';
 import ActionStrip from '../../../components/mobile/ActionStrip';
-import { useAsModal } from '../../../utils/custom-hooks';
+import useAsModal from '../../../components/useAsModal';
 import { PreferencesIcon } from '../../../common/icons';
 import Dropdown from '../../../components/Dropdown';

@ -48,27 +48,11 @@ const NavItem = styled.li`

 const MobileIDEView = (props) => {
  const {
-    preferences,
-    ide,
-    editorAccessibility,
-    project,
-    updateLintMessage,
-    clearLintMessage,
-    selectedFile,
-    updateFileContent,
-    files,
-    closeEditorOptions,
-    showEditorOptions,
-    startRefreshSketch,
-    stopSketch,
-    expandSidebar,
-    collapseSidebar,
-    clearConsole,
-    console,
-    showRuntimeErrorWarning,
-    hideRuntimeErrorWarning,
-    startSketch,
-    user
+    preferences, ide, editorAccessibility, project, updateLintMessage, clearLintMessage,
+    selectedFile, updateFileContent, files, user,
+    closeEditorOptions, showEditorOptions,
+    startRefreshSketch, stopSketch, expandSidebar, collapseSidebar, clearConsole, console,
+    showRuntimeErrorWarning, hideRuntimeErrorWarning, startSketch
  } = props;

  const [tmController, setTmController] = useState(null); // eslint-disable-line
@ -90,7 +74,7 @@ const MobileIDEView = (props) => {

  const [triggerNavDropdown, NavDropDown] = useAsModal(<Dropdown
    items={username ? navOptionsLoggedIn : navOptionsLoggedOut}
-    right
+    align="right"
  />);

  return (
--- a/client/modules/IDE/reducers/files.js
+++ b/client/modules/IDE/reducers/files.js
@ -13,8 +13,8 @@ const defaultHTML =
 `<!DOCTYPE html>
 <html lang="en">
  <head>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/p5.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/addons/p5.sound.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/addons/p5.sound.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8" />

--- a/client/utils/custom-hooks.js
+++ b/client/utils/custom-hooks.js
@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useMemo, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';

 export const noop = () => {};

@ -22,7 +22,7 @@ export const useModalBehavior = (hideOverlay) => {
  // Return values
  const setRef = (r) => { ref.current = r; };
  const [visible, setVisible] = useState(true);
-  const trigger = () => setVisible(true);
+  const trigger = () => setVisible(!visible);

  const hide = () => setVisible(false);

@ -40,12 +40,3 @@ export const useModalBehavior = (hideOverlay) => {

  return [visible, trigger, setRef];
 };
-
-// TODO: This is HOC, not a hook. Where do we put it?
-export const useAsModal = (component) => {
-  const [visible, trigger, setRef] = useModalBehavior();
-
-  const wrapper = () => (<div ref={setRef}> {visible && component} </div>); // eslint-disable-line
-
-  return [trigger, wrapper];
-};
--- a/server/domain-objects/createDefaultFiles.js
+++ b/server/domain-objects/createDefaultFiles.js
@ -10,9 +10,8 @@ const defaultHTML =
  `<!DOCTYPE html>
 <html>
  <head>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/addons/p5.dom.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/addons/p5.sound.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/addons/p5.sound.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8" />

--- a/server/scripts/examples.js
+++ b/server/scripts/examples.js
@ -11,8 +11,8 @@ const defaultHTML =
 `<!DOCTYPE html>
 <html lang="en">
  <head>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/p5.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/addons/p5.sound.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/addons/p5.sound.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8" />
  </head>
--- a/translations/locales/en-US/translations.json
+++ b/translations/locales/en-US/translations.json
@ -1,116 +1,177 @@
 {
+  "Nav": {
+    "File": {
+      "Title": "File",
+      "New": "New",
+      "Share": "Share",
+      "Duplicate": "Duplicate",
+      "Open": "Open",
+      "Download": "Download",
+      "AddToCollection": "Add to Collection",
+      "Examples": "Examples"
+    },
+    "Edit": {
+      "Title": "Edit",
+      "TidyCode": "Tidy Code",
+      "Find": "Find",
+      "FindNext": "Find Next",
+      "FindPrevious": "Find Previous"
+    },
+    "Sketch": {
+      "Title": "Sketch",
+      "AddFile": "Add File",
+      "AddFolder": "Add Folder",
+      "Run": "Run",
+      "Stop": "Stop"
+    },
+    "Help": {
+      "Title": "Help",
+      "KeyboardShortcuts": "Keyboard Shortcuts",
+      "Reference": "Reference",
+      "About": "About"
+    },
+    "Lang": "Language",
+    "BackEditor": "Back to Editor",
+    "WarningUnsavedChanges": "Are you sure you want to leave this page? You have unsaved changes.",
+    "Login": {
+      "Login": "Log in",
+      "LoginOr": "or",
+      "SignUp": "Sign up",
+      "Email": "email",
+      "Username": "username",
+      "LoginGithub": "Login with Github",
+      "LoginGoogle": "Login with Google",
+      "DontHaveAccount": "Don't have an account?",
+      "ForgotPassword": "Forgot your password?",
+      "ResetPassword": "Reset your password"
+    },
+    "Auth": {
+      "Welcome": "Welcome",
+      "Hello": "Hello",
+      "MyAccount": "My Account",
+      "My": "My",
+      "MySketches": "My Sketches",
+      "MyCollections": "My Collections",
+      "Asset": "Asset",
+      "MyAssets": "My Assets",
+      "LogOut": "Log Out"
+    }
+  },
+  "About": {
+    "Title": "About",
+    "TitleHelmet": "p5.js Web Editor | About",
    "Contribute": "Contribute",
    "NewP5": "New to p5.js?",
    "Report": "Report a bug",
    "Learn": "Learn",
-    "About": "About",
    "Resources": "Resources",
    "Libraries": "Libraries",
    "Forum": "Forum",
-    "File": "File",
-    "New": "New",
-    "Save": "Save",
-    "Share": "Share",
-    "Duplicate": "Duplicate",
-    "Examples": "Examples",
-    "Edit": "Edit",
-    "TidyCode": "Tidy Code",
-    "Find": "Find",
-    "AddToCollection": "Add to Collection",
-    "FindNext": "Find Next",
-    "FindPrevious": "Find Previous",
-    "Sketch": "Sketch",
-    "AddFile": "Add File",
-    "AddFolder": "Add Folder",
-    "Run": "Run",
-    "Stop": "Stop",
-    "Help": "Help",
-    "KeyboardShortcuts": "Keyboard Shortcuts",
-    "Reference": "Reference",
-    "Tidy": "Tidy",
-    "Lang": "Language",
-    "FindNextMatch": "Find Next Match",
-    "FindPrevMatch": "Find Previous Match",
-    "IndentCodeLeft": "Indent Code Left",
-    "IndentCodeRight": "Indent Code Right",
-    "CommentLine": "Comment Line",
-    "StartSketch": "Start Sketch",
-    "StopSketch": "StopSketch",
-    "TurnOnAccessibleOutput": "Turn On Accessible Output",
-    "TurnOffAccessibleOutput": "Turn Off Accessible Output",
-    "ToogleSidebar": "Toogle Sidebar",
-    "ToogleConsole": "Toogle Console",
+    "Examples": "Examples"
+  },
+  "Toast": {
+    "OpenedNewSketch": "Opened new sketch.",
+    "SketchSaved": "Sketch saved.",
+    "SketchFailedSave": "Failed to save sketch.",
+    "AutosaveEnabled": "Autosave enabled.",
+    "LangChange": "Language changed"
+  },
+  "Toolbar": {
    "Preview": "Preview",
    "Auto-refresh": "Auto-refresh",
-    "Console": "Console",
+    "OpenPreferencesARIA": "Open Preferences",
+    "PlaySketchARIA": "Play sketch",
+    "PlayOnlyVisualSketchARIA": "Play only visual sketch",
+    "StopSketchARIA": "Stop sketch",
+    "EditSketchARIA": "Edit sketch name",
+    "NewSketchNameARIA": "New sketch name"
+  },
+  "Console": {
+    "Title": "Console",
+    "Clear": "Clear",
+    "ClearARIA": "Clear console",
+    "Close": "Close",
+    "CloseARIA": "Close console",
+    "Open": "Open",
+    "OpenARIA": "Open console"
+  },
+  "Preferences": {
    "Settings": "Settings",
    "GeneralSettings": "General settings",
+    "Accessibility": "Accessibility",
    "Theme": "Theme",
-    "Light": "Light",
-    "Dark": "Dark",
-    "HighContrast": "High Contrast",
+    "LightTheme": "Light",
+    "LightThemeARIA": "light theme on",
+    "DarkTheme": "Dark",
+    "DarkThemeARIA": "dark theme on",
+    "HighContrastTheme": "High Contrast",
+    "HighContrastThemeARIA": "high contrast theme on",
    "TextSize": "Text Size",
-    "Decrease": "Decrease",
-    "Increase": "Increase",
-    "IndentationAmount": "Indentation amount",
+    "DecreaseFont": "Decrease",
+    "DecreaseFontARIA": "decrease font size",
+    "IncreaseFont": "Increase",
+    "IncreaseFontARIA": "increase font size",
    "Autosave": "Autosave",
    "On": "On",
+    "AutosaveOnARIA": "autosave on",
    "Off": "Off",
-    "SketchSettings": "Sketch Settings",
-    "SecurityProtocol": "Security Protocol",
-    "ServeOverHTTPS": "Serve over HTTPS",
-    "Accessibility": "Accessibility",
+    "AutosaveOffARIA": "autosave off",
+    "WordWrap": "Word Wrap",
+    "LineWrapOnARIA": "linewrap on",
+    "LineWrapOffARIA": "linewrap off",
+    "LineNumbers": "Line numbers",
+    "LineNumbersOnARIA": "line numbers on",
+    "LineNumbersOffARIA": "line numbers off",
    "LintWarningSound": "Lint warning sound",
+    "LintWarningOnARIA": "lint warning on",
+    "LintWarningOffARIA": "lint warning off",
    "PreviewSound": "Preview sound",
+    "PreviewSoundARIA": "preview sound",
    "AccessibleTextBasedCanvas": "Accessible text-based canvas",
    "UsedScreenReader": "Used with screen reader",
    "PlainText": "Plain-text",
+    "TextOutputARIA": "text output on",
    "TableText": "Table-text",
+    "TableOutputARIA": "table output on",
    "Sound": "Sound",
-    "WordWrap": "Word Wrap",
-    "LineNumbers": "Line numbers",
-    "LangChange": "Language changed",
-    "Welcome": "Welcome",
-    "Login": "Log in",
-    "LoginOr": "or",
-    "SignUp": "Sign up",
-    "Email": "email",
-    "Username": "username",
-    "LoginGithub": "Login with Github",
-    "LoginGoogle": "Login with Google",
-    "DontHaveAccount": "Don't have an account?",
-    "ForgotPassword": "Forgot your password?",
-    "ResetPassword": "Reset your password",
-    "BackEditor": "Back to Editor",
-    "UsernameSplit": "User Name",
-    "Password": "Password",
-    "ConfirmPassword": "Confirm Password",
-    "OpenedNewSketch": "Opened new sketch.",
-    "Hello": "Hello",
-    "MyAccount": "My Account",
-    "My":"My",
-    "MySketches": "My Sketches",
-    "MyCollections": "My Collections",
-    "Asset": "Asset",
-    "MyAssets": "My Assets",
-    "TitleAbout": "p5.js Web Editor | About",
-    "CodeEditing": "Code Editing",
-    "Error": "Error",
-    "In order to save": "In order to save",
-    "you must be logged in": "you must be logged in",
-    "Please": "please",
-    "Find in files": "Find in files",
+    "SoundOutputARIA": "sound output on"
+  },
+  "KeyboardShortcuts": {
+    "Title": " Keyboard Shortcuts",
+    "ShortcutsFollow": "Code editing keyboard shortcuts follow",
+    "SublimeText": "Sublime Text shortcuts",
+    "CodeEditing": {
+      "Tidy": "Tidy",
+      "FindText": "Find Text",
+      "FindNextMatch": "Find Next Match",
+      "FindPrevMatch": "Find Previous Match",
+      "IndentCodeLeft": "Indent Code Left",
+      "IndentCodeRight": "Indent Code Right",
+      "CommentLine": "Comment Line",
+      "FindNextTextMatch": "Find Next Text Match",
+      "FindPreviousTextMatch": "Find Previous Text Match",
+      "CodeEditing": "Code Editing"
+    },
+    "General": {
+      "StartSketch": "Start Sketch",
+      "StopSketch": "Stop Sketch",
+      "TurnOnAccessibleOutput": "Turn On Accessible Output",
+      "TurnOffAccessibleOutput": "Turn Off Accessible Output"
+    }
+  },
+  "Sidebar": {
    "Create": "Create",
-    "enter a name": "enter a name",
+    "EnterName": "enter a name",
    "Add": "Add",
-    "Folder": "Folder",
-    "FindText": "Find Text",
-    "FindNextTextMatch": "Find Next Text Match",
-    "FindPreviousTextMatch": "Find Previous Text Match",
-    "Code editing keyboard shortcuts follow": "Code editing keyboard shortcuts follow",
-    "Sublime Text shortcuts": "Sublime Text shortcuts",
-    "WarningUnsavedChanges": "Are you sure you want to leave this page? You have unsaved changes.",
-    "LogOut": "Log Out"
+    "Folder": "Folder"
+  },
+  "Common": {
+    "Error": "Error",
+    "Save": "Save",
+    "p5logoARIA": "p5.js Logo"

+  },
+  "IDEView": {
+    "SubmitFeedback": "Submit Feedback"
+  }
 }
-
--- a/translations/locales/es-419/translations.json
+++ b/translations/locales/es-419/translations.json
@ -1,113 +1,180 @@
 {
+  "Nav": {
+    "File": {
+      "Title": "Archivo",
+      "New": "Nuevo",
+      "Share": "Compartir",
+      "Duplicate": "Duplicar",
+      "Open": "Abrir",
+      "Download": "Descargar",
+      "AddToCollection": "Agregar a colección",
+      "Examples": "Ejemplos"
+    },
+    "Edit": {
+      "Title": "Editar",
+      "TidyCode": "Ordenar código",
+      "Find": "Buscar",
+      "FindNext": "Buscar siguiente",
+      "FindPrevious": "Buscar anterior"
+    },
+    "Sketch": {
+      "Title": "Bosquejo",
+      "AddFile": "Agregar archivo",
+      "AddFolder": "Agregar directorio",
+      "Run": "Ejecutar",
+      "Stop": "Detener"
+    },
+    "Help": {
+      "Title": "Ayuda",
+      "KeyboardShortcuts": "Atajos",
+      "Reference": "Referencia",
+      "About": "Acerca de"
+    },
+    "Lang": "Lenguaje",
+    "BackEditor": "Regresa al editor",
+    "WarningUnsavedChanges": "¿Realmente quieres salir de la página? Tienes cambios sin guardar.",
+    "Login": {
+      "Login": "Ingresa",
+      "LoginOr": "o",
+      "SignUp": "registráte",
+      "Email": "correo electrónico",
+      "Username": "Identificación",
+      "LoginGithub": "Ingresa con Github",
+      "LoginGoogle": "Ingresa con Google",
+      "DontHaveAccount": "¿No tienes cuenta?",
+      "ForgotPassword": "¿Olvidaste tu contraseña?",
+      "ResetPassword": "Regenera tu contraseña"
+    },
+    "Auth": {
+      "Welcome": "Hola",
+      "Hello": "Hola",
+      "MyAccount": "Mi Cuenta",
+      "My": "Mi",
+      "MySketches": "Mis bosquejos",
+      "MyCollections": "Mis colecciones",
+      "Asset": "Asset",
+      "MyAssets": "Mis assets",
+      "LogOut": "Cerrar sesión"
+    }
+  },
+  "About": {
+    "Title": "Acerca de",
+    "TitleHelmet": "Editor Web p5.js | Acerca de",
    "Contribute": "Contribuir",
    "NewP5": "¿Empezando con p5.js?",
    "Report": "Reporta un error",
-    "Learn": "Aprende",
-    "About": "Acerca de",
+    "Learn": "Aprender",
    "Resources": "Recursos",
    "Libraries": "Bibliotecas",
    "Forum": "Foro",
-    "File": "Archivo",
-    "New": "Nuevo",
-    "Save": "Guardar",
-    "Share": "Compartir",
-    "Duplicate": "Duplicar",
-    "Examples": "Ejemplos",
-    "Edit": "Editar",
-    "TidyCode": "Ordenar código",
-    "Find": "Buscar",
-    "AddToCollection": "Agregar a colección",
-    "FindNext": "Buscar siguiente",
-    "FindPrevious": "Buscar anterior",
-    "Sketch": "Bosquejo",
-    "AddFile": "Agregar archivo",
-    "AddFolder": "Agregar directorio",
-    "Run": "Ejecutar",
-    "Stop": "Detener",
-    "Help": "Ayuda",
-    "KeyboardShortcuts": "Atajos",
-    "Reference": "Referencia",
-    "Tidy": "Ordenar",
-    "Lang": "Lenguaje",
-    "FindNextMatch": "Encontrar siguiente ocurrencia",
-    "FindPrevMatch": "Encontrar ocurrencia previa",
-    "IndentCodeLeft": "Indentar código a la izquierda",
-    "IndentCodeRight": "Indentar código a la derecha",
-    "CommentLine": "Comentar línea de código",
-    "StartSketch": "Iniciar bosquejo",
-    "StopSketch": "Detener bosquejo",
-    "TurnOnAccessibleOutput": "Activar salida accesible",
-    "TurnOffAccessibleOutput": "Desactivar salida accesible",
-    "ToogleSidebar": "Alternar barra de deslizamiento",
-    "ToogleConsole": "Alternar consola",
+    "Examples": "Ejemplos"
+  },
+  "Toast": {
+    "OpenedNewSketch": "Abriste un nuevo bosquejo.",
+    "SketchSaved": "Bosquejo guardado.",
+    "SketchFailedSave": "Fallo al guardar el bosquejo.",
+    "AutosaveEnabled": "Grabado automático activado.",
+    "LangChange": "Lenguaje cambiado"
+  },
+  "Toolbar": {
    "Preview": "Vista previa",
    "Auto-refresh": "Auto-refrescar",
-    "Console": "Consola",
+    "OpenPreferencesARIA": "Abrir Preferencias",
+    "PlaySketchARIA": "Ejecutar bosquejo",
+    "PlayOnlyVisualSketchARIA": "Ejecutar bosquejo visual",
+    "StopSketchARIA": "Detener bosquejo",
+    "EditSketchARIA": "Editar nombre de bosquejo",
+    "NewSketchNameARIA": "Nuevo nombre de bosquejo"
+  },
+  "Console": {
+    "Title": "Consola",
+    "Clear": "Limpiar",
+    "ClearARIA": "limpiar consola",
+    "Close": "Cerrar",
+    "CloseARIA": "cerrar consola",
+    "Open": "Abrir",
+    "OpenARIA": "Abrir consola"
+  },
+  "Preferences": {
    "Settings": "Configuración",
    "GeneralSettings": "Configuración general",
+    "Accessibility": "Accesibilidad",
    "Theme": "Modo de visualización",
-    "Light": "Claro",
-    "Dark": "Oscuro",
-    "HighContrast": "Alto contraste",
+    "LightTheme": "Claro",
+    "LightThemeARIA": "Modo de visualización claro activado",
+    "DarkTheme": "Oscuro",
+    "DarkThemeARIA": "Modo de visualización oscuro activado",
+    "HighContrastTheme": "Alto contraste",
+    "HighContrastThemeARIA": "Modo de visualización de alto contraste activado",
    "TextSize": "Tamaño del texto",
-    "Decrease": "Disminuir",
-    "Increase": "Aumentar",
-    "IndentationAmount": "Cantidad de indentación",
+    "DecreaseFont": "Disminuir",
+    "DecreaseFontARIA": "Disminuir tamaño del texto",
+    "IncreaseFont": "Aumentar",
+    "IncreaseFontARIA": "Aumentar tamaño del texto",
    "Autosave": "Grabar automáticamente",
    "On": "Activar",
+    "AutosaveOnARIA": "Grabado automático activado",
    "Off": "Desactivar",
-    "SketchSettings": "Configuración del bosquejo",
-    "SecurityProtocol": "Protocolo de seguridad",
-    "ServeOverHTTPS": "Usar HTTPS",
-    "Accessibility": "Accesibilidad",
+    "AutosaveOffARIA": "Grabado automático desactivado",
+    "WordWrap": "Ajuste automático de línea",
+    "LineWrapOnARIA": "Ajuste automático de línea activado",
+    "LineWrapOffARIA": "Ajuste automático de línea desactivado",
+    "LineNumbers": "Número de línea",
+    "LineNumbersOnARIA": "Número de línea activado",
+    "LineNumbersOffARIA": "Número de línea desactivado",
    "LintWarningSound": "Sonido de alarma Lint",
+    "LintWarningOnARIA": "Sonido de alarma Lint activado",
+    "LintWarningOffARIA": "Sonido de alarma Lint desactivado",
    "PreviewSound": "Probar sonido",
+    "PreviewSoundARIA": "Probar sonido",
    "AccessibleTextBasedCanvas": "Lienzo accesible por texto",
    "UsedScreenReader": "Uso con screen reader",
    "PlainText": "Texto sin formato",
+    "TextOutputARIA": "Salida de texto activado",
    "TableText": "Tablero de texto",
+    "TableOutputARIA": "Salida de tablero activado",
    "Sound": "Sonido",
-    "WordWrap": "Ajuste automático de línea",
-    "LineNumbers": "Número de línea",
-    "LangChange": "Lenguaje cambiado",
-    "Welcome": "Bienvenida",
-    "Login": "Ingresa",
-    "LoginOr": "o",
-    "SignUp": "registráte",
-    "email": "correo electrónico",
-    "username": "nombre de usuario",
-    "LoginGithub": "Ingresa con Github",
-    "LoginGoogle": "Ingresa con Google",
-    "DontHaveAccount": "No tienes cuenta?",
-    "ForgotPassword": "¿Olvidaste tu contraseña?",
-    "ResetPassword": "Regenera tu contraseña",
-    "BackEditor": "Regresa al editor",
-    "UsernameSplit": "Nombre de usuario",
-    "Password": "Contraseña",
-    "ConfirmPassword": "Confirma la contraseña",
-    "OpenedNewSketch": "Creaste nuevo bosquejo.",
-    "Hello": "Hola",
-    "MyAccount": "Mi Cuenta",
-    "My": "Mi",
-    "MySketches": "Mis bosquejos",
-    "MyCollections":"Mis colecciones",
-    "Asset": "Asset",
-    "MyAssets": "Mis assets",
-    "TitleAbout": "Editor Web p5.js  | Acerca de",
-    "CodeEditing": "Editando Código",
+    "SoundOutputARIA": "Salida de sonido activado"
+  },
+  "KeyboardShortcuts": {
+    "Title": " Atajos de teclado",
+    "ShortcutsFollow": "Los atajos para edición son como",
+    "SublimeText": "los atajos de Sublime Text ",
+    "CodeEditing": {
+      "Tidy": "Ordenar",
+      "FindText": "Encontrar texto",
+      "FindNextMatch": "Encontrar siguiente ocurrencia",
+      "FindPrevMatch": "Encontrar ocurrencia previa",
+      "IndentCodeLeft": "Indentar código a la izquierda",
+      "IndentCodeRight": "Indentar código a la derecha",
+      "CommentLine": "Comentar línea de código",
+      "FindNextTextMatch": "Encontrar la siguiente ocurrencia de texto",
+      "FindPreviousTextMatch": "Encontrar la ocurrencia previa de texto",
+      "CodeEditing": "Editando Código"
+    },
+    "General": {
+      "StartSketch": "Iniciar bosquejo",
+      "StopSketch": "Detener bosquejo",
+      "TurnOnAccessibleOutput": "Activar salida accesible",
+      "TurnOffAccessibleOutput": "Desactivar salida accesible"
+    }
+  },
+  "Sidebar": {
+    "Create": "Crear",
+    "EnterName": "Introduce un nombre",
+    "Add": "Agregar",
+    "Folder": "Directorio"
+  },
+  "Common": {
    "Error": "Error",
-    "In order to save": "Para guardar",
-    "you must be logged in": "debes ingresar a tu cuenta",
-    "Please": "Por favor",
-    "Find in files": "Encontrar en archivos",
-    "Create": "Create",
-    "enter a name": "enter a name",
-    "Add": "Add",
-    "Folder": "Directorio",
-    "FindText": "Encontrar texto",
-    "FindNextTextMatch": "Encontrar la siguiente ocurrencia de texto",
-    "FindPreviousTextMatch": "Encontrar la ocurrencia previa de texto",
-    "Code editing keyboard shortcuts follow": "Los atajos para edición son como",
-    "Sublime Text shortcuts": "los atajos de Sublime Text ",
-    "WarningUnsavedChanges": "¿Estás seguro de que quieres salir de la página? Tienes cambios sin guardar."
+    "Save": "Guardar",
+    "p5logoARIA": "Logo p5.js "
+  },
+  "IDEView": {
+    "SubmitFeedback": "Enviar retroalimentación"
  }
+}
+
+
+
+