git.iko.soy/rowtype-yoga/psfp
on master help sign in
Next stop: Highlighting
21527d8Mark Eibes
components/src/Yoga/FillInTheGaps/Stories.purs+37−1
compare with master
unifiedsplit
@@ -2,13 +2,20 @@ module Yoga.FillInTheGaps.Stories where
2
2
3import Prelude hiding (add)
3import Prelude hiding (add)
4import Data.Either (Either(..))
4import Data.Either (Either(..))
5+import Data.Foldable (foldMap)
5import Data.Maybe (Maybe(..))
6import Data.Maybe (Maybe(..))
6import Data.String as String
7import Data.String as String
7−import Debug.Trace (spy)
8+import Data.Tuple.Nested ((/\))
8import Effect (Effect)
9import 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
9import Storybook.Decorator.FullScreen (fullScreenDecorator)
14import Storybook.Decorator.FullScreen (fullScreenDecorator)
10import Storybook.React (Storybook, add, addDecorator, storiesOf)
15import Storybook.React (Storybook, add, addDecorator, storiesOf)
16+import Yoga.Editor (mkEditor)
11import Yoga.FillInTheGaps.Component as FillInTheGaps
17import Yoga.FillInTheGaps.Component as FillInTheGaps
18+import Yoga.Highlighter.Monaco (monacoHighlighter)
12import Yoga.Highlighter.Types (HTMLString(..), Language(..))
19import Yoga.Highlighter.Types (HTMLString(..), Language(..))
13
20
14ctx ∷ { | FillInTheGaps.Ctx () }
21ctx ∷ { | FillInTheGaps.Ctx () }
@@ -30,6 +37,35 @@ stories = do
30 add "The FillInTheGaps" (FillInTheGaps.makeComponent ctx)
37 add "The FillInTheGaps" (FillInTheGaps.makeComponent ctx)
31 [ { code: codeWithHoles }
38 [ { code: codeWithHoles }
32 ]
39 ]
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+ ]
33
69
34codeWithHoles =
70codeWithHoles =
35 """
71 """
components/src/Yoga/Monaco/Editor.ts+2
@@ -1,5 +1,7 @@
1"use strict";
1"use strict";
2
2
3+exports.newMonacoEditorImpl = require("monaco-editor/min/vs/editor");
4+
3exports.monacoEditorImpl = async () => {
5exports.monacoEditorImpl = async () => {
4 const x = await import("react-monaco-editor");
6 const x = await import("react-monaco-editor");
5 return x.default;
7 return x.default;