Adding custom action to Formatbar

[AreWeThereYeti]

Hello there
Im looking to add some custom actions to the format bar. I dont want to create som custom document.execCommand but just assign an action to a custom field in the formatbar.I havent found anything in the documentation about this being possible but i aim at doing something like below.
Is it possible to add a custom action to the formatbar?

      window.editor = new SirTrevor.Editor({
        el: $('.sir-trevor'),
        formatBar: {
          commands: [
            {
              name: 'CustomAction',
              title: 'CustomAction',
              iconName: 'CustomAction',
              cmd: 'CustomAction',
              text: 'CustomAction',
              onClick : function(){
                doCustomStuff(); // <-- do awesome stuff
              },
            },
          ],
        },
        blockTypes: [
          'Heading',
          'Text',
        ],
      });

[SgtOddball]

Sir Trevor uses Scribe to control what happens in the format bar, so you'd be better looking at integrating your action into scribe and then calling it from the commands.

[raffij]

Like @SgtOddball says all it does at present is sends a command to scribe and isn't customisable per field. There's a PR that is dealing with some of this and I've got some thoughts on that as that's something i've been looking at.

What are you trying to do that wouldn't modify the contenteditable block?

[AreWeThereYeti]

I want to add some tagging functionality to the text. Right now im inserting a span with an uuid on a click on SirTrevor.setBlockOptions

    SirTrevor.setBlockOptions('CustomText', {
      controllable: true,
      controls: {
        'footnoteHandler': (e) => {
          this.InsertUUID( e ); //Call a modal to fill in some data.
          e.preventDefault();
        },
      },
    });

This function inserts html into the contenteditable section and opens up a model where i can input some data.
What im looking to achieve is to move this functionality to the formatbar instead, but actually only for the 'CustomText' block.@SgtOddball thanks. Ive been looking through Scribes documentation but i havent found anything. But i will try to ask the same question over there.

[raffij]

@AreWeThereYeti he formatbar is not yet customisable per block then you'll be able to achieve this for the moment it's for the complete editor.

What i'd suggest is creating a scribe plugin and adding a command which references this plugin. This option would be visible to all the blocks, but because you'd limit the queryEnabled to only a specific block then this would do what you need.

Pseudo example:

const scribeBoldHeadingPlugin = function(block) {
  return function(scribe) {

    const boldHeadingCommand = new scribe.api.Command('bold-heading');
    boldHeadingCommand.queryEnabled = () => {
      return block.type === 'heading';
    };
    boldHeadingCommand.queryState = () => {
      return scribe.el.hasBoldTag();
    };

    boldHeadingCommand.execute = function(value) {
      if (this.queryState()) {
        scribe.el.removeBoldTag();
      } else {
        scribe.el.addBoldTag();
      }
    };

    scribe.commands.boldHeading = boldHeadingCommand;
  };
};

configureScribe: function(scribe) {
    scribe.use(new scribeBoldHeadingPlugin(this));
}

[SgtOddball]

I know it's abit off topic, but considering the recent issues people are having with regards to scribe and it's lack of documentation, would an alternative ever be considered?

Only reason I mention this is I came across Quilljs which from what I can tell does pretty much the same job using the content editable.

It's also got better documentation, a larger dev base (from what I can tell) and support for all modern browsers (rather than just chrome and firefox a la scribe).

Feel free to tell me to piss off but it was out of frustration over scribe's limitations rather than anything else.

[raffij]

@SgtOddball can you add this as a specific issue. It's something we've been discussing and don't want it lost here.

[SgtOddball]

@raffij Done and done.