parser.rb

module Articles
  module Services
    class LompatanMarkdownProcessor
      def initialize(full_document = "")
        @full_document = full_document
      end

      def preprocess
        document = @full_document.gsub(/\r\n\r\n\r\n/, "\r\n\r\n<br>\r\n")
        document = _youtube(document)

        return document
      end

      def postprocess
        document = @full_document.gsub(/image\/(\d+)\//, "image/\\1/medium_")
        document = document.gsub(/<img src/, '<img class="b-lazy" src="data:image/gif\;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src')

        return document
      end

      # Input:
      # !video[https://www.youtube.com/watch?v=0af00UcTO-c]
      # !video[https://youtu.be/0af00UcTO-c]
      # !video[https://www.youtube.com/embed/0af00UcTO-c]
      #
      # Output:
      # <div class="lompatan-iframe"><iframe src="https://www.youtube.com/embed/0af00UcTO-c" frameborder="0" allowfullscreen></iframe></div>
      #
      def _youtube(document)
        document.gsub!(
          /\!video\[https:\/\/(www.)?youtube.com\/watch\?v=(.*)\]/,
          '<div class="lompatan-iframe"><iframe src="https://www.youtube.com/embed/\2" frameborder="0" allowfullscreen></iframe></div>'
        )

        document.gsub!(
          /\!video\[https:\/\/(www.)?youtu.be\/(.*)\]/,
          '<div class="lompatan-iframe"><iframe src="https://www.youtube.com/embed/\2" frameborder="0" allowfullscreen></iframe></div>'
        )

        document.gsub!(
          /\!video\[https:\/\/(www.)?youtube.com\/embed\/(.*)\]/,
          '<div class="lompatan-iframe"><iframe src="https://www.youtube.com/embed/\2" frameborder="0" allowfullscreen></iframe></div>'
        )

        return document
      end
    end
  end
end

simplemde.js

// ==========================================================================
// SimpleMDE
// ==========================================================================
function _replaceSelection(cm, active, startEnd, url) {
  if(/editor-preview-active/.test(cm.getWrapperElement().lastChild.className))
    return;

  var text;
  var start = startEnd[0];
  var end = startEnd[1];
  var startPoint = cm.getCursor("start");
  var endPoint = cm.getCursor("end");
  if(url) {
    end = end.replace("#url#", url);
  }
  if(active) {
    text = cm.getLine(startPoint.line);
    start = text.slice(0, startPoint.ch);
    end = text.slice(startPoint.ch);
    cm.replaceRange(start + end, {
      line: startPoint.line,
      ch: 0
    });
  } else {
    text = cm.getSelection();
    cm.replaceSelection(start + text + end);

    startPoint.ch += start.length;
    if(startPoint !== endPoint) {
      endPoint.ch += start.length;
    }
  }
  cm.setSelection(startPoint, endPoint);
  cm.focus();
}

function customRenderer(text) {
  // youtube
  text = text.replace(/\!video\[https:\/\/(www.)?youtube.com\/watch\?v=(.*)\]/, "<div class=\"lompatan-iframe\"><iframe src=\"https://www.youtube.com/embed/$2\" frameborder=\"0\" allowfullscreen></iframe></div>")
  text = text.replace(/\!video\[https:\/\/(www.)?youtu.be\/(.*)\]/, "<div class=\"lompatan-iframe\"><iframe src=\"https://www.youtube.com/embed/$2\" frameborder=\"0\" allowfullscreen></iframe></div>")
  text = text.replace(/\!video\[https:\/\/(www.)?youtube.com\/embed\/(.*)\]/, "<div class=\"lompatan-iframe\"><iframe src=\"https://www.youtube.com/embed/$2\" frameborder=\"0\" allowfullscreen></iframe></div>")

  return text
}

var simplemde = new SimpleMDE({
  element: $("#article_markdown")[0],
  spellChecker: false,
  promptURLs: true,
  autoDownloadFontAwesome: false,
  previewRender: function(plainText) {
    text = customRenderer(plainText);
    text = this.parent.markdown(text);
    return text
  },
  toolbar: [
    "bold", "italic", "heading",
    "|",
    "unordered-list", "ordered-list",
    "|",
    "link", "image",
    {
      name: "video",
      action: function(editor){
        var cm = editor.codemirror;
        var stat = editor.getState(cm);
        var options = editor.options;
        var url = "";
        if(options.promptURLs) {
          url = prompt("URL for the video:");
          if(!url) {
            return false;
          }
        }
        _replaceSelection(cm, stat.image, ["!video[", "#url#]"], url);
      },
      className: "fa fa-play-circle",
      title: "Embed Video",
    },
    "|",
    "preview", "side-by-side", "fullscreen",
    "|",
    "guide"
  ]
});