Doesn't appear HTML class name of a custom block on editor

I added my block like this below

const editor = grapesjs.init({
// ...
blockManager: {
    appendTo: '#blocks',
    blocks: [
      {
        id: 'main-title',
        label: 'Main title',
        category: 'Titles',
        content: {
          type: 'text',
          tagName: 'p',
          attributes: { class: 'main-title' },
          content: 'This is Main title. To click here to edit this'          
        }
      }
    ]
  },
canvas: {
    styles: [
      'https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css', // reset style of canvas
      '/assets/css/content.css' // 👈This contains the style for .main-title
    ]
  },

Then drag this block and drop to canvas, and show HTML code with export-template command.

<p class="main-title">This is Main title. To click here to edit this
</p>

👆OK, this is what I expected.

BUT, HTML class doesn't appear on the element inside of the editor, so it's not applied style for .main-title.

<img width="793" alt="スクリーンショット 2020-03-20 2 36 53" src="https://user-images.githubusercontent.com/4133263/77097455-2a6ff980-6a54-11ea-9e74-f5af7982b1b4.png"> <img width="706" alt="スクリーンショット 2020-03-20 2 37 45" src="https://user-images.githubusercontent.com/4133263/77097417-1b894700-6a54-11ea-9e90-6d9e9ea0970d.png">

I need to set html class default my custom block. How should I do?