Updating the editor buttons


  • ♿ (Parody)

    Below is the current (Discourse v1.4 Beta 8) code for the custom editor buttons. What we're doing has been broken in future (we're two beta releases behind as I write this). We need to upgrade it based on this advice:

    @sam said:

    Since we moved to es6 pretty much everywhere some of the site customisations here need to be reworked to use

    var thing = require('es6/module/name');
    
    vs
    
    Discourse.View.SomeView
    ```</blockquote>
    
    ```javascript
    $("document").ready(function (){
    //  Monarch - http://what.thedailywtf.com/t/del-ins-corrector-composer-extension-userscript/48287
        window.PagedownCustom.appendButtons.push({
        	id:"wmd-del-button",
        	description:"del/ins correction",
        	execute:function(a){
        		a.before+="<del>"+a.selection+"</del><ins>";a.selection=" ";a.after="</ins>"+a.after
        	}
        });
        $(document.body).append('<style> .wmd-del-button::before {content: "\\f12d";}</style>');
        
    //  Monarch + boomzilla - abbr composer extension based on http://what.thedailywtf.com/t/del-ins-corrector-composer-extension-userscript/48287
        window.PagedownCustom.appendButtons.push({
        	id:"wmd-abbr-button",
        	description:"add abbr tag",
        	execute:function(a){
    			a.after = '">'+a.selection+"</abbr>"+a.after;a.before+='<abbr title="';a.selection=" ";
        	}
        });
        $(document.body).append('<style> .wmd-abbr-button::before {content: "\\f05a";}</style>');
    
    //  Monarch + PJH - spoiler composer extension based on http://what.thedailywtf.com/t/del-ins-corrector-composer-extension-userscript/48287
        window.PagedownCustom.appendButtons.push({
        	id:"wmd-spoil-button",
        	description:"add [spoiler] tag",
        	execute:function(a){
    			a.after = "[/spoiler]"+a.after;a.before+='[spoiler]';
        	}
        });
        $(document.body).append('<style> .wmd-spoil-button::before {content: "\\f070";}</style>');
        
      Em.View.views[$("header").attr("id")].set("renderDropdowns",true); //force discourse to render dropdown in background
    
      //inject custom menu items
      Em.run.next(function (){
         $('\
         <li>\
            <ul class="main_menu">\
                <li>\
                    <u>Custom Styles</u>\
                    <ul class="csssubmenu">\
                        <li><a data-auto-route="true" class="csslink" href=".?preview-style=5ac5a5e9-c6ed-4197-9ec3-40811fd6ee5d&amp;sticky=true">Discourse Default</a></li>\
                        <li><a data-auto-route="true" class="csslink" href=".?sticky=true&amp;preview-style=">* TDWTF Default</a></li>\
                        <li><a data-auto-route="true" class="csslink" href=".?preview-style=2aeee392-5939-45a8-aaa8-eb7ca3282217&amp;sticky=true">Widescreen+min</a></li>\
                    </ul>\
                </li>\
            </ul>\
        </li>\
        ').insertAfter( $("#user-dropdown li:eq(3)") );
      });
    });
    
    

  • Discourse touched me in a no-no place

    Is someone available to translate the quote of @sam's into English? 😆


  • I survived the hour long Uno hand

    I Thiiink that means we need to replace

    @boomzilla said:

    Em.View.views[$("header").attr("id")].set("renderDropdowns",true);

    With something like

    let View = require('es6/views/header');
    View.set("renderDropdowns", true);
    

    And possibly rework this bit:

    @boomzilla said:

    Em.run.next(function (){

    @accalia can probably be of more help, I know she's worked with es6 more than I have


  • ♿ (Parody)

    FYI, this appears to be the code that makes the normal buttons:


  • Banned

    @Yamikuronue said:

    let View = require('es6/views/header');

    almost :)

    var View = require('discourse/views/header').default;
    

  • Discourse touched me in a no-no place

    Everything but the CSS selector seems to work unedited over on riking's forum, which is running latest.


  • Banned

    I suspect Robin re-added some "shims" that were originally missing noticed it was all working on my local as well.


  • ♿ (Parody)

    Sooo....do we really need to do this stuff? Also, for this, we currently do Em.View which is getting replaced by the require(). We also do Em.run.next(). Do we need something for Em too?


  • Banned

    Eventually all Ember Views are going away, but that is like 6 versions of Ember out. Our Discourse.XyzView shims may go, if we decide to deprecate I will make sure we do a nice warning first to inform you what to do and phase it over a couple of releases.

    The require style of bringing stuff in is the way forward though, its how we manage dependencies internally.

    Em shortcut for Ember is staying, no plans of making that go away.


  • ♿ (Parody)

    OK, here's something weird. Using the View object doesn't work on Widescreen minimal. It seems to require the Em.View form. Otherwise I get errors like:

    Uncaught TypeError: Cannot read property 'ember1550' of undefined

    On this line:

    Em.View.views[$("header").attr("id")].set("renderDropdowns",true); //force discourse to render dropdown in background
    

  • ♿ (Parody)

    In fact, it isn't working anywhere.
    So:

        Em.View.views[$("header").attr("id")].set("renderDropdowns",true); //force discourse to render dropdown in background
    

    ...works. But:

        var View = require('discourse/views/header').default;
        View.views[$("header").attr("id")].set("renderDropdowns",true); //force discourse to render dropdown in background
    

    ...does not.


Log in to reply