afa9355 · rowtype-yoga/psfp

git.iko.soy/rowtype-yoga/psfp

Use managed Editor

commitafa9355344aa34c95163b52b2badca4637b1e827 authorMark Eibes <mark.eibes@gmail.com> dateMon 11 Jan 2021, 09:39 (6 years ago) parent6dce5ac

3 files changed+23−13

compare with master

unifiedsplit

components/src/Yoga/CompileEditor/Component.purs+7−6 components/src/Yoga/Monaco/Editor.js+7−5 components/src/Yoga/Monaco/Editor.purs+9−2

components/src/Yoga/CompileEditor/Component.purs+7−6

@@ -25,7 +25,7 @@ import Yoga.Block as Block

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

2626import Yoga.Block.Container.Style (colour, getDarkOrLightMode)

2727import Yoga.Compiler.Types (Compiler)

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

28+import Yoga.Editor (getValue, mkEditor)

2929

3030type Props =

3131 { initialCode ∷ String, height ∷ String, language ∷ String }

@@ -38,15 +38,16 @@ mkCompileEditor { compileAndRun } = do

3838 motionButton <- M.custom Block.button

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

4040 activeIndex /\ updateActiveIndex <- React.useState' 0

41− maybeEditor /\ modifyEditor <- React.useState Nothing

41+ mbEditor /\ modifyEditor <- React.useState Nothing

4242 themeMode /\ setThemeMode <- React.useState' Nothing

43+ value /\ setValue <- React.useState' initialCode

44+ let onChange newValue event = setValue newValue

4345 React.useEffectAlways do

4446 mode <- getDarkOrLightMode

4547 unless (mode == themeMode) do setThemeMode mode

4648 mempty

4749 let

4850 onLoad e = do

49− setValue initialCode e

5051 modifyEditor (const $ Just e)

5152 compileResult /\ modifyCompileResult <- useState Nothing

5253 let

@@ -56,7 +57,7 @@ mkCompileEditor { compileAndRun } = do

5657 run = compile *> showResult

5758 resetCompileResult = do

5859 setCompileResult Nothing

59− for_ maybeEditor (setValue initialCode)

60+ setValue initialCode

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

6162 compileResultToString = case _ of

6263 Nothing -> ""

@@ -65,7 +66,7 @@ mkCompileEditor { compileAndRun } = do

6566 Just (Left e) -> message e

6667 setCompileResult = modifyCompileResult <<< const

6768 compile = do

68− for_ maybeEditor \ed -> do

69+ for_ mbEditor \ed -> do

6970 setCompileResult Nothing

7071 code <- getValue ed

7172 launchAff_ do

@@ -83,7 +84,7 @@ mkCompileEditor { compileAndRun } = do

8384 []

8485 }

8586 editorView ∷ JSX

86− editorView = editor </> { onLoad, height, language }

87+ editorView = editor </> { onLoad, height, language, value, onChange }

8788 buttons ∷ Array JSX -> JSX

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

8990 button =

components/src/Yoga/Monaco/Editor.js+7−5

@@ -67,10 +67,8 @@ exports.monacoEditorImpl = function () {

6767 });

6868 });

6969};

70−exports.getValue = function (editor) {

71− return function () {

72− return editor.getValue();

73− };

70+exports.getValue = (editor) => () => {

71+ return editor.getValue();

7472};

7573exports.colorizeImpl = function (text) {

7674 return function (languageId) {

@@ -81,7 +79,11 @@ exports.colorizeImpl = function (text) {

8179 };

8280 };

8381};

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

82+exports.setValue = (value) => (editor) => () => {

83+ console.log("Value len", value.length)

84+ editor.setValue(value)

85+ console.log("Value len after", editor.getValue().length)

86+};

8587exports.layout = (editor) => () => editor.layout()

8688exports.defineThemeImpl = function (monacoInstance) {

8789 return function (name) {

components/src/Yoga/Monaco/Editor.purs+9−2

@@ -13,17 +13,19 @@ import Data.Time.Duration (Seconds(..))

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

1414import Effect (Effect)

1515import Effect.Aff (Aff)

16−import Effect.Aff.Compat (EffectFn1)

16+import Effect.Aff.Compat (EffectFn1, EffectFn2, mkEffectFn2)

1717import Effect.Class (liftEffect)

1818import Effect.Uncurried (EffectFn2, mkEffectFn1, mkEffectFn2)

1919import Foreign (Foreign, unsafeToForeign)

2020import JSS (jssClasses)

21+import MotionValue (onChange)

2122import Prim.Row (class Union)

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

2324import React.Basic.DOM as R

2425import React.Basic.Hooks (reactComponent, useEffect, useEffectAlways, useState)

2526import React.Basic.Hooks as React

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

28+import Test.Spec.Runner.Event (Event)

2729import Web.DOM (Node)

2830import Web.HTML (HTMLElement)

2931import Yoga.Block.Container.Style (DarkOrLightMode(..), getDarkOrLightMode)

@@ -32,6 +34,7 @@ import Yoga.Theme.Styles (makeStylesJSS)

3234

3335type EditorProps =

3436 ( value ∷ String

37+ , onChange ∷ EffectFn2 String Event Unit

3538 , language ∷ String

3639 , editorDidMount ∷ EffectFn2 Editor Node Unit

3740 , editorWillMount ∷ EffectFn1 Monaco Unit

@@ -98,6 +101,8 @@ type Props =

98101 { onLoad ∷ Editor -> Effect Unit

99102 , height ∷ String

100103 , language ∷ String

104+ , value ∷ String

105+ , onChange ∷ String -> Event -> Effect Unit

101106 }

102107

103108mkEditor ∷ Effect (ReactComponent Props)

@@ -115,7 +120,7 @@ mkEditor = do

115120 overflowY hidden

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

117122 }

118− reactComponent "Editor" \{ onLoad, height, language } -> React.do

123+ reactComponent "Editor" \{ onChange, onLoad, height, language, value } -> React.do

119124 classes <- useStyles {}

120125 mbEditorComponent /\ setEditorComponent <- React.useState' Nothing

121126 monacoRef <- React.useRef null

@@ -145,6 +150,8 @@ mkEditor = do

145150 element editor

146151 { theme: themeName

147152 , height

153+ , value

154+ , onChange: mkEffectFn2 onChange

148155 , options:

149156 unsafeToForeign

150157 { fontFamily: "Victor Mono"