Easily switch between source mode <-> live preview <-> preview

[Cat]

Use case or problem

The problem is that when live preview mode is turned on, selecting the “edit/preview” toggle allows toggles only between live preview and preview modes. So if I have the live preview option turned on, I currently cannot switch to edit mode, and can’t use live preview mode if I want to use edit mode without first restarting the vault.

Proposed solution

The availability of live preview mode could instead be an optional addition to edit and preview modes - each of which can be toggled on/off as available modes in the vault. This would mean that users can have the vault have any combination of the three modes (E+LP+P / E+P / E+LP / LP+P / E / LP / P) turned on to use in the vault (although of these, it seems like nobody would use just P mode - it might still be useful for a presentation/demo, for instance).

[WhiteNoise]

you can, there is command palette option: toggle source mode.

[argentum]

@WhiteNoise I believe the idea is to be able to switch between source <-> LP <-> preview easily. Right now, if you are in preview mode, first you need to toggle back to edit (with or without LP), then toggle between source <-> LP.

[Cat]

Toggle source mode, as far as I have tried it, is not the same as the edit mode without the live preview toggle - it doesn’t have the CSS additions that are available to edit mode in my vault (this includes things like list styles, tag pills, etc which work on edit mode but not in either Live Preview or in the source mode if live preview is enabled).

[WhiteNoise]

It does support css styling, they are different from the old edit mode.
Source mode is what you currently see on mobile. If your theme/snippets work on mobile, they will work in source mode on new desktop editor.

I agree with @argentum on keeping this FR as the ability to switch quickly between source mode <-> Live Preview <-> Preview.

As licat said multiple times, the old editor (edit mode) will still be available as a legacy option for a long while (and eventually be deprecated). Easily switching between live preview and the old edit mode won’t be supported first party. Maybe somebody can write a plugin for doing it.

[Cito]

@argentum

I believe the idea is to be able to switch between source ↔ LP ↔ preview easily. Right now, if you are in preview mode, first you need to toggle back to edit (with or without LP), then toggle between source ↔ LP.

Yes, that’s exactly what I’m missing.

[pzol]

I use a hotkey CMD+SHIFT+S to switch between the modes…

[argentum]

This is not currently possible. You can only switch between Edit <-> Reading view. Or beetween modes in Edit: LP mode <-> Source mode.

But you can’t go from Reading <-> the mode you didn’t have active on Edit. So if you had Source mode, you can’t go from Reading <-> LP. You have to do Reading ->Source → LP.

[StefanoCecere]

i, too, configured an hotKey to go to source (i prefer working in source mode!)

anyway as i’m here: the icon to switch from editing to reading isn’t clear! you never know if you’re in editing or in preview! and if i could opt-click the icon to go into source mode, it would be heaven

[AriesOdyssey]

Hi Stefano,

Do you have this custom hotkey made in css or with a plugin? I’d like to be able to do this too (as i also prefer working in source mode) so any help will be appreciated!

[StefanoCecere]

i just mapped the command to Cmd+Shift+E
we don’t have any visual clue in what state we are, but it works!

[WhiteNoise]

in vanilla obsidian there are 2 by default.

[AlanG]

@StefanoCecere @AriesOdyssey you can switch between all three modes with a bit of javascript. If you put this in a Templater template, you can add it as a hotkey. Or any other plugin you prefer to launch arbitrary JS.

Source mode

const view = app.workspace.activeLeaf.getViewState()
view.state.mode = 'source'
view.state.source = true
app.workspace.activeLeaf.setViewState(view)

Live preview

const view = app.workspace.activeLeaf.getViewState()
view.state.mode = 'source'
view.state.source = false
app.workspace.activeLeaf.setViewState(view)

Reading mode

const view = app.workspace.activeLeaf.getViewState()
view.state.mode = 'preview'
app.workspace.activeLeaf.setViewState(view)

I spend most of my time in Reading mode, but I use the above to switch to editing mode automatically when inserting a template. I just put the code at the end of the template.

[Nelvin]

Hi Alan,

tried to modify this to a version where I can cycle through all 3 modes but when I activate the reading preview mode the view somehow seems to lose the focus / cursor mode and I can’t edit the node when I’m back in either live preview or source mode.

Tried to find a api function/object to focus the view but with no success so far, probably because I just don’t know where to look exactly.

Maybe you have an idea of how to better implement this?

const view = app.workspace.activeLeaf.getViewState()
if(view != null)
{
    if(view.state.mode == 'preview')
    {
        view.state.mode = 'source'
        view.state.source = true
    }
    else if(view.state.mode == 'source')
    {
        if(view.state.source == true)
        {
            view.state.source = false
        }
        else
        {
            view.state.mode = 'preview'
        }
    }
    app.workspace.activeLeaf.setViewState(view)
}

[AlanG]

@Nelvin

Tried to find a api function/object to focus the view

Like this:

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

You might also find some useful concepts in the post I just made here:

Templater script : Create a new template -> open in split view -> paste link to the new note

That’s a great idea! I’ve used it to improve my new note template. Here’s how you do the split: const file = app.vault.getAbstractFileByPath('path/to/new_note.md') // Create the new leaf const newLeaf = this.app.workspace.getLeaf('split') await newLeaf.openFile(file) // Set the view to edit mode const view = newLeaf.getViewState() view.state.mode = 'source' newLeaf.setViewState(view) // Give focus to the new leaf this.app.workspace.setActiveLeaf(newLeaf, { focus: true }) // Move the cursor to …

[Nelvin]

Yeah that’s exactly what I was looking for.

I’ll have a look at your linked post as well.

Thanks a lot.

[gino_m]

Just what the doctor ordered.

I have a multi-command Commander macro that deals with Templater+MetaEdit, Apply Patterns regex changes, Linter YAML key reordering and Publishing that works better when initiated from Source Mode.

Cheers

[argentum]

Sorry @AlanG I do not use templater, so to get this straight… you put all three of those in a single template and switch between the modes in a smart way? Or do you just add one of those to be able to switch to that specific mode?

[StefanoCecere]

i still think that the Editing / Reading view switch, and the Source Mode on/off, is still one of the worse UX/UI part of Obsidian

i keep loosing many minutes a day dealing with these switch and to understand in which view i’m currently on.

Am I the only one? i know Obsidian dev and UI perfections!

[stef.rausch]

There are different approaches you can use. Save all three snippets in different files and use:

• Templater or
• RunJS

You have to register the commands in the respective setting of the plugin and you can set up hotkeys (shortcuts) to trigger them.