Add Glossary shortcode + editor buttons

[alex-418]

Follow the existing footnotes shortcode as an example to create a Glossary shortcode with 2 visual editor buttons:

Button 1: The functionality of the Glossary shortcode will be to reference a Glossary ID, and render it in.

Button 2: If no param list alphabetically all glossary terms that are published. Bold with a colon, followed by the definition.

[alex-418]

Two things left to do:

1.) Change https://github.com/BCcampus/pressbooks/blob/062bee1e964042284efc677f5b1518216d78a098/assets/src/scripts/glossary.js#L119 to insert the listbox value the user selects. Currently inserts mySelection, or the default listbox selection if the term doesn't exists.

2.) Make case insensitive: This turned out to be a bit tougher to do than originally thought. Approach will be to convert the glossary terms to lowercase, and mySelection as well before comparing.

3.) If the user selects a different term than highlighted when they hit the button, don't over-write their selection.

[josieg]

Hi Alex,

This looks great! I found a few things that may not be relevant to this ticket and others that may be desired behavior, but I'm mentioning them all just in case!

1. When I don't have an exact match, I am asked to select a term from the list below. Can we alphabetize that list?

2. In the web view, terms inside the glossary-term short code disappear. For example:

   I  like [pb_glossary id="49"]ducks[/pb_glossary]. A [pb_glossary id="43"]tree[/pb_glossary] is tall.

looks like this in the web book:

> I like . A is tall. 

3. Also, this may be desired behaviour, but just in case it's not: I highlight the term "ducks" but I have "duck" in the glossary. I will get a "Term not found" notice and be asked to select a term from the drop down. I select "duck" and click insert and am given this:

   I like ducks [pb_glossary id="49"]duck[/pb_glossary].

From there, I can remove the first "ducks" and edit the term inside the shortcode to read "ducks."

4. In relation to the previous point, if the term I want to mark as a GL in the content is capitalized and the glossary term it corresponds with is not, it will be able to find the glossary term, but when inserted, the capitalized term will be replaced with the lowercase term. From there the user has to edit the term in the short code to capitalize it.

For example: The initial sentence, mark "Duck" as the GL:

Mr. Duck likes quackers.

The term is replaced with the lower case:

Mr. [pb_glossary id="49"]duck[/pb_glossary] likes quackers. 

I edit the term to look how I want it:

Mr. [pb_glossary id="49"]Duck[/pb_glossary] likes quackers. 

[bdolor]

This is great feedback Josie. I'll let Alex respond to the rest, but will say that point 2. above is what we're working on today.

[josieg]

The fix we discussed for items 3 and 4 is working great, but the drop-down list of terms is still not alphabetized.

[bdolor]

Alex is still working on the alphabetizing or building a rocket ship...can't be certain.

[alex-418]

@bdolor rocket ship complete @josieg alphabetized