NDOJ/templates/markdown_editor/markdown_editor.html

{% set layout='no_wrapper' %}
{% extends "base.html" %}

{% block media %}
  <style>
    body{
      overflow: hidden;
    }
    #content{
      width: 100%;
      height: calc(100vh - 50px);
      margin-bottom: 0;
      padding: 0;
    }
    #content-body {
      padding: 0;
      height: 100%;
      display: flex;
    }

    .wmd-preview{
      float: right;
      margin-top: 0;
    }
    .width-controller{
      width: 51%;
    }
    #id_body-preview{
      overflow: scroll;
    }
    .form-area {
      flex-grow: 1;
    }
  </style>
{% endblock %}

{% block js_media %}
  <script>
    function debounce(func, wait) {
      let timeout;

      return function executedFunction(...args) {
        const context = this;
        const later = () => {
          clearTimeout(timeout);
          func.apply(context, args);
        };

        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
      };
    }

    function update_preview() {
      $.ajax({
        url: "{{url('blog_preview')}}",
        type: 'POST',
        data: {
          preview: $(this).val()
        },
        success: function(data) {
          $('#display').html(data);
          renderKatex();
          populateCopyButton();
        },
        error: function(error) {
          console.log(error.message);
        }
      })
    }

    $(document).ready(function(){
      const debounced_update_preview = debounce(update_preview, 250);
      $("#wmd-input-id_body").on("keyup", debounced_update_preview);
    });
  </script>

  <script src="{{ static('pagedown/Markdown.Converter.js') }}"></script>
  <script src="{{ static('pagedown-extra/pagedown/Markdown.Converter.js') }}"></script>
  <script src="{{ static('pagedown/Markdown.Sanitizer.js') }}"></script>
  <script src="{{ static('pagedown/Markdown.Editor.js') }}"></script>
  <script src="{{ static('pagedown-extra/Markdown.Extra.js') }}"></script>
  <script src="{{ static('pagedown_init.js') }}"></script>
  <script src="{{ static('pagedown_math.js') }}"></script>
{% endblock %}

{% block title_row %}
{% endblock %}

{% block title_ruler %}
{% endblock %}

{% block body %}
  <div id="new-comment" class="form-area">
    <input type="hidden" name="parent" id="id_parent">
    <div class="comment-post-wrapper">
      <div id="comment-form-body"><div class="wmd-wrapper image-upload-enabled">
        <div class="wmd-panel">
          <div id="wmd-button-bar-id_body"></div>
          <textarea id="wmd-input-id_body" class="wmd-input" name="body" required=""></textarea>
        </div>
        <div id="id_body-preview" data-preview-url="{{url('comment_preview')}}" data-textarea-id="wmd-input-id_body" data-timeout="1000" class="wmd-panel wmd-preview dmmd-preview dmmd-no-button">
          <div class="dmmd-preview-update"><i class="fa fa-refresh"></i> {{_('Update Preview')}}</div>
          <div class="dmmd-preview-content content-description"></div>
        </div>
        <div class="pagedown-image-upload">
          <h2>{{_('Insert Image')}}</h2>
          <div class="form-row">
            <div>
              <label class="label">{{_('From the web')}}</label>
              <input class="url-input" type="text" placeholder="http://">
            </div>
          </div>
          <div class="form-row">
            <div>
              <label class="label">{{_('From your computer')}}</label>
              <input class="file-input" type="file" name="image" id="file" data-action="/pagedown/image-upload/" accept="image/*">
            </div>
          </div>
          <div class="submit-row">
            <div class="submit-loading"></div>
            <input class="submit-input show" type="submit" value="{{_('Save')}}" name="_addanother">
            <p class="deletelink-box"><a href="#" class="close-image-upload deletelink">{{_('Cancel')}}</a></p>
          </div>
        </div>
      </div></div>
    </div>
  </div>

  <div id="id_body-preview" data-preview-url="{{url('comment_preview')}}" data-textarea-id="wmd-input-id_body" data-timeout="1000" class="width-controller wmd-panel wmd-preview dmmd-preview dmmd-no-button dmmd-preview-has-content">
    <div class="right-markdown dmmd-preview-content content-description" id="display"></div>
  </div>
{% endblock %}