check my code it's working fine but missing css. i am trying lot but i can't setcss into the blockmanager

[zahidsoft]

     <div class="info-panel-label" style="text-align: center;">
            <input type="text" id="blockName" class="form-control" placeholder="Custom Block name"><br/>
            <input type="text" id="blockCategory" class="form-control" placeholder="Custom Block Category name (Max one word)"><br/>
            <button onclick="blocksubmit()" class="btn btn-success">Save</button>
            <br/>
        </div>

 function blocksubmit() {
        const blocknm = document.getElementById('blockName').value;
        const blockct = document.getElementById('blockCategory').value;
        const blockdata = editor.getSelected();
        if (blockdata) {
            axios.post("https://abc.pro/admin/block",{
                name: blocknm,
                block_category: blockct,
                block_data: blockdata
            })
            .then((response) => {
                editor.BlockManager.add("custome-".concat(response.data.name), {
                    label: response.data.name,
                    category: response.data.block_category,
                    attributes: { class:'fa fa-pencil-square' },
                    content: JSON.parse(response.data.block_data)
                });
                editor.Modal.close();
                toastr.success('Store Successfully', 'Success');
                document.getElementById('blockName').value = '';
            }).catch((error) => {
                if (error.response.status === 422) {
                    const validationErrors = error.response.data.errors;
                    for (const fieldName in validationErrors) {
                        const errorMessages = validationErrors[fieldName].join(', ');
                        toastr.error(errorMessages, 'Error!')
                    }
                } else {
                    toastr.error(error.message, 'Error!')
                }
            });
        } else {
            toastr.info('select area to save it as block', 'Select Please');
        }

      }

i am storing in my database it's working fine but  css are not working.
when i drag and drop the block into the canvas html working fine but css is missing that's why design is broken. 
how can i fix this problem

[mosh-tudor]

To get a faster response, you should obfuscate your code, otherwise it's not challenging enough.

But jokes aside, format your code accordingly and try to explain what you want to achieve.

[zahidsoft]

now can you check this again . and how can i fix css issue.

[mosh-tudor]

@zahidsoft But where do you store the css? I don't see it in your code.

For me I did something similar using:
1 - Get HTML/CSS of selected component from canvas ->

getComponentHtmlCode(component) {
  const code = component.getEl().outerHTML;
  return this.cleanUpHtmlCode(code);
},

getComponentCssCode(component) {
  return this.editor.CodeManager.getCode(component, 'css', {
    cssc: this.editor.CssComposer,
  });
},

cleanUpHtmlCode(code) {
  const regex = /\s*(draggable|data-gjs-highlightable)=['"]true['"]/g;
  return code.replaceAll(regex, '');
},

2 - Inject code from DB to canvas ->

editor.BlockManager.add(
  ......
  content: `${YOUT_HTML_CODE}<style>${YOUR_CSS_STYLES}</style`>
  ......
)

[nguyenvoanhkhoa1]

const selectedComponent = editor.getSelected();

const selectedComponentHTML= selectedComponent.toHTML();
//or:
const selectedComponentHTML= editor.getHtml({ selectedComponent });
//or:
const selectedComponentHTML= codeManager.getCode(selectedComponent, 'html');

[mosh-tudor]

Yep ^, but you have to clean the code a bit before using it, see above I posted a function (cleanUpHtmlCode) that can help you.

[zahidsoft]

Last request please reply.
How can i handle js.
I have a countdown block. When I store it into my database using getHtml function.
But I am not able to load the countdown block in the canvas. It's not working.
Design and html working fine but function not working please help me.

One last question what's the best way to store template in database.
Which function or method.
Please reply

[zahidsoft]

please reply

[zahidsoft]

place help me how to deal with this issue