Bard: some set configurations are not translated to ProseMirror node types

[sauerbraten]

Somehow, not all of our configured Bard sets are available in the underlying ProseMirror instance as node types, which leads to the following exception:

[tiptap warn]: Invalid content. Passed value: 
Object { type: Getter & Setter, content: Getter & Setter, … }
 Error: RangeError: "Unknown node type: slideshow"
    nodeType index.js:2442
    fromJSON index.js:1392
    nodeFromJSON index.js:2430
    fromJSON index.js:306
    fromJSON index.js:1391
    nodeFromJSON index.js:2430
    value tiptap.esm.js:986
    value tiptap.esm.js:951
    value tiptap.esm.js:859
    t tiptap.esm.js:840
    mounted BardFieldtype.vue:189
    VueJS 14
    start Statamic.js:51
    <anonymous> shift-in-balance-of-power-for-rebels-in-wartorn-syria:283
tiptap.esm.js:988

No content is rendered in the Bard editor field.

Bard config:

-
  handle: body
  field:
    type: bard
    display: Inhalt
    buttons:
      - convertToParagraph
      - h3
      - orderedlist
      - unorderedlist
      - bold
      - italic
      - underline
      - removeFormat
      - anchor
      - linkToContentStore
    allow_source: false
    link_noopener: true
    link_noreferrer: true
    target_blank: true
    show_text_count: true
    spellcheck: false
    sets:
      image:
        display: Bild
        fields:
          -
            handle: image
            field:
              type: polygon_assets
              display: Bild
              container: image
              max_files: 1
              allow_uploads: false
          -
            handle: caption
            field:
              type: bard
              save_html: true
              display: Bildunterschrift
              buttons:
                - bold
                - italic
                - underline
                - anchor
                - linkToContentStore
              allow_source: false
              link_noopener: true
              link_noreferrer: true
              target_blank: true
              instructions: |
                Überschreibt die Bildbeschreibung.

          -
            handle: placement
            field:
              type: select
              display: Ausrichtung
              options:
                center: Mitte
                big: Maxi
                left: Links
                right: Rechts
              default: center
          -
            handle: link
            field:
              type: text
              display: Link
              instructions: |
                Komplette URL (inklusive https:// bzw. http://) oder für interne Seiten relativen Pfad

      slideshow:
        display: Slideshow
        fields:
          -
            handle: slideshow
            field:
              type: polygon_relationship
              display: Slideshow
              max_items: 1
              collections: [ slideshow ]
          # -
          #   handle: caption
          #   field: bard.basic+
          #   config:
          #     display: Caption

The image set works fine (when loading an entry with an image but no slideshow in the body field).

[jasonvarga]

Can you post the value of the field?

[sauerbraten]

value from our datastore:

[
    {
        "caption": "\u003cp\u003ePhoto Gallery: The Tide Turns in Syria\u003c/p\u003e",
        "slideshow": [
            {
                "reference": {
                    "collection": "slideshow",
                    "id": "e7cd6652-0001-0002-0000-000000091514"
                }
            }
        ],
        "type": "slideshow"
    },
    {
        "text": "\u003cp\u003eNight falls quickly in Syria, as the overloaded pickup [...] fear that had held the country in its grip for 41 years. \u003c/p\u003e",
        "type": "text"
    },
    {
        "type": "multipart",
        "headline": "Abandonded by the World"
    },
    {
        "text": "\u003cp\u003e\nA few days later, we made our first attempt to reach [...] The system was always corrupt.\" \u003c/p\u003e",
        "type": "text"
    },
    {
        "type": "multipart",
        "headline": "Friends or Foes?"
    },
    {
        "text": "\u003cp\u003e\nWe also experienced the chaos of this insurgency. Its weakness [...] \"Who else has helped us?\" he asks. \"No one.\"\u003c/p\u003e",
        "type": "text"
    }
]

value from Vue dev tools:

[
    {
        "caption": "<p>Photo Gallery: The Tide Turns in Syria</p>",
        "slideshow": [
            {
                "reference": {
                    "collection": "slideshow",
                    "id": "e7cd6652-0001-0002-0000-000000091514"
                }
            }
        ],
        "type": "slideshow"
    },
    {
        "text": "<p>Night falls quickly in Syria, as the overloaded pickup [...] fear that had held the country in its grip for 41 years. </p>",
        "type": "text"
    },
    {
        "type": "multipart",
        "headline": "Abandonded by the World"
    },
    {
        "text": "<p>\nA few days later, we made our first attempt to reach Homs. [...]",
        "type": "text"
    }
]

(trimmed at the end by vue devtools and fixed for validity by me)

The translation step where type should be changed to set appears to not run.

[sauerbraten]

For comparison, this is the value for an entry with an image:

JSON in datastore:

[
    {
        "text": "\u003cp\u003eAhmed Mohamed hat immer [...] der Klage nicht genannt.\u003c/p\u003e",
        "type": "text"
    },
    {
        "allow_fullscreen": true,
        "caption": "\u003cp\u003eAhmeds Uhr: Ein Koffer, eine Platine, Drähte, ein Digitaldisplay\u003c/p\u003e",
        "image": [
            {
                "reference": {
                    "collection": "image",
                    "id": "386df08c-0001-0004-0000-000000897858"
                }
            }
        ],
        "placement": "center",
        "type": "image"
    },
    {
        "text": "\u003cp\u003eBis heute habe die Familie [...] wegen Verletzung der Bürgerrechte.\u003c/p\u003e",
        "type": "text"
    }
]

value in Vue devtools:

[
    {
        "type": "paragraph",
        "content": [
            {
                "type": "text",
                "text": "Ahmed Mohamed hat immer gern gebastelt und Sachen konstruiert. [...] Nun verklagt Ahmeds Familie die Schule auf Schadensersatz."
            }
        ]
    },
    {
        "type": "paragraph",
        "content": [
            {
                "type": "text",
                "text": "Durch das Vorgehen der Schule gegen Ahmed seien dessen [...] Eine Entsch\u00e4digungssumme wird in der Klage nicht genannt."
            }
        ]
    },
    {
        "type": "set",
        "attrs": {
            "values": {
                "allow_fullscreen": true,
                "caption":"[{\"type\":\"paragraph\",\"content\":[{\"type\":\"text\",\"text\":\"Ahmeds Uhr: Ein Koffer, eine Platine, Dr\\u00e4hte, ein Digitaldisplay\"}]}]",
                "image": [
                    "386df08c-0001-0004-0000-000000897858"
                ],
                "placement": "center",
                "type": "image",
                "link": null
            }
        }
    },
    {
        "type": "paragraph",
        "content": [
            {
                "type": "text",
                "text": "Bis heute habe die Familie von der MacArthur High School in Irving im Bundesstaat "
            },
            {
                "type": "text",
                "text": "Texas",
                "marks": [
                    {
                        "type": "link",
                        "attrs": {
                            "href": "cs:\/\/topic\/670ad725-0001-0010-0000-000000019448"
                        }
                    }
                ]
            },
            {
                "type": "text",
                "text": " keine Entschuldigung erhalten, sagte Hutchison. [...] Deshalb klagen wir auf Gerechtigkeit.\""
            }
        ]
    },
    {
        "type": "paragraph",
        "content": [
            {
                "type": "text",
                "text": "Der Fall hatte weltweit f\u00fcr Aufsehen gesorgt:",
                "marks": [
                    {
                        "type": "link",
                        "attrs": {
                            "href": "cs:\/\/article\/9c41fc21-0001-0001-0000-000001053131"
                        }
                    }
                ]
            },
            {
                "type": "text",
                "text": " Zun\u00e4chst musste sich Ahmed wegen des [...] Islamfeindlichkeit vorgeworfen."
            }
        ]
    },
    {
        "type": "paragraph",
        "content": [
            {
                "type": "text",
                "text": "Nachdem der Vorfall publik geworden war, erhielt Ahmed zahlreiche Einladungen gro\u00dfer Unternehmen - "
            },
            {
                "type": "text",
                "text": "auch US-Pr\u00e4sident Barack Obama lud den Jungen ins Wei\u00dfe Haus ein.",
                "marks": [
                    {
                        "type": "link",
                        "attrs": {
                            "href": "cs:\/\/article\/c1a10be0-0001-0001-0000-000001058590"
                        }
                    }
                ]
            },
            {
                "type": "text",
                "text": " Ahmed nahm dort an einer Nacht der Astronomie teil."
            }
        ]
    },
    {
        "type": "paragraph",
        "content": [
            {
                "type": "text",
                "text": "Dennoch zog er mit seiner Familie nach Katar,",
                "marks": [
                    {
                        "type": "link",
                        "attrs": {
                            "href": "cs:\/\/article\/f6b542d6-0001-0001-0000-000001058802"
                        }
                    }
                ]
            },
            {
                "type": "text",
                "text": " wo er ein Stipendium f\u00fcr eine Privatschule und f\u00fcr ein Studium erhielt."
            }
        ]
    },
    {
        "type": "paragraph",
        "content": [
            {
                "type": "text",
                "text": "Ahmed sagte, nach dem Vorfall habe er zwar [...] seither verloren gegangen."
            }
        ]
    },
    {
        "type": "paragraph",
        "content": [
            {
                "type": "text",
                "text": "Zurzeit besucht Ahmed seine [...] Alle w\u00fcrden gleich behandelt."
            }
        ]
    },
    {
        "type": "paragraph",
        "content": [
            {
                "type": "text",
                "text": "Das Schulamt von Irving wies erneut [...] wegen Verletzung der B\u00fcrgerrechte."
            }
        ]
    }
]

[jackmcdade]

Are you wrapping Bard with your own custom fieldtype?

[sauerbraten]

Yup!

On Fri, Jun 21, 2019, 20:42 Jack McDade notifications@github.com wrote:

Are you wrapping Bard with your own custom fieldtype?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/statamic/three-cms/issues/454?email_source=notifications&email_token=AANN5DFYDD325GW44KS7WCDP3UOJRA5CNFSM4HSGO3Y2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODYJIRWI#issuecomment-504531161, or mute the thread https://github.com/notifications/unsubscribe-auth/AANN5DAAWMPMMFYSS3H3BOLP3UOJRANCNFSM4HSGO3YQ .

[jackmcdade]

Ah, that's probably why. I ran into this when i missed passing all the right props and datatypes into a Bard instance.

[sauerbraten]

Pretty sure this is fixed, probably by passing the complete props as you suggested (but not sure).