Shoji Editor Guide

The editor is dead, long live the editor!

For the last 3 years, we've used an editor called Froala to deliver our plain-text email-building experience. It worked OK but, being honest with myself, it was a fairly subpar writing experience and we often ran into frustrating issues that impacted a lot more customers than I would have liked (things like image uploads being glitchy, mismatched styling, etc).

During a Copywriting Open Office Hours session with @Mike (Ebushi), @Bhanu Teja and @Steven, I actually found myself using Google Docs instead of the editor to draft my emails just because it wasn't up to scratch. I felt embarrassed!

So, I grabbed that energy and funneled it towards ripping out Froala and rebuilding a new editor from scratch. This new editor, named the Shoji editor, will serve as a base for us to build upon moving forward and have a much tighter integration into Bento.

Features

A lot was changed and added but here are some of the highlights:

Liquid support — know when your Liquid is valid. Focus highlighting so you always know where (and what) you are editing. Lightweight Markdown support for fast writing. Import images from multiple sources (including your camera or website). Run / to switch between block types (kinda like Notion). Run @ to get access to popular Liquid fields New block types: checkboxes, quotes, horizontal lines, buttons, etc. Emoji and hex color support Better copy and paste support (inc. images hosted elsewhere) The editing experience uses the same font as the rendered email. Granular image controls OpenAI Copywriting Having trouble coming up with a new paragraph or Subject? Let our AI do it for you. It can also help you rephrase what you wrote, help with tone, or even simpify it.

##How-To Let's go over how to access the new features of the editor.

###Block Type One of the biggest changes is the ability to type "/" to change the block type, e.g. from a paragraph to a button. The screenshot below will help break down the different types.

###AI Copy As mentioned in the feature list earlier, AI copywriting was added if, try as you might, you just can't come up with the right words yourself.

You access this in a few different ways. If you just wrote a killer paragraph but can't think of a follow-up just hit enter to create a new text block. In the new empty block a tool pop-up should appear. You want to select "Write for me." Give it a sec, then admire your nice new paragraph. If it isn't as nice as you would like just delete it and when the tool pop-up comes back hit "Write for Me" again.

Let's say you like the new paragraph but it just doesn't hit the right tone, maybe it is a bit complicated, or you just think a slight rephrase will do the trick we got you covered. Highlght the text you want changed and in the tool pop-up, you can choose to "Rephrase", "Simplify", or change the "Tone" to make it friendlier, formal, or casual. This applies to all text as well, not just AI written text.

The last AI addition is the ability to craft a subject line. For this one you just need to hit the circle icon on the right of the subject line box.

The new editor is a living thing that will grow and change with the needs of our customers, so if you have any feedback please let me know.

That goes for this doc as well. I will be adding to it as the editor grows and changes. I will also be adding in tips/tricks and how-to's so that you can get the most out of the new editor. So make sure to bookmark this page.