[Action share] Implement clipboard functionality for sharing URLs

src/Gargantext/Components/Forest/Tree/Node/Action/Share.purs

@@ -24,6 +24,7 @@ import Gargantext.Types (ID, NodeID, NodeType)
 import Gargantext.Types as GT
 import Gargantext.Utils.Reactix as R2
 import Gargantext.Utils.SimpleJSON as GUSJ
+import Gargantext.Utils.Clipboard (clipboard)
 import Reactix as R
 import Reactix.DOM.HTML as H
 import Simple.JSON as JSON
@@ -204,7 +205,19 @@ shareURLInnercpt :: R.Component (url :: String)
 shareURLInnercpt = here.component "shareURLInner" cpt
   where
   cpt { url } _ = do
-    pure $ Tools.panel { mError: Nothing } [ H.div {} [ H.text url ] ]
+    R.useEffect' $ clipboard ".copy" url "portal"
+
+    pure $ Tools.panel { mError: Nothing }
+      [ H.div {}
+          [ H.text url
+          , B.iconButton
+              { name: "clone"
+              , title: "Copy to clipboard"
+              , className: "copy"
+              , callback: \_ -> pure unit
+              }
+          ]
+      ]
 
 loadUrl :: { session :: Session, id :: NodeID, nodeType :: NodeType } -> AffRESTError String
 loadUrl { session, id, nodeType } = get session $ GR.ShareURL id nodeType

src/Gargantext/Utils/Clipboard.js

+import ClipboardJS from "clipboard";
+
+export function _clipboard(el, url, modal_id) {
+    return new ClipboardJS(el, {
+        container: document.getElementById(modal_id),
+        text: function(trigger) {
+            return url
+        }
+    });
+}
\ No newline at end of file

src/Gargantext/Utils/Clipboard.purs

+module Gargantext.Utils.Clipboard where
+
+import Effect (Effect)
+import Effect.Uncurried (EffectFn3, runEffectFn3)
+import Gargantext.Prelude
+
+foreign import _clipboard :: EffectFn3 String String String Unit
+
+clipboard :: String -> String -> String -> Effect Unit
+clipboard = runEffectFn3 _clipboard
\ No newline at end of file