User generated dynamic document

Question

The requirement is to allow the user of the website to create dynamic documents with placeholders. The placeholders can contain any item from a defined list.

Example:

Hello {name}, I'm contacting you to let you know that the new version {version} of {software} is now available on {website}.

I just made this up, but it illustrates the point. A possible solution is to have a simple text box and a button 'insert placeholder'. If user clicks on a placeholder {whatever}, a dialog pops up that lets the user modify the placeholder (from a list) or remove it. The 'insert placeholder' button would let the user to insert a new placeholder where the cursor is placed.

I'm wondering what is a better way to handle this.

Answer 1

Provide a rich text editor toolbar like what you see here, and make a combobox-like selection of available placeholders.

The more interesting part comes on the rendering of the edited text, as the placeholder is expected to be an atomic token, therefore two behaviours are wouldbe expected in my opinion:

• highlighted handling: usually, a "capsule", with light blue background
• atomic handling in selection, deletion, and copy-paste: you cannot delete half of the placeholder, if you hit backspace next to it, the whole thing disappears; you also can't select half of it, it's either part of the selection or it is not;
• if you copy a text containing a placeholder to-and-from the clipboard, its properties are retained

That said, it's not that easy to create such an editor. Perhaps it's easier to go with simple syntax highlighting, using codemirror or similar stuff.