Popup editor for text behind web image

[porous]

We are displaying images of composed LaTeX math markup in oXygen Editor Author view by sending LaTeX markup along with URL to a web service and retrieving the SVG image of the equation to display. It works well and is facilitated with CSS as shown below. The issue to solve now is how to provide a way for a user to click the math images and see the LaTeX code in a popup window to edit and save, since only the math image is visible to the user by design in the Author view. Can this be done, provide a way to click the image and see a popup to edit and save the LaTeX code?

Here is the XML input (JATS XML) and the CSS that creates the image display in the Author view:
In:

Code: Select all

<tex-math notation="LaTeX" version="MathJax">\ell \ne 0</tex-math>

CSS:

Code: Select all

tex-math:before {
content:  oxy_url(oxy_concat('https://math.vercel.app/?inline=', oxy_xpath("child::text()"),'.svg'));
visibility: visible;
vertical-align:baseline;
}
tex-math{font-size:0px}

Returned to author view:

[Radu]

Hi,

We have support for custom form controls, for example you can specify in the CSS to add an action (a small button) which appears near the image:

https://www.oxygenxml.com/doc/versions/ ... ction.html

For example below is an oxy_action which uses Javascript to show a Java JOptionPane dialog to the end user, then takes the value from the dialog and inserts it in the document. Something like:

Code: Select all

tex-math:before {
content:  oxy_url(oxy_concat('https://math.vercel.app/?inline=', oxy_xpath("child::text()"),'.svg')) 
      oxy_action(
          name, "Edit", 
          operation, 'ro.sync.ecss.extensions.commons.operations.JSOperation',
          arg-script, 'function doOperation() {\
          authorNode=authorAccess.getDocumentController().getNodeAtOffset(authorAccess.getEditorAccess().getCaretOffset());\
          newValue = Packages.javax.swing.JOptionPane.showInputDialog("Edit equation", authorNode.getTextContent());\
          if(newValue != null){\
          authorAccess.getDocumentController().delete(authorNode.getStartOffset() + 1, authorNode.getEndOffset() - 1);\
          authorAccess.getDocumentController().insertText(authorNode.getStartOffset() + 1, newValue);\
          }\
          }');
visibility: visible;
vertical-align:baseline;
}

My code above using Javascript to call Oxygen's Java API will work only if the custom CSS you have is part of a framework configuration.
Otherwise you can also call a custom Author operation implemented in Java.

Regards,
Radu

[porous]

This technique works and is much appreciated. Is it possible to set a larger editing window and ideally allow user resizing of the window? If there is documentation on this, it would be welcome. Thanks again for providing this solution.

[Radu]

Hi,

Yes, the Java JOptionPane can be called with a multi line text area as a parameter, something like:

Code: Select all

tex-math:before {
content:  oxy_url(oxy_concat('https://math.vercel.app/?inline=', oxy_xpath("child::text()"),'.svg')) 
      oxy_action(
          name, "Edit", 
          operation, 'ro.sync.ecss.extensions.commons.operations.JSOperation',
          arg-script, 'function doOperation() {\
          authorNode=authorAccess.getDocumentController().getNodeAtOffset(authorAccess.getEditorAccess().getCaretOffset());\
          jta = new Packages.javax.swing.JTextArea();\
          sp = new Packages.javax.swing.JScrollPane(jta);\
          sp.setPreferredSize(new Packages.java.awt.Dimension(480, 100));\
          jta.setText(authorNode.getTextContent());\
          Packages.javax.swing.JOptionPane.showMessageDialog(null, sp, "Edit Equation", Packages.javax.swing.JOptionPane.INFORMATION_MESSAGE);\
          newValue = jta.getText();\
          if(newValue != null){\
          authorAccess.getDocumentController().delete(authorNode.getStartOffset() + 1, authorNode.getEndOffset() - 1);\
          authorAccess.getDocumentController().insertText(authorNode.getStartOffset() + 1, newValue);\
          }\
          }');
visibility: visible;
vertical-align:baseline;
}

https://docs.oracle.com/javase/7/docs/a ... nPane.html

Regards,
Radu

[porous]

Thank you. This is very helpful.