View: Distraction free mode

[mkoskim]

Distraction Free Mode

Many writers like distraction free mode. This should be relatively easy to implement to MaweJS.

I personally haven't used much distraction free editors or modes, but one of my colleague doesn't practically use anything else. So, there are people who love this kind of mode. But because I don't personally use them, I don't know much about the design and features people want in it.

To get some ideas how distraction free editors and modes work, here is a link:

https://selfpublishing.com/distraction-free-writing-apps/

Some like dark theme and typewriter font (FocusWriter):

For MaweJS, if you don't want to tailor CSS too much, something like this should be easily done:

Steps

Add a view button to app.js

You can basically copy-paste some other view settings. Give the view name, get an icon, add it to views list and view switch-case in view selection. You can basically first create empty view (return null). Related code:

ViewArea: https://github.com/mkoskim/mawejs/blob/master/src/gui/app/app.js#L158
ViewSelect: https://github.com/mkoskim/mawejs/blob/master/src/gui/app/app.js#L228

Picking icon: Go to Material UI Icons:

https://mui.com/material-ui/material-icons/

Pick a icon you think looks like distraction free mode. My personal suggestion: full screen icon.

Copy the name of the icon. Add it to export here:

https://github.com/mkoskim/mawejs/blob/master/src/gui/common/factory.js#L102

Create a view

It is probably easiest to be created under src/gui/editor folder, where the regular editor is. That way you have easy access to slateEditor.js. For example, create file distractionfree.js to src/gui/editor/

The normal editor code is in editor.js. Most of this code is related to toolbar and side bars:

https://github.com/mkoskim/mawejs/blob/master/src/gui/editor/editor.js

The view is created in SingleEditView:

https://github.com/mkoskim/mawejs/blob/master/src/gui/editor/editor.js#L70

There is already out-commented code there, used for development, debugging and sketching, which places just editor in the view. For example, this piece puts editor at left, and shows buffer at right:

https://github.com/mkoskim/mawejs/blob/master/src/gui/editor/editor.js#L267

Creating the actual editor in the middle happens in EditorBox here:

https://github.com/mkoskim/mawejs/blob/master/src/gui/editor/editor.js#L557

You can forget editor toolbar with search buttons and such. You can also forget indices and notes editors. Just grab code related to edit body and you are fine.

3. Optional: Tailored CSS

If you don't want to touch CSS, it is totally fine. Use regular CSS, regular Board, and Sheet.Real (it has larger margins, matching the default margins in RTF's).

Optionally you can create tailored CSS. This is mainly if you want to try dark mode and typewriter font. The regular CSS used by editor is here:

https://github.com/mkoskim/mawejs/blob/master/src/gui/common/styles/sheet.css

You could try to make a new Sheet mode (there are .Sheet.Condensed, .Sheet.Regular, .Sheet.Real). Add .Sheet.DistractionFree or something.

.Sheet is placed in div.Board. The main purpose of Board is to take scrollbar. You can make custom board, too, if you like to change background colors or similar.