Merge branch 'master' into add-search-replace

.changeset/many-trains-cheat.md

@@ -0,0 +1,5 @@
+---
+'playroom': patch
+---
+
+Fix issue with "Toggle comment" command commenting certain code outside JSX tags with incorrect syntax.

cypress/e2e/keymaps.cy.js

@@ -569,7 +569,7 @@ describe('Keymaps', () => {
           >
             Text
           </button>
-          `);
+        `);
 
         moveBy(0, 2);
 
@@ -586,6 +586,76 @@ describe('Keymaps', () => {
           </button>
         `);
       });
+
+      it('block - expression slot outside tags', () => {
+        loadPlayroom(`
+          {testFn('test')}
+          <div>First line</div>
+          <div>Second line</div>
+          <div>Third line</div>
+        `);
+
+        executeToggleCommentCommand();
+
+        assertCodePaneContains(dedent`
+          {/* {testFn('test')} */}
+          <div>First line</div>
+          <div>Second line</div>
+          <div>Third line</div>
+        `);
+      });
+
+      it('line - inside multi-line expression slot outside tags', () => {
+        loadPlayroom(`
+          {
+            testFn('test')
+          }
+          <div>First line</div>
+          <div>Second line</div>
+          <div>Third line</div>
+        `);
+
+        moveBy(0, 1);
+
+        executeToggleCommentCommand();
+
+        assertCodePaneContains(dedent`
+          {
+            // testFn('test')
+          }
+          <div>First line</div>
+          <div>Second line</div>
+          <div>Third line</div>
+        `);
+      });
+
+      it('line - full line expression slot inside tags', () => {
+        loadPlayroom(`
+          <div
+            prop1="prop1"
+            {...props}
+          >
+            First line
+          </div>
+          <div>Second line</div>
+          <div>Third line</div>
+        `);
+
+        moveBy(0, 2);
+
+        executeToggleCommentCommand();
+
+        assertCodePaneContains(dedent`
+          <div
+            prop1="prop1"
+            // {...props}
+          >
+            First line
+          </div>
+          <div>Second line</div>
+          <div>Third line</div>
+        `);
+      });
     });
 
     describe('should wrap a single line selection in a comment', () => {

package.json

@@ -20,11 +20,11 @@
     "start:typescript": "./bin/cli.cjs start --config cypress/projects/typescript/playroom.config.js",
     "build:typescript": "./bin/cli.cjs build --config cypress/projects/typescript/playroom.config.js",
     "serve:typescript": "PORT=9002 serve --no-request-logging cypress/projects/typescript/dist",
-    "start:all": "pnpm run '/^start:(?!all)/'",
-    "build:all": "pnpm run '/^build:(?!all)/'",
-    "serve:all": "pnpm run '/^serve:(?!all)/'",
+    "start:all": "concurrently 'npm:start:*(!all)'",
+    "build:all": "concurrently 'npm:build:*(!all)'",
+    "serve:all": "concurrently 'npm:serve:*(!all)'",
     "build-and-serve:all": "pnpm build:all && pnpm serve:all",
-    "lint": "pnpm run '/^lint:.*/'",
+    "lint": "concurrently 'npm:lint:*'",
     "lint:eslint": "eslint --cache .",
     "lint:prettier": "prettier --list-different '**/*.{js,md,ts,tsx}'",
     "lint:tsc": "tsc --noEmit",
@@ -115,6 +115,7 @@
     "@octokit/rest": "^19.0.5",
     "@types/jest": "^29.2.4",
     "@types/react-helmet": "^6.1.6",
+    "concurrently": "^7.6.0",
     "cypress": "^13.6.6",
     "eslint": "^8.44.0",
     "eslint-config-seek": "^11.3.1",

src/Playroom/CodeEditor/keymaps/comment.ts

@@ -198,6 +198,19 @@ function getUpdatedContent(existingContent: string, range: TagRange) {
 
 type CommentType = 'line' | 'block';
 
+const isOnlyWhitespace = (input: string) => /^\s+$/.test(input);
+
+const isFullExpressionSlot = (tokens: CodeMirror.Token[]) => {
+  const formattedLineTokens = tokens.filter(
+    (token) => token.type !== 'comment' && !isOnlyWhitespace(token.string)
+  );
+
+  return (
+    formattedLineTokens.at(0)?.string === '{' &&
+    formattedLineTokens.at(-1)?.string === '}'
+  );
+};
+
 interface TagRange {
   from: CodeMirror.Position;
   to: CodeMirror.Position;
@@ -219,7 +232,9 @@ const determineCommentType = (
     (token) => token.type === 'attribute'
   );
 
-  const isJavaScriptMode = cm.getModeAt(from).name === 'javascript';
+  const isJavaScriptMode =
+    cm.getModeAt(new Pos(from.line, 0)).name === 'javascript';
+
   const isInlineComment = cm
     .getLine(from.line)
     .trimStart()
@@ -228,6 +243,10 @@ const determineCommentType = (
     cm.getLine(from.line).trimStart().startsWith(BLOCK_COMMENT_START) &&
     cm.getLine(to.line).trimEnd().endsWith(BLOCK_COMMENT_END);
 
+  if (!isBlockComment && isFullExpressionSlot(lineTokens)) {
+    return isJavaScriptMode ? 'block' : 'line';
+  }
+
   if (isInlineComment) {
     return 'line';
   }