feat: add rtl option

sandpack-react/src/presets/Sandpack.stories.tsx

@@ -329,3 +329,16 @@ Write-Output $example`,
     }}
   />
 );
+
+export const RtlLayout: React.FC = () => {
+  return (
+    <>
+      <Sandpack
+        options={{
+          rtl: true,
+        }}
+        template="react"
+      />
+    </>
+  );
+};

sandpack-react/src/presets/Sandpack.tsx

@@ -35,6 +35,7 @@ export const Sandpack: SandpackInternal = ({
   options.editorWidthPercentage ??= 50;
   options.showConsole ??= false;
 
+  const rtlLayout = options?.rtl ?? false;
   const codeEditorOptions: CodeEditorProps = {
     showTabs: options.showTabs,
     showLineNumbers: options.showLineNumbers,
@@ -143,7 +144,7 @@ export const Sandpack: SandpackInternal = ({
     const boundaries = Math.min(Math.max(offset, 25), 75);
 
     if (isHorizontal) {
-      setHorizontalSize(boundaries);
+      setHorizontalSize(rtlLayout ? 100 - boundaries : boundaries);
     } else {
       setVerticalSize(boundaries);
     }
@@ -196,7 +197,9 @@ export const Sandpack: SandpackInternal = ({
       theme={theme}
       {...props}
     >
-      <SandpackLayout>
+      <SandpackLayout
+        className={rtlLayout ? classNames(rtlLayoutClassName) : ""}
+      >
         <SandpackCodeEditor
           {...codeEditorOptions}
           style={{
@@ -218,7 +221,11 @@ export const Sandpack: SandpackInternal = ({
             onMouseDown={(event): void => {
               dragEventTargetRef.current = event.target;
             }}
-            style={{ left: `calc(${horizontalSize}% - 5px)` }}
+            style={{
+              left: `calc(${
+                rtlLayout ? 100 - horizontalSize : horizontalSize
+              }% - 5px)`,
+            }}
           />
         )}
 
@@ -337,3 +344,12 @@ const consoleWrapper = css({
   width: "100%",
   overflow: "hidden",
 });
+
+const rtlLayoutClassName = css({
+  flexDirection: "row-reverse",
+
+  "@media screen and (max-width: 768px)": {
+    flexFlow: "wrap-reverse !important",
+    flexDirection: "initial",
+  },
+});

sandpack-react/src/types.ts

@@ -96,6 +96,11 @@ export interface SandpackOptions {
   editorHeight?: React.CSSProperties["height"];
   classes?: Record<string, string>;
 
+  /**
+   * right to left layout
+   * @default false
+   */
+  rtl?: boolean;
   showNavigator?: boolean;
   showLineNumbers?: boolean;
   showInlineErrors?: boolean;
@@ -438,6 +443,11 @@ interface SandpackInternalProps<
     editorWidthPercentage?: number;
     editorHeight?: React.CSSProperties["height"];
 
+    /**
+     * right to left layout
+     * @default false
+     */
+    rtl?: boolean;
     showNavigator?: boolean;
     showLineNumbers?: boolean;
     showInlineErrors?: boolean;

website/docs/src/pages/getting-started/layout.mdx

@@ -196,4 +196,23 @@ The `<Sandpack />` preset component has resizable columns and rows by default, a
 <Sandpack options={{ resizablePanels: false }} />
 ```
 
-Other components (`SandpackProvider` for example) do not have this functionality and it must be implemented by the user.
+Other components (`SandpackProvider` for example) do not have this functionality and it must be implemented by the user.
+
+### Right to left layout
+
+<CodeBlock stack>
+{`import { Sandpack } from "@codesandbox/sandpack-react";
+
+export default function App() {
+  return (
+    <Sandpack 
+      options={{
+        rtl: true, // default false
+      }}
+    />
+  );
+}
+`}
+</CodeBlock>
+
+Other components (`SandpackProvider` for example) do not have this option and it must be implemented by the user.