Toolbar Customization of Web Author XML

[Rishabh]

Hi

I want to edit the toolbar and add a custom action 'outputclass'. But did not found a way how can I do it. Just implemented the below code and it added my custom action i.e 'outputclass' into the toolbar array only.

Code:
function addToDitaToolbar(editor, actionId) {
goog.events.listen(editor, sync.api.Editor.EventTypes.ACTIONS_LOADED, function(e) {
var actionsConfig = e.actionsConfiguration;

var ditaToolbar = null;
if (actionsConfig.toolbars) {
for (var i = 0; i < actionsConfig.toolbars.length; i++) {
var toolbar = actionsConfig.toolbars;
if (toolbar.name === "DITA") {
ditaToolbar = toolbar;
}
}
}

if (ditaToolbar) {
ditaToolbar.children.push({
id: actionId,
type: "action"
});
}


});
}


But now the newly outputclass name action is not showing in the toolbar section. It is showing only the built in and DITA tools actions.

So please can anyone tell me how can I add a custom toolbar in web author XML and where to write the functionality of the same.

Screenshot from 2021-08-23 19-07-30.png

Screenshot from 2021-08-23 19-06-58.png

There are two screen shots is attracted one for the toolbar and second for the toolbar array in which outputclass name action is added.

[Gabriel Titerlea]

Hello,

Only actions that have been registered in the actions manager [1] will be shown in toolbars. Maybe you forgot to register it?
See the "The action needs to be registered with the editor" section from this tutorial [2] for an example.

If you did register it maybe you did not provide an implementation for the following methods:
- getDisplayName [3]
- getLargeIcon [4]
- getSmallIcon [5]

If you provided an implementation for the above methods, do you see any errors in the browser's console?

Best,
Gabriel

[1] https://www.oxygenxml.com/maven/com/oxy ... nager.html
[2] https://www.oxygenxml.com/maven/com/oxy ... ction.html
[3] https://www.oxygenxml.com/maven/com/oxy ... me__anchor
[4] https://www.oxygenxml.com/maven/com/oxy ... on__anchor
[5] https://www.oxygenxml.com/maven/com/oxy ... on__anchor

[Rishabh]

I have successfully added the custom toolbar action list. And now my custom toolbar list is showing in the DITA toolbar but in the drop-down menu there are no items is showing.


So Can you please tell me how can I add n items to my custom toolbar list menu? With the help of Javascript Plugin

I am attaching the screenshot for the same.

Screenshot from 2021-08-27 13-00-45.png

Screenshot from 2021-08-27 13-00-38.png

And after adding the menu items into the drop-down list. How I get the user-selected item from the drop-down with the help of JS plugin.

[Gabriel Titerlea]

Hello,

Your attached screenshot shows an action in the dropdown. And in this thread [1] you added some actions to a dropdown. That code looks correct.

A dropdown descriptor should look like this:

Code: Select all

{
   type: 'list', // type: list means this is a dropdown, all of its children will be shown when it is expanded
   name: 'Dropdown', // If no icon16 or icon20 is provided the dropdown will display this name.
   icon16: '/images/Section16.png',  // Pick a fitting icon URL
   icon20: '/images/Section24.png', // Pick a fitting icon URL
   children: [{id: 'example_id', type: "action" }] // a list of action descriptors
}

Note that all the actions added as children of a dropdown need to be registered in the actions manager [2] otherwise they won't be shown in the drop-down. See the "The action needs to be registered with the editor" section from this tutorial [3] for an example.

Your screenshot also shows an action in the drop-down that has the Ctrl+U shortcut. But it doesn't have a name. This means that you did not implement the getDisplayName [4] method for that action. Notice that the WebLinkAction defined in this tutorial [3] implements the getDisplayName method.

How do I get the user-selected item from the drop-down with the help of the JS plugin?

What do you hope to achieve by getting the selected item?

Best,
Gabriel

[1] viewtopic.php?f=34&t=23349
[2] https://www.oxygenxml.com/maven/com/oxy ... er__anchor
[3] https://www.oxygenxml.com/maven/com/oxy ... ction.html
[4] https://www.oxygenxml.com/maven/com/oxy ... me__anchor

[Rishabh]

Hi

As you mentioned I have added the children's attributes and register them with the action manager. Also added is the get display name method.

But with this approach, only one item is rendering. Basically, I want 2 custom toolbars menu lists and 5 options in each dropdown.

Below is the code:

let customActions= ['Paragraph']; // custom toolbar name
for(let a=0; a< customActions.length; a++){
editor.getActionsManager().registerAction(customActions[a], new WeblinkActions(editor));
addToDitaToolbar(editor, customActions[a]);

goog.events.listen(editor.getSelectionManager(),
sync.api.SelectionManager.EventType.SELECTION_CHANGED, function() {
editor.getActionsManager().refreshActionsStatus(customActions[a])
});
}


toolbarActions.prototype.getDisplayName = function() {
return 'center';
};



if (ditaToolbar) {
ditaToolbar.children.push({
icon20: "http://localhost:8080/web-author-compon ... center.png",
name: actionId,
displayName: actionId,
type: "list",
children: [
{id: "Paragraph", type: "action"},
]
});
}



How can I add multiple items to the menu list.? And after this, if the user selects an item from the menu list then how can I get the value of the selected item.

[Gabriel Titerlea]

Hello,

But with this approach, only one item is rendering.

You are looping through a list of action IDs (let customActions= ['Paragraph']) & calling addToDitaToolbar for each one + your implementation of addToDitaToolbar [1] creates a new dropdown and adds it to the DITA toolbar.
Seeing only 1 item in the dropdown is to be expected. You are creating a new drop-down for each action.

How can I add multiple items to the menu list.?

You should create a dropdown-descriptor (see my previous response) that contains all the actions that you want to show in the dropdown & add the dropdown-descriptor to the DITA toolbar.
Here's an example for how your dropdown-descriptor should look:

Code: Select all

{
   type: 'list',
   name: 'Dropdown',
   icon16: '/images/Section16.png',
   icon20: '/images/Section24.png',
   children: [
     {id: 'action_id_1', type: "action" },
     {id: 'action_id_2', type: "action" }
   ]
}

icon20: "http://localhost:8080/web-author-compon ... center.png",

This URL should be relative.

goog.events.listen(editor.getSelectionManager(), sync.api.SelectionManager.EventType.SELECTION_CHANGED, function() {
editor.getActionsManager().refreshActionsStatus(customActions[a])
});

Toolbar action buttons refresh their status automatically on selection changed, this code shouldn't be necessary.

if the user selects an item from the menu list then how can I get the value of the selected item.

When a user selects an item from the dropdown, the action associated with that dropdown item will be executed, its actionPerformed method will be called.

Best,
Gabriel

[1] viewtopic.php?f=34&t=23349

[Rishabh]

Hi

I have successfully managed to add multiple items in the drop-down menu but can't assign the different names to them.

I have created a dropdown and call addDitatoToolbar only once. And in addDitatoToolbar function I have created a set of options array:

here is the code:

if (ditaToolbar) {
let dropDownItems= ['covh1', 'covh2', 'covh3'];
for(let d=0; d< dropDownItems.length; d++){
editor.getActionsManager().registerAction(dropDownItems[d], new toolbarActions(editor));
}
ditaToolbar.children.push({
name: actionId,
displayName: actionId,
type: "list",
children: [
{id: "covh1", type: "action"},
{id: "covh2", type: "action"},
{id: "covh3", type: "action"},
]
});
}

And the above code is working successfully. There are 3 options are available in drop-down. BUt how can I set the name convention for them?

As you mentioned in the previous post I have to use the get display name method for that.


toolbarActions.prototype.getDisplayName = function() {
return 'center';
};


but it sets all drop-down names to center.


So how can I set the drop-down name differently?

children: [
{id: "covh1", type: "action"},
{id: "covh2", type: "action"},
{id: "covh3", type: "action"},
]
});

Screenshot from 2021-08-31 14-49-35.png

And if a user is selecting 2nd options them how can I get the value of the same.

[Rishabh]

Hi

I have successfully added multiple items in the drop-down and done the name conviction part but lastly, I just need to get the value of the selected item from the drop-down menu item (how to get the value from the actionPerformed method).

E.g: When a user clicks on the drop-down and selects any item from it actionPerformed method is called. So how can I get that value with the help of a plugin?

[Gabriel Titerlea]

Hello,

But how can I set the name convention for them?

You need to define an action for each dropdown menu item. Each action must implement its own getDisplayName & actionPerformed methods.

You will have:

Code: Select all

var covh1 = new Covh1Action();
var covh2 = new Covh2Action();
var covh3 = new Covh3Action();

var id1 = 'covh1';
var id2 = 'covh2';
var id3 = 'covh3';

actionsManager.registerAction(id1, covh1);
actionsManager.registerAction(id2, covh2);
actionsManager.registerAction(id3, covh3);

ditaToolbar.children.push({
    name: 'Dropdown Name',
    type: "list",
    children: [
      {id: id1, type: "action"},
      {id: id2, type: "action"},
      {id: id3, type: "action"},
    ]
});

The ID used to register an action in the actionsManager must be used when describing the toolbar-descriptor. The toolbar-descriptor describes the actions from the actions manager that will be used to build the drop-down menu. The getDisplayName method of each of the actions will be called for each drop-down menu item.

Each of the 3 classes Covh1Action, Covh2Action & Covh3Action must extend the AbstractAction [1] class. Like the WebLinkAction example action from this tutorial [2].

So how can I get that value with the help of a plugin?

You must implement the actionPerformed method for all of the actions you will add to the dropdown. For example:

Code: Select all

Covh1Action.prototype.actionPerformed = function (callback) {
  console.log('the Covh 1 action was selected from the drop-down');
  callback();
};
Covh2Action.prototype.actionPerformed = function (callback) {
  console.log('the Covh 2 action was selected from the drop-down');
  callback();
};

Best,
Gabriel

[1] https://www.oxygenxml.com/maven/com/oxy ... ction.html
[2] https://www.oxygenxml.com/maven/com/oxy ... ction.html

[Rishabh]

Hi

Thanks for helping. I have successfully set up the above but I just wanted to know how can I make the icon path relative. I want to import all images from the plugin ($PLUGIN/resources/images) folder.

But If I am giving this path to the icon it is showing me some rest URLs. Please see the attached screenshot.

Screenshot from 2021-09-01 16-45-24.png

Code:

{
type: 'list',
name: 'Dropdown',
icon20: '/images/outputclass-center.png',
children: [
{id: 'action_id_1', type: "action" },
{id: 'action_id_2', type: "action" }
]
}

[Gabriel Titerlea]

Hello,

But If I am giving this path to the icon it is showing me some rest URLs. Please see the attached screenshot.

Yes, that's a mistake on my part. The URL specified in the icon20 property can only reference certain types of images (located in a framework for example).

You can use the iconDom property instead:

Code: Select all

// Create a DOM element that will be shown as the icon for the dropdown.
var icon = document.createElement('div');
// Give it a width & height otherwise it won't be visible.
icon.style.width = '24px';
icon.style.height = '24px';
// Make its background point to one of the images from your resources/images plugin directory.
icon.style.background = 'url("../plugin-resources/YOUR_PLUGIN_IMAGES/image.png")';

ditaToolbar.children.push({
  type: 'list', // type: list means this is a dropdown, all of its children will be shown when it is expanded
  name: 'Dropdown', // If no iconDom is provided the dropdown will display this name.
  iconDom: icon, // Specify the DOM element that will be shown as the icon for the dropdown.
  children: [{id: actionId, type: "action" }] // a list of action descriptors
});

For the above code to work you must also expose your plugin's static resources. You have to add a WebappStaticResourcesFolder [1] extension to your plugin.xml file:

Code: Select all

<extension type="WebappStaticResourcesFolder" path="resources/images/" href="YOUR_PLUGIN_IMAGES"/>

Best,
Gabriel

[1] https://www.oxygenxml.com/doc/versions/ ... vs_dgk_54b

[Rishabh]

Hi


thank you so much. I have set up oxygen successfully on my server. Thank you for help