Allow users to define custom markup more easily

[jetmind]

It would be helpful to have an ability to add toolbar buttons to insert custom markup. It is possible now to extend toolbar with custom buttons, but to define custom markup you'll need to use helpers _toggleBlock, _toggleLine, etc. The problem is they are not exposed in the public API, so the only option is copy&paste them into own code, but that's really hard to maintain.

It would be great for _toggleBlock, _toggleLine (and whatever you think also might be necessary) to be exposed for outside usage.

[WesCossick]

_toggleBlock and _toggleLine should be accessible publicly. This works for me:

<script>
var simplemde = new SimpleMDE({
    toolbar: [{
            name: "example",
            action: exampleAction,
            className: "fa fa-bolt",
            title: "Example",
        }
    ],
});

function exampleAction(){
    _toggleBlock(simplemde, "example", "%");
}
</script>

However, _toggleBlock has quite a bit of hard coded information about bold and italics syntax in it. It wouldn't support other syntax well. Which is why it might be best to use your own version of _toggleBlock or something else that functions similarly.

[WesCossick]

It's possible that we could create a new version of _toggleBlock that supports any type of custom markup. It would necessitate a decent amount of rewriting of the code though.

[jesseleite]

If it requires too heavy a rewrite, maybe for 2.0.0? The ability to add any custom markup is something my clients ask me about from time to time. +1 for this :)

[WesCossick]

The custom markup would need a rewrite of the _toggleBlock function specifically, which isn't too bad. However, it would also necessitate altering the Marked parser to support any custom markup, which may or may not be a simple task.

[Psychokrameur]

If you want to have something more flexible and allow this type of modification (which I think is a great idea), I suggest to propose a param to change the parser easily.

So if someone want to add functionality, he can add his custom type and in the mean time, enhance the marked lib to fit the needs and he will have to pass something like: parser: myCustomerParser

See here: http://epiceditor.com/#custom-parsers

[WesCossick]

This can already be accomplished with SimpleMDE, using previewRender.

previewRender: function(plainText) {
    return customMarkdownParser(plainText); // Returns HTML from a custom parser
},

However, I believe it's a much better user experience if the built-in parser could handle the option for custom markup.

[7upcat]

I suggest adding another callback function named 'postPreviewRender' which will be called after 'previewRender' executed .

Programmer can do something such as 'highlight' the code using highlightjs .

// Updates preview
    cm.on("update", function() {
        preview.innerHTML = editor.options.previewRender(editor.value(), preview);
        //post preview render callback let customer programming such as highlight rendered html 
        if(editor.options.postPreviewRender) {
            editor.options.postPreviewRender(preview, editor);
        }
    });

[WesCossick]

Highlighting the code is already possible with the codeSyntaxHighlighting option.

[7upcat]

Yep, I see the code, It work fine with markdown but I am trying to adding support for asciidocor ,I will try to highlight code in my customer render 😇. 2015年12月18日 03:43，"Wes Cossick" notifications@github.com写道：

Highlighting the code is already possible with the codeSyntaxHighlighting option.

— Reply to this email directly or view it on GitHub https://github.com/NextStepWebs/simplemde-markdown-editor/issues/57#issuecomment-165560501 .

[7upcat]

It work fine with markup because markup has a option can register a callback function which will be called by 'marked' . But other lib such as 'asciidoctorjs' did not have this function ,So If I want highlight I must manual call :

   var blocks = document.querySelectorAll('pre code');
                    Array.prototype.forEach.call(blocks, hljs.highlightBlock);

[samir-plusb]

Hey,

I found this issue, because I was searching a way to add a custom button, which just adds a <p class="some-class">...</p> tag including a custom css class name. This issue gave me the hint to the right direction, but I was missing some example code for a custom _toggleBlock function.

The function myToggleBlock is a copy&paste of the _toggleBlock function, but without the special code for the other button types. My problem was, that I was loading the SimpleMDE library via requireJS and _toggleBlock wasn't available in the scope of my code.

Maybe this is useful for someone in the future:

function myToggleBlock(editor, type, start_chars, end_chars) {

    if (/editor-preview-active/.test(editor.codemirror.getWrapperElement().lastChild.className))
        return;

    end_chars = (typeof end_chars === 'undefined') ? start_chars : end_chars;
    var cm = editor.codemirror;
    var text;
    var start = start_chars;
    var end = end_chars;

    var startPoint = cm.getCursor('start');
    var endPoint = cm.getCursor('end');

    text = cm.getSelection();
    cm.replaceSelection(start + text + end);

    startPoint.ch += start_chars.length;
    endPoint.ch = startPoint.ch + text.length;

    cm.setSelection(startPoint, endPoint);
    cm.focus();

};

function addCustomMarkup(editor) {
    myToggleBlock(editor, 'my-custom-type', '<p class="my-custom-type">', '</p>');
};

var toolbar_item = {
    name: 'my-custom-type',
    action: addCustomMarkup,
    className: 'fa fa-exclamation-circle',
    title: 'Add custom markup'
};

var toolbar = [
    toolbar_item
];

var simple_mde = new SimpleMDE(
    {
        toolbar: toolbar
    }
);