Author CSS action to insert optional elements

[arcuous]

I have a schema with sequences of many optional elements. Authors are having a hard time navigating to the right place to insert a specific element type, and often can't recall which might be allowed. I see the Elements view as helpful to show what is possible, but an inline visual display where an optional element might appear would be ideal, maybe as a button or link with an oxy_action to insert that element and position the cursor.

So far I haven't found a way to do this inline, so I'm asking for any helpful advice on that.

Meanwhile, as a fallback, I have been able to add :after content where an optional element is missing, to prompt the user to add it.

This shows the prompt by default after parentElement, and overrides the prompt when the optionalElement is present:

Code: Select all

parentElement:after(N) { content: "add optionalElement"; } /* Content would be a link or button with an oxy_action in practice. */

parentElement:has(optionalElement):after(N) { content: none; }

For a schema with many sequences of optional elements, this could be very clunky to write and maintain. Each optional element would need corresponding :after(N) sections for each N.

This would be easier using the :not() selector, with something like:

Code: Select all

parentElement:not(optionalElement):after { -oxy-append-content: "add optionalElement"; } 

However, that :not() selector doesn't seem to work as I expected.

I would appreciate any advice to improve my authors' experience and I'm hoping for an elegant solution that I've missed, but I'll work with what's possible.

Thanks!
Ryan

[Radu]

Hi Ryan,

The ":not" selector does not do what you think it does, it cannot be used to match a child element:

https://developer.mozilla.org/en-US/docs/Web/CSS/:not

so you can combine it with the has() pseudo class selector that Oxygen supports:

Code: Select all

p:not(*:has(b)):after { -oxy-append-content: "add optionalElement"; } 

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

But coming back to your original use-case maybe you should try to open this sample XML document in Oxygen:

OXYGEN_INSTALL_DIR\samples\dita\lw-dita\topics\autumnFlowers.dita

and see how it is rendered in the Author mode. It has buttons which allow people to insert optional elements depending on the context.
This is done by having an XML descriptor file which describes the content model of each element:

OXYGEN_INSTALL_DIR\frameworks\dita\lw\css\actions\actionsDescriptor.xml

and an XSLT stylesheet:

OXYGEN_INSTALL_DIR\frameworks\dita\lw\css\actions\generateActions.xsl

which generates CSS based on the content model.

Regards,
Radu

[arcuous]

Perfect thank you! That selector with :not and *:has worked well.

The sample document approach seems to generate CSS in action.css for every combination of child elements.

So for a sequence of 20 ordered optional elements, it would generate 19 selectors each

[arcuous]

Please disregard this and my prior reply, I saved that before it was done. I'm still preparing my response. Thanks meanwhile!