Unable to edit button styles and content

[wasifnaeem]

I am using Angular 17. In the following component, I am unable to edit the content and styles for the button. How to solve this? Also mj-attributes not working for button and text styling generally.

import { Component, OnInit } from '@angular/core';
import grapesjs, { Editor, usePlugin } from 'grapesjs';
import gjsMjml from 'grapesjs-mjml';

@Component({
  selector: 'app-email-builder-test',
  template: '<div id="gjsTest"></div>',
  styleUrl: './email-builder.component.scss'
})
export class EmailBuilderComponent implements OnInit {

  masterTemplate: string
  editor: Editor

  constructor() { }

  ngOnInit(): void {
    this.initGrapesJS()

    this.editor.setComponents(`
    <mjml>
  <mj-head>
    <mj-font name="Poppins" href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" />
    <mj-title>Subscription Cancelled</mj-title>
    <mj-attributes>
      <mj-all font-family="Poppins, sans-serif" />
      <mj-text font-size="16px" color="#333" line-height="24px" />
      <mj-button background-color="#007bff" color="white" />
    </mj-attributes>
    <mj-style>
      .highlight {
        color: #007bff;
      }
    </mj-style>
  </mj-head>
  <mj-body background-color="#f0f0f0">
    <mj-section>
      <mj-column>
        <mj-image width="100px" src="https://via.placeholder.com/100/CDDDDD/666666?text=Logo" />
      </mj-column>
    </mj-section>
    <mj-section background-color="#ffffff" padding="20px">
      <mj-column>
        <mj-text font-size="20px" font-weight="600">Subscription Cancelled</mj-text>
        <mj-divider border-color="#dddddd" />
        <mj-text>
          Hi there,
          <br/><br/>
          We're sorry to see you go! Your subscription has been successfully cancelled. You will not be charged moving forward.
        </mj-text>
        <mj-text>
          If you decide to come back and enjoy our services again, you can resubscribe at any time by clicking the button below.
        </mj-text>
        <mj-button href="https://www.yourwebsite.com/resubscribe" font-family="Poppins, sans-serif">
          Resubscribe Now
        </mj-button>
      </mj-column>
    </mj-section>
    <mj-section background-color="#ffffff" padding="20px">
      <mj-column>
        <mj-text>
          If you have any questions or need help, our support team is here for you. Contact us at
          <a class="highlight" href="mailto:support@yourwebsite.com">support@yourwebsite.com</a>.
        </mj-text>
      </mj-column>
    </mj-section>
    <mj-section background-color="#eeeeee" padding="20px">
      <mj-column>
        <mj-text color="#999999" font-size="12px">
          You're receiving this email because you had a subscription with our service. If you believe this is a mistake, please ignore this email.
        </mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>
    `)
  }

  private initGrapesJS() {
    this.editor = grapesjs.init({
      container: '#gjsTest',
      storageManager: {
        type: 'remote'
      },
      plugins: [gjsMjml]
    })
  }

}

[oliviermonnier]

Hi, same issue on Vue js 3 for edit text in mj-button.