Rich Text Editor Extension Not Working in Firefox

[asimex]

Hello,

I have created a custom Rich Text Editor (RTE) extension for GrapesJS. The extension works as expected in Google Chrome but does not function correctly in Mozilla Firefox. Below is the code for the extension:

export default (editor, opts = {}) => {
const options = {
base: {
bold: true,
italic: true,
underline: true,
strikethrough: true,
link: true,
},
indentOutdent: true,
list: true,
align: true,
extra: false,
darkColorPicker: false,
maxWidth: '600px',
...opts,
};

const { icons = {} } = options;
const rte = editor.RichTextEditor;

editor.onReady(() => {
if (options.maxWidth)
rte.getToolbarEl().firstChild.style.maxWidth = options.maxWidth;

if (!options.base || typeof options.base !== "object") {
  !options.base.bold && rte.remove("bold");
  !options.base.italic && rte.remove("italic");
  !options.base.underline && rte.remove("underline");
  !options.base.strikethrough && rte.remove("strikethrough");
  !options.base.link && rte.remove("link");
}

options.indentOutdent &&
  rte.add("indent", {
    icon: icons.indent || '<i class="fa fa-indent"></i>',
    attributes: {
      title: "Indent",
    },
    result: (rte) => rte.exec("indent"),
  });

options.indentOutdent &&
  rte.add("outdent", {
    icon: icons.outdent || '<i class="fa fa-outdent"></i>',
    attributes: {
      title: "Outdent",
    },
    result: (rte) => rte.exec("outdent"),
  });

if (options.list) {
  rte.add("unorderedList", {
    icon: icons.unorderedList || '<i class="fa fa-list-ul"></i>',
    attributes: {
      title: "Unordered List",
    },
    result: (rte) => rte.exec("insertUnorderedList"),
  });

  rte.add("orderedList", {
    icon: icons.orderedList || '<i class="fa fa-list-ol"></i>',
    attributes: {
      title: "Ordered List",
    },
    result: (rte) => rte.exec("insertOrderedList"),
  });
}

options.align &&
  rte.add("justifyLeft", {
    icon: icons.alignLeft || '<i class="fa fa-align-left"></i>',
    attributes: {
      title: "Align Left",
    },
    result: (rte) => rte.exec("justifyLeft"),
  });

options.align &&
  rte.add("justifyCenter", {
    icon: icons.alignCenter || '<i class="fa fa-align-center"></i>',
    attributes: {
      title: "Align Center",
    },
    result: (rte) => rte.exec("justifyCenter"),
  });

options.align &&
  rte.add("justifyRight", {
    icon: icons.alignRight || '<i class="fa fa-align-right"></i>',
    attributes: {
      title: "Align Right",
    },
    result: (rte) => rte.exec("justifyRight"),
  });

});
};

I've tested this on the latest versions of both browsers. In Chrome, all features of the extension are working without issues. However, in Firefox, the toolbar options do not appear to function properly.

I would appreciate any insights or suggestions for resolving this issue.

Thank you!