How to add a composer toolbar button in Flarum 2.x?

Capybara

I’m developing a custom extension for Flarum 2.x and trying to add a new toolbar button to the composer – similar to flarum/markdown or flarum/emoji. The JS bundle builds fine, but the button doesn’t appear and I get runtime errors depending on which TextEditor import I use.

extend.php

<?php

namespace User\BB;

use Flarum\Extend;

return [
    (new Extend\Formatter())->configure(Configure::class),
    new Extend\Locales(__DIR__ . '/resources/locale'),
    (new Extend\Frontend('forum'))
        ->css(__DIR__ . '/resources/less/forum.less')
        ->js(__DIR__ . '/js/dist/forum.js'),
];

js/forum.js

export * from './src/forum';

js/src/forum/index.js

import app from 'flarum/forum/app';
import { extend } from 'flarum/common/extend';

// I tried BOTH of these (see errors below):
// import TextEditor from 'flarum/forum/components/TextEditor';
import TextEditor from 'flarum/common/components/TextEditor';

import TextEditorButton from 'flarum/common/components/TextEditorButton';
import m from 'flarum/common/mithril';

app.initializers.add('user-bb-center-button', () => {
  extend(TextEditor.prototype, 'toolbarItems', function (items) {
    items.add(
      'bbcode-center',
      m(TextEditorButton, {
        icon: 'fas fa-align-center',
        title: app.translator.trans('user-bb.forum.composer.center_button'),
        onclick: () => this.insertAround('[center]', '[/center]'),
      }),
      90
    );
  });
});

js/webpack.config.js

module.exports = require('flarum-webpack-config')();

js/package.json

{
  "private": true,
  "name": "user-flarum-bb",
  "version": "0.1.0",
  "scripts": {
    "build": "webpack --mode production",
    "dev": "webpack --mode development --watch"
  },
  "dependencies": {
    "flarum-webpack-config": "^3.0.0",
    "webpack": "^5.76.0",
    "webpack-cli": "^4.9.1"
  }
}

Build

cd js
npm install
npm run build
cd ..
php flarum cache:clear

The bundle builds; js/dist/forum.js is ₂ KB and contains require("flarum/forum/app"), etc.

Problem

The button doesn’t appear in the composer. I see different errors depending on the TextEditor import:
A. Using flarum/forum/components/TextEditor:
Uncaught Error: No module found for core:forum/components/TextEditor
B. Using flarum/common/components/TextEditor:
Uncaught TypeError: Cannot read properties of undefined (reading 'initializers')
In the second case it looks like app is undefined at runtime even though it’s imported.

Steps to reproduce

Add the code above to a new extension
Build JS — npm install && npm run build, clear Flarum cache
Open the composer on the forum

Observe: no new button; the console shows one of the errors above

Flarum Info

Flarum core: 2.0.0-beta.3
PHP version: 8.3.6
MySQL version: 8.0.43-0ubuntu0.24.04.1
Loaded extensions: Core, date, libxml, openssl, pcre, zlib, filter, hash, json, pcntl, random, Reflection, SPL, session, standard, sodium, mysqlnd, PDO, xml, bz2, calendar, ctype, curl, dom, mbstring, FFI, fileinfo, ftp, gd, gettext, iconv, igbinary, exif, mcrypt, mysqli, pdo_mysql, Phar, posix, readline, redis, shmop, SimpleXML, sockets, sysvmsg, sysvsem, sysvshm, tokenizer, xmlreader, xmlwriter, xsl, zip, Zend OPcache
+--------------------------+---------------+--------+
| Flarum Extensions        |               |        |
+--------------------------+---------------+--------+
| ID                       | Version       | Commit |
+--------------------------+---------------+--------+
| flarum-flags             | v2.0.0-beta.3 |        |
| flarum-approval          | v2.0.0-beta.3 |        |
| flarum-tags              | v2.0.0-beta.3 |        |
| flarum-suspend           | v2.0.0-beta.3 |        |
| flarum-subscriptions     | v2.0.0-beta.3 |        |
| flarum-sticky            | v2.0.0-beta.3 |        |
| flarum-statistics        | v2.0.0-beta.3 |        |
| flarum-pusher            | v2.0.0-beta.3 |        |
| flarum-nicknames         | v2.0.0-beta.3 |        |
| flarum-messages          | v2.0.0-beta.3 |        |
| flarum-mentions          | v2.0.0-beta.3 |        |
| flarum-markdown          | v2.0.0-beta.3 |        |
| flarum-lock              | v2.0.0-beta.3 |        |
| flarum-likes             | v2.0.0-beta.3 |        |
| flarum-lang-english      | v2.0.0-beta.3 |        |
| flarum-gdpr              | v2.0.0-beta.3 |        |
| flarum-extension-manager | v2.0.0-beta.3 |        |
| flarum-emoji             | v2.0.0-beta.3 |        |
| flarum-bbcode            | v2.0.0-beta.3 |        |
| user-bb         | dev-main      |        |
+--------------------------+---------------+--------+
Base URL: https://hide
Installation path: /var/www/hide/data/www/hide
Queue driver: redis
Session driver: redis (Code override. Configured to file)
Scheduler status: Active
Mail driver: mail
Debug mode: ON

What’s the correct way to add a TextEditorButton in Flarum 2.x and which import path should be used for TextEditor in 2.x?

Sami (SychO)

In 2.x many components like the composer and texteditor are lazy loaded/async. So they are not available right away in the default js bundle.

You have to remove the import statement and use the correct way of extending a lazy component.

Example from the mentions extension: flarum/frameworkblob/2.x/extensions%2Fmentions%2Fjs%2Fsrc%2Fforum%2FaddComposerAutocomplete.js#L115

Docs: https://docs.flarum.org/2.x/extend/frontend/#changing-the-ui-part-3

Capybara

Sami (SychO) Thanks! I did as in the example, the button appeared