How to add text formatting functionalities in a text input field of a from?

I’m talking about the functionalities such as,

  1. Including code,
  2. Uploading image
  3. mention a person
  4. bold, italics underlined text,
  5. bullets etc

The kind of formatting options you see when writing on stack overflow or github.
See the link for clarity.

How do I achieve that?
Thank you

1 Like

They aren’t part of the form per se, they’re separate pieces of functionality. What you’re talking about is a rich text editor. And you can basically divide up what you’re talking about into four pieces of functionality:

  1. Formatting options are relatively simple. What you do is have a program that wraps the users input in HTML tags; when the form is submitted, what gets submitted is a string that includes HTML tags. This in itself gets quite complex quickly.
  2. Code - this can be as simple as wrapping code parts in the right tags, in which case would be done as part of 1. But as you get into wanting syntax highlighting, line numbers etc, gets more complex. A full editor component is more than achievable via well established libraries, but each extra bit of functionality you want adds difficulty.
  3. Uploading images: either the form needs to be able to actually upload files, or you need a separate interface that lets you pick/add files stored somewhere else, and what gets submitted is the URL for that resource, wrapped up in, say, an tag as part of 1.
  4. @mentions - with this, you need the list of users stored somewhere, and normally there is some kind of autocomplete application that lets you type a username and it returns a filtered list to pick from. Generally you need some way to indicate you’re typing a user, so intercept some combination of characters (say @ then some letters), then open up the component that lets a user select, although you could just have a sseparatepart of the form with a list of users. You start getting into architectural decisions over “how notify a user that they’ve been mentioned” at point as well. This component is the most complex part by far because of the number of moving parts.

If you want to do this, I would try to implement them in order - 1 is quite easy, 2 can get harder depending on what you want, 3 and 4 are each a big jump in complexity.

Often you want preview functionality, that’s yet another pain point, but most libs have this functionality built in: they’ll just print out the HTML-wrapped strings of text as a user types, giving them feedback immediately.


(Prosemirror is by the guy who wrote Eloquent JS, he also built the code editor version which is very heavily battle tested)

If you’re using React, FB built

There are loads more, TinyMCE was always the go-to, but it’s pretty horrible to work with, particularly if you don’t want something that looks like it came out of Windows 98

EDIT: just as an FYI, implementing this is a good exercise, it will give you a window into what web development is generally like. It’s incredibly frustrating getting it to a point where it works properly. Most of the time will be taken up finding the libraries that do the things you want, that work with your setup. For such a seemingly small thing it has an incredible amount of complexity - any program that involves a user editing things rather than just getting info has this issue. When you get to that point you will find a laundry list of things that you need it to do that it won’t do well, or it will be very difficult to style. You need a backend as well as a front-end for some of the pieces of functionality, so even if that backend is something ready-built like WordPress, if you build the editor out yourself rather than just using an out of the box plugin, you’ll get a real sense of understanding re the processes involved.