WYSIWYG / Rich Text Editor

askvortsov

WYSIWYG / Rich Text Editor

A Flarum extension. Fully integrated Rich Text Editor for Flarum. Compatible starting with beta 16.

Integrates well with Checklists and Markdown Tables.

Screenshot

Installation

composer require askvortsov/flarum-rich-text:*

Updating

composer update askvortsov/flarum-rich-text

FAQ

Is it a bundled extension?

No, at least for now. We might re-evaluate that decision after stable, but for now, it's going to be published and maintained by me personally. That being said, the new editor driver is part of public API, and the editor implementations are mostly pure JS, so it shouldn't experience issues with Flarum updates for the forseeable future.

What does it support?

By default, everything from https://s9etextformatter.readthedocs.io/Plugins/Litedown/Syntax/ except indented codeblocks and lines under headers. The tables and checklists extensions add support for https://s9etextformatter.readthedocs.io/Plugins/PipeTables/Syntax/ (currently not for compact tables) and https://s9etextformatter.readthedocs.io/Plugins/TaskLists/Synopsis/.

BBCodes will not be WYSIWYD'ed. However, symbols used for them shouldn't be escaped so you should still be able to use them.

What's it written in?

It's based on the excellent ProseMirror editor framework.

Is it extensible?

Yes! The markdown tables and tasklists extensions are meant as a proof of concept of how flexible it is. However, ProseMirror is quite challenging to work with, so these kinds of extensions are quite advanced.

If you're interested in extending it and are very familiar with JS, feel free to reach out.

Does it work with mentions, emoji, and fof upload?

Yes.

Can users opt out?

Yes, on their settings page there's a preference. You can also enable a setting in the admin dashboard that will add a toggle directly to the editor.

Are there any cons?

This extension has substantial bundle size, about 350kb minified (gzipped will be smaller). For most (especially nontechnical) communities this will be worth it, for others, it might not be. We are looking into code splitting opportunities to reduce the TTFB impact, but that is quite challenging and will likely take a while. Note that this is still considerably less than Flarum competitors.

[deleted]

@Bishwas-py - see below

askvortsov Compatible starting with beta 16.

You seem to be running beta 15

peopleinside

askvortsov very useful, give a better experience.
I will definitively use it!

Thank you, you are amazing as always. I feel lucky to see you in Flarum.

ctml

askvortsov except indented codeblocks

Does this include indented lists? Or is there maybe some keyboard shortcut to use nested bullets in a list? Thanks!

clarkwinkelmann

Bymemor it can only render Markdown-based images. See

askvortsov What does it support?

If you're using FoF Upload, you can configure it to insert Markdown images, in which case I believe images will render in the preview

Kakifrucht

Boom! Can't wait to try this one out, very exciting!

010101

Even though I knew this was coming I can’t believe it. Amazing!

ctml

This is amazing! Thank you for your continued dedication to flarum and the community, you (and the entire flarum team) continuously listen to community feedback and I think this is in part a product of that. The future of flarum is looking good!

tolgaaaltas

ornanovitch

👏

askvortsov

v1.0.2

Add input rule support for 1) lists in addition to 1. lists. Essentially, when you type that out and press space, it will automatically become a list.

Bishwas-py

Got these issues:

./composer.json has been updated
Running composer update askvortsov/flarum-rich-text
Loading composer repositories with package information
Updating dependencies
Your requirements could not be resolved to an installable set of packages.

  Problem 1
    - askvortsov/flarum-rich-text[v1.0.0, ..., v1.0.2] require flarum/core ^0.1.0-beta.16 -> found flarum/core[v0.1.0-beta.16] but the package is fixedto v0.1.0-beta.15 (lock file version) by a partial update and that version does not match. Make sure you list it as an argument for the update command.
    - Root composer.json requires askvortsov/flarum-rich-text * -> satisfiable by askvortsov/flarum-rich-text[v1.0.0, v1.0.1, v1.0.2].

Use the option --with-all-dependencies (-W) to allow upgrades, downgrades and removals for packages currently locked to specific versions.

Installation failed, reverting ./composer.json and ./composer.lock to their original content.

Here's php flarum info:

Flarum core 0.1.0-beta.15
PHP version: 7.4.15
Loaded extensions: Core, date, libxml, openssl, pcre, zlib, bz2, calendar, ctype, curl, hash, filter, ftp, gettext, gmp, SPL, iconv, pcntl, readline, Reflection, session, standard, shmop, SimpleXML, mbstring, tokenizer, xml, i360, bcmath, dba, dom, enchant, fileinfo, gd, imap, intl, json, ldap, exif, mysqli, mysqlnd, odbc, PDO, pdo_mysql, PDO_ODBC, pdo_pgsql, pdo_sqlite, pgsql, Phar, posix, pspell, snmp, soap, sockets, sqlite3, sysvmsg, sysvsem, sysvshm, tidy, xmlreader, xmlrpc, xmlwriter, xsl, yaml, zip
+-----------------------+------------------+--------+
| Flarum Extensions     |                  |        |
+-----------------------+------------------+--------+
| ID                    | Version          | Commit |
+-----------------------+------------------+--------+
| flarum-approval       | v0.1.0-beta.15   |        |
| flarum-bbcode         | v0.1.0-beta.15   |        |
| flarum-emoji          | v0.1.0-beta.15   |        |
| flarum-lang-english   | v0.1.0-beta.15   |        |
| flarum-flags          | v0.1.0-beta.15   |        |
| flarum-lock           | v0.1.0-beta.15   |        |
| flarum-markdown       | v0.1.0-beta.15   |        |
| flarum-mentions       | v0.1.0-beta.15   |        |
| flarum-statistics     | v0.1.0-beta.15   |        |
| flarum-sticky         | v0.1.0-beta.15.1 |        |
| flarum-subscriptions  | v0.1.0-beta.15   |        |
| flarum-suspend        | v0.1.0-beta.15   |        |
| flarum-tags           | v0.1.0-beta.15   |        |
| fof-links             | 0.5.4            |        |
| fof-best-answer       | 0.3.6            |        |
| fof-gamification      | 0.4.3            |        |
| fof-formatting        | 0.3.1            |        |
| flarum-pusher         | v0.1.0-beta.15   |        |
| fof-share-social      | 0.3.0            |        |
| fof-nightmode         | 0.7.1            |        |
| fof-pretty-mail       | 0.3.0            |        |
| fof-polls             | 0.3.2            |        |
| fof-follow-tags       | 0.6.5            |        |
| fof-merge-discussions | 0.5.1            |        |
| fof-sitemap           | 0.6.0            |        |
| fof-drafts            | 0.3.2            |        |
| fof-analytics         | 0.11.0           |        |
| v17development-seo    | 1.5.1            |        |
| fof-oauth             | 0.2.1            |        |
| fof-masquerade        | 0.3.7            |        |
| askvortsov-pwa        | v2.0.4           |        |
| fof-user-directory    | 0.5.3            |        |
| fof-upload            | 0.12.10          |        |
| zerosonesfun-hashtags | 4.0.3            |        |
| ianm-html-head        | 0.1.1            |        |
+-----------------------+------------------+--------+
Base URL: https://study.webmatrices.com
Installation path: /home/globallo/study.webmatrices.com
Debug mode: off

composer why-not flarum/core v0.1.0-beta.16

fof/best-answer                     0.3.6           requires          flarum/core (>=0.1.0-beta.15 <0.1.0-beta.16)
fof/gamification                    0.4.3           requires          flarum/core (>=0.1.0-beta.15 <0.1.0-beta.16)
fof/links                           0.5.4           requires          flarum/core (>=0.1.0-beta.15 <0.1.0-beta.16)
fof/sitemap                         0.6.0           requires          flarum/core (>=0.1.0-beta.15 <0.1.0-beta.16)
maicol07/flarum-ext-sso             1.8.1           requires          flarum/core (>=0.1.0-beta.15 <0.1.0-beta.16)
matteocontrini/flarum-imgur-upload  v3.6.0          requires          flarum/core (>=0.1.0-beta.15 <0.1.0-beta.16)
flarum/core                         v0.1.0-beta.16  requires          dflydev/fig-cookies (^3.0.0)
flarum/flarum                       -               does not require  dflydev/fig-cookies (but v2.0.3 is installed)
flarum/core                         v0.1.0-beta.16  requires          franzl/whoops-middleware (^2.0.0)
flarum/flarum                       -               does not require  franzl/whoops-middleware (but 0.4.1 is installed)
flarum/core                         v0.1.0-beta.16  requires          illuminate/bus (^8.0)
flarum/flarum                       -               does not require  illuminate/bus (but v6.20.19 is installed)
flarum/core                         v0.1.0-beta.16  requires          illuminate/cache (^8.0)
flarum/flarum                       -               does not require  illuminate/cache (but v6.20.19 is installed)
flarum/core                         v0.1.0-beta.16  requires          illuminate/config (^8.0)
flarum/flarum                       -               does not require  illuminate/config (but v6.20.19 is installed)
flarum/core                         v0.1.0-beta.16  requires          illuminate/container (^8.0)
flarum/flarum                       -               does not require  illuminate/container (but v6.20.19 is installed)
flarum/core                         v0.1.0-beta.16  requires          illuminate/contracts (^8.0)
flarum/flarum                       -               does not require  illuminate/contracts (but v6.20.19 is installed)
flarum/core                         v0.1.0-beta.16  requires          illuminate/database (^8.0)
flarum/flarum                       -               does not require  illuminate/database (but v6.20.19 is installed)
flarum/core                         v0.1.0-beta.16  requires          illuminate/events (^8.0)
flarum/flarum                       -               does not require  illuminate/events (but v6.20.19 is installed)
flarum/core                         v0.1.0-beta.16  requires          illuminate/filesystem (^8.0)
flarum/flarum                       -               does not require  illuminate/filesystem (but v6.20.19 is installed)
flarum/core                         v0.1.0-beta.16  requires          illuminate/hashing (^8.0)
flarum/flarum                       -               does not require  illuminate/hashing (but v6.20.19 is installed)
flarum/core                         v0.1.0-beta.16  requires          illuminate/mail (^8.0)
flarum/flarum                       -               does not require  illuminate/mail (but v6.20.19 is installed)
flarum/core                         v0.1.0-beta.16  requires          illuminate/queue (^8.0)
flarum/flarum                       -               does not require  illuminate/queue (but v6.20.19 is installed)
flarum/core                         v0.1.0-beta.16  requires          illuminate/session (^8.0)
flarum/flarum                       -               does not require  illuminate/session (but v6.20.19 is installed)
flarum/core                         v0.1.0-beta.16  requires          illuminate/support (^8.0)
flarum/flarum                       -               does not require  illuminate/support (but v6.20.19 is installed)
flarum/core                         v0.1.0-beta.16  requires          illuminate/validation (^8.0)
flarum/flarum                       -               does not require  illuminate/validation (but v6.20.19 is installed)
flarum/core                         v0.1.0-beta.16  requires          illuminate/view (^8.0)
flarum/flarum                       -               does not require  illuminate/view (but v6.20.19 is installed)
flarum/core                         v0.1.0-beta.16  requires          laminas/laminas-diactoros (^2.4.1)
flarum/flarum                       -               does not require  laminas/laminas-diactoros (but 1.8.7p2 is installed)
flarum/core                         v0.1.0-beta.16  requires          middlewares/base-path (^2.0.1)
flarum/flarum                       -               does not require  middlewares/base-path (but v1.1.0 is installed)
flarum/core                         v0.1.0-beta.16  requires          middlewares/base-path-router (^2.0.1)
flarum/flarum                       -               does not require  middlewares/base-path-router (but v0.2.1 is installed)
flarum/core                         v0.1.0-beta.16  requires          middlewares/request-handler (^2.0.1)
flarum/flarum                       -               does not require  middlewares/request-handler (but v1.4.0 is installed)
flarum/core                         v0.1.0-beta.16  requires          symfony/config (^5.2.2)
flarum/flarum                       -               does not require  symfony/config (but v4.4.20 is installed)
flarum/core                         v0.1.0-beta.16  requires          symfony/console (^5.2.2)
flarum/flarum                       -               does not require  symfony/console (but v4.4.20 is installed)
flarum/core                         v0.1.0-beta.16  requires          symfony/event-dispatcher (^5.2.2)
flarum/flarum                       -               does not require  symfony/event-dispatcher (but v4.4.20 is installed)
flarum/core                         v0.1.0-beta.16  requires          symfony/translation (^5.1.5)
flarum/flarum                       -               does not require  symfony/translation (but v4.4.20 is installed)
flarum/core                         v0.1.0-beta.16  requires          symfony/yaml (^5.2.2)
flarum/flarum                       -               does not require  symfony/yaml (but v4.4.20 is installed)

Bishwas-py

[deleted] Yupp, but how to upgrade the forum?

010101

I just wanted to come back here to say how appreciative I am for this extension. For a tech related community I can see the regular markdown editor being preferred, but for pretty much any other type of community it’s much easier for your average user to see the formatting as they type.

I also haven’t noticed my site loading any slower. It seems just as fast to me. And so the size of this extension doesn’t seem to hurt.

Thank you for making this!

010101

I’ve run into an interesting situation. The original editor uses <br> tags in between lines. This worked best when posting something like poetry.

This rich text editor instead starts a new paragraph each time enter/return is pressed.

What this means is, when posting poetry, I’ve gone from:

the first line
the next line

to:

the first line

the next line

Using CSS to change the spacing won’t work out because then posts won’t have any spacing. Even in between "real" paragraphs.

I think this is a common problem with wysiwyg editors. Some even advertise that you can switch between auto p and br due to this type of scenario.

Does this editor have a way to go from auto p on enter to br?

askvortsov

010101 Would it be preferable for paragraphs to be separated by 1 newline instead of 2 newlines? Right now, one newline is possible via shift-enter. That's behavior that could be changed though, either as an admin setting or globally.

010101

askvortsov I guess not everyone would want this so I guess it would have to be an admin setting? Or, maybe it should be the default 🤔... if you want this editor to match the original editor's behavior as closely as possible, then one enter should make a '<br>' and not a new '<p></p>'.

Sounds like this is what I’m looking for:
https://discuss.prosemirror.net/t/changing-the-way-line-breaks-are-handled/1682/4

Justoverclock

i have an issue with rich text.

if i start a new post by quote a text from a post? i need to toggle off preview in composer to start writing off the quote tag, after that, i can start writing on a new line, and toggle ON again rich text

here the sample:

@askvortsov

User24

Justoverclock tried shift + enter ?

010101

User24

One thing I’ve noticed about shift+enter is it doesn’t work on mobile. At least not on my iPhone.

Justoverclock

User24 not work 🙁

askvortsov

Justoverclock if you press enter twice and then try to type, what happens? That should take you out of the quote block.

Justoverclock

askvortsov i'm very stupid....why i did non try this before..........oh my god.

Hari

Justoverclock haha this happens to me too all the time ... i some times hit "esc" instead of enter 😁