@model string
<!DOCTYPE html>
<html>
<head>
   
    <meta charset="utf-8">

    <link rel="stylesheet" href="quill.snow.css" />

    <style>
        .standalone-container {
            margin: 0;
            width: 100%;
        }

        #bubble-container {
           height: 100%;
        }

        #bubble-container div.ql-editor {
            margin-top:3em;
        }

        .hidden {
            display: none;
        }
    </style>

</head>
<body>

    <div class="standalone-container">
        <div id="bubble-container">@Html.Write(Model)</div>
    </div>
    <form><input type="hidden" name="md" id="md" />
    <input id="btnSubmit" type="button" value="Valider" class="hidden" /></form>
    <script type="text/javascript" src="quill.min.js"></script>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="showdown.js"></script>
    <script type="text/javascript" src="to-markdown.js"></script>
    <script type="text/javascript" src="md-helpers.js"></script>

    <script type="text/javascript">
        var toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
  ['blockquote', 'code-block'],

  [{ 'header': 1 }, { 'header': 2 }],               // custom button values
  [{ 'list': 'ordered' }, { 'list': 'bullet' }],
  [{ 'indent': '-1' }, { 'indent': '+1' }],          // outdent/indent
  
  ['clean']                                         // remove formatting button
        ];

        var quill = new Quill('#bubble-container', {
            modules: {
                toolbar: toolbarOptions
            },
    placeholder: 'Composez votre texte ...',
    theme: 'snow'
  });

  function getMD() {
      return markdownize($('#bubble-container div.ql-editor').html())
  }
  quill.on('text-change', function (delta, oldDelta, source)
  {
      if (source === "user") {
          $('#md').val(getMD());
          $('#btnSubmit').removeClass('hidden');
      }
  });
  $(document).ready(function () {
      $('#btnSubmit').on('click', function () {
          $.get("file:validate?md=" + encodeURIComponent(getMD()),
       function (data, stat, jqXHR) { $('#result').html("Okay") })
      })
  });
    </script>

</body>
</html>
