afa9355 · rowtype-yoga/psfp

git.iko.soy/rowtype-yoga/psfp

on master help sign in

Use managed Editor

afa9355Mark Eibes6 years ago

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

compare with master

unifiedsplit

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

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

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

27import Yoga.Compiler.Types (Compiler)

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

28+import Yoga.Editor (getValue, mkEditor)

30type Props =

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

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

38 motionButton <- M.custom Block.button

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

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

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

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

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

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

44+ let onChange newValue event = setValue newValue

43 React.useEffectAlways do

45 React.useEffectAlways do

44 mode <- getDarkOrLightMode

46 mode <- getDarkOrLightMode

45 unless (mode == themeMode) do setThemeMode mode

47 unless (mode == themeMode) do setThemeMode mode

46 mempty

48 mempty

47 let

49 let

48 onLoad e = do

50 onLoad e = do

49− setValue initialCode e

50 modifyEditor (const $ Just e)

51 modifyEditor (const $ Just e)

51 compileResult /\ modifyCompileResult <- useState Nothing

52 compileResult /\ modifyCompileResult <- useState Nothing

52 let

53 let

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

56 run = compile *> showResult

57 run = compile *> showResult

57 resetCompileResult = do

58 resetCompileResult = do

58 setCompileResult Nothing

59 setCompileResult Nothing

59− for_ maybeEditor (setValue initialCode)

60+ setValue initialCode

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

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

61 compileResultToString = case _ of

62 compileResultToString = case _ of

62 Nothing -> ""

63 Nothing -> ""

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

65 Just (Left e) -> message e

66 Just (Left e) -> message e

66 setCompileResult = modifyCompileResult <<< const

67 setCompileResult = modifyCompileResult <<< const

67 compile = do

68 compile = do

68− for_ maybeEditor \ed -> do

69+ for_ mbEditor \ed -> do

69 setCompileResult Nothing

70 setCompileResult Nothing

70 code <- getValue ed

71 code <- getValue ed

71 launchAff_ do

72 launchAff_ do

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

83 []

84 []

84 }

85 }

85 editorView ∷ JSX

86 editorView ∷ JSX

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

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

87 buttons ∷ Array JSX -> JSX

88 buttons ∷ Array JSX -> JSX

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

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

89 button =

90 button =

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

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

67 });

68 });

69};

70−exports.getValue = function (editor) {

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

71− return function () {

72− return editor.getValue();

71+ return editor.getValue();

73− };

74};

72};

75exports.colorizeImpl = function (text) {

73exports.colorizeImpl = function (text) {

76 return function (languageId) {

74 return function (languageId) {

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

81 };

79 };

82 };

80 };

83};

81};

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+};

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

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

86exports.defineThemeImpl = function (monacoInstance) {

88exports.defineThemeImpl = function (monacoInstance) {

87 return function (name) {

89 return function (name) {

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

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

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

14import Effect (Effect)

15import Effect.Aff (Aff)

16−import Effect.Aff.Compat (EffectFn1)

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

17import Effect.Class (liftEffect)

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

19import Foreign (Foreign, unsafeToForeign)

20import JSS (jssClasses)

21+import MotionValue (onChange)

21import Prim.Row (class Union)

22import Prim.Row (class Union)

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

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

23import React.Basic.DOM as R

24import React.Basic.DOM as R

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

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

25import React.Basic.Hooks as React

26import React.Basic.Hooks as React

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

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

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

27import Web.DOM (Node)

29import Web.DOM (Node)

28import Web.HTML (HTMLElement)

30import Web.HTML (HTMLElement)

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

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

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

33type EditorProps =

35type EditorProps =

34 ( value ∷ String

36 ( value ∷ String

37+ , onChange ∷ EffectFn2 String Event Unit

35 , language ∷ String

38 , language ∷ String

36 , editorDidMount ∷ EffectFn2 Editor Node Unit

39 , editorDidMount ∷ EffectFn2 Editor Node Unit

37 , editorWillMount ∷ EffectFn1 Monaco Unit

40 , editorWillMount ∷ EffectFn1 Monaco Unit

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

98 { onLoad ∷ Editor -> Effect Unit

101 { onLoad ∷ Editor -> Effect Unit

99 , height ∷ String

102 , height ∷ String

100 , language ∷ String

103 , language ∷ String

104+ , value ∷ String

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

101 }

106 }

102

107

103mkEditor ∷ Effect (ReactComponent Props)

108mkEditor ∷ Effect (ReactComponent Props)

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

115 overflowY hidden

120 overflowY hidden

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

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

117 }

122 }

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

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

119 classes <- useStyles {}

124 classes <- useStyles {}

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

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

121 monacoRef <- React.useRef null

126 monacoRef <- React.useRef null

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

145 element editor

150 element editor

146 { theme: themeName

151 { theme: themeName

147 , height

152 , height

153+ , value

154+ , onChange: mkEffectFn2 onChange

148 , options:

155 , options:

149 unsafeToForeign

156 unsafeToForeign

150 { fontFamily: "Victor Mono"

157 { fontFamily: "Victor Mono"