CODEWITHSUNDEEP
javascriptjquerymarkdownx-editable
JasonDavis
JasonDavis

Reputation: 48933

Parse Markdown into HTML in JavaScript X-Editable field

I am using the jQuery X-Editable edit-in-place library on a field and the JavaScript Marked Markdown Parser library to try and convert Markdown strings into HTML.

The goal is to show HTL and when it turns into a textarea edit field, to then how the Markdown. The Markdown will be what is saved and loaded from the backend in the live app.

I have setup a JSFiddle demo for this functionality...

http://jsfiddle.net/jasondavis/bfrrzz8h/

If you view the demo and click to edit the Description text and paste in this Markdown string # Marked in browser\n\nRendered by **marked** and click save, it will then alert you the parsed markdown to HTML string. THe problem is it does not update the DOM to show that new HTML string.

Any help in this please?

Marked library - https://github.com/chjj/marked
X-Editable library - https://github.com/vitalets/x-editable/

JavaScript from my demo 

$('#task-description-modal').editable({
    type: 'textarea', // text|textarea|select|date|checklist
    url: '/updatetask',
    pk: 123,
    toggle: 'click', // click|dblclick|mouseenter|manual
    inputclass: 'task_description resizable',
    highlight: '#F1FFE7',
    mode: 'inline', // inline | popup
    placement: 'top',
    title: 'Enter Task Description',
    validate: function(value) {
        if ($.trim(value) === '') {
            return 'Task Description is Required';
        }
    },
    params: function(params) {
        //Addition params in addition to the default: pk, name, value
        return params;
    },
    success: function(response, newValue) {
        if (!response.success) return response.msg;
    }
});


$('#task-description-modal').on('save', function(e, params) {
    // Parse Description Markdown into HTML
    var markdownDescription = marked(params.newValue);
    alert(markdownDescription);
    $('#task-description-modal').html(markdownDescription);
    //$('#task-description-modal').html('test');
});


//ajax emulation. Type "err" to see error message
$.mockjax({
    url: '/updatetask',
    responseTime: 400,
    response: function(settings) {
        if(settings.data.value == 'err') {
           this.status = 500;  
           this.responseText = 'Validation error!';
        } else {
           this.responseText = '';  
        }
    }
});

Upvotes: 0

Views: 1251

Answers (1)

Mike 'Pomax' Kamermans
Mike 'Pomax' Kamermans

Reputation: 53598

You're injecting your compiled HTML into the element you're using to get markdown input. This is simply setting yourself up for failure: have two elements, one for markdown text, and one to show the result, and switch between the two.

For instance, the following code already makes things work fine:

HTML:

<div style="margin: 50px">
  <span id="task-description-modal">Task Description text</span>
  <div id="processed"></div>
</div>

JS: 

$('#task-description-modal').on('save', function(e, params) {
  var markdownDescription = marked(params.newValue);
  $('#processed').html(markdownDescription);
});

You just need to make sure to only show the element you intend to be shown depending on what the user has just done. Hidden #task-description-modal until the user clicks on #processed, at which point you hide #processed and force .focus() on #task-description-modal? Perfect.

Upvotes: 3

Related Questions