Could you add a button to switch to a mode for translation ?

[morlay]

Hi Stackedit Team,

Thanks for all your good jobs.

Last night I add some style to make translated docs(both English and Chinese) to preview well by userscripts

Please add the script from http://userscripts.org/scripts/show/187329
and you can see https://stackedit.io/viewer#!url=https://gist.github.com/morlay/8208604/raw/Modular+JavaScript.md
like below:

This is not a good way,
and could you add a function instead ?

Thanks again. Happy new year.

[benweet]

The script can be translated to a StackEdit extension. You will have the same result by copy/pasting the following script in Settings->Extensions->UserCustom:

    userCustom.onReady = function() {
        var styles = [];

        console.log('add some styles')

        styles.push('#preview-contents{width:50%!important;margin:0!important;}');
        styles.push('#preview-contents p,#preview-contents h1,#preview-contents h2,#preview-contents h3,#preview-contents h4,#preview-contents h5,#preview-contents h6,#preview-contents li{position:relative;}');
        styles.push('#preview-contents .zh{display:block;position:absolute;top:0;right:0;width:98%;margin-right: -100%;font-size:0.8em;font-family:"微软雅黑"}');

        styles.push('#preview-contents pre,#preview-contents blockquote{width: 200%;}');

        styles.push('#preview-contents blockquote p{width: 46%;}');
        styles.push('#preview-contents blockquote .zh{margin-right: -110%;}');



        var styleNode = document.createElement("style");
        styleNode.innerHTML = styles.join('');
        document.getElementsByTagName('head')[0].appendChild(styleNode);    
    };

[morlay]

Errrr ……
I delete the script from userscripts and update it tonight
https://gist.github.com/morlay/8236968

and it can be switched by a button and localStorage will store the state of isTransMode.

But how to share this to my friends,
is it the only way that telling them copy the script to 'Settings->Extensions->UserCustom' ?

Could I publish the script as an extension of Stack Edit ? and other user can install it easier.

Thanks.

And another question:
Is there some way to add some edition button (or shortcut) to quickly switch custom snippets?

Thanks again.

[benweet]

Hi @morlay

Unfortunately there is no "StackEdit market" right now to share extensions and I think this extension is too specific to be integrated in the application. If it's for a restricted group of person, you can still fork the repo, create your own extension and deploy the app on your server (or on heroku for free). I can help with deployment and configuration although it should be straight forward.

To create shortcuts, you can use mousetrap:

require(['mousetrap'], function(mousetrap) {
    mousetrap.bind('ctrl+1', function() {
        alert('You just hit ctrl+1!');
    });
});

[morlay]

Hi @benweet,

Thank you very much. It works well now.
And I can quick add or remove custom snippets now ( the code maybe dirty )

I think the script can be enough to easily edit(translate) some content.
Thanks again. Stack Edit is awesome tool !

https://gist.github.com/morlay/8236968

    userCustom.onAceCreated = function(aceEditor) {

    // show line number
    aceEditor.renderer.setShowGutter(true);


    require(['mousetrap'], function(mousetrap) {

        var zhTag = ['<span class="zh">', '</span>', 'type trans content here'];


        function switchTag(aceEditor, tag) {
            var selectionRange, selectionString, isEmpty, warperSelectionRange, warperSelectionString, isWraper, cursorPosition;

            selectionRange = aceEditor.getSelectionRange();
            selectionString = aceEditor.session.getTextRange(selectionRange);

            isEmpty = (selectionString.length === 0) || (selectionString == tag[2]);


            warperSelectionRange = selectionRange.clone();
            warperSelectionRange.start.column = warperSelectionRange.start.column - tag[0].length;

            if (warperSelectionRange.start.column < 0) {
                isWraper = false;
            } else {
                warperSelectionRange.end.column = warperSelectionRange.end.column + tag[1].length;
                warperSelectionString = aceEditor.session.getTextRange(warperSelectionRange);
                isWraper = (warperSelectionString.match(new RegExp(['(', tag[0], ').*(', tag[1], ')'].join(''))) !== null);
            }

            if (isWraper) {
                if (isEmpty) {
                    selectionString = '';
                }
                aceEditor.session.doc.replace(warperSelectionRange, selectionString);

            } else {

                if (isEmpty) {
                    selectionString = tag[2];
                }
                aceEditor.session.doc.replace(selectionRange, tag[0] + selectionString + tag[1]);
            }



            cursorPosition = aceEditor.getCursorPosition();
            selectionRange.start.column = cursorPosition.column - selectionString.length - (isWraper ? 0 : tag[1].length);
            selectionRange.end.column = cursorPosition.column - (isWraper ? 0 : tag[1].length);
            aceEditor.selection.setSelectionRange(selectionRange);



        }

        mousetrap.bind('ctrl+1', function() {
            // add or remove '<span class="zh"></span>' you can change the shortcut
            switchTag(aceEditor, zhTag);
        });
    });
}