From 468586ffaa43b4fad582cf3a32358650e877184b Mon Sep 17 00:00:00 2001
From: Florian Schroedl <flo.schroedl@gmail.com>
Date: Wed, 4 May 2022 17:00:00 +0200
Subject: [PATCH] Add fragment

---
 src/js/bindings/react/react_dom.nim |  3 +++
 src/js/example/sandbox.nim          | 20 +++++++++++---------
 2 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/src/js/bindings/react/react_dom.nim b/src/js/bindings/react/react_dom.nim
index b1d9f25..95aacab 100644
--- a/src/js/bindings/react/react_dom.nim
+++ b/src/js/bindings/react/react_dom.nim
@@ -15,12 +15,15 @@ template tocstring(x: typed): auto =
   when x is string: cstring(x)
   else: x
 
+
 {.push importcpp.}
 proc createElement*(react: ReactGlobal, tag: cstring, props: Attrs): ReactNode
 proc createElement*(react: ReactGlobal, tag: cstring, props: Attrs,
     n1: auto): ReactNode
 {.pop.}
 
+proc `<>`*(x: string): ReactNode {.importjs: "React.createElement(React.Fragment, null, #)".}
+
 template makeDomElement(x: untyped, name: string = "") =
   const tag {.gensym.} = if name == "": cstring(idString(x)) else: name
   const NIL: Attrs = nil
diff --git a/src/js/example/sandbox.nim b/src/js/example/sandbox.nim
index 72f8ad0..cd18144 100644
--- a/src/js/example/sandbox.nim
+++ b/src/js/example/sandbox.nim
@@ -1,9 +1,11 @@
 import jsconsole, jsffi, strutils, sequtils, sugar
 import sugar
-import ../bindings/react/react_dom,
-       ../bindings/react/react_types,
-       ../bindings/react/react_styles,
-       ../bindings/react/react_hooks
+import
+  ../bindings/react/react_globals,
+  ../bindings/react/react_dom,
+  ../bindings/react/react_types,
+  ../bindings/react/react_styles,
+  ../bindings/react/react_hooks
 import sequtils
 import options
 import strformat
@@ -27,12 +29,11 @@ proc renderItems(
 proc toMarkUp(x: OrgInlineBlock): ReactNode =
   console.log(x)
   case x.kind:
-    of orgRawText:            p(Attrs{}, x.content)
-    else: p(Attrs{}, "Unmatched")
+    of orgRawText:            `<>`("Foo")
     # of orgText:               "Text"
 
     # # Formating
-    # of orgBoldText:           "Text (Bold)"
+    of orgBoldText:           b(Attrs{}, x.content)
     # of orgItalicText:         "Text (Italic)"
     # of orgUnderlineText:      "Text (Underline)"
     # of orgVerbatimText:       "Text (Verbatim)"
@@ -41,19 +42,20 @@ proc toMarkUp(x: OrgInlineBlock): ReactNode =
 
     # # Links
     # of orgLink: "Link"
+    else: p(Attrs{}, "Unmatched")
 
 proc makeItems(x: string): seq[ReactNode] =
   makeOrg(x)
   .fold(
     (err) => @[`div`(Attrs{}, &"Errors: {err}")],
-    (xs: OrgBuilder) => xs.tree.map((x: OrgBlock) => `div`(Attrs{}, x.headlineContent.map(toMarkUp))),
+    (xs: OrgBuilder) => xs.tree.map((x: OrgBlock) => `p`(Attrs{}, x.headlineContent.map(x => toMarkUp(x)))),
   )
 
 proc makeTopLevel(): ReactNode {.exportc.} =
   let text = myUseState[cstring]("""* TODO Level 1
 Some stuff inbetween
 
-** DONE Level 2""")
+** DONE Level 2 **bold** stuff""")
 
   let val = text.getter
   let orgItems = makeItems($val)