[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 (modalClipboard)
 import Reactix as R
 import Reactix.DOM.HTML as H
 import Simple.JSON as JSON
@@ -212,12 +213,23 @@ shareURLInnercpt :: R.Component (url :: String)
 shareURLInnercpt = here.component "shareURLInner" cpt
   where
   cpt { url } _ = do
+    R.useEffect' $ modalClipboard ".copy" url
+
     pure $ Tools.panelNoFooter
       { mError: Nothing
       , iconName: "share-alt"
       , textTitle: "Share the node (URL)"
       }
-      [ H.div {} [ H.text url ] ]
+      [ 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 _modalClipboard(el, url) {
+    modal_id = document.getElementsByClassName("b-modal modal show")[0].id
+
+    return new ClipboardJS(el, {
+        container: document.getElementById(modal_id),
+        text: function(trigger) {
+            return url
+        }
+    });
+}

src/Gargantext/Utils/Clipboard.purs

+module Gargantext.Utils.Clipboard where
+
+import Effect (Effect)
+import Effect.Uncurried (EffectFn2, runEffectFn2)
+import Gargantext.Prelude
+
+foreign import _modalClipboard :: EffectFn2 String String Unit
+
+modalClipboard :: String -> String -> Effect Unit
+modalClipboard = runEffectFn2 _modalClipboard