feat: raw mode implementation

[jpuri]

Basic raw mode implementation, it still needs some brushup.

@spbyrne, @DirtyF : some idea about the design on this feature will help me.

---

Closes #626

[github-actions[bot]]

	Warnings
:warning:	@tinacms/dev please add to a Milestone before merging
:warning:	@tinacms/icons is missing dependencies for the following packages: * react

Modified Packages

The following packages were modified by this pull request:

• @tinacms/icons
• react-tinacms-editor

  Generated by :no_entry_sign: dangerJS against 12786ed1a048286396117836d3deb6821325a026

[DirtyF]

We could use a Markdown editor Icon in the toolbar for a start, with an active/inactive state.

Similar to Bold when you click on the Markdown icon you switch from WYSIWYG to Raw Markdown view. The icon tooltip would say "Switch to Markdown/Swith to WYSIYM". Even better it we can use a true switch button.

[jpuri]

@DirtyF : If we plan to keep menu bar in raw mode, we need to implement each button also for raw mode, for instance pressing B in raw mode should bold text, etc.

[DirtyF]

@jpuri I can see that coming later but for now raw mode would be just "let me edit Markdown source", so if all buttons are disabled in Markdown mode for now, it's fine for a start.

Whatever simple solution we can come up with to switch between views, if it's a text link "Switch to Markdown" outside the toolbar, will do

[jpuri]

From code perspective not keeping toolbar altogether is convenient, keeping it disabled will still have some more work.

[spbyrne]

I think putting it in the toolbar is likely ideal (disable other controls when raw mode is enabled) but I'm going to mock up some options to see if an alternative might work. I don't think the markdown icon is very obvious vs. a word like 'raw' since not everyone is familiar with markdown, although if they're not familiar with markdown it's possible the raw mode wouldn't be useful in the first place.

[jpuri]

@spbyrne : I can work to create a disabled toolbar option for now, we can enable them as we add implementation for the buttons. Some options like redo, undo may be more complicated to implement for raw mode.

It will take more development time, but that is ok if this is the planned design.

[spbyrne]

Here's what both a text and an icon toggle in the toolbar would look like:

Here's two options outside the toolbar:

[spbyrne]

I think we should definitely opt for the in-toolbar option.

[jpuri]

Hey @spbyrne : that looks good 👍 I will start working on option-1 in-toolbar, keeping buttons disabled for now.

[DirtyF]

I agree an icon alone is never easy to understand but we have tooltips coming now, so we should be good.

WordPress uses the Markdown Icon in Gutemberg

[spbyrne]

@DirtyF Good point! I've added the markdown icon for this purpose. This will be consistent with other toolbar options.

[DirtyF]

I couldn't test it in the demo, just in a storybook and yeah it still needs some love from our beloved designer.

[jpuri]

Hey @spbyrne : I did some improvements to it, can you also take a look as you get time.

[spbyrne]

Here's a preview of the updates to the toggle. The gif compression removes the grey background on the active markdown button, and the Tina css properties aren't available in storybook. In a regular site setting it should have a grey background & blue fill when active, which the MenuButton already provides.

I find it funny we have two identical components, one that enables markdown mode, and one that enables wysiwyg mode. When you click one button it's replaced with the other. A single toggle button makes a lot more sense to me but I don't have a good enough understanding of how this is set up so I assume it has to be done this way.

[jpuri]

@DirtyF , @ncphillips, @spbyrne : code changes are good to be merged as initial version of raw mode toggle. We should plan these 2 tasks more:

1. Unit test coverage of new components added.
2. Enabling menu options by implementing the functionality.