playroom 0.34.2 → 0.36.0

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

@@ -0,0 +1,326 @@
+import type CodeMirror from 'codemirror';
+import { type Editor, Pos } from 'codemirror';
+import type { Selection } from './types';
+
+const BLOCK_COMMENT_START = '{/*';
+const BLOCK_COMMENT_END = '*/}';
+
+const LINE_COMMENT_START = '//';
+
+const BLOCK_COMMENT_OFFSET = BLOCK_COMMENT_START.length + 1;
+const LINE_COMMENT_OFFSET = LINE_COMMENT_START.length + 1;
+
+const OPENING_AND_CLOSING_BLOCK_COMMENT_SYNTAX = /\{\/\*\s?|\s?\*\/\}/g;
+const OPENING_LINE_COMMENT_SYNTAX_WITH_LEADING_WHITESPACE = /^(\s*)\/\/\s?/gm;
+const LINE_COMMENT_LEADING_WHITESPACE = '$1';
+
+interface IsReverseSelectionOptions {
+  anchor: CodeMirror.Position;
+  head: CodeMirror.Position;
+}
+
+function isReverseSelection({
+  anchor,
+  head,
+}: IsReverseSelectionOptions): boolean {
+  return (
+    anchor.line > head.line ||
+    (anchor.line === head.line && anchor.ch > head.ch)
+  );
+}
+
+function getCommentStartInfo(commentType: CommentType, fullContent: string) {
+  const commentStart =
+    commentType === 'block' ? BLOCK_COMMENT_START : LINE_COMMENT_START;
+
+  const commentStartWithSpace = `${commentStart} `;
+  const commentStartUsed =
+    fullContent.indexOf(commentStartWithSpace) === -1
+      ? commentStart
+      : commentStartWithSpace;
+
+  const commentStartIndex = fullContent.indexOf(commentStartUsed);
+
+  return {
+    commentStartUsed,
+    commentStartIndex,
+  };
+}
+
+function getSelectionPositionRelativeToCommentStart(
+  selectionEndpoint: CodeMirror.Position,
+  commentStartIndex: number,
+  commentStartUsed: string
+): 'before' | 'during' | 'after' {
+  if (selectionEndpoint.ch < commentStartIndex) {
+    return 'before';
+  }
+
+  if (selectionEndpoint.ch > commentStartIndex + commentStartUsed.length) {
+    return 'after';
+  }
+
+  return 'during';
+}
+
+interface GetSelectionFromOffsetOptions {
+  commentType: CommentType;
+  isAlreadyCommented: boolean;
+  fullContent: string;
+  from: CodeMirror.Position;
+}
+
+function getSelectionFromOffset({
+  commentType,
+  isAlreadyCommented,
+  fullContent,
+  from,
+}: GetSelectionFromOffsetOptions) {
+  if (!isAlreadyCommented) {
+    const totalLeadingWhitespace =
+      fullContent.length - fullContent.trimStart().length;
+
+    const fromPositionBeforeCodeStart = from.ch < totalLeadingWhitespace;
+
+    if (fromPositionBeforeCodeStart) {
+      return 0;
+    }
+
+    return commentType === 'block' ? BLOCK_COMMENT_OFFSET : LINE_COMMENT_OFFSET;
+  }
+
+  const { commentStartUsed, commentStartIndex } = getCommentStartInfo(
+    commentType,
+    fullContent
+  );
+
+  const fromPositionRelativeToCommentStart =
+    getSelectionPositionRelativeToCommentStart(
+      from,
+      commentStartIndex,
+      commentStartUsed
+    );
+
+  switch (fromPositionRelativeToCommentStart) {
+    case 'before':
+      return 0;
+    case 'during':
+      return commentStartIndex - from.ch;
+    case 'after':
+      return -commentStartUsed.length;
+  }
+}
+
+interface GetSelectionToOffsetOptions {
+  to: CodeMirror.Position;
+  commentType: CommentType;
+  isAlreadyCommented: boolean;
+  isMultiLineSelection: boolean;
+  fullContent: string;
+}
+
+function getSelectionToOffset({
+  to,
+  commentType,
+  isAlreadyCommented,
+  isMultiLineSelection,
+  fullContent,
+}: GetSelectionToOffsetOptions) {
+  const commentOffset =
+    commentType === 'block' ? BLOCK_COMMENT_OFFSET : LINE_COMMENT_OFFSET;
+
+  if (isMultiLineSelection && commentType === 'block') {
+    return 0;
+  }
+
+  const totalLeadingWhitespace =
+    fullContent.length - fullContent.trimStart().length;
+  const toPositionBeforeCodeStart = to.ch < totalLeadingWhitespace;
+
+  if (!isAlreadyCommented) {
+    if (!isMultiLineSelection && toPositionBeforeCodeStart) {
+      return 0;
+    }
+
+    return commentOffset;
+  }
+
+  const { commentStartUsed, commentStartIndex } = getCommentStartInfo(
+    commentType,
+    fullContent
+  );
+
+  const toPositionRelativeToCommentStart =
+    getSelectionPositionRelativeToCommentStart(
+      to,
+      commentStartIndex,
+      commentStartUsed
+    );
+
+  switch (toPositionRelativeToCommentStart) {
+    case 'before':
+      return 0;
+    case 'during':
+      return commentStartIndex - to.ch;
+    case 'after':
+      return -commentOffset;
+  }
+}
+
+function getUpdatedContent(existingContent: string, range: TagRange) {
+  if (range.isAlreadyCommented) {
+    const uncommentType: CommentType = existingContent
+      .trimStart()
+      .startsWith(BLOCK_COMMENT_START)
+      ? 'block'
+      : 'line';
+
+    const existingContentWithoutComment = existingContent.replace(
+      uncommentType === 'block'
+        ? OPENING_AND_CLOSING_BLOCK_COMMENT_SYNTAX
+        : OPENING_LINE_COMMENT_SYNTAX_WITH_LEADING_WHITESPACE,
+      uncommentType === 'block' ? '' : LINE_COMMENT_LEADING_WHITESPACE
+    );
+
+    return existingContentWithoutComment;
+  }
+
+  if (range.commentType === 'block') {
+    return `${BLOCK_COMMENT_START} ${existingContent} ${BLOCK_COMMENT_END}`;
+  }
+
+  if (range.multiLine) {
+    return existingContent.replace(/^(\s*)/gm, `$1${LINE_COMMENT_START} `);
+  }
+
+  return `${LINE_COMMENT_START} ${existingContent}`;
+}
+
+type CommentType = 'line' | 'block';
+
+interface TagRange {
+  from: CodeMirror.Position;
+  to: CodeMirror.Position;
+  multiLine: boolean;
+  existingIndent: number;
+  isAlreadyCommented: boolean;
+  commentType: CommentType;
+}
+
+const determineCommentType = (
+  cm: Editor,
+  from: CodeMirror.Position,
+  to: CodeMirror.Position
+): CommentType => {
+  const lineTokens = cm.getLineTokens(from.line);
+
+  const containsTag = lineTokens.some((token) => token.type === 'tag');
+  const containsAttribute = lineTokens.some(
+    (token) => token.type === 'attribute'
+  );
+
+  const isJavaScriptMode = cm.getModeAt(from).name === 'javascript';
+  const isInlineComment = cm
+    .getLine(from.line)
+    .trimStart()
+    .startsWith(LINE_COMMENT_START);
+  const isBlockComment =
+    cm.getLine(from.line).trimStart().startsWith(BLOCK_COMMENT_START) &&
+    cm.getLine(to.line).trimEnd().endsWith(BLOCK_COMMENT_END);
+
+  if (isInlineComment) {
+    return 'line';
+  }
+
+  if (isJavaScriptMode && !isBlockComment && !containsTag) {
+    return 'line';
+  }
+
+  if (
+    (!isJavaScriptMode && !containsAttribute) ||
+    containsTag ||
+    isJavaScriptMode
+  ) {
+    return 'block';
+  }
+
+  return 'line';
+};
+
+export const toggleComment = (cm: Editor) => {
+  const newSelections: Selection[] = [];
+  const tagRanges: TagRange[] = [];
+
+  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 commentType = determineCommentType(cm, from, to);
+
+    const fullContent = cm.getRange(new Pos(from.line, 0), new Pos(to.line));
+    const existingIndent = fullContent.length - fullContent.trimStart().length;
+
+    const trimmedContent = fullContent.trim();
+
+    const isAlreadyCommented =
+      (trimmedContent.startsWith(BLOCK_COMMENT_START) &&
+        trimmedContent.endsWith(BLOCK_COMMENT_END)) ||
+      trimmedContent.startsWith(LINE_COMMENT_START);
+
+    const isMultiLineSelection = to.line !== from.line;
+
+    tagRanges.push({
+      from,
+      to,
+      multiLine: isMultiLineSelection,
+      existingIndent,
+      isAlreadyCommented,
+      commentType,
+    });
+
+    const fromOffset = getSelectionFromOffset({
+      commentType,
+      isAlreadyCommented,
+      fullContent,
+      from,
+    });
+
+    const toOffset = getSelectionToOffset({
+      to,
+      commentType,
+      isAlreadyCommented,
+      isMultiLineSelection,
+      fullContent,
+    });
+
+    const newSelectionRangeFrom = new Pos(from.line, from.ch + fromOffset);
+    const newSelectionRangeTo = new Pos(to.line, to.ch + toOffset);
+
+    const newSelection = isReverseSelection(range)
+      ? { anchor: newSelectionRangeTo, head: newSelectionRangeFrom }
+      : { anchor: newSelectionRangeFrom, head: newSelectionRangeTo };
+
+    newSelections.push(newSelection);
+  }
+
+  cm.operation(() => {
+    for (const range of [...tagRanges].reverse()) {
+      const newRangeFrom = new Pos(range.from.line, range.existingIndent);
+      const newRangeTo = new Pos(range.to.line);
+
+      const existingContent = cm.getRange(newRangeFrom, newRangeTo);
+
+      cm.replaceRange(
+        getUpdatedContent(existingContent, range),
+        newRangeFrom,
+        newRangeTo
+      );
+    }
+
+    cm.setSelections(newSelections);
+  });
+};

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

@@ -36,10 +36,13 @@ export const wrapInTag = (cm: Editor) => {
       existingIndent,
     });
 
+    const startCursorCharacterPosition =
+      from.ch + 1 + (isMultiLineSelection ? existingIndent : 0);
     const newStartCursor = new Pos(
       from.line + linesAdded,
-      from.ch + existingIndent + 1
+      startCursorCharacterPosition
     );
+
     const newEndCursor = isMultiLineSelection
       ? new Pos(to.line + linesAdded + 2, from.ch + existingIndent + 2)
       : new Pos(to.line + linesAdded, to.ch + 4);

package/src/Playroom/Frame.tsx

@@ -19,11 +19,15 @@ export default function Frame({
   components,
   FrameComponent,
 }: FrameProps) {
-  const { themeName, code } = useParams((rawParams) => ({
-    themeName:
-      typeof rawParams.themeName === 'string' ? rawParams.themeName : '',
-    code: typeof rawParams.code === 'string' ? rawParams.code : '',
-  }));
+  const { themeName, code } = useParams((rawParams) => {
+    const rawThemeName = rawParams.get('themeName');
+    const rawCode = rawParams.get('code');
+
+    return {
+      themeName: rawThemeName || '',
+      code: rawCode || '',
+    };
+  });
 
   const resolvedThemeName =
     themeName === '__PLAYROOM__NO_THEME__' ? null : themeName;

package/src/Playroom/FramesPanel/FramesPanel.css.ts

@@ -144,3 +144,22 @@ globalStyle(`${checkbox}:checked ~ ${fakeCheckbox} > svg `, {
   transform: 'none',
   transition: vars.transition.fast,
 });
+
+export const textField = style([
+  sprinkles({
+    font: 'large',
+    width: 'full',
+    paddingX: 'large',
+    boxSizing: 'border-box',
+    borderRadius: 'medium',
+  }),
+  {
+    color: colorPaletteVars.foreground.neutral,
+    height: vars.touchableSize,
+    background: colorPaletteVars.background.surface,
+    '::placeholder': {
+      color: colorPaletteVars.foreground.neutralSoft,
+    },
+    border: `1px solid ${colorPaletteVars.border.standard}`,
+  },
+]);

package/src/Playroom/FramesPanel/FramesPanel.tsx

@@ -7,6 +7,21 @@ import { Stack } from '../Stack/Stack';
 import { Text } from '../Text/Text';
 
 import * as styles from './FramesPanel.css';
+import { Helmet } from 'react-helmet';
+
+const getTitle = (title: string | undefined) => {
+  if (title) {
+    return `${title} | Playroom`;
+  }
+
+  const configTitle = window?.__playroomConfig__.title;
+
+  if (configTitle) {
+    return `${configTitle} | Playroom`;
+  }
+
+  return 'Playroom';
+};
 
 interface FramesPanelProps {
   availableWidths: number[];
@@ -77,7 +92,7 @@ function FrameOption<Option>({
 }
 
 export default ({ availableWidths, availableThemes }: FramesPanelProps) => {
-  const [{ visibleWidths = [], visibleThemes = [] }, dispatch] =
+  const [{ visibleWidths = [], visibleThemes = [], title }, dispatch] =
     useContext(StoreContext);
   const hasThemes =
     availableThemes.filter(
@@ -88,69 +103,97 @@ export default ({ availableWidths, availableThemes }: FramesPanelProps) => {
   const hasFilteredThemes =
     visibleThemes.length > 0 && visibleThemes.length <= availableThemes.length;
 
+  const displayedTitle = getTitle(title);
+
   return (
-    <ToolbarPanel data-testid="frame-panel">
-      <Stack space="large" dividers>
-        <div data-testid="widthsPreferences">
-          <FrameHeading
-            showReset={hasFilteredWidths}
-            onReset={() => dispatch({ type: 'resetVisibleWidths' })}
-          >
-            Widths
-          </FrameHeading>
-
-          {availableWidths.map((option) => (
-            <FrameOption
-              key={option}
-              option={option}
-              selected={hasFilteredWidths && visibleWidths.includes(option)}
-              visible={visibleWidths}
-              available={availableWidths}
-              onChange={(newWidths) => {
-                if (newWidths) {
+    <>
+      {title === undefined ? null : (
+        <Helmet>
+          <title>{displayedTitle}</title>
+        </Helmet>
+      )}
+      <ToolbarPanel data-testid="frame-panel">
+        <Stack space="xxxlarge">
+          <label>
+            <Stack space="medium">
+              <Heading level="3">Title</Heading>
+              <input
+                type="text"
+                id="playroomTitleField"
+                placeholder="Enter a title for this Playroom..."
+                className={styles.textField}
+                value={title}
+                onChange={(e) =>
                   dispatch({
-                    type: 'updateVisibleWidths',
-                    payload: { widths: newWidths },
-                  });
-                } else {
-                  dispatch({ type: 'resetVisibleWidths' });
+                    type: 'updateTitle',
+                    payload: { title: e.target.value },
+                  })
                 }
-              }}
-            />
-          ))}
-        </div>
+              />
+            </Stack>
+          </label>
 
-        {hasThemes ? (
-          <div data-testid="themePreferences">
+          <div data-testid="widthsPreferences">
             <FrameHeading
-              showReset={hasFilteredThemes}
-              onReset={() => dispatch({ type: 'resetVisibleThemes' })}
+              showReset={hasFilteredWidths}
+              onReset={() => dispatch({ type: 'resetVisibleWidths' })}
             >
-              Themes
+              Widths
             </FrameHeading>
 
-            {availableThemes.map((option) => (
+            {availableWidths.map((option) => (
               <FrameOption
                 key={option}
                 option={option}
-                selected={hasFilteredThemes && visibleThemes.includes(option)}
-                visible={visibleThemes}
-                available={availableThemes}
-                onChange={(newThemes) => {
-                  if (newThemes) {
+                selected={hasFilteredWidths && visibleWidths.includes(option)}
+                visible={visibleWidths}
+                available={availableWidths}
+                onChange={(newWidths) => {
+                  if (newWidths) {
                     dispatch({
-                      type: 'updateVisibleThemes',
-                      payload: { themes: newThemes },
+                      type: 'updateVisibleWidths',
+                      payload: { widths: newWidths },
                     });
                   } else {
-                    dispatch({ type: 'resetVisibleThemes' });
+                    dispatch({ type: 'resetVisibleWidths' });
                   }
                 }}
               />
             ))}
           </div>
-        ) : null}
-      </Stack>
-    </ToolbarPanel>
+
+          {hasThemes ? (
+            <div data-testid="themePreferences">
+              <FrameHeading
+                showReset={hasFilteredThemes}
+                onReset={() => dispatch({ type: 'resetVisibleThemes' })}
+              >
+                Themes
+              </FrameHeading>
+
+              {availableThemes.map((option) => (
+                <FrameOption
+                  key={option}
+                  option={option}
+                  selected={hasFilteredThemes && visibleThemes.includes(option)}
+                  visible={visibleThemes}
+                  available={availableThemes}
+                  onChange={(newThemes) => {
+                    if (newThemes) {
+                      dispatch({
+                        type: 'updateVisibleThemes',
+                        payload: { themes: newThemes },
+                      });
+                    } else {
+                      dispatch({ type: 'resetVisibleThemes' });
+                    }
+                  }}
+                />
+              ))}
+            </div>
+          ) : null}
+        </Stack>
+      </ToolbarPanel>
+    </>
   );
 };

package/src/Playroom/Preview.tsx

@@ -9,10 +9,12 @@ import CatchErrors from './CatchErrors/CatchErrors';
 import RenderCode from './RenderCode/RenderCode';
 
 import * as styles from './Preview.css';
+import { Helmet } from 'react-helmet';
 
 interface PreviewState {
   code?: string;
   themeName?: string;
+  title?: string;
 }
 
 export interface PreviewProps {
@@ -25,15 +27,17 @@ export interface PreviewProps {
   }>;
 }
 export default ({ themes, components, FrameComponent }: PreviewProps) => {
-  const { themeName, code } = useParams((rawParams): PreviewState => {
-    if (rawParams.code) {
+  const { themeName, code, title } = useParams((rawParams): PreviewState => {
+    const rawCode = rawParams.get('code');
+    if (rawCode) {
       const result = JSON.parse(
-        lzString.decompressFromEncodedURIComponent(String(rawParams.code)) ?? ''
+        lzString.decompressFromEncodedURIComponent(String(rawCode)) ?? ''
       );
 
       return {
         code: compileJsx(result.code),
         themeName: result.theme,
+        title: result.title,
       };
     }
 
@@ -44,6 +48,11 @@ export default ({ themes, components, FrameComponent }: PreviewProps) => {
 
   return (
     <CatchErrors code={code}>
+      <Helmet>
+        <title>
+          {title ? `${title} | Playroom Preview` : 'Playroom Preview'}
+        </title>
+      </Helmet>
       <div className={styles.renderContainer}>
         <FrameComponent
           themeName={themeName || '__PLAYROOM__NO_THEME__'}

package/src/Playroom/PreviewPanel/PreviewPanel.tsx

@@ -29,7 +29,7 @@ export default ({ themes, visibleThemes }: PreviewPanelProps) => {
 
   return (
     <ToolbarPanel data-testid="preview-panel">
-      <Stack space="medium">
+      <Stack space="xxlarge">
         <Heading as="h4" level="3">
           Preview
         </Heading>

package/src/Playroom/SettingsPanel/SettingsPanel.tsx

@@ -22,17 +22,21 @@ import { isMac } from '../../utils/formatting';
 const getKeyBindings = () => {
   const metaKeySymbol = isMac() ? '⌘' : 'Ctrl';
   const altKeySymbol = isMac() ? '⌥' : 'Alt';
+  const shiftKeySymbol = isMac() ? '⇧' : 'Shift';
 
   return {
+    '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'],
     'Swap line up': [altKeySymbol, '↑'],
     'Swap line down': [altKeySymbol, '↓'],
-    'Duplicate line up': ['⇧', altKeySymbol, '↑'],
-    'Duplicate line down': ['⇧', altKeySymbol, '↓'],
+    'Duplicate line up': [shiftKeySymbol, altKeySymbol, '↑'],
+    'Duplicate line down': [shiftKeySymbol, 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, '⇧', ','],
   };
 };
 
@@ -79,8 +83,8 @@ export default React.memo(() => {
   const keybindings = getKeyBindings();
 
   return (
-    <ToolbarPanel data-testid="frame-panel">
-      <Stack space="large" dividers>
+    <ToolbarPanel data-testid="settings-panel">
+      <Stack space="xxxlarge">
         <fieldset className={styles.fieldset}>
           <legend>
             <Heading level="3">Editor Position</Heading>
@@ -157,7 +161,7 @@ export default React.memo(() => {
           </div>
         </fieldset>
 
-        <Stack space="medium">
+        <Stack space="xlarge">
           <Heading level="3">Keyboard Shortcuts</Heading>
           {Object.entries(keybindings).map(([description, keybinding]) => (
             <KeyboardShortcut