ngx-markdown
ngx-markdown copied to clipboard
Clipboard copy button has wrong position when using Content projection (select attribute)
When using <markdown>
with clipboard
in Content projection (select
attribute), the copy button is only placed in right position the first time. Once the content is removed/readded, the button will be placed just below markdown element.
Partial workaround:
The button can be forced to be re-rendered again to correct position via re-render this.markdownService.reload();
, but that does not remove the previous instance of the button. Perhaps that could be fixed by calling destroy() on the existing componentRef when re-rendering. The componentRef is created in: https://github.com/jfcere/ngx-markdown/blob/c8d157fa69b3597cfd44409dc9de74dae629b83d/lib/src/markdown.service.ts#L417
Here is a repro using modified official stackblitz:
- Open https://stackblitz.com/edit/ngx-markdown-issue-536
- Observe "Copy" button is in correct position in typescript code example ✔️
- Click on "Without markdown" button, Content projection will remove conent with markdown
- Click on "With markdown", Content projection will readd conent with markdown
- Observe "Copy" button is in wrong position all the way at the bottom ❌
- Ugly and hacky workaround: Click on "Re-render" button and new "Copy" button will be placed in corrent position. You can hide the old via css.