Use TextEditor at frontend by extension

Flaiming

Hi, I'm starting to learn how to write Flarum extensions (I'm working mainly with Python and JS, but worked with PHP in the past). I studied docs and they are great 🙂
Currently I'm trying to extend fof/masquerade extension so there is field with rich text type (wysiwyg editor). Adding custom type to admin worked ok, but I have two problems:

Displaying and using of TextEditor component at user profile. I can display it, but I'm not able to keep value after submitting.
How to use s9e.TextFormatter to output stored value as html? I tried s9e.TextFormatter.preview method but it requires second parameter to be element with attribute ownerDocument, which I don't know how to obtain.

Could someone point me at right direction or at least point at some existing Flarum extension, that is using TextEditor? I don't know any.

clarkwinkelmann

I'm not sure that TextEditor was designed to be re-used outside of its original context.

This is what I've been using in my Formulaire extension:

import app from 'flarum/app';
import Component from 'flarum/Component';

/* global m, s9e */

export default class RichTextField extends Component {
    config(isInitialized, context) {
        if (isInitialized) return;

        // Similar to the post preview, refresh every 50ms if the content has changed
        let preview;
        const updateInterval = setInterval(() => {
            const content = this.element.querySelector('textarea').value;

            if (preview === content) return;

            preview = content;

            if (preview) {
                s9e.TextFormatter.preview(preview, this.element.querySelector('.js-preview'));
            } else {
                // This is just to show a paragraph in the preview area when there's nothing to render
                const placeholder = document.createElement('P');
                placeholder.className = 'FormulaireRichPlaceholder';
                placeholder.innerText = app.translator.trans('kilowhat-formulaire.forum.rich-text.preview-placeholder');
                this.element.querySelector('.js-preview').innerHTML = '';
                this.element.querySelector('.js-preview').appendChild(placeholder);
            }
        }, 50);

        context.onunload = () => clearInterval(updateInterval);
    }

    view() {
        return m('.FormulaireRich', [
            m('.FormulaireRichPreview.js-preview', {
                onclick: event => {
                    event.preventDefault();
                    this.element.querySelector('textarea').focus();
                },
            }),
            m('textarea.FormControl', this.props),
        ]);
    }
}

The field component is then used with a simple value and onchange props like normal fields.

If course the downside is that you don't get the markdown autocomplete, emoji autocomplete or the editor toolbar.

Server-side the plain text needs to be parsed before storing in the database as XML. And unparsed+rendered at run time to obtain plain text and html output.

Flaiming

clarkwinkelmann Ok, I'll use this approach to create wysiwyg instead of TextEditor, thanks.

As for rendering of HTML, I thought that there is some way how to parse and render formatted text on frontend. Guess I'll just do it at backend 🙂

Flaiming

To answer my original question, I used approach from clarkwinkelmann - creating simple textarea with live preview with use of s9e.TextFormatter.preview. But there is no toolbar with formatting buttons (bold, cursive etc.).

@clarkwinkelmann I created pull request for fof/masquerade with additional questions, could you look into it when you have time?

clarkwinkelmann

Flaiming technically, there are 2 ways of rendering the formatted text.

Backend is how Flarum does it as it also allows generating the noscript view for discussions.

We only use the javascript side for previews, but technically you could also use that to render your content https://s9etextformatter.readthedocs.io/JavaScript/Introduction/

The javascript-generated content has limited features regarding custom Flarum markup like mentions. For those, server-side rendering is required.

But if all you're after are standard bbcode/markdown, either javascript or PHP rendering should do fine.

eddiewebb

This is helpful, but I'm still needing more 🙁

With JavaScript enabled, finalize() will return an element named js that contains the JavaScript source for the s9e.TextFormatter JavaScript object.

Beyond adding the following lines to extend.php, im unsure how to actually access the generated js element in my frontend code.. I thought perhaps adding it to <head> on particular routes? But I don't think extenders have any ordering/chaining, so how to get generated JS element as something on frontend?

 //let us use s9e formatter as JS in frontend to parse markdown in event details.
    (new Extend\Formatter)
        ->configure(function (Configurator $config) use($s9eObject) {
            $config->enableJavaScript();
            $s9eObject = extract($config->finalize());
            print($s9eObject);
        }),


    (new Extend\Frontend('forum'))
        ->js(__DIR__.'/js/dist/forum.js')
        ->css(__DIR__.'/resources/less/forum.less')
        ->route('/events', 'advevents')
        //add s9e fikes to frontend
        ->content(function (Document $document, Request $request) use ($s9eObject) {
            $document->head[] = '<script>' . $s9eObject .'</script>';
        }),

clarkwinkelmann

eddiewebb Flarum already exposes the s9e.TextFormatter object, I don't think you need to do it again yourself unless you want your completely separate TextFormatter instance beside Flarum's.

eddiewebb

Noice! IN case anyone who's as clueless as me with es6, you can use hte preview function to insert parsed text to a component ofi choice,


  content() {
    const user =  this.props.event.extendedProps.user;
    console.log(user);
    return [
      <div className="Modal-body">
        <p id="eventdescription"/>
        <p>Hosted by: <a href={app.route.user(user)} config={m.route}>
          {avatar(user)}
          {userOnline(user)}
          {username(user)}
        </a></p>
      </div>,
    ];
  }

  config(){
    const descElement = document.getElementById("eventdescription");
    s9e.TextFormatter.preview(this.props.event.extendedProps.description,descElement);
  }

clarkwinkelmann

Flaiming the toolbar is a feature provided by the Markdown extension, not by TextFormatter. It should be possible to re-use it, or simply use the same library to create another toolbar with the same controls.

I have seen the Masquerade PR but haven't had the time to take a look yet.

Flaiming

clarkwinkelmann Ok, I'll look into it.