How to target a description field from a component for wysiwyg widget

[jamestagal]

Hi @jimafisk

I have set up a the wysiwyg widget for description fields for posts content before and had success with it as follows:

{
    "description": {
        "type": "wysiwyg",
        "options": [
            "all"
        ]
    }
}

However I am trying to do this for a component or components in my pages content and it is not working how I have it currently setup.

For instance, how can I target the description field, from the json below from the aboutus component in the _schema file?

 {
            "name": "aboutus",
            "fields": {
                "title": "ABOUT OUR JOURNEY",
                "description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et.dolore magna aliqua. Ut enim ad minim veniam, quis nostrud. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Saepe ipsa illo quod veritatis, magni debitis fugiat dolore voluptates! Consequatur, aliquid. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat perferendis sint optio similique. Et amet magni facilis vero corporis quos. exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsum a, facere fugit error accusamus est officiis vero in, nostrum laboriosam corrupti explicabo, cumque repudiandae deleniti perspiciatis quae consectetur enim. Laboriosam!",
                "image": {
                    "url": "media/about-page.jpeg",
                    "altText": "Girl reading a book listening to music"
                }   
            }
        },

I tried dot notation like below but that didn't work.

{
    "components.fields.description" : {
        "type": "wysiwyg",
        "options": [
            "all"
        ]
    }
}

I think I might have to target the specific name of the component and in this case aboutus to get it to work? Ben

UPDATE: I should mention all the components used in the aboutus.json file have a description field so it would be good to activate the wysiwyg widget for all.

Ben

[jimafisk]

Dot notation like "components.fields.description" will only work in flat, or non-component fields (it can't target items inside arrays). I try to explain this concept (albeit in a somewhat confusing manner) here: https://youtu.be/zPL8xrS9bVg?t=958

Otherwise there is no consistent way to determine which field you're actually targeting. Take for example the following content:

{
  "components": [
    {
      "name": "comp1",
      "fields": {
        "description": "I'm comp 1"
      }
    },
    {
      "name": "comp2",
      "fields": {
        "description": "I'm comp 2"
      }
    }
  ]
}

If you had a _schema.json that attempted to target "components.fields.description", the system wouldn't know if you wanted the description from "comp1" or "comp2".

So if you want to be able to make the description from "comp2" a WYSIWYG field, you need to create a schema for that component specifically. So create a content/_components/comp2/_schema.json with:

{
    "fields.description": {
        "type": "wysiwyg",
        "options": [
            "all"
        ]
    }
}

all the components used in the aboutus.json file have a description field so it would be good to activate the wysiwyg widget for all

Unfortunately this is not supported at the moment, but it's an interesting idea!

[jamestagal]

Hi @jimafisk Thanks. Actually I did end up on the pattern you have described after thinking through it more.
However it is not working for me 😢 including the disabled option. Pls check that I have set it up corrected in content/_components/aboutus/_schema.json. https://github.com/jamestagal/plenti-educenter/blob/main/content/_components/aboutus/_schema.json Cheers, Ben

[jimafisk]

You need a corresponding _defaults.json for the component: https://github.com/jamestagal/plenti-educenter/commit/a5e9255068fe14ae395eb58d5a818c0323f4f688

[jamestagal]

Hi @jimafisk Thanks for this. Now I understand. What was confusing to me was that in some _default.json files you can leave them blank {} and therefore the defaults apply. For instance if you wanted to add a new teacher, then all the default data is used from one of those existing teacherName.json files when you don't define any 'dummy' data in the _defaults.json file.
However, in this case the components used in the aboutus.json file are in an array (not flat file) so you have to define (re-structure) the data inside the corresponding _defaults.json file in the specific component _components/aboutus/_defaults.json for it to work.

Sorry that took me some time to figure out! 😄

Thanks again Jim.

[jimafisk]

Yeah you need a _defaults.json file in the directory for the component in order for it to match to something and apply the corresponding _schema.json.

For instance if you wanted to add a new teacher, then all the default data is used from one of those existing teacherName.json files when you don't define any 'dummy' data in the _defaults.json file.

I'm not sure that's the case :thinking:. What I think you might be seeing are the components for the homepage, but it's likely there is an error in the console that will lock up the editing:

See screenshot


So in general if you want to add new content, you'll need _defaults.json that satisfy the corresponding Svelte template or you'll get errors. Hope that clarifies things!

[jamestagal]

Hi @jimafisk

Yes I see.. Thanks.

Just a note on an odd behaviour I just saw. I added another CMS field override for a component called page_title in for _schema.json to continue targeting the name field to disable it and now I have two components which I have overridden to be disabled however when I look on the front end, in the editor all the other components there are getting this overridden name field now. Strange. In this case I want all the name fields to be overridden to be disabled but maybe there is a bug here?

Ben

[jamestagal]

Hi @jimafisk

So in general if you want to add new content, you'll need _defaults.json that satisfy the corresponding Svelte template or you'll get errors. Hope that clarifies things!

Just on this point. I haven't tried adding new content yet via the CMS but what will happen when I do? After naming and saving a new json file, will the editor load up the data from the _defaults.json file and allow me to edit it there in the current view?

Ben

[jimafisk]

however when I look on the front end, in the editor all the other components there are getting this overridden name field now.

Yeah this is a bug I'm aware of. I assume it only happens when multiple components are open, correct? If a single component is open, the schema should load correctly for that component I believe.

will the editor load up the data from the _defaults.json file and allow me to edit it there in the current view

Yes exactly, and it won't actually write anything to the filesystem until you hit "save."

[jamestagal]

I assume it only happens when multiple components are open, correct?

No it seem to happen even when I just open a single component at a time. So if I open one of the other components which haven't been defined to bedisabled there are still disabled. See screencast below. Note: I have only defined the first two to be disabled.

https://user-images.githubusercontent.com/6309595/212594847-3d995a35-4e0d-4f83-850d-3ffcafb3a182.mov

Also I noticed it is applying the wysiwyg to the stories component which I haven't defined.

[jimafisk]

Oh interesting, I'm curious what happens if you open the non-disabled component first?

[jamestagal]

You guessed it! So if you open the non-disabled first they aren't disabled whereas if you open a disabled comp first all are disabled.

https://user-images.githubusercontent.com/6309595/212753942-f21ceb4a-900c-4355-8166-30d708c30b55.mov

[jimafisk]

Thanks for testing that out! There's a spill over bug happening between components. Something definitely on my to-do list (too many competing priorities :upside_down_face:).