[Markdown] simple editor works now, styling still lacking

src/Gargantext/Components/MarkdownEditor.purs

@@ -3,8 +3,13 @@ module Gargantext.Components.MarkdownEditor where
 import Data.Either (either, Either(..))
 import Data.Maybe (Maybe(..))
 import Data.Nullable (Nullable, null, toMaybe)
-import FFI.Simple ((.=))
-import Prelude (($), (>>>), bind, discard, identity, pure, unit)
+import Data.Tuple (fst)
+import Data.Tuple.Nested ((/\))
+import DOM.Simple.Console (log2)
+import DOM.Simple.Types (Element)
+import Effect (Effect)
+import FFI.Simple ((.=), delay)
+import Prelude (($), (>>>), Unit, bind, const, discard, identity, pure, unit)
 import Reactix as R
 import Reactix.DOM.HTML as H
 import Text.Markdown.SlamDown.Parser (parseMd)
@@ -12,6 +17,8 @@ import Text.Markdown.SlamDown.Smolder as MD
 import Text.Markdown.SlamDown.Syntax (SlamDownP(..))
 import Text.Smolder.Renderer.String (render)
 
+import Gargantext.Utils.Reactix as R2
+
 type Props =
   ( md :: String
   , nodeId :: Int
@@ -33,13 +40,27 @@ markdownEditorCpt = R.hooksComponent "G.C.MarkdownEditor" cpt
   where
     cpt {md, nodeId} _ = do
       ref <- R.useRef null
+      editedMd <- R.useState' md
 
-      R.useEffect1' md $ do
+      -- Note: delay is necessary here, otherwise initially the HTML won't get
+      -- rendered (mDiv is still null)
+      R.useEffect $ delay unit $ \_ -> do
         let mDiv = toMaybe $ R.readRef ref
         case mDiv of
-          Nothing -> pure unit
+          Nothing -> pure $ pure unit
           Just d -> do
-            _ <- pure $ ("innerHTML" .= d) $ compileMd md
-            pure unit
+            _ <- pure $ (d .= "innerHTML") $ compileMd $ fst editedMd
+            pure $ pure unit
+
+      pure $ H.div { className: "markdown-editor" } [
+        H.div { className: "md" } [
+          H.textarea { on: {change: onChange ref editedMd} } [ H.text $ fst editedMd ]
+        ]
+      , H.div { ref, className: "html" } []
+      ]
 
-      pure $ H.div { ref } []
+    onChange :: forall e. R.Ref (Nullable Element) -> R.State String -> e -> Effect Unit
+    onChange ref (_ /\ setEditedMd) e = do
+      setEditedMd $ const value
+      where
+        value = R2.unsafeEventValue e