Can't Copy or Clone Craft Component That Uses Donkeytail Plugin

[KettyLezama]

What are you trying to do?

[ Unsure if this is a bug or a new feature. ]

I've opened a ticket with the Donkeytail plugin team, but I actually think this may belong in your repo! Not sure if you'd need to work together.

Essentially I'm trying to be able to copy and clone a Matrix Block that uses a Donkeytail field. The block is able to be copied UNTIL I use a pin. Then when I click 'copy' or 'clone' thereafter, nothing happens.

What's your proposed solution?

Not sure. This may need some work between both plugin teams.

Additional context

Currently using:
"craftcms/cms": "3.8.1"
"simplygoodwork/craft-donkeytail": "2.0.7"
"verbb/smith": "1.2.3"

Let me know if you need more info.

[engram-design]

Just testing this out myself, and it seems to be working correctly for me. Are you cloning/copying before saving the entry, or after? They both seem to work for me, but just wanted to check.

Quick video here - https://share.cleanshot.com/KDmtxGVT

Are there are JS errors in your web developer console? Also worth checking #26

[KettyLezama]

Hey there! Thanks for responding! To answer your question, cloning/copying don't work for me either before or after saving the entry.

These screenshots might give you more info though! Thanks for asking about console errors!

[ BEFORE Saving the Entry ]
First screenshot is when trying to copy. No errors in console. Second screenshot is error when trying to clone.

[ AFTER Saving the Entry ]
I got a typical Craft Internal Server Error message appear when trying to clone, but no console error. I got the following console error when trying to copy.

[engram-design]

Are you able to have a look at the Network tab, and look at the request, and then look at the Preview tab for the 500 error?

The JS error showing Settings the value of smith:block exceeded the quota is an interesting one. It looks like the data it's trying to store is too large for LocalStorage.

[KettyLezama]

Unfortunately no information in the network tab preview. 😟

[KettyLezama]

Hey Josh! Just checking in. Any other information I can provide?

[engram-design]

Still not able to reproduce this one, sorry! In your last screenshot, can you scroll down to the "Payload" section so I can see what data is being sent to the server?

[andrewmenich]

Donkeytail maintainer here. We have a meta input that stores an object of each pin's data (coordinates, id, etc.) and is keyed by the pin's ID. The trouble seems to be that when this meta data is normalized for local storage, it is converted to an array where the former pin ID keys are converted to array indexes and all non-existent indexes filled in as null. (The pictures will explain better.)

The result of Garnish.getPostData($blockitem) that Smith uses is something like this:

However, when inspecting the local storage data, it looks like this:

9 Was the key of the meta object, which matches the pin's ID, but when serialized, becomes the array index of the item. This is a fresh install with only a few fields. On a real site with lots of data, I can imagine that the Donkeytail pin ID's would be in the hundreds or thousands resulting in a meta array with hundreds or thousands of empty items.

We tried adding a hidden field input like <input name="dt[meta][foo]" value="bar" /> to see if we could force it to be an object but that didn't seem to work.

Unfortunately we can't change the way this data is structured on our end at the moment. Do you have any thoughts on a way we could modify our form inputs so that when Smith serializes the data it doesn't expand the meta value this way?

[gbowne-quickbase]

I think for representing the field as an object, relying on references to other objects as much as possible would be my go-to. We've got an outrageously large database and some matrix fields with 35 different component types in it, so those tables are really wide. I would imagine, however, that the DonkeyTail field could be serialized as

• A pointer to the asset
• Array of pins used
  • Pin reference with all the datapoints you've got in it now (id, Pointer to the entry, X, Y, ...)
  • ...

And since these are all pointers to other objects, it should be small.

When I capture a similar object we've created that creates a carousel of "Announcements" to show on the site, where each announcement is another entry, I get this, which is all references:

'{"field":"components","namespace":"","blocks":[{"type":"announcementCarousel","enabled":"1","fields":{"arrows":"","indicators":"1","announcements":["4180207","4073113","3781569","3975167","2809735","2809745","2809743"]},"blockId":5461876}],"placeholderKey":"lapugwcrwv"}'

And this one has an image {"image":["160924"]... and a bunch of supertables and linkit fields in it.

'{"field":"components","namespace":"","blocks":[{"type":"hero","enabled":"1","fields":{"sectionConfig":{"sortOrder":["new1"],"blocks":{"new1":{"type":"106","fields":{"sectionName":"","sectionExternalSpacing":"base64:ZXh0ZXJuYWwtc3BhY2UtYm90dG9tLW9ubHk="}}}},"blockStyle":"base64:Y2xhc3NpY2Fs","heroColor":"base64:Z2FibGUtZ3JlZW4=","rockAndRollBlocks":"1","viewMediaOnMobile":"","internalSpacingSize":"base64:eGwtaW50ZXJuYWwtc3BhY2luZw==","contentPosition":"base64:bGVmdA==","media":{"sortOrder":[0],"blocks":[{"type":"103","fields":{"image":["160924"],"imageAltText":"","imageTreatment":"base64:ZHVvdG9uZS0tcGlyYXRlLWdvbGQtLW1hbGxhcmQ=","mediaDisplay":"1","mediaPadding":"","videoAsset":"","video":""}}]},"displayContent":{"sortOrder":[0],"blocks":[{"type":"105","fields":{"header":"<span>Classical Hero:</span> Gable Green with Block Overlay -- Content Left","body":"With a little bit of body text."}}]},"ctaButtons":{"sortOrder":[0,1],"blocks":[{"type":"102","fields":{"ctaType":"base64:Y3RhLS1zdHlsZS0tMQ==","config":{"type":"presseddigital\\\\linkit\\\\models\\\\Url","values":{"presseddigital\\\\linkit\\\\models\\\\Url":"http://www.google.com","presseddigital\\\\linkit\\\\models\\\\Entry":"","presseddigital\\\\linkit\\\\models\\\\Category":""},"customText":"Apple Pie / Gable Green","target":""}}},{"type":"102","fields":{"ctaType":"base64:Y3RhLS1zdHlsZS0tMw==","config":{"type":"presseddigital\\\\linkit\\\\models\\\\Url","values":{"presseddigital\\\\linkit\\\\models\\\\Url":"http://www.google.com","presseddigital\\\\linkit\\\\models\\\\Entry":"","presseddigital\\\\linkit\\\\models\\\\Category":""},"customText":"Key Lime Pie / Gable Green","target":""}}}]},"emailField":""},"blockId":1724477}],"placeholderKey":"cfhjuvfado"}'

[engram-design]

Yep, so that data structure is what I'm seeing, and understand the restrictions on your end regarding that. I'm pretty sure this is just down to how JavaScript handles object/arrays in this instance.

I'll see what I can do on my end about this...