Better height for next file

Author: pomber

packages/mini-editor/src/editor-frame.tsx

@@ -89,7 +89,7 @@ export const EditorFrame = React.forwardRef<
           <div
             className={"ch-frame-title-bar"}
             style={{
-              transform: southPanel.style.transform,
+              transform: southPanel.style?.transform,
             }}
           >
             <TabsContainer

packages/mini-editor/src/editor-shift.tsx

@@ -176,7 +176,7 @@ function startingPosition(
         <CodeTransition
           codeConfig={codeConfig}
           prevFile={prevNorthFile}
-          nextFile={nextNorthFile}
+          nextFile={prevNorthFile}
           t={0}
           parentHeight={"0"}
         />
@@ -196,7 +196,7 @@ function startingPosition(
         <CodeTransition
           codeConfig={codeConfig}
           prevFile={prevSouthFile!}
-          nextFile={nextSouthFile!}
+          nextFile={prevSouthFile!}
           t={0}
           parentHeight={"0"}
         />
@@ -242,7 +242,7 @@ function endingPosition(
       children: (
         <CodeTransition
           codeConfig={codeConfig}
-          prevFile={prevNorthFile}
+          prevFile={nextNorthFile}
           nextFile={nextNorthFile}
           t={1}
           parentHeight={"1"}
@@ -262,7 +262,7 @@ function endingPosition(
       children: (
         <CodeTransition
           codeConfig={codeConfig}
-          prevFile={prevSouthFile!}
+          prevFile={nextSouthFile!}
           nextFile={nextSouthFile!}
           t={1}
           parentHeight={"1"}
@@ -782,6 +782,7 @@ function useSnapshots(
 
   useLayoutEffect(() => {
     if (!prevSnapshot) {
+      // debugger
       setState(s => ({
         ...s,
         prevSnapshot: {
@@ -790,6 +791,7 @@ function useSnapshots(
         },
       }))
     } else if (!nextSnapshot) {
+      // debugger
       setState(s => ({
         ...s,
         nextSnapshot: {

packages/playground/content/spotlight-demo.mdx

@@ -4,8 +4,6 @@ This is how to use the `<CH.Spotlight>` component. Lorem ipsum dolor sit amet co
 
 <CH.Spotlight>
 
-<CH.Code>
-
 ```js app.js
 function lorem(ipsum, dolor = 1) {
   const sit = ipsum == null && 0
@@ -14,14 +12,6 @@ function lorem(ipsum, dolor = 1) {
 }
 ```
 
-```css styles.css
-.lorem {
-  color: red;
-}
-```
-
-</CH.Code>
-
 ---
 
 Change focus
@@ -53,13 +43,7 @@ Or change the file
 
 <CH.Code>
 
-```js app.js focus=6:10
-function lorem(ipsum, dolor = 1) {
-  const sit = ipsum == null && 0
-  dolor = sit - amet(dolor)
-  return sit ? consectetur(ipsum) : []
-}
-
+```js app.js focus=1:4
 function adipiscing(...elit) {
   console.log(elit)
   return elit.map(ipsum => ipsum.sit)

packages/storybook/src/editor-tween-two.story.js

@@ -0,0 +1,129 @@
+import React from "react"
+import { EditorTween } from "@code-hike/mini-editor"
+import { WithProgress } from "./utils"
+import "@code-hike/mini-editor/dist/index.css"
+import theme from "shiki/themes/github-light.json"
+import { highlight } from "@code-hike/highlighter"
+
+export default {
+  title: "Test/Editor Tween Two",
+}
+
+export const smartHeight = () => {
+  const prev = {
+    files: [
+      {
+        name: "app.js",
+        code: `
+function lorem(ipsum, dolor = 1) {
+  const sit = ipsum == null && 0
+  dolor = sit - amet(dolor)
+  return sit ? consectetur(ipsum) : []
+}
+
+function adipiscing(...elit) {
+  console.log(elit)
+  return elit.map(ipsum => ipsum.sit)
+}`.trim(),
+        lang: "js",
+        focus: "6:10",
+        annotations: [],
+      },
+    ],
+    northPanel: {
+      tabs: ["app.js"],
+      active: "app.js",
+      heightRatio: 1,
+    },
+    southPanel: undefined,
+  }
+  const next = {
+    files: [
+      {
+        name: "app.js",
+        code: `
+function adipiscing(...elit) {
+  console.log(elit)
+  return elit.map(ipsum => ipsum.sit)
+}`.trim(),
+        lang: "js",
+        focus: "1:4",
+        annotations: [],
+      },
+      {
+        name: "styles.css",
+        code: `
+.lorem {
+  color: #fff;
+  padding: 10px;
+  background: #000;
+}`.trim(),
+        lang: "css",
+        focus: "",
+        annotations: [],
+      },
+    ],
+    northPanel: {
+      tabs: ["app.js"],
+      active: "app.js",
+      heightRatio: 1,
+    },
+    southPanel: {
+      tabs: ["styles.css"],
+      active: "styles.css",
+      heightRatio: 1,
+    },
+  }
+  return <TestTransition prev={prev} next={next} />
+}
+
+function TestTransition({ prev, next }) {
+  const [data, setData] = React.useState(null)
+  React.useEffect(() => {
+    const prevFilePromises = prev.files.map(
+      ({ code, lang, ...rest }) =>
+        highlight({ code, lang, theme }).then(code => ({
+          code,
+          ...rest,
+        }))
+    )
+    const nextFilePromises = next.files.map(
+      ({ code, lang, ...rest }) =>
+        highlight({ code, lang, theme }).then(code => ({
+          code,
+          ...rest,
+        }))
+    )
+
+    Promise.all([
+      Promise.all(prevFilePromises),
+      Promise.all(nextFilePromises),
+    ]).then(([prevFiles, nextFiles]) =>
+      setData({
+        prev: { ...prev, files: prevFiles },
+        next: { ...next, files: nextFiles },
+      })
+    )
+  }, [])
+
+  if (!data) {
+    return "Loading..."
+  }
+
+  return (
+    <WithProgress length={2}>
+      {(progress, backward) => (
+        <>
+          <EditorTween
+            frameProps={{ style: { height: 300 } }}
+            prev={data.prev}
+            next={data.next}
+            t={progress}
+            backward={backward}
+            codeConfig={{ theme }}
+          />
+        </>
+      )}
+    </WithProgress>
+  )
+}