playroom 0.44.3 → 0.44.4

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # playroom
 
+## 0.44.4
+
+### Patch Changes
+
+- [#450](https://github.com/seek-oss/playroom/pull/450) [`2dfefd8`](https://github.com/seek-oss/playroom/commit/2dfefd810b2c161f9028f5fc52c575b1aac8d1f6) Thanks [@felixhabib](https://github.com/felixhabib)! - Ensure "Toggle comment" command works correctly when there is no other code in the editor.
+
+- [#451](https://github.com/seek-oss/playroom/pull/451) [`4a515dc`](https://github.com/seek-oss/playroom/commit/4a515dc5171661c9b68f5013eb6db2111ad95505) Thanks [@felixhabib](https://github.com/felixhabib)! - Ensure "Format code" command works correctly when there is no code other than JSX comments in the editor.
+
 ## 0.44.3
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "playroom",
-  "version": "0.44.3",
+  "version": "0.44.4",
   "description": "Design with code, powered by your own component library",
   "bin": {
     "playroom": "bin/cli.cjs"

package/src/components/CodeEditor/keymaps/comment.ts

@@ -225,6 +225,12 @@ const determineCommentType = (
   from: CodeMirror.Position,
   to: CodeMirror.Position
 ): CommentType => {
+  const lineContent = cm.getLine(from.line);
+
+  if (lineContent.trim() === '' && from.line === to.line) {
+    return 'block';
+  }
+
   const lineTokens = cm.getLineTokens(from.line);
 
   const containsTag = lineTokens.some((token) => token.type === 'tag');

package/src/utils/formatting.ts

@@ -62,8 +62,15 @@ export const cursorOffsetToPosition = (
 export const wrapJsx = (code: string) => `<>\n${code}\n</>`;
 
 // Removes `<>\n`  and `\n</>` and unindents the two spaces due to the wrapping
-export const unwrapJsx = (code: string) =>
-  code.replace(/\n {2}/g, '\n').slice(3, -5);
+export const unwrapJsx = (code: string) => {
+  if (code.startsWith('<>\n')) {
+    // Multi-line: remove indentation, then unwrap
+    return code.replace(/\n {2}/g, '\n').slice(3, -5);
+  }
+
+  // Single-line: just remove wrapper tags
+  return code.slice(2).replace(/<\/>;?\n?$/, '');
+};
 
 // Handles running prettier, ensuring multiple root level JSX values are valid
 // by wrapping the code in <>{code}</> then finally removing the layer of indentation
@@ -104,10 +111,12 @@ export const formatCode = ({
     formatResult.cursorOffset
   );
 
+  const isMultiLine = formatResult.formatted.startsWith('<>\n');
+
   return {
     code: formattedCode,
     cursor: {
-      line: position.line - WRAPPED_LINE_OFFSET,
+      line: position.line - (isMultiLine ? WRAPPED_LINE_OFFSET : 0),
       ch: position.ch === 0 ? 0 : position.ch - WRAPPED_INDENT_OFFSET,
     },
   };