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

Feature requests
1

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

15 Likes
2

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

3

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

2 Likes
4

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

1 Like
5

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.

2 Likes
8

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

9

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

1 Like
10

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.

11

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! :slight_smile: and if i could opt-click the icon to go into source mode, it would be heaven

12

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!

13

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

Screenshot 2022-12-09 at 14.17.02
Screenshot 2022-12-09 at 14.17.021598×278 6.77 KB

14

in vanilla obsidian there are 2 by default.

15

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

3 Likes