ngx-markdown icon indicating copy to clipboard operation
ngx-markdown copied to clipboard

Clipboard copy button has wrong position when using Content projection (select attribute)

Open klofi opened this issue 5 months ago • 0 comments

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:

  1. Open https://stackblitz.com/edit/ngx-markdown-issue-536
  2. Observe "Copy" button is in correct position in typescript code example ✔️
  3. Click on "Without markdown" button, Content projection will remove conent with markdown
  4. Click on "With markdown", Content projection will readd conent with markdown
  5. Observe "Copy" button is in wrong position all the way at the bottom ❌
  6. 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.

klofi avatar Sep 13 '24 11:09 klofi