search

ABenassi87 / ngx-text-diff

A Text Diff component for Angular
https://ngx-text-diff.herokuapp.com/home
50 stars 44 forks source link

Copying text copies line numbers as well. #63

Open TeddyBonkerz opened 3 years ago

TeddyBonkerz commented 3 years ago

Is there anyway to prevent the '+' and line number from being copied ? image

therealryan commented 2 years ago

You can set the user-select CSS property to none on those elements. Ideally this would be built in to this project, but until that happens you can do the following in your component that uses td-ngx-text-diff.

Configure the component to allow CSS from the parent to apply to child components with encapsulation: ViewEncapsulation.None, e.g.:

@Component({
  selector: 'app-foobar',
  templateUrl: './foobar.component.html',
  styleUrls: ['./foobar.component.css'],
  encapsulation: ViewEncapsulation.None
})

Add the styles to foobar.component.css:

.td-wrapper .line-number-col {
  user-select: none;
}
.td-wrapper .line-number-col-left {
  user-select: none;
}
.td-wrapper .prefix-col {
  user-select: none;
}

Note that since we're taking the unusual step of allowing CSS from the parent to affect child components were taking extra care to target the elements of interest. If there's zero chance of your component using, e.g.: class="prefix-col" outside of the diff component then you can omit the leading .td-wrapper selector.