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

[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.

[argentum]

Gotcha. That made it clearer. I wasn’t sure if this was an actual workaround, but I reckon this is a templater script which means one has to set up the hotkeys in some way in the plugin and one doesn’t need to invoke a template. I still don’t use templater, and would prefer if this was a core feature but for other folks out there this helps. Thanks.

[stef.rausch]

They can be either Templater pure scripts, i.e., no output – one per command. Or JavaScript code blocks in one or several files, depending on your organisation preferences, for RunJS to run.

You might even use DataviewJS to force a specific “view”, to achieve a similar result as the Force note view mode plugin, bwydoogh/obsidian-force-view-mode-of-note (github.com), without the need to install it. However, changing a view mode is more “permanent” in this case. Every time the DataviewJS gets triggered, it will “revert” to the initial state if no additional logic is added.

But I am on the same page as all of you: It should be a core feature!

[Fred_V]

I put the code as templater script. Then only one line of code is needed to call this function on any template, at start. Thanks a lot. My default mode is reading view and it was impossible to insert template in existing note if not previously switched to edit mode. I’m surprise this option or function is not native in templater.

[Fred_V]

For me it’s the opposite. It’s a top feature. I’m on read mode and only switch to edit with ctrl+E when needed.