Allow discovery of plugin buttons via `ae_uibridge` #667
Comments
This won't make it in the |
Hey @julien, thanks for working on this. Unfortunately, I don't think that's a viable implementation. We need these to be dynamic in a way that only available buttons show up and in a way we don't have to manually maintain a plugin list. On top of that, there are some plugins exposing more than one ui component. For example the The expected behaviour would be: // Scenario 1, font plugin is loaded using extraPlugins
editor.getButtonsFor('font'); // ['Font', 'FontSize'] // Scenario 2, font plugin is not loaded
editor.getButtonsFor('font'); // [] I think the common entry point is https://github.com/liferay/alloy-editor/blob/master/src/ui/react/src/uibridge/uibridge.js#L27-L35, or inside the independent |
Hi @jbalsas you're welcome, and thanks for the pointers I will have a look in that direction. |
Hi again @jbalsas, So I had a look at https://github.com/liferay/alloy-editor/blob/master/src/ui/react/src/uibridge/uibridge.js#L27-L35 and it was a good starting point. I haven't prepared any pr yet, but as I understand we need some kind of "iterator" to go through all the "required" plugins given a plugin name ... (please correct me if I'm wrong) I've modified my previous code to look like this getButtonFor: function (name) {
function PluginIterator(plugin) {
this.plugin = plugin;
}
PluginIterator.prototype.hasNext = function () {
return this.plugin && this.plugin.requires;
};
PluginIterator.prototype.next = function () {
var plugin = CKEDITOR.plugins.get(this.plugin.requires);
if (plugin) {
this.plugin = plugin;
}
return this.plugin.name;
};
var plugin = CKEDITOR.plugins.get(name.toLowerCase());
if (!plugin) {
return '';
}
var iterator = new PluginIterator(plugin);
var requires = [plugin.name];
while (iterator.hasNext()) {
requires.push(iterator.next());
}
return requires;
} Which would work the following way AlloyEditor.getButtonFor('PasteFromWord');
// output: ["pastefromword", "clipboard", "dialog", "dialogui"]
// or in the case of an unexisting plugin
AlloyEditor.getButtonFor('NoSuchPluginRegistered');
// output: '' The Thanks! |
Hey @julien, you're overthinking this. Take the You can see that it will call the In there, we already have the buttons names, so we could simply do: var pluginName = /plugins\/(.*)\/plugin.js/.exec((new Error().stack))[1];
AlloyEditor.BRIDGE_BUTTONS[pluginName] = AlloyEditor.BRIDGE_BUTTONS[pluginName].push(richComboName); Then, you should simply need something like: AlloyEditor.getButtonFor = function(pluginName) {
return AlloyEditor.BRIDGE_BUTTONS[pluginName] || [];
} Now, of course throwing an error to get the plugin name sounds like a very bad idea, so it'd be better to be able to do it in a nicer way :) |
…generate globally accessible metadata Fixes #667
I've re-added this to the now |
…generate globally accessible metadata Fixes #667
…generate globally accessible metadata Fixes #667
AlloyEditor supports using CKEditor plugins thanks to the
ae_*bridge
set of plugins. However, in order to add the buttons to a toolbar, the user needs to figure out how is the particular plugin naming the button, so for instance, in order to use thePaste from Word
plugin, one would need to do the following:Since this is error-prone and forces the user to dig into the plugin code for the exact string, it would be nice to have some kind of API so a user could simply do:
The text was updated successfully, but these errors were encountered: