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.

[artf]

I tried with the latest core and the button update works as expected.

There seems to be an issue with the current demo but that's related to the CKEditor plugin, not the core. So at the moment, I'd suggest not using that plugin and switching to the core RTE or implementing your own.