[nodebb-plugin-buttons-galore] NodeBB: Buttons Galore

? Offline

NodeBB: Buttons Galore

Current version: 0.0.6

About

As I promised @Tanner, that I would, I decided to write up a quick plugin as a fork of @psychobunny's spoiler plugin. This plugin aims to add more buttons to the NodeBB composer, that may be of assistance to new Markdown users. My hope is that use of these buttons will benefit all users, while introducing newcomers to Markdown syntax that they may like to incorporate into their postings.

I want to clarify right away that this plugin is in extremely rough shape, and has a long way to go. While it doesn't have most of the features originally requested, the plugin is moving in that direction.

Kindly note, that this plugin will not be incorporating a button for spoilers, or a button for colors in post text. There are already plugins for these and I don't want to step on any toes of the authors (I already forked from @psychobunny as-is).

Please feel free to create issues, or make pull requests on GitHub. This is a simple project to help me get more oriented to the platform and slowly take on larger ones. I can only learn if you provide feedback or coding tips.

Features currently in the plugin:

Underlining
Text Alignment
~~Strikethrough effect~~
Code tags
Easy to use quote button for website citations / additional user remarks

Future Goals and Ambitions

Change order of buttons in composer - or develop a plugin that allows you to do this in ACP
Admins can disable specific buttons

Screenshot:

Version 0.0.4

Installation:

npm i https://github.com/TedRinehart/nodebb-plugin-buttons-galore.git
or
Install through NodeBB Admin Panel

Repo:

Build software better, together

GitHub is where people build software. More than 100 million people use GitHub to discover, fork, and contribute to over 420 million projects.

GitHub (github.com)

a_5mith

This could potentially be a very useful plugin. I will take a look at this tomorrow in more detail (iPad again) and update my plugins to include buttons, as I've nay bothered with any.

Tanner

Hooray for buttans! Thanks a bunch @Ted this is really great. I'll see what I can do about submitting a PR for the alignment and other things, if you don't beat me to it.

? Offline

@Tanner, feel free to. Classes started today, and work just tripled.

I was going to check @toolito's colors plugin to see how to do an HTML span.

Markdown, well Github flavored anyway, allows for text alignment in tables. I'd like to be able to align text without a need for tables, however.

a_5mith

@Ted Can be done with CSS. Is Center & Right enough for alignment?

? Offline

@a_5mith, of course. Got a PR up your sleeve for me?

a_5mith

@Ted I'll throw one together.

? Offline

@a_5mith, Sounds great. I'll try to give it a test and merge at lunch. Will probably need to be tonight before I can push it to NPM though.

psychobunny

This is cool. It's actually a bit tragic that those buttons aren't already included in the default composer

Thanks for making this

julian

Hhaahha, I only added the basic button in the composer with the full intention of coming back later and adding more. So much for that

There will be a refactoring of the composer for 0.5.x (maybe .1, maybe .2, I don't know) that'll make adding buttons easier... so will keep this plugin in mind for when that happens.

? Offline

@psychobunny, thanks for a solid code-base that I could work from. Tried make sure your rights weren't infringed in the process.

psychobunny

Tried make sure your rights weren't infringed in the process.

No worries about that haha, at least in my case. In general I just hope that whatever plugins I make will help people make more

? Offline

@psychobunny, that's an excellent philosophy.

While I have your attention, any tips on how to order the buttons and allow for enabling of some but not all of them, at admin discretion, in ACP?

psychobunny

Reordering buttons will be made possible when this happens:

There will be a refactoring of the composer for 0.5.x (maybe .1, maybe .2, I don't know) that'll make adding buttons easier... so will keep this plugin in mind for when that happens.

If you want to create an admin page, you can do something like this:

https://github.com/NodeBB/nodebb-plugin-kitchen-sink/blob/master/lib/adminPage.js for the route
and
https://github.com/NodeBB/nodebb-plugin-kitchen-sink/blob/master/lib/menuItems.js#L19-L28 for the menu link
and
https://github.com/NodeBB/nodebb-plugin-kitchen-sink/blob/master/templates/admin/kitchen-sink.tpl for the actual settings

Then you could pull the settings from an API call client-side, and then enable/disable as necessary. Good luck

? Offline

@psychobunny, excellent - thanks for the tips. Once things progress a bit I'll see about working on the ACP interface.

Tanner

@Ted so what do you think it will take to do the alignment; custom CSS or something more complicated? I'm willing to help in whatever capacity I can!

? Offline

@Tanner, I'm thinking either custom CSS or an HTML span would work. For something that's either going to be left or right aligned though, application of a CSS on the selected area seems to be a cleaner solution - just depends on how well the CSS plays with what else is in the composer.

Sorry, have been busy with a big project and classes starting back.

Tanner

No worries man, just curious so I could have a direction if it turns out I can help. I'm starting classes soon to so I get it.

Need a hand for getting that part set? Help me out to get started and I'll see what I can do.

a_5mith

I was looking at this, but got sidetracked with a few issues I ran into, mainly the regex used. As it's not as simple as I'd of liked.

I don't think spans will work, spans need to go on the outside of the paragraph tags, not inside. Each new line in NodeBB is given a new paragraph tag, so I believe that the span will end up inside a paragraph tag. Which won't work.

What you would need to do instead is give that paragraph tag the class of align-right or align-center.

I've explained it in this jsfiddle I wrote whilst caffeined to my eyeballs on energy drinks. http://jsfiddle.net/srm2dftu/1

psychobunny

You can use text-center and text-right, it's built into bootstrap. What's the regex you're trying to do maybe I can give it a shot