Textarea formatting bug

Setting up a textarea field as a code snippet input so my client can copy-paste the infamous shopify buy button code…

The field in question is inside a structure field which looks like this:

clubOptions:
    type: structure
    columns:
      title:
          width: 1/2
      price:
          width: 1/2
          align: right
          after: "€"
    fields:
      title:
        type: text
      price:
        label: Price
        type: number
        min: 0
        before: €
      description:
        type: writer
      buyButton:
        label: Buy Button 😡
        type: textarea
        font: monospace
        buttons: false
        required: true

When I copy paste a code snippet into the buyButton field, that content gets formatted which somehow removes some characters from the string and breaks the code.

i.e this section:

"@media (min-width: 601px)": {
          "max-width": "calc(25% - 20px)",
          "margin-left": "20px",
          "margin-bottom": "50px"
        }

turns into this inside the .txt content file upon saving:

"@media (min-width: 601px)": {
"max-width": "calc(25% - 20px)",
"margin-left": "20px",
margin-bottom": "50px // <= missing quotation marks
}

Does anybody have an idea what might be going on here?

edit: as a quick fix, using a text field instead of textarea seems to work.

Is it always the final css property that gets the qoutation stripped? Might be something to do with white space, which can confuse the Markdown if its in the wrong place.

Probably one of these markdown quirks, it seems to work if the closing brace is after the last code line, but I wouldn’t rely on that. How about using a writer field and strip the p tags when rendering? No better idea atm.

1 Like

I guess theres a consitency to all Buy Button embed codes, its just the values that are different? You could make a custom Kirby tag so the HTML is in a snippet and you just pass through the necessary bits of data.

1 Like

Edit: My bad, overlooked the “in structure” part :man_facepalming:

@adamkiss I get the same result as @bruno in a fresh Starterkit. Did you test in a structure field? The result may be different in a standalone textarea field.

1 Like

It’s a bug in the Spyc yaml dumper. I’ve tracked it as far as running:

$y = Spyc::YAMLDump([
	[
		'buyButton' => '"@media (min-width: 601px)": {
          "max-width": "calc(25% - 20px)",
          "margin-left": "20px",
          "margin-bottom": "50px"
        }'
	]
], true, true, true); // these don't seem to matter

CleanShot 2021-05-02 at 14.03.09

1 Like

Thanks all for having a look. Was hoping I’d overlooked something in the Kirby docs, but I doubt that I’ll find a fix for a Spyc bug (ty @adamkiss). Guess I’m just going to stick with using a text field instead of a textarea for now – it’s meant for copy+paste anyways…

@jimbobrjames re: consistency – Was my initial thought too. Also had a look at the Shopify Plugin, Shopify API and different approaches as well – but simply copy and pasting the entire generated snippet, while resulting in horrendous redundant code in the frontend, is both the easiest way for me to bodge it for this deadline and the easiest for my client to understand/maintain :man_shrugging: