How to make text default slot values as an h1 tag?

Developer Support
1

Hello, I’m currently learning Plasmic and I’ve been liking it so far. I’m having some issues though since the documentation is not as detailed as I needed it to be to solve some of my issues.

I’m creating my own code component. My project is in Next.js built by Loader. I created a Card component which is just a div that has an

and a

inside. Using props, I’m able to allow the Plasmic Studio user to enter any text inside the

and the

elements. However, instead of having the designer edit those props on the right panel of Plasmic Studio, I would like for the user to be able to click on the canvas and edit the text directly.

To do that, I decided to substitute the hard-coded

and

elements with the children prop, and then when registering the component I’m trying to give it the

and

as default values so that it would use the Plasmic Studio UI I usually use when I create a heading or text directly on Plasmic Studio.

I’m able to make the paragraph work, but I’m not able to make the heading work, and I don’t know what to do, and when I try to find a solution in the documentation, I cannot find it, when I google it, I cannot find it, and when I youtube it, I cannot find it. So here I am.

I know that if you were to just use Plasmic Studio you can create a heading element and assign it a specific heading level like h3 for example, or you can create a text element and assign it a p tag. I want to write the code equivalent so that the Plasmic Studio user can see inside my Card component an

and a

by default. This is the code section I have so far:

PLASMIC.registerComponent(MyCardComponent, {
  name: 'Card',
  props: {
    className: 'string',
    children: {
      type: 'slot',
      defaultValue: [{
        type: 'text',
        tag: 'h1',
        value: 'Enter title here...'
      }, {
        type: 'text',
        tag: 'p',
        value: 'Enter some text here...'
      }]
    }
  },
});

It works for the

, but not for the

. So here are a few questions I have:

  1. How do I make it work for the

    ? I’m guessing that the type ‘text’ is not the right type to use for headings, but when I give it the type ‘heading’, it doesn’t work either.

  2. Where can I find a list of the plasmic element types so that I don’t have to bother you again about this? I know Plasmic Studio has many different Plasmic components to represent different HTML elements and that depending on the Plasmic component used the UI displayed to the user on the right panel is different, so I was wondering what the different types are.
  3. In here, I’m setting a defaultValue with a

    and a

    tag, but ideally I don’t want to give the user the option to delete the default

    and

    and I don’t want to allow the user to enter two headings for example or 2 paragraphs, I just want the Card component to always have only 1

    and 1

    , and only allow the user to change the content of that

    and that

    . Is there a way of doing that? I know there’s a content editor option that perhaps could do that, but I don’t only want to prevent the content editor from deleting or adding extra elements, I also want to prevent the designer. And I’m guessing I could use some sort of or to solve this when defining my code component, but I cannot find documentation on how to use them in my Loader generated Next.js project.
    Could someone help me with these? I’m sorry for the bother.

2

Hi @formidable_xerinae, here are the full docs on the element types that are accepted as slot contents:

https://docs.plasmic.app/learn/code-components-ref/#element-types

I would expect that specifying a tag of h1 should work… Maybe @fmota you can take a peek?