a333b88 · rowtype-yoga/psfp

git.iko.soy/rowtype-yoga/psfp

on master help sign in

Paragaraphs

a333b88Mark Eibes6 years ago

blog/.storybook/preview.js+1

compare with master

unifiedsplit

@@ -1,3 +1,4 @@

1+require("../src/components/fonts")

1export const parameters = {

2export const parameters = {

2 layout: 'fullscreen'

3 layout: 'fullscreen'

blog/.vscode/settings.json+1−1

@@ -1,5 +1,5 @@

2 "workbench.preferredDarkColorTheme": "Base2Tone_HeathDark",

3− "workbench.colorTheme": "Horizon",

3+ "workbench.colorTheme": "Halcyon",

4 "editor.formatOnSave": true

blog/package-lock.json+28−9

@@ -10,6 +10,8 @@

10 "license": "MIT",

11 "dependencies": {

12 "@emotion/core": "^10.0.28",

13+ "@fontsource/cormorant-garamond": "^4.1.0",

14+ "@fontsource/inter": "^4.1.0",

13 "@material-ui/styles": "^4.9.0",

15 "@material-ui/styles": "^4.9.0",

14 "@mdx-js/mdx": "^1.1.5",

16 "@mdx-js/mdx": "^1.1.5",

15 "@mdx-js/react": "^1.1.5",

17 "@mdx-js/react": "^1.1.5",

@@ -1722,6 +1724,16 @@

1722 "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.3.tgz",

1724 "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.3.tgz",

1723 "integrity": "sha512-uZtkfKblCEQtZKBF6EBXVZeQNl82yqtDQdv+eck8u7tdPxjLu2/lp5/uPW+um2tpuxINHWy3GhiccY7QgEaVHQ=="

1725 "integrity": "sha512-uZtkfKblCEQtZKBF6EBXVZeQNl82yqtDQdv+eck8u7tdPxjLu2/lp5/uPW+um2tpuxINHWy3GhiccY7QgEaVHQ=="

1724 },

1726 },

1727+ "node_modules/@fontsource/cormorant-garamond": {

1728+ "version": "4.1.0",

1729+ "resolved": "https://registry.npmjs.org/@fontsource/cormorant-garamond/-/cormorant-garamond-4.1.0.tgz",

1730+ "integrity": "sha512-Q9q+uj3ZmBrqn3knh5pVAB6kVXPDfut74U5lGxhf3gHQihrckOv/0Cw3ObKMc69r6OBk+IRcQN7A5d1aVVBGhw=="

1731+ },

1732+ "node_modules/@fontsource/inter": {

1733+ "version": "4.1.0",

1734+ "resolved": "https://registry.npmjs.org/@fontsource/inter/-/inter-4.1.0.tgz",

1735+ "integrity": "sha512-v1JHGLAejSV0ec6fVR31vrojpM+JUiNVn0xJxL/ngmbyClDEf8qna5NFsu/xef67KT2kQ2YaU+wCuQEQHG55sw=="

1736+ },

1725 "node_modules/@graphql-tools/batch-execute": {

1737 "node_modules/@graphql-tools/batch-execute": {

1726 "version": "7.0.0",

1738 "version": "7.0.0",

1727 "resolved": "https://registry.npmjs.org/@graphql-tools/batch-execute/-/batch-execute-7.0.0.tgz",

1739 "resolved": "https://registry.npmjs.org/@graphql-tools/batch-execute/-/batch-execute-7.0.0.tgz",

@@ -19137,12 +19149,9 @@

19137 "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="

19149 "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="

19138 },

19150 },

19139 "node_modules/ini": {

19151 "node_modules/ini": {

19140− "version": "1.3.5",

19152+ "version": "1.3.8",

19141− "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.5.tgz",

19153+ "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",

19142− "integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==",

19154+ "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew=="

19143− "engines": {

19144− "node": "*"

19145− }

19146 },

19155 },

19147 "node_modules/inline-style-parser": {

19156 "node_modules/inline-style-parser": {

19148 "version": "0.1.1",

19157 "version": "0.1.1",

@@ -35230,6 +35239,16 @@

35230 }

35239 }

35231 }

35240 }

35232 },

35241 },

35242+ "@fontsource/cormorant-garamond": {

35243+ "version": "4.1.0",

35244+ "resolved": "https://registry.npmjs.org/@fontsource/cormorant-garamond/-/cormorant-garamond-4.1.0.tgz",

35245+ "integrity": "sha512-Q9q+uj3ZmBrqn3knh5pVAB6kVXPDfut74U5lGxhf3gHQihrckOv/0Cw3ObKMc69r6OBk+IRcQN7A5d1aVVBGhw=="

35246+ },

35247+ "@fontsource/inter": {

35248+ "version": "4.1.0",

35249+ "resolved": "https://registry.npmjs.org/@fontsource/inter/-/inter-4.1.0.tgz",

35250+ "integrity": "sha512-v1JHGLAejSV0ec6fVR31vrojpM+JUiNVn0xJxL/ngmbyClDEf8qna5NFsu/xef67KT2kQ2YaU+wCuQEQHG55sw=="

35251+ },

35233 "@graphql-tools/batch-execute": {

35252 "@graphql-tools/batch-execute": {

35234 "version": "7.0.0",

35253 "version": "7.0.0",

35235 "resolved": "https://registry.npmjs.org/@graphql-tools/batch-execute/-/batch-execute-7.0.0.tgz",

35254 "resolved": "https://registry.npmjs.org/@graphql-tools/batch-execute/-/batch-execute-7.0.0.tgz",

@@ -49346,9 +49365,9 @@

49346 "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="

49365 "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="

49347 },

49366 },

49348 "ini": {

49367 "ini": {

49349− "version": "1.3.5",

49368+ "version": "1.3.8",

49350− "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.5.tgz",

49369+ "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",

49351− "integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw=="

49370+ "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew=="

49352 },

49371 },

49353 "inline-style-parser": {

49372 "inline-style-parser": {

49354 "version": "0.1.1",

49373 "version": "0.1.1",

blog/package.json+2

@@ -5,6 +5,8 @@

5 "author": "Mark Eibes",

6 "dependencies": {

7 "@emotion/core": "^10.0.28",

8+ "@fontsource/cormorant-garamond": "^4.1.0",

9+ "@fontsource/inter": "^4.1.0",

8 "@material-ui/styles": "^4.9.0",

10 "@material-ui/styles": "^4.9.0",

9 "@mdx-js/mdx": "^1.1.5",

11 "@mdx-js/mdx": "^1.1.5",

10 "@mdx-js/react": "^1.1.5",

12 "@mdx-js/react": "^1.1.5",

blog/src/components/PSLayout.js → blog/src/components/MDXProvider.jsrenamed

The content is the same.

blog/src/components/MDXProvider.pursnew file+223

@@ -0,0 +1,223 @@

1+module MDXProvider where

3+import Prelude

4+import Data.Array (intercalate)

5+import Data.Array as Array

6+import Data.Either (Either(..))

7+import Data.Function.Uncurried (mkFn2)

8+import Data.Maybe (Maybe(..), fromMaybe, isJust)

9+import Data.Nullable (Nullable)

10+import Data.Nullable as Nullable

11+import Data.String as String

12+import Data.Traversable (mapAccumL)

13+import Data.Tuple.Nested ((/\))

14+import Effect (Effect)

15+import Effect.Aff (launchAff_)

16+import Effect.Class (liftEffect)

17+import Effect.Class.Console (log)

18+import Effect.Unsafe (unsafePerformEffect)

19+import Framer.Motion as M

20+import MDX (MDX(..))

21+import Milkis.Impl (FetchImpl)

22+import React.Basic (JSX, ReactComponent)

23+import React.Basic.DOM (Props_h1, Props_h2, Props_h3, Props_h4, Props_p, Props_a, unsafeCreateDOMComponent)

24+import React.Basic.DOM as R

25+import React.Basic.Emotion as E

26+import React.Basic.Hooks (ReactChildren, element, memo, reactChildrenFromArray, reactChildrenToArray, reactComponent, reactComponentWithChildren, useState)

27+import React.Basic.Hooks as React

28+import Shared.Models.Body (CompileResult)

29+import Typography.SmallCaps (mkSmallCaps)

30+import Unsafe.Coerce (unsafeCoerce)

31+import Yoga.CompileEditor.Component (mkCompileEditor)

32+import Yoga.Compiler.Api (apiCompiler)

33+import Yoga.Compiler.Types (Compiler)

34+import Yoga.FillInTheGaps.Component as FillInTheGaps

35+import Yoga.FillInTheGaps.Logic (Segment, findResult, parseSegments, toCode)

36+import Yoga.Helpers ((?||))

37+import Yoga as Y

38+

39+type PreProps

40+ = { children ∷

41+ Nullable

42+ { props ∷

43+ Nullable

44+ { mdxType ∷ Nullable String

45+ , children ∷ Nullable String

46+ , className ∷ Nullable String

47+ }

48+ }

49+ }

50+

51+isQuiz ∷ MDX -> Boolean

52+isQuiz (MDX a) =

53+ a.props.mdxType == "pre"

54+ && ((unsafeCoerce a).props.children.props.className == "language-purescript")

55+ && ((unsafeCoerce a).props.children.props.mdxType == "code")

56+ && ((unsafeCoerce a).props.children.props.children # parseSegments # isJust)

57+

58+type MdxProviderProps

59+ = { children ∷ ReactChildren MDX

60+ }

61+

62+mkLiveMdxProviderComponent ∷ FetchImpl -> Effect (ReactComponent MdxProviderProps)

63+mkLiveMdxProviderComponent fetchImpl = mkMdxProviderComponent (apiCompiler fetchImpl)

64+

65+mkMdxProviderComponent ∷

66+ ∀ r.

67+ { | Compiler r } ->

68+ Effect (ReactComponent MdxProviderProps)

69+mkMdxProviderComponent compiler = do

70+ editor <- memo $ mkCompileEditor compiler

71+ quiz <- memo $ mkQuiz compiler

72+ smallCaps <- mkSmallCaps

73+ reactComponentWithChildren "MDXProviderComponent" do

74+ \{ children } -> React.do

75+ visibleUntil /\ updateVisible <- useState 1

76+ let

77+ onFailure title kids = log "Oopsie daisy"

78+

79+ onSuccess = updateVisible (_ + one)

80+

81+ mapVisible ∷ Int -> MDX -> _

82+ mapVisible i kid =

83+ { accum: i + if isQuiz kid then one else zero

84+ , value: if (i < visibleUntil) then Just kid else Nothing

85+ }

86+

87+ visibleKids ∷ Array MDX

88+ visibleKids =

89+ reactChildrenToArray children

90+ # mapAccumL mapVisible zero

91+ # _.value

92+ # Array.catMaybes

93+

94+ contentMDX ∷ ReactChildren MDX

95+ contentMDX = reactChildrenFromArray visibleKids

96+

97+ paragraph parChildren =

98+ E.element M.p

99+ ( { layout: M.layout true

100+ , css:

101+ E.css

102+ { fontFamily: E.str "Cormorant Garamond"

103+ , fontSize: E.str "min(calc(var(--s0) + 4vw), var(--s1))"

104+ , "-ms-hyphens": E.str "auto"

105+ , "-webkit-hyphens": E.str "auto"

106+ , hyphens: E.str "auto"

107+ }

108+ , className: "blog-p"

109+ , children: parChildren

110+ }

111+ )

112+ let

113+ mdxComponents =

114+ { "Sc":

115+ \(props :: { children :: String }) ->

116+ smallCaps props.children

117+ , h1:

118+ \(props ∷ { | M.MotionProps Props_h1 }) ->

119+ React.element M.h1 (props { layout = M.layout true })

120+ , h2:

121+ \(props ∷ { | M.MotionProps Props_h2 }) ->

122+ React.element M.h2 (props { layout = M.layout true })

123+ , h3:

124+ \(props ∷ { | M.MotionProps Props_h3 }) ->

125+ React.element M.h3 (props { layout = M.layout true })

126+ , h4:

127+ \(props ∷ { | M.MotionProps Props_h4 }) ->

128+ React.element M.h4 (props { layout = M.layout true })

129+ , hr: (const $ R.hr {})

130+ , p:

131+ \(props ∷ { children :: Array JSX }) ->

132+ paragraph props.children

133+ , inlineCode:

134+ \props -> do

135+ R.span { children: props.children }

136+ , pre:

137+ mkFn2 \(props ∷ PreProps) other -> do

138+ let

139+ childrenQ = Nullable.toMaybe props.children

140+

141+ propsQ = (_.props >>> Nullable.toMaybe) =<< childrenQ

142+

143+ mdxTypeQ = (_.mdxType >>> Nullable.toMaybe) =<< propsQ

144+

145+ childrenQ2 = (_.children >>> Nullable.toMaybe) =<< propsQ

146+

147+ classNameQ = (_.className >>> Nullable.toMaybe) =<< propsQ

148+

149+ isCode = fromMaybe false (mdxTypeQ <#> eq "code")

150+

151+ codeQ = childrenQ2

152+

153+ height =

154+ (fromMaybe 200 >>> show >>> (_ <> "px")) do

155+ code <- codeQ

156+ pure

157+ ( String.split (String.Pattern "\n") code

158+ # Array.length

159+ # \x -> (x * 12) + 100

160+ )

161+

162+ language = fromMaybe "" (classNameQ >>= String.stripPrefix (String.Pattern "language-"))

163+

164+ segmentsQ = parseSegments (codeQ ?|| "")

165+ case isCode, language, segmentsQ of

166+ true, "purescript", Just initialSegments -> element quiz { initialSegments, onFailure, onSuccess }

167+ true, _, _ ->

168+ element editor

169+ { initialCode: fromMaybe "" codeQ

170+ , height

171+ , language

172+ }

173+ false, _, _ -> element (unsafePerformEffect $ unsafeCreateDOMComponent "pre") props

174+ }

175+ pure

176+ $ element mdxProvider

177+ { children: contentMDX

178+ , components: mdxComponents

179+ }

180+

181+type QuizProps

182+ = { initialSegments ∷ Array (Array Segment)

183+ , onFailure ∷ String -> Array JSX -> Effect Unit

184+ , onSuccess ∷ Effect Unit

185+ }

186+

187+mkQuiz ∷ ∀ r. { | Compiler r } -> Effect (ReactComponent QuizProps)

188+mkQuiz compiler = do

189+ fillInTheGaps <- FillInTheGaps.makeComponent

190+ reactComponent "Quiz" \({ initialSegments, onFailure, onSuccess } ∷ QuizProps) -> React.do

191+ segments /\ updateSegments <- useState initialSegments

192+ solvedWith /\ updateSolvedWith <- useState Nothing

193+ pure

194+ $ element fillInTheGaps

195+ { segments

196+ , run:

197+ launchAff_ do

198+ let

199+ code = toCode segments

200+ result <- compiler.compileAndRun { code }

201+ liftEffect case result of

202+ Right r

203+ | String.stripSuffix (String.Pattern "\n") r.stdout == (findResult $ join segments) -> do

204+ updateSolvedWith (const $ String.stripSuffix (String.Pattern "\n") r.stdout)

205+ onSuccess

206+ Right r

207+ | r.stdout /= "\n" -> onFailure "Oh shit!" [ R.text r.stdout ]

208+ Right r -> onFailure "Oh shit!" [ R.text r.stderr ]

209+ Left (cr ∷ CompileResult) -> onFailure "Oh shit!" [ R.text (intercalate ", " (cr.result <#> _.message)) ]

210+ , updateSegments:

211+ \update -> do

212+ let

213+ updated = update segments

214+ unless (segments == updated) do updateSegments (const updated)

215+ , solvedWith

216+ }

217+

218+foreign import mdxProvider ∷

219+ ∀ r.

220+ ReactComponent

221+ { components ∷ { | r }

222+ , children ∷ ReactChildren MDX

223+ }

blog/src/components/PSLayout.purs+91−259

@@ -2,30 +2,17 @@ module PSLayout where

3import Prelude

4import Color as Color

5−import Data.Array (intercalate)

6−import Data.Array as Array

7−import Data.Either (Either(..))

8−import Data.Function.Uncurried (mkFn2)

9−import Data.Maybe (Maybe(..), fromMaybe, isJust)

5+import Data.Maybe (Maybe(..), fromMaybe)

10−import Data.Nullable (Nullable)

11−import Data.Nullable as Nullable

12−import Data.String as String

13−import Data.Traversable (mapAccumL)

14import Data.Tuple.Nested ((/\))

6import Data.Tuple.Nested ((/\))

15import Effect (Effect)

7import Effect (Effect)

16−import Effect.Aff (launchAff_)

8+import MDX (MDX)

17−import Effect.Class (liftEffect)

9+import MDXProvider (MdxProviderProps)

18−import Effect.Unsafe (unsafePerformEffect)

19−import MDX (MDX(..))

20import Milkis.Impl (FetchImpl)

10import Milkis.Impl (FetchImpl)

21−import React.Basic (JSX, ReactComponent, fragment)

11+import React.Basic (ReactComponent)

22−import React.Basic.DOM (Props_h1, Props_h2, Props_h3, Props_p, unsafeCreateDOMComponent)

23import React.Basic.DOM as R

12import React.Basic.DOM as R

24import React.Basic.Emotion as Emotion

13import React.Basic.Emotion as Emotion

25−import React.Basic.Hooks (ReactChildren, element, memo, mkReducer, reactChildrenFromArray, reactChildrenToArray, reactComponent, reactComponentWithChildren, useReducer, useState, useState')

14+import React.Basic.Hooks (ReactChildren, element, reactComponentWithChildren, useState')

26import React.Basic.Hooks as React

15import React.Basic.Hooks as React

27−import Shared.Models.Body (CompileResult)

28−import Unsafe.Coerce (unsafeCoerce)

29import Yoga ((/>), (</), (</*))

16import Yoga ((/>), (</), (</*))

30import Yoga as Y

17import Yoga as Y

31import Yoga.Block as Block

18import Yoga.Block as Block

@@ -35,31 +22,13 @@ import Yoga.Block.Container.Style (DarkOrLightMode(..), colour)

35import Yoga.Block.Icon.SVG as Icon

22import Yoga.Block.Icon.SVG as Icon

36import Yoga.Block.Internal (_0)

23import Yoga.Block.Internal (_0)

37import Yoga.Block.Modal as Modal

24import Yoga.Block.Modal as Modal

38−import Yoga.CompileEditor.Component (mkCompileEditor)

39−import Yoga.Compiler.Api (apiCompiler)

40−import Yoga.Compiler.Types (Compiler)

41−import Yoga.FillInTheGaps.Component as FillInTheGaps

42−import Yoga.FillInTheGaps.Logic (Segment, findResult, parseSegments, toCode)

43−import Yoga.Helpers ((?||))

45−type SiteQueryResult =

26+type SiteQueryResult

46− { siteMetadata ∷

27+ = { siteMetadata ∷

47− { title ∷ String

28+ { title ∷ String

48− , menuLinks ∷ Array { name ∷ String, link ∷ String }

29+ , menuLinks ∷ Array { name ∷ String, link ∷ String }

30+ }

49 }

31 }

50− }

51−

52−type PreProps =

53− { children ∷

54− Nullable

55− { props ∷

56− Nullable

57− { mdxType ∷ Nullable String

58− , children ∷ Nullable String

59− , className ∷ Nullable String

60− }

61− }

62− }

64data ShowModal

33data ShowModal

65 = ShowModal Modal.Props

34 = ShowModal Modal.Props

@@ -75,13 +44,8 @@ mkLayout ∷

75 }

44 }

76 )

45 )

77mkLayout fetchImpl = do

46mkLayout fetchImpl = do

78− reducer <-

79− mkReducer case _, _ of

80− _, ShowModal props -> Just props

81− _, HideModal -> Nothing

82 -- mdxProviderComponent <- mkMdxProviderComponent (apiCompiler fetchImpl)

47 -- mdxProviderComponent <- mkMdxProviderComponent (apiCompiler fetchImpl)

83 reactComponentWithChildren "MDXLayout" \{ children, siteInfo, mdxProviderComponent } -> React.do

48 reactComponentWithChildren "MDXLayout" \{ children, siteInfo, mdxProviderComponent } -> React.do

84− (maybeModalProps ∷ Maybe Modal.Props) /\ dispatch <- useReducer Nothing reducer

85 darkOrLightMode /\ setDarkOrLightMode <- useState' Nothing

49 darkOrLightMode /\ setDarkOrLightMode <- useState' Nothing

86 let

50 let

87 maybeTogglePosition =

51 maybeTogglePosition =

@@ -89,44 +53,46 @@ mkLayout fetchImpl = do

89 <#> case _ of

53 <#> case _ of

90 DarkMode -> ToggleIsRight

54 DarkMode -> ToggleIsRight

91 LightMode -> ToggleIsLeft

55 LightMode -> ToggleIsLeft

56+

92 darkThemeToggle =

57 darkThemeToggle =

93 Block.toggle

58 Block.toggle

94 Y.</> do

59 Y.</> do

95 { className: "dark-light-toggle"

60 { className: "dark-light-toggle"

96 , css:

61 , css:

97− Emotion.css

62+ Emotion.css

98− { marginRight: Emotion.str "0"

63+ { marginRight: Emotion.str "0"

99− , marginLeft: Emotion.str "auto"

64+ , marginLeft: Emotion.str "auto"

100− }

65+ }

101 , setTogglePosition:

66 , setTogglePosition:

102− case _ of

67+ case _ of

103− ToggleIsLeft -> setDarkOrLightMode (Just LightMode)

68+ ToggleIsLeft -> setDarkOrLightMode (Just LightMode)

104− ToggleIsRight -> setDarkOrLightMode (Just DarkMode)

69+ ToggleIsRight -> setDarkOrLightMode (Just DarkMode)

105 , togglePosition: fromMaybe ToggleIsLeft maybeTogglePosition

70 , togglePosition: fromMaybe ToggleIsLeft maybeTogglePosition

106 , left:

71 , left:

107− Block.icon

72+ Block.icon

108− Y.</> do

73+ Y.</> do

109− { icon: Icon.moon

74+ { icon: Icon.moon

110− , stroke: Emotion.str "#eef"

75+ , stroke: Emotion.str "#eef"

111− }

76+ }

112 , right:

77 , right:

113− Block.icon

78+ Block.icon

114− Y.</> do

79+ Y.</> do

115− { icon: Icon.sun

80+ { icon: Icon.sun

116− , stroke: Emotion.str "yellow"

81+ , stroke: Emotion.str "yellow"

117− }

82+ }

118 , backgroundLeft:

83 , backgroundLeft:

119− Color.hsl 205.0 1.0 0.80

84+ Color.hsl 205.0 1.0 0.80

120 , backgroundRight:

85 , backgroundRight:

121− Color.hsl 250.0 1.0 0.1

86+ Color.hsl 250.0 1.0 0.1

122 }

87 }

88+

123 header =

89 header =

124 Block.box

90 Block.box

125 </ { className: "top-box"

91 </ { className: "top-box"

126 , css:

92 , css:

127− Emotion.css

93+ Emotion.css

128− { background: Emotion.str colour.backgroundLayer5

94+ { background: Emotion.str colour.backgroundLayer5

129− }

95+ }

130 }

96 }

131 /> [ Block.cluster

97 /> [ Block.cluster

132 </* { justify: "space-between"

98 </* { justify: "space-between"

@@ -139,13 +105,13 @@ mkLayout fetchImpl = do

139 R.span'

105 R.span'

140 { className: "blog-header"

106 { className: "blog-header"

141 , css:

107 , css:

142− Emotion.css

108+ Emotion.css

143− { fontSize: Emotion.str "min(var(--s3), calc(var(--s1) + 1vw))"

109+ { fontSize: Emotion.str "min(var(--s3), calc(var(--s1) + 1vw))"

144− , textTransform: Emotion.str "uppercase"

110+ , textTransform: Emotion.str "uppercase"

145− , letterSpacing: Emotion.str "calc(min(var(--s0) + 3vw), var(--s2) * -1.7)"

111+ , letterSpacing: Emotion.str "calc(min(var(--s0) + 3vw), var(--s2) * -1.7)"

146− , fontWeight: Emotion.str "300"

112+ , fontWeight: Emotion.str "300"

147− , color: Emotion.str colour.text

113+ , color: Emotion.str colour.text

148− }

114+ }

149 }

115 }

150 [ R.text siteInfo.siteMetadata.title ]

116 [ R.text siteInfo.siteMetadata.title ]

151 , darkThemeToggle

117 , darkThemeToggle

@@ -155,191 +121,57 @@ mkLayout fetchImpl = do

155 $ element Container.component

121 $ element Container.component

156 { themeVariant: darkOrLightMode

122 { themeVariant: darkOrLightMode

157 , content:

123 , content:

158− Y.styled Block.stack

124+ Y.styled Block.stack

159− { className: "blog-content"

125+ { className: "blog-content"

160− , space: _0

126+ , space: _0

161− , splitAfter: 2

127+ , splitAfter: 2

162− , css:

163− Emotion.css

164− { minHeight: Emotion.vh 100.0

165− , background: Emotion.str colour.background

166− , borderRadius: Emotion.str "0 var(--s1) var(--s1) 0"

167− }

168− }

169− [ header

170− , Block.centre

171− </* { className: "centre"

172− , padding: _0

173− , gutters: _0

174− , css:

175− Emotion.css

176− { maxWidth: Emotion.ch 90.0

177− }

178− }

179− /> [ Block.box

180− </ do

181− { padding: Emotion.px 16

182− , css: Emotion.css { background: Emotion.str colour.background }

183− }

184− /> [ element mdxProviderComponent

185− { children

186− , siteInfo

187− , showModal: dispatch <<< ShowModal

188− , hideModal: dispatch HideModal

189− , modalOpen: isJust maybeModalProps

190− }

191− ]

192− ]

193− , Y.styled Block.box

194− { className: "blog-footer"

195− , css:

128+ , css:

196 Emotion.css

129 Emotion.css

130+ { minHeight: Emotion.vh 100.0

197− { background: Emotion.str colour.backgroundLayer1

131+ , background: Emotion.str colour.backgroundLayer5

198− , borderTop: Emotion.str colour.backgroundLayer3

132+ , borderRadius: Emotion.str "0 var(--s1) var(--s1) 0"

199− , color: Emotion.str colour.text

200 }

133 }

201− }

134+ }

202− [ R.text "Mark Eibes" ]

135+ [ header

203− ]

136+ , Block.centre

204− }

137+ </* { className: "centre"

205−

138+ , padding: _0

206−isQuiz ∷ MDX -> Boolean

139+ , gutters: _0

207−isQuiz (MDX a) =

140+ , css: Emotion.css { maxWidth: Emotion.ch 90.0 }

208− a.props.mdxType == "pre"

209− && ((unsafeCoerce a).props.children.props.className == "language-purescript")

210− && ((unsafeCoerce a).props.children.props.mdxType == "code")

211− && ((unsafeCoerce a).props.children.props.children # parseSegments # isJust)

212−

213−type MdxProviderProps =

214− { children ∷ ReactChildren MDX

215− , siteInfo ∷ SiteQueryResult

216− , showModal ∷ Modal.Props -> Effect Unit

217− , hideModal ∷ Effect Unit

218− , modalOpen ∷ Boolean

219− }

141+ }

220−

142+ /> [ Block.box

221−mkLiveMdxProviderComponent ∷ FetchImpl -> Effect (ReactComponent MdxProviderProps)

143+ </ do

222−mkLiveMdxProviderComponent fetchImpl = mkMdxProviderComponent (apiCompiler fetchImpl)

144+ { padding: Emotion.px 16

223−

145+ , css:

224−mkMdxProviderComponent ∷

146+ Emotion.css

225− ∀ r.

147+ { "& > p:first-of-type:first-letter":

226− { | Compiler r } ->

148+ Emotion.nested

227− Effect (ReactComponent MdxProviderProps)

149+ $ Emotion.css

228−mkMdxProviderComponent compiler = do

150+ { fontSize: Emotion.var "--s4"

229− editor <- memo $ mkCompileEditor compiler

151+ , height: Emotion.var "--s3"

230− quiz <- memo $ mkQuiz compiler

152+ , display: Emotion.str "block"

231− reactComponentWithChildren "MDXProviderComponent" do

153+ , overflow: Emotion.str "hidden"

232− \{ children, siteInfo, showModal, hideModal, modalOpen } -> React.do

154+ , float: Emotion.str "left"

233− visibleUntil /\ updateVisible <- useState 1

155+ , marginTop: Emotion.str "calc(var(--s0))"

234− let

156+ , lineHeight: Emotion.var "--s3"

235− onFailure title kids =

157+ , marginRight: Emotion.var "--s-2"

236− showModal

158+ }

237− { content: fragment kids

159+ }

238− , isOpen: modalOpen

160+ }

239− , setIsOpen: if _ then pure unit else hideModal

161+ /> [ element mdxProviderComponent

240− }

162+ { children

241− onSuccess = updateVisible (_ + one)

163+ }

242− mapVisible ∷ Int -> MDX -> _

164+ ]

243− mapVisible i kid =

165+ ]

244− { accum: i + if isQuiz kid then one else zero

166+ , Y.styled Block.box

245− , value: if (i < visibleUntil) then Just kid else Nothing

167+ { className: "blog-footer"

246− }

168+ , css:

247− visibleKids ∷ Array MDX

169+ Emotion.css

248− visibleKids =

170+ { background: Emotion.str colour.backgroundLayer1

249− reactChildrenToArray children

171+ , borderTop: Emotion.str $ "1px solid " <> colour.backgroundLayer3

250− # mapAccumL mapVisible zero

172+ , color: Emotion.str colour.text

251− # _.value

173+ }

252− # Array.catMaybes

253− contentMDX ∷ ReactChildren MDX

254− contentMDX = reactChildrenFromArray visibleKids

255− let

256− mdxComponents =

257− { h1:

258− \(props ∷ { | Props_h1 }) -> R.h2 props

259− , h2:

260− \(props ∷ { | Props_h2 }) -> R.h3 props

261− , h3:

262− \(props ∷ { | Props_h3 }) -> R.h4 props

263− , hr: (const $ R.hr {})

264− , p:

265− \(props ∷ { | Props_p }) -> R.p props

266− , inlineCode:

267− \props -> do

268− R.span { children: props.children }

269− , pre:

270− mkFn2 \(props ∷ PreProps) other -> do

271− let

272− childrenQ = Nullable.toMaybe props.children

273− propsQ = (_.props >>> Nullable.toMaybe) =<< childrenQ

274− mdxTypeQ = (_.mdxType >>> Nullable.toMaybe) =<< propsQ

275− childrenQ2 = (_.children >>> Nullable.toMaybe) =<< propsQ

276− classNameQ = (_.className >>> Nullable.toMaybe) =<< propsQ

277− isCode = fromMaybe false (mdxTypeQ <#> eq "code")

278− codeQ = childrenQ2

279− height =

280− (fromMaybe 200 >>> show >>> (_ <> "px")) do

281− code <- codeQ

282− pure

283− ( String.split (String.Pattern "\n") code

284− # Array.length

285− # \x -> (x * 12) + 100

286− )

287− language = fromMaybe "" (classNameQ >>= String.stripPrefix (String.Pattern "language-"))

288− segmentsQ = parseSegments (codeQ ?|| "")

289− case isCode, language, segmentsQ of

290− true, "purescript", Just initialSegments -> element quiz { initialSegments, onFailure, onSuccess }

291− true, _, _ ->

292− element editor

293− { initialCode: fromMaybe "" codeQ

294− , height

295− , language

296 }

174 }

297− false, _, _ -> element (unsafePerformEffect $ unsafeCreateDOMComponent "pre") props

175+ [ R.text "Mark Eibes" ]

176+ ]

298 }

177 }

299− pure

300− $ element mdxProvider

301− { children: contentMDX

302− , components: mdxComponents

303− }

304−

305−type QuizProps =

306− { initialSegments ∷ Array (Array Segment)

307− , onFailure ∷ String -> Array JSX -> Effect Unit

308− , onSuccess ∷ Effect Unit

309− }

310−

311−mkQuiz ∷ ∀ r. { | Compiler r } -> Effect (ReactComponent QuizProps)

312−mkQuiz compiler = do

313− fillInTheGaps <- FillInTheGaps.makeComponent

314− reactComponent "Quiz" \({ initialSegments, onFailure, onSuccess } ∷ QuizProps) -> React.do

315− segments /\ updateSegments <- useState initialSegments

316− solvedWith /\ updateSolvedWith <- useState Nothing

317− pure

318− $ element fillInTheGaps

319− { segments

320− , run:

321− launchAff_ do

322− let code = toCode segments

323− result <- compiler.compileAndRun { code }

324− liftEffect case result of

325− Right r

326− | String.stripSuffix (String.Pattern "\n") r.stdout == (findResult $ join segments) -> do

327− updateSolvedWith (const $ String.stripSuffix (String.Pattern "\n") r.stdout)

328− onSuccess

329− Right r

330− | r.stdout /= "\n" -> onFailure "Oh shit!" [ R.text r.stdout ]

331− Right r -> onFailure "Oh shit!" [ R.text r.stderr ]

332− Left (cr ∷ CompileResult) -> onFailure "Oh shit!" [ R.text (intercalate ", " (cr.result <#> _.message)) ]

333− , updateSegments:

334− \update -> do

335− let updated = update segments

336− unless (segments == updated) do updateSegments (const updated)

337− , solvedWith

338− }

339−

340−foreign import mdxProvider ∷

341− ∀ r.

342− ReactComponent

343− { components ∷ { | r } -- TODO Don't lie

344− , children ∷ ReactChildren MDX

345− }

blog/src/components/fonts.jsnew file+5

@@ -0,0 +1,5 @@

1+// Fonts

2+import "@fontsource/cormorant-garamond/500.css"

3+import "@fontsource/cormorant-garamond/500-italic.css"

4+import "@fontsource/cormorant-garamond/700.css"

5+import "@fontsource/cormorant-garamond/700-italic.css"

blog/src/components/layout.js+7−6

@@ -1,13 +1,14 @@

1import React from "react";

2−import PropTypes from "prop-types";

3import { graphql, useStaticQuery } from "gatsby";

2import { graphql, useStaticQuery } from "gatsby";

4−import { preToCodeBlock } from "mdx-utils";

3+// Load

4+require("./fonts")

5−const psLayout = require("../../output/PSLayout"); // [FIXME] use the next line

5+const psLayout = require("../../output/PSLayout")

6+const mdxProvider = require("../../output/MDXProvider")

6const fetch = typeof window !== "undefined" && window.fetch;

7const fetch = typeof window !== "undefined" && window.fetch;

7−import Img from "gatsby-image";

9const PSLayout = psLayout.mkLayout(fetch)();

10const PSLayout = psLayout.mkLayout(fetch)();

10−const MdxProvider = psLayout.mkLiveMdxProviderComponent(fetch)()

11+const MdxProvider = mdxProvider.mkLiveMdxProviderComponent(fetch)()

12const query = graphql`

13const query = graphql`

13 query {

14 query {

@@ -26,7 +27,7 @@ const query = graphql`

26const Layout = ({ children }) => {

27const Layout = ({ children }) => {

27 const q = useStaticQuery(query);

28 const q = useStaticQuery(query);

28 return (

29 return (

29− <PSLayout siteInfo={q.site} mdxProviderComponent={mdxProvider}>

30+ <PSLayout siteInfo={q.site} mdxProviderComponent={MdxProvider}>

30 {children}

31 {children}

31 </PSLayout>

32 </PSLayout>

32 );

33 );

blog/src/pages/cast.mdx+3

@@ -6,6 +6,9 @@ import SEO from '../components/seo'

7# The beginning

9+Welcome, my little friend.

10+I am telling *you* very explicitly that you should **stop** this.

11+

9## Hocus

12## Hocus

11```purescript

14```purescript

blog/src/purescript/Typography/SmallCaps.pursnew file+22

@@ -0,0 +1,22 @@

1+module Typography.SmallCaps where

3+import Prelude

4+import Effect (Effect)

5+import React.Basic.DOM as R

6+import React.Basic.Emotion as E

7+import React.Basic.Hooks (JSX)

8+import React.Basic.Hooks as React

9+import Yoga as Y

10+

11+mkSmallCaps :: Effect (String -> JSX)

12+mkSmallCaps = do

13+ React.component "SmallCaps" \text -> React.do

14+ pure

15+ $ Y.styled R.span'

16+ { className: "small-caps"

17+ , css:

18+ E.css

19+ { fontVariant: E.str "small-caps"

20+ }

21+ }

22+ [ R.text $ text ]

blog/src/stories/PSLayout.purs+36−19

@@ -5,14 +5,12 @@ import Data.Tuple.Nested ((/\))

5import Effect (Effect)

6import Effect.Aff (Aff)

7import Effect.Class (liftEffect)

8−import Effect.Class.Console as Console

9−import MDX (MDX(..), renderWithReact)

8+import MDX (MDX, renderWithReact)

9+import MDXProvider (MdxProviderProps, mkLiveMdxProviderComponent)

10import Milkis as M

11import Milkis.Impl.Window (windowFetch)

12−import PSLayout (MdxProviderProps)

12+import PSLayout (mkLayout)

13−import PSLayout (mkLayout, mkLiveMdxProviderComponent)

14import React.Basic (JSX, ReactComponent, fragment)

13import React.Basic (JSX, ReactComponent, fragment)

15−import React.Basic.DOM as R

16import React.Basic.Hooks (reactChildrenFromArray, reactComponent, reactComponentWithChildren)

14import React.Basic.Hooks (reactChildrenFromArray, reactComponent, reactComponentWithChildren)

17import React.Basic.Hooks as React

15import React.Basic.Hooks as React

18import React.Basic.Hooks.Aff (useAff)

16import React.Basic.Hooks.Aff (useAff)

@@ -37,8 +35,10 @@ compileMDX body = do

37example ∷ String

35example ∷ String

38example =

36example =

39 """

37 """

40−# Help me!

38+# Monad

41−I am stuck in this shit

39+

40+A<Sc>ccording to [Hippolytus](https://en.wikipedia.org/wiki/Hippolytus_of_Rome "Hippolytus of Rome")</Sc>, the worldview was inspired by the [Pythagoreans](https://en.wikipedia.org/wiki/Pythagoreanism "Pythagoreanism"), who called the first thing that came into existence the "monad", which begat (bore) the [dyad](https://en.wikipedia.org/wiki/Dyad_(Greek_philosophy) "Dyad (Greek philosophy)") (from the Greek word for two), which begat the [numbers](https://en.wikipedia.org/wiki/Number "Number"), which begat the [point](https://en.wikipedia.org/wiki/Point_(geometry) "Point (geometry)"), begetting [lines](https://en.wikipedia.org/wiki/Line_(geometry) "Line (geometry)") or [finiteness](https://en.wiktionary.org/wiki/finite "wikt:finite"), etc.<sup>[[2]](https://en.wikipedia.org/wiki/Monad_(philosophy)#cite_note-2)</sup> It meant [divinity](https://en.wikipedia.org/wiki/Divinity "Divinity"), the first being, or the totality of all beings, referring in [cosmogony](https://en.wikipedia.org/wiki/Cosmogony "Cosmogony") (creation theories) variously to source acting alone and/or an indivisible origin and [equivalent comparators](https://en.wikipedia.org/wiki/Abstraction_(philosophy) "Abstraction (philosophy)").^[[3]](https://en.wikipedia.org/wiki/Monad_(philosophy)#cite_note-3)

41+

42no way is out

44```purescript

@@ -47,6 +47,23 @@ module You.Are.An where

47asshole = "You"

48```

50+```purescript

51+--result 12

52+module Bla where

53+--start here

54+pigboy = "Piggy {-hi-} Pigster"

55+--end here

56+```

57+

58+```javascript

59+'use strict'

60+undefined = NaN || null

61+undefined = NaN || null

62+undefined = NaN || null

63+undefined = NaN || null

64+undefined = NaN || null

65+```

66+

50This is particularly lovely.

67This is particularly lovely.

51I cannot recommend this party enough.

68I cannot recommend this party enough.

@@ -63,25 +80,25 @@ landingPage = do

63 reactComponent "Landing Page Story" \{} -> React.do

80 reactComponent "Landing Page Story" \{} -> React.do

64 mdx /\ setMdx <- React.useState' []

81 mdx /\ setMdx <- React.useState' []

65 useAff unit do

82 useAff unit do

66− mdx <- compileMDX example

83+ mdxCode <- compileMDX example

67− liftEffect $ setMdx mdx

84+ liftEffect $ setMdx mdxCode

68 pure

85 pure

69 $ React.element layout

86 $ React.element layout

70 { children:

87 { children:

71− reactChildrenFromArray mdx

88+ reactChildrenFromArray mdx

72 , mdxProviderComponent: mdxProvider

89 , mdxProviderComponent: mdxProvider

73 , siteInfo:

90 , siteInfo:

74− { siteMetadata:

91+ { siteMetadata:

75− { menuLinks: []

92+ { menuLinks: []

76− , title: "Page"

93+ , title: "Page"

94+ }

77 }

95 }

78− }

79 }

96 }

80 compo <- mkCompo

97 compo <- mkCompo

81 pure $ React.element compo {}

98 pure $ React.element compo {}

82 where

99 where

83− mkFakeMdxProvider ∷ Effect (ReactComponent MdxProviderProps)

100+ mkFakeMdxProvider ∷ Effect (ReactComponent MdxProviderProps)

84− mkFakeMdxProvider =

101+ mkFakeMdxProvider =

85− reactComponentWithChildren "Fake MDX Provider" \{ children } -> React.do

102+ reactComponentWithChildren "Fake MDX Provider" \{ children } -> React.do

86− pure

103+ pure

87− $ fragment (unsafeCoerce children)

104+ $ fragment (unsafeCoerce children)

components/src/Yoga/CompileEditor/Component.purs+141−65

@@ -1,113 +1,189 @@

1module Yoga.CompileEditor.Component where

3import Prelude hiding (add)

4−import CSS (JustifyContentValue(..), flexEnd)

5import Data.Array (intercalate)

4import Data.Array (intercalate)

6import Data.Either (Either(..))

5import Data.Either (Either(..))

7import Data.Foldable (for_)

6import Data.Foldable (for_)

8−import Data.Interpolate (i)

9import Data.Maybe (Maybe(..))

7import Data.Maybe (Maybe(..))

8+import Data.Monoid (guard)

10import Data.Tuple.Nested ((/\))

9import Data.Tuple.Nested ((/\))

10+import Data.TwoOrMore (twoOrMore)

11import Effect (Effect)

12−import Effect.Aff (launchAff_)

12+import Effect.Aff (Error, launchAff_, message, try)

13import Effect.Class (liftEffect)

14−import JSS (jssClasses)

14+import Framer.Motion as M

15−import React.Basic (ReactComponent)

15+import React.Basic (JSX, ReactComponent)

16+import React.Basic.DOM (css)

16import React.Basic.DOM as R

17import React.Basic.DOM as R

18+import React.Basic.Emotion as E

17import React.Basic.Events (handler_)

19import React.Basic.Events (handler_)

18−import React.Basic.Helpers (jsx)

19−import React.Basic.Hooks (reactComponent, element, useState)

20+import React.Basic.Hooks (reactComponent, useState)

20import React.Basic.Hooks as React

21import React.Basic.Hooks as React

22+import Shared.Models.Body (CompileResult, RunResult)

23+import Yoga ((</>))

21import Yoga as Y

24import Yoga as Y

22import Yoga.Block as Block

25import Yoga.Block as Block

23import Yoga.Block.Atom.Button.Types as BT

26import Yoga.Block.Atom.Button.Types as BT

24import Yoga.Block.Container.Style (colour)

27import Yoga.Block.Container.Style (colour)

25−import Yoga.Card.Component (mkCard)

26−import Yoga.Cluster.Component as Cluster

27import Yoga.Compiler.Types (Compiler)

28import Yoga.Compiler.Types (Compiler)

28import Yoga.Editor (getValue, mkEditor, setValue)

29import Yoga.Editor (getValue, mkEditor, setValue)

29−import Yoga.Stack.Component as Stack

30−import Yoga.Theme.Styles (makeStylesJSS)

32−type Props =

31+type Props

33− { initialCode ∷ String, height ∷ String, language ∷ String }

32+ = { initialCode ∷ String, height ∷ String, language ∷ String }

35mkCompileEditor ∷ ∀ r. { | Compiler r } -> Effect (ReactComponent Props)

34mkCompileEditor ∷ ∀ r. { | Compiler r } -> Effect (ReactComponent Props)

36mkCompileEditor { compileAndRun } = do

35mkCompileEditor { compileAndRun } = do

37 editor <- mkEditor

36 editor <- mkEditor

38− card <- mkCard

37+ motionBox <- M.custom Block.box

39− cluster <- Cluster.makeComponent

38+ motionBox1 <- M.custom Block.box

40− stack <- Stack.makeComponent

39+ motionButton <- M.custom Block.button

41− useStyles <-

42− makeStylesJSS

43− $ jssClasses \_ ->

44− { editor:

45− { background: colour.background

46− , boxSizing: "content-box"

47− , height: "80%"

48− , padding: "20px"

49− , marginTop: "0px"

50− , borderRadius: "12px"

51− , boxShadow: i "22px 22px 24px " colour.background ", -22px -22px 24px " colour.backgroundLayer1 ∷ String

52− , display: "flex"

53− , flexDirection: "column"

54− -- , minWidth: theme.measure

55− }

56− , card:

57− { zIndex: 0

58− }

59− , cardHidden: { opacity: 0 }

60− , compileError: { color: colour.invalid, opacity: 1, transition: "opacity 2.0s ease" }

61− , runOutput: { color: colour.success, opacity: 1, transition: "opacity 2.0s ease" }

62− }

63 reactComponent "CompileEditor" \{ initialCode, height, language } -> React.do

40 reactComponent "CompileEditor" \{ initialCode, height, language } -> React.do

41+ activeIndex /\ updateActiveIndex <- React.useState' 0

64 maybeEditor /\ modifyEditor <- useState Nothing

42 maybeEditor /\ modifyEditor <- useState Nothing

65− classes <- useStyles {}

66 let

43 let

67 onLoad e = do

44 onLoad e = do

68 setValue initialCode e

45 setValue initialCode e

69 modifyEditor (const $ Just e)

46 modifyEditor (const $ Just e)

70 compileResult /\ modifyCompileResult <- useState Nothing

47 compileResult /\ modifyCompileResult <- useState Nothing

71 let

48 let

72− reset = do

49+ showEditor = updateActiveIndex 0

50+

51+ showResult = updateActiveIndex 1

52+

53+ reset = resetCompileResult *> showEditor

54+

55+ run = compile *> showResult

56+

57+ resetCompileResult = do

73 setCompileResult Nothing

58 setCompileResult Nothing

74 for_ maybeEditor (setValue initialCode)

59 for_ maybeEditor (setValue initialCode)

60+

61+ compileResultToString ∷ Maybe (Either Error (Either CompileResult RunResult)) -> String

75 compileResultToString = case _ of

62 compileResultToString = case _ of

76 Nothing -> ""

63 Nothing -> ""

77− Just (Left cr) -> cr.result <#> _.message # intercalate "/n"

64+ Just (Right (Left cr)) -> cr.result <#> _.message # intercalate "/n"

78− Just (Right r) -> r.stdout

65+ Just (Right (Right r)) -> r.stdout

79− compileResultToClass = case _ of

66+ Just (Left e) -> message e

80− Nothing -> classes.cardHidden

67+

81− Just (Left cr) -> classes.compileError

82− Just (Right r) -> classes.runOutput

83 setCompileResult = modifyCompileResult <<< const

68 setCompileResult = modifyCompileResult <<< const

69+

84 compile = do

70 compile = do

85 for_ maybeEditor \ed -> do

71 for_ maybeEditor \ed -> do

86 setCompileResult Nothing

72 setCompileResult Nothing

87 code <- getValue ed

73 code <- getValue ed

88 launchAff_ do

74 launchAff_ do

89− res <- compileAndRun { code }

75+ res <- try $ compileAndRun { code }

90 setCompileResult (Just res) # liftEffect

76 setCompileResult (Just res) # liftEffect

77+

78+ tabs ∷ JSX

79+ tabs =

80+ Block.segmented

81+ </> { activeIndex

82+ , updateActiveIndex

83+ , buttonContents:

84+ twoOrMore

85+ { id: "editor", value: "Editor" }

86+ { id: "Result", value: "Result" }

87+ []

88+ }

89+

90+ editorView ∷ JSX

91+ editorView = editor </> { onLoad, height, language }

92+

93+ buttons ∷ Array JSX -> JSX

94+ buttons = Y.el Block.cluster { justify: "flex-end", space: "var(--s-1)" }

95+

96+ button =

97+ Y.el motionButton

98+ <<< M.motion

99+ { transition: M.transition $ { duration: 0.2 }

100+ }

101+

102+ resetButton ∷ JSX

103+ resetButton =

104+ button

105+ { buttonType: BT.Generic, onClick: handler_ reset }

106+ [ R.text "Reset" ]

107+

108+ runButton ∷ JSX

109+ runButton =

110+ button

111+ { buttonType: BT.Primary, onClick: handler_ run }

112+ [ R.text "Run" ]

113+

114+ buttonControls ∷ Array JSX -> JSX

115+ buttonControls = Y.el motionBox $ M.motion { layout: M.layout true } {}

116+

117+ tabContainer ∷ Array JSX -> JSX

118+ tabContainer children =

119+ Y.styled R.div'

120+ { className: "tabby"

121+ , css:

122+ E.css

123+ { background: E.str colour.backgroundLayer4

124+ , borderTop: E.str $ "1px solid " <> colour.interfaceBackgroundHighlight

125+ , borderRadius: E.str "14px 14px 0 0"

126+ , paddingLeft: E.var "--s-1"

127+ , paddingRight: E.var "--s-1"

128+ , paddingTop: E.str "0"

129+ , paddingBottom: E.str "0"

130+ , marginBottom: E.str "0"

131+ , zIndex: E.str "0"

132+ }

133+ }

134+ [ Y.el Block.centre { andText: true } children

135+ ]

136+

137+ terminal ∷ Array JSX -> JSX

138+ terminal =

139+ Y.el motionBox1

140+ $ M.motion

141+ { layout: M.layout true

142+ }

143+ { css:

144+ E.css

145+ { background: E.str "rgb(42,42,59)"

146+ , boxSizing: E.str "content-box"

147+ , margin: E.str "0"

148+ , minHeight: E.str "8em"

149+ , padding: E.str "0"

150+ , display: E.str "flex"

151+ }

152+ }

153+

154+ container =

155+ Y.el motionBox1

156+ $ M.motion { layout: M.layout true }

157+ { css:

158+ E.css

159+ { background: E.str colour.backgroundLayer4

160+ , borderBottom: E.str $ "1px solid " <> colour.interfaceBackgroundShadow

161+ , borderRadius: E.str "0 0 14px 14px"

162+ , paddingLeft: E.str "0"

163+ , paddingRight: E.str "0"

164+ , paddingTop: E.str "0"

165+ , paddingBottom: E.var "--s-1"

166+ , zIndex: E.str "0"

167+ }

168+ }

91 pure

169 pure

92− $ jsx stack { space: "--s1" }

170+ $ Y.el Block.stack { space: E.str "0" }

93− [ jsx stack { space: "--s0", className: classes.editor }

171+ [ tabContainer [ tabs ]

94− [ element editor { onLoad, height, language }

172+ , Y.el M.animateSharedLayout {}

95− , jsx cluster { justify: JustifyContentValue flexEnd }

173+ [ container

96− [ R.div_

174+ [ terminal

97− [ Y.el Block.button

175+ [ if activeIndex == 0 then

98− { onClick: handler_ reset

176+ editorView

177+ else

178+ Y.el M.div

179+ { layout: M.layout true

180+ , initial: M.initial $ css { width: "100%" }

99− }

181+ }

100− [ R.text "Reset" ]

182+ [ R.text (compileResultToString compileResult) ]

101− , Y.el Block.button

183+ ]

102− { buttonType: BT.Primary

184+ , buttonControls

103− , onClick: handler_ compile

185+ [ buttons [ resetButton, runButton ]

104− }

105− [ R.text "Run" ]

106 ]

186 ]

107 ]

187 ]

108 ]

188 ]

109− , jsx card

110− { className: classes.card <> " " <> compileResultToClass compileResult

111− }

112− [ R.text (compileResultToString compileResult) ]

113 ]

189 ]

components/src/Yoga/Monaco/Editor.js+811−792

@@ -1,14 +1,14 @@

1"use strict";

2−var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {

2+var __createBinding = (this && this.__createBinding) || (Object.create ? (function (o, m, k, k2) {

3 if (k2 === undefined) k2 = k;

4− Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });

4+ Object.defineProperty(o, k2, { enumerable: true, get: function () { return m[k]; } });

5−}) : (function(o, m, k, k2) {

5+}) : (function (o, m, k, k2) {

6 if (k2 === undefined) k2 = k;

7 o[k2] = m[k];

8}));

9−var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {

9+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function (o, v) {

10 Object.defineProperty(o, "default", { enumerable: true, value: v });

11−}) : function(o, v) {

11+}) : function (o, v) {

12 o["default"] = v;

13});

14var __importStar = (this && this.__importStar) || function (mod) {

@@ -28,8 +28,8 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge

28 });

29};

30var __generator = (this && this.__generator) || function (thisArg, body) {

31− var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;

31+ var _ = { label: 0, sent: function () { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;

32− return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;

32+ return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function () { return this; }), g;

33 function verb(n) { return function (v) { return step([n, v]); }; }

34 function step(op) {

35 if (f) throw new TypeError("Generator is already executing.");

@@ -54,29 +54,43 @@ var __generator = (this && this.__generator) || function (thisArg, body) {

54 if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };

55 }

56};

57+exports.monacoEditorImpl = function () {

57−exports.monacoEditorImpl = function () { return __awaiter(void 0, void 0, void 0, function () {

58+ return __awaiter(void 0, void 0, void 0, function () {

58− var x;

59+ var x;

59− return __generator(this, function (_a) {

60+ return __generator(this, function (_a) {

60− switch (_a.label) {

61+ switch (_a.label) {

61− case 0: return [4 /*yield*/, Promise.resolve().then(function () { return __importStar(require("react-monaco-editor")); })];

62+ case 0: return [4 /*yield*/, Promise.resolve().then(function () { return __importStar(require("react-monaco-editor")); })];

62− case 1:

63+ case 1:

63− x = _a.sent();

64+ x = _a.sent();

64− return [2 /*return*/, x.default];

65+ return [2 /*return*/, x.default];

66+ }

65− }

67+ });

66 });

68 });

67−}); };

69+};

68exports.getValue = function (editor) {

70exports.getValue = function (editor) {

69 return function () {

71 return function () {

70 return editor.getValue();

72 return editor.getValue();

71 };

73 };

72};

74};

73−exports.colorizeImpl = function (text) { return function (languageId) { return function (options) { return function (editor) {

75+exports.colorizeImpl = function (text) {

76+ return function (languageId) {

77+ return function (options) {

78+ return function (editor) {

74− return editor.colorize(text, languageId, options);

79+ return editor.colorize(text, languageId, options);

75−}; }; }; };

80+ };

81+ };

82+ };

83+};

76exports.setValue = function (value) { return function (editor) { return function () { return editor.setValue(value); }; }; };

84exports.setValue = function (value) { return function (editor) { return function () { return editor.setValue(value); }; }; };

77−exports.defineThemeImpl = function (monacoInstance) { return function (name) { return function (theme) { return function () {

85+exports.defineThemeImpl = function (monacoInstance) {

86+ return function (name) {

87+ return function (theme) {

88+ return function () {

78− return monacoInstance.editor.defineTheme(name, theme);

89+ return monacoInstance.editor.defineTheme(name, theme);

79−}; }; }; };

90+ };

91+ };

92+ };

93+};

80exports.setThemeImpl = function (monacoInstance) {

94exports.setThemeImpl = function (monacoInstance) {

81 return function (theme) {

95 return function (theme) {

82 return function () {

96 return function () {

@@ -100,777 +114,782 @@ exports.setMonarchTokensProviderImpl = function (monacoInstance) {

100 };

114 };

101 };

115 };

102};

116};

103−exports.vsCodeTheme = function (bg) { return ({

117+exports.vsCodeTheme = function (bg) {

118+ return ({

104− base: "vs",

119+ base: "vs",

105− inherit: true,

120+ inherit: true,

106− rules: [

121+ rules: [

107− {

122+ {

108− foreground: "008e00",

123+ foreground: "008e00",

109− token: "comment",

124+ token: "comment",

110− },

125+ },

111− {

126+ {

112− foreground: "7d4726",

127+ foreground: "7d4726",

113− token: "meta.preprocessor",

128+ token: "meta.preprocessor",

114− },

129+ },

115− {

130+ {

116− foreground: "7d4726",

131+ foreground: "7d4726",

117− token: "keyword.control.import",

132+ token: "keyword.control.import",

118− },

133+ },

119− {

134+ {

120− foreground: "df0002",

135+ foreground: "df0002",

121− token: "string",

136+ token: "string",

122− },

137+ },

123− {

138+ {

124− foreground: "3a00dc",

139+ foreground: "3a00dc",

125− token: "constant.numeric",

140+ token: "constant.numeric",

126− },

141+ },

127− {

142+ {

128− foreground: "c800a4",

143+ foreground: "c800a4",

129− token: "constant.language",

144+ token: "constant.language",

130− },

145+ },

131− {

146+ {

132− foreground: "275a5e",

147+ foreground: "275a5e",

133− token: "constant.character",

148+ token: "constant.character",

134− },

149+ },

135− {

150+ {

136− foreground: "275a5e",

151+ foreground: "275a5e",

137− token: "constant.other",

152+ token: "constant.other",

138− },

153+ },

139− {

154+ {

140− foreground: "c800a4",

155+ foreground: "c800a4",

141− token: "variable.language",

156+ token: "variable.language",

142− },

157+ },

143− {

158+ {

144− foreground: "c800a4",

159+ foreground: "c800a4",

145− token: "variable.other",

160+ token: "variable.other",

146− },

161+ },

147− {

162+ {

148− foreground: "c800a4",

163+ foreground: "c800a4",

149− token: "keyword",

164+ token: "keyword",

150− },

165+ },

151− {

166+ {

152− foreground: "c900a4",

167+ foreground: "c900a4",

153− token: "storage",

168+ token: "storage",

154− },

169+ },

155− {

170+ {

156− foreground: "438288",

171+ foreground: "438288",

157− token: "entity.name.class",

172+ token: "entity.name.class",

158− },

173+ },

159− {

174+ {

160− foreground: "790ead",

175+ foreground: "790ead",

161− token: "entity.name.tag",

176+ token: "entity.name.tag",

162− },

177+ },

163− {

178+ {

164− foreground: "450084",

179+ foreground: "450084",

165− token: "entity.other.attribute-name",

180+ token: "entity.other.attribute-name",

166− },

181+ },

167− {

182+ {

168− foreground: "450084",

183+ foreground: "450084",

169− token: "support.function",

184+ token: "support.function",

170− },

185+ },

171− {

186+ {

172− foreground: "450084",

187+ foreground: "450084",

173− token: "support.constant",

188+ token: "support.constant",

174− },

189+ },

175− {

190+ {

176− foreground: "790ead",

191+ foreground: "790ead",

177− token: "support.type",

192+ token: "support.type",

178− },

193+ },

179− {

194+ {

180− foreground: "790ead",

195+ foreground: "790ead",

181− token: "support.class",

196+ token: "support.class",

182− },

197+ },

183− {

198+ {

184− foreground: "790ead",

199+ foreground: "790ead",

185− token: "support.other.variable",

200+ token: "support.other.variable",

186− },

201+ },

187− ],

202+ ],

188− colors: {

203+ colors: {

189− "editor.foreground": "#000000",

204+ "editor.foreground": "#000000",

190− "editor.background": bg,

205+ "editor.background": bg,

191− "editor.selectionBackground": "#B5D5FF",

206+ "editor.selectionBackground": "#B5D5FF",

192− "editor.lineHighlightBackground": "#00000012",

207+ "editor.lineHighlightBackground": "#B5D5FF",

208+ "editor.lineHighlightBorder": "#B5D5FF",

193− "editorCursor.foreground": "#000000",

209+ "editorCursor.foreground": "#000000",

194− "editorWhitespace.foreground": "#BFBFBF",

210+ "editorWhitespace.foreground": "#BFBFBF",

195− },

196−}); };

197−exports.nightOwlTheme = function (bg) { return ({

198− base: "vs-dark",

199− inherit: true,

200− rules: [

201− {

202− foreground: "637777",

203− token: "comment",

204− },

205− {

206− foreground: "addb67",

207− token: "string",

208− },

209− {

210− foreground: "ecc48d",

211− token: "vstring.quoted",

212− },

213− {

214− foreground: "ecc48d",

215− token: "variable.other.readwrite.js",

216− },

217− {

218− foreground: "5ca7e4",

219− token: "string.regexp",

220− },

221− {

222− foreground: "5ca7e4",

223− token: "string.regexp keyword.other",

224− },

225− {

226− foreground: "5f7e97",

227− token: "meta.function punctuation.separator.comma",

228− },

229− {

230− foreground: "f78c6c",

231− token: "constant.numeric",

232− },

233− {

234− foreground: "f78c6c",

235− token: "constant.character.numeric",

236− },

237− {

238− foreground: "addb67",

239− token: "variable",

240− },

241− {

242− foreground: "c792ea",

243− token: "keyword",

244− },

245− {

246− foreground: "c792ea",

247− token: "punctuation.accessor",

248− },

249− {

250− foreground: "c792ea",

251− token: "storage",

252− },

253− {

254− foreground: "c792ea",

255− token: "meta.var.expr",

256− },

257− {

258− foreground: "c792ea",

259− token: "meta.class meta.method.declaration meta.var.expr storage.type.jsm",

260− },

261− {

262− foreground: "c792ea",

263− token: "storage.type.property.js",

264− },

265− {

266− foreground: "c792ea",

267− token: "storage.type.property.ts",

268− },

269− {

270− foreground: "c792ea",

271− token: "storage.type.property.tsx",

272− },

273− {

274− foreground: "82aaff",

275− token: "storage.type",

276− },

277− {

278− foreground: "ffcb8b",

279− token: "entity.name.class",

280− },

281− {

282− foreground: "ffcb8b",

283− token: "meta.class entity.name.type.class",

284− },

285− {

286− foreground: "addb67",

287− token: "entity.other.inherited-class",

288− },

289− {

290− foreground: "82aaff",

291− token: "entity.name.function",

292− },

293− {

294− foreground: "addb67",

295− token: "punctuation.definition.variable",

296− },

297− {

298− foreground: "d3423e",

299− token: "punctuation.section.embedded",

300− },

301− {

302− foreground: "d6deeb",

303− token: "punctuation.terminator.expression",

304− },

305− {

306− foreground: "d6deeb",

307− token: "punctuation.definition.arguments",

308− },

309− {

310− foreground: "d6deeb",

311− token: "punctuation.definition.array",

312− },

313− {

314− foreground: "d6deeb",

315− token: "punctuation.section.array",

316− },

317− {

318− foreground: "d6deeb",

319− token: "meta.array",

320− },

321− {

322− foreground: "d9f5dd",

323− token: "punctuation.definition.list.begin",

324− },

325− {

326− foreground: "d9f5dd",

327− token: "punctuation.definition.list.end",

328− },

329− {

330− foreground: "d9f5dd",

331− token: "punctuation.separator.arguments",

332− },

333− {

334− foreground: "d9f5dd",

335− token: "punctuation.definition.list",

336− },

337− {

338− foreground: "d3423e",

339− token: "string.template meta.template.expression",

340− },

341− {

342− foreground: "d6deeb",

343− token: "string.template punctuation.definition.string",

344− },

345− {

346− foreground: "c792ea",

347− fontStyle: "italic",

348− token: "italic",

349− },

350− {

351− foreground: "addb67",

352− fontStyle: "bold",

353− token: "bold",

354− },

355− {

356− foreground: "82aaff",

357− token: "constant.language",

358− },

359− {

360− foreground: "82aaff",

361− token: "punctuation.definition.constant",

362− },

363− {

364− foreground: "82aaff",

365− token: "variable.other.constant",

366− },

367− {

368− foreground: "7fdbca",

369− token: "support.function.construct",

370− },

371− {

372− foreground: "7fdbca",

373− token: "keyword.other.new",

374− },

375− {

376− foreground: "82aaff",

377− token: "constant.character",

378− },

379− {

380− foreground: "82aaff",

381− token: "constant.other",

382− },

383− {

384− foreground: "f78c6c",

385− token: "constant.character.escape",

386− },

387− {

388− foreground: "addb67",

389− token: "entity.other.inherited-class",

390− },

391− {

392− foreground: "d7dbe0",

393− token: "variable.parameter",

394− },

395− {

396− foreground: "7fdbca",

397− token: "entity.name.tag",

398− },

399− {

400− foreground: "cc2996",

401− token: "punctuation.definition.tag.html",

402− },

403− {

404− foreground: "cc2996",

405− token: "punctuation.definition.tag.begin",

406− },

407− {

408− foreground: "cc2996",

409− token: "punctuation.definition.tag.end",

410− },

411− {

412− foreground: "addb67",

413− token: "entity.other.attribute-name",

414− },

415− {

416− foreground: "addb67",

417− token: "entity.name.tag.custom",

418− },

419− {

420− foreground: "82aaff",

421− token: "support.function",

422− },

423− {

424− foreground: "82aaff",

425− token: "support.constant",

426− },

427− {

428− foreground: "7fdbca",

429− token: "upport.constant.meta.property-value",

430− },

431− {

432− foreground: "addb67",

433− token: "support.type",

434− },

435− {

436− foreground: "addb67",

437− token: "support.class",

438− },

439− {

440− foreground: "addb67",

441− token: "support.variable.dom",

442− },

443− {

444− foreground: "7fdbca",

445− token: "support.constant",

446− },

447− {

448− foreground: "7fdbca",

449− token: "keyword.other.special-method",

450− },

451− {

452− foreground: "7fdbca",

453− token: "keyword.other.new",

454− },

455− {

456− foreground: "7fdbca",

457− token: "keyword.other.debugger",

458− },

459− {

460− foreground: "7fdbca",

461− token: "keyword.control",

462− },

463− {

464− foreground: "c792ea",

465− token: "keyword.operator.comparison",

466− },

467− {

468− foreground: "c792ea",

469− token: "keyword.control.flow.js",

470− },

471− {

472− foreground: "c792ea",

473− token: "keyword.control.flow.ts",

474− },

475− {

476− foreground: "c792ea",

477− token: "keyword.control.flow.tsx",

478− },

479− {

480− foreground: "c792ea",

481− token: "keyword.control.ruby",

482− },

483− {

484− foreground: "c792ea",

485− token: "keyword.control.module.ruby",

486− },

487− {

488− foreground: "c792ea",

489− token: "keyword.control.class.ruby",

490− },

491− {

492− foreground: "c792ea",

493− token: "keyword.control.def.ruby",

494− },

495− {

496− foreground: "c792ea",

497− token: "keyword.control.loop.js",

498− },

499− {

500− foreground: "c792ea",

501− token: "keyword.control.loop.ts",

502− },

503− {

504− foreground: "c792ea",

505− token: "keyword.control.import.js",

506− },

507− {

508− foreground: "c792ea",

509− token: "keyword.control.import.ts",

510− },

511− {

512− foreground: "c792ea",

513− token: "keyword.control.import.tsx",

514− },

515− {

516− foreground: "c792ea",

517− token: "keyword.control.from.js",

518− },

519− {

520− foreground: "c792ea",

521− token: "keyword.control.from.ts",

522− },

523− {

524− foreground: "c792ea",

525− token: "keyword.control.from.tsx",

526− },

527− {

528− foreground: "ffffff",

529− background: "ff2c83",

530− token: "invalid",

531− },

532− {

533− foreground: "ffffff",

534− background: "d3423e",

535− token: "invalid.deprecated",

536− },

537− {

538− foreground: "7fdbca",

539− token: "keyword.operator",

540− },

541− {

542− foreground: "c792ea",

543− token: "keyword.operator.relational",

544− },

545− {

546− foreground: "c792ea",

547− token: "keyword.operator.assignement",

548− },

549− {

550− foreground: "c792ea",

551− token: "keyword.operator.arithmetic",

552− },

553− {

554− foreground: "c792ea",

555− token: "keyword.operator.bitwise",

556− },

557− {

558− foreground: "c792ea",

559− token: "keyword.operator.increment",

560− },

561− {

562− foreground: "c792ea",

563− token: "keyword.operator.ternary",

564− },

565− {

566− foreground: "637777",

567− token: "comment.line.double-slash",

568− },

569− {

570− foreground: "cdebf7",

571− token: "object",

572− },

573− {

574− foreground: "ff5874",

575− token: "constant.language.null",

576− },

577− {

578− foreground: "d6deeb",

579− token: "meta.brace",

580− },

581− {

582− foreground: "c792ea",

583− token: "meta.delimiter.period",

584− },

585− {

586− foreground: "d9f5dd",

587− token: "punctuation.definition.string",

588− },

589− {

590− foreground: "ff5874",

591− token: "constant.language.boolean",

592− },

593− {

594− foreground: "ffffff",

595− token: "object.comma",

596− },

597− {

598− foreground: "7fdbca",

599− token: "variable.parameter.function",

600− },

601− {

602− foreground: "80cbc4",

603− token: "support.type.vendor.property-name",

604− },

605− {

606− foreground: "80cbc4",

607− token: "support.constant.vendor.property-value",

608− },

609− {

610− foreground: "80cbc4",

611− token: "support.type.property-name",

612− },

613− {

614− foreground: "80cbc4",

615− token: "meta.property-list entity.name.tag",

616− },

617− {

618− foreground: "57eaf1",

619− token: "meta.property-list entity.name.tag.reference",

620− },

621− {

622− foreground: "f78c6c",

623− token: "constant.other.color.rgb-value punctuation.definition.constant",

624− },

625− {

626− foreground: "ffeb95",

627− token: "constant.other.color",

628− },

629− {

630− foreground: "ffeb95",

631− token: "keyword.other.unit",

632− },

633− {

634− foreground: "c792ea",

635− token: "meta.selector",

636− },

637− {

638− foreground: "fad430",

639− token: "entity.other.attribute-name.id",

640− },

641− {

642− foreground: "80cbc4",

643− token: "meta.property-name",

644− },

645− {

646− foreground: "c792ea",

647− token: "entity.name.tag.doctype",

648− },

649− {

650− foreground: "c792ea",

651− token: "meta.tag.sgml.doctype",

652− },

653− {

654− foreground: "d9f5dd",

655− token: "punctuation.definition.parameters",

656− },

657− {

658− foreground: "ecc48d",

659− token: "string.quoted",

660− },

661− {

662− foreground: "ecc48d",

663− token: "string.quoted.double",

664− },

665− {

666− foreground: "ecc48d",

667− token: "string.quoted.single",

668− },

669− {

670− foreground: "addb67",

671− token: "support.constant.math",

672− },

673− {

674− foreground: "addb67",

675− token: "support.type.property-name.json",

676− },

677− {

678− foreground: "addb67",

679− token: "support.constant.json",

680− },

681− {

682− foreground: "c789d6",

683− token: "meta.structure.dictionary.value.json string.quoted.double",

684− },

685− {

686− foreground: "80cbc4",

687− token: "string.quoted.double.json punctuation.definition.string.json",

688− },

689− {

690− foreground: "ff5874",

691− token: "meta.structure.dictionary.json meta.structure.dictionary.value constant.language",

692− },

693− {

694− foreground: "d6deeb",

695− token: "variable.other.ruby",

696− },

697− {

698− foreground: "ecc48d",

699− token: "entity.name.type.class.ruby",

700− },

701− {

702− foreground: "ecc48d",

703− token: "keyword.control.class.ruby",

704− },

705− {

706− foreground: "ecc48d",

707− token: "meta.class.ruby",

708− },

709− {

710− foreground: "7fdbca",

711− token: "constant.language.symbol.hashkey.ruby",

712− },

713− {

714− foreground: "e0eddd",

715− background: "a57706",

716− fontStyle: "italic",

717− token: "meta.diff",

718− },

719− {

720− foreground: "e0eddd",

721− background: "a57706",

722− fontStyle: "italic",

723− token: "meta.diff.header",

724− },

725− {

726− foreground: "ef535090",

727− fontStyle: "italic",

728− token: "markup.deleted",

729− },

730− {

731− foreground: "a2bffc",

732− fontStyle: "italic",

733− token: "markup.changed",

734− },

735− {

736− foreground: "a2bffc",

737− fontStyle: "italic",

738− token: "meta.diff.header.git",

739− },

740− {

741− foreground: "a2bffc",

742− fontStyle: "italic",

743− token: "meta.diff.header.from-file",

744− },

745− {

746− foreground: "a2bffc",

747− fontStyle: "italic",

748− token: "meta.diff.header.to-file",

749− },

750− {

751− foreground: "219186",

752− background: "eae3ca",

753− token: "markup.inserted",

754− },

755− {

756− foreground: "d3201f",

757− token: "other.package.exclude",

758− },

759− {

760− foreground: "d3201f",

761− token: "other.remove",

762− },

763− {

764− foreground: "269186",

765− token: "other.add",

766− },

767− {

768− foreground: "ff5874",

769− token: "constant.language.python",

770− },

771− {

772− foreground: "82aaff",

773− token: "variable.parameter.function.python",

774− },

775− {

776− foreground: "82aaff",

777− token: "meta.function-call.arguments.python",

778− },

779− {

780− foreground: "b2ccd6",

781− token: "meta.function-call.python",

782− },

783− {

784− foreground: "b2ccd6",

785− token: "meta.function-call.generic.python",

786− },

787− {

788− foreground: "d6deeb",

789− token: "punctuation.python",

790− },

791− {

792− foreground: "addb67",

793− token: "entity.name.function.decorator.python",

794− },

795− {

796− foreground: "8eace3",

797− token: "source.python variable.language.special",

798− },

799− {

800− foreground: "82b1ff",

801− token: "markup.heading.markdown",

802− },

803− {

804− foreground: "c792ea",

805− fontStyle: "italic",

806− token: "markup.italic.markdown",

807− },

808− {

809− foreground: "addb67",

810− fontStyle: "bold",

811− token: "markup.bold.markdown",

812− },

813− {

814− foreground: "697098",

815− token: "markup.quote.markdown",

816− },

817− {

818− foreground: "80cbc4",

819− token: "markup.inline.raw.markdown",

820− },

821− {

822− foreground: "ff869a",

823− token: "markup.underline.link.markdown",

824− },

825− {

826− foreground: "ff869a",

827− token: "markup.underline.link.image.markdown",

828− },

829− {

830− foreground: "d6deeb",

831− token: "string.other.link.title.markdown",

832− },

833− {

834− foreground: "d6deeb",

835− token: "string.other.link.description.markdown",

836− },

837− {

838− foreground: "82b1ff",

839− token: "punctuation.definition.string.markdown",

840− },

841− {

842− foreground: "82b1ff",

843− token: "punctuation.definition.string.begin.markdown",

844− },

845− {

846− foreground: "82b1ff",

847− token: "punctuation.definition.string.end.markdown",

848− },

849− {

850− foreground: "82b1ff",

851− token: "meta.link.inline.markdown punctuation.definition.string",

852− },

853− {

854− foreground: "7fdbca",

855− token: "punctuation.definition.metadata.markdown",

856 },

211 },

212+ });

213+};

214+exports.nightOwlTheme = function (bg) {

215+ return ({

216+ base: "vs-dark",

217+ inherit: true,

218+ rules: [

857− {

219+ {

220+ foreground: "637777",

221+ token: "comment",

222+ },

223+ {

224+ foreground: "addb67",

225+ token: "string",

226+ },

227+ {

228+ foreground: "ecc48d",

229+ token: "vstring.quoted",

230+ },

231+ {

232+ foreground: "ecc48d",

233+ token: "variable.other.readwrite.js",

234+ },

235+ {

236+ foreground: "5ca7e4",

237+ token: "string.regexp",

238+ },

239+ {

240+ foreground: "5ca7e4",

241+ token: "string.regexp keyword.other",

242+ },

243+ {

244+ foreground: "5f7e97",

245+ token: "meta.function punctuation.separator.comma",

246+ },

247+ {

248+ foreground: "f78c6c",

249+ token: "constant.numeric",

250+ },

251+ {

252+ foreground: "f78c6c",

253+ token: "constant.character.numeric",

254+ },

255+ {

256+ foreground: "addb67",

257+ token: "variable",

258+ },

259+ {

260+ foreground: "c792ea",

261+ token: "keyword",

262+ },

263+ {

264+ foreground: "c792ea",

265+ token: "punctuation.accessor",

266+ },

267+ {

268+ foreground: "c792ea",

269+ token: "storage",

270+ },

271+ {

272+ foreground: "c792ea",

273+ token: "meta.var.expr",

274+ },

275+ {

276+ foreground: "c792ea",

277+ token: "meta.class meta.method.declaration meta.var.expr storage.type.jsm",

278+ },

279+ {

280+ foreground: "c792ea",

281+ token: "storage.type.property.js",

282+ },

283+ {

284+ foreground: "c792ea",

285+ token: "storage.type.property.ts",

286+ },

287+ {

288+ foreground: "c792ea",

289+ token: "storage.type.property.tsx",

290+ },

291+ {

292+ foreground: "82aaff",

293+ token: "storage.type",

294+ },

295+ {

296+ foreground: "ffcb8b",

297+ token: "entity.name.class",

298+ },

299+ {

300+ foreground: "ffcb8b",

301+ token: "meta.class entity.name.type.class",

302+ },

303+ {

304+ foreground: "addb67",

305+ token: "entity.other.inherited-class",

306+ },

307+ {

308+ foreground: "82aaff",

309+ token: "entity.name.function",

310+ },

311+ {

312+ foreground: "addb67",

313+ token: "punctuation.definition.variable",

314+ },

315+ {

316+ foreground: "d3423e",

317+ token: "punctuation.section.embedded",

318+ },

319+ {

320+ foreground: "d6deeb",

321+ token: "punctuation.terminator.expression",

322+ },

323+ {

324+ foreground: "d6deeb",

325+ token: "punctuation.definition.arguments",

326+ },

327+ {

328+ foreground: "d6deeb",

329+ token: "punctuation.definition.array",

330+ },

331+ {

332+ foreground: "d6deeb",

333+ token: "punctuation.section.array",

334+ },

335+ {

336+ foreground: "d6deeb",

337+ token: "meta.array",

338+ },

339+ {

340+ foreground: "d9f5dd",

341+ token: "punctuation.definition.list.begin",

342+ },

343+ {

344+ foreground: "d9f5dd",

345+ token: "punctuation.definition.list.end",

346+ },

347+ {

348+ foreground: "d9f5dd",

349+ token: "punctuation.separator.arguments",

350+ },

351+ {

352+ foreground: "d9f5dd",

353+ token: "punctuation.definition.list",

354+ },

355+ {

356+ foreground: "d3423e",

357+ token: "string.template meta.template.expression",

358+ },

359+ {

360+ foreground: "d6deeb",

361+ token: "string.template punctuation.definition.string",

362+ },

363+ {

364+ foreground: "c792ea",

365+ fontStyle: "italic",

366+ token: "italic",

367+ },

368+ {

369+ foreground: "addb67",

370+ fontStyle: "bold",

371+ token: "bold",

372+ },

373+ {

374+ foreground: "82aaff",

375+ token: "constant.language",

376+ },

377+ {

378+ foreground: "82aaff",

379+ token: "punctuation.definition.constant",

380+ },

381+ {

382+ foreground: "82aaff",

383+ token: "variable.other.constant",

384+ },

385+ {

386+ foreground: "7fdbca",

387+ token: "support.function.construct",

388+ },

389+ {

390+ foreground: "7fdbca",

391+ token: "keyword.other.new",

392+ },

393+ {

394+ foreground: "82aaff",

395+ token: "constant.character",

396+ },

397+ {

398+ foreground: "82aaff",

399+ token: "constant.other",

400+ },

401+ {

402+ foreground: "f78c6c",

403+ token: "constant.character.escape",

404+ },

405+ {

406+ foreground: "addb67",

407+ token: "entity.other.inherited-class",

408+ },

409+ {

410+ foreground: "d7dbe0",

411+ token: "variable.parameter",

412+ },

413+ {

414+ foreground: "7fdbca",

415+ token: "entity.name.tag",

416+ },

417+ {

418+ foreground: "cc2996",

419+ token: "punctuation.definition.tag.html",

420+ },

421+ {

422+ foreground: "cc2996",

423+ token: "punctuation.definition.tag.begin",

424+ },

425+ {

426+ foreground: "cc2996",

427+ token: "punctuation.definition.tag.end",

428+ },

429+ {

430+ foreground: "addb67",

431+ token: "entity.other.attribute-name",

432+ },

433+ {

434+ foreground: "addb67",

435+ token: "entity.name.tag.custom",

436+ },

437+ {

438+ foreground: "82aaff",

439+ token: "support.function",

440+ },

441+ {

442+ foreground: "82aaff",

443+ token: "support.constant",

444+ },

445+ {

446+ foreground: "7fdbca",

447+ token: "upport.constant.meta.property-value",

448+ },

449+ {

450+ foreground: "addb67",

451+ token: "support.type",

452+ },

453+ {

454+ foreground: "addb67",

455+ token: "support.class",

456+ },

457+ {

458+ foreground: "addb67",

459+ token: "support.variable.dom",

460+ },

461+ {

462+ foreground: "7fdbca",

463+ token: "support.constant",

464+ },

465+ {

466+ foreground: "7fdbca",

467+ token: "keyword.other.special-method",

468+ },

469+ {

470+ foreground: "7fdbca",

471+ token: "keyword.other.new",

472+ },

473+ {

474+ foreground: "7fdbca",

475+ token: "keyword.other.debugger",

476+ },

477+ {

478+ foreground: "7fdbca",

479+ token: "keyword.control",

480+ },

481+ {

482+ foreground: "c792ea",

483+ token: "keyword.operator.comparison",

484+ },

485+ {

486+ foreground: "c792ea",

487+ token: "keyword.control.flow.js",

488+ },

489+ {

490+ foreground: "c792ea",

491+ token: "keyword.control.flow.ts",

492+ },

493+ {

494+ foreground: "c792ea",

495+ token: "keyword.control.flow.tsx",

496+ },

497+ {

498+ foreground: "c792ea",

499+ token: "keyword.control.ruby",

500+ },

501+ {

502+ foreground: "c792ea",

503+ token: "keyword.control.module.ruby",

504+ },

505+ {

506+ foreground: "c792ea",

507+ token: "keyword.control.class.ruby",

508+ },

509+ {

510+ foreground: "c792ea",

511+ token: "keyword.control.def.ruby",

512+ },

513+ {

514+ foreground: "c792ea",

515+ token: "keyword.control.loop.js",

516+ },

517+ {

518+ foreground: "c792ea",

519+ token: "keyword.control.loop.ts",

520+ },

521+ {

522+ foreground: "c792ea",

523+ token: "keyword.control.import.js",

524+ },

525+ {

526+ foreground: "c792ea",

527+ token: "keyword.control.import.ts",

528+ },

529+ {

530+ foreground: "c792ea",

531+ token: "keyword.control.import.tsx",

532+ },

533+ {

534+ foreground: "c792ea",

535+ token: "keyword.control.from.js",

536+ },

537+ {

538+ foreground: "c792ea",

539+ token: "keyword.control.from.ts",

540+ },

541+ {

542+ foreground: "c792ea",

543+ token: "keyword.control.from.tsx",

544+ },

545+ {

546+ foreground: "ffffff",

547+ background: "ff2c83",

548+ token: "invalid",

549+ },

550+ {

551+ foreground: "ffffff",

552+ background: "d3423e",

553+ token: "invalid.deprecated",

554+ },

555+ {

556+ foreground: "7fdbca",

557+ token: "keyword.operator",

558+ },

559+ {

560+ foreground: "c792ea",

561+ token: "keyword.operator.relational",

562+ },

563+ {

564+ foreground: "c792ea",

565+ token: "keyword.operator.assignement",

566+ },

567+ {

568+ foreground: "c792ea",

569+ token: "keyword.operator.arithmetic",

570+ },

571+ {

572+ foreground: "c792ea",

573+ token: "keyword.operator.bitwise",

574+ },

575+ {

576+ foreground: "c792ea",

577+ token: "keyword.operator.increment",

578+ },

579+ {

580+ foreground: "c792ea",

581+ token: "keyword.operator.ternary",

582+ },

583+ {

584+ foreground: "637777",

585+ token: "comment.line.double-slash",

586+ },

587+ {

588+ foreground: "cdebf7",

589+ token: "object",

590+ },

591+ {

592+ foreground: "ff5874",

593+ token: "constant.language.null",

594+ },

595+ {

596+ foreground: "d6deeb",

597+ token: "meta.brace",

598+ },

599+ {

600+ foreground: "c792ea",

601+ token: "meta.delimiter.period",

602+ },

603+ {

604+ foreground: "d9f5dd",

605+ token: "punctuation.definition.string",

606+ },

607+ {

608+ foreground: "ff5874",

609+ token: "constant.language.boolean",

610+ },

611+ {

612+ foreground: "ffffff",

613+ token: "object.comma",

614+ },

615+ {

616+ foreground: "7fdbca",

617+ token: "variable.parameter.function",

618+ },

619+ {

620+ foreground: "80cbc4",

621+ token: "support.type.vendor.property-name",

622+ },

623+ {

624+ foreground: "80cbc4",

625+ token: "support.constant.vendor.property-value",

626+ },

627+ {

628+ foreground: "80cbc4",

629+ token: "support.type.property-name",

630+ },

631+ {

632+ foreground: "80cbc4",

633+ token: "meta.property-list entity.name.tag",

634+ },

635+ {

636+ foreground: "57eaf1",

637+ token: "meta.property-list entity.name.tag.reference",

638+ },

639+ {

640+ foreground: "f78c6c",

641+ token: "constant.other.color.rgb-value punctuation.definition.constant",

642+ },

643+ {

644+ foreground: "ffeb95",

645+ token: "constant.other.color",

646+ },

647+ {

648+ foreground: "ffeb95",

649+ token: "keyword.other.unit",

650+ },

651+ {

652+ foreground: "c792ea",

653+ token: "meta.selector",

654+ },

655+ {

656+ foreground: "fad430",

657+ token: "entity.other.attribute-name.id",

658+ },

659+ {

660+ foreground: "80cbc4",

661+ token: "meta.property-name",

662+ },

663+ {

664+ foreground: "c792ea",

665+ token: "entity.name.tag.doctype",

666+ },

667+ {

668+ foreground: "c792ea",

669+ token: "meta.tag.sgml.doctype",

670+ },

671+ {

672+ foreground: "d9f5dd",

673+ token: "punctuation.definition.parameters",

674+ },

675+ {

676+ foreground: "ecc48d",

677+ token: "string.quoted",

678+ },

679+ {

680+ foreground: "ecc48d",

681+ token: "string.quoted.double",

682+ },

683+ {

684+ foreground: "ecc48d",

685+ token: "string.quoted.single",

686+ },

687+ {

688+ foreground: "addb67",

689+ token: "support.constant.math",

690+ },

691+ {

692+ foreground: "addb67",

693+ token: "support.type.property-name.json",

694+ },

695+ {

696+ foreground: "addb67",

697+ token: "support.constant.json",

698+ },

699+ {

700+ foreground: "c789d6",

701+ token: "meta.structure.dictionary.value.json string.quoted.double",

702+ },

703+ {

704+ foreground: "80cbc4",

705+ token: "string.quoted.double.json punctuation.definition.string.json",

706+ },

707+ {

708+ foreground: "ff5874",

709+ token: "meta.structure.dictionary.json meta.structure.dictionary.value constant.language",

710+ },

711+ {

712+ foreground: "d6deeb",

713+ token: "variable.other.ruby",

714+ },

715+ {

716+ foreground: "ecc48d",

717+ token: "entity.name.type.class.ruby",

718+ },

719+ {

720+ foreground: "ecc48d",

721+ token: "keyword.control.class.ruby",

722+ },

723+ {

724+ foreground: "ecc48d",

725+ token: "meta.class.ruby",

726+ },

727+ {

728+ foreground: "7fdbca",

729+ token: "constant.language.symbol.hashkey.ruby",

730+ },

731+ {

732+ foreground: "e0eddd",

733+ background: "a57706",

734+ fontStyle: "italic",

735+ token: "meta.diff",

736+ },

737+ {

738+ foreground: "e0eddd",

739+ background: "a57706",

740+ fontStyle: "italic",

741+ token: "meta.diff.header",

742+ },

743+ {

744+ foreground: "ef535090",

745+ fontStyle: "italic",

746+ token: "markup.deleted",

747+ },

748+ {

749+ foreground: "a2bffc",

750+ fontStyle: "italic",

751+ token: "markup.changed",

752+ },

753+ {

754+ foreground: "a2bffc",

755+ fontStyle: "italic",

756+ token: "meta.diff.header.git",

757+ },

758+ {

759+ foreground: "a2bffc",

760+ fontStyle: "italic",

761+ token: "meta.diff.header.from-file",

762+ },

763+ {

764+ foreground: "a2bffc",

765+ fontStyle: "italic",

766+ token: "meta.diff.header.to-file",

767+ },

768+ {

769+ foreground: "219186",

770+ background: "eae3ca",

771+ token: "markup.inserted",

772+ },

773+ {

774+ foreground: "d3201f",

775+ token: "other.package.exclude",

776+ },

777+ {

778+ foreground: "d3201f",

779+ token: "other.remove",

780+ },

781+ {

782+ foreground: "269186",

783+ token: "other.add",

784+ },

785+ {

786+ foreground: "ff5874",

787+ token: "constant.language.python",

788+ },

789+ {

790+ foreground: "82aaff",

791+ token: "variable.parameter.function.python",

792+ },

793+ {

794+ foreground: "82aaff",

795+ token: "meta.function-call.arguments.python",

796+ },

797+ {

798+ foreground: "b2ccd6",

799+ token: "meta.function-call.python",

800+ },

801+ {

802+ foreground: "b2ccd6",

803+ token: "meta.function-call.generic.python",

804+ },

805+ {

806+ foreground: "d6deeb",

807+ token: "punctuation.python",

808+ },

809+ {

810+ foreground: "addb67",

811+ token: "entity.name.function.decorator.python",

812+ },

813+ {

814+ foreground: "8eace3",

815+ token: "source.python variable.language.special",

816+ },

817+ {

858− foreground: "82b1ff",

818+ foreground: "82b1ff",

819+ token: "markup.heading.markdown",

820+ },

821+ {

822+ foreground: "c792ea",

823+ fontStyle: "italic",

824+ token: "markup.italic.markdown",

825+ },

826+ {

827+ foreground: "addb67",

828+ fontStyle: "bold",

829+ token: "markup.bold.markdown",

830+ },

831+ {

832+ foreground: "697098",

833+ token: "markup.quote.markdown",

834+ },

835+ {

836+ foreground: "80cbc4",

837+ token: "markup.inline.raw.markdown",

838+ },

839+ {

840+ foreground: "ff869a",

841+ token: "markup.underline.link.markdown",

842+ },

843+ {

844+ foreground: "ff869a",

845+ token: "markup.underline.link.image.markdown",

846+ },

847+ {

848+ foreground: "d6deeb",

849+ token: "string.other.link.title.markdown",

850+ },

851+ {

852+ foreground: "d6deeb",

853+ token: "string.other.link.description.markdown",

854+ },

855+ {

856+ foreground: "82b1ff",

857+ token: "punctuation.definition.string.markdown",

858+ },

859+ {

860+ foreground: "82b1ff",

861+ token: "punctuation.definition.string.begin.markdown",

862+ },

863+ {

864+ foreground: "82b1ff",

865+ token: "punctuation.definition.string.end.markdown",

866+ },

867+ {

868+ foreground: "82b1ff",

869+ token: "meta.link.inline.markdown punctuation.definition.string",

870+ },

871+ {

872+ foreground: "7fdbca",

873+ token: "punctuation.definition.metadata.markdown",

874+ },

875+ {

876+ foreground: "82b1ff",

859− token: "beginning.punctuation.definition.list.markdown",

877+ token: "beginning.punctuation.definition.list.markdown",

878+ },

879+ ],

880+ colors: {

881+ "editor.foreground": "#d6deeb",

882+ // "editor.background": "#011627",

883+ "editor.background": bg,

884+ "editor.selectionBackground": "#5f7e9779",

885+ // "editor.lineHighlightBackground": "#010E17",

886+ "editorCursor.foreground": "#80a4c2",

887+ "editorWhitespace.foreground": "#2e2040",

888+ "editorIndentGuide.background": "#5e81ce52",

889+ "editor.selectionHighlightBorder": "#122d42",

860 },

890 },

861− ],

862− colors: {

863− "editor.foreground": "#d6deeb",

864− // "editor.background": "#011627",

865− "editor.background": bg,

866− "editor.selectionBackground": "#5f7e9779",

867− "editor.lineHighlightBackground": "#010E17",

868− "editorCursor.foreground": "#80a4c2",

869− "editorWhitespace.foreground": "#2e2040",

870− "editorIndentGuide.background": "#5e81ce52",

871− "editor.selectionHighlightBorder": "#122d42",

872− },

873−}); };

891+ });

892+};

874exports.purescriptSyntax = {

893exports.purescriptSyntax = {

875 displayName: "Purescript",

894 displayName: "Purescript",

876 name: "purescript",

895 name: "purescript",

components/src/Yoga/Monaco/Editor.purs+7−3

@@ -1,7 +1,7 @@

1module Yoga.Editor where

3import Prelude

4−import CSS (borderBox, borderRadius, boxSizing, margin, padding, pct, px, toHexString, unitless, width)

4+import CSS (borderBox, borderRadius, boxSizing, calc, margin, padding, pct, px, toHexString, unitless, width)

5import CSS.Overflow (hidden, overflowY)

6import Control.Promise (Promise)

7import Control.Promise as Promise

@@ -19,6 +19,7 @@ import JSS (jssClasses)

19import Prim.Row (class Union)

20import React.Basic (JSX, ReactComponent, Ref, element, fragment)

21import React.Basic.DOM as R

22+import React.Basic.Emotion (var)

22import React.Basic.Hooks (reactComponent, useEffect, useState)

23import React.Basic.Hooks (reactComponent, useEffect, useState)

23import React.Basic.Hooks as React

24import React.Basic.Hooks as React

24import React.Basic.Hooks.Aff (useAff)

25import React.Basic.Hooks.Aff (useAff)

@@ -107,6 +108,7 @@ mkEditor = do

107 margin (0.0 # unitless) (0.0 # unitless) (0.0 # unitless) (0.0 # unitless)

108 margin (0.0 # unitless) (0.0 # unitless) (0.0 # unitless) (0.0 # unitless)

108 boxSizing borderBox

109 boxSizing borderBox

109 borderRadius (8.0 # px) (8.0 # px) (8.0 # px) (8.0 # px)

110 borderRadius (8.0 # px) (8.0 # px) (8.0 # px) (8.0 # px)

111+ padding (4.0 # px) (8.0 # px) (0.0 # px) (8.0 # px)

110 width (100.0 # pct)

112 width (100.0 # pct)

111 overflowY hidden

113 overflowY hidden

112 -- backgroundColor (colour.background) [TODO]

114 -- backgroundColor (colour.background) [TODO]

@@ -136,7 +138,7 @@ mkEditor = do

136 unsafeToForeign

138 unsafeToForeign

137 { fontFamily: "Victor Mono"

139 { fontFamily: "Victor Mono"

138 , fontLigatures: true

140 , fontLigatures: true

139− , fontSize: "var(--s0)"

141+ , fontSize: "15px"

140 , lineNumbers: "off"

142 , lineNumbers: "off"

141 , glyphMargin: false

143 , glyphMargin: false

142 , folding: false

144 , folding: false

@@ -144,9 +146,11 @@ mkEditor = do

144 , lineNumbersMinChars: 0

146 , lineNumbersMinChars: 0

145 , minimap: { enabled: false }

147 , minimap: { enabled: false }

146 , scrollBeyondLastLine: false

148 , scrollBeyondLastLine: false

147− , scrollbar: { vertical: "hidden", verticalScrollBarSize: 20 }

148 , hideCursorInOverviewRuler: true

149 , hideCursorInOverviewRuler: true

149 , overviewRulerBorder: false

150 , overviewRulerBorder: false

151+ , renderLineHighlightOnlyWhenFocus: true

152+ , scrollbar: { alwaysConsumeMouseWheel: false }

153+ , renderLineHighlight: "none"

150 }

154 }

151 , language

155 , language

152 -- https://microsoft.github.io/monaco-editor/playground.html#extending-language-services-custom-languages

156 -- https://microsoft.github.io/monaco-editor/playground.html#extending-language-services-custom-languages