playroom 0.30.0 → 0.31.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # playroom
 
+## 0.31.0
+
+### Minor Changes
+
+- 8ce01ff: Add keyboard shortcuts legend to the settings panel, to help with discoverability.
+- 8ce01ff: Adds keybinding for wrapping the current selection in a tag.
+
+  Pressing <kbd><kbd>Cmd</kbd>+<kbd>Shift</kbd>+<kbd>,</kbd></kbd> (or, on Windows, <kbd><kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>,</kbd></kbd>) will wrap the currently selected text in an empty fragment that is ready to be typed in.
+
+  Works for single cursors (doesn't wrap anything), single line selections, multi-line selections, and multiple cursors.
+
 ## 0.30.0
 
 ### Minor Changes

package/cypress/e2e/keymaps.cy.js

@@ -6,29 +6,22 @@ import {
   selectNextWords,
   selectLines,
   selectNextCharacters,
-  isMac,
+  selectToEndOfLine,
 } from '../support/utils';
+import { isMac } from '../../src/utils/formatting';
 
 const cmdPlus = (keyCombo) => {
   const platformSpecificKey = isMac() ? 'cmd' : 'ctrl';
   return `${platformSpecificKey}+${keyCombo}`;
 };
 
-const moveToStart = isMac() ? '{cmd+upArrow}' : '{ctrl+home}';
-
 describe('Keymaps', () => {
   beforeEach(() => {
-    loadPlayroom();
-
-    // The last closing div is automatically inserted by autotag
-    typeCode(dedent`
+    loadPlayroom(`
       <div>First line</div>
       <div>Second line</div>
-      <div>Third line
+      <div>Third line</div>
     `);
-
-    // Reset the cursor to a reliable position at the beginning
-    typeCode(moveToStart);
   });
 
   describe('swapLine', () => {
@@ -160,6 +153,19 @@ describe('Keymaps', () => {
         <span>Third line</span>
       `);
     });
+
+    it("should select next occurrence in whole word mode when there's no selection", () => {
+      typeCode('{rightArrow}'.repeat(3));
+
+      typeCode(`{${cmdPlusD}}`.repeat(2));
+      typeCode('span');
+
+      assertCodePaneContains(dedent`
+        <span>First line</span>
+        <div>Second line</div>
+        <div>Third line</div>
+      `);
+    });
   });
 
   describe('addCursor', () => {
@@ -182,4 +188,115 @@ describe('Keymaps', () => {
       `);
     });
   });
+
+  describe('wrapTag', () => {
+    const modifierKey = isMac() ? 'cmd' : 'ctrl';
+
+    it("should insert a fragment with cursors when there's no selection", () => {
+      typeCode(`{shift+${modifierKey}+,}`);
+      typeCode('a');
+
+      assertCodePaneContains(dedent`
+        <a></a><div>First line</div>
+        <div>Second line</div>
+        <div>Third line</div>
+      `);
+    });
+
+    it('should wrap the selection when there is one', () => {
+      selectToEndOfLine();
+
+      typeCode(`{shift+${modifierKey}+,}`);
+      typeCode('span');
+
+      assertCodePaneContains(dedent`
+        <span><div>First line</div></span>
+        <div>Second line</div>
+        <div>Third line</div>
+      `);
+    });
+
+    it('should wrap a multi-line selection', () => {
+      typeCode('{shift+downArrow}');
+      selectToEndOfLine();
+
+      typeCode(`{shift+${modifierKey}+,}`);
+      typeCode('span');
+
+      assertCodePaneContains(dedent`
+        <span>
+          <div>First line</div>
+          <div>Second line</div>
+        </span>
+        <div>Third line</div>
+      `);
+    });
+
+    it('should wrap a multi-line selection when selected from a different indent level', () => {
+      // This is a replay of the previous test, to give us an indent level
+      typeCode('{shift+downArrow}');
+      selectToEndOfLine();
+
+      typeCode(`{shift+${modifierKey}+,}`);
+      typeCode('span');
+
+      // Return to the start
+      const moveToStart = isMac() ? '{cmd+upArrow}' : '{ctrl+home}';
+      typeCode(moveToStart);
+
+      // Select from the far left and try wrap
+      typeCode('{downArrow}');
+      typeCode('{shift+downArrow}'.repeat(2));
+
+      typeCode(`{shift+${modifierKey}+,}`);
+      typeCode('a');
+
+      assertCodePaneContains(dedent`
+        <span>
+          <a>
+            <div>First line</div>
+            <div>Second line</div>
+          </a>
+        </span>
+        <div>Third line</div>
+      `);
+    });
+
+    it('should wrap a multi-cursor single-line selection', () => {
+      typeCode(`{${modifierKey}+alt+downArrow}`);
+      selectToEndOfLine();
+
+      typeCode(`{shift+${modifierKey}+,}`);
+      typeCode('span');
+
+      assertCodePaneContains(dedent`
+        <span><div>First line</div></span>
+        <span><div>Second line</div></span>
+        <div>Third line</div>
+      `);
+    });
+
+    it('should wrap a multi-cursor multi-line selection', () => {
+      typeCode(`{${modifierKey}+alt+downArrow}`);
+      typeCode('{shift+alt+downArrow}{upArrow}');
+
+      selectLines(1);
+      selectToEndOfLine();
+
+      typeCode(`{shift+${modifierKey}+,}`);
+      typeCode('span');
+
+      assertCodePaneContains(dedent`
+        <span>
+          <div>First line</div>
+          <div>First line</div>
+        </span>
+        <span>
+          <div>Second line</div>
+          <div>Second line</div>
+        </span>
+        <div>Third line</div>
+      `);
+    });
+  });
 });

package/cypress/e2e/snippets.cy.js

@@ -11,8 +11,8 @@ import {
   assertSnippetsListIsVisible,
   mouseOverSnippet,
   loadPlayroom,
-  isMac,
 } from '../support/utils';
+import { isMac } from '../../src/utils/formatting';
 
 describe('Snippets', () => {
   beforeEach(() => {

package/cypress/support/utils.js

@@ -1,3 +1,10 @@
+// eslint-disable-next-line spaced-comment
+/// <reference types="cypress" />
+import dedent from 'dedent';
+
+import { createUrl } from '../../utils';
+import { isMac } from '../../src/utils/formatting';
+
 const WAIT_FOR_FRAME_TO_RENDER = 1000;
 
 const getCodeEditor = () => cy.get('.CodeMirror-code');
@@ -8,8 +15,6 @@ export const getPreviewFrameNames = () => cy.get('[data-testid="frameName"]');
 
 export const getFirstFrame = () => getPreviewFrames().first();
 
-export const isMac = () => navigator.platform.match('Mac');
-
 export const visit = (url) =>
   cy
     .visit(url)
@@ -96,6 +101,10 @@ export const selectNextWords = (numWords) => {
   typeCode(`{shift+${modifier}+rightArrow}`.repeat(numWords));
 };
 
+export const selectToEndOfLine = () => {
+  typeCode(isMac() ? '{shift+cmd+rightArrow}' : '{shift+end}');
+};
+
 /**
  * @typedef {import('../../src/Playroom/CodeEditor/keymaps/types').Direction} Direction
  */
@@ -146,9 +155,14 @@ export const assertPreviewContains = (text) =>
       expect(el.get(0).innerText).to.eq(text);
     });
 
-export const loadPlayroom = () =>
-  cy
-    .visit('http://localhost:9000')
+export const loadPlayroom = (initialCode) => {
+  const baseUrl = 'http://localhost:9000';
+  const visitUrl = initialCode
+    ? createUrl({ baseUrl, code: dedent(initialCode) })
+    : baseUrl;
+
+  return cy
+    .visit(visitUrl)
     .window()
     .then((win) => {
       const { storageKey } = win.__playroomConfig__;
@@ -161,3 +175,4 @@ export const loadPlayroom = () =>
           new Cypress.Promise((resolve) => $iframe.on('load', resolve))
       )
     );
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "playroom",
-  "version": "0.30.0",
+  "version": "0.31.0",
   "description": "Design with code, powered by your own component library",
   "main": "utils/index.js",
   "types": "utils/index.d.ts",

package/src/Playroom/CodeEditor/CodeEditor.tsx

@@ -5,7 +5,7 @@ import 'codemirror/lib/codemirror.css';
 import 'codemirror/theme/neo.css';
 
 import { StoreContext, CursorPosition } from '../../StoreContext/StoreContext';
-import { formatCode as format } from '../../utils/formatting';
+import { formatCode as format, isMac } from '../../utils/formatting';
 import {
   closeFragmentTag,
   compileJsx,
@@ -36,6 +36,7 @@ import {
   addCursorToPrevLine,
   selectNextOccurrence,
 } from './keymaps/cursors';
+import { wrapInTag } from './keymaps/wrap';
 
 const validateCode = (editorInstance: Editor, code: string) => {
   editorInstance.clearGutter('errorGutter');
@@ -109,11 +110,9 @@ export const CodeEditor = ({ code, onChange, previewCode, hints }: Props) => {
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
       if (editorInstanceRef && editorInstanceRef.current) {
-        const cmdOrCtrl = navigator.platform.match('Mac')
-          ? e.metaKey
-          : e.ctrlKey;
+        const cmdOrCtrl = isMac() ? e.metaKey : e.ctrlKey;
 
-        if (cmdOrCtrl && e.keyCode === 83) {
+        if (cmdOrCtrl && e.key === 's') {
           e.preventDefault();
           const { code: formattedCode, cursor: formattedCursor } = format({
             code: editorInstanceRef.current.getValue(),
@@ -128,7 +127,7 @@ export const CodeEditor = ({ code, onChange, previewCode, hints }: Props) => {
           editorInstanceRef.current.setCursor(formattedCursor);
         }
 
-        if (cmdOrCtrl && /^[k]$/.test(e.key)) {
+        if (cmdOrCtrl && e.key === 'k') {
           e.preventDefault();
           dispatch({ type: 'toggleToolbar', payload: { panel: 'snippets' } });
         }
@@ -204,7 +203,7 @@ export const CodeEditor = ({ code, onChange, previewCode, hints }: Props) => {
     }
   }, [highlightLineNumber]);
 
-  const keymapModifierKey = navigator.platform.match('Mac') ? 'Cmd' : 'Ctrl';
+  const keymapModifierKey = isMac() ? 'Cmd' : 'Ctrl';
 
   return (
     <ReactCodeMirror
@@ -272,6 +271,7 @@ export const CodeEditor = ({ code, onChange, previewCode, hints }: Props) => {
           [`${keymapModifierKey}-Alt-Up`]: addCursorToPrevLine,
           [`${keymapModifierKey}-Alt-Down`]: addCursorToNextLine,
           [`${keymapModifierKey}-D`]: selectNextOccurrence,
+          [`Shift-${keymapModifierKey}-,`]: wrapInTag,
         },
       }}
     />

package/src/Playroom/CodeEditor/keymaps/wrap.ts

@@ -0,0 +1,84 @@
+import CodeMirror, { Editor, Pos } from 'codemirror';
+import { Selection } from './types';
+
+interface TagRange {
+  from: CodeMirror.Position;
+  to: CodeMirror.Position;
+  multiLine: boolean;
+  existingIndent: number;
+}
+
+export const wrapInTag = (cm: Editor) => {
+  const newSelections: Selection[] = [];
+  const tagRanges: TagRange[] = [];
+
+  let linesAdded = 0;
+
+  for (const range of cm.listSelections()) {
+    const from = range.from();
+    let to = range.to();
+
+    if (to.line !== from.line && to.ch === 0) {
+      to = new Pos(to.line - 1);
+    }
+
+    const existingContent = cm.getRange(from, to);
+    const existingIndent =
+      existingContent.length - existingContent.trimStart().length;
+
+    const isMultiLineSelection = to.line !== from.line;
+
+    tagRanges.push({
+      from,
+      to,
+      multiLine: isMultiLineSelection,
+      existingIndent,
+    });
+
+    const newStartCursor = new Pos(
+      from.line + linesAdded,
+      from.ch + existingIndent + 1
+    );
+    const newEndCursor = isMultiLineSelection
+      ? new Pos(to.line + linesAdded + 2, from.ch + existingIndent + 2)
+      : new Pos(to.line + linesAdded, to.ch + 4);
+
+    if (isMultiLineSelection) {
+      linesAdded += 2;
+    }
+
+    newSelections.push({ anchor: newStartCursor, head: newStartCursor });
+    newSelections.push({ anchor: newEndCursor, head: newEndCursor });
+  }
+
+  cm.operation(() => {
+    for (const range of [...tagRanges].reverse()) {
+      const existingContent = cm.getRange(range.from, range.to);
+
+      if (range.multiLine) {
+        const formattedExistingContent = existingContent
+          .split('\n')
+          .map((line, idx) => {
+            const indentLevel = ' '.repeat((idx === 0 ? range.from.ch : 0) + 2);
+            return `${indentLevel}${line}`;
+          })
+          .join('\n');
+
+        const openTagIndentLevel = ' '.repeat(range.existingIndent);
+        const closeTagIndentLevel = ' '.repeat(
+          range.from.ch + range.existingIndent
+        );
+
+        cm.replaceRange(
+          `${openTagIndentLevel}<>\n${formattedExistingContent}\n${closeTagIndentLevel}</>`,
+          range.from,
+          range.to
+        );
+      } else {
+        cm.replaceRange(`<>${existingContent}</>`, range.from, range.to);
+      }
+    }
+
+    cm.setSelections(newSelections);
+  });
+};

package/src/Playroom/SettingsPanel/SettingsPanel.css.ts

@@ -1,5 +1,5 @@
 import { colorPaletteVars, sprinkles, vars } from '../sprinkles.css';
-import { style } from '@vanilla-extract/css';
+import { globalStyle, style } from '@vanilla-extract/css';
 
 export const fieldset = sprinkles({
   border: 0,
@@ -12,6 +12,35 @@ export const radioContainer = sprinkles({
   paddingTop: 'medium',
 });
 
+export const keyboardShortcutRow = style({
+  display: 'flex',
+  alignItems: 'center',
+});
+
+globalStyle(`${keyboardShortcutRow} > *:first-child`, {
+  flex: 1,
+});
+
+globalStyle(`${keyboardShortcutRow} > *:nth-child(2)`, {
+  flex: '0 0 43%',
+});
+
+export const kbd = style([
+  sprinkles({
+    borderRadius: 'large',
+    paddingY: 'xsmall',
+    textAlign: 'center',
+  }),
+  {
+    display: 'inline-block',
+    background: colorPaletteVars.background.neutral,
+    paddingLeft: 8,
+    paddingRight: 8,
+    fontFamily: 'system-ui',
+    minWidth: 16,
+  },
+]);
+
 export const realRadio = style([
   sprinkles({
     position: 'absolute',

package/src/Playroom/SettingsPanel/SettingsPanel.tsx

@@ -15,6 +15,26 @@ import * as styles from './SettingsPanel.css';
 import ColorModeSystemIcon from '../icons/ColorModeSystemIcon';
 import ColorModeLightIcon from '../icons/ColorModeLightIcon';
 import ColorModeDarkIcon from '../icons/ColorModeDarkIcon';
+import { Text } from '../Text/Text';
+import { Inline } from '../Inline/Inline';
+import { isMac } from '../../utils/formatting';
+
+const getKeyBindings = () => {
+  const metaKeySymbol = isMac() ? '⌘' : 'Ctrl';
+  const altKeySymbol = isMac() ? '⌥' : 'Alt';
+
+  return {
+    'Format code': [metaKeySymbol, 'S'],
+    'Swap line up': [altKeySymbol, '↑'],
+    'Swap line down': [altKeySymbol, '↓'],
+    'Duplicate line up': ['⇧', altKeySymbol, '↑'],
+    'Duplicate line down': ['⇧', altKeySymbol, '↓'],
+    'Add cursor to prev line': [metaKeySymbol, altKeySymbol, '↑'],
+    'Add cursor to next line': [metaKeySymbol, altKeySymbol, '↓'],
+    'Select next occurrence': [metaKeySymbol, 'D'],
+    'Wrap selection in tag': [metaKeySymbol, '⇧', ','],
+  };
+};
 
 const positionIcon: Record<EditorPosition, ReactChild> = {
   undocked: <EditorUndockedIcon />,
@@ -28,11 +48,36 @@ const colorModeIcon: Record<ColorScheme, ReactChild> = {
   system: <ColorModeSystemIcon />,
 };
 
-interface SettingsPanelProps {}
+interface KeyboardShortcutProps {
+  keybinding: string[];
+  description: string;
+}
 
-export default ({}: SettingsPanelProps) => {
+const KeyboardShortcut = ({
+  keybinding,
+  description,
+}: KeyboardShortcutProps) => {
+  const shortcutSegments = keybinding.map((segment) => (
+    <kbd className={styles.kbd} key={`${keybinding}-${segment}`}>
+      {segment}
+    </kbd>
+  ));
+
+  return (
+    <div className={styles.keyboardShortcutRow}>
+      <Text>{description}</Text>
+      <Text size={isMac() ? 'large' : 'standard'}>
+        <Inline space="xxsmall">{shortcutSegments}</Inline>
+      </Text>
+    </div>
+  );
+};
+
+export default React.memo(() => {
   const [{ editorPosition, colorScheme }, dispatch] = useContext(StoreContext);
 
+  const keybindings = getKeyBindings();
+
   return (
     <ToolbarPanel data-testid="frame-panel">
       <Stack space="large" dividers>
@@ -111,7 +156,18 @@ export default ({}: SettingsPanelProps) => {
             ))}
           </div>
         </fieldset>
+
+        <Stack space="medium">
+          <Heading level="3">Keyboard Shortcuts</Heading>
+          {Object.entries(keybindings).map(([description, keybinding]) => (
+            <KeyboardShortcut
+              description={description}
+              keybinding={keybinding}
+              key={description}
+            />
+          ))}
+        </Stack>
       </Stack>
     </ToolbarPanel>
   );
-};
+});

package/src/Playroom/SplashScreen/SplashScreen.css.ts

@@ -1,4 +1,5 @@
 import { style, globalStyle, keyframes } from '@vanilla-extract/css';
+import { dark } from '../palettes';
 import { sprinkles, colorPaletteVars } from '../sprinkles.css';
 
 export const animationDuration = 1300;
@@ -17,7 +18,7 @@ export const root = style([
   }),
   {
     zIndex: 100,
-    background: colorPaletteVars.background.neutral,
+    background: dark.background.neutral,
     color: colorPaletteVars.foreground.neutralInverted,
   },
 ]);

package/src/Playroom/Toolbar/Toolbar.css.ts

@@ -3,7 +3,7 @@ import { style } from '@vanilla-extract/css';
 import { sprinkles, colorPaletteVars } from '../sprinkles.css';
 import { toolbarItemSize } from '../ToolbarItem/ToolbarItem.css';
 
-export const toolbarOpenSize = 300;
+export const toolbarOpenSize = 320;
 const toolbarBorderThickness = '1px';
 
 export const isOpen = style({});

package/src/Playroom/Toolbar/Toolbar.tsx

@@ -15,6 +15,7 @@ import PlayIcon from '../icons/PlayIcon';
 import * as styles from './Toolbar.css';
 import SettingsPanel from '../SettingsPanel/SettingsPanel';
 import SettingsIcon from '../icons/SettingsIcon';
+import { isMac } from '../../utils/formatting';
 
 interface Props {
   themes: PlayroomProps['themes'];
@@ -80,9 +81,7 @@ export default ({ themes: allThemes, widths: allWidths, snippets }: Props) => {
             {hasSnippets && (
               <ToolbarItem
                 active={isSnippetsOpen}
-                title={`Insert snippet (${
-                  navigator.platform.match('Mac') ? '\u2318' : 'Ctrl + '
-                }K)`}
+                title={`Insert snippet (${isMac() ? '\u2318' : 'Ctrl + '}K)`}
                 disabled={!validCursorPosition}
                 data-testid="toggleSnippets"
                 onClick={() => {

package/src/Playroom/palettes.ts

@@ -14,7 +14,7 @@ const originalPalette = {
   purple: '#75438a',
   white: '#fff',
   gray1: '#f4f4f4',
-  gray2: '#e8e8e8',
+  gray2: '#eeeeee',
   gray3: '#a7a7a7',
   gray4: '#767676',
   gray5: '#515151',
@@ -46,7 +46,7 @@ export const light = {
     accent: originalPalette.blue2,
     positive: originalPalette.green1,
     critical: originalPalette.red1,
-    neutral: originalPalette.gray6,
+    neutral: originalPalette.gray2,
     surface: originalPalette.white,
     body: originalPalette.gray1,
     selection: originalPalette.blue0,

package/src/utils/formatting.ts

@@ -8,6 +8,8 @@ export interface CodeWithCursor {
   cursor: CursorPosition;
 }
 
+export const isMac = () => Boolean(navigator.platform.match('Mac'));
+
 export const runPrettier = ({
   code,
   cursorOffset,