when wysiwyg set in schema, adding a return in the editor adds a <div> instead of a <br>

[jamestagal]

Hi @jimafisk When I added the wysiwyg option in the schema file I noticed that doing a return on my keyboard added a <div>element to the html on the page. I wasn't expecting that. I thought it would have added a <br> within the existing <p> tag. So it didn't allow me to add another paragraph within the element.

The content I modified was for theteachers.svelte content type in the following _schema.json file See screen capture below

https://user-images.githubusercontent.com/6309595/209775887-da2aaa35-5f01-4cbb-b344-69f53951adce.mov

Let me know if this is the normal behaviour or I have missed something.

BTW - The reason I came across this was because I was exploring the option of not having 2 separate paragraphs defined in this content and use the wysiwyg to make the paragraphs instead but for now I might need to leave it as it is.

UPDATE: Maybe an option is to add an array to the .json key ? see below

"description":  [
"First paragraph",
"Second paragraph",
"Third paragraph",
],

But I don't this this approach is ideal because we probably want one description data source and add any number of paragraphs to it.

Regards, Ben

[jimafisk]

Nice job updating the schema! Yeah the wysiwyg isn't perfect, if you need more control over the markup, you'll probably want to do what you described about putting the description into an array. Then if you want a variable number of paragraphs you could define the description as a component in your schema.

[jamestagal]

Hi @jimafisk That's interesting! Just running with your suggestion here,

you could define the description as a component in your schema.

If I did that, would I first need to create a svelte component for instance called, description.svelte and a corresponding json file called description.json with a text field key? and then use this description component by replacing the current text fields in the teachers json files with it? or could I just define that in this schema file?

Ben

[jamestagal]

Hi @jimafisk hi how are you? I was thinking that I don't have a description component in this project but I do have a teachers content type with a description field defined as a key in their data sources so I tried the following but I don't see at "add new content" as an option in the editor. I am guessing I can only add components not content here!

This is just mock up for the following file structure and code: _content/teachers have a _defaults.json with the following code:

{
    "name": "teachers",
    "fields": {
        "description": "This is an example description."
    }
}

Then in the teachers/_schema file I have the following code:

{
    "description": {
        "type": "wysiwyg",
        "options": "all"
    },
    "contents": {
        "type": "content",
        "options": "description"
    }
}

UPDATE: Maybe the _defaults.json file should not need the name and fields keys because they are top level in the other json files so it should look like this:

{
    "description": "This is an example description."
}

Ben

[jamestagal]

Hi @jimafisk So to recap on the above question... Is it possible to pull out fields such as a description from content as apposed to components ? In this video (Plenti CMS Devlog (ep 27): Adding Components & Shadow Contentas) you showed how to do it with components.

I am just thinking about how I could re-use the description field in the teachers content type allowing users to add a description field when editing a teacher page for instance.

Ben

[jimafisk]

A couple of notes:

• To target nested fields with _schema.json use dot notation like fields.description
• The "Add new ___" button is only available for components. You can have a component that is just a description field, but you need to make it a component to add/subtract them from the page

Is it possible to pull out fields such as a description from content as apposed to components

By "pull out" do you mean display on the page? You can definitely do that, just keep in mind that keys in your JSON that don't have values that are in an array will be static on the page (you can't add or remove them).

[jamestagal]

Hi @jimafisk Thanks. Yes. I meant be used on the page so that authors could add an additional description field. But thinking about it now it wouldn't work to have a description component set up to "Add new____" for the teachersbecause it is a content page. And they don't use the component architecture like in the Pages content does. So all good. Thanks for your explanation.

Cheers, Ben

[jimafisk]

Just in case what I said was confusing, if you wanted to modify the description in the teachers content type to use components, you could do that like:

"description": [
  {
    "paragraph": "You first paragraph here"
  }
]

Then in your content/teachers/_schema.json specify the components your want to be able to add:

"description": {
  "type": "component",
  "options": [
    "paragraph"
  ]
}

Finally make sure you define the component in content/_components/paragraph/_defaults.json:

{
  "paragraph": "You first paragraph here"
}

And handle it in your layouts/content/teachers.svelte template:

{#each description as d}
  <p>{d.paragraph}</p>
{/each}

(note I didn't actually run this code so there could be typos)

[jamestagal]

Hi @jimafisk

Just a question on duplicate names in the _schema.json file.... I see an error with the following:

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

Would a solution be to combine the types and options? or do they need to separate?

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

[jamestagal]

Hi @jimafisk Thanks for the clear explanation in steps.. It does help me when you break it down because there are a number of parts involved to make this work.

It is working 😄 but there is an [object Object] message printed on the page for each paragraph field. Also adding other paragraphs, adds it right after the last without any break.. I did try adding a <br> tag but that didn't seem to make any difference. See short screencast.

https://user-images.githubusercontent.com/6309595/211419172-3ca878cf-a408-406d-bc82-39fe389679b3.mov

Ben

[jimafisk]

Just a question on duplicate names in the _schema.json

There shouldn't ever be any duplicates in _schema.json. If you're trying to add many paragraphs you want the top level content/teachers/_schema.js to use "type": "component". Then whatever options you use, in this case paragraph you would set up a separate content/_components/paragraph/_schema.js file and set the options there to wysiwyg.

It is working smile but there is an [object Object] message printed on the page for each paragraph field.

It's great that it's working! The template is probably still trying to access the description like it's a flat field. So just make sure that you loop over the description and pull out the paragraph key. The video makes it look like you're doing this correctly by the fact that the text is appearing on the page. So just check the section right above that.

[jamestagal]

Thank you @jimafisk This is an awesome way to re-use fields from content sources as components. 😸

The only small drawback that I can see is as I mentioned above that when adding other paragraphs with the "Add new____" adds it right after the last tag on the same line without any break. I did try adding a <br> tag into the html but that didn't seem to make any difference.

Other considerations would be how you used it ...where you would place them. Maybe in the case, adding it to this spot on the page in the teachers content type, might not be that useful because you can just use the one description field to write many paragraphs. I guess these designs decisions would be between the client and the developer!

I was thinking I would write another developer note on this one....to document. the edge cases or to showcase how flexible you can set up Plenti to achieve this sort of functionality... Maybe we could find a place to have a collection of code snippets to share with other developers starting out with Plenti as a sort of reference? maybe in the docs? because through my learning with you on this theme, I am collecting lots of useful configurations and setups that others would appreciate knowing about and having access to 😃

cheers, Ben

[jimafisk]

The only small drawback that I can see is as I mentioned above that when adding other paragraphs with the "Add new____" adds it right after the last tag on the same line without any break.

I don't think this is being caused by the component, it's an artifact of some misc styling getting applied.

You've correctly put this inside <p> tags: https://github.com/jamestagal/plenti-educenter/blob/258b5c715097bdfa177d3373c13f00c0c6e9ec56/layouts/content/teachers.svelte#L57. The issue is this is getting wrapped in a div with a .row class on it that is getting display: flex styling applied to it:

See screenshot


Removing the row, removes this (but may create other problems in your layout):

See screenshot


[jamestagal]

Hi @jimafisk Thanks for taking a look at this one. Since then I have removed the div from around the p tag and it is working as expected now. I didn't even need to remove the row.

https://github.com/jamestagal/plenti-educenter/blob/9afe79d7e28b52bf9eb734c5a344ec63508ec9b3/layouts/content/teachers.svelte#L112

Thanks again for this Jim.