playroom 0.28.2 → 0.30.0

package/.github/workflows/preview-site.yml

@@ -16,7 +16,7 @@ jobs:
         uses: actions/checkout@v3
 
       - name: Set up pnpm
-        uses: pnpm/action-setup@v2.2.2
+        uses: pnpm/action-setup@v2.2.4
 
       - name: Set up Node.js
         uses: actions/setup-node@v3

package/.github/workflows/release.yml

@@ -19,7 +19,7 @@ jobs:
           fetch-depth: 0
 
       - name: Set up pnpm
-        uses: pnpm/action-setup@v2.2.2
+        uses: pnpm/action-setup@v2.2.4
 
       - name: Set up Node.js
         uses: actions/setup-node@v3

package/.github/workflows/snapshot.yml

@@ -17,7 +17,7 @@ jobs:
           token: ${{ secrets.GITHUB_TOKEN }}
 
       - name: Set up pnpm
-        uses: pnpm/action-setup@v2.2.2
+        uses: pnpm/action-setup@v2.2.4
 
       - name: Set up Node.js
         uses: actions/setup-node@v3

package/.github/workflows/validate.yml

@@ -4,8 +4,11 @@ on: [push, pull_request]
 
 jobs:
   test:
+    strategy:
+      matrix:
+        os: [ubuntu-latest, macos-latest]
     name: Lint & Test
-    runs-on: ubuntu-latest
+    runs-on: ${{ matrix.os }}
     env:
       CI: true
     steps:
@@ -13,7 +16,7 @@ jobs:
         uses: actions/checkout@v3
 
       - name: Set up pnpm
-        uses: pnpm/action-setup@v2.2.2
+        uses: pnpm/action-setup@v2.2.4
 
       - name: Set up Node.js
         uses: actions/setup-node@v3
@@ -35,6 +38,7 @@ jobs:
             ${{ runner.os }}-pnpm-store-
 
       - name: Cache Cypress binary
+        id: cypress-cache
         uses: actions/cache@v3
         with:
           path: ~/.cache/Cypress
@@ -43,7 +47,9 @@ jobs:
             cypress-${{ runner.os }}-cypress-
 
       - name: Install Dependencies
-        run: pnpm i
+        run: |
+          pnpm install
+          pnpm exec cypress install
 
       - name: Lint
         run: pnpm lint

package/CHANGELOG.md

@@ -1,5 +1,36 @@
 # playroom
 
+## 0.30.0
+
+### Minor Changes
+
+- b247e88: Adds multi-cursor support.
+
+  The keyboard shortcuts added in the previous version (swap/duplicate line up/down) now support multiple cursors being on screen.
+  "Select next occurrence" and "add cursor up/down" have also been implemented.
+
+  | Keybinding                                                     | Action                  |
+  | -------------------------------------------------------------- | ----------------------- |
+  | <kbd><kbd>Alt</kbd> + <kbd>Up</kbd></kbd>                      | Swap line up            |
+  | <kbd><kbd>Alt</kbd> + <kbd>Down</kbd></kbd>                    | Swap line down          |
+  | <kbd><kbd>Shift</kbd> + <kbd>Alt</kbd> + <kbd>Up</kbd></kbd>   | Duplicate line up       |
+  | <kbd><kbd>Shift</kbd> + <kbd>Alt</kbd> + <kbd>Down</kbd></kbd> | Duplicate line down     |
+  | <kbd><kbd>Cmd</kbd> + <kbd>Alt</kbd> + <kbd>Up</kbd></kbd>     | Add cursor to prev line |
+  | <kbd><kbd>Cmd</kbd> + <kbd>Alt</kbd> + <kbd>Down</kbd></kbd>   | Add cursor to next line |
+  | <kbd><kbd>Cmd</kbd> + <kbd>D</kbd></kbd>                       | Select next occurrence  |
+
+## 0.29.0
+
+### Minor Changes
+
+- 9fc8c0d: Adds VSCode-style keybindings for move line up/down and copy line up/down.
+  Works for selections as well as single lines.
+
+  See the VSCode keyboard shortcut reference for details ([Mac]/[Windows]).
+
+  [mac]: https://code.visualstudio.com/shortcuts/keyboard-shortcuts-macos.pdf
+  [windows]: https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf
+
 ## 0.28.2
 
 ### Patch Changes

package/cypress/e2e/keymaps.cy.js

@@ -0,0 +1,185 @@
+import dedent from 'dedent';
+import {
+  typeCode,
+  assertCodePaneContains,
+  loadPlayroom,
+  selectNextWords,
+  selectLines,
+  selectNextCharacters,
+  isMac,
+} from '../support/utils';
+
+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`
+      <div>First line</div>
+      <div>Second line</div>
+      <div>Third line
+    `);
+
+    // Reset the cursor to a reliable position at the beginning
+    typeCode(moveToStart);
+  });
+
+  describe('swapLine', () => {
+    it('should swap single lines up and down without a selection', () => {
+      // Move the first line down
+      typeCode('{alt+downArrow}');
+      assertCodePaneContains(dedent`
+        <div>Second line</div>
+        <div>First line</div>
+        <div>Third line</div>
+      `);
+
+      // Move the line back up
+      typeCode('{alt+upArrow}');
+      assertCodePaneContains(dedent`
+        <div>First line</div>
+        <div>Second line</div>
+        <div>Third line</div>
+      `);
+
+      // Move the bottom line to the top
+      typeCode('{downArrow}{downArrow}{alt+upArrow}{alt+upArrow}');
+      assertCodePaneContains(dedent`
+        <div>Third line</div>
+        <div>First line</div>
+        <div>Second line</div>
+      `);
+    });
+
+    it('should swap single lines up and down with a selection', () => {
+      typeCode('{rightArrow}');
+      selectNextWords(1);
+
+      // The q checks that the selection is maintained after a line shift
+      typeCode('{alt+downArrow}q');
+
+      assertCodePaneContains(dedent`
+        <div>Second line</div>
+        <q>First line</div>
+        <div>Third line</div>
+      `);
+    });
+
+    it('should swap multiple lines up and down with a selection', () => {
+      typeCode('{rightArrow}');
+      selectLines(1);
+      selectNextCharacters(3);
+
+      typeCode('{alt+downArrow}');
+
+      assertCodePaneContains(dedent`
+        <div>Third line</div>
+        <div>First line</div>
+        <div>Second line</div>
+      `);
+
+      // Check that the selection is maintained
+      typeCode('a');
+
+      assertCodePaneContains(dedent`
+        <div>Third line</div>
+        <a>Second line</div>
+      `);
+    });
+  });
+
+  describe('duplicateLine', () => {
+    it('should duplicate single lines up and down', () => {
+      // Duplicate the first line down
+      typeCode('{shift+alt+downArrow}a');
+      assertCodePaneContains(dedent`
+        <div>First line</div>
+        a<div>First line</div>
+        <div>Second line</div>
+        <div>Third line</div>
+      `);
+
+      // Duplicate the last line up
+      typeCode('{downArrow}{downArrow}{leftArrow}');
+      typeCode('{shift+alt+upArrow}a');
+      assertCodePaneContains(dedent`
+        <div>First line</div>
+        a<div>First line</div>
+        <div>Second line</div>
+        a<div>Third line</div>
+        <div>Third line</div>
+      `);
+    });
+  });
+
+  describe('selectNextOccurrence', () => {
+    const cmdPlusD = cmdPlus('D');
+
+    it('should select the current word on one use', () => {
+      typeCode(`{rightArrow}{${cmdPlusD}}`);
+
+      // Overwrite to check the selection
+      typeCode('a');
+
+      assertCodePaneContains(dedent`
+        <a>First line</div>
+        <div>Second line</div>
+        <div>Third line</div>
+      `);
+    });
+
+    it('should select the next instance of the word on two uses', () => {
+      typeCode(`{rightArrow}{${cmdPlusD}}{${cmdPlusD}}`);
+
+      // Overwrite to check the selection
+      typeCode('a');
+
+      assertCodePaneContains(dedent`
+        <a>First line</a>
+        <div>Second line</div>
+        <div>Third line</div>
+      `);
+    });
+
+    it('should select the all instances of the word when spamming the key', () => {
+      typeCode(`{rightArrow}${`{${cmdPlusD}}`.repeat(20)}`);
+
+      // Overwrite to check the selection and that multiple cursors were created
+      typeCode('span');
+
+      assertCodePaneContains(dedent`
+        <span>First line</span>
+        <span>Second line</span>
+        <span>Third line</span>
+      `);
+    });
+  });
+
+  describe('addCursor', () => {
+    it('should add a cursor on the next line', () => {
+      typeCode(`{${cmdPlus('alt+downArrow')}}a`);
+      assertCodePaneContains(dedent`
+        a<div>First line</div>
+        a<div>Second line</div>
+        <div>Third line</div>
+      `);
+    });
+
+    it('should add a cursor on the previous line', () => {
+      typeCode('{downArrow}{downArrow}');
+      typeCode(`{${cmdPlus('alt+upArrow')}}a`);
+      assertCodePaneContains(dedent`
+        <div>First line</div>
+        a<div>Second line</div>
+        a<div>Third line</div>
+      `);
+    });
+  });
+});

package/cypress/e2e/snippets.cy.js

@@ -11,6 +11,7 @@ import {
   assertSnippetsListIsVisible,
   mouseOverSnippet,
   loadPlayroom,
+  isMac,
 } from '../support/utils';
 
 describe('Snippets', () => {
@@ -67,12 +68,12 @@ describe('Snippets', () => {
 
   it('driven with keyboard', () => {
     // Open and format for insertion point
-    typeCode(`${navigator.platform.match('Mac') ? '{cmd}' : '{ctrl}'}k`);
+    typeCode(`${isMac() ? '{cmd}' : '{ctrl}'}k`);
     assertSnippetsListIsVisible();
     assertCodePaneLineCount(8);
     filterSnippets('{esc}');
     assertCodePaneLineCount(1);
-    typeCode(`${navigator.platform.match('Mac') ? '{cmd}' : '{ctrl}'}k`);
+    typeCode(`${isMac() ? '{cmd}' : '{ctrl}'}k`);
     assertSnippetsListIsVisible();
     assertCodePaneLineCount(8);
 
@@ -91,7 +92,7 @@ describe('Snippets', () => {
     assertCodePaneLineCount(1);
 
     // Re-open and persist
-    typeCode(`${navigator.platform.match('Mac') ? '{cmd}' : '{ctrl}'}k`);
+    typeCode(`${isMac() ? '{cmd}' : '{ctrl}'}k`);
     filterSnippets('{downarrow}{downarrow}{downarrow}{downarrow}{enter}');
     assertFirstFrameContains('Initial code\nBar\nBlue Bar');
     assertCodePaneLineCount(7);

package/cypress/support/utils.js

@@ -8,6 +8,8 @@ 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)
@@ -28,7 +30,7 @@ export const typeCode = (code, { delay = 200 } = {}) =>
 export const formatCode = () =>
   getCodeEditor()
     .focused()
-    .type(`${navigator.platform.match('Mac') ? '{cmd}' : '{ctrl}'}s`)
+    .type(`${isMac() ? '{cmd}' : '{ctrl}'}s`)
     .wait(WAIT_FOR_FRAME_TO_RENDER);
 
 export const selectWidthPreferenceByIndex = (index) =>
@@ -85,6 +87,27 @@ export const assertFirstFrameContains = (text) => {
   );
 };
 
+export const selectNextCharacters = (numCharacters) => {
+  typeCode('{shift+rightArrow}'.repeat(numCharacters));
+};
+
+export const selectNextWords = (numWords) => {
+  const modifier = isMac() ? 'alt' : 'ctrl';
+  typeCode(`{shift+${modifier}+rightArrow}`.repeat(numWords));
+};
+
+/**
+ * @typedef {import('../../src/Playroom/CodeEditor/keymaps/types').Direction} Direction
+ */
+/**
+ * @param {number}    numLines
+ * @param {Direction} direction
+ */
+export const selectLines = (numLines, direction = 'down') => {
+  const arrowCode = direction === 'down' ? 'downArrow' : 'upArrow';
+  typeCode(`{shift+${arrowCode}}`.repeat(numLines));
+};
+
 export const assertCodePaneContains = (text) => {
   getCodeEditor().within(() => {
     const lines = [];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "playroom",
-  "version": "0.28.2",
+  "version": "0.30.0",
   "description": "Design with code, powered by your own component library",
   "main": "utils/index.js",
   "types": "utils/index.d.ts",
@@ -82,6 +82,7 @@
     "webpack-merge": "^5.8.0"
   },
   "devDependencies": {
+    "@actions/core": "^1.10.0",
     "@changesets/cli": "^2.25.2",
     "@octokit/rest": "^19.0.5",
     "@types/jest": "^29.2.4",

package/scripts/postCommitStatus.js

@@ -1,4 +1,13 @@
 /* eslint-disable no-console */
+const core = require('@actions/core');
+
+const writeSummary = async ({ title, link }) => {
+  core.summary.addHeading(title, 3);
+  core.summary.addLink(link, link);
+
+  await core.summary.write();
+};
+
 (async () => {
   try {
     console.log('Posting commit status to GitHub...');
@@ -16,17 +25,24 @@
       auth: GITHUB_TOKEN,
     });
 
+    const previewUrl = `https://playroom--${GITHUB_SHA}.surge.sh`;
+
     await octokit.repos.createCommitStatus({
       owner: 'seek-oss',
       repo: 'playroom',
       sha: GITHUB_SHA,
       state: 'success',
       context: 'Preview Site',
-      target_url: `https://playroom--${GITHUB_SHA}.surge.sh`,
+      target_url: previewUrl,
       description: 'The preview for this PR has been successfully deployed',
     });
 
     console.log('Successfully posted commit status to GitHub');
+
+    await writeSummary({
+      title: 'Preview published',
+      link: previewUrl,
+    });
   } catch (err) {
     console.error(err);
     process.exit(1); // eslint-disable-line no-process-exit

package/src/Playroom/CodeEditor/CodeEditor.tsx

@@ -1,6 +1,6 @@
 import React, { useRef, useContext, useEffect, useCallback } from 'react';
 import { useDebouncedCallback } from 'use-debounce';
-import CodeMirror, { Editor } from 'codemirror';
+import { Editor } from 'codemirror';
 import 'codemirror/lib/codemirror.css';
 import 'codemirror/theme/neo.css';
 
@@ -15,6 +15,13 @@ import {
 import * as styles from './CodeEditor.css';
 
 import { UnControlled as ReactCodeMirror } from './CodeMirror2';
+import {
+  completeAfter,
+  completeIfAfterLt,
+  completeIfInTag,
+} from './keymaps/complete';
+import { duplicateLine, swapLineDown, swapLineUp } from './keymaps/lines';
+
 import 'codemirror/mode/jsx/jsx';
 import 'codemirror/addon/edit/closetag';
 import 'codemirror/addon/edit/closebrackets';
@@ -24,39 +31,11 @@ import 'codemirror/addon/selection/active-line';
 import 'codemirror/addon/fold/foldcode';
 import 'codemirror/addon/fold/foldgutter';
 import 'codemirror/addon/fold/brace-fold';
-
-const completeAfter = (cm: Editor, predicate?: () => boolean) => {
-  if (!predicate || predicate()) {
-    setTimeout(() => {
-      if (!cm.state.completionActive) {
-        cm.showHint({ completeSingle: false });
-      }
-    }, 100);
-  }
-
-  return CodeMirror.Pass;
-};
-
-const completeIfAfterLt = (cm: Editor) =>
-  completeAfter(cm, () => {
-    const cur = cm.getCursor();
-    // eslint-disable-next-line new-cap
-    return cm.getRange(CodeMirror.Pos(cur.line, cur.ch - 1), cur) === '<';
-  });
-
-const completeIfInTag = (cm: Editor) =>
-  completeAfter(cm, () => {
-    const tok = cm.getTokenAt(cm.getCursor());
-    if (
-      tok.type === 'string' &&
-      (!/['"]/.test(tok.string.charAt(tok.string.length - 1)) ||
-        tok.string.length === 1)
-    ) {
-      return false;
-    }
-    const inner = CodeMirror.innerMode(cm.getMode(), tok.state).state;
-    return inner.tagName;
-  });
+import {
+  addCursorToNextLine,
+  addCursorToPrevLine,
+  selectNextOccurrence,
+} from './keymaps/cursors';
 
 const validateCode = (editorInstance: Editor, code: string) => {
   editorInstance.clearGutter('errorGutter');
@@ -225,6 +204,8 @@ export const CodeEditor = ({ code, onChange, previewCode, hints }: Props) => {
     }
   }, [highlightLineNumber]);
 
+  const keymapModifierKey = navigator.platform.match('Mac') ? 'Cmd' : 'Ctrl';
+
   return (
     <ReactCodeMirror
       editorDidMount={(editorInstance) => {
@@ -284,6 +265,13 @@ export const CodeEditor = ({ code, onChange, previewCode, hints }: Props) => {
           "'/'": completeIfAfterLt,
           "' '": completeIfInTag,
           "'='": completeIfInTag,
+          'Alt-Up': swapLineUp,
+          'Alt-Down': swapLineDown,
+          'Shift-Alt-Up': duplicateLine('up'),
+          'Shift-Alt-Down': duplicateLine('down'),
+          [`${keymapModifierKey}-Alt-Up`]: addCursorToPrevLine,
+          [`${keymapModifierKey}-Alt-Down`]: addCursorToNextLine,
+          [`${keymapModifierKey}-D`]: selectNextOccurrence,
         },
       }}
     />

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

@@ -0,0 +1,34 @@
+import CodeMirror, { Editor } from 'codemirror';
+
+export const completeAfter = (cm: Editor, predicate?: () => boolean) => {
+  if (!predicate || predicate()) {
+    setTimeout(() => {
+      if (!cm.state.completionActive) {
+        cm.showHint({ completeSingle: false });
+      }
+    }, 100);
+  }
+
+  return CodeMirror.Pass;
+};
+
+export const completeIfAfterLt = (cm: Editor) =>
+  completeAfter(cm, () => {
+    const cur = cm.getCursor();
+    // eslint-disable-next-line new-cap
+    return cm.getRange(CodeMirror.Pos(cur.line, cur.ch - 1), cur) === '<';
+  });
+
+export const completeIfInTag = (cm: Editor) =>
+  completeAfter(cm, () => {
+    const tok = cm.getTokenAt(cm.getCursor());
+    if (
+      tok.type === 'string' &&
+      (!/['"]/.test(tok.string.charAt(tok.string.length - 1)) ||
+        tok.string.length === 1)
+    ) {
+      return false;
+    }
+    const inner = CodeMirror.innerMode(cm.getMode(), tok.state).state;
+    return inner.tagName;
+  });

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

@@ -0,0 +1,113 @@
+import CodeMirror, { Editor, Pos } from 'codemirror';
+
+import 'codemirror/addon/search/searchcursor';
+
+import { Direction, Selection } from './types';
+
+function wordAt(cm: Editor, pos: CodeMirror.Position) {
+  let start = pos.ch;
+  let end = start;
+  const line = cm.getLine(pos.line);
+
+  // Move `start` back to the beginning of the word
+  while (start && CodeMirror.isWordChar(line.charAt(start - 1))) {
+    --start;
+  }
+
+  // Move `end` to the end of the word
+  while (end < line.length && CodeMirror.isWordChar(line.charAt(end))) {
+    ++end;
+  }
+
+  return {
+    from: new Pos(pos.line, start),
+    to: new Pos(pos.line, end),
+    word: line.slice(start, end),
+  };
+}
+
+function rangeIsAlreadySelected(
+  ranges: CodeMirror.Range[],
+  checkRange: Pick<CodeMirror.Range, 'from' | 'to'>
+) {
+  for (const range of ranges) {
+    const startsFromStart =
+      CodeMirror.cmpPos(range.from(), checkRange.from()) === 0;
+    const endsAtEnd = CodeMirror.cmpPos(range.to(), checkRange.to()) === 0;
+
+    if (startsFromStart && endsAtEnd) {
+      return true;
+    }
+  }
+
+  return false;
+}
+
+export const selectNextOccurrence = (cm: Editor) => {
+  const from = cm.getCursor('from');
+  const to = cm.getCursor('to');
+
+  // If the selections are the same as last time this
+  // ran, we're still in full word mode
+  let fullWord = cm.state.selectNextFindFullWord === cm.listSelections();
+
+  // If this is just a cursor, rather than a selection
+  if (CodeMirror.cmpPos(from, to) === 0) {
+    const word = wordAt(cm, from);
+
+    // And there's no actual word at that cursor, then do nothing
+    if (!word.word) {
+      return;
+    }
+
+    // Otherwise select the word and enter full word mode
+    cm.setSelection(word.from, word.to);
+    fullWord = true;
+  } else {
+    const text = cm.getRange(from, to);
+    const query = fullWord ? new RegExp(`\\b${text}\\b`) : text;
+    let cur = cm.getSearchCursor(query, to);
+    let found = cur.findNext();
+
+    // If we didn't find any occurrence in the rest of the
+    // document, start again at the start
+    if (!found) {
+      cur = cm.getSearchCursor(query, new Pos(cm.firstLine(), 0));
+      found = cur.findNext();
+    }
+
+    // If we still didn't find anything, or we re-discover a selection
+    // we already have, then do nothing
+    if (!found || rangeIsAlreadySelected(cm.listSelections(), cur)) {
+      return;
+    }
+
+    cm.addSelection(cur.from(), cur.to());
+  }
+
+  if (fullWord) {
+    cm.state.selectNextFindFullWord = cm.listSelections();
+  }
+};
+
+function addCursorToSelection(cm: Editor, dir: Direction) {
+  const ranges = cm.listSelections();
+  const newRanges: Selection[] = [];
+
+  const linesToMove = dir === 'up' ? -1 : 1;
+
+  for (const range of ranges) {
+    const newAnchor = cm.findPosV(range.anchor, linesToMove, 'line');
+    const newHead = cm.findPosV(range.head, linesToMove, 'line');
+
+    newRanges.push(range);
+    newRanges.push({ anchor: newAnchor, head: newHead });
+  }
+
+  cm.setSelections(newRanges);
+}
+
+export const addCursorToPrevLine = (cm: Editor) =>
+  addCursorToSelection(cm, 'up');
+export const addCursorToNextLine = (cm: Editor) =>
+  addCursorToSelection(cm, 'down');

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

@@ -0,0 +1,192 @@
+import CodeMirror from 'codemirror';
+import { Editor, Pos } from 'codemirror';
+import { Direction, Selection } from './types';
+type RangeMethod = Extract<keyof CodeMirror.Range, 'from' | 'to'>;
+
+const directionToMethod: Record<Direction, RangeMethod> = {
+  up: 'to',
+  down: 'from',
+};
+
+type ContentUpdate = [string, [CodeMirror.Position, CodeMirror.Position?]];
+
+const getNewPosition = (
+  range: CodeMirror.Range,
+  direction: Direction,
+  extraLines: number
+) => {
+  const currentLine = range[directionToMethod[direction]]().line;
+
+  const newLine = direction === 'up' ? currentLine + 1 : currentLine;
+  return new Pos(newLine + extraLines, 0);
+};
+
+const moveByLines = (range: CodeMirror.Range, lines: number) => {
+  const anchor = new Pos(range.anchor.line + lines, range.anchor.ch);
+  const head = new Pos(range.head.line + lines, range.head.ch);
+
+  return { anchor, head };
+};
+
+export const duplicateLine = (direction: Direction) => (cm: Editor) => {
+  const ranges = cm.listSelections();
+
+  const contentUpdates: ContentUpdate[] = [];
+  const newSelections: Selection[] = [];
+
+  // To keep the selections in the right spot, we need to track how many additional
+  // lines have been introduced to the document (in multicursor mode).
+  let newLinesSoFar = 0;
+
+  for (const range of ranges) {
+    const newLineCount = range.to().line - range.from().line + 1;
+    const existingContent = cm.getRange(
+      new Pos(range.from().line, 0),
+      new Pos(range.to().line)
+    );
+
+    const newContentParts = [existingContent, '\n'];
+
+    // Copy up on the last line has some unusual behaviour
+    if (range.to().line === cm.lastLine() && direction === 'up') {
+      newContentParts.reverse();
+    }
+
+    const newContent = newContentParts.join('');
+
+    contentUpdates.push([
+      newContent,
+      [getNewPosition(range, direction, newLinesSoFar)],
+    ]);
+
+    // Copy up doesn't always handle its cursors correctly
+    if (direction === 'up') {
+      newSelections.push(moveByLines(range, newLinesSoFar));
+    }
+
+    newLinesSoFar += newLineCount;
+  }
+
+  cm.operation(function () {
+    for (const [newContent, [start, end]] of contentUpdates) {
+      cm.replaceRange(newContent, start, end, '+swapLine');
+    }
+
+    // Shift the selection up by one line to match the moved content
+    cm.setSelections(newSelections);
+  });
+};
+
+export const swapLineUp = function (cm: Editor) {
+  if (cm.isReadOnly()) {
+    return CodeMirror.Pass;
+  }
+
+  // We need to keep track of the current bottom of the block
+  // to make sure we're not overwriting lines
+  let lastLine = cm.firstLine() - 1;
+
+  const rangesToMove: Array<{ from: number; to: number }> = [];
+  const newSels: Selection[] = [];
+
+  for (const range of cm.listSelections()) {
+    // Include one line above the current range
+    const from = range.from().line - 1;
+    let to = range.to().line;
+
+    // Shift the selection up by one line
+    newSels.push({
+      anchor: new Pos(range.anchor.line - 1, range.anchor.ch),
+      head: new Pos(range.head.line - 1, range.head.ch),
+    });
+
+    // If we've accidentally run over to the start of the
+    // next line, then go back up one
+    if (range.to().ch === 0 && !range.empty()) {
+      --to;
+    }
+
+    // If the one-line-before-current-range is after the last line, put
+    // the start and end lines in the list of lines to move
+    if (from > lastLine) {
+      rangesToMove.push({ from, to });
+      // If the ranges overlap, update the last range in the list
+      // to include both ranges
+    } else if (rangesToMove.length) {
+      rangesToMove[rangesToMove.length - 1].to = to;
+    }
+
+    // Move the last line to the end of the current range
+    lastLine = to;
+  }
+
+  cm.operation(function () {
+    for (const range of rangesToMove) {
+      const { from, to } = range;
+      const line = cm.getLine(from);
+      cm.replaceRange('', new Pos(from, 0), new Pos(from + 1, 0), '+swapLine');
+
+      if (to > cm.lastLine()) {
+        cm.replaceRange(
+          `\n${line}`,
+          new Pos(cm.lastLine()),
+          undefined,
+          '+swapLine'
+        );
+      } else {
+        cm.replaceRange(`${line}\n`, new Pos(to, 0), undefined, '+swapLine');
+      }
+    }
+
+    cm.setSelections(newSels);
+    cm.scrollIntoView(null);
+  });
+};
+
+export const swapLineDown = function (cm: Editor) {
+  if (cm.isReadOnly()) {
+    return CodeMirror.Pass;
+  }
+
+  const ranges = cm.listSelections();
+  const rangesToMove: Array<{ from: number; to: number }> = [];
+
+  let firstLine = cm.lastLine() + 1;
+
+  for (const range of [...ranges].reverse()) {
+    let from = range.to().line + 1;
+    const to = range.from().line;
+
+    if (range.to().ch === 0 && !range.empty()) {
+      from--;
+    }
+
+    if (from < firstLine) {
+      rangesToMove.push({ from, to });
+    } else if (rangesToMove.length) {
+      rangesToMove[rangesToMove.length - 1].to = to;
+    }
+
+    firstLine = to;
+  }
+
+  cm.operation(function () {
+    for (const range of rangesToMove) {
+      const { from, to } = range;
+      const line = cm.getLine(from);
+      if (from === cm.lastLine()) {
+        cm.replaceRange('', new Pos(from - 1), new Pos(from), '+swapLine');
+      } else {
+        cm.replaceRange(
+          '',
+          new Pos(from, 0),
+          new Pos(from + 1, 0),
+          '+swapLine'
+        );
+      }
+
+      cm.replaceRange(`${line}\n`, new Pos(to, 0), undefined, '+swapLine');
+    }
+    cm.scrollIntoView(null);
+  });
+};

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

@@ -0,0 +1,5 @@
+import { Editor } from 'codemirror';
+
+export type Direction = 'up' | 'down';
+
+export type Selection = Parameters<Editor['setSelections']>[0][number];