playroom 0.36.0 → 0.37.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # playroom
 
+## 0.37.0
+
+### Minor Changes
+
+- 94c75f8: Add "Find", "Find and replace", and "Jump to line" functionality.
+
+  Keybindings for these new commands are:
+
+  - `Cmd + F` / `Ctrl + F` - Find
+  - `Cmd + Option + F` / `Ctrl + Alt + F` - Find and replace
+  - `Cmd + G` / `Ctrl + G` - Jump to line
+
+### Patch Changes
+
+- 71f694a: Fix issue with "Toggle comment" command commenting certain code outside JSX tags with incorrect syntax.
+
 ## 0.36.0
 
 ### Minor Changes

package/cypress/e2e/keymaps.cy.js

@@ -3,6 +3,7 @@ import {
   typeCode,
   assertCodePaneContains,
   loadPlayroom,
+  cmdPlus,
   selectNextWords,
   selectNextLines,
   selectNextCharacters,
@@ -11,14 +12,13 @@ import {
   moveToEndOfLine,
   moveBy,
   moveByWords,
+  assertCodePaneSearchMatchesCount,
+  findInCode,
+  replaceInCode,
+  jumpToLine,
 } from '../support/utils';
 import { isMac } from '../../src/utils/formatting';
 
-const cmdPlus = (keyCombo) => {
-  const platformSpecificKey = isMac() ? 'cmd' : 'ctrl';
-  return `${platformSpecificKey}+${keyCombo}`;
-};
-
 describe('Keymaps', () => {
   describe('swapLine', () => {
     beforeEach(() => {
@@ -350,6 +350,163 @@ describe('Keymaps', () => {
     });
   });
 
+  describe('find and replace', () => {
+    beforeEach(() => {
+      loadPlayroom(`
+        <div>First line</div>
+        <div>Second line</div>
+        <div>Third line</div>
+      `);
+    });
+
+    it('should find all occurrences of search term', () => {
+      findInCode('div');
+
+      assertCodePaneSearchMatchesCount(6);
+
+      cy.focused().type('{esc}');
+
+      typeCode('c');
+
+      assertCodePaneContains(dedent`
+        <c>First line</div>
+        <div>Second line</div>
+        <div>Third line</div>
+      `);
+    });
+
+    it('should replace and skip occurrences of search term correctly', () => {
+      replaceInCode('div', 'span');
+
+      // replace occurrence
+      cy.get('.CodeMirror-dialog button').contains('Yes').click();
+
+      assertCodePaneContains(dedent`
+        <span>First line</div>
+        <div>Second line</div>
+        <div>Third line</div>
+      `);
+
+      // ignore occurrence
+      cy.get('.CodeMirror-dialog button').contains('No').click();
+
+      assertCodePaneContains(dedent`
+        <span>First line</div>
+        <div>Second line</div>
+        <div>Third line</div>
+      `);
+
+      // replace occurrence
+      cy.get('.CodeMirror-dialog button').contains('Yes').click();
+
+      assertCodePaneContains(dedent`
+        <span>First line</div>
+        <span>Second line</div>
+        <div>Third line</div>
+      `);
+
+      // replace all remaining occurrences
+      cy.get('.CodeMirror-dialog button').contains('All').click();
+
+      assertCodePaneContains(dedent`
+        <span>First line</span>
+        <span>Second line</span>
+        <span>Third line</span>
+      `);
+
+      typeCode('c');
+
+      assertCodePaneContains(dedent`
+        <span>First line</span>
+        <span>Second line</spanc>
+        <span>Third line</span>
+      `);
+    });
+
+    it('should back out of replace correctly', () => {
+      replaceInCode('div');
+
+      typeCode('{esc}');
+
+      assertCodePaneContains(dedent`
+        <div>First line</div>
+        <div>Second line</div>
+        <div>Third line</div>
+      `);
+
+      typeCode('c');
+
+      assertCodePaneContains(dedent`
+        c<div>First line</div>
+        <div>Second line</div>
+        <div>Third line</div>
+      `);
+    });
+  });
+
+  describe('jump to line', () => {
+    beforeEach(() => {
+      loadPlayroom(`
+        <div>First line</div>
+        <div>Second line</div>
+        <div>Third line</div>
+        <div>Forth line</div>
+        <div>Fifth line</div>
+        <div>Sixth line</div>
+        <div>Seventh line</div>
+      `);
+    });
+
+    it('should jump to line number correctly', () => {
+      const line = 6;
+      jumpToLine(line);
+
+      typeCode('c');
+
+      assertCodePaneContains(dedent`
+        <div>First line</div>
+        <div>Second line</div>
+        <div>Third line</div>
+        <div>Forth line</div>
+        <div>Fifth line</div>
+        c<div>Sixth line</div>
+        <div>Seventh line</div>
+      `);
+
+      typeCode('{backspace}');
+
+      const nextLine = 2;
+      jumpToLine(nextLine);
+
+      typeCode('c');
+
+      assertCodePaneContains(dedent`
+        <div>First line</div>
+        c<div>Second line</div>
+        <div>Third line</div>
+        <div>Forth line</div>
+        <div>Fifth line</div>
+        <div>Sixth line</div>
+        <div>Seventh line</div>
+      `);
+    });
+
+    it('should jump to line and column number correctly', () => {
+      jumpToLine('6:10');
+      typeCode('a');
+
+      assertCodePaneContains(dedent`
+        <div>First line</div>
+        <div>Second line</div>
+        <div>Third line</div>
+        <div>Forth line</div>
+        <div>Fifth line</div>
+        <div>Sixtha line</div>
+        <div>Seventh line</div>
+      `);
+    });
+  });
+
   describe('toggleComment', () => {
     const blockStarter = `
       <div>First line</div>
@@ -412,7 +569,7 @@ describe('Keymaps', () => {
           >
             Text
           </button>
-          `);
+        `);
 
         moveBy(0, 2);
 
@@ -429,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', () => {
@@ -1391,7 +1618,7 @@ describe('Keymaps', () => {
             });
           });
 
-          describe('for an selection beginning during opening comment syntax', () => {
+          describe('for a selection beginning during opening comment syntax', () => {
             it('block', () => {
               loadPlayroom(`
                 <div>

package/cypress/support/utils.js

@@ -5,6 +5,11 @@ import dedent from 'dedent';
 import { createUrl } from '../../utils';
 import { isMac } from '../../src/utils/formatting';
 
+export const cmdPlus = (keyCombo) => {
+  const platformSpecificKey = isMac() ? 'cmd' : 'ctrl';
+  return `${platformSpecificKey}+${keyCombo}`;
+};
+
 const getCodeEditor = () =>
   cy.get('.CodeMirror-code').then((editor) => cy.wrap(editor));
 
@@ -182,3 +187,50 @@ export const loadPlayroom = (initialCode) => {
       indexedDB.deleteDatabase(storageKey);
     });
 };
+
+const typeInSearchField = (text) =>
+  cy.get('.CodeMirror-search-field').type(text);
+
+/**
+ * @param {string} term
+ */
+export const findInCode = (term) => {
+  // Wait necessary to ensure code pane is focussed
+  cy.wait(500); // eslint-disable-line @finsit/cypress/no-unnecessary-waiting
+  typeCode(`{${cmdPlus('f')}}`);
+
+  typeInSearchField(`${term}{enter}`);
+};
+
+/**
+ * @param {string} term
+ * @param {string} [replaceWith]
+ */
+export const replaceInCode = (term, replaceWith) => {
+  // Wait necessary to ensure code pane is focussed
+  cy.wait(500); // eslint-disable-line @finsit/cypress/no-unnecessary-waiting
+  typeCode(`{${cmdPlus('alt+f')}}`);
+  typeInSearchField(`${term}{enter}`);
+  if (replaceWith) {
+    typeInSearchField(`${replaceWith}{enter}`);
+  }
+};
+
+/**
+ * @param {number} line
+ */
+export const jumpToLine = (line) => {
+  // Wait necessary to ensure code pane is focussed
+  cy.wait(500); // eslint-disable-line @finsit/cypress/no-unnecessary-waiting
+  typeCode(`{${cmdPlus('g')}}`);
+  typeCode(`${line}{enter}`);
+};
+
+/**
+ * @param {number} lines
+ */
+export const assertCodePaneSearchMatchesCount = (lines) => {
+  getCodeEditor().within(() =>
+    cy.get('.cm-searching').should('have.length', lines)
+  );
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "playroom",
-  "version": "0.36.0",
+  "version": "0.37.0",
   "description": "Design with code, powered by your own component library",
   "main": "utils/index.js",
   "types": "utils/index.d.ts",
@@ -86,6 +86,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",
@@ -122,11 +123,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",

package/src/Playroom/CodeEditor/CodeEditor.css.ts

@@ -1,5 +1,6 @@
-import { style, globalStyle, keyframes } from '@vanilla-extract/css';
+import { style, globalStyle, keyframes, createVar } from '@vanilla-extract/css';
 import { vars, colorPaletteVars, sprinkles } from '../sprinkles.css';
+import { toolbarItemSize } from '../ToolbarItem/ToolbarItem.css';
 
 const minimumLineNumberWidth = '50px';
 
@@ -224,3 +225,100 @@ globalStyle('.cm-s-neo .cm-variable', {
 globalStyle('.cm-s-neo .cm-number', {
   color: colorPaletteVars.code.number,
 });
+
+globalStyle('.CodeMirror-dialog', {
+  paddingLeft: vars.space.xlarge,
+  paddingRight: vars.space.xlarge,
+  minHeight: toolbarItemSize,
+  borderBottom: `1px solid ${colorPaletteVars.border.standard}`,
+  display: 'flex',
+  alignItems: 'center',
+});
+
+const searchOffset = createVar();
+globalStyle('.CodeMirror-scroll', {
+  transform: `translateY(${searchOffset})`,
+  transition: vars.transition.fast,
+});
+
+globalStyle('.dialog-opened .CodeMirror-scroll', {
+  vars: {
+    [searchOffset]: `${toolbarItemSize}px`,
+  },
+});
+
+globalStyle('.dialog-opened .CodeMirror-lines', {
+  paddingBottom: searchOffset,
+});
+
+globalStyle('.CodeMirror-dialog input', {
+  font: vars.font.scale.large,
+  fontFamily: vars.font.family.code,
+  height: vars.touchableSize,
+  flexGrow: 1,
+});
+
+globalStyle('.CodeMirror-search-hint', {
+  display: 'none',
+});
+
+globalStyle('.CodeMirror-search-label', {
+  display: 'flex',
+  alignItems: 'center',
+  minHeight: vars.touchableSize,
+  font: vars.font.scale.large,
+  fontFamily: vars.font.family.code,
+});
+
+globalStyle('.CodeMirror-search-field', {
+  paddingLeft: vars.space.xlarge,
+});
+
+globalStyle('label.CodeMirror-search-label', {
+  flexGrow: 1,
+});
+
+globalStyle('.dialog-opened.cm-s-neo .CodeMirror-selected', {
+  background: colorPaletteVars.background.search,
+});
+
+globalStyle('.cm-overlay.cm-searching', {
+  paddingTop: 2,
+  paddingBottom: 2,
+  background: colorPaletteVars.background.selection,
+});
+
+globalStyle('.CodeMirror-dialog button:first-of-type', {
+  marginLeft: vars.space.xlarge,
+});
+
+globalStyle('.CodeMirror-dialog button', {
+  appearance: 'none',
+  font: vars.font.scale.standard,
+  fontFamily: vars.font.family.standard,
+  marginLeft: vars.space.medium,
+  paddingTop: vars.space.medium,
+  paddingBottom: vars.space.medium,
+  paddingLeft: vars.space.large,
+  paddingRight: vars.space.large,
+  alignSelf: 'center',
+  display: 'block',
+  background: 'none',
+  borderRadius: vars.radii.large,
+  cursor: 'pointer',
+  border: '1px solid currentColor',
+});
+
+globalStyle('.CodeMirror-dialog button:focus', {
+  color: colorPaletteVars.foreground.accent,
+  boxShadow: colorPaletteVars.shadows.focus,
+  outline: 'none',
+});
+
+globalStyle('.CodeMirror-dialog button:focus:hover', {
+  background: colorPaletteVars.background.selection,
+});
+
+globalStyle('.CodeMirror-dialog button:hover', {
+  background: colorPaletteVars.background.transparent,
+});

package/src/Playroom/CodeEditor/CodeEditor.tsx

@@ -2,6 +2,7 @@ import { useRef, useContext, useEffect, useCallback } from 'react';
 import { useDebouncedCallback } from 'use-debounce';
 import type { Editor } from 'codemirror';
 import 'codemirror/lib/codemirror.css';
+import 'codemirror/addon/dialog/dialog.css';
 import 'codemirror/theme/neo.css';
 
 import {
@@ -26,6 +27,10 @@ import 'codemirror/addon/edit/closetag';
 import 'codemirror/addon/edit/closebrackets';
 import 'codemirror/addon/hint/show-hint';
 import 'codemirror/addon/hint/xml-hint';
+import 'codemirror/addon/dialog/dialog';
+import 'codemirror/addon/search/jump-to-line';
+import 'codemirror/addon/search/search';
+import 'codemirror/addon/search/searchcursor';
 import 'codemirror/addon/selection/active-line';
 import 'codemirror/addon/fold/foldcode';
 import 'codemirror/addon/fold/foldgutter';
@@ -117,6 +122,17 @@ export const CodeEditor = ({ code, onChange, previewCode, hints }: Props) => {
           e.preventDefault();
           dispatch({ type: 'toggleToolbar', payload: { panel: 'snippets' } });
         }
+
+        // Prevent browser keyboard shortcuts when the search/replace input is focused
+        if (
+          cmdOrCtrl &&
+          document.activeElement?.classList.contains(
+            'CodeMirror-search-field'
+          ) &&
+          e.key === 'f'
+        ) {
+          e.preventDefault();
+        }
       }
     };
 
@@ -259,6 +275,14 @@ export const CodeEditor = ({ code, onChange, previewCode, hints }: Props) => {
           [`${keymapModifierKey}-D`]: selectNextOccurrence,
           [`Shift-${keymapModifierKey}-,`]: wrapInTag,
           [`${keymapModifierKey}-/`]: toggleComment,
+          [`${keymapModifierKey}-F`]: 'findPersistent',
+          [`${keymapModifierKey}-Alt-F`]: 'replace',
+          [`${keymapModifierKey}-G`]: 'jumpToLine',
+          ['Alt-G']: false, // override default keybinding
+          ['Alt-F']: false, // override default keybinding
+          ['Shift-Ctrl-R']: false, // override default keybinding
+          ['Cmd-Option-F']: false, // override default keybinding
+          ['Shift-Cmd-Option-F']: false, // override default keybinding
           [`Shift-${keymapModifierKey}-C`]: () => {
             dispatch({
               type: 'copyToClipboard',

package/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';
   }

package/src/Playroom/SettingsPanel/SettingsPanel.tsx

@@ -25,12 +25,15 @@ const getKeyBindings = () => {
   const shiftKeySymbol = isMac() ? '⇧' : 'Shift';
 
   return {
+    Find: [metaKeySymbol, 'F'],
+    'Find and replace': [metaKeySymbol, altKeySymbol, 'F'],
     'Toggle comment': [metaKeySymbol, '/'],
     'Wrap selection in tag': [metaKeySymbol, shiftKeySymbol, ','],
     'Format code': [metaKeySymbol, 'S'],
     'Insert snippet': [metaKeySymbol, 'K'],
     'Copy Playroom link': [metaKeySymbol, shiftKeySymbol, 'C'],
     'Select next occurrence': [metaKeySymbol, 'D'],
+    'Jump to line number': [metaKeySymbol, 'G'],
     'Swap line up': [altKeySymbol, '↑'],
     'Swap line down': [altKeySymbol, '↓'],
     'Duplicate line up': [shiftKeySymbol, altKeySymbol, '↑'],

package/src/Playroom/palettes.ts

@@ -49,7 +49,8 @@ export const light = {
     neutral: originalPalette.gray2,
     surface: originalPalette.white,
     body: originalPalette.gray1,
-    selection: originalPalette.blue0,
+    selection: transparentize(0.85, originalPalette.blue1),
+    search: darken(0.15, originalPalette.blue0),
   },
   border: {
     standard: originalPalette.gray2,
@@ -143,14 +144,15 @@ export const dark = {
     positive: seekPalette.mint[500],
   },
   background: {
-    transparent: 'rgba(0, 0, 0, .15)',
+    transparent: 'rgba(255, 255, 255, .07)',
     accent: seekPalette.blue[500],
     positive: mix(0.6, seekPalette.grey[900], seekPalette.mint[500]),
     critical: mix(0.7, seekPalette.grey[900], seekPalette.red[600]),
     neutral: seekPalette.grey[800],
     surface: seekPalette.grey[900],
     body: darken(0.03, seekPalette.grey[900]),
-    selection: transparentize(0.85, seekPalette.blue[600]),
+    selection: transparentize(0.75, seekPalette.blue[600]),
+    search: transparentize(0.25, seekPalette.blue[600]),
   },
   border: {
     standard: seekPalette.grey[800],

package/src/Playroom/sprinkles.css.ts

@@ -75,6 +75,7 @@ export const colorPaletteVars = createThemeContract({
     surface: null,
     body: null,
     selection: null,
+    search: null,
   },
   border: {
     standard: null,