Trying to copy code out of the live editor leaves out lines #482

Closed evarsanyi closed 2 years ago

When I've created about a page of code (a class diagram in this case) in the live editor I want to copy/paste the code into a GitLab wiki page as ```mermaid style markdown. The 'copy' operation puts the first few lines of copy into the clipboard followed by '...' then the last few lines of code.

I managed to free my code from the editor by exporting the mermaid.lnk, chopping out the HTTP part and running the result through 'base64 -d', then putting the result JSON string into a text file which I read with nodejs and printed the 'code' field to the console (which I could then copy-paste normally).

Its probably PEBCAK but I couldn't find any references in the docs on how to configure/use copy/paste in the (very opinionated) new code editor pane.

I could not reproduce this with Edge, but it occurs in Firefox.

PS: maybe related: pasting a block of mermaid code into the live editor causes it to corrupt it with its auto-indent policy. This does not occur in Edge either.

I've been developing the site exclusively on firefox. Just tried the Copy action and also Ctrl A + Ctrl C both worked as expected. Can you share a link to your diagram? Pasting also worked for me. Would it be a case of Tab vs Spaces?

Here's the one that was causing me trouble. FWIW on firefox I can't paste this back into the live editor (it complains about 'long diagram') and makes a mess of the formatting (and doesn't display the diagram).

If I paste into a vi window (in microsoft terminal in this case) it all looks fine and there are no tabs, its all spaces.

-Eric

classDiagram capture_Sink <|-- dmx_Workers class capture_Source {

} class capture_SockRawSourceV3 { } capture_Source <|-- capture_SockRawSourceV3 class capture_Sink {

}

capture_Source --> capture_Sink class dmx_Workers { } dmx_Workers "1" --> "1.." dmx_Worker class dmx_Worker { } dmx_Worker "1" --> "0.." dmx_Connection class dmx_Connection { } dmx_Connection "1" -- "1"protocol_CorrelatedPacketSink class protocol_CorrelatedPacketSink {

} class metrics_Connection {

}

metrics_Connection <|-- protocol_CorrelatedPacketSink class protocol_TcpStream {

} protocol_TcpStream <|-- protocol_CorrelatedPacketSink protocol_TcpStream --> RecordSink class RecordSink {

} class tls_Connection { } tls_Connection <|-- RecordSink classifier_Connection <|-- RecordSink ssh_Connection <|-- RecordSink www_Connection <|-- RecordSink dbcom_Connection <|-- RecordSink class mss_Connection { } mss_Connection <|-- dbcom_Connection class ora_Connection { } ora_Connection <|-- dbcom_Connection syb_Connection <|-- dbcom_Connection mysql_Connection <|-- dbcom_Connection

On 11/8/2021 12:58 AM, Sidharth Vinod wrote:

I've been developing the site exclusively on firefox. Just tried the Copy action and also |Ctrl A + Ctrl C| both worked as expected. Can you share a link to your diagram? Pasting also worked for me. Would it be a case of Tab vs Spaces?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/mermaid-js/mermaid-live-editor/issues/482#issuecomment-962862623, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAIEW36KXQA6CX5DZYIANGDUK5YK3ANCNFSM5HJVETTQ. Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

The diagram does render if you click on the sync button without any issue.

The formatting is messed up even if pasted in https://vscode.dev/

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 7 days

I tried this again hoping it was working better, you can easily reproduce this with Firefox or Brave on windows by opening the 'class' sample then selecting all the code and trying to 'copy'. When you paste you get about half of it followed by '...' (in the paste buffer).

I've tried using the context (right click) menu as well as ctl-c/ctl-v and shift-ctl-c and shift-ctl-v. I'm attempting to paste into either firefox (a markdown editor in gitlab) or brave, or the windows Terminal (with similar results on all).

I used the clipboard viewer functionality (windows-V) and it appears that the data put in the clipboard is already corrupted (so its not on the 'paste' side).

Another test that failed easily for me was (in Brave or firefox) open the 'class' sample in live editor then ctl-a, ctl-c, then at the bottom of the same document attempt to ctl-v... the resulting mess shows the issue as well.

classDiagram
    Animal <|-- Duck
    Animal <|-- Fish
    Animal <|-- Zebra
    Animal : +int age
    Animal : +String gender
    Animal: +maybeMammal()
    Animal: +mate()
    class Duck{
      +String beakColor
      +swim()
      +quack()
    }
    class Fish{
      -int sizeInFeet
      -canEat()
    }
    class Zebra{
      +bool is_wild
      +run()
    }

classDiagram
    Animal <|-- Duck
    Animal <|-- Fish
    Animal <|-- Zebra
    Animal : +int age
    Animal : +String gender
    Animal: +maybeMammal()
    Animal: +mate()
    class Duck{
      +String beakColor
      +swim()
      +quack()
    }
    class Fish{
      -int sizeInFeet
      -canEat()
    }
    class Zebra{
      +bool is_wild
      +run()
    }

https://user-images.githubusercontent.com/10703445/154784897-ed731116-3469-49ac-9c12-f01523b58795.mp4

https://user-images.githubusercontent.com/10703445/154784926-4bfbe92d-9f48-415c-896e-5290ce2ac681.mp4

I tried the test above (select class sample, ctl-a, ctl-c) on Brave, Edge, and Firefox just now (running mermaid in those environments) and the 'copy' side (where its having issues) only fails on Firefox. I will try on OSX shortly (with firefox, brave, and safari).

I'm thinking this must be something about my firefox installation since you're using firefox as well.

I just tried on windows and it seems to be working (recording attached in previous comment)

OK, I tried this on OSX with Safari, Firefox (same version as on windows with same plugins/addons), and Brave: all 3 work fine like your example above.

This really must be something about firefox on my end, I use office and markdown editors in this browser all day and I've never had a problem with cut-paste in other apps so that's why I thought it was something about mermaid-live, but the evidence seems strong its something at my end.

Apologies for burning your cycles on this, I appreciate your time and patience!

This was indeed a weird issue. Please comment below once you've figured out the issue, so it'll be helpful for someone in the future. Cheers!

For future search hits: I still haven't figured this out, I switched to using Brave so I probably won't go any further. I have a lot of anti-ad/spam stuff on Firefox (which I tried turning off / safe mode) but otherwise is the usual evergreen version they push out all the time.

I did find another issue with cut-paste on firefox which further indicates this is not mermaid-live: using the xterm.js package in our product I can't cut-paste properly in firefox but I can everywhere else. The symptoms aren't the same (its not redacting some of the paste) but there is something dodge about cut-paste with FF. It used to work :)

[I did try installing firefox from scratch on another win10 box and w/o any additional configuration it also acted as reported above)

I have the same issue and while reading through replies, remembered that I also had a similar issue with Google Docs a while ago. The issue then was that, for privacy reasons, I had disabled dom.event.clipboardevents.enabled = false in about:config...

Sure enough, I just set that back to true which made copy/paste work correctly on mermaid.live

Perhaps the site can be changed so that it does not rely on dom.event.clipboardevents.enabled being set to true?

Perhaps the site can be changed so that it does not rely on dom.event.clipboardevents.enabled being set to true?

The Monaco Editor that we internally use relies on this because the text in the editor is not plain text, but has other elements around it such as line numbers, the cursor, etc. , so it isn't something that we can control.

mermaid-js / mermaid-live-editor

Trying to copy code out of the live editor leaves out lines #482