JSFiddle - React, Tailwind, and code Playground

by Dug Sohn

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<br>


<div class="container">
  <small class="helper-text">Item Name Field: This is used to name the the link to the submitted form</small>
  <br>

  <div class="row">
    <div class="col-md-3">
      <h2>
        <sup><i class="fa fa-question-circle"></i></sup> <span contenteditable="true" class="editable">Item Name:</span></h2>
    </div>
    <div class="col-md-8 preview">
      <span class="ybx-name-default">
      <input type="text" class="form-control" value="User Entered Text">
      <div class="help-block">
      <small contenteditable="true" class="editable">Click to add help text which display in edit mode</small>
      </div></span>
      <span class="ybx-name-sel-choice">
          </span>
      <span class="ybx-name-sel-options" style="display:none">
      <div class="alert alert-info">
      Options
      </div>
          </span>

    </div>

  </div>
  <div id="panel">Present config options?</div>

  <hr>
  <span class="presets">
  <small>Or Choose from Examples Below</small>
  <br/>
  <div class="row">
    <div class="col-md-6">
      <div class="row">
        <div class="col-sm-2">

          <button class="btn btn-primary btn-sm">Select</button>
        </div>
        <div calss="col-sm-10">
          <span class="ybx-name-sel">
          <b class="example">

2018-01-01 - <span class="form-control">User's text</span></b>
  <small>Date stamp with Custom Text</small>
  </span>
</div>

</div>

</div>
<div class="col-md-6">
  <div class="row">
    <div class="col-sm-2">

     ...

CSS

.form-control.no-border {
  border: 0;
  display: inline-block !important;
  width: 60px;
  overflow: visible;
}

.form-control {
  /* border:0;   */
  display: inline-block !important;
  width: 200px;
  overflow: visible;
}

.form-control:hover {
  background: aliceblue
}

small {
  display: block;
  color: gray;
}

b.example {
  height: 40px;
  display: block;
  margin-left: -20px'

}

.help-block {
  margin-top: 10px;
}

sup {
  font-size: 18px;
  color: gray;
}

.helper-text {
  color: gray
}

#panel,
#flip {
  padding: 5px;
  text-align: left;
  background-color: #fff;
  border: solid 1px #fff;
}

#panel {
  padding: 50px;
  margin-top: 15px;
  display: none;
}

.btn-show-default {
  display: none;
}

JavaScript

$('.tooltip').tooltip();


$(document).ready(function() {

  $('.btn-custom').click(function() {
    $("#panel").hide();
    $('.ybx-name-sel-choice').html('');

    $("#panel").slideDown("slow");
    $('.presets').hide();
    $(this).hide();
    $('.btn-show-default').show();
    $('.ybx-name-default').hide();


  });

  $('.btn-sm').click(function() {

    $('.btn-sm').removeClass('btn-success');
    $(this).addClass('btn-success')
    $("#panel").hide();


    $('.ybx-name-sel-choice').html('');
    $(this).closest('.row').find('.ybx-name-sel').clone().appendTo('.ybx-name-sel-choice');
    $('.ybx-name-default').hide();
    $("#panel").slideDown("slow");

  });



  $('.btn-show-default ').click(function() {


    $('.ybx-name-sel-choice').html('');
    $('.btn-custom').show();
    $("#panel").hide();
    $('.btn-sm').removeClass('btn-success');
    $('.ybx-name-default').show();
    $(this).hide();
    $('.presets').show();

  });

$('.editable').focus( function () {

selectElementContents(this);

});


function selectElementContents(el) {
    var range = document.createRange();
    range.selectNodeContents(el);
    var sel = window.getSelection();
    sel.removeAllRanges();
    sel.addRange(range);
}

var el = document.getElementById("editable");
selectElementContents(el);


});