Copy/paste content of centred code block

[ilg-ul]

For the documentation of my packages I would like to show in the home page the recommended command to install the package, but centred and with the width adjusted to the actual size, not the full window.

Something like this:

The Doxygen implementation wraps the code fragment with a new <div>:

@htmlonly

<div class="command">
  <div class="fragment">
    <div class="line">xpm install @micro-os-plus/utils-lists@latest --verbose</div>
  </div>
</div>

@endhtmlonly

The CSSs are:

div.command {
  padding-top: 16px;
  display: flex;
  justify-content: center;
}

div.command div.fragment {
  padding-left: 3em;
  padding-right: 3em;
}

div.command div.fragment div.line {
  text-align: center;
}

Unfortunately there are several things not going according to plan:

• first, a small nuisance, the position of the extra SVG icon is not vertically centred, it is rendered to the top. I guess this is due to the display: flex;, but my knowledge of CSS is very poor, and I don't know how to achieve this with a better configuration :-(

• then, a worse issue, when I use the copy button, I get some extra content, which is not trimmed by the existing code:

ilg@wksi ~ % echo "[
    xpm install @micro-os-plus/utils-lists@latest --verbose
  ]"

I took a look at the doxygen-awesome-fragment-copy-button.js code, and it gets the content from its previous sibling, which, in my understanding of the layout, should not be affected by my extra <div>.

I would highly appreciate any help to fix this issue.

Thank you,

Liviu

[jothepro]

Regarding he off-centered button: I figured out that the absolute positioning of the button doesn't work well with the flexbox environment.
This needs further investigation, but a quick fix should be:

.command .fragment {
  margin: 0;
}

The extra whitespace and newline in the copied content seems to be caused by the formatting of the raw HTML. If you change the HTML to a version without newlines and indentation, the additional whitespace is gone:

<div class="command">
<div class="fragment"><div class="line">xpm install @micro-os-plus/utils-lists@latest --verbose</div></div>
</div>

Doxygen seems to not indent the generated HTML properly, so this never was a problem. But I agree that the copy functionality should not be affected by indentation of the HTML. The JS code doing the copy may need some polishing.

[ilg-ul]

a quick fix should be ... margin: 0;

Indeed! This fixed the alignment.

The extra whitespace and newline ... If you change the HTML to a version without newlines and indentation ...

Again, spot on!

The JS code doing the copy may need some polishing.

You mean adding a .trim()? That shouldn't be difficult. If you want me to do a small PR with it, I can do it.

Thank you for your help!

[jothepro]

You are very welcome to open a PR on that! :) Maybe .trim() could also replace the for loop that removes trailing newlines in L70-L74?

But still in a multiline listing my guess is that indentation would be messed up if the HTML is indented properly. I think instead of content.textContent in L68 one needs to iterate over all line children of content and gather their textContent one by one.

maybe like this?

let output = "";
content.foreach((node) => {
  output += `${node.textContent}\n`
})
output.trim();

If you could make it work and test it, this would be a huge help for me!
Also keep in mind that the copy button needs to work on both the normal code listings and the file listings like this one: https://jothepro.github.io/doxygen-awesome-css/example_8hpp_source.html

[ilg-ul]

I did some tests and I'm a bit confused, since explicitly iterating the children doesn't seem to make any difference.

The full code I used is:

       let textContent = ""
        if (content.hasChildNodes()) {
            content.childNodes.forEach((node) => {
                textContent += node.textContent
            })
        } else {
            textContent += content.textContent
        }
        navigator.clipboard.writeText(textContent.trim());

However, for the code blocks that are in my project, a simplified code that does not iterate over the children has the same effect:

        let textContent =  content.textContent
        navigator.clipboard.writeText(textContent.trim());

I may be wrong, but my feeling is that the .textContent property already concatenates the content of its children.

And, inspecting the html code behind a code block shoes a more complex hierarchy of elements, so iterating over a single level doesn't make much sense.

Please advice on how to proceed.