Link attribute in web author for PI element not working

[ashukuma]

HI Team,

We have introduced usage of Acrolinx and its data to be embedded in topics. We have done some css changes to style the content to be properly visible in web author. The PI that gets inserted is:

<?acrolinxCheckData timeStarted="2020-08-24T07:29:11.534Z" score="82" status="green" scorecardUrl="server_report.html" ?>

I read the content from PI and showing only date, score with status and the url along with three pseudo classes (before) to display the content as per our expectation.

oxy|processing-instruction[acrolinxCheckData]{
-oxy-display-tags: none!important ;visibility:-oxy-collapse-text;
background-color : rgb(255 , 255 , 240) !important ;
border-top-color : rgb(179 , 179 , 161) !important ;
border-right-color : rgb(179 , 179 , 161) !important ;
border-left-color : rgb(172, 172, 172) !important ;
border-bottom-color : rgb(179 , 179 , 161) !important ;
margin-top : 0.5em !important ;
margin-left: 0.5em !important;
padding-top : 0.3em !important ;
padding-bottom : 0.3em !important ;
border-bottom-width : 1pt !important ;
border-bottom-style : solid !important ;
border-left-width : 1pt !important ;
border-left-style : solid !important ;
border-right-width : 1pt !important ;
border-right-style : solid !important ;
border-top-width : 1pt !important ;
border-top-style : solid !important ;
border-radius: 10px !important;
width: 300px !important ;

}

This section was created to pick the URL and show as link in author mode in oxygen eclipse as well as oxygen web author.
The link is working properly in eclipse but it is not working in web.

oxy|processing-instruction[acrolinxCheckData]:before{
content:"Quality Check" !important ;
link: attr(scorecardUrl);
display : -oxy-morph !important ;
color : blue !important ;
padding-right : 15px !important ;
padding-left : 15px !important ;
font-weight:bold;
text-decoration: underline;
padding-top : 10px !important ;
padding-bottom : 10px !important ;
}


How can we solve this?

Regards,
Ashu

[joshacrolinx]

Hello Ashu,

Can you please create a ticket with Acrolinx and we will address your issue. You can find how to do this here: https://docs.acrolinx.com/kb/en/custome ... 31247.html

Thanks,
Josh

[ashukuma]

Hi Josh,

This is not an issue with Acrolinx but more on how oXygen web author CSS handles the content. If you see the code, I have discussed about showing the content in oXygen Eclipse which works perfectly but in case of web, the link is not clickable.

[mihaela]

Hi,

Indeed the link does not work when added on processing instructions before pseudo element. I have added an issue for this in our internal issue tracker. We will update this thread when a fix will be available.

As a workaround you can add a button that uses the ro.sync.ecss.extensions.commons.operations.OpenInSystemAppOperation to open the url provided by the scorecardUrl property:

Code: Select all

oxy|processing-instruction[acrolinxCheckData]:before{
    content:oxy_button(action, oxy_action(
          name, 'Quality Check', 
          operation, 'OpenInSystemAppOperation', 
          arg-resourcePath, './substring-before(substring-after(string(), \'scorecardUrl="\'), \'"\')')) !important ;
}

Best regards,
Mihaela

[ashukuma]

Thanks Mihaela,

This does work. I just tried add transparency to merge the button with background. The button click opens first the page as overlay but refused to show the content. When I checked in console, I found the below error:

Refused to display 'https://serverurl/report.html' in a frame oxygen.html?<some long url> because it set 'X-Frame-Options' to 'sameorigin'.

Is there any setting that clicking on the button could open the page in new tab instead of overlay page?

Please note, the overlay does give the option to open the link again in new tab.

Regards,
Ashu

[mihaela]

Hi,

Indeed we should remove the preview dialog if the opened resource type is html. I added an issue in our internal issue tracker for this.

What you can do is to use a custom js action (instead of "OpenInSystemAppOperation") in the oxy_button, that directly opens the url in the new tab.
Here is a tutorial about creating custom actions and adding them to the actions manager:
https://www.oxygenxml.com/maven/com/oxy ... ction.html
You will also need to use the DOM Api to obtain the url from the "scorecardUrl" property:
https://www.oxygenxml.com/maven/com/oxy ... .Node.html
The node at selection is accessible from:
https://www.oxygenxml.com/maven/com/oxy ... on__anchor

Best Regards,
Mihaela

[ashukuma]

Hi Mihaela,

We do not want to have any toolbar or content menu edition. We just want to launch the page when the link is clicked inside processing-instruction. Is it possible to share a sample code to start with which explains how the linking should be used?

I tried with the following code just to check if it can pick the current element but it failed.

WebLinkAction.prototype.actionPerformed = function(callback) {


var nodename = sync.api.dom.Node.getNodeAtCaret();
if(nodeName == "processing-instruction")
{
nodeVal = nodename.nodeValue;
console.log(nodeVal);
}


if (text) {
this.editor.getActionsManager().invokeOperation(
'ro.sync.ecss.extensions.commons.operations.SurroundWithFragmentOperation', {
fragment: '&lt;' + 'xref href="' + text + '"/>'
}, callback);
} else {
callback && callback();
}
};

Regards,
Ashu

[cristi_talau]

Hello,

You should load the JS code below using one of the approaches here [1].

Code: Select all

class OpenScoreCard extends sync.actions.AbstractAction {
  constructor(editor) {
    super();
    this.editor = editor;
  }
  actionPerformed(cb) {
    var selectionManager = this.editor.getEditingSupport().getSelectionManager();
    var nodeAtSelection = selectionManager.getSelection().getNodeAtSelection();
    var content = nodeAtSelection.textContent;
    var url = /.*scorecardUrl="([^"]+)".*/.exec(content)[1];
    window.open(url);
    cb();
  }
  getDisplayName() {
    return 'Quality Check';
  }
}

workspace.listen(sync.api.Workspace.EventType.BEFORE_EDITOR_LOADED, function(e) {
  e.editor.getActionsManager().registerAction('open.score.card', new OpenScoreCard(e.editor));
});

Then, in the CSS add the following rule:

Code: Select all

@media oxygen AND (platform:webapp) {
  oxy|processing-instruction[acrolinxCheckData]:before{
    content:oxy_button(actionID, 'open.score.card') !important ;
  }
}

With this code, you should be able to obtain the behavior you want in Web Author.

Best,
Cristian

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

[ashukuma]

Hi Cristi,

Thanks for the solution. But, when I placed the JS file (as OpenScoreCard.js) in web folder and the css code in css file, the button name is shown as Unknown with tooltip as unknown action ID: open.score.card. When I click on the button, it shows the following error.

Unknown action ID: open.score.card. The document must have an associated Document Type in which an action with the given ID must be declared.

Is there anything that I am missing? I also tried with if (sync.ext.Registry.extension.type === 'dita') {<placed the js code here>}, same error is thrown.

Regards,
Ashu

[cristi_talau]

Hello,

I tested and it seems that the code in the framework is loaded later than the button is rendered. You can implement a small plugin with the JS code I sent you.

The plugin needs to contain only two files:

plugin.xml - The content structure should look like the following snippet, where you change the ellipsis with the details of your plugin:

Code: Select all

<!DOCTYPE plugin SYSTEM "../plugin.dtd">
<plugin
  class="ro.sync.exml.plugin.Plugin"
  id="..."
  name="..."
  description="..."
  version="1.0"
  vendor="...">
</plugin>

web/plugin.js - This file contains your JS code that uses the Oxygen XML Web Author JavaScript API.

To use it, create an archive with the structure mentioned above (i.e. plugin.xml in the root of the archive) and upload it using the Web Author's Admin Page.

Best,
Cristian

[ashukuma]

Hi Christian,

I have added the files as per your suggestion below and uploaded the plugin.

web-author-acrolinx-plugin/plugin.xml
web-author-acrolinx-plugin/web/plugin.js

After doing the changes, I have refreshed the page while the browser console was open. This is the top output from browser console:
goog.events.Event {type: "editor_loaded", target: s…c.Workspace, currentTarget: s…c.Workspace, propagationStopped_: false, defaultPrevented: false, …}
currentTarget: sync.Workspace {disposed_: false, onDisposeCallbacks_: undefined, eventTargetListeners_: g…g.e…s.ListenerMap, actualEventTarget_: s…c.Workspace, parentEventTarget_: null, …}
defaultPrevented: false
editor: sync.Editor
actionsManager: sync.actions.ActionsManager
actionsById: goog.structs.Map
count_: 133
keys_: Array(165)
[0 … 99]
0: "open.score.card"
1: "insertfrommenu"
2: "Author/ViewOriginal"
3: ".....
.

I could still find that when I hover the button, I get tooltip as Unknown action id: open.score.card.

Regards,
Ashu

[cristi_talau]

Hello,

Indeed, the tooltip is not updated. I registered a bug for this behavior. I will update this forum thread when it will be fixed.

Best,
Cristian

[ashukuma]

Moreover, the browser is also throwing error when I click on the button.

The values of the variables defined in the code returned empty.

Content nodeAtSelection -> [object Object]
plugins.js:181 Content nodeAtSelection -> [object Object]
plugins.js:183 Content -> undefined
plugins.js:185 URL -> null

[cristi_talau]

Hello,

The code snippet above works in Web Author version 22.1. For older versions you can replace nodeAtSelection.textContent with nodeAtSelection.getTextContent().

Best,
Cristian

[cristi_talau]

Hello,

I am writing to let you know that Oxygen XML Web Author version 23 was released and now if you use OpenInSystemAppOperation, the link is opened directly in a new tab. This way errors related to pages that do not support being loaded in an iframe are fixed.

For more details about this release you can check out the what's new page: https://www.oxygenxml.com/xml_web_author/whats_new.html .

Best,
Cristian

[Gabriel Titerlea]

Hello,

Oxygen XML Web Author version 23.1 has been released and form-control action tooltips no longer say "Unknown action id" when the action is defined using javascript.

For more details about this release you can check out the what's new page: https://www.oxygenxml.com/xml_web_autho ... 3.1.0.html .

Best,
Gabriel