HTML serialization #3619

silamon · 2022-01-29T19:14:27Z

Fixes #1883
Makes use of the existing serialize addon and the templates

meganrogge · 2022-02-01T18:14:27Z

Thanks for working on this.

Could you please:

add information about how embedders are expected to hook this up to copy from selection
revert the formatting changes made to client.ts
maybe I'm doing something wrong, but the demo doesn't seem to work for me
- the button says it copies, but it doesn't.
- when I copied the output manually and pasted it in:
  - the vscode editor, it didn't produce the expected result or any red text
  - apple notes, it didn't produce the expected result - all of the text was colored red

silamon · 2022-02-02T17:05:00Z

Selection has been added, but unfortunately broke some existing tests. I'll fix that when I have time. :)
I've used the new asynchronous clipboard api, but a lot of browsers don't support it. I've replaced that with a deprecated alternative, which seems to be more supported anyway.

meganrogge · 2022-02-02T17:21:54Z

Thanks for making the updates.

Can you pls clarify how I should be testing this?

I have some colored text in the demo, click the serialize button, copy and paste it into other apps and am still not seeing the right thing.

meganrogge · 2022-02-02T17:26:02Z

from what I've read, it looks like an embedder would have to intercept the copy event, set the data format as 'text/html' and provide the serialized data.

it looks like you're doing that in the code, but it's not working for me. I'll try a different browser.

silamon · 2022-02-02T17:28:49Z

When you click the 'serialize' button, it should add a html code onto your clipboard of the selected part of the terminal. Don't copy the html in the visible window, that's there for debugging or to save as html manually if copy to clipboard doesn't work. From as soon as the button is clicked, you should be able to paste the selected part in an editor that supports pasting html like word or something like that.

meganrogge · 2022-02-02T17:31:59Z

Doesn't work for me in edge, but I see it working for some cases that I've tried in Chrome 👍🏼.

Eugeny · 2022-02-02T18:55:15Z

Copying itself does work reliably for me in Chrome, however when the alternate screen is active, it still copies random content from the primary screen.

meganrogge · 2022-02-02T20:12:52Z

It actually does work in edge for me as well. I was expecting the background color to match that of the terminal, but perhaps that's not necessary.

I see that's done here if it's set

https://github.com/xtermjs/xterm.js/pull/3619/files#diff-9879222d670ac4c1d89f8fa8bc3051f5a51ee5bf1edbfad958e17ecaba1ff25bR565-R566

Tyriar

Thanks for the PR @silamon, looks pretty close 😍

demo/client.ts

addons/xterm-addon-serialize/src/SerializeAddon.ts

demo/client.ts

Eugeny · 2022-02-02T21:03:55Z

BG/FG colors were correct in the HTML I got, although when I first tested it by pasting into Word, it turned out inverted - that's Word's problem though, the HTML itself is correct and opening it in Chrome gets the colors right.

meganrogge · 2022-02-03T02:14:05Z

Yes @Eugeny I saw the same - it was inverted in apple notes, but not in chrome.

Co-authored-by: Daniel Imms <2193314+Tyriar@users.noreply.github.com>

silamon · 2022-02-03T18:45:57Z

I can't seem to reproduce the text being pasted inverted. Do you see colored text in that paste or is it just clear text in black?

Eugeny · 2022-02-03T18:59:53Z

@silamon it's all colored with the exception of black and white being inverted. I don't even think it's your fault - my custom HTML copy implementation suffers from the same if background and foreground are #000 and #fff respectively.

Tyriar · 2022-02-10T17:20:07Z

demo/client.ts

+  function listener(e: any) {
+    e.clipboardData.setData("text/html", output);
+    e.preventDefault();
+  }
+  document.addEventListener("copy", listener);
+  document.execCommand("copy");
+  document.removeEventListener("copy", listener);


I've used the new asynchronous clipboard api, but a lot of browsers don't support it. I've replaced that with a deprecated alternative, which seems to be more supported anyway.

It would be better if we moved on to more modern APIs like navigator.clipboard, it looks like just IE doesn't support writing to the clipboard which doesn't matter https://caniuse.com/async-clipboard

I've tested with navigator.clipboard in the first commit and Firefox doesn't support it. The caniuse link does mention that as well.

demo/index.html

addons/xterm-addon-serialize/typings/xterm-addon-serialize.d.ts

Tyriar · 2022-02-10T17:30:58Z

addons/xterm-addon-serialize/typings/xterm-addon-serialize.d.ts

+     *
+     * @param options Custom options to allow control over what gets serialized.
+     */
+    public serializeAsHTML(options?: Partial<IHTMLSerializeOptions>): string;


We should add some basic test to SerializeAddon.api.ts that cover:

Each option

Colored/styled vs all default color/style text

I'll write some unit tests as soon as I have time. :)

Tests have been added. Unfortunately, not as playwright tests since I couldn't get it to work at this moment.

Tyriar · 2022-02-10T17:31:47Z

Looks good other than those comments 👍

meganrogge · 2022-02-22T16:21:52Z

The tests look good 👍🏼 thanks

html serialization

6dc813b

meganrogge self-assigned this Feb 1, 2022

improvements for html serialize

09a7799

meganrogge and others added 2 commits February 2, 2022 11:13

Merge branch 'master' into htmlserialize

a359647

Fix serialize tests

9473777

Fix serialize tests

adedfed

silamon added 2 commits February 2, 2022 18:57

Fix serialize tests

bc9e6b4

Use alternate buffer if alternate buffer is active

93ac9ef

Tyriar requested changes Feb 2, 2022

View reviewed changes

Tyriar added this to the 4.18.0 milestone Feb 3, 2022

silamon and others added 3 commits February 3, 2022 18:55

Apply suggestions from code review

1625738

Co-authored-by: Daniel Imms <2193314+Tyriar@users.noreply.github.com>

Apply feedback from code review

4d70606

fixup text/plain removal

4c1722d

meganrogge and others added 3 commits February 3, 2022 23:15

Merge branch 'master' into htmlserialize

a64d352

Merge branch 'master' into htmlserialize

e96b709

Merge branch 'master' into htmlserialize

d64cbc4

Tyriar requested changes Feb 10, 2022

View reviewed changes

silamon and others added 3 commits February 12, 2022 09:42

text improvements

4ca26f7

tests for serializeAsHTML

92a61e6

Merge branch 'master' into htmlserialize

365a079

meganrogge merged commit c16b45c into xtermjs:master Feb 22, 2022

meganrogge mentioned this pull request May 6, 2022

Using "Copy as HTML" option on selection in Terminal copies text with wrong background color microsoft/vscode#148937

Closed

silamon deleted the htmlserialize branch October 16, 2022 09:51

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

HTML serialization #3619

HTML serialization #3619

silamon commented Jan 29, 2022

meganrogge commented Feb 1, 2022

silamon commented Feb 2, 2022

meganrogge commented Feb 2, 2022

meganrogge commented Feb 2, 2022 •

edited

Loading

silamon commented Feb 2, 2022

meganrogge commented Feb 2, 2022

Eugeny commented Feb 2, 2022

meganrogge commented Feb 2, 2022 •

edited

Loading

Tyriar left a comment

Eugeny commented Feb 2, 2022

meganrogge commented Feb 3, 2022

silamon commented Feb 3, 2022

Eugeny commented Feb 3, 2022

Tyriar Feb 10, 2022

silamon Feb 13, 2022

Tyriar Feb 10, 2022

silamon Feb 13, 2022

silamon Feb 19, 2022

Tyriar commented Feb 10, 2022

meganrogge commented Feb 22, 2022

HTML serialization #3619

HTML serialization #3619

Conversation

silamon commented Jan 29, 2022

meganrogge commented Feb 1, 2022

silamon commented Feb 2, 2022

meganrogge commented Feb 2, 2022

meganrogge commented Feb 2, 2022 • edited Loading

silamon commented Feb 2, 2022

meganrogge commented Feb 2, 2022

Eugeny commented Feb 2, 2022

meganrogge commented Feb 2, 2022 • edited Loading

Tyriar left a comment

Choose a reason for hiding this comment

Eugeny commented Feb 2, 2022

meganrogge commented Feb 3, 2022

silamon commented Feb 3, 2022

Eugeny commented Feb 3, 2022

Tyriar Feb 10, 2022

Choose a reason for hiding this comment

silamon Feb 13, 2022

Choose a reason for hiding this comment

Tyriar Feb 10, 2022

Choose a reason for hiding this comment

silamon Feb 13, 2022

Choose a reason for hiding this comment

silamon Feb 19, 2022

Choose a reason for hiding this comment

Tyriar commented Feb 10, 2022

meganrogge commented Feb 22, 2022

meganrogge commented Feb 2, 2022 •

edited

Loading

meganrogge commented Feb 2, 2022 •

edited

Loading