How to get an action button to circulate through live preview -> source -> reading view?

[tophee]

What I’m trying to do

The “current view” button at the top right of the middle section of the obsidian UI only toggles between Reading view and Preview mode. I would like that button to also include “source view” and I seem to remember having seen this in some Obsidian tutorial, so it should be possible, but can’t figure out how.

Things I have tried

The closest I’ve been able to get to the desired solution is to add another command button with the command “Toggle Live Preview/Source mode”, which does nothing when I’m in Reading mode and toggles between live preview and source mode when I’m in preview mode. What I don’t like about this workaround is that the button-icon doesn’t change like the preview/reading mode button does, and, of course: it would be much more convenient to have just one button for all three modes.

There is such a button at the bottom but I want it at the top. Also, that button is not a toggle button but it opens a menu where I can choose one of the three modes. Again: close. but no cigar.

I’m sure someone has figured this one out, right?

[blue_emperor]

Not giving solution, but other approach. You should use keyboard hotkeys for all of them, each of them are very powerful modes. I strongly recommend keyboard driven workflow when toggling between read, source and live preview.

• Toggle reading view. Cmd + e or Lalt + e
• Toggle live preview / Source mode. Cmd + Shift + e or Lalt + Shift + e

Note: these hotkeys are my recommendations.

[tophee]

Thanks! Yes, I am also a proponent of keyboard shortcuts. So my question could also be rephrased in terms of keyboard shortcuts: I want one that cycles through all three modes, rather than two different ones that toggle between live preview and source and the other between reading and edit.

[AlanG]

@tophee you can create a template with Templater and assign it to a hotkey or custom button to cycle all 3 modes:

<%*
// Cycle through the three workspace modes
const view = app.workspace.activeLeaf.getViewState()
if (view.state.mode === 'source' && view.state.source === true) {
	// In source mode, set to live preview
	view.state.source = false
} else if (view.state.mode === 'source') {
	// In live preview, set to reading mode
	view.state.mode = 'preview'
} else {
	// In reading mode, set to source mode
	view.state.mode = 'source'
	view.state.source = true
}
app.workspace.activeLeaf.setViewState(view)
app.workspace.activeLeaf.view.editor.focus()
%>

[blue_emperor]

I don’t understand why this is useful because the keyboard has over 100 keys. There’s no need to make buttons to circulate multiple actions.

[CawlinTeffid]

Different strokes for different folks. For many people hotkeys are a hassle if they’re not for something they use constantly.

[JimK]

@blue_emperor

I don’t understand why this is useful because the keyboard has over 100 keys. There’s no need to make buttons to circulate multiple actions.

It’s easier to remember one key combo then three is my guess.

[Nelvin]

You need to add the

app.workspace.activeLeaf.view.editor.focus()

to the end of the script, as you suggested when helping me.

Otherwise the view has lost the focus once you’ve been in reading mode and you can’t edit the file without additional shortcuts or mouse clicks.