Create a display tag dropdown with tag display options as a toolbar action in Oxygen web author

[shreya]

I want to create a dropdown as the Oxygen web author toolbar action and the options in the dropdown will change the tag display for the entire document. Is there a way to do that?

[mihaela]

Hello,

In the last version of Web Author (24.1) we added a Tags Display Mode switcher in the breadcrumb bar. Is this feature what you need for your use case or do you want to add it also on the toolbar?

You can check our demo server to test the Tags Display Mode drop down.

Best Regards,
Mihaela

[shreya]

I want to add it the toolbar as an action separately. I also need to know how to add a dropdown in the toolbar.

[Gabriel Titerlea]

Hello,

You can follow the instructions from this tutorial, to add an action to a toolbar. See the "If you want to add the action on the DITA toolbar, in a dropdown" section.

Here's an example for how to write a dropdown descriptor that lists tags related actions:

Code: Select all

{
      type: "list",
      name: "Tags Display Mode",
      displayName: tr(msgs.TAGS_DISPLAY_MODE_),
      small: true,
      toBottom: positionBottom,
      children: [{
          type: "list",
          name: "sentinels_on_toolabar",
          displayName: 'Display Name',
          iconDom: goog.dom.createDom('div', {className: 'ui-action-small-icon', id: 'sentinels_mode'}),
          children: [{
              type: "action",
              id: "Author/NoTags"
            },{
              type: "action",
              id: "Author/PartialTags"
            },{
              type: "action",
              id: "Author/InlineTags"
            },{
              type: "action",
              id: "Author/BlockTags"
            },{
            type: "action",
            id: "Author/FullTags"
          },{
            type: "action",
            id: "Author/FullWithAttrsTags"
          }]
        }
      ]
    }

Best,
Gabriel

[shreya]

Thank you for the solution.
I am trying to change tag display through plugin by invoking JS Operation but it is giving me this error "Error For security reasons, the execution of ro.sync.ecss.extensions.commons.operations.JSOperation with user-provided parameters is blocked. If the operation is safe, consider annotating it with ro.sync.ecss.extensions.api.webapp.WebappRestSafe.". How to get around that or what else should I use to change tag display through plugins?

[Gabriel Titerlea]

Hello,

I am trying to change tag display through plugin by invoking JS Operation

You don't need to call a JSOperation. The actions that change the tags display mode are already available to call/add to a toolbar from a javascript plugin.

The actions are registered with these IDs: Author/NoTags, Author/PartialTags, Author/InlineTags, Author/BlockTags, Author/FullTags, Author/FullWithAttrsTags

You can write custom javascript code that changes the structure of a toolbar by following this example.

You can find an example plugin here, as a starting point.

And here's an example for how to add the tags-related actions to the DITA toolbar:

Code: Select all

workspace.listen(sync.api.Workspace.EventType.BEFORE_EDITOR_LOADED, function(e) {
  var editor = e.editor;
  editor.listen(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[i];
        if (toolbar.name === "DITA") {
          ditaToolbar = toolbar;
        }
      }
    }

    if (ditaToolbar) {
      ditaToolbar.children.push({
        type: "list",
        name: "Tags Display Mode",
        displayName: tr(msgs.TAGS_DISPLAY_MODE_),
        children: [{
          type: "action",
          id: "Author/NoTags"
        },{
          type: "action",
          id: "Author/PartialTags"
        },{
          type: "action",
          id: "Author/InlineTags"
        },{
          type: "action",
          id: "Author/BlockTags"
        },{
        type: "action",
        id: "Author/FullTags"
      },{
        type: "action",
        id: "Author/FullWithAttrsTags"
      }]
      });
    }
  });
});

Best,
Gabriel

[shreya]

Hi, actually I am not using DITA toolbar. It's a normal custom toolbar and these IDs are not working there.

[Gabriel Titerlea]

Hello,

It's a normal custom toolbar and these IDs are not working there.

How are you building this custom toolbar? You can push a toolbar descriptor to the actionsConfig.toolbars [1] list during the ACTIONS_LOADED [2] event to create your own toolbar. The code I posted should work for any toolbar, not the DITA toolbar specifically.

Best,
Gabriel

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

[shreya]

Hi, I have used the same code as you have given. The dropdown comes in the toolbar in the web author but on click of any of the dropdown action, the tags are not changing. There are no errors as well. It is just not reflecting. Similarly, I have tried to achieve the same with framework as well. It works in the Oxygen XML Editor but after importing the same framework in the Oxygen Web Author, I'm facing the same problem. The dropdown comes up in the toolbar but functionality not working. Is there anything I'm missing?

[Gabriel Titerlea]

Hello,

There are no errors as well. It is just not reflecting

We need more information to help you. Are there any errors in the browser's console? Can you share your code?
You can upload an archive with relevant information here.

Best,
Gabriel

[shreya]

I have created a dropdown for changing the tag display mode in the custom toolbar. I have tried to do that using the framework and also as well as using plugin. But I am facing problems with each of these processes. The dropdown is coming up in the toolbar but on click of the action, no changes are reflecting on the screen. There are no browser console errors present either. I am loading the oxygen web author like this :
http://localhost/oxygen-xml-web-author/ ... Only=false

Even when I am trying to invoke operation as editor.getActionsManager().getActionById("Author/InlineTags").actionPerformed(callback) , nothing is happening.

I am also updating we are updating editor options on 'BEFORE_EDITOR_LOADED' event like below:

Code: Select all

e.options["tags-mode"] = 'full-tags-with-attributes';
        e.options["compactTagsMode"] = false;
        e.options.modes = 'edit';
        e.options.searchMode = "dialog";
        e.options.autoSaveInterval = 0;
        e.options.contentType = "application/xml;charset=utf-8";
        if(e.options.textModeReadOnly == "true"){
            editor.setReadOnlyState({
                readOnly: true,
                message: 'Content is not checked out',
                code:'0'
            })
            editor.setReadOnlyStripeRenderer((state, renderer) => {
                renderer.parentElement.remove(renderer);
            })
            e.options.textModeReadOnly = false;
        }

After that I have added the code which you had shared previously. I am not sure If I am missing something or if anything is getting overriden. Kindly check and let me know.

[cristi_talau]

The "tags-mode" loading option is imposing the "full-tags-with-attributes" display mode. If you just want to provide a default, you can use the following server option "tagless.editor.tags.display.mode" which is documented here: https://www.oxygenxml.com/doc/versions/ ... splay.mode .

[shreya]

Hi,
Even after removing the "tags-mode" loading option there was no difference. I mean the dropdown actions are still not reflecting any changes in the editor. Is there any way to fix it?

[Gabriel Titerlea]

Hello,

If removing this line

Code: Select all

e.options["tags-mode"] = 'full-tags-with-attributes';

does not work, try to inspect the

Code: Select all

e.options

object (console.log('Loading options: ' + e.options)). Maybe the tags-mode property is set in the URL query params?

If you can't find the cause of the problem please upload a more significant code sample from your plugin to help us reproduce this problem on our side.

Best,
Gabriel

[shreya]

Hi,
So the tags-mode was getting set in the query params which I had not noticed before. Thank you for pointing it out. It works well now.

[shreya]

Hi,
Is there any way to make any edits to the code of the preset tag display IDs of "Author/NoTags", "Author/PartialTags", "Author/InlineTags", "Author/BlockTags", "Author/FullTags", "Author/FullWithAttrsTags". I want to add a class at the click of each of these actions. Is there any way to achieve that.?

[Gabriel Titerlea]

Hello,

What are you trying to achieve? Do you want to set a CSS class for the Web Author user interface, or a CSS class/pseudo-class in the edited XML document? What is the expected result of the class change?

Best,
Gabriel

[shreya]

Hi, I have added another action to the tag display dropdown. The "limited tags" option will add a css class "limited" to change some styles in the document. Now on click of other tag display options, I want to remove the class but I am not able to do so. Is there any event where I can check which action is called on click. or is there any other way to do that?
This is my code:

Code: Select all

var tagDisplayObj = {
	type: "list",
	name: "Tags Display Mode",
	displayName: tr(msgs.TAGS_DISPLAY_MODE_),
	iconDom: goog.dom.createDom('div', {className: 'ui-action-large-icon', id: 'sentinels_mode', style: 'background-image: url(../plugin-	resources/content-plugin/images/tagDisplaySettings.png);'}),
        children: [{
		type: "action",
		id: "Author/NoTags"
		}, {
		type: "action",
		id: "Author/PartialTags"
		}, {
		type: "action",
		id: "Author/InlineTags"
		}, {
		type: "action",
		id:  "Author/BlockTags"
		}, {
	        type: "action",
		id: "Author/FullTags"
		}, {
		type: "action",
		id: "Author/FullWithAttrsTags"
		},{
		type: "action",
		id: "content/limitedTags"
	}]
};
			
class LimitedTags extends sync.actions.AbstractAction {
    #editor;
    constructor(editor) {
        super();
        this.#editor = editor;
    }

    renderLargeIcon() {
        var largeIcon = "../plugin-resources/content-plugin/images/tc-icon.png";
        return sync.util.renderLargeIcon(largeIcon);
    }

    renderSmallIcon() {
        var smallIcon = "../plugin-resources/content-plugin/images/tc-icon.png";
        return sync.util.renderSmallIcon(smallIcon);
    }

    getDisplayName() {
        return 'Limited Tags';
    }

    getDescription() {
        return "Displays tags with limited display.";
    }

    actionPerformed(callback) {
		document.querySelector("#editor-frame-wrapper").classList.add("limited");
        callback();
    }
}
			

[Gabriel Titerlea]

Hello,
You can call custom code after the tags-display mode has changed like this (repeat for all tag-related actions):

Code: Select all

var action = this.actionsManager.getActionById('Author/FullTags');

// save the original actionPerfomed method
var actionPerformed = action.actionPerformed;

// replace the actionPerformed method with one that adds custom code at the end
action.actionPerformed = callback => {
   // call the original actionPerfomed
   actionPerformed.call(action, () => {
     // custom code here. the original actionPerformed has finished

     // Don't forget to call the callback function when your custom code has finished.
      callback();
  });
};

Best,
Gabriel