How to add custom html with class?

[george-norris-salesforce]

Hello, a few questions about using custom button w/ class and es6 classes..

Attempting to.. 1). Add a custom button 2). Have the button wrap the selection in a <h1> 3). apply a class to this <h1>

..specifically doing all this using ES6 classes.

The icon and button are showing up fine, not sure if the way I'm doing it is correct way in context of ES6 class. The callback on the RegisterCommand is not working though..

export class RichEditor extends Component {
  // code left out for brevity..

  // configEditor is called in constructor..
  configEditor() {

    let editorPlugins = [froala, image, table, link, list];
    editorPlugins.forEach(plugin => {
      plugin($);
    });

    let toolbarOptions = [
      'myButton',
      'h2',
      'bold'
    ];

    $.FroalaEditor.DefineIcon('buttonIcon', { NAME: 'star'});
    $.FroalaEditor.RegisterCommand('myButton', {
      title: 'Header — TOC',
      icon: `<i style="font-style: normal;">
        <b>H2</b>
      </i>`,
      undo: true,
      focus: true,
      showOnMobile: true,
      refreshAfterCallback: true,
      callback: function () {
        //this does not work
        $(this.selection.element())
          .froalaEditor('paragraphFormat.apply', 'H2');
      }
    });

    //this.$editorNode set in constructor
    this.$editorNode
      .froalaEditor({
        toolbarButtons: toolbarOptions,
        toolbarButtonsMD: toolbarOptions
        imageUploadURL: '/upload_media',
      })
      .on('froalaEditor.contentChanged', (e, editor) => {         
         //handle change
      });
  }
  }

  render() {
    return (
      <div>
        <textarea id="rich-editor" name="content"></textarea>
      </div>
    );
  }
}

Previously on the callback I was using..

let txt = this.selection.text();
 if (txt === undefined) return;
    this.html.insert(
    `<h2>
       ${txt}
     </h2>`
    );

This didn't work so well. The Icon on the toolbar does not become highlighted like the others.

text w bold/underline applied..

text with H1 applied (no tooltip highlight)

Also if there is nothing selected, H1 button inserts a bunch of empty H1s and things get messy and hard to delete. //'un-deletable' H2 tags.

In the callback, I could do something like..

$(this.selection.element()).wrap('<h2></h2>')

using jQuery, but if at all possible would prefer to use the API of the froala wysiwyg editor.. And also this does not highlight the icon in the toolbar when this line of code is selected indicating that it is styled (like the others do)

[stefanneculai]

Inside the callback you can just call the methods this way: this.paragraphFormat.apply('H2').

As for refreshing the button, you would have to use the refresh callback and set the state. You can use something like this:

      refresh: function ($btn) {
        var blocks = editor.selection.blocks();
        var blk = null;
        if (blocks.length) {
          var blk = blocks[0];
        }

        $btn.toggleClass('fr-active', blk && blk.tagName == 'H2');
      }

[george-norris-salesforce]

https://github.com/froala/wysiwyg-editor/issues/1639

Are you sure that is the correct way?

Not seeing paragraphFormat method on this.

[ko06]

@george-norris-salesforce have you fixed? same issue for me