Updating the editor buttons
-
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&sticky=true">Discourse Default</a></li>\ <li><a data-auto-route="true" class="csslink" href=".?sticky=true&preview-style=">* TDWTF Default</a></li>\ <li><a data-auto-route="true" class="csslink" href=".?preview-style=2aeee392-5939-45a8-aaa8-eb7ca3282217&sticky=true">Widescreen+min</a></li>\ </ul>\ </li>\ </ul>\ </li>\ ').insertAfter( $("#user-dropdown li:eq(3)") ); }); });
-
Is someone available to translate the quote of @sam's into English?
-
I Thiiink that means we need to replace
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:
Em.run.next(function (){
@accalia can probably be of more help, I know she's worked with es6 more than I have
-
FYI, this appears to be the code that makes the normal buttons:
-
let View = require('es6/views/header');
almost :)
var View = require('discourse/views/header').default;
-
Everything but the CSS selector seems to work unedited over on riking's forum, which is running latest.
-
I suspect Robin re-added some "shims" that were originally missing noticed it was all working on my local as well.
-
Sooo....do we really need to do this stuff? Also, for this, we currently do
Em.View
which is getting replaced by therequire()
. We also doEm.run.next()
. Do we need something forEm
too?
-
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.
-
OK, here's something weird. Using the
View
object doesn't work on Widescreen minimal. It seems to require theEm.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
-
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.