git.iko.soy/rowtype-yoga/psfp
on 6828f8e help sign in
rowtype-yoga/psfp/src/Monaco/Editor.purs
107 lines 3.1 kB history raw
1module Editor where
3import Prelude
5import Control.Promise (Promise)
6import Control.Promise as Promise
7import Data.Foldable (for_)
8import Data.Maybe (Maybe(..))
9import Data.Nullable (notNull, null)
10import Data.Tuple.Nested ((/\))
11import Debug.Trace (spy)
12import Effect (Effect)
13import Effect.Aff (Aff)
14import Effect.Class (liftEffect)
15import Effect.Class.Console (warn)
16import Effect.Uncurried (EffectFn1, EffectFn2, mkEffectFn1, mkEffectFn2, runEffectFn1)
17import Foreign (Foreign)
18import Prim.Row (class Union)
19import React.Basic (JSX, ReactComponent, element, fragment)
20import React.Basic.DOM as R
21import React.Basic.Events (handler_)
22import React.Basic.Hooks (component, readRefMaybe, useRef, useState, writeRef)
23import React.Basic.Hooks as React
24import React.Basic.Hooks.Aff (useAff)
25import Simple.JSON as Foreign
26import Web.DOM (Node)
28type EditorProps
29 = ( value ∷ String
30 , language ∷ String
31 , editorDidMount ∷ EffectFn2 Node Editor Unit
32 , theme ∷ String
33 , line ∷ Number
34 , width ∷ String
35 , height ∷ String
36 , loading ∷ JSX
37 , options ∷ Foreign
38 )
40foreign import editorImpl ∷ ∀ attrs. ReactComponent { | attrs }
42foreign import initMonacoImpl ∷ Effect (Promise Monaco)
44foreign import defineThemeImpl ∷ Monaco -> String -> MonacoTheme -> Effect Unit
46foreign import setThemeImpl ∷ Monaco -> String -> Effect Unit
48foreign import nightOwlTheme ∷ MonacoTheme
50foreign import getValue ∷ Editor -> Effect String
52foreign import data Monaco ∷ Type
54foreign import data Editor ∷ Type
56foreign import data MonacoTheme ∷ Type
58editor ∷
59 ∀ attrs attrs_. Union attrs attrs_ EditorProps => ReactComponent { | attrs }
60editor = editorImpl
62initMonaco ∷ Aff Monaco
63initMonaco = liftEffect initMonacoImpl >>= Promise.toAff
65themeName = "NightOwl"
67mkEditor ∷ Effect (ReactComponent {})
68mkEditor = do
69 component "Editor" \{} -> React.do
70 ref <- useRef null
71 useAff unit
72 $ do
73 monaco <- initMonaco
74 defineThemeImpl monaco themeName nightOwlTheme # liftEffect
75 setThemeImpl monaco themeName # liftEffect
76 pure
77 $ fragment
78 [ R.button { onClick: handler_ do
79 maybeEditor <- readRefMaybe ref
80 case maybeEditor of
81 Nothing -> pure unit
82 Just ed -> do
83 v <- getValue ed
84 warn $ "Value: " <> v
85 }
86 , element editor
87 { theme: themeName
88 , options:
89 Foreign.write
90 { fontFamily: "PragmataPro"
91 , fontLigatures: true
92 , fontSize: "16pt"
93 , lineNumbers: "off"
94 , glyphMargin: false
95 , folding: false
96 , lineDecorationsWidth: 0
97 , lineNumbersMinChars: 0
98 , minimap: { enabled: false }
99 }
100 , language: "haskell"
101 -- [TODO] :(
102 -- https://microsoft.github.io/monaco-editor/playground.html#extending-language-services-custom-languages
103 , editorDidMount:
104 mkEffectFn2 \node editor ->
105 (editor # notNull # writeRef ref)
106 }
107 ]