smd_textile_bar: Simple Textile insertion for the Write panel

Bloke · 2020-04-26 16:06:49

Based on the pioneering work of Hakjoon, and then Gocom, this fork of the Textile formatting toolbar brings it up-to-date for Textpattern 4.7.0 and higher. It packs the following features:

Inserts Textile into the Body/Excerpt areas around the highlighted text, or at the insertion point. From Txp 4.8.0, live preview for the field can be activated to see the results.
Button availability may be set by administrators (Managing Editor and higher).
Button display customisable by all users – buttons, text, icons, etc.
Insertion of shortcodes available via a nominated Form type.

Please download the .txt file from GitHub and install as usual. Once activated, visit the plugin’s Preferences panel to customise what is displayed on the bar. Then visit the Write panel and play.

Immense thanks to Julian Reisenberger (jakob in the forum) for his amazing assistance in getting this plugin resurrected, and for the brilliant SVG icon set it uses.

For bug reports or feature requests, please raise an issue after checking that nobody else has raised it, and I’ll see what can be done.

Have fun, and I hope this serves you and your clients well.

Changelog

v0.1.1 | Fix lost superscript button when using combined headings (thanks, jools-r).
v0.1.0 | Initial release

Last edited by Bloke (2020-04-26 17:32:59)

Bloke · 2020-04-26 17:31:37

And the first update (already!) to fix the oversight regarding loss of superscript button when using the combined heading button.

Thanks to the eagle-eyed jools-r for spotting my blunder.

Download v.01.1 from GitHub

colak · 2020-04-26 20:21:52

If all goes well for a project we are working on, this will come very handy next year. Thanks for updating the plugin Stef.

jakob · 2020-04-26 20:34:29

@bloke: It’s really great that you’ve resurrected this and it can be added back to the collection of regular plugins that are up to date. Big thanks!
It’s also good that admins can set which buttons should appear to match their site (e.g. disable h1 if that is already set with the page title) and that short-tag forms can be added (if set). At the same time, individual users can have their own settings. There are lots of nice touches to it.

@everyone else: At present the icon variant is in English only. Other language Textpacks can at least show the respective tooltip (or the regular link title tag when not showing tooltips) in the localised language.
While I guess most languages have become familiar with B and I etc., some toolbar UIs in other languages do have different icons. German, for example, has “F” for Bold (“Fett”) and “K” for Italic (“Kursiv”), and in fact those icons are already done.
What about other languages? Do formatting toolbars in other languages use other symbols than “B” or “I” etc. Perhaps we can find a way of making the icon reflect the language too.

There’s also an “Underline” and a “Strikethrough” icon which one sees commonly on formatting toolbars, but it turns out that Textile doesn’t support them (in fact HTML5 no longer supports strike either) and instead has support for <ins>…</ins> and <del>…</del> (See the docs). As these have a semantic meaning that isn’t the same as what most people use underlining for (e.g. stylistic emphasis), we elected not to use “U” and “S”. What do people think? Agree? Disagree?

Finally, a bunch of the icons are from / or derive partly from Iconoir by Luca Burgio, which has a fair open-source use license and is well worth purchasing.

etc · 2020-04-26 20:39:26

That’s very cute, thanks Stef and Julian!

Would it be possible to somehow trigger ‘change’ event, in order to enable standard browser undo/redo features and txp live preview?

jrmartin · 2020-04-26 21:11:53

Now if it could just insert: notextile. <txp:images id=“xx” form=“images” /> into the body of the page I could convince people not to be afraid of abandoning Wordpress. Image insertion is a big problem, not for me but for someone not familiar with the CMS. Or perhaps someone has solved this problem…

Bloke · 2020-04-26 21:17:01

etc wrote #322706:

Would it be possible to somehow trigger ‘change’ event, in order to enable standard browser undo/redo features and txp live preview?

I did wonder about that as I noticed live preview didn’t trigger. Should be fairly easy I think.

On another note, I can’t figure why the bar won’t disappear on 4.7.x when Use Textile is unselected. It works fine on 4.8. Here’s the delegation I’ve tried so far, all of which works in 4.8 but not in 4.7:

$('.txp-textfilter-options').on('change', smd_textile_bar_toggle).change();
$('.txp-textfilter-options').on('change', '.textfilter-value', smd_textile_bar_toggle).change();
$('.txp-form-field-textarea').on('change', '.txp-textfilter-options', smd_textile_bar_toggle).change();
$('.txp-form-field-textarea').on('change', '.txp-textfilter-options .textfilter-value', smd_textile_bar_toggle).change();

I also tried blur and click events… Nada.

Gotta be missing something obvious. *shrug*

Last edited by Bloke (2020-04-26 21:54:19)

jakob · 2020-04-26 21:26:35

jrmartin wrote #322707:

Now if it could just insert: notextile. <txp:images id=“xx” form=“images” /> into the body of the page I could convince people not to be afraid of abandoning Wordpress. Image insertion is a big problem, not for me but for someone not familiar with the CMS. Or perhaps someone has solved this problem…

You can, kind of:

First of all, since txp 4.8, you no longer need the notextile. or the space at the beginning of the line :-)

Then:

make yourself a short-tag (example) of your own that outputs your image(s) how you want them.
In txp 4.8, open Admin › Preferences › Advanced options (you might have to first enable that under Admin › Preferences › Admin), add the following to Custom form template types:

[short_tags]
title="Short Tags"

(or use a name of your own choosing). This gives you a new custom form group under Presentation › Forms. This is purely organisational, however it helps for smd_textile_bar.

Switch to Presentation › Forms and reassign your short-tag form to that new category.
Now in Admin › Preferences › Textile Bar, set Allow Form insertion from this group from the drop-down to Short Tags (or whatever you called it).

The textile bar will now have an insert form icon (a hexagon with a +). Click on that to insert <txp::your_short_tag /> into the Body or Excerpt field. If you have several such forms, clicking again with the cursor in the same place rotates between your custom short-tags.

Bloke · 2020-04-26 21:27:32

jrmartin wrote #322707:

Now if it could just insert: notextile. <txp:images id=“xx” form=“images” /> into the body of the page…

Use shortcodes. Set up a Form type called shortcodes and make one with that code in it. Call it something like “pictures” or “gallery”.

Enable form button support in the plugin prefs and you’re away. Click to add the tag. You can hard code the form=“images” as a default in your shortcode. The id’s, well, in the absence of passing them in, your shortcode could read article image ids instead. Then an image plugin like abc_article_image can handle drag/drop images on the Write panel and your authors can place the gallery where they like in the body text.

Edit: Jakob was faster.

Last edited by Bloke (2020-04-26 21:31:55)

Bloke · 2020-04-26 21:47:28

Bloke wrote #322708:

[Trigger change on field] Should be fairly easy I think.

Or not… *sigh*

phiw13 · 2020-04-27 08:17:44

Nice to bring this back to life! TY. Overall it seems to work fine.

A few things:

when you add the form button (nice to have !), it inserts the first short-code form available I think. A subsequent click, without moving the insertion point, inserts (replaces first insert) with the 2nd, etc. In an ideal world this possibly could be a select widget. Right now it feels a bit odd – it probably get more predictable after a few times of use.
but you knew this one already… Dark mode support is non-existent – and the actual result in Hive is… ahem…

sidenote – it would be nice if the admin themes use a standard set of CSS custom properties / variables. Extension(s) could the used those as well an integrate with a theme. I’ve mentioned that in the past, I dunno if anybody ever noticed. (I know, one of the issues: support for IE 11)

colak · 2020-04-27 08:23:38

phiw13 wrote #322712:

Nice to bring this back to life! TY. Overall it seems to work fine.

A few things:

when you add the form button (nice to have !), it inserts the first short-code form available I think. A subsequent click, without moving the insertion point, inserts (replaces first insert) with the 2nd, etc. In an ideal world this possibly could be a select widget. Right now it feels a bit odd – it probably get more predictable after a few times of use.

Not quite. Every time you click the button, the next form is inserted. The issue is that it means very little when using it for short codes, which they would be much more accessible with this plugin, if they were under their own parent category.

Textpattern CMS

Textpattern CMS support forum

#1 2020-04-26 16:06:49