Keep text format when copy/paste from Angular Application

Question

I've realized that when I try to copy/paste a text from an Angular Application to any text editor software (ie Microsoft Word), all the text loses the original format.

I'm using as example the angular material website: https://material.angular.io/

When I copy the text and past in Microsoft Word:

Thats means, the pasted text lost the center alignment, the color and de font type.

Is there a way to keep the website format? I know that the font used by Angular Material is different from text editor, but there are another things that could be mantained (i.e. alignment, color, etc).

I've started a project using Angular 8 + Angular Material and I'm facing the same problem.

Answer 1

Well, you're not likely to get a straight copy/paste action to do what you're requesting.

Why it doesn't work as you expect:

Copy & Paste out of MS Word for example and you'll get Rich Text where all the formatting is part of the data payload. When you copy this to the clipboard all that extra styling metadata goes along with the text. If you paste that data INTO a rich text editor (not a straight text input) like Wordpress's Admin that editor package translates the text metadata that you can't see into equivalent HTML styling.

However, When you copy from HTML (in your browsers) all you're getting is the text without all the "rich" formatting. This happens because a browser uses outside context like DOM position, tag type, and CSS to style the HTML content into what is presented for you to see.

Rich text copy for just YOU

There are multiple browser plug-ins for Chrome and Firefox that will intercept your copy request, create formatting and then paste that to the clipboard. Just ask Google for recommendations.

Rich text copy for all users of a project

This, unfortunately, is more complicated. You will need to write code to do the following (this answer has a good example):

1. Figure out what the user is trying to copy (usually mapped to selected text).

2. Convert that content into rich text format. The example above simply copies the HTML but that won't get styling applied by external CSS. Packages like Quill MIGHT give you the option to get rich text back out.

3. Copy your converted text to the user's local clipboard. You shouldn't hijack browser commands to do this which is why you frequently see a "copy to clipboard" button to do this action. You can move content to the user's clipboard using the Clipboard API in most modern browsers.

4. Oh and you'll need the user's permission to do all this since proactively interacting with the user's clipboard presents a pretty massive security issue.