Adding event listener to images

[manojdcoder]

I would like to detect when a user clicks or double click on an image in DITA document. Any points how it could be done?

[cristi_talau]

Hello,

Currently, there is no API to intercept mouse events on an image. To implement such API we need to understand your use-case better:

• Would it be sufficient to call sync.actions.AbstractAction when the use double-clicks the image?

• Do you want to do a specific thing, like turn resize handles on?

As a workaround you can implement a custom form control that renders the image and reacts to editing events. This is the approach we did for MathML [1] and embedded SVG images [2].

Best,
Cristian

[1] https://github.com/oxygenxml/web-author-mathml-plugin
[2] https://github.com/oxygenxml/web-author-svg-plugin

[manojdcoder]

Yes, basically I would like to call sync.actions.AbstractAction with intention to switch current image with a different one using a custom file chooser dialog.

[cristi_talau]

Hello,

Starting with version 23.0 (to be released soon), Web Author can be configured to display a contextual floating-toolbar when the user selects an image (e.g. by clicking on it). This floating toolbar could contain a button to trigger the "Replace Image" action that you plan to implement. Do you consider this behavior sufficient?

The only problem is that currently, the image is not selected when the user clicks it. We have a registered issue to fix this. Meanwhile, you can use the following code snippet in a plugin:

Code: Select all

// This code uses undocumented API!!
document.onclick = function(e) {
    if (e.target.classList.contains('oxy-img')) {
        var editor = workspace.currentEditor;
        var imgElement = sync.api.dom.createApiNode(e.target);
        var selectionManager = editor.getSelectionManager();
        var sel = selectionManager.createAroundNode(imgElement)
        selectionManager.setSelection(sel);
    }
};

Best,
Cristian

[manojdcoder]

It worked perfectly, thank you.

[Gabriel Titerlea]

Hello,

We have released Oxygen XML Web Author 23.1 [1]. Among other fixes, clicking an image selects the whole image element now.
So you can write a CSS rule that targets selected images to add your custom floating toolbar [2] near them.

Best,
Gabriel

[1] https://www.oxygenxml.com/xml_web_autho ... 3.1.0.html
[2] https://www.oxygenxml.com/doc/versions/ ... perty.html