Support links in scrollycoding

Author: pomber

packages/mdx/src/client/scrollycoding.tsx

@@ -9,6 +9,7 @@ import {
   Step as ScrollerStep,
 } from "@code-hike/scroller"
 import { Preview, PresetConfig } from "./preview"
+import { LinkableSection } from "./section"
 
 export function Scrollycoding({
   children,
@@ -45,6 +46,19 @@ export function Scrollycoding({
     setState({ ...state, step: newStep })
   }
 
+  function onLinkActivation(
+    stepIndex: number,
+    filename: string | undefined,
+    focus: string | null
+  ) {
+    const newStep = updateEditorStep(
+      editorSteps[stepIndex],
+      filename,
+      focus
+    )
+    setState({ ...state, stepIndex, step: newStep })
+  }
+
   return (
     <section
       className={`ch-scrollycoding ${
@@ -64,7 +78,16 @@ export function Scrollycoding({
                 i === state.stepIndex ? "true" : undefined
               }
             >
-              {children}
+              <LinkableSection
+                onActivation={({ fileName, focus }) => {
+                  onLinkActivation(i, fileName, focus)
+                }}
+                onReset={() => {
+                  onStepChange(i)
+                }}
+              >
+                {children}
+              </LinkableSection>
             </ScrollerStep>
           ))}
         </Scroller>

packages/mdx/src/client/section.tsx

@@ -4,17 +4,14 @@ import { InnerCode, updateEditorStep } from "./code"
 
 const SectionContext = React.createContext<{
   props: EditorProps
-  selectedId?: string
   setFocus: (x: {
     fileName?: string
     focus: string | null
     id: string
   }) => void
-  resetFocus: () => void
 }>({
   props: null!,
   setFocus: () => {},
-  resetFocus: () => {},
 })
 
 export function Section({
@@ -48,16 +45,21 @@ export function Section({
   const { selectedId, ...rest } = state
 
   return (
-    <SectionContext.Provider
-      value={{
-        props: rest,
-        setFocus,
-        resetFocus,
-        selectedId,
-      }}
-    >
-      <section>{children}</section>
-    </SectionContext.Provider>
+    <section>
+      <SectionContext.Provider
+        value={{
+          props: rest,
+          setFocus,
+        }}
+      >
+        <LinkableSection
+          onActivation={setFocus}
+          onReset={resetFocus}
+        >
+          {children}
+        </LinkableSection>
+      </SectionContext.Provider>
+    </section>
   )
 }
 
@@ -83,10 +85,10 @@ export function SectionLink({
   file?: string
   children: React.ReactNode
 }) {
-  const { setFocus, resetFocus, selectedId } =
-    React.useContext(SectionContext)
+  const { activate, reset, activatedId } =
+    React.useContext(LinkableContext)
 
-  const isSelected = selectedId === id
+  const isSelected = activatedId === id
   // const handleClick = isSelected
   //   ? resetFocus
   //   : () => setFocus({ fileName: file, focus, id })
@@ -96,17 +98,74 @@ export function SectionLink({
       style={{
         textDecoration: "underline",
         textDecorationStyle: "dotted",
-        cursor: "pointer",
+        // cursor: "pointer",
         backgroundColor: isSelected
           ? "#bae6fd66"
           : undefined,
       }}
       // onClick={handleClick}
       children={children}
       onMouseOver={() =>
-        setFocus({ fileName: file, focus, id })
+        activate({ fileName: file, focus, id })
       }
-      onMouseOut={resetFocus}
+      onMouseOut={reset}
     />
   )
 }
+
+// ---
+
+const LinkableContext = React.createContext<{
+  activate: (x: {
+    fileName?: string
+    focus: string | null
+    id: string
+  }) => void
+  reset: () => void
+  activatedId: string | undefined
+}>({
+  activatedId: undefined,
+  activate: () => {},
+  reset: () => {},
+})
+
+export function LinkableSection({
+  onActivation,
+  onReset,
+  children,
+}: {
+  onActivation: (x: {
+    fileName?: string
+    focus: string | null
+    id: string
+  }) => void
+  onReset: () => void
+  children: React.ReactNode
+}) {
+  const [activatedId, setActivatedId] =
+    React.useState<any>(undefined)
+
+  const activate = React.useCallback(
+    x => {
+      setActivatedId(x.id)
+      onActivation(x)
+    },
+    [onActivation]
+  )
+  const reset = React.useCallback(() => {
+    setActivatedId(undefined)
+    onReset()
+  }, [onReset])
+
+  return (
+    <LinkableContext.Provider
+      value={{
+        activate,
+        reset,
+        activatedId,
+      }}
+    >
+      {children}
+    </LinkableContext.Provider>
+  )
+}

packages/mdx/src/plugin/scrollycoding.ts

@@ -6,6 +6,7 @@ import {
 import { Node, Parent } from "unist"
 import { extractStepsInfo } from "./steps"
 import { getPresetConfig } from "./preview"
+import { transformLinks } from "./section"
 
 export async function transformScrollycodings(
   tree: Node,
@@ -35,6 +36,8 @@ async function transformScrollycoding(
     (node as any).attributes
   )
 
+  transformLinks(node)
+
   toJSX(node, {
     props: {
       codeConfig: CH_CODE_CONFIG_PLACEHOLDER,

packages/mdx/src/plugin/section.ts

@@ -46,7 +46,7 @@ async function transformSection(
   }
 }
 
-function transformLinks(tree: Node) {
+export function transformLinks(tree: Node) {
   visit(tree, "link", (linkNode: any) => {
     const url = decodeURI(linkNode["url"])
     if (url.startsWith("focus://")) {