DrawIO vector can no longer be copied to another page! It will be an IMAGE!!

[steenks]

Describe the Bug

When you copy a DrawIO image to another page. Previously you could edit this again and adjust it slightly. This modified DrawIO drawing was then automatically given a new DrawIO diagram number and the underwater image was given a new name by the online DrawIO online editing tool. SUPER CONVENIENT!

Steps to Reproduce

When you copy a DrawIO image like.

<div drawio-diagram="657"><img src="https://localhost:8000/uploads/images/drawio/2024-03/EaYKku3XWqw8Zceo-drawing-1-1710508456.png" alt=""/></div>

It results in

<p id="bkmrk-"><a href="https://localhost:8000/uploads/images/gallery/2024-03/BCvbqhsyVFb1H6yb-image.png" target="_blank" rel="noopener"><img src="https://localhost:8000/uploads/images/gallery/2024-03/scaled-1680-/BCvbqhsyVFb1H6yb-image.png" alt="image.png"></a></p>

or

<p id="bkmrk--2"><img src="https://localhost:8000/uploads/images/drawio/2024-03/EaYKku3XWqw8Zceo-drawing-1-1710508456.png" alt=""></p>

Expected Behaviour

The HTML code must be exactly the same on the target page.

<div drawio-diagram="657"><img src="https://localhost:8000/uploads/images/drawio/2024-03/EaYKku3XWqw8Zceo-drawing-1-1710508456.png" alt=""/></div>

The magic is that after changes, drawIO saves a new vector image based on the old one in combination with bookstack. VERY HANDY!

Screenshots or Additional Context

No response

Browser Details

Chrome, Safari

Exact BookStack Version

I think this no longer works from v22 :(

[ssddanbrown]

Hi @steenks, I'm not totally sure what the issue reported here is, and what version you're referring to where it's not working.

I'm guessing you are attempting to copy a drawing as image data, then re-edit that, which won't work (and hasn't before as far as I know) since BookStack won't recognize it as a drawing by that point, but a standard image. You might hack better luck copying a range of content from the other page, including the drawing, then pasting that since that should copy the underlying image reference.

Alternatively, existing drawings can be re-inserted into other pages using the drawing manager, accessed via the dropdown on the drawing button, as mentioned our docs: https://www.bookstackapp.com/docs/user/diagrams/#wysiwyg-editor

Another option is to start a new drawing in the other page, then copy and paste the image itself into the (draw.io/diagrams.net) drawing editor rather than the BookStack page, since it should be imported as a drawing at that stage.

[steenks]

Hello Dan,

You should give it a try.

Create a DrawIO drawing and go to the Markdown editor. Just copy the div with DrawIO image (see example below)

and paste it on any other page (exactly the same html code). Do this also in the Markdown editor.

Return to the WYSIWYG Editor. double click on the image, make a small adjustment in the drawing and click save and then the magic happens 😊. This certainly worked in an old version, but I don't remember which one ☹

Greetz, Johan

Van: Dan Brown @.> Datum: vrijdag, 15 maart 2024 om 15:04 Aan: BookStackApp/BookStack @.> CC: Johan Steenks @.>, Mention @.> Onderwerp: Re: [BookStackApp/BookStack] DrawIO vector can no longer be copied to another page! It will be an IMAGE!! (Issue #4901)

Hi @steenkshttps://github.com/steenks, I'm not totally sure what the issue reported here is, and what version you're referring to where it's not working.

I'm guessing you are attempting to copy a drawing as image data, then re-edit that, which won't work (and hasn't before as far as I know) since BookStack won't recognize it as a drawing by that point, but a standard image. You might hack better luck copying a range of content from the other page, including the drawing, then pasting that since that should copy the underlying image reference.

Alternatively, existing drawings can be re-inserted into other pages using the drawing manager, accessed via the dropdown on the drawing button, as mentioned our docs: https://www.bookstackapp.com/docs/user/diagrams/#wysiwyg-editor

Another option is to start a new drawing in the other page, then copy and paste the image itself into the (draw.io/diagrams.net) drawing editor rather than the BookStack page, since it should be imported as a drawing at that stage.

— Reply to this email directly, view it on GitHubhttps://github.com/BookStackApp/BookStack/issues/4901#issuecomment-1999740517, or unsubscribehttps://github.com/notifications/unsubscribe-auth/A6ANYFYLWKT7T5MNRMT6BG3YYL5XLAVCNFSM6AAAAABEYBFTQSVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSOJZG42DANJRG4. You are receiving this because you were mentioned.Message ID: @.***>