Merge branch 'develop' into piyush/refactor-console-redux-toolkit

Author: raclim

client/common/useKeyDownHandlers.js

@@ -33,7 +33,11 @@ export default function useKeyDownHandlers(keyHandlers) {
     const isMac = navigator.userAgent.toLowerCase().indexOf('mac') !== -1;
     const isCtrl = isMac ? e.metaKey : e.ctrlKey;
     if (e.shiftKey && isCtrl) {
-      handlers.current[`ctrl-shift-${e.key.toLowerCase()}`]?.(e);
+      handlers.current[
+        `ctrl-shift-${
+          /^\d+$/.test(e.code.at(-1)) ? e.code.at(-1) : e.key.toLowerCase()
+        }`
+      ]?.(e);
     } else if (isCtrl) {
       handlers.current[`ctrl-${e.key.toLowerCase()}`]?.(e);
     }

client/components/AddRemoveButton.jsx

@@ -12,12 +12,14 @@ const PreviewNav = ({ owner, project }) => {
     <nav className="nav preview-nav">
       <div className="nav__items-left">
         <div className="nav__item-logo">
-          <LogoIcon
-            role="img"
-            aria-label={t('Common.p5logoARIA')}
-            focusable="false"
-            className="svg__logo"
-          />
+          <Link to={`/${owner.username}/sketches`}>
+            <LogoIcon
+              role="img"
+              aria-label={t('Common.p5logoARIA')}
+              focusable="false"
+              className="svg__logo"
+            />
+          </Link>
         </div>
         <Link
           className="nav__item"

client/components/NavBasic.jsx

@@ -2,7 +2,6 @@
 // multiple files
 export const UPDATE_FILE_CONTENT = 'UPDATE_FILE_CONTENT';
 export const TOGGLE_SKETCH = 'TOGGLE_SKETCH';
-
 export const START_SKETCH = 'START_SKETCH';
 export const STOP_SKETCH = 'STOP_SKETCH';
 

client/components/OverlayManager.jsx

@@ -1,6 +1,5 @@
 import i18n from 'i18next';
 import { initReactI18next } from 'react-i18next';
-
 import translations from '../translations/locales/en-US/translations.json';
 
 i18n.use(initReactI18next).init({

client/components/PreviewNav.jsx

@@ -1,6 +1,5 @@
-import PropTypes from 'prop-types';
 import React from 'react';
-import { connect } from 'react-redux';
+import { useSelector } from 'react-redux';
 import prettyBytes from 'pretty-bytes';
 
 import getConfig from '../../../utils/getConfig';
@@ -18,7 +17,11 @@ const formatPercent = (percent) => {
 };
 
 /* Eventually, this copy should be Total / 250 MB Used */
-const AssetSize = ({ totalSize }) => {
+const AssetSize = () => {
+  const totalSize = useSelector(
+    (state) => state.user.totalSize || state.assets.totalSize
+  );
+
   if (totalSize === undefined) {
     return null;
   }
@@ -40,15 +43,4 @@ const AssetSize = ({ totalSize }) => {
   );
 };
 
-AssetSize.propTypes = {
-  totalSize: PropTypes.number.isRequired
-};
-
-function mapStateToProps(state) {
-  return {
-    user: state.user,
-    totalSize: state.user.totalSize || state.assets.totalSize
-  };
-}
-
-export default connect(mapStateToProps)(AssetSize);
+export default AssetSize;

client/constants.js

@@ -28,7 +28,12 @@ function EditableInput({
   const { t } = useTranslation();
   React.useEffect(() => {
     if (isEditing) {
-      inputRef.current?.focus();
+      const inputElement = inputRef.current;
+      inputElement.setSelectionRange(
+        inputElement.value.length,
+        inputElement.value.length
+      );
+      inputElement.focus();
     }
   }, [isEditing]);
   React.useEffect(() => {

client/i18n-test.js

@@ -9,7 +9,7 @@ export const EditorContainer = styled.div`
   transform: ${(props) =>
     props.expanded ? 'translateX(50%)' : 'translateX(0)'};
 
-  > header {
+  > div {
     display: flex;
     ${prop('MobilePanel.secondary')}
     > span {

client/modules/IDE/components/AssetSize.jsx

@@ -208,6 +208,10 @@ class Editor extends React.Component {
       if (/^[a-z]$/i.test(e.key) && (mode === 'css' || mode === 'javascript')) {
         this.showHint(_cm);
       }
+      if (e.key === 'Escape') {
+        e.preventDefault();
+        this._cm.getInputField().blur();
+      }
     });
 
     this._cm.getWrapperElement().style[
@@ -235,6 +239,16 @@ class Editor extends React.Component {
 
   componentDidUpdate(prevProps) {
     if (this.props.file.id !== prevProps.file.id) {
+      const fileMode = this.getFileMode(this.props.file.name);
+      if (fileMode === 'javascript') {
+        // Define the new Emmet configuration based on the file mode
+        const emmetConfig = {
+          preview: ['html'],
+          markTagPairs: false,
+          autoRenameTags: true
+        };
+        this._cm.setOption('emmet', emmetConfig);
+      }
       const oldDoc = this._cm.swapDoc(this._docs[this.props.file.id]);
       this._docs[prevProps.file.id] = oldDoc;
       this._cm.focus();
@@ -513,7 +527,7 @@ class Editor extends React.Component {
         {(matches) =>
           matches ? (
             <section className={editorSectionClass}>
-              <header className="editor__header">
+              <div className="editor__header">
                 <button
                   aria-label={this.props.t('Editor.OpenSketchARIA')}
                   className="sidebar__contract"
@@ -538,7 +552,7 @@ class Editor extends React.Component {
                   </span>
                   <Timer />
                 </div>
-              </header>
+              </div>
               <article
                 ref={(element) => {
                   this.codemirrorContainer = element;
@@ -555,7 +569,7 @@ class Editor extends React.Component {
             </section>
           ) : (
             <EditorContainer expanded={this.props.isExpanded}>
-              <header>
+              <>
                 <IconButton
                   onClick={this.props.expandSidebar}
                   icon={FolderIcon}
@@ -564,7 +578,7 @@ class Editor extends React.Component {
                   {this.props.file.name}
                   <UnsavedChangesIndicator />
                 </span>
-              </header>
+              </>
               <section>
                 <EditorHolder
                   ref={(element) => {

client/modules/IDE/components/EditableInput.jsx

@@ -10,7 +10,7 @@ import * as FileActions from '../actions/files';
 import DownArrowIcon from '../../../images/down-filled-triangle.svg';
 import FolderRightIcon from '../../../images/triangle-arrow-right.svg';
 import FolderDownIcon from '../../../images/triangle-arrow-down.svg';
-import FileIcon from '../../../images/file.svg';
+import FileTypeIcon from './FileTypeIcon';
 
 function parseFileName(name) {
   const nameArray = name.split('.');
@@ -256,6 +256,7 @@ class FileNode extends React.Component {
     const isRoot = this.props.name === 'root';
 
     const { t } = this.props;
+    const { extension } = parseFileName(this.props.name);
 
     return (
       <div className={itemClass}>
@@ -267,7 +268,11 @@ class FileNode extends React.Component {
             <span className="file-item__spacer"></span>
             {isFile && (
               <span className="sidebar__file-item-icon">
-                <FileIcon focusable="false" aria-hidden="true" />
+                <FileTypeIcon
+                  fileExtension={extension}
+                  focusable="false"
+                  aria-hidden="true"
+                />
               </span>
             )}
             {isFolder && (

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

@@ -0,0 +1,59 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { IoLogoHtml5, IoLogoCss3, IoLogoJavascript } from 'react-icons/io';
+import { TbFileTypeXml, TbTxt, TbCsv } from 'react-icons/tb';
+import { VscJson } from 'react-icons/vsc';
+import FileIcon from '../../../images/file.svg';
+
+export default function FileTypeIcon({ fileExtension }) {
+  switch (fileExtension) {
+    case '.html':
+      return (
+        <span>
+          <IoLogoHtml5 />
+        </span>
+      );
+    case '.css':
+      return (
+        <span>
+          <IoLogoCss3 />
+        </span>
+      );
+    case '.js':
+      return (
+        <span>
+          <IoLogoJavascript />
+        </span>
+      );
+    case '.json':
+      return (
+        <span>
+          <VscJson />
+        </span>
+      );
+    case '.xml':
+      return (
+        <span>
+          <TbFileTypeXml />
+        </span>
+      );
+    case '.txt':
+      return (
+        <span>
+          <TbTxt />
+        </span>
+      );
+    case '.csv':
+      return (
+        <span>
+          <TbCsv />
+        </span>
+      );
+    default:
+      return <FileIcon focusable="false" aria-hidden="true" />;
+  }
+}
+
+FileTypeIcon.propTypes = {
+  fileExtension: PropTypes.string.isRequired
+};

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

@@ -238,7 +238,9 @@ const MobileNav = () => {
       <Title>
         <h1>{title === project.name ? <ProjectName /> : title}</h1>
         {project?.owner && title === project.name && (
-          <h5>by {project?.owner?.username}</h5>
+          <Link to={`/${project.owner.username}/sketches`}>
+            by {project?.owner?.username}
+          </Link>
         )}
       </Title>
       {/* check if the user is in login page */}