Add tabs to demo site and PresetPlugin

[Andres-CT98]

Description:

The demo site has only one ribbon which contains all buttons on it. This makes it hard to debug, as well as general demo site usage, when constantly using the buttons that exist only on the expanded ribbon. Here is an example of the full workflow of creating a 3x3 table and making its central cell red with thick borders:

Fix

Tabs

Created tabs that modify which buttons show up on the ribbon, as well as making some common use buttons permanently accessible outside the ribbon. The old ribbon is still the default one under the Main tab. Here is the previous workflow under the new system:

The buttons made accessible outside the ribbon are: Undo, Redo, Zoom, Dark mode toggle, Export model, and Pop out window.

Presets

To improve the workflow even more, a preset plugin was implemented so that common use cases, or uncommon ones useful for testing, can be accessed at the press of a button and persist on page reloads.

Miscellaneous changes

• Fix issue of Side pane persisting on reload
• Created an Image section for the Format Sate Side pane when an image is selected.
• Made the border of the Table section for the Format Sate Side pane reflect the current Table border format to apply.
• Some table edit button icons (Align, Merge, and Split) were removed and made to only show their label. This was done for readability as well as those buttons having reused icons. All functions are still on the Table context menu.

Warnings and implications

• Button placements on each tab are not finalised

Made during FHL Week

[JiuqingSong]

No need to update editor for ContentChanged event. Just do it for EditorReady should be ok.

[Andres-CT98]

It needs to do it to update the CSS of the selected Preset button.