Wysiwyg editor issues setting up and configuring / using it

Really confused how to do basic things with this toolkit, the example docs should allow full example code (including css/js) to be implemented easily and work as expected, this is not the case.

I've bought a licence for the pro kit and downloaded MDB5-STANDARD-UI-KIT-Pro-Advanced-4.3.0

I am using Bootstrap Studio (but to be honest that is irrelevant to my query) and i'm trying to add a Wysiwyg editor to my page and then configure it to be useful - this is where it gets stuck or lost in translation.

I have the following files loaded:

wysiwyg.min.css in the header wysiwyg.min.js in the footer after jquery is loaded - I don't actually need jquery on the site but it's only for this plugin.

I have the following html in the page:

<div class="wysiwyg" data-mdb-wysiwyg="wysiwyg" data-mdb-wysiwyg-styles-section="false">
              <br/>
              <p style="text-align: center;"><img src="https://mdbcdn.b-cdn.net/wp-content/uploads/2018/06/logo-mdb-jquery-small.webp" class="img-fluid"></p>
              <h1 style="text-align: center;">MDBootstrap</h1>
              <p style="text-align: center;">WYSIWYG Editor</p>
              <p style="text-align: center;"><a href="https://mdbootstrap.com" target="_blank" contenteditable="false" style="font-size: 1rem; text-align: left;">MDBootstrap.com</a>&nbsp;© 2020</p>
              <p style="text-align: left;"><b>Features:</b></p>
              <ul>
                <li>Changing block type</li>
                <li>Text formatting (bold, italic, strikethrough, underline)</li>
                <li>Setting text color</li>
                <li>Setting color highlight</li>
                <li>Text aligning</li>
                <li>Creating a list (bulled or numbered)</li>
                <li>Increase/Decrease indent</li>
                <li>Inserting links</li>
                <li>Inserting pictures</li>
                <li>Insert horizontal line</li>
                <li>show HTML code</li>
                <li>Undo/Redo</li>
              </ul>
              <p><b>Options:</b></p>
              <ul>
                <li>Translations</li>
                <li>Using your own color palette</li>
                <li>Disabling/enabling sections</li>
              </ul>
              <p><b>Methods:</b></p>
              <ul>
                <li>Get HTML code from editor</li>
              </ul>
            </div>
          </div>

This is how it looks: https://www.evernote.com/l/ADeD4olmEw9P-4P0dVmrc3viFSLvZoLXz4kB/image.png

The issue is I can display the editor which does load the toolbar, however the following issues now persist:

1. I cant find anything in the documentation to show me how the toolbars work - when I click on justify right text, nothing happens. The DOM is not modified (i.e. i'd expect a class to be added to the highlighted line in the editor for instance).
2. How can I modify the list of styles - in fact how do I just add to the list, there is nothing there atm
3. I can turn off some elements such as the styles dropdown, however I want full control over which icons show/hide i.e. I don't want the image upload option but do want the text formatting options (apart from strikethrough etc) - how do I do this?

I'd expect much better documentation for a paid product along with examples however there seems to be a lot of over complex routes to getting the kit even running, let alone using it in real world examples.

Simon