Merge branch 'dev-fix-input-with-text' of...

Merge branch 'dev-fix-input-with-text' of ssh://gitlab.iscpif.fr:20022/gargantext/purescript-gargantext into dev-merge

dist/styles/sass.css

@@ -532,18 +532,6 @@ li .leaf:hover a.settings {
   color: black;
 }
 
-.code-editor-heading {
-  /* .buttons-right */
-  /*   display: flex */
-  /*   justify-content: flex-end */
-}
-.code-editor-heading .renameable {
-  flex-grow: 2;
-}
-.code-editor-heading .renameable .text {
-  padding-right: 10px;
-}
-
 .code-editor .editor .code-area {
   flex-grow: 1;
   max-height: 200px;

dist/styles/sass.css.map

-{"version":3,"sourceRoot":"","sources":["../../src/sass/_menu.sass","../../src/sass/_context_menu.sass","../../src/sass/_graph.sass","../../src/sass/_login.sass","../../src/sass/_tree.sass","../../src/sass/_code_editor.sass","../../src/sass/_styles.sass","../../src/sass/_range_slider.sass","../../src/sass/_annotation.sass"],"names":[],"mappings":"AAAA;AAEA;AACA;AACA;AACA;AACA;AAEA;EACI;EACA;;;AAEJ;EACI;EACA;EACA;EACA;;;AAEJ;EACE;;;AAEF;AACI;EACA;;;AAEJ;AACI;EACA;;;AAGJ;AACA;EACI;;;AAEJ;EACI;EACA;EACA;EACA;;;AAEJ;EACE;EACA;;;AAEF;EACE;;;AC7CF;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AClBF;EACE;EACA;EACA;;;AAEF;AAkCE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAxCA;EAZA;EACA;EAEA;EAWE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEF;EACE;EACA;;AAGA;EACE;EACA;;AACN;EACE;;AACF;EACE;;AAEF;EApCA;EACA;EAEA;EAmCE;EACA;;AACF;EACE;;AACF;EACE;;AAWF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEJ;EACE;;AAEA;EACE;;AAEJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;ACpFJ;EACE;;;AAOF;EACE;;AACA;EACE;EACA;;;AAEJ;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAGF;EACE;;AAEE;EACE;EACA;;AACA;EACE;;;AAIJ;EACE;EACA;EACA;EACA;;;AAKJ;EACE;EACA;EACA;;;AAGJ;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;;AACF;EACE;EACA;;AACA;EACE;EACA;EACA;EACA;;AACA;EACE;;AACF;EACE;EACA;EACA;EACA;;AACA;EACE;;AACN;EACE;EACA;EACA;EACA;;;AAGN;EACE;EACA;EACA;EACA;EACA;;AAGE;EACE;;;AAEN;EACE;EACA;EACA;EACA;EACA;;AAGE;EACE;;;AAEN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;;AAEJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;;;AAGF;EACE;;;AAEJ;EACI;EACA;;;AAGF;EACE;;;AAEJ;EACE;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;;;ACvKF;EACE;;;AAGA;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAEF;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAER;EACE;;AAEE;EACE;;AACA;EACE;EACA;EACA;EACA;;AACF;EACE;EACA;EACA;EACA;EACA;;AACF;EACE;;AACF;EACE;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACE;;AACF;EACE;;AAGN;EACE;;AACF;EACE;;AACA;EACE;EACA;;AAEE;EACE;EACA;;AACF;EACE;EACA;;AAIR;EACE;;AACF;EACE;;AACA;EACE;EACA;;AAEE;EACE;EACA;;AACF;EACE;EACA;;AACF;EACE;EACA;;AAEV;EACE;;AACF;EACE;;AAEE;EACE;;AACF;EACE;;AACN;EACE;;AAEE;EACE;;;AAGR;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAEE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAEF;EACE;;;AAIF;EACE;;AAEA;EACE;;;AAGN;EACE;;AACF;EACE;;AACF;EACE;;;AC7IJ;AAKE;AACA;AACA;;AANA;EACE;;AACA;EACE;;;AAOF;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EA7CR;EACA;EACA;EACA;EACA;EACA;EACA;EAlBA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAmDM;EACE;EACA;EACA;EACA;EACA;EArDR;EACA;EACA;EACA;EACA;EACA;EACA;EAlBA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AA2DE;EACE;EACA;EACA;EACA;EACA;EACA;;AACF;EACE;EACA;EACA;;AACA;EACE;EACA;;AACF;EACE;EACA;;AACF;EACE;EACA;;AAGE;EACE;;AAEF;EACE;;;AC9FV;EACE;;AACF;EACE;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;AAGE;EACE;EACA;;AAEF;EACE;EACA;;;AAEV;EACE;;AACA;EACE;;AACF;EACE;EACA;EACA;;;AAIA;EACE;;AACA;EACE;EACA;;AACF;EACE;;AACA;EACE;;AACJ;EACE;;;AAER;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;AAGI;EACE;;AACF;EACE;;;AAEN;EACE;EACA;EACA;;;AAIA;EACE;;AACF;EACE;;;ACxEJ;EACE;AACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EAEA;EAEA;;AAEA;EACE;EAEA;EACA;EACA;;;AAGN;EACE;;;ACzBJ;EACE;;AAEA;EANE;EACA;;AAQF;EAbE;EACA;;AAeF;EAhBE;EACA;;AAkBF;EAnBE;EACA;;AAqBF;EA1BE;EACA,kBALyB;;AAiC3B;EA7BE;EACA,kBANqB;;AAqCvB;EAhCE;EACA,kBAJoB;;;AAuCtB;EApCE;EACA,kBALyB;;AA2C3B;EAvCE;EACA,kBANqB;;AA+CvB;EA1CE;EACA,kBAJoB","file":"sass.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../../src/sass/_menu.sass","../../src/sass/_context_menu.sass","../../src/sass/_graph.sass","../../src/sass/_login.sass","../../src/sass/_tree.sass","../../src/sass/_code_editor.sass","../../src/sass/_styles.sass","../../src/sass/_range_slider.sass","../../src/sass/_annotation.sass"],"names":[],"mappings":"AAAA;AAEA;AACA;AACA;AACA;AACA;AAEA;EACI;EACA;;;AAEJ;EACI;EACA;EACA;EACA;;;AAEJ;EACE;;;AAEF;AACI;EACA;;;AAEJ;AACI;EACA;;;AAGJ;AACA;EACI;;;AAEJ;EACI;EACA;EACA;EACA;;;AAEJ;EACE;EACA;;;AAEF;EACE;;;AC7CF;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AClBF;EACE;EACA;EACA;;;AAEF;AAkCE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAxCA;EAZA;EACA;EAEA;EAWE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEF;EACE;EACA;;AAGA;EACE;EACA;;AACN;EACE;;AACF;EACE;;AAEF;EApCA;EACA;EAEA;EAmCE;EACA;;AACF;EACE;;AACF;EACE;;AAWF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEJ;EACE;;AAEA;EACE;;AAEJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;ACpFJ;EACE;;;AAOF;EACE;;AACA;EACE;EACA;;;AAEJ;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAGF;EACE;;AAEE;EACE;EACA;;AACA;EACE;;;AAIJ;EACE;EACA;EACA;EACA;;;AAKJ;EACE;EACA;EACA;;;AAGJ;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;;AACF;EACE;EACA;;AACA;EACE;EACA;EACA;EACA;;AACA;EACE;;AACF;EACE;EACA;EACA;EACA;;AACA;EACE;;AACN;EACE;EACA;EACA;EACA;;;AAGN;EACE;EACA;EACA;EACA;EACA;;AAGE;EACE;;;AAEN;EACE;EACA;EACA;EACA;EACA;;AAGE;EACE;;;AAEN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;;AAEJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;;;AAGF;EACE;;;AAEJ;EACI;EACA;;;AAGF;EACE;;;AAEJ;EACE;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;;;ACvKF;EACE;;;AAGA;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAEF;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAER;EACE;;AAEE;EACE;;AACA;EACE;EACA;EACA;EACA;;AACF;EACE;EACA;EACA;EACA;EACA;;AACF;EACE;;AACF;EACE;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACE;;AACF;EACE;;AAGN;EACE;;AACF;EACE;;AACA;EACE;EACA;;AAEE;EACE;EACA;;AACF;EACE;EACA;;AAIR;EACE;;AACF;EACE;;AACA;EACE;EACA;;AAEE;EACE;EACA;;AACF;EACE;EACA;;AACF;EACE;EACA;;AAEV;EACE;;AACF;EACE;;AAEE;EACE;;AACF;EACE;;AACN;EACE;;AAEE;EACE;;;AAGR;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAEE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAEF;EACE;;;AAIF;EACE;;AAEA;EACE;;;AAGN;EACE;;AACF;EACE;;AACF;EACE;;;AC3IA;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EApCR;EACA;EACA;EACA;EACA;EACA;EACA;EAlBA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AA0CM;EACE;EACA;EACA;EACA;EACA;EA5CR;EACA;EACA;EACA;EACA;EACA;EACA;EAlBA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAkDE;EACE;EACA;EACA;EACA;EACA;EACA;;AACF;EACE;EACA;EACA;;AACA;EACE;EACA;;AACF;EACE;EACA;;AACF;EACE;EACA;;AAGE;EACE;;AAEF;EACE;;;ACrFV;EACE;;AACF;EACE;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;AAGE;EACE;EACA;;AAEF;EACE;EACA;;;AAEV;EACE;;AACA;EACE;;AACF;EACE;EACA;EACA;;;AAIA;EACE;;AACA;EACE;EACA;;AACF;EACE;;AACA;EACE;;AACJ;EACE;;;AAER;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;AAGI;EACE;;AACF;EACE;;;AAEN;EACE;EACA;EACA;;;AAIA;EACE;;AACF;EACE;;;ACxEJ;EACE;AACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EAEA;EAEA;;AAEA;EACE;EAEA;EACA;EACA;;;AAGN;EACE;;;ACzBJ;EACE;;AAEA;EANE;EACA;;AAQF;EAbE;EACA;;AAeF;EAhBE;EACA;;AAkBF;EAnBE;EACA;;AAqBF;EA1BE;EACA,kBALyB;;AAiC3B;EA7BE;EACA,kBANqB;;AAqCvB;EAhCE;EACA,kBAJoB;;;AAuCtB;EApCE;EACA,kBALyB;;AA2C3B;EAvCE;EACA,kBANqB;;AA+CvB;EA1CE;EACA,kBAJoB","file":"sass.css"}
\ No newline at end of file

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

@@ -20,6 +20,7 @@ import Gargantext.Types  as GT
 import Gargantext.Types (NodeType(..))
 import Gargantext.Utils.Reactix as R2
 
+thisModule :: String
 thisModule = "Gargantext.Components.Forest.Tree.Node.Action.Add"
 
 ----------------------------------------------------------------------
@@ -83,7 +84,8 @@ addNodeView p@{ dispatch, nodeType, nodeTypes } = R.createElement el p []
                                 defaultNt = (fromMaybe Error $ head nodeTypes)
           maybeEdit   = [ if edit
                           then inputWithEnter {
-                              onEnter: \_ -> launchAff_ $ dispatch (AddNode name' nt')
+                              onBlur: \val -> setNodeName $ const val
+                            , onEnter: \_ -> launchAff_ $ dispatch (AddNode name' nt')
                             , onValueChanged: \val -> setNodeName $ const val
                             , autoFocus: true
                             , className: "form-control"

src/Gargantext/Components/Forest/Tree/Node/Action/Search/SearchField.purs

@@ -346,7 +346,8 @@ searchInputCpt = R.hooksComponentWithModule thisModule "searchInput" cpt
       valueRef <- R.useRef term
 
       pure $ H.div { className: "" } [
-        inputWithEnter { onEnter: onEnter valueRef setSearch
+        inputWithEnter { onBlur: onBlur valueRef setSearch
+                       , onEnter: onEnter valueRef setSearch
                        , onValueChanged: onValueChanged valueRef
                        , autoFocus: false
                        , className: "form-control"
@@ -364,6 +365,9 @@ searchInputCpt = R.hooksComponentWithModule thisModule "searchInput" cpt
       --             , type: "text"
       --             }
       --   ]
+    onBlur valueRef setSearch value = do
+      R.setRef valueRef value
+      setSearch $ _ { term = value }
     onEnter valueRef setSearch _ = do
       setSearch $ _ { term = R.readRef valueRef }
 

src/Gargantext/Components/Forest/Tree/Node/Tools.purs

@@ -82,7 +82,8 @@ textInputBoxCpt = R.hooksComponentWithModule thisModule "textInputBox" cpt
         textInput renameNodeNameRef =
           H.div { className: "col-8" }
             [ inputWithEnter {
-                 onEnter: submit renameNodeNameRef
+                 onBlur: R.setRef renameNodeNameRef
+               , onEnter: submit renameNodeNameRef
                , onValueChanged: R.setRef renameNodeNameRef
                , autoFocus: true
                , className: "form-control"

src/Gargantext/Components/InputWithEnter.purs

@@ -11,7 +11,8 @@ thisModule :: String
 thisModule = "Gargantext.Components.InputWithEnter"
 
 type Props a = (
-    onEnter :: Unit -> Effect Unit
+    onBlur :: String -> Effect Unit
+  , onEnter :: Unit -> Effect Unit
   , onValueChanged :: String -> Effect Unit
 
   , autoFocus :: Boolean
@@ -27,9 +28,10 @@ inputWithEnter props = R.createElement inputWithEnterCpt props []
 inputWithEnterCpt :: forall a. R.Component (Props a)
 inputWithEnterCpt = R.hooksComponentWithModule thisModule "inputWithEnter" cpt
   where
-    cpt props@{ onEnter, onValueChanged
+    cpt props@{ onBlur, onEnter, onValueChanged
               , autoFocus, className, defaultValue, placeholder } _ = do
-      pure $ H.input { on: { input: onInput
+      pure $ H.input { on: { blur: onBlur'
+                           , input: onInput
                            , keyPress: onKeyPress }
                      , autoFocus
                      , className
@@ -38,6 +40,7 @@ inputWithEnterCpt = R.hooksComponentWithModule thisModule "inputWithEnter" cpt
                      , type: props.type }
 
       where
+        onBlur' e = onBlur $ R.unsafeEventValue e
         onInput e = onValueChanged $ R.unsafeEventValue e
 
         onKeyPress e = do

src/Gargantext/Components/Nodes/Annuaire/User.purs

@@ -130,6 +130,7 @@ contactInfoItemCpt = R.hooksComponentWithModule thisModule "contactInfoItem" cpt
                 autoFocus: true
               , className: "form-control"
               , defaultValue: R.readRef valueRef
+              , onBlur: R.setRef valueRef
               , onEnter: onClick
               , onValueChanged: R.setRef valueRef
               , placeholder

src/Gargantext/Components/Nodes/Annuaire/User/Contact.purs

@@ -130,6 +130,7 @@ contactInfoItemCpt = R.hooksComponentWithModule thisModule "contactInfoItem" cpt
                 autoFocus: true
               , className: "form-control"
               , defaultValue: R.readRef valueRef
+              , onBlur: R.setRef valueRef
               , onEnter: onClick
               , onValueChanged: R.setRef valueRef
               , placeholder

src/Gargantext/Components/Nodes/Corpus.purs

@@ -218,7 +218,14 @@ fieldCodeEditorWrapperCpt = R.hooksComponentWithModule thisModule "fieldCodeEdit
         H.div { className: "card-header" } [
           H.div { className: "code-editor-heading row" } [
               H.div { className: "col-4" } [
-                renameable {onRename, text: name}
+                 inputWithEnter { onBlur: onRename
+                                , onEnter: \_ -> pure unit
+                                , onValueChanged: onRename
+                                , autoFocus: false
+                                , className: "form-control"
+                                , defaultValue: name
+                                , placeholder: "Enter file name"
+                                , type: "text" }
               ]
             , H.div { className: "col-7" } []
             , H.div { className: "buttons-right col-1" } ([
@@ -250,80 +257,6 @@ fieldCodeEditorWrapperCpt = R.hooksComponentWithModule thisModule "fieldCodeEdit
             H.span { className: "fa fa-arrow-up" } [  ]
             ]
 
-type RenameableProps =
-  (
-    onRename :: String -> Effect Unit
-  , text :: String
-  )
-
-renameable :: Record RenameableProps -> R.Element
-renameable props = R.createElement renameableCpt props []
-
-renameableCpt :: R.Component RenameableProps
-renameableCpt = R.hooksComponentWithModule thisModule "renameableCpt" cpt
-  where
-    cpt {onRename, text} _ = do
-      isEditing <- R.useState' false
-      state <- R.useState' text
-      textRef <- R.useRef text
-
-      -- handle props change of text
-      R.useEffect1' text $ do
-        if R.readRef textRef == text then
-          pure unit
-        else do
-          R.setRef textRef text
-          snd state $ const text
-
-      pure $ H.div { className: "renameable" } [
-        renameableText { isEditing, onRename, state }
-      ]
-
-type RenameableTextProps =
-  (
-    isEditing :: R.State Boolean
-  , onRename :: String -> Effect Unit
-  , state :: R.State String
-  )
-
-renameableText :: Record RenameableTextProps -> R.Element
-renameableText props = R.createElement renameableTextCpt props []
-
-renameableTextCpt :: R.Component RenameableTextProps
-renameableTextCpt = R.hooksComponentWithModule thisModule "renameableTextCpt" cpt
-  where
-    cpt {isEditing: (false /\ setIsEditing), state: (text /\ _)} _ = do
-      pure $ H.div { className: "input-group" }
-        [ H.input { className: "form-control"
-                  , defaultValue: text
-                  , disabled: 1
-                  , type: "text" }
-        , H.div { className: "btn input-group-append"
-                , on: { click: \_ -> setIsEditing $ const true } }
-          [ H.span { className: "fa fa-pencil" } []
-          ]
-        ]
-    cpt {isEditing: (true /\ setIsEditing), onRename, state: (text /\ setText)} _ = do
-      pure $ H.div { className: "input-group" }
-        [ inputWithEnter {
-            autoFocus: false
-          , className: "form-control text"
-          , defaultValue: text
-          , onEnter: submit
-          , onValueChanged: setText <<< const
-          , placeholder: ""
-          , type: "text"
-          }
-        , H.div { className: "btn input-group-append"
-                , on: { click: submit } }
-          [ H.span { className: "fa fa-floppy-o" } []
-          ]
-        ]
-      where
-        submit _ = do
-          setIsEditing $ const false
-          onRename text
-
 fieldCodeEditor :: Record FieldCodeEditorProps -> R.Element
 fieldCodeEditor props = R.createElement fieldCodeEditorCpt props []
 

src/Gargantext/Components/Renameable.purs

+module Gargantext.Components.Renameable where
+
+import Data.Tuple (Tuple(..), fst, snd)
+import Data.Tuple.Nested ((/\))
+import Effect (Effect)
+import Reactix as R
+import Reactix.DOM.HTML as H
+
+import Gargantext.Prelude
+
+import Gargantext.Components.InputWithEnter (inputWithEnter)
+import Gargantext.Utils.Reactix as R2
+
+
+thisModule :: String
+thisModule = "Gargantext.Components.Renameable"
+
+type RenameableProps =
+  (
+    onRename :: String -> Effect Unit
+  , text :: String
+  )
+
+renameable :: Record RenameableProps -> R.Element
+renameable props = R.createElement renameableCpt props []
+
+renameableCpt :: R.Component RenameableProps
+renameableCpt = R.hooksComponentWithModule thisModule "renameableCpt" cpt
+  where
+    cpt {onRename, text} _ = do
+      isEditing <- R.useState' false
+      state <- R.useState' text
+      textRef <- R.useRef text
+
+      -- handle props change of text
+      R.useEffect1' text $ do
+        if R.readRef textRef == text then
+          pure unit
+        else do
+          R.setRef textRef text
+          snd state $ const text
+
+      pure $ H.div { className: "renameable" } [
+        renameableText { isEditing, onRename, state }
+      ]
+
+type RenameableTextProps =
+  (
+    isEditing :: R.State Boolean
+  , onRename :: String -> Effect Unit
+  , state :: R.State String
+  )
+
+renameableText :: Record RenameableTextProps -> R.Element
+renameableText props = R.createElement renameableTextCpt props []
+
+renameableTextCpt :: R.Component RenameableTextProps
+renameableTextCpt = R.hooksComponentWithModule thisModule "renameableTextCpt" cpt
+  where
+    cpt {isEditing: (false /\ setIsEditing), state: (text /\ _)} _ = do
+      pure $ H.div { className: "input-group" }
+        [ H.input { className: "form-control"
+                  , defaultValue: text
+                  , disabled: 1
+                  , type: "text" }
+        , H.div { className: "btn input-group-append"
+                , on: { click: \_ -> setIsEditing $ const true } }
+          [ H.span { className: "fa fa-pencil" } []
+          ]
+        ]
+    cpt {isEditing: (true /\ setIsEditing), onRename, state: (text /\ setText)} _ = do
+      pure $ H.div { className: "input-group" }
+        [ inputWithEnter {
+            autoFocus: false
+          , className: "form-control text"
+          , defaultValue: text
+          , onBlur: setText <<< const
+          , onEnter: submit
+          , onValueChanged: setText <<< const
+          , placeholder: ""
+          , type: "text"
+          }
+        , H.div { className: "btn input-group-append"
+                , on: { click: submit } }
+          [ H.span { className: "fa fa-floppy-o" } []
+          ]
+        ]
+      where
+        submit _ = do
+          setIsEditing $ const false
+          onRename text

src/sass/_code_editor.sass

@@ -19,15 +19,6 @@
   white-space: pre-wrap
   word-break: keep-all
 
-.code-editor-heading
-  .renameable
-    flex-grow: 2
-    .text
-      padding-right: 10px
-  /* .buttons-right
-  /*   display: flex
-  /*   justify-content: flex-end
-
 .code-editor
   .editor
     .code-area