@model string
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="quill.snow.css" />
    <style>
        .standalone-container {
            margin: 0;
            width: 100%;
            height: 100%;
        }
        #bubble-container {
            width:100%;
           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>
    
    <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
  ['link', 'image', 'video'],
  ['clean']                                         // remove formatting button
        ];

       
        $(document).ready(function () {
            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") {
                    invokeCSharpAction(getMD());
                }
            });
          // TODO implement a dedicated injection
          invokeCSharpAction(getMD());
      });
    </script>

</body>
</html>
