fix(code-highlighter): ensure HTML formatted code is correctly copied

[SteaceP]

This pull request simplifies the code in the code-highlighter.vue component by removing unused imports and streamlining the copy-to-clipboard functionality. The main focus is on reducing complexity, improving maintainability and fixing the broken button.

Code simplification and cleanup:

• Removed the unused useCopyClipboardItems import and related logic, replacing it with a simpler usage of the existing useCopy composable for copying HTML-formatted code. [1] [2]
• Removed the unnecessary computed property htmlClipboardItems and now directly passes formattedCodeHtml as the source to useCopy.

[sharevb]

Hi @SteaceP , thanks for this PR, but it sounds like this will break direct pastability in Word by the lack of mime type text/html. Copying html as text/plain is not what was asked in related issue. May be could we could add a useCopyWithMimeType to simplify

[SteaceP]

Sorry I didn't saw that issues. I was trying to use the tools and it wasn't working at all.
That's a good idea to add a useCopyWithMimeType. I'll modify this PR to include it.

[sharevb]

But did you get any error in F12 console ? Sounds like ClipboardItem only works in HTTPS

[SteaceP]

Yes I did get an error, but I though about ssl... Then when I tried with ssl it wasn't coping the HTML just the text since I was coping in notepad.
It is a dev tool, with a button to copy to HTML. I never thought at first to copy it in Word document or something similar.
Well, I modified the button to copy to Word/Rich Text when necessary.

[sharevb]

For reference, it comes from here: CorentinTh#1280

[sharevb]

May be would be interesting to add a button to copy Raw Html, rename existing button, and refactor for a copy to html instead of raw ClipboardItem. For now, I am in vacation and only respond by smartphone

[SteaceP]

May be would be interesting to add a button to copy Raw Html, rename existing button, and refactor for a copy to html instead of raw ClipboardItem. For now, I am in vacation and only respond by smartphone

The copy button will now be able to paste using Rich text in Word, etc. and HTML formated in other like VScode automaticaly.
I added a new slider with a popup text because when pasted in Outlook while using the dark them it has a white background, it's way better now.
edit: I forgot to remove the console.log... I also forgot to sleep tonight! I'll wait for the last commit in case you want me to modify something else.

[sharevb]

Hi @SteaceP , I have some concern about actual code, but many thanks for testing in Outlook. Could be better to create a generic useCopyHtml with fallback if ClipboardItem failed. Also i18n extraction. And maybe shikijs/shiki#742 and may be allowing independant dark light mode and even mso attributes for formatting. And finaly I think about a html to email html tool

[sharevb]

Hi @SteaceP, I just made a change to make a generic useCopyHtml, I let you may be:

• factorize font-family: Consolas, Monaco, \'Courier New\', monospace and other common CSS
• add a separate option "Make Outlook Compatible" apart from "Make transparent"
• if you can extract UI text you add

Many thanks