feat: add rtl option

codesandbox · Feb 28, 2023 · 0faab5b · 0faab5b
1 parent b7386d2
commit 0faab5b
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 4 deletions.
diff --git a/sandpack-react/src/Playground.stories.tsx b/sandpack-react/src/Playground.stories.tsx
@@ -29,3 +29,15 @@ export const Basic: React.FC = () => {
     </>
   );
 };
+export const RtlLayout: React.FC = () => {
+  return (
+    <>
+      <Sandpack
+        options={{
+          rtl: true,
+        }}
+        template="react"
+      />
+    </>
+  );
+};
diff --git a/sandpack-react/src/presets/Sandpack.tsx b/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",
 });
+
+export const rtlLayoutClassName = css({
+  flexDirection: "row-reverse",
+
+  "@media screen and (max-width: 768px)": {
+    flexFlow: "wrap-reverse !important",
+    flexDirection: "initial",
+  },
+});
diff --git a/sandpack-react/src/types.ts b/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;
@@ -439,6 +444,11 @@ interface SandpackInternalProps<
     editorWidthPercentage?: number;
     editorHeight?: React.CSSProperties["height"];
 
+    /**
+     * right to left layout
+     * @default false
+     */
+    rtl?: boolean;
     showNavigator?: boolean;
     showLineNumbers?: boolean;
     showInlineErrors?: boolean;

diff --git a/website/docs/src/pages/getting-started/layout.mdx b/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.