latest editor deployed on PM

[Joe Corneli]

Dear all:

With a bit of help from Constantin, I got the latest editor deployed
on PlanetMath. It was easy when I realized this simple point.

The new editor depends on recent versions of the wysiwyg_ace,
planetary_libs, and jobad modules. It's stable enough to allow PM to
serve aggregated Javascript files - so the site now feels much faster.

I'm sorry about the long delay, and very happy about the final result!

As you can see this means we now have JOBAD running on PM as well - so
I'll be looking forward to seeing some cool JOBAD demos. (Suggestions
are welcome.)

Kind thanks to Constantin and JOBAD devs!

Joe

[Joe Corneli]

Sadly, the editor stopped working: I see this Javscript error in Firebug:

ReferenceError: require is not defined
require.config({ baseUrl:
Drupal.settings.editor_tools.editor_tools_path }), ace0-2.js (line
49)

https://github.com/KWARC/planetary/blob/master/sites/all/modules/wysiwyg_ace/editors/js/ace0-2.js#L49

Any idea?

[Joe Corneli]

Got past that by loading require.js from ace.inc but now I'm seeing
another Javascript error:

TypeError: Drupal.settings.editor_tools is undefined

require.config({ baseUrl:
Drupal.settings.editor_tools.editor_tools_path }), ace0-2.js (line 49)

Totally weird that these errors are showing up now, after the editor
was working fine...

[Deyan Ginev]

On 09/04/2013 01:07 PM, Joe Corneli wrote:
> Totally weird that these errors are showing up now, after the editor
> was working fine...

JavaScript errors tend to be slippery like that - you never know if you
forgot to clear some cache, or just changed machines/browsers and see
different behaviors.

That being said, what you're reporting is a real error since I can
exactly reproduce your report when I edit a new article page (Firefox,
Ubuntu).

Deyan

[Joe Corneli]

Finally got it fixed -- I had to tweak wysiwyg_ace_ace_themes quite
considerably to get everything loaded in the right order. What I
really wonder is how this was working (and how it is supposed to work)
prior to this tweaking. There's some commented out code that sorta
looks like it might have done something along these lines ... but ...
not when it's commented out.

function wysiwyg_ace_ace_themes($editor, $profile) {
/**
* TODO: just a STUB
*/
$plugins = $profile->settings["buttons"]["default"];
$plugin_path = drupal_get_path("module", "wysiwyg_ace");
drupal_add_css($plugin_path."/css/ace.css",
array(
"type" => "internal"
));
drupal_add_css($plugin_path."/editors/js/select_widget.css",
array("type"=>"internal"));

#foreach ($plugins as $plugin=>$p) {
# drupal_add_css($editor['library path'] .
'/mode/'.$plugin.'/'.$plugin.'.css');
# drupal_add_js($editor['library path'] .
'/mode/'.$plugin.'/'.$plugin.'.js');
#}
$cpath = url("",
array("absolute"=>true)).drupal_get_path("module",
"wysiwyg_ace")."/editors/js/";
drupal_add_library('system', 'ui.button');
drupal_add_library('system', 'ui.dialog');

drupal_add_css('sites/all/libraries/build/release/JOBAD.css');
drupal_add_css('sites/all/libraries/jquery.terminal/css/jquery.terminal.css');
drupal_add_css('sites/all/libraries/office-ribbon/ribbon/ribbon.css');

drupal_add_js('sites/all/libraries/requirejs/require.js');
//drupal_add_js('sites/all/libraries/underscore/');
drupal_add_js('sites/all/libraries/jobad/jobad.js');
drupal_add_js('sites/all/libraries/jquery.layout/jquery.layout-latest.min.js');
drupal_add_js('sites/all/libraries/jquery.terminal/jquery.terminal-min.js');
drupal_add_js('sites/all/libraries/office-ribbon/ribbon/ribbon.js');
drupal_add_js('sites/all/libraries/editor_tools/editor_utils.min.js');
drupal_add_js($cpath."exhibit/exhibit-api.js?autoCreate=false",
array("external"=>true));
drupal_add_js($cpath."text-prefix-complete.js", array("external"=>true));
drupal_add_js($cpath."emacs.js", array("external"=>true));
drupal_add_html_head_link(array(
'rel' => 'exhibit-data',
'type' => 'application/json',
'href' => $cpath."/environments.js",
));


return array('default');
}

[Joe Corneli]

Oh, and as a further clue (?): I had to replace
Drupal.settings.editor_tools.editor_tools_path with
"http://planetmath.org/sites/all/libraries/editor_tools" throughout
ace0-2.js.

[Deyan Ginev]

Hi Joe,

I can only sympathize with you for having to deal with JS dependency
hell, especially having done it a few weeks back with integrating JOBAD
in MediaWiki. I'll try to share my experience with that, in case it is
useful for you.

In general any big framework (Drupal, MediaWiki) ends up creating some
overarching pipeline for loading its dependencies and you really need to
understand how that works in order to cleanly integrate a non-trivial
external (especially a JavaScript one).

For example, MediaWiki's internally rewrites the name of each piece of
JavaScript during runtime and does a bunch of dynamic server-side magic
to prevent you from loading dependencies from within JavaScript. That's
a security stunt in order to control all JS code from within PHP.

Looking at the errors you're posting, the Drupal inclusion mechanisms
look similar to MediaWiki's to an extent. I think for a clean fix you need:

1. The self-contained editor (without its standard dependencies, such as
jQuery) packed into a single minimized file.
2. A clean list of external dependencies for the editor, e.g. jQuery,
Ribbon, etc. (ideally with versions)
3. Checking with Drupal whether any of the dependencies are loaded by
default, and additionally trying to find a system for dependency
management that will make sure to prevent loading things twice. (Loading
two different versions of jQuery for example is a recipe for disaster).

My JOBAD loading in MediaWiki ended up looking like (sharing for the
spirit of it):

$wgResourceModules['ext.MathMenu'] = $moduleTemplate + array(
'scripts' => array(
'jobad/build/release/JOBAD.min.js',
# ... list of MathMenu modules to be loaded
),
'dependencies' => array('jquery','jquery.ui.core'),
'styles' => 'jobad/build/release/JOBAD.css',
);

Note the encapsulation achieved with this approach, and more importantly
the standardized "dependencies" key.

Deyan