@@ -2,13 +2,20 @@ module Yoga.FillInTheGaps.Stories where
22
33import Prelude hiding (add)
44import Data.Either (Either(..))
5+import Data.Foldable (foldMap)
56import Data.Maybe (Maybe(..))
67import Data.String as String
7−import Debug.Trace (spy)
8+import Data.Tuple.Nested ((/\))
89import Effect (Effect)
10+import React.Basic.DOM (css)
11+import React.Basic.DOM as R
12+import React.Basic.Hooks (component, element, fragment, memo, useState)
13+import React.Basic.Hooks as React
914import Storybook.Decorator.FullScreen (fullScreenDecorator)
1015import Storybook.React (Storybook, add, addDecorator, storiesOf)
16+import Yoga.Editor (mkEditor)
1117import Yoga.FillInTheGaps.Component as FillInTheGaps
18+import Yoga.Highlighter.Monaco (monacoHighlighter)
1219import Yoga.Highlighter.Types (HTMLString(..), Language(..))
1320
1421ctx ∷ { | FillInTheGaps.Ctx () }
@@ -30,6 +37,35 @@ stories = do
3037 add "The FillInTheGaps" (FillInTheGaps.makeComponent ctx)
3138 [ { code: codeWithHoles }
3239 ]
40+ add "The FillInTheGaps with highlighted code" withHighlighting
41+ [ { code: codeWithHoles }
42+ ]
43+
44+withHighlighting = do
45+ editorComponent <- memo mkEditor
46+ component "WithHighlighting" \(props ∷ { code ∷ String }) -> React.do
47+ gaps /\ updateGaps <- useState Nothing
48+ pure
49+ $ fragment
50+ [ R.div
51+ { style: css { visibility: "hidden" }
52+ , children:
53+ [ element editorComponent
54+ { height: "0"
55+ , language: "purescript"
56+ , onLoad:
57+ \editor -> do
58+ let
59+ newCtx = ctx { highlight = (monacoHighlighter editor).highlight }
60+ gapsi <- FillInTheGaps.makeComponent newCtx
61+ updateGaps $ pure <<< pure $ gapsi
62+ }
63+ ]
64+ }
65+ , gaps
66+ # foldMap \g ->
67+ element g { code: codeWithHoles }
68+ ]
3369
3470codeWithHoles =
3571 """